.header-mobile{

    display:none;
    
    position:fixed;
    
    top:0;
    left:0;
    
    width:100%;
    max-width:100%;
    
    background:#fff;
    
    padding:15px;
    
    border-bottom:1px solid #eee;
    
    z-index:2000;
    
    box-shadow:0 2px 12px rgba(0,0,0,.08);
    
    overflow:hidden;
    
    }
    
    .mobile-top{
    
    width:100%;
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    gap:10px;
    
    }
    
    .mobile-logo{
    
    height:55px;
    
    max-width:180px;
    
    width:auto;
    
    object-fit:contain;
    
    }
    
    .mobile-icons{
    
    display:flex;
    
    align-items:center;
    
    justify-content:flex-end;
    
    gap:12px;
    
    flex-shrink:0;
    
    }
    
    .mobile-menu-btn,
    .mobile-cart{
    
        width:42px;
    
        height:42px;
    
        flex-shrink:0;
    
        border:none;
    
        background:none;
    
        display:flex;
    
        align-items:center;
    
        justify-content:center;
    
        font-size:25px;
    
        color:#333;
    
        cursor:pointer;
    
        position:relative;
    
    }
    
    .mobile-search{
    
    margin-top:15px;
    
    display:flex;

    position: relative;
    
    }
    
    .mobile-search input{
    
    width:100%;
    
    min-width:0;
    
    flex:1;
    
    height:46px;
    
    border:1px solid #ddd;
    
    border-radius:10px 0 0 10px;
    
    padding:0 15px;
    
    font-size:15px;
    
    outline:none;
    
    }
    
    .mobile-search button{
    
    width:55px;
    
    min-width:55px;
    
    flex-shrink:0;
    
    border:none;
    
    background:#e53935;
    
    color:white;
    
    border-radius:0 10px 10px 0;
    
    cursor:pointer;
    
    }
    
    .mobile-menu{
    
    position:fixed;
    
    top:0;
    left:-300px;
    
    width:280px;
    max-width:85vw;
    
    height:100vh;
    
    background:white;
    
    box-shadow:5px 0 20px rgba(0,0,0,.15);
    
    transition:.3s;
    
    z-index:3000;
    
    }

    .mobile-menu.show{

    left:0;

    }

    .mobile-menu-header{

    display:flex;

    justify-content:flex-end;

    padding:20px;

    }

    .mobile-menu-header button{

    border:none;

    background:none;

    font-size:28px;

    cursor:pointer;

    }

    .mobile-menu-links{

    display:flex;

    flex-direction:column;

    }

    .mobile-menu-links a{

    padding:16px 25px;

    color:#222;

    text-decoration:none;

    font-size:16px;

    border-bottom:1px solid #eee;

    }

    .mobile-menu-links a i{

    width:25px;

    }

    @media (max-width:900px){

        .header{
        
            display:none;
        
        }
        
        .header-mobile{
        
            display:block;
        
        }
        
        }
        
        @media (min-width:901px){
        
        .header-mobile{
        
            display:none;
        
        }
        
        }




/* =========================================
   PÁGINA DE PRODUTO - MOBILE
   ========================================= */

   @media (max-width: 900px){

    .produto-page{

        width:100%;

        padding:20px 12px 40px;

    }


    /* ==============================
       PRODUTO
       ============================== */

    .produto-container{

        display:flex;

        flex-direction:column;

        gap:20px;

        width:100%;

    }


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

    .produto-galeria{

        width:100%;

        padding:15px;

        border-radius:16px;

    }


    .imagem-principal{

        width:100%;

        height:auto;

        max-height:420px;

        object-fit:contain;

        display:block;

    }


    /* ==============================
       INFORMAÇÕES DO PRODUTO
       ============================== */

    .produto-detalhes{

        width:100%;

        padding:20px;

        border-radius:16px;

    }


    .produto-colecao{

        font-size:13px;

    }


    .produto-detalhes h1{

        font-size:26px;

        line-height:1.2;

        margin-top:8px;

        margin-bottom:15px;

    }


    .estoque{

        font-size:14px;

        margin-bottom:15px;

    }


    .preco-produto{

        font-size:32px;

        margin-bottom:20px;

    }


    /* ==============================
       QUANTIDADE
       ============================== */

    .quantidade-box{

        margin-bottom:20px;

    }


    .quantidade-box label{

        display:block;

        margin-bottom:8px;

        font-weight:bold;

    }


    .quantidade-box input{

        width:100%;

        height:48px;

        font-size:16px;

    }


    /* ==============================
       BOTÃO
       ============================== */

    .btn-carrinho{

        width:100%;

        height:55px;

        font-size:16px;

    }


    .btn-indisponivel{

        width:100%;

        height:55px;

    }


    /* ==============================
       DESCRIÇÃO
       ============================== */

    .descricao-produto{

        width:100%;

        margin-top:20px;

        padding:20px;

        border-radius:16px;

    }


    .descricao-produto h2{

        font-size:22px;

        margin-bottom:15px;

    }


    .descricao-produto p{

        font-size:15px;

        line-height:1.6;

        word-break:break-word;

    }

}

@media (max-width: 400px){

    .produto-page{

        padding-left:8px;

        padding-right:8px;

    }

    .produto-galeria{

        padding:10px;

    }

    .produto-detalhes{

        padding:16px;

    }

    .produto-detalhes h1{

        font-size:23px;

    }

    .preco-produto{

        font-size:28px;

    }

    .descricao-produto{

        padding:16px;

    }

}


@media screen and (max-width: 900px) {

    main.produto-page {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 10px 40px !important;
        margin: 0 !important;
    }

    main.produto-page .produto-container {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        width: 100% !important;
        gap: 20px !important;
    }

    main.produto-page .produto-galeria {
        width: 100% !important;
        padding: 15px !important;
    }

    main.produto-page .imagem-principal {
        width: 100% !important;
        height: auto !important;
        max-height: 400px !important;
        object-fit: contain !important;
    }

    main.produto-page .produto-detalhes {
        width: 100% !important;
        padding: 20px !important;
    }

    main.produto-page .produto-detalhes h1 {
        font-size: 26px !important;
        line-height: 1.2 !important;
    }

    main.produto-page .preco-produto {
        font-size: 32px !important;
    }

    main.produto-page .quantidade-box input {
        width: 100% !important;
    }

    main.produto-page .btn-carrinho,
    main.produto-page .btn-indisponivel {
        width: 100% !important;
    }

    main.produto-page .descricao-produto {
        width: 100% !important;
        margin-top: 20px !important;
        padding: 20px !important;
    }

}

@media (max-width:900px){

    html,
    body{

        width:100%;
        max-width:100%;

        overflow-x:hidden;

    }

}

@media (max-width: 768px){

    .produtos-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

}

@media (max-width: 380px){

    .produtos-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .produto img{
        height: 150px;
    }

    .produto-info{
        padding: 8px;
    }

    .produto-info h4{
        font-size: 13px;
    }

    .preco{
        font-size: 16px;
    }

    .comprar{
        font-size: 12px;
    }
}

.search-results-mobile {
    position: absolute;
    top: 100%; /* Aparece logo abaixo do input */
    left: 0;
    width: 100%;
    background: white;
    z-index: 3000; /* Fica acima da header-mobile (2000) e do conteúdo da página */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    max-height: 300px;
    overflow-y: auto;
}