*{ margin:0; padding:0; box-sizing:border-box; font-family:'Poppins', sans-serif; }
body{ display:flex; justify-content:center; background:#e5e5e5; }
#wrapper{ width:550px; max-width:100%; background:#f2f2f2; min-height:100vh; }

/* TOPO */
header{
    background:linear-gradient(to bottom, #000, #5d5d5d);
    padding:25px 0 35px;
    text-align:center;
    color:#fff;
    font-size:32px;
    font-weight:700;
    border-bottom-left-radius:30px;
    border-bottom-right-radius:30px;
}

header a {
    text-decoration: none; /* Remove o sublinhado do link */
    color: inherit;        /* Mantém a cor original do texto, sem alteração ao passar o mouse */
}

header a:hover {
    text-decoration: none; /* Impede qualquer sublinhado no hover */
    color: inherit;        /* Mantém a cor original do texto no hover */
    cursor: pointer;       /* Mantém o cursor de link, mas sem efeitos adicionais */
}

/* BANNER */
.banner{ 
    width:92%; height:260px; 
    background:#fff; 
    margin:15px auto; 
    border-radius:18px; 
    border:2px solid #000; 
    overflow:hidden; 
}
.banner img{ width:100%; height:100%; object-fit:cover; }

/* TÍTULOS */
h2{ width:92%; margin:20px auto 10px; font-size:20px; font-weight:600; }

/* GRID DE PRODUTOS */
.produtos-grid{
    width:92%;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:15px;
}

/* CARD */
.produto{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 0 8px rgba(0,0,0,0.12);
    padding-bottom:12px;
    text-decoration:none;
    color:#000;
}
.produto-img {
    width: 100%;
    height: auto;  /* Deixa a altura automática para ajustar à largura */
    object-fit: cover;  /* Garante que a imagem cubra o espaço, mas sem cortar excessivamente */
}


.tags{ display:flex; gap:6px; padding:10px 12px 0; }
.tag{ padding:3px 8px; font-size:10px; border-radius:5px; font-weight:600; color:#fff; }
.mais-vendido{ background:#ff5a2f; }
.couro{ background:#2c2c2c; }

.produto h3{
    padding:10px 12px;
    font-size:15px;
    font-weight:600;

    /* Altura EXATA que acomoda até 3 linhas sem cortar */
    height:50px;
    line-height:1.2;

    /* Permite quebrar linha normal */
    overflow:hidden;
}


.cores-label{ padding:0 12px; font-size:13px; }

.cores{ display:flex; gap:4px; padding:8px 12px; }
.cor-opcao{ width:26px; height:26px; border-radius:5px; border:2px solid #ddd; }
.cor-opcao img{ width:100%; height:100%; object-fit:cover; border-radius:5px; }

.preco{ font-size:18px; font-weight:700; padding:8px 12px 0; }
.grade{ margin:5px 12px; padding:4px 10px; display:inline-block; border:1px solid #000; border-radius:5px; font-size:12px; }
.frete{ padding:0 12px; color:#0d8f27; font-size:12px; font-weight:600; }

/* CLIPS */
.clips{
    width:92%;
    margin:25px auto;
    display:flex;
    gap:15px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:10px;
    flex-wrap: nowrap; /* Adicionado para garantir que os clips não quebrem linha */
    justify-content: flex-start; /* Alinha os clips à esquerda */
}
.clip{
    min-width:184px;
    height:299px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 0 8px rgba(0,0,0,0.1);
    scroll-snap-align:start;
    overflow:hidden;
    cursor:pointer;
    display: flex;
    justify-content: center; /* Alinha o conteúdo (imagem ou vídeo) centralizado */
    align-items: center; /* Garante que o conteúdo não saia da área do clip */
        flex-shrink: 0;

}

/* Para vídeos e imagens dentro do clip */
.clip img,
.clip video {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Garante que o vídeo ou imagem cubra todo o espaço */
    border-radius: 12px;  /* Mantém o borda arredondada */
}


.clip video{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:12px;
}

/* RODAPÉ */
footer{
    text-align:center;
    font-size:12px;
    color:#555;
    margin:30px 0 40px;
}

.divider{ width:100%; height:1px; background:#DDD; margin:20px 0; }

/* Mobile */
@media (max-width:600px){
    .clips{
        gap:10px;
        padding-bottom:15px;
    }

    .clip{
        width: 42vw;
        min-width: 42vw;
        aspect-ratio: 9 / 16;
        height:auto;
}
    
.produto-img{
    width: 100%;
    height: auto;
    object-fit: cover;
    background:#fff;
    border-bottom: 1px solid #eee;
}
}