/* Taurus Pages and Landers */

:root {
    --deep-green: #060B08;
    --green: #182D20;
    --middle-green: #436952;
    --light-green: #81B59D;
    --red: #F1471D;
    --cream: #FFF9EF;
    --dark-cream: #F0E7D6;
    --tan: #D6C7AD;
    --cream-stroke: #DAD2B2;
    --dirty-cream: #EEEBDC;
    --bronze: #65614D;
    --deep-brown: #1C1B13;
    --light-gray: #A3A198;
}

@font-face {
    font-family: Manuka;
    src: url(../../fonts/Manuka-Bold.otf);
    font-weight: 700;
}

@font-face {
    font-family: Manuka;
    src: url(../../fonts/Manuka-Black.otf);
    font-weight: 900;
}

@font-face {
    font-family: Manuka;
    src: url(../../fonts/Manuka-Regular.otf);
    font-weight: 400;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 100%;
    font-family: "Inter", sans-serif;
    background: var(--cream);
}

body {
    padding: 0;
    margin: 0;
}

img {
    max-width: 100%;
}

.trade {
    font-family: 'Inter', sans-serif;
}

.center {
    max-width: 1232px;
    margin: 0 auto;
}

.desktop-only {
    display: flex;
}

.mobile-only {
    display: none;
}

.sales-banner {
    text-align: center;
    background: var(--red);
    color: var(--cream);
    font-size: 1rem;
    font-weight: bold;
    padding: 0.5rem 0;
    text-transform: uppercase;

    span {
        font-weight: normal;
        text-transform: none;
    }
}

header {
    width: 100%;
    border-bottom: 1px solid var(--cream-stroke);
    margin-bottom: 2rem;
    padding: 0 2rem;

    & .logo {
        width: 128px;
        padding: 1rem 0;
    }
}

.hero {

    .content {
        width: 100%;
        display: flex;
        gap: 4rem;

        .product-images {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            flex: 0 0 700px;

            .product-image {
                border-radius: 2rem;
                overflow: hidden;
                display: flex;
            }

            .thumbnails {
                display: flex;
                gap: 1rem;

                .thumb {
                    width: 6rem;
                    aspect-ratio: 1;
                    border-radius: 1rem;
                    overflow: hidden;
                    display: flex;
                    cursor: pointer;
                }
            }

            .disclaimer {
                font-size: 0.5rem;
                padding: 1rem 0;
                border-top: 1px solid var(--cream-stroke);
                color: var(--light-gray);
            }
        }

        .product-details {

            .in-stock {
                background: var(--middle-green);
                color: var(--cream);
                padding: 0.25rem 0.5rem;
                font-size: 0.75rem;
                font-weight: bold;
            }

            .pre-text {
                font-size: 0.75rem;
                font-weight: bold;
                text-transform: uppercase;
                color: var(--bronze);
                margin-bottom: 0.5rem;
                display: flex;
                align-items: center;
                gap: 0.5rem;
                letter-spacing: 0.05em;

                img {
                    height: 1rem;
                    width: auto;
                }
            }

            h1 {
                font-family: 'Manuka', sans-serif;
                font-size: 4rem;
                font-weight: bold;
                color: var(--red);
                text-transform: uppercase;
                line-height: 90%;
                margin: 0;
            }

            h2 {
                background: url(../images/topo-background.png);
                background-size: cover;
                background-position: center;
                display: inline-block;
                border-radius: 0.5rem;
                padding: 0.5rem 1rem;
                color: var(--cream);
                font-size: 1rem;
                margin: 0.5rem 0 1rem 0;
            }

            .price {
                display: flex;
                gap: 1rem;
                font-family: 'Manuka', sans-serif;
                text-transform: uppercase;
                align-items: flex-end;

                .old {
                    font-weight: 300;
                    color: var(--bronze);
                    text-decoration: line-through;
                    font-size: 4rem;
                }

                .new {
                    font-size: 5rem;
                    font-weight: bold;

                    span {
                        font-size: 2.5rem;
                    }
                }
            }

            .button-main {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: var(--red);
                color: var(--cream);
                text-decoration: none;
                padding: 1rem 2rem;
                border-radius: 0.5rem;
                font-weight: bold;
                margin: 1.5rem 0;
                font-family: 'Manuka', sans-serif;
                font-size: 1.8rem;
                text-transform: uppercase;
                letter-spacing: 2px;
                min-width: 256px;
                overflow: hidden;
                position: relative;

                img {
                    margin-left: 1rem;
                    vertical-align: middle;
                }

                & .shine {
                    position: absolute;
                    height: 250%;
                    width: 40px;
                    top: 0;
                    left: -60px;
                    background: linear-gradient(90deg, #ffffff00, #ffffff54, #ffffff00);
                    transform: rotate(45deg) translateY(-35%);
                    animation: shine 3s ease infinite;
                }
            }

            .little-bits {
                border-bottom: 1px solid var(--cream-stroke);
                padding-bottom: 1.5rem;
                font-size: 0.7rem;
                color: var(--bronze);
                display: flex;
                flex-wrap: wrap;
                gap: 0.5rem 1rem;
                margin-bottom: 1.5rem;

                img {
                    height: 0.8rem;
                }
            }

            p {
                margin: 1rem 0;
                line-height: 140%;
                font-weight: 300;
            }

            ul {
                padding: 0.5rem 0;
                margin: 1rem 0;
                line-height: 140%;
                font-weight: 300;

                li {
                    list-style: none;
                    display: flex;
                    gap: 1rem;
                    padding: 0.25rem 0;
                }
            }

            .questions {
                margin-top: 1rem;
                border-top: 1px solid var(--deep-green);

                .row {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 1rem 0;
                    border-bottom: 1px solid var(--deep-green);
                    flex-direction: column;
                    gap: 1rem;
                }

                .question {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                    cursor: pointer;
                    font-size: 1rem;
                    font-weight: 500;

                    .plus {}

                }

                .answer {
                    display: none;
                    font-size: 0.85rem;
                    line-height: 140%;
                }

                .row.open .answer {
                    display: block;
                }
            }

            .trust {
                padding: 2rem 0;
            }

        }
    }
}

.featured {
    background: var(--deep-brown);
    padding: 2rem 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer {
    background: var(--deep-green);
    color: var(--bronze);
    padding: 2rem 0;

    .row {
        display: flex;
        gap: 2rem;

        .logo {
            width: 256px;
        }
    }

    a {
        color: var(--bronze);
        font-size: 0.8rem;
    }

    small {
        font-size: 0.6rem;
        line-height: 140%;
        display: inline-block;
        margin-top: 1rem;
    }
}

@media screen and (max-width: 768px) {
    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }

    .center {
        padding: 0 1.5rem;
    }

    header {
        margin-bottom: 1.5rem;

        & .logo {
            margin: 0 auto;
        }
    }

    .hero {
        background-position: -820px -100px;
        position: relative;
        margin-bottom: -1px;

        .content {
            width: 100%;
            z-index: 500;
            position: relative;
            flex-direction: column;
            gap: 1.5rem;

            & .product-images {
                flex: 0 0 100%;
                gap: 0;
                flex-direction: column;

                .product-image {
                    display: none;
                }

                .thumbnails {
                    margin-left: -2rem;
                    margin-right: -2rem;
                    padding-left: 7.5vw;
                    padding-right: 7.5vw;
                    gap: 1rem;
                    flex-direction: row;
                    overflow-x: auto;
                    scroll-snap-type: x mandatory;
                    -webkit-overflow-scrolling: touch;
                    scrollbar-width: none;

                    &::-webkit-scrollbar {
                        display: none;
                    }

                    .thumb {
                        width: 85vw;
                        flex: 0 0 85vw;
                        border-radius: 1rem;
                        scroll-snap-align: center;
                        cursor: default;
                    }
                }

                .disclaimer {
                    display: none;
                }
            }

            & .product-details {

                h2 {
                    font-size: 0.9rem;
                }

                .price {
                    gap: 0.5rem;

                    .old {
                        font-size: 3rem;
                    }

                    .new {
                        font-size: 4rem;
                    }
                }

                .button-main {
                    width: 100%;

                }
            }
        }
    }

    footer {
        .row {
            flex-direction: column;

            .logo {
                width: 128px;
            }
        }
    }
}

@keyframes shine {
    0% {
        left: -150px;
    }

    40% {
        left: 400px;
    }

    100% {
        left: 400px;
    }
}