:root {
    --cor-primaria: #25D366;
    --cor-secundaria: #128C7E;
    --fundo: #f4f7f6;
    --texto-principal: #333;
    --branco: #fff;
    --borda: #dfe5e3;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 20px 12px 40px;
    font-family: Arial, sans-serif;
    background: var(--fundo);
    color: var(--texto-principal);
}

.cabecalho {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 25px;
}

.logo {
    width: 300px;
    height: 300px;
    object-fit: contain;
    display: block;
    margin: 0 auto 10px;
}

.cabecalho h1 {
    margin: 5px 0;
    color: var(--cor-secundaria);
    font-size: 28px;
}

.cabecalho p {
    margin: 8px 0;
    color: #666;
}

.container {
    max-width: 600px;
    margin: 0 auto;
}

.secao-loja,
.carrinho {
    margin-bottom: 18px;
}

.btn-secao {
    width: 100%;
    border: 1px solid var(--borda);
    background: var(--branco);
    color: var(--cor-secundaria);
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-secao:hover {
    background: #f0faf7;
}

.produtos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 15px;
}

.produto {
    width: 92%;
    max-width: 430px;
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}

.produto-imagem {
    width: 100%;
    height: 150px;
    border-radius: 10px;
    background: #eef2f1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 12px;
    color: #888;
}

.produto-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.produto-conteudo h2 {
    margin: 5px 0 8px;
    font-size: 19px;
}

.produto-descricao {
    margin: 0 0 10px;
    color: #666;
    font-size: 14px;
}

.preco {
    font-size: 18px;
    font-weight: bold;
    color: var(--cor-secundaria);
    margin-bottom: 10px;
}

.btn {
    border: none;
    cursor: pointer;
    font-weight: bold;
    border-radius: 9px;
    padding: 11px 15px;
}

.btn-adicionar {
    width: auto;
    min-width: 170px;
    background: var(--cor-primaria);
    color: white;
}

.btn-adicionar:hover {
    background: #1ebe5d;
}

.carrinho {
    background: var(--branco);
    border-radius: 14px;
}

.conteudo-pedido {
    padding: 15px;
}

.item-carrinho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--borda);
}

.quantidade {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quantidade button {
    border: none;
    background: var(--cor-secundaria);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    font-size: 18px;
    cursor: pointer;
}

.carrinho-vazio {
    text-align: center;
    color: #777;
}

.total {
    font-size: 18px;
    font-weight: bold;
    margin: 15px 0;
}

.btn-whatsapp {
    width: 100%;
    background: var(--cor-primaria);
    color: white;
    font-size: 16px;
}

.fechado {
    display: none !important;
}

@media (max-width: 480px) {

    body {
        padding: 15px 10px 30px;
    }

    .logo {
        width: 250px;
        height: 250px;
    }

    .cabecalho h1 {
        font-size: 24px;
    }

    .produto {
        width: 94%;
    }

    .produto-imagem {
        height: 130px;
    }
}

/* Ajuste das secções recolhíveis */
.secao-loja {
    width: 100%;
}

.carrinho {
    background: transparent;
}

.conteudo-pedido {
    background: var(--branco);
    border-radius: 0 0 14px 14px;
}

.btn-secao {
    position: relative;
    z-index: 2;
}

.fechado {
    display: none !important;
}

.formulario {
    background: var(--branco);
    margin-top: 12px;
    padding: 18px;
    border: 1px solid var(--borda);
    border-radius: 12px;
}

.formulario h2 {
    margin-top: 0;
    font-size: 20px;
}

.formulario label {
    display: block;
    margin: 12px 0 6px;
    font-weight: bold;
}

.formulario input,
.formulario select,
.formulario textarea {
    width: 100%;
    padding: 11px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    box-sizing: border-box;
}

.formulario textarea {
    resize: vertical;
}

.btn-publicar {
    width: 100%;
    margin-top: 18px;
    background: var(--cor-secundaria);
    color: white;
}

.mensagem-cadastro {
    text-align: center;
    font-weight: bold;
    margin-bottom: 0;
}

/* ===== NOVA APRESENTAÇÃO DOS PRODUTOS ===== */

.produtos {
    width: 100%;
    gap: 12px;
}

.produto {
    width: 92%;
    max-width: 430px;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.05);
}

.produto-imagem {
    height: 115px;
    margin-bottom: 10px;
    border-radius: 8px;
}

.produto-conteudo h2 {
    margin: 2px 0 6px;
    font-size: 17px;
    line-height: 1.3;
}

.produto-meta {
    margin-bottom: 7px;
}

.produto-meta span {
    font-size: 12px;
    color: #777;
}

.produto .preco {
    font-size: 17px;
    margin-bottom: 10px;
}

.btn-ver-produto {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
}

/* ===== ÁREA DE DETALHES ===== */

.detalhes-produto {
    width: 92%;
    max-width: 700px;
    margin: 14px auto 0;
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.detalhes-produto-conteudo {
    padding: 16px;
    position: relative;
}

.btn-fechar-detalhes {
    display: block;
    margin-left: auto;
    margin-bottom: 12px;
    padding: 7px 12px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--branco);
    cursor: pointer;
    font-weight: 600;
}

.detalhes-imagem {
    width: 100%;
    max-height: 360px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
    background: #eef2f1;
}

.detalhes-imagem img {
    width: 100%;
    height: 100%;
    max-height: 360px;
    object-fit: contain;
    display: block;
}

.detalhes-info h2 {
    margin: 6px 0 12px;
    font-size: 22px;
    line-height: 1.3;
}

.detalhes-descricao {
    color: #555;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 16px;
    white-space: pre-line;
}

.detalhes-preco {
    font-size: 21px;
    font-weight: bold;
    color: var(--cor-secundaria);
    margin-bottom: 14px;
}

.detalhes-info .btn {
    width: 100%;
}

@media (min-width: 700px) {
    .produtos {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }

    .produto {
        width: auto;
        max-width: none;
    }
}

/* ===== VITRINE GC-ANGGLOBAL ===== */

.produtos {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 10px;
    box-sizing: border-box;
}

.produto {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    box-sizing: border-box;
}

.produto-imagem {
    width: 100%;
    height: 120px;
    margin: 0;
    border-radius: 0;
    background: #eef2f1;
    overflow: hidden;
}

.produto-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.produto-conteudo {
    padding: 10px;
}

.produto-meta {
    margin-bottom: 4px;
}

.produto-meta span {
    font-size: 10px;
    color: #777;
    text-transform: uppercase;
    font-weight: 600;
}

.produto-conteudo h2 {
    margin: 3px 0 7px;
    font-size: 15px;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.produto .preco {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 9px;
}

.btn-ver-produto {
    width: 100%;
    padding: 8px 5px;
    font-size: 12px;
    border-radius: 7px;
}

/* ===== DESKTOP ===== */

@media (min-width: 700px) {
    .produtos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        gap: 16px;
    }

    .produto-imagem {
        height: 170px;
    }

    .produto-conteudo h2 {
        font-size: 17px;
    }

    .produto .preco {
        font-size: 17px;
    }
}


/* =====================================================
   VITRINE PROFISSIONAL GC-ANGGLOBAL
   ===================================================== */

.produtos {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 10px;
    box-sizing: border-box;
}

.produto {
    width: 100%;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.produto-visual {
    width: 100%;
    height: 125px;
    background: #eef2f1;
    overflow: hidden;
}

.produto-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.produto-sem-imagem {
    display: flex;
    align-items: center;
    justify-content: center;
}

.produto-sem-imagem span {
    font-size: 45px;
}

.produto-conteudo {
    padding: 11px;
}

.produto-conteudo h2 {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.3;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.btn-ver-produto {
    width: 100%;
    padding: 9px 6px;
    font-size: 12px;
    border-radius: 8px;
}

/* =====================================================
   PAINEL DE DETALHES
   ===================================================== */

.detalhes-produto {
    position: fixed;
    inset: 0;
    z-index: 9999;

    width: 100%;
    max-width: none;
    height: 100dvh;

    margin: 0;
    padding: 0;

    background: rgba(0, 0, 0, 0.55);

    border: 0;
    border-radius: 0;
    box-shadow: none;

    overflow-y: auto;
}

.detalhes-produto.fechado {
    display: none;
}

.detalhes-produto-conteudo {
    width: calc(100% - 24px);
    max-width: 600px;

    margin: 24px auto;

    padding: 18px;

    background: var(--branco);

    border-radius: 18px;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.25);

    box-sizing: border-box;
}

.btn-fechar-detalhes {
    display: block;
    margin-left: auto;
    margin-bottom: 12px;

    padding: 7px 12px;

    border: 1px solid var(--borda);
    border-radius: 8px;

    background: var(--branco);

    cursor: pointer;
    font-weight: 600;
}

.detalhes-imagem {
    width: 100%;
    height: 280px;

    margin-bottom: 18px;

    background: #eef2f1;

    border-radius: 12px;

    overflow: hidden;
}

.detalhes-imagem img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    display: block;
}

.detalhes-sem-imagem {
    display: flex;
    align-items: center;
    justify-content: center;
}

.detalhes-sem-imagem span {
    font-size: 80px;
}

.detalhes-tipo {
    font-size: 11px;
    font-weight: 700;

    color: #777;

    letter-spacing: 0.5px;

    margin-bottom: 5px;
}

.detalhes-info h2 {
    margin: 0 0 12px;

    font-size: 25px;
    line-height: 1.25;
}

.detalhes-preco {
    margin-bottom: 18px;

    font-size: 23px;
    font-weight: 700;

    color: var(--cor-secundaria);
}

.detalhes-descricao {
    margin-bottom: 20px;

    color: #555;

    font-size: 15px;
    line-height: 1.65;

    white-space: pre-line;
}

.detalhes-btn-adicionar {
    width: 100%;
    padding: 12px;

    font-size: 15px;
}

.acoes-admin-detalhes {
    display: flex;
    gap: 10px;

    margin-top: 20px;
    padding-top: 16px;

    border-top: 1px solid var(--borda);
}

.acoes-admin-detalhes .btn {
    flex: 1;
    padding: 10px;
}

.btn-editar {
    background: #f0f0f0;
}

.btn-eliminar {
    background: #fff0f0;
}

/* =====================================================
   COMPUTADOR
   ===================================================== */

@media (min-width: 700px) {

    .produtos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        gap: 16px;
    }

    .produto-visual {
        height: 180px;
    }

    .produto-conteudo h2 {
        font-size: 17px;
    }

    .detalhes-produto-conteudo {
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

/* =========================================
   IDENTIDADE VISUAL GC-ANGGLOBAL
========================================= */

/* Título principal da plataforma */
.cabecalho h1 {
    color: #087443;
}

/* Subtítulo principal */
.cabecalho-logo p {
    color: #2f6f73;
    font-weight: 500;
}

/* Títulos principais */
h2 {
    color: #087443;
}

/* Subtítulos e títulos de secções */
h3 {
    color: #b7791f;
}

/* Texto da apresentação */
.apresentacao p {
    color: #3f4f4f;
}

/* Nome da loja aberta */
#nomeLojaAberta {
    color: #087443;
}

/* Descrição da loja */
#descricaoLojaAberta {
    color: #4a5568;
}



/* ============================================================
   CORES DOS TÍTULOS E SUBTÍTULOS
   ============================================================ */

.cabecalho h1 {
    color: #128C7E;
}

.cabecalho p {
    color: #46635f;
    font-weight: 500;
}


/* TÍTULO DE BOAS-VINDAS */

.apresentacao h2 {
    color: #128C7E;
}


/* SUBTÍTULO DA APRESENTAÇÃO */

.apresentacao p {
    color: #46635f;
}


/* TÍTULO DAS LOJAS */

#secaoLojasDisponiveis h2 {
    color: #128C7E;
}


/* TÍTULOS DE SECÇÕES */

#secaoMinhaConta h2,
#secaoMinhaConta h3,
#secaoLoja h2,
#secaoLoja h3 {
    color: #128C7E;
}


/* TÍTULOS DOS FORMULÁRIOS */

.formulario h2,
.formulario h3 {
    color: #128C7E;
}


/* CABEÇALHO DA LOJA ABERTA */

#nomeLojaAberta {
    color: #128C7E;
}


/* DESCRIÇÕES E SUBTÍTULOS */

#descricaoLojaAberta,
#secaoLojasDisponiveis > p,
.apresentacao p {
    color: #46635f;
}



/* ============================================================
   BOTÕES ENTRAR E CRIAR CONTA
   ============================================================ */

#acoesVisitante {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

#acoesVisitante .btn {
    width: auto;
    min-width: 120px;
    margin: 0;
}

#acoesVisitante #btnAbrirCadastro {
    background: var(--branco);
    color: var(--cor-secundaria);
    border: 1px solid var(--borda);
}

#acoesVisitante #btnAbrirCadastro:hover {
    background: #f0faf7;
}


/* ============================================================
   MODO LOJA ABERTA — PÁGINA EXCLUSIVA
   ============================================================ */

body.modo-loja-aberta {
    background: #f5f7f6;
}


/* Esconder completamente o cabeçalho da plataforma */

body.modo-loja-aberta .cabecalho {
    display: none;
}


/* A loja ocupa toda a área principal */

body.modo-loja-aberta main.container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}


/* A secção da loja ocupa a página */

body.modo-loja-aberta #secaoLoja {
    display: block !important;
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 24px 16px 60px;
    background: #f5f7f6;
}


/* Conteúdo interno com largura controlada */

body.modo-loja-aberta #secaoLoja > * {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}


/* Botão voltar */

body.modo-loja-aberta #btnVoltarPlataforma {
    display: inline-block;
    margin-bottom: 24px;
}


/* Cabeçalho da loja */

body.modo-loja-aberta .cabecalho-loja {
    background: var(--branco);
    padding: 28px 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}


/* Título da loja */

body.modo-loja-aberta #nomeLojaAberta {
    margin-top: 0;
}


/* Garantir que a plataforma não aparece */

body.modo-loja-aberta #secaoPlataforma {
    display: none !important;
}


/* ===== ORGANIZAÇÃO DOS ITENS DO PEDIDO ===== */

.item-pedido {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--borda);
}

.item-pedido-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-pedido-info strong {
    font-size: 16px;
    line-height: 1.25;
}

.item-pedido-info span {
    font-size: 15px;
}

.item-pedido-controles {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.item-pedido-controles .btn {
    min-width: 38px;
    width: 38px;
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-pedido-controles > strong {
    min-width: 22px;
    text-align: center;
}



/* ============================================================
   HOME PROFISSIONAL
============================================================ */

.hero-principal {
    margin: 20px 0 36px;
    padding: 38px 30px;
    border-radius: 24px;
    border: 1px solid var(--borda);
    background:
        linear-gradient(
            135deg,
            rgba(20, 110, 60, 0.10),
            rgba(255, 255, 255, 0.96)
        );
}

.hero-conteudo {
    max-width: 850px;
}

.hero-etiqueta {
    display: inline-block;
    margin-bottom: 16px;
    padding: 8px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.5px;
    background: rgba(20, 110, 60, 0.12);
}

.hero-principal h2 {
    margin: 0;
    max-width: 760px;
    font-size: clamp(32px, 7vw, 56px);
    line-height: 1.08;
}

.hero-descricao {
    max-width: 700px;
    margin: 20px 0 0;
    font-size: 18px;
    line-height: 1.7;
}

.hero-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.hero-acoes .btn {
    min-height: 48px;
    padding-left: 20px;
    padding-right: 20px;
}

.hero-destaques {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 34px;
}

.hero-cartao {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border-radius: 18px;
    border: 1px solid var(--borda);
    background: rgba(255, 255, 255, 0.72);
}

.hero-cartao span {
    font-size: 28px;
}

.hero-cartao strong {
    font-size: 16px;
}

.hero-cartao small {
    line-height: 1.5;
    opacity: 0.75;
}


/* ============================================================
   COMO FUNCIONA
============================================================ */

.como-funciona {
    margin: 46px 0;
}

.secao-titulo {
    max-width: 760px;
    margin-bottom: 24px;
}

.secao-titulo > span {
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    opacity: 0.7;
}

.secao-titulo h2 {
    margin: 10px 0 0;
    font-size: clamp(26px, 5vw, 42px);
    line-height: 1.15;
}

.passos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.passo {
    padding: 22px;
    border: 1px solid var(--borda);
    border-radius: 18px;
}

.passo-numero {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 50%;
    font-weight: bold;
    background: rgba(20, 110, 60, 0.12);
}

.passo h3 {
    margin: 0 0 10px;
    font-size: 17px;
}

.passo p {
    margin: 0;
    line-height: 1.55;
    opacity: 0.8;
}


/* ============================================================
   RESPONSIVO
============================================================ */

@media (max-width: 850px) {

    .hero-destaques {
        grid-template-columns: 1fr;
    }

    .passos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 560px) {

    .hero-principal {
        padding: 28px 20px;
        border-radius: 20px;
    }

    .hero-descricao {
        font-size: 16px;
    }

    .hero-acoes {
        flex-direction: column;
    }

    .hero-acoes .btn {
        width: 100%;
    }

    .passos-grid {
        grid-template-columns: 1fr;
    }
}