@import url(/src/styles/global/imports.css);

* {
    font-family: "Nunito", serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    outline: none;
    border: none;
    transition: all .2s linear;
}



html {
    font-size: 62.5%;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
    overflow-x: hidden;

    &::-webkit-scrollbar {
        width: 2px;
    }

    &::-webkit-scrollbar-track {
        background: var(--second-color);
    }

    &::-webkit-scrollbar-thumb {
        background: var(--primary-color);
    }
}

body {
    background: var(--second-color);

}

section {
    padding: 5rem 9%;
}





.banner {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, .2)), url(/src/assets/img/pages/ofertas/bannerPromo.avif) no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;
    padding-top: 6rem !important;


    span {
        font-size: 3rem;
        font-weight: 500;
        color: var(--primary-color);
    }

    h1 {
        padding-top: 1rem;
        color: var(--white);
        text-transform: uppercase;
        font-size: 4rem;
    }

    p {
        margin: 1rem auto;
        max-width: 60rem;
        font-size: 1.9rem;
        font-weight: 500;
        color: var(--white);
        line-height: 2;
    }
}


/* Product card  */

.product-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 34px;
    max-width: 1600px;
    margin: 3rem auto 30rem;
    padding-inline: clamp(16px, 4vw, 40px);
}

.product-container .product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--soft-bg);
    box-shadow: 0px 0px 15px .1rem var(--second-color);
    transition: transform .25s ease;

    &:hover {
        transform: translateY(-4px);
    }

    &>a {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .badge {
        position: absolute;
        top: 12px;
        left: 0;
        z-index: 2;
        text-transform: uppercase;
        font-size: 1.2rem;
        font-weight: 700;
        background: linear-gradient(130deg, var(--red) 93%, transparent 90%);
        color: var(--white);
        padding: 4px 10px;
    }

    .product-tumb {
        background: var(--white);
        aspect-ratio: 1 / 1;
        /* padding: 16px; */

        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 80%;
            height: 80%;

            max-width: 85%;
            max-height: 85%;

            object-fit: contain;
        }
    }

    .product-details {
        display: flex;
        flex-direction: column;
        padding: 10px 12px;
        flex-grow: 1;

        .product-catagory {
            font-size: 1.1rem;
            font-weight: 700;
            text-transform: uppercase;
            color: var(--soft-light);
            margin-bottom: 4px;
        }

        h2 {
            font-size: 1.3rem;
            line-height: 1.35;
            text-transform: uppercase;
            color: var(--white);
            margin-bottom: 6px;

            &:hover {
                color: var(--primary-color);
            }
        }

        p {
            font-size: 15px;
            line-height: 20px;
            margin: 0.5rem 0;
            color: var(--white);
        }

        .product-bottom-details {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0;

            min-width: 0;
            gap: 8px;
            white-space: nowrap;
            overflow: hidden;


            .product-price {
                font-size: 2rem;
                font-weight: 750;
                color: var(--white);
                white-space: nowrap;
                flex-shrink: 0;
            }

            .product-price small {
                font-size: 75%;
            }

            .product-links {
                text-align: right;


                display: flex;
                align-items: center;
                gap: 2px;

                white-space: nowrap;
                flex-shrink: 0;

                a {
                    margin-left: 5px;
                    color: #e1e1e1;
                    transition: 0.3s;
                    font-size: 17px;

                    &:hover {
                        color: #fbb72c;
                    }
                }

                i {
                    color: var(--gold);
                    font-size: 1.2rem;
                    line-height: 1;
                }
            }
        }
    }


    .product-details .rgb-divider {
        position: relative;
        width: 100%;
        margin-top: auto;
        height: 6px;
        margin-bottom: 0.6rem;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        border-radius: 70%;
    }

    .product-details .rgb-divider::before,
    .product-details .rgb-divider::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: var(--rgb);
        background-size: 850%;
        width: calc(100% + 10px);
        height: 0.2rem;
        border-radius: 50%;
        z-index: 1;
        animation: rgb-line-animate 35s linear infinite !important;
    }

    /* Efeito de blur */
    .product-details .rgb-divider::after {
        filter: blur(3px);
        z-index: 0;
        animation: rgb-line-animate 20s linear infinite;
    }

}

@keyframes rgb-line-animate {
    0% {
        background-position: 0 50;
    }

    50% {
        background-position: 400% 0%;
    }

    100% {
        background-position: 0 0;
    }
}



.product-container .buyBtn {

    background: var(--primary-color);
    display: flex;

    &:hover {
        background: var(--red);
    }

    h3 {
        margin: auto;
        padding: 1.2rem;
        font-size: 1.3rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--white);
    }
}




/* media queries */

@media (min-width: 1600px) {
    .product-container .product-price {
        font-size: 1.9rem;
    }
}

@media (min-width: 1200px) {
    .product-container {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .product-details .rgb-divider{
        margin-bottom: 1.5rem !important;
    }
}


@media (min-width: 768px) and (max-width: 1453px) {

    html {
        font-size: 55%;
    }

    section {
        padding: 3rem 2rem;
    }

    .product-container {
        max-width: 95%;
        margin-bottom: 30rem;

    }

}


@media (max-width: 768px) {

    section {
        padding: 3rem 1rem !important;
    }

}

@media (max-width: 480px) {
    .product-container {
        gap: 16px;
    }

    .product-container .product-price {
        font-size: 1.8rem;
    }

    
}


@media (max-width:360px) {

    html {
        font-size: 50%;
    }

}