/* ==========================================================
   FLOORING & NATURAL STONE — PAGE FOUNDATION
========================================================== */

:root {
    --flooring-red: #e60012;
    --flooring-red-dark: #c90010;
    --flooring-black: #0d0e12;
    --flooring-text: #51535a;
    --flooring-border: #d8d8d8;
    --flooring-light: #f6f6f6;
    --flooring-white: #ffffff;
}

html {
    scroll-behavior: smooth;
}

body.flooring-page {
    margin: 0;

    background-color: var(--flooring-white);
    color: var(--flooring-black);

    font-family:
        "Plus Jakarta Sans",
        Arial,
        sans-serif;

    overflow-x: hidden;
}

body.flooring-page *,
body.flooring-page *::before,
body.flooring-page *::after {
    box-sizing: border-box;
}

body.flooring-page img {
    max-width: 100%;
}

body.flooring-page button,
body.flooring-page input,
body.flooring-page textarea,
body.flooring-page select {
    font: inherit;
}

body.flooring-page button {
    cursor: pointer;
}

body.flooring-page a {
    color: inherit;
    text-decoration: none;
}

.flooring-main {
    width: 100%;
}

.flooring-include {
    width: 100%;
}

.flooring-page-container {
    width: min(100% - 80px, 1460px);
    margin-inline: auto;
}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

.flooring-page a:focus-visible,
.flooring-page button:focus-visible {
    outline: 3px solid rgba(230, 0, 18, 0.35);
    outline-offset: 4px;
}


/* ==========================================================
   RESPONSIVE CONTAINER
========================================================== */

@media (max-width: 1100px) {
    .flooring-page-container {
        width: min(100% - 48px, 1460px);
    }
}

@media (max-width: 680px) {
    .flooring-page-container {
        width: min(100% - 32px, 1460px);
    }
}

@media (max-width: 390px) {
    .flooring-page-container {
        width: min(100% - 24px, 1460px);
    }
}