@import "_reset.css";
@import "_fonts.css";
@import "_variables.css";
@import "_product.css";
@import "_cart.css";

@import "_doors.css";



* {
    box-sizing: border-box;
}

body {
    font-family: var(--base-font-family), sans-serif;
    font-size: var(--base-font-size);
    color: var(--base-font-color);
    text-rendering: optimizeLegibility;
    background-color: var(--base-background-color);
}


::selection {
    color: var(--base-background-color);
    background-color: var(--base-font-color);
}

.header {
    border-bottom: 1px solid #ddd;
    position: sticky;
    top: 0;
    background-color: #fff;
    height: 6rem;
    display: flex;
    align-items: center;

    .header__inner {
        width: calc(100% - clamp(2rem, 5vw, 6rem));
        margin-inline: auto;
        display: flex;
        justify-content: space-between;
        column-gap: 2rem;
    }
}
.navigation {
    display: flex;
    align-items: center;

    .navigation__list {
        column-gap: 2rem;
        display: flex;
    }

    .navigation__item {
        display: inline-flex;
    }

    .navigation__link:hover {
        text-decoration: underline;
    }

    .navigation__link--active {
        text-decoration: underline;
    }
}


.brand {
    display: flex;
    gap: 1rem;
    align-items: center;

    .brand__label {
        font-weight: bold;
        font-size: 1.2rem;
    }
}

.main-content {
    margin-inline: auto;
    max-width: 1400px;
}