/* =========================
   GLOBAL
========================= */

body{

    background:
    linear-gradient(
        180deg,
        #070b14 0%,
        #0f1625 100%
    );

    color: white;

    overflow-x: hidden;

    font-family: 'Inter', sans-serif;

}

/* =========================
   HERO
========================= */

.hero{

    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    min-height: auto;

    padding:
    20px 40px 60px;

    display: grid;

    grid-template-columns:
    1fr 480px;

    gap: 60px;

    align-items: center;

}

/* =========================
   HERO CONTENT
========================= */

.hero-content{

    display: flex;

    flex-direction: column;

    gap: 28px;

}

.hero-content span{

    width: fit-content;

    padding:
    10px 18px;

    border-radius: 999px;

    background:
    rgba(0,217,255,0.12);

    color: #00d9ff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .5px;

}

.hero-content h1{

    font-size: 74px;

    line-height: .95;

    font-weight: 900;

    max-width: 760px;

    letter-spacing: -3px;

}

.hero-content p{

    max-width: 650px;

    font-size: 18px;

    line-height: 1.9;

    color: #a8b1c4;

}

/* =========================
   HERO PRODUCT
========================= */

.hero-product{

    width: 100%;

    display: flex;

    justify-content: center;

}

/* CARD */

.hero-product-card{

    width: 100%;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.02)
    );

    border:
    1px solid rgba(255,255,255,0.08);

    border-radius: 38px;

    overflow: hidden;

    text-decoration: none;

    color: white;

    backdrop-filter: blur(14px);

    transition: .25s;

    box-shadow:
    0 30px 90px rgba(0,0,0,0.35);

}

.hero-product-card:hover{

    transform:
    translateY(-10px);

    border-color:
    rgba(0,217,255,0.3);

}

/* IMAGE */

.hero-product-image{

    width: 100%;

    height: 390px;

    overflow: hidden;

    background:
    radial-gradient(
        circle at top,
        rgba(0,217,255,0.15),
        transparent 70%
    );

}

.hero-product-image img{

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 32px;

    transition: .3s;

}

.hero-product-card:hover
.hero-product-image img{

    transform:
    scale(1.05);

}

/* INFO */

.hero-product-info{

    padding: 30px;

    display: flex;

    flex-direction: column;

    gap: 18px;

}

.hero-product-info h3{

    font-size: 30px;

    line-height: 1.2;

    font-weight: 800;

}

/* PRICE */

.hero-product-price{

    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;

}

.hero-old-price{

    font-size: 18px;

    text-decoration: line-through;

    color: #7d8698;

}

.hero-new-price{

    font-size: 34px;

    font-weight: 900;

    color: #00d9ff;

}

/* BUTTON */

.hero-product-info button{

    width: 100%;

    height: 58px;

    border: none;

    border-radius: 18px;

    background: #00d9ff;

    color: black;

    font-size: 15px;

    font-weight: 800;

    cursor: pointer;

    transition: .2s;

}

.hero-product-info button:hover{

    transform: translateY(-2px);

}

/* =========================
   SECTION
========================= */

.home-section{

    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    padding:
    20px 40px 80px;

}

/* =========================
   SECTION TOP
========================= */

.section-top{

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 30px;

}

.section-top h2{

    font-size: 40px;

    font-weight: 900;

    letter-spacing: -1px;

}

.section-top a{

    color: #00d9ff;

    font-size: 15px;

    font-weight: 700;

    transition: .2s;

}

.section-top a:hover{

    opacity: .7;

}

/* =========================
   PROMOTIONS
========================= */

.promocoes{

    position: relative;

}

/* TOP */

.promocoes .section-top{

    background:
    linear-gradient(
        135deg,
        #ff7300 0%,
        #ff9d00 100%
    );

    padding: 24px 28px;

    border-radius: 30px;

    box-shadow:
    0 20px 60px rgba(255,140,0,0.22);

}

.promocoes .section-top h2{

    color: white;

    font-size: 42px;

}

/* RIGHT */

.promocoes-right{

    display: flex;

    align-items: center;

    gap: 20px;

}

/* COUNTDOWN */

.promo-countdown{

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
    12px 18px;

    border-radius: 16px;

    background:
    rgba(255,255,255,0.14);

    backdrop-filter: blur(12px);

}

.promo-countdown span{

    font-size: 14px;

    font-weight: 700;

    color: white;

}

#promoTimer{

    font-size: 18px;

    font-weight: 900;

    color: white;

}

/* LINK */

.promocoes .section-top a{

    color: white;

    font-weight: 800;

}

/* =========================
   PRODUCTS GRID
========================= */

.products-grid{

    display: grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(260px,1fr)
    );

    gap: 24px;

}

/* =========================
   PRODUCT CARD
========================= */

.product-card{

    position: relative;

    background:
    rgba(255,255,255,0.04);

    border:
    1px solid rgba(255,255,255,0.06);

    border-radius: 30px;

    overflow: hidden;

    text-decoration: none;

    color: white;

    transition: .25s;

    display: flex;

    flex-direction: column;

    min-height: 100%;

    backdrop-filter: blur(10px);

}

.product-card:hover{

    transform:
    translateY(-8px);

    border-color:
    rgba(0,217,255,0.25);

}

/* PROMO CARD */

.promocoes .product-card{

    border:
    1px solid rgba(255,140,0,0.18);

}

.promocoes .product-card:hover{

    border-color:
    rgba(255,140,0,0.5);

    box-shadow:
    0 20px 50px rgba(255,140,0,0.15);

}

/* =========================
   IMAGE
========================= */

.product-card-image{

    width: 100%;

    height: 290px;

    overflow: hidden;

    background:
    radial-gradient(
        circle at top,
        rgba(0,217,255,0.08),
        transparent 70%
    );

}

.promocoes .product-card-image{

    background:
    radial-gradient(
        circle at top,
        rgba(255,140,0,0.2),
        transparent 70%
    );

}

.product-card-image img{

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 24px;

    transition: .3s;

}

.product-card:hover
.product-card-image img{

    transform: scale(1.05);

}

/* =========================
   PRODUCT INFO
========================= */

.product-card-info{

    padding: 24px;

    display: flex;

    flex-direction: column;

    gap: 14px;

    flex: 1;

}

.product-card-info h3{

    font-size: 20px;

    line-height: 1.4;

    font-weight: 700;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

}

/* =========================
   PRICE
========================= */

/* RATING STARS */
.product-rating{display:flex;align-items:center;gap:2px;margin-top:-6px}
.star-card{font-size:14px;line-height:1}
.star-card.filled{color:#ffb800}
.star-card.half{color:#ffb800;opacity:.6}
.star-card.empty{color:rgba(255,255,255,.15)}
.rating-count{font-size:12px;color:rgba(255,255,255,.4);margin-left:4px}

.product-price{

    font-size: 24px;

    font-weight: 900;

    color: #00d9ff;

}

/* PROMO */

.product-prices{

    display: flex;

    flex-direction: column;

    gap: 8px;

}

.product-old-price{

    font-size: 15px;

    text-decoration: line-through;

    color: #8f98aa;

}

.product-new-price{

    font-size: 28px;

    font-weight: 900;

    color: #00d9ff;

}

.promocoes .product-new-price{

    color: #ff9500;

}

/* =========================
   DISCOUNT BADGE
========================= */

.discount-badge{

    width: fit-content;

    padding:
    8px 14px;

    border-radius: 999px;

    background:
    linear-gradient(
        135deg,
        #ff7300,
        #ffb300
    );

    color: white;

    font-size: 13px;

    font-weight: 900;

    box-shadow:
    0 10px 30px rgba(255,140,0,0.35);

}

.product-installment{
    display:block;
    font-size:12px;
    color:rgba(255,255,255,.4);
    margin-top:4px;
}

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

@media(max-width:1200px){

    .hero{

        grid-template-columns: 1fr;

    }

    .hero-product{

        max-width: 520px;

    }

}

@media(max-width:900px){

    .hero-content h1{

        font-size: 56px;

    }

    .section-top h2{

        font-size: 32px;

    }

    .promocoes .section-top{

        flex-direction: column;

        align-items: flex-start;

    }

}

@media(max-width:700px){

    .hero{

        padding:
        40px 20px 60px;

        gap: 40px;

    }

    .home-section{

        padding:
        20px 20px 60px;

    }

    .hero-content h1{

        font-size: 42px;

        letter-spacing: -2px;

    }

    .hero-content p{

        font-size: 16px;

    }

    .hero-product-image{

        height: 300px;

    }

    .hero-product-info h3{

        font-size: 24px;

    }

    .hero-new-price{

        font-size: 28px;

    }

    .products-grid{

        grid-template-columns: 1fr 1fr;

        gap: 18px;

    }

    .product-card-image{

        height: 210px;

    }

    .product-card-info{

        padding: 18px;

    }

    .product-card-info h3{

        font-size: 16px;

    }

    .product-price,
    .product-new-price{

        font-size: 20px;

    }

    .promocoes-right{

        width: 100%;

        flex-direction: column;

        align-items: stretch;

    }

    .promo-countdown{

        justify-content: center;

    }

}

@media(max-width:520px){

    .products-grid{

        grid-template-columns: 1fr;

    }

}




/* =========================================================
   SCROLL HORIZONTAL — seções da home (promoções, mais vendidos, categorias)
========================================================= */

.home-section .products-grid{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:18px !important;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:14px;
    margin-bottom:-6px;
    scroll-snap-type:x mandatory;
    scroll-padding:0 16px;
    -webkit-overflow-scrolling:touch;
}

.home-section .products-grid > *{
    flex:0 0 240px;
    min-width:240px;
    max-width:280px;
    scroll-snap-align:start;
}

/* Scrollbar custom — Chrome/Edge/Safari */
.home-section .products-grid::-webkit-scrollbar{
    height:8px;
}
.home-section .products-grid::-webkit-scrollbar-track{
    background:rgba(255,255,255,0.04);
    border-radius:99px;
}
.home-section .products-grid::-webkit-scrollbar-thumb{
    background:linear-gradient(90deg, rgba(0,217,255,0.4), rgba(0,153,255,0.5));
    border-radius:99px;
    transition:background 0.2s;
}
.home-section .products-grid::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(90deg, rgba(0,217,255,0.7), rgba(0,153,255,0.8));
}

/* Promoções tem scrollbar laranja */
.home-section.promocoes .products-grid::-webkit-scrollbar-thumb{
    background:linear-gradient(90deg, rgba(255,107,0,0.5), rgba(255,179,71,0.6));
}
.home-section.promocoes .products-grid::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(90deg, rgba(255,107,0,0.8), rgba(255,179,71,0.9));
}

/* Scrollbar Firefox */
.home-section .products-grid{
    scrollbar-width:thin;
    scrollbar-color:rgba(0,217,255,0.4) rgba(255,255,255,0.04);
}
.home-section.promocoes .products-grid{
    scrollbar-color:rgba(255,107,0,0.5) rgba(255,255,255,0.04);
}

/* Mobile */
@media(max-width:900px){
    .home-section .products-grid > *{
        flex:0 0 200px;
        min-width:200px;
    }
}

/* Página promoções (grid completo, não scroll) */
.products-grid-full{
    display:grid !important;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap:20px;
}
.products-grid-full > *{
    flex:initial;
    min-width:0;
    max-width:none;
}