/* ========================================
   MOBILE - PRODUTOS
======================================== */

@media (max-width:768px){

:root{
    --slider-glow:#2563eb;
}

/* Grid (caso seja usado fora do slider) */

#produtos{
    padding:50px 0;
}

.produtos-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    padding:0 16px;
}

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

.produto-card{
 
    position:relative;

    overflow:hidden;

    background:
        rgba(25,35,55,.58);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:22px;

    box-shadow:
        0 12px 38px rgba(0,0,0,.38),
        0 0 22px color-mix(in srgb,var(--slider-glow) 12%,transparent),
        inset 0 1px 0 rgba(255,255,255,.05);

        box-shadow:

        0 12px 30px rgba(0,0,0,.35),
        0 0 24px
        transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        opacity .35s ease;

}

/* Glow inferior */

.produto-card::before{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:45%;

    background:

        linear-gradient(

            to top,

            color-mix(in srgb,var(--slider-glow) 14%,transparent),

            transparent

        );

    pointer-events:none;

}

/* Hover */

.produto-card:hover{

    transform:

        translateY(-5px)

        scale(1.02);

    box-shadow:

        0 18px 40px rgba(0,0,0,.45),

        0 0 32px rgba(37,99,235,.20);

}

/* =====================================
   IMAGEM
===================================== */

.produto-imagem {
    height: 160px;
    overflow: hidden;
    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.03),
        transparent);

    border: none;
    border-radius: 0;
    padding: 0;
}

.produto-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    display: block;
    
    border: none;
    border-radius: 0;
    transition:
    transform .4s,
    filter .4s;
}



/* =====================================
   INFORMAÇÕES
===================================== */

.produto-info{

    padding:5px;

}

.produto-categoria{

    color:#3b82f6;

    font-size:13px;

    font-weight:600;

    margin-bottom:2px;

}

.produto-info h3{

    font-size:13px;

    line-height:1.3;

    font-weight:700;

    margin-bottom:8px;

}

.produto-estrelas{

    font-size:13px;

    margin-bottom:8px;

}

.produto-estrelas span{

    color:#94a3b8;

}

.preco-atual{

    font-size:17px;

    font-weight:800;

    margin-bottom:8px;

}

.produto-parcelamento{

    font-size:13px;

    color:#cbd5e1;

}

.produto-estoque{

    margin-top:10px;

    color:#22c55e;

    font-size:13px;

    font-weight:700;

}

/* =====================================
   FAVORITO
===================================== */

.btn-favorito{

    position:absolute;
    width: 38px;
    height: 38px;
    top: 10px;
    right: 10px;

    display:flex;
    align-items:center;
    justify-content:center,
    border-radius:50%;
    background:rgba(35,45,70,.55);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.08);
    cursor:pointer;

    z-index:30;

    transition:
        transform .3s,
        background .3s;

}

.btn-favorito:hover{

    transform:scale(1.08);

    background:
        rgba(30,41,59,.95);

}

.btn-favorito i{

    color:white;

    font-size:17px;

    transition:.25s;

}

.btn-favorito:hover i{

    transform:scale(1.1);

}

.btn-favorito .fas{

    color:#ff4d5a;

    text-shadow:

        0 0 10px rgba(255,77,90,.45);

}

}

/* ========================================
   MOBILE - SLIDER
======================================== */

@media (max-width:768px) {
  
.home-slider-section {
    margin-top: 70px;
  overflow-x: hidden;
  overflow-y: visible;
}
  
.section-header {
    width: 92%;
  margin: 0 auto 10px;
    
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section-header h2 {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    color: #fff;
}

.section-header a {
    font-size: 15px;
    font-weight: 600;
    color: #3b82f6;
    text-decoration: none;
    
    display: flex;
    align-items: center;
    gap: 6px;
    
    transition: .25s ease;
}

.section-header a::after {
    content: "→";
    transition: transform .25s ease;
}

.section-header a:hover {
    color: #60a5fa;
}

.section-header a:hover::after {
    transform: translateX(3px);
}