﻿<style type="text/css" >
/* === ESTILOS BASE === */
.btn-duvidas {
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    color: #3D441F;
    background-color: #FFCB05;
    border: 1px solid #e0b800;
    border-radius: 6px;
    height: 20px;
    padding: 2px 12px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.btn-duvidas:hover {
    transform: scale(1.07);
    background-color: #FFD633;
    box-shadow: 0 3px 6px rgba(0,0,0,0.25);
}

.banner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    font-family: "Poppins", "Open Sans", sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 24px;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.9);
    overflow: hidden;
    margin-top: 8px;
    text-align: center;
}

.msgTopLabel {
    display: block;
    width: 100%;
    height: 80px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
    line-height: 80px;
    overflow: hidden;
    margin-top: 8px;
}

.rodape {
    background: linear-gradient(180deg, #1f3b1d 0%, #152b14 100%);
    color: #f5f5f5;
    font-family: 'Poppins', sans-serif;
    padding: 40px 60px;
    font-size: 14px;
}

.rodape-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.logo-rodape {
    width: 120px;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.4));
}

.rodape h3 {
    color: #ffcb05;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.rodape a {
    color: #d7f7c0;
    text-decoration: none;
}

    .rodape a:hover {
        color: #ffcb05;
        text-decoration: underline;
    }

.rodape ul {
    list-style: none;
    padding: 0;
}

    .rodape ul li {
        margin-bottom: 6px;
    }

.newsletter-tabela {
    width: 100%;
    font-size: 12px;
    color: #fff;
}

    .newsletter-tabela td {
        padding: 3px;
    }

.pagamentos img {
    width: 40px;
    height: 20px;
    margin: 6px 4px;
    opacity: 0.9;
    transition: transform 0.3s ease;
}

    .pagamentos img:hover {
        transform: scale(1.1);
    }

.mp-icon {
    width: 65px;
    margin-top: 4px;
}

.selos-seguranca {
    margin-top: 10px;
}

    .selos-seguranca img {
        width: 100px;
        height: 60px;
        margin: 4px;
        opacity: 0.8;
    }

.social-icons img {
    width: 32px;
    height: 32px;
    margin: 4px;
    transition: transform 0.3s ease;
}

    .social-icons img:hover {
        transform: scale(1.1);
    }

.rodape-final {
    border-top: 1px solid rgba(255,255,255,0.2);
    text-align: center;
    padding-top: 15px;
    font-size: 12px;
    color: #ccc;
}

    .rodape-final a {
        color: #ffcb05;
        text-decoration: none;
    }

/* === RESPONSIVIDADE === */
@media screen and (max-width: 1024px) {
    body {
        margin: 0 10px !important;
    }

    table {
        width: 100% !important;
        min-width: auto !important;
    }
}

@media screen and (max-width: 768px) {
    #tbCab td, #TbPesq td, #TbLogin td {
        display: block;
        width: 100% !important;
        text-align: center !important;
    }

    #cmp {
        width: 90% !important;
    }

    .banner, .msgTopLabel {
        font-size: 16px;
        line-height: normal;
        height: 60px;
    }

    table[style*='background-color:#ffffff'] tr {
        display: flex;
        flex-direction: column;
    }

    table[style*='background-color:#ffffff'] td {
        width: 100% !important;
    }

    #pbNome, #pbEmail {
        width: 90% !important;
        font-size: 14px !important;
    }

    .rodape {
        padding: 20px;
        font-size: 13px;
    }

    .rodape-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .logo-rodape {
        margin: 0 auto;
    }

    .social-icons img {
        width: 28px;
        height: 28px;
    }

    .selos-seguranca img {
        width: 80px;
        height: 50px;
    }

    .pagamentos img {
        width: 36px;
        height: 18px;
    }
}
/* === CABEÇALHO MOBILE: LOGO À ESQUERDA + SLOGAN AO LADO (10px) === */
@media (max-width: 768px) {
    /* Mantém comportamento de tabela (evita bugs do flex em <table>) */
    #tbCab {
        min-width: 0 !important;
        width: 100% !important;
        border: none !important;
    }

        #tbCab tr {
            display: table-row !important;
        }

        #tbCab td {
            display: table-cell !important;
            vertical-align: top !important;
            padding: 4px 6px !important;
            text-align: left !important;
            background: none !important;
            border: 0 !important;
        }

            /* 1º TD = logo fixa à esquerda */
            #tbCab td:nth-child(1) {
                width: 110px !important;
            }

    #logo img {
        width: 85px !important;
        height: auto !important;
        display: block !important;
    }

    /* 2º TD = texto ao lado, com 10px de distância */
    #tbCab td:nth-child(2) {
        width: auto !important;
        padding-left: 10px !important;
    }

    #tit {
        display: block !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #fff !important;
        line-height: 1.25em !important;
        text-align: left !important;
        margin: 0 !important;
        white-space: normal !important; /* garante quebra de linha normal */
        overflow: visible !important;
    }

    /* Esconde os TDs 3, 4 e 5 no mobile para sobrar espaço */
    #tbCab td:nth-child(3),
    #tbCab td:nth-child(4),
    #tbCab td:nth-child(5) {
        display: none !important;
    }

    /* Faixa (msgTop) continua logo abaixo do bloco da logo+título */
    .msgTopLabel {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        font-size: 13px !important;
        text-align: center !important;
        margin-top: 6px !important;
        padding: 6px 0 !important;
        line-height: 1.35em !important;
        background-size: cover !important;
        background-position: center !important;
    }
}
/* === AJUSTES MOBILE: REMOVER HOME E REORGANIZAR CARRINHO === */
@media (max-width: 768px) {

    /* Esconde ícone e texto Home */
    #TbPesq td:first-child {
        display: none !important;
    }

    /* Ajusta célula do carrinho */
    #TbPesq td:nth-child(3),
    #TbPesq td:nth-child(4) {
        display: inline-block !important;
        width: auto !important;
        text-align: left !important;
        vertical-align: middle !important;
    }

        /* Organiza texto e ícone lado a lado */
        #TbPesq td:nth-child(3) a,
        #TbPesq td:nth-child(4) a {
            display: inline-flex !important;
            align-items: center !important;
            gap: 6px !important; /* espaçamento entre texto e ícone */
            font-size: 14px !important;
        }

        /* Aumenta o ícone do carrinho */
        #TbPesq td:nth-child(4) img {
            width: 42px !important;
            height: 42px !important;
            vertical-align: middle !important;
        }

    /* Mantém o texto do carrinho na mesma linha */
    #TbPesq td:nth-child(3) {
        padding-right: 0 !important;
    }
}

/* === AJUSTES EXTRAS PARA MOBILE === */
@media (max-width: 768px) {

    /* 1️⃣ Esconde o texto "Pesquisar" abaixo da barra de busca */
    #TbPesq td {
        position: relative;
    }

        #TbPesq input[value="Pesquisar"],
        #TbPesq td:contains("Pesquisar") {
            display: none !important;
            visibility: hidden !important;
        }
}
/* ← fecha o primeiro bloco corretamente */

/* === LOGIN MOBILE SIMPLIFICADO E CORRIGIDO === */
@media (max-width: 768px) {

    /* Célula principal do login */
    #TbLogin > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 6px 8px !important;
        background: transparent !important;
    }

    /* Linha 1: Login + campo */
    #TbLogin label[for="usuario"],
    #TbLogin #usuario {
        display: inline-block !important;
        vertical-align: middle !important;
    }

    #TbLogin #usuario {
        width: 68% !important;
        margin-left: 6px !important;
    }

    /* Linha 2: Senha + campo + botões */
    #TbLogin label[for="senha"],
    #TbLogin #senha,
    #TbLogin #btlogin,
    #TbLogin #cadastro_btn {
        display: inline-block !important;
        vertical-align: middle !important;
        margin-right: 6px !important;
    }

    #TbLogin #senha {
        width: 120px !important;
        padding: 4px !important;
    }

    /* Linha 3: Boas-vindas + conta + sair */
    #TbLogin #usuario_msg,
    #TbLogin #meucad,
    #TbLogin #minhaconta,
    #TbLogin #Image1,
    #TbLogin #BtSair {
        display: inline-block !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
        margin: 3px 6px 0 0 !important;
        float: none !important;
        line-height: 1.2 !important;
    }

    /* Bloco inteiro do login */
    table#TbLogin {
        display: block !important;
        width: 100% !important;
        position: relative !important;
        margin-bottom: 22px !important; /* <<< aumenta a separação real */
        clear: both !important;
        border-spacing: 0 !important;
    }

    /* Força o banner a iniciar abaixo */
    #msgAviso,
    .banner,
    .msgTopLabel {
        display: block !important;
        clear: both !important;
        margin-top: 12px !important;
        position: relative !important;
    }
}
/* === FIX FINAL SAFARI: BLOCO DE LOGIN + ESPAÇO ANTES DO BANNER === */
@media (max-width: 768px) {
    /* container do login */
    #TbLogin {
        display: block !important;
        position: relative !important;
        clear: both !important;
        background: transparent !important;
    }

        /* cria espaçamento real logo abaixo */
        #TbLogin::after {
            content: "";
            display: block;
            height: 38px; /* <<< ajuste fino do espaço */
            width: 100%;
            clear: both;
        }

    /* reforça o início do banner abaixo */
    #msgAviso,
    .banner,
    .msgTopLabel {
        display: block !important;
        position: relative !important;
        clear: both !important;
        margin-top: 6px !important;
    }
}

/* === REORDENAÇÃO: VITRINE ANTES DE CATEGORIAS (APENAS MOBILE) === */
@media (max-width: 768px) {
    #Conteudo,
    form[action*="default.aspx"],
    body {
        display: flex !important;
        flex-direction: column !important;
    }

    #Vitrine {
        order: 1 !important;
        display: block !important;
        width: 100% !important;
    }

    div[style*="CATEGORIAS"],
    #categ {
        order: 2 !important;
        display: block !important;
        width: 100% !important;
        margin-top: 20px !important;
    }
}
/* === AJUSTE: TAMANHO DA FONTE DO CARRINHO DE COMPRAS === */
#TbPesq td a,
#TbPesq td {
    font-size: 16px !important; /* antes era bem menor (~12px) */
    font-weight: 600 !important;
    color: #27521B !important;
}
/* === AJUSTE: CENTRALIZAR MELHOR O TEXTO DO BANNER DE DESCONTOS === */
.banner {
    display: flex !important;
    align-items: center !important; /* centraliza verticalmente */
    justify-content: center !important;
    padding-top: 6px !important; /* leve espaço extra superior */
    line-height: normal !important;
}

/* === ESTILO APRIMORADO DAS CATEGORIAS NO MOBILE === */
@media (max-width: 768px) {

    /* Título "CATEGORIAS:" */
    div[style*="CATEGORIAS"] {
        font-size: 18px !important;
        font-weight: 700 !important;
        background-color: #ccff66 !important;
        padding: 8px 0 !important;
        margin-top: 20px !important;
        border-top: 2px solid #a6d64d !important;
        text-align: center !important;
    }

    /* Lista das categorias */
    #categ {
        font-size: 17px !important;
        line-height: 1.8em !important;
        text-align: center !important;
        padding: 8px 10px !important;
    }

        /* Links das categorias */
        #categ a {
            color: #006600 !important;
            font-weight: 500 !important;
            text-decoration: none !important;
            display: inline-block !important;
            margin: 4px 8px !important;
        }

            #categ a:hover {
                text-decoration: underline !important;
                color: #009900 !important;
            }

        /* Subtítulos (como "ISCAS ARTIFICIAIS", "TIRO ESPORTIVO") */
        #categ b, #categ strong {
            font-size: 18px !important;
            display: block !important;
            margin-top: 14px !important;
            margin-bottom: 6px !important;
            color: #000 !important;
        }

    /* Pequena sombra no bloco geral para destacar */
    #categ {
        background: #f9fff2 !important;
        border-radius: 6px !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    }
}

/* === CORREÇÃO DEFINITIVA: CENTRALIZAÇÃO DO BLOCO COMPRAR NO MOBILE === */
@media (max-width: 768px) {

    /* Garante que o TD do botão não mantenha o alinhamento direito */
    form[action*="detprod.aspx"] td[style*="text-align:right"],
    form[action*="detprod.aspx"] td[align="right"] {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        float: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* Campo QUANTIDADE centralizado */
    form[action*="detprod.aspx"] #qtde {
        display: block !important;
        margin: 10px auto 12px auto !important;
        text-align: center !important;
        width: 90px !important;
        height: 34px !important;
        font-size: 18px !important;
    }

    /* Ícone da caixa some no mobile */
    form[action*="detprod.aspx"] img[alt=""] {
        display: none !important;
    }

    /* Botão COMPRAR totalmente centralizado */
    form[action*="detprod.aspx"] #comprar {
        display: block !important;
        margin: 10px auto 30px auto !important;
        float: none !important;
        width: 85% !important;
        max-width: 340px !important;
        text-align: center !important;
        background-color: #7a8f34 !important;
        color: #fff !important;
        font-size: 22px !important;
        font-weight: bold !important;
        padding: 12px 0 !important;
        border: none !important;
        border-radius: 10px !important;
        text-transform: uppercase !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.25);
    }

        form[action*="detprod.aspx"] #comprar:hover {
            background-color: #96b54d !important;
            transform: scale(1.03);
        }

    /* Evita que o TD da direita force largura da tela */
    form[action*="detprod.aspx"] table {
        width: 100% !important;
        margin: 0 auto !important;
        table-layout: fixed !important;
    }

    /* Evita scroll lateral */
    html, body {
        overflow-x: hidden !important;
    }
}
/* === MINIATURAS RESPONSIVAS (Desktop + Mobile) === */

/* Padrão Desktop */
.miniaturas-container input[type="image"],
.miniaturas-container img {
    width: 150px !important;
    height: auto !important;
    margin: 6px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    vertical-align: middle !important;
}

/* Mobile (até 768px) */
@media (max-width: 768px) {
    .miniaturas-container {
        display: flex !important;
        justify-content: left !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 10px auto !important;
        padding: 0 !important;
        text-align: left !important;
    }

        /* Corrige o width=150 do ASP.NET e divide 3 por linha */
        .miniaturas-container input[type="image"],
        .miniaturas-container img {
            width: auto !important;
            flex: 1 1 calc(33.33% - 12px) !important;
            max-width: 100px !important;
            height: auto !important;
            margin: 4px !important;
            border-radius: 6px !important;
        }

            /* Efeito visual leve */
            .miniaturas-container input[type="image"]:hover,
            .miniaturas-container img:hover {
                transform: scale(1.05);
                transition: transform 0.15s ease-in-out;
            }
}
/* === AJUSTE DO TÍTULO DO PRODUTO NO MOBILE (detprod.aspx) === */
@media (max-width: 768px) {
    #desc,
    [id*="desc"],
    .produtoTitulo {
        display: block !important;
        font-size: 18px !important;
        color: #007a00 !important; /* verde harmonioso */
        font-weight: bold !important;
        text-align: left !important; /* centraliza para não cortar */
        line-height: 1.3em !important;
        white-space: normal !important; /* permite quebrar linha */
        word-wrap: break-word !important; /* quebra palavras longas */
        max-width: 95% !important;
        margin: 10px auto !important;
    }

    /* Garante que a célula da tabela não force corte */
    table td {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* === CARRINHO MOBILE — abrir espaço para SUBTOTAL === */
@media (max-width: 768px) {
    .cart-table {
        width: 100% !important;
        border-collapse: collapse !important;
        table-layout: auto !important;
        display: table !important;
        font-size: 12px !important;
    }

        .cart-table tr {
            display: table-row !important;
        }

        .cart-table td, .cart-table th {
            display: table-cell !important;
            vertical-align: middle !important;
            padding: 4px 3px !important; /* tira um pouco de padding */
            text-align: center !important;
            white-space: normal !important;
            word-break: normal !important;
        }

            /* Larguras por coluna (1..9) */
            .cart-table td:nth-child(1) {
                width: 7% !important;
            }
            /* Ref   */
            .cart-table td:nth-child(2) {
                width: 6% !important;
            }
            /* X     */
            .cart-table td:nth-child(3) {
                width: 36% !important;
                text-align: left !important;
                word-break: break-word !important;
            }
            /* Descrição */
            .cart-table td:nth-child(4) {
                width: 5% !important;
            }
            /* +     */
            .cart-table td:nth-child(5) {
                width: 7% !important;
            }
            /* Qt    */
            .cart-table td:nth-child(6) {
                width: 5% !important;
            }
            /* -     */
            .cart-table td:nth-child(7) {
                width: 10% !important;
                text-align: right !important;
                font-size: 11px !important;
            }
            /* Preço */
            .cart-table td:nth-child(8) {
                width: 10% !important;
                text-align: right !important;
                font-size: 11px !important;
            }
            /* Desconto */
            .cart-table td:nth-child(9) {
                width: 14% !important;
                text-align: right !important;
                font-weight: 600 !important;
            }
        /* Subtotal */

        /* Cabeçalho mais compacto */
        .cart-table tr:first-child td {
            font-weight: 700 !important;
            background: #dbe1d7 !important;
            white-space: nowrap !important;
            padding: 4px 3px !important;
            font-size: 11px !important;
        }

        /* Ícones */
        .cart-table td img {
            width: 18px !important;
            height: auto !important;
            vertical-align: middle;
        }

        /* Evita qualquer compressão lateral no total */
        .cart-table td:last-child {
            padding-right: 6px !important;
        }
}
/* === Espaço após o botão "Confirmar e ir ao caixa" === */
#ped_btn,
input[id*="ped_btn"],
button[id*="ped_btn"] {
    margin-bottom: 50px !important; /* afasta do produto em destaque */
    display: block !important;
}
/* === PEDIDOS FICHA DE CLIENTES Myacount.aspx === */
@media (max-width: 768px) {
    .pedidos-table {
        width: 100%;
        border-collapse: collapse;
    }

        .pedidos-table thead {
            display: none !important;
        }

        .pedidos-table tr {
            display: block !important;
            margin: 12px 0 !important;
            padding: 8px 10px !important;
            border: 1px solid #ccc !important;
            border-radius: 8px !important;
            background: #fff !important;
            box-shadow: 0 2px 5px rgba(0,0,0,0.08);
        }

        .pedidos-table td {
            display: flex !important;
            justify-content: space-between !important;
            padding: 6px 4px !important;
            font-size: 13px !important;
            border: none !important;
            border-bottom: 1px solid #eee !important;
        }

            .pedidos-table td:last-child {
                border-bottom: none !important;
            }

            .pedidos-table td:nth-child(1)::before {
                content: "REF:";
                font-weight: bold;
            }

            .pedidos-table td:nth-child(2)::before {
                content: "DATA:";
                font-weight: bold;
            }

            .pedidos-table td:nth-child(3)::before {
                content: "VALOR:";
                font-weight: bold;
            }

            .pedidos-table td:nth-child(4)::before {
                content: "STATUS:";
                font-weight: bold;
            }

            .pedidos-table td:nth-child(5)::before {
                content: "RASTREIO:";
                font-weight: bold;
            }

            .pedidos-table td[colspan="5"] {
                display: block !important;
                background: #f9ffed !important;
                padding: 6px 6px !important;
                border-radius: 6px !important;
                font-weight: 500 !important;
            }
}
/* === SendQuest.aspx === */
.btn-principal {
    background: linear-gradient(180deg, #6BAF3F 0%, #4C8A1A 100%);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    border: none;
    border-radius: 10px;
    padding: 10px 10px;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0,0,0,0.25);
    transition: all 0.25s ease;
}

    .btn-principal:hover {
        background: linear-gradient(180deg, #7FD94A 0%, #5EA422 100%);
        transform: scale(1.03);
    }

/* ====== CATEGORIAS — ESTILO FINAL AJUSTADO ====== */

/* Verde para todos os links da lista */
.cat-link,
.sub-item,
.cat-item a,
.cat-subcats a {
    color: #008000 !important;
    text-decoration: none !important;
}

/* Separador */
.cat-sep {
    border: 0;
    height: 1px;
    background: #d9d9d9;
    margin: 4px 0;
}

/* ========== DESKTOP (>= 769px) — visual fixo sem accordion ========== */
@media (min-width: 769px) {

    .cat-toggle {
        display: none !important;
    }

    /* Categoria (título) */
    .cat-link {
        display: block !important;
        font-weight: bold !important;
        margin: 3px 0 2px 0 !important; /* espaçamento compacto */
        line-height: 1.2em !important;
    }

    /* Container das subcategorias */
    .cat-subcats {
        display: block !important;
        padding-left: 14px !important;
        margin-top: 0 !important;
    }

        /* Subcategorias — espaçamento reduzido e uniforme */
        .cat-subcats .sub-item {
            display: block !important;
            margin: 1px 0 !important;
            padding: 0 !important;
            line-height: 1.15em !important;
        }

            /* Hover */
            .cat-subcats .sub-item:hover,
            .cat-link:hover {
                text-decoration: underline !important;
            }
}

/* ========== MOBILE (<= 768px) — accordion ========== */
@media (max-width: 768px) {
    .cat-item {
        display: flex;
        flex-direction: column;
        padding: 4px 0;
        border-bottom: 1px solid #c4e88b;
    }

    .cat-toggle {
        font-weight: bold;
        font-size: 18px;
        color: #1f441e;
        cursor: pointer;
        width: 24px;
        text-align: center;
        margin-left: 4px;
    }

    .cat-link {
        font-size: 18px;
        font-weight: bold;
        padding: 6px 0 2px 0;
        margin-left: 4px;
    }

    .cat-subcats {
        display: none;
        padding: 4px 0 6px 28px;
        background: #f4ffe8;
    }

        .cat-subcats .sub-item {
            display: block;
            font-size: 16px;
            padding: 3px 0;
        }
}
/* ===== FIX ABSOLUTO PARA ESPAÇAMENTO ENTRE SUBCATEGORIAS ===== */

/* Zera o efeito do <br> no desktop */
@media (min-width: 769px) {
    .cat-subcats br {
        display: none !important;
    }
}

/* Garante espaçamento uniforme e compacto */
@media (min-width: 769px) {
    .cat-subcats .sub-item {
        display: block !important;
        margin: 2px 0 !important;
        padding: 0 !important;
        line-height: 1.05em !important;
    }
}


 </style >
