@font-face {
    font-family: "Primary";
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/Lato-Regular.woff2");
}

@font-face {
    font-family: "Primary";
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/Lato-Bold.woff2");
}

@font-face {
    font-family: "Primary";
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/Lato-Black.woff2");
}

/*VARS & CONFIGURATION*/
:where(:root, ::before, ::after) {
    --color-black-rgb: 15, 15, 15;
    --font-black: 900;
    --spacing-default: var(--unit-16);
    --border-radius-medium: var(--spacing-default);
    --color-grey-dark: #161616;
    --color-primary-rgb: 246, 224, 201;
    --color-primary: rgb(var(--color-primary-rgb));
}

body {
    background-color: var(--color-black);
    color: var(--color-white);
}

/*VARIOUS*/
::-moz-selection {
    background: var(--color-primary);
    color: var(--color-white);
}

::selection {
    background: var(--color-primary);
    color: var(--color-white);
}

p {
    line-height: 1.75;
}

.section>* {
    position: relative;
    z-index: 1;
}

/*END VARIOUS*/

/* OVERWRITES */
.swiper--1 {
    --swiper-pagination-bullet-width: var(--unit-16);
    --swiper-pagination-bullet-height: var(--unit-16);
    --swiper-pagination-bullet-horizontal-gap: var(--unit-8);
    --swiper-pagination-bullet-inactive-opacity: .5;
    --swiper-pagination-bottom: 12.5%;
}

.swiper--1 .swiper-pagination {
    --swiper-pagination-bottom: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper--1 .swiper-pagination-bullet {
    border: var(--unit-1) solid var(--color-white);
}

.swiper--1 .swiper-pagination-bullet-active {
    background-color: rgba(var(--color-white-rgb), .2);
}

/* END OVERWRITES*/

/* COMPONENTS */
.modal--1 .modal__wrapper {
    border-radius: var(--border-radius-default);
}

.cta {
    display: inline-flex;
    background-color: var(--color-white);
    color: var(--color-black);
    border-radius: var(--border-radius-default);
    padding: var(--unit-12) var(--unit-32);
    text-transform: uppercase;
    border: var(--unit-1) solid transparent;
    cursor: pointer;
}

.cta--secondary {
    background-color: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}

.cta--alternate {
    background-color: rgba(var(--color-white-rgb), .15);
    color: var(--color-white);
    border-color: var(--color-white);
}

.gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(150px);
    z-index: 0;
    pointer-events: none;
}

.width-auto {
    width: fit-content;
}

.columns-2 {
    columns: 2;
}

.gradient[style*="--width"]::before {
    width: var(--width);
}

.gradient[style*="--height"]::before {
    height: var(--height);
}

.gradient--bottom-left::before {
    bottom: 0;
    left: 0;
}

.gradient--top-right::before {
    top: 0;
    right: 0;
}

.gradient::before {
    content: '';
    position: absolute;
    background: radial-gradient(circle, rgba(var(--color-primary-rgb), 1) 0%, rgba(var(--color-primary-rgb), 0) 100%);
    opacity: var(--opacity, .5);
}

.top-bar {
    position: fixed;
    padding: var(--unit-20) 0;
}

.top-bar .menu__item {
    position: relative;
    text-transform: uppercase;
}

.top-bar .menu__item>a {
    font-weight: var(--font-black);
}

.top-bar .menu__item[data-active]>a {
    color: var(--color-primary);
}

.top-bar .menu__item[data-active]::before {
    opacity: 1;
}

.top-bar .menu__submenu-items {
    font-weight: var(--font-bold);
}

[data-scroll-y-dir-thresholed] .top-bar:not([data-autohide="false"]) {
    background-color: var(--color-black);
}

.social {
    list-style-type: none;
}

.social svg {
    width: var(--unit-20);
    min-width: var(--unit-20);
    height: var(--unit-20);
    min-height: var(--unit-20);
}

.line-before {
    position: relative;
    font-weight: var(--font-bold);
    padding-left: calc(var(--unit-32) + var(--unit-16));
}

.line-before::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--unit-32);
    height: calc(var(--unit-1) * 2);
    display: block;
    background-color: var(--color-primary);
}

.form--1 {
    background-color: var(--color-grey-dark);
    border-radius: var(--border-radius-default);
}

.form--1 input,
.form--1 textarea {
    outline: 0;
    background-color: transparent;
    border: 0;
    border-bottom: var(--unit-1) solid var(--color-white);
    padding: var(--unit-10) 0;
    margin: 0;
    color: var(--color-white);
}

.form--1 textarea {
    height: var(--unit-100);
    resize: none;
}

.form--1 input:-webkit-autofill,
.form--1 input:-webkit-autofill:hover,
.form--1 input:-webkit-autofill:focus,
.form--1 input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--color-white);
}

/* END COMPONENTS */

/* HERO */
.hero {
    position: relative;
}

.hero__product {
    display: block;
    border-radius: var(--border-radius-default);
    overflow: hidden;
    height: 100%;
}

/* END HERO */


/* SECTION */
.section:nth-of-type(even) {
    background-color: var(--color-grey-dark);
}

.section:nth-of-type(odd) {
    background-color: var(--color-black);
}

.section__suptitle {
    color: var(--color-primary);
    text-transform: uppercase;
}

.section__title {
    font-weight: var(--font-bold);
}

/* END SECTION*/

/* NAV */
.nav-categories ul {
    list-style-type: none;
    font-size: var(--font-20);
}

.nav-categories svg {
    stroke: currentColor;
    width: var(--unit-20);
    min-width: var(--unit-20);
    height: auto;
}

.nav-categories ul li {
    padding: var(--spacing-default);
    border-bottom: var(--unit-1) solid rgba(var(--color-white-rgb), .25);
}

.nav-categories ul li[data-active] {
    color: var(--color-primary);
}

/* END NAV */

/* PRODUCTS */
.product-list {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--border-radius-default);
}

.product-list__cta {
    position: absolute;
    z-index: 1;
    bottom: var(--unit-28);
    display: flex;
    justify-content: center;
    width: 100%;
    transform: translateY(175%);
}

.product {
    position: relative;
}

.product__images {
    position: relative;
    transform: translateY(-100%);
    bottom: var(--spacing-default);
    --aspect-ratio-portrait: 9/12;
}

.product__description-title {
    position: relative;
    display: inline-block;
    font-size: var(--font-24);
    font-weight: var(--font-bold);
    padding-bottom: calc(var(--spacing-default) / 2);
    margin-bottom: var(--spacing-default);
}

.product__description-title::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: var(--unit-50);
    height: var(--unit-1);
    display: block;
    background-color: var(--color-primary);
}

/* END PRODUCTS */


/* FOOTER */
.section:nth-of-type(even)+.footer {
    background-color: var(--color-grey-dark);
}

.footer {
    padding: var(--unit-50) 0;
}

.footer__logo svg {
    width: 100%;
    max-width: calc(1.75 * var(--unit-100));
    height: auto;
}

.footer__title {
    position: relative;
    font-size: var(--font-24);
    font-weight: var(--font-bold);
    margin-bottom: var(--unit-32);
    padding-bottom: var(--unit-16);
}

.footer__title::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: var(--unit-50);
    height: calc(var(--unit-1) * 2);
    display: block;
    background-color: var(--color-primary);
}

footer ul,
.working-hours-list {
    list-style-type: none;
}

.footer ul:not(.social) *+* {
    margin-top: var(--unit-24);
}

/* END FOOTER */

/*SMALL ONLY*/
@media (max-width: 63.9375rem) {
    .top-bar .menu::before {
        background-color: var(--color-grey-dark);
    }

    .top-bar .menu__item>a {
        font-size: var(--font-24);
    }

    .top-bar .menu__submenu-items {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-default);
    }

    .top-bar .menu__submenu-item {
        font-size: var(--font-20);
    }

    .top-bar .social svg,
    .footer .social svg {
        width: var(--unit-30);
        min-width: var(--unit-30);
        height: var(--unit-30);
        min-height: var(--unit-30);
    }

    .top-bar+.section {
        padding-top: calc(var(--top-bar-height, 6rem) + var(--unit-50));
    }

    .hero {
        padding-top: calc(var(--top-bar-height, 6rem) + var(--unit-50));
        padding-bottom: var(--unit-50);
    }

    .hero__swiper {
        overflow: initial;
    }

    .hero__contact-item svg {
        width: auto;
        height: var(--unit-20);
        min-height: var(--unit-20);
    }

    .section {
        padding: var(--unit-50) 0;
    }

    .section__title {
        font-size: var(--font-30);
    }

    .footer__title::before {
        left: 50%;
        transform: translateX(-50%);
    }

    .form--1 {
        padding: var(--unit-24);
    }

    .small-width-auto {
        width: fit-content;
    }
}

/*LARGE ONLY*/
@media (min-width: 64rem) {

    .cta,
    .top-bar__logo svg,
    .top-bar .menu__item a,
    .social svg,
    .hero__contact-item>* a,
    .swiper--1 .swiper-pagination-bullet,
    .hero__product,
    .product-list__cta,
    .top-bar .menu__item::before,
    .top-bar .menu__submenu-items a::before,
    .product__images {
        transition: var(--transition);
    }

    .top-bar .menu__item::before {
        content: '';
        position: absolute;
        left: calc(-1 * var(--unit-10));
        top: 50%;
        transform: translateY(-50%);
        width: var(--unit-5);
        height: var(--unit-5);
        border-radius: 100%;
        background-color: var(--color-primary);
        opacity: 0;
    }


    .top-bar .menu__submenu-items {
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacing-default) / 1.5);
        background-color: var(--color-primary);
        color: var(--color-black);
        min-width: calc(1.75 * var(--unit-100));
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        padding: var(--spacing-default);
    }

    .top-bar .menu__submenu-items a {
        display: inline-block;
        position: relative;
    }

    .top-bar .menu__submenu-items a::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: var(--unit-1);
        background-color: currentColor;

        opacity: 0;
        transform: scaleX(0);
    }

    .top-bar .menu__submenu-items a:hover::before {
        opacity: 1;
        transform: scaleX(1);
    }

    .top-bar .menu__submenu-items a:hover {
        color: var(--color-black) !important;
        font-weight: var(--font-bold);
    }

    .top-bar+.section {
        padding-top: calc(var(--top-bar-height, 11vh) + var(--unit-100));
    }

    .hero__product {
        transition-duration: 500ms;
    }

    .swiper--1 .swiper-pagination-bullet:hover {
        background-color: rgba(var(--color-white-rgb), .2) !important;
    }

    .cta:hover {
        background-color: var(--color-primary);
        color: var(--color-black);
    }

    .cta--secondary:hover {
        border-color: var(--color-primary);
    }

    .top-bar__logo svg {
        max-width: var(--unit-100);
    }

    .top-bar .menu__item:hover::before {
        opacity: 1;
    }

    .top-bar__logo:hover svg,
    .top-bar .menu__item:hover,
    a:hover {
        color: var(--color-primary);
    }

    .hero {
        padding-top: var(--top-bar-height, 11vh);
        height: var(--screen-height, 100vh);
    }

    .hero__swiper {
        height: 100%;
        display: flex;
        align-items: center;
        overflow: initial;
    }

    .hero__swiper .swiper-wrapper {
        height: auto;
    }

    .hero__swiper .swiper-slide-next .hero__product {
        transform: scale(1.9);
    }

    .hero__swiper .swiper-slide-next .hero__product:hover {
        transform: scale(2);
    }

    .hero__swiper .swiper-slide:not(.swiper-slide-visible) .hero__product {
        opacity: 0;
    }

    .hero__contact svg {
        height: var(--unit-26);
        min-height: var(--unit-26);
        width: auto;
    }

    .section {
        padding: var(--unit-100) 0;
    }

    .section__title {
        font-size: var(--unit-40);
        line-height: 1;
    }

    .product-list:hover .product-list__cta {
        transform: translateY(0);
    }

    .product__images {
        opacity: .7;
    }

    .product__images:hover {
        opacity: 1;
    }

    .footer .social svg {
        width: var(--unit-30);
        min-width: var(--unit-30);
        height: var(--unit-30);
        min-height: var(--unit-30);
    }

    .footer__title::before {
        left: 0;
    }

    .form--1 {
        padding: var(--unit-48);
    }

    .large-width-auto {
        width: fit-content;
    }

    .sal-sol img {
        max-width: calc(1.75 * var(--unit-100));
    }
}