:root {
    --cor-principal: #170c01;   /* castanho muito escuro (quase preto) */
    --cor-destaque: #d3b48f;    /* bege dourado suave */
    --cor-destaque-escuro: #a9825c;
    --cor-fundo: #ffffff;       /* branco puro */
    --cor-texto: #170c01;
    --cor-branco: #ffffff;
    --cor-erro: #c0392b;
    --cor-sucesso: #2e7d32;
    --raio: 14px;
    --sombra-suave: 0 4px 18px rgba(23, 12, 1, .07);
    --sombra-media: 0 8px 28px rgba(23, 12, 1, .13);
}

* { box-sizing: border-box; }

html, body {
    /* Salvaguarda: nenhuma página deve conseguir criar scroll horizontal —
       se algum elemento algum dia "transbordar", fica escondido em vez de
       esticar o ecrã inteiro para o lado (o pior bug possível em telemóvel) */
    max-width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: var(--cor-fundo);
    color: var(--cor-texto);
}

a { text-decoration: none; color: inherit; }

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
header.topo {
    background: var(--cor-cabecalho, var(--cor-principal));
    color: var(--cor-cabecalho-texto, var(--cor-branco));
    padding: 12px 0 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

header.topo .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.topo-linha-principal { padding-bottom: 10px; }

.topo-linha-pesquisa {
    padding: 0 0 14px;
}

.topo-linha-pesquisa .barra-pesquisa-topo { max-width: 480px; margin: 0 auto; }

.logo {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .2px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.logo-icone { height: 38px; width: 38px; border-radius: 10px; display: block; }
.logo-texto { color: var(--cor-cabecalho-texto, var(--cor-branco)); }
.logo-texto em { color: var(--cor-cabecalho-texto, var(--cor-destaque)); font-style: normal; opacity: .72; }

.barra-pesquisa-topo {
    display: flex;
    width: 100%;
}

.barra-pesquisa-topo input {
    width: 100%;
    padding: 9px 14px;
    border: none;
    border-radius: 20px 0 0 20px;
    font-size: 14px;
    background: #ffffff;
    color: var(--cor-texto);
}

.barra-pesquisa-topo button {
    background: var(--cor-pesquisa, var(--cor-principal));
    color: var(--cor-pesquisa-texto, var(--cor-branco));
    border: none;
    padding: 0 16px;
    border-radius: 0 20px 20px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

nav.menu-categorias {
    display: flex;
    gap: 22px;
    font-size: 15px;
}

nav.menu-categorias a:hover { color: var(--cor-destaque); }

.botao-menu-mobile {
    display: none;
    background: none;
    border: none;
    color: var(--cor-cabecalho-texto, var(--cor-branco));
    cursor: pointer;
    padding: 10px;
    margin: -10px;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

/* Categorias em ícone (estilo Shein) */
.categorias-icones {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 18px 2px 10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.categoria-icone {
    flex-shrink: 0;
    width: 84px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cor-texto);
    scroll-snap-align: start;
}

.categoria-icone .rotulo {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
    line-height: 1.25em;
}

.categoria-icone .circulo {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--cor-branco);
    border: none;
    box-shadow: var(--sombra-suave);
    color: var(--cor-principal);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    transition: box-shadow .15s ease, transform .15s ease, color .15s ease;
}

.categoria-icone:hover .circulo {
    box-shadow: var(--sombra-media);
    color: var(--cor-destaque-escuro);
    transform: translateY(-3px);
}

/* Cabeçalho de secção (Destaques / Novidades / Promoções) */
.secao-cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 36px 0 16px;
}

.secao-cabecalho h2 {
    font-size: 21px;
    margin: 0;
    letter-spacing: .3px;
}

.secao-cabecalho a {
    font-size: 13px;
    font-weight: 600;
    color: var(--cor-destaque-escuro);
}

.secao-cabecalho a:hover { text-decoration: underline; }

.carrossel-produtos {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
}

.carrossel-produtos .cartao-produto {
    flex: 0 0 190px;
    scroll-snap-align: start;
}

.badge-flutuante {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--cor-branco);
}

.badge-flutuante.novo { background: var(--cor-principal); }
.badge-flutuante.promo { background: #b23b3b; }

/* Faixa de marca (usa a imagem do logo em fundo castanho) */
.faixa-marca {
    margin: 48px 0;
    border-radius: var(--raio);
    overflow: hidden;
    position: relative;
    background: url('/assets/img/marca/nana-sapatos-preto.jpg') center / cover no-repeat;
    box-shadow: var(--sombra-media);
}

.faixa-marca::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(74,50,34,.88), rgba(74,50,34,.72));
}

.faixa-marca-conteudo {
    position: relative;
    z-index: 1;
    padding: 46px 24px;
    text-align: center;
    color: var(--cor-branco);
}

.faixa-marca-conteudo strong {
    display: block;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: .3px;
}

.faixa-marca-conteudo strong em { color: var(--cor-destaque); font-style: normal; }

.faixa-marca-conteudo span {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    opacity: .85;
    letter-spacing: .4px;
}

.secao-cabecalho { scroll-margin-top: 110px; }
.secao-cabecalho h2 { position: relative; padding-left: 14px; }
.secao-cabecalho h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    border-radius: 4px;
    background: var(--cor-destaque);
}

.icone-carrinho {
    position: relative;
    color: var(--cor-cabecalho-texto, var(--cor-branco));
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
}

.icone-carrinho .badge {
    position: absolute;
    top: -8px;
    right: -12px;
    background: var(--cor-destaque);
    color: var(--cor-principal);
    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hero / banners */
.hero, .faixa-promo {
    position: relative;
    padding: 70px 0;
    text-align: center;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.faixa-promo { padding: 46px 0; border-radius: var(--raio); margin: 30px 0; overflow: hidden; }

.hero.estilo-escuro, .faixa-promo.estilo-escuro {
    background-color: #170c01;
    background-image: none;
    color: var(--cor-branco);
}

.hero.estilo-claro, .faixa-promo.estilo-claro {
    background-color: #ffffff;
    background-image: linear-gradient(120deg, #ffffff, #f3ecdf);
    color: var(--cor-principal);
}

/* Quando há imagem de fundo definida no admin, sobrepomos um verniz para o texto continuar legível */
.hero[style*="background-image:url"]::before,
.faixa-promo[style*="background-image:url"]::before {
    content: "";
    position: absolute;
    inset: 0;
}
.hero.estilo-escuro[style*="background-image:url"]::before,
.faixa-promo.estilo-escuro[style*="background-image:url"]::before {
    background: linear-gradient(120deg, rgba(23,12,1,.85), rgba(23,12,1,.7));
}
.hero.estilo-claro[style*="background-image:url"]::before,
.faixa-promo.estilo-claro[style*="background-image:url"]::before {
    background: linear-gradient(120deg, rgba(255,255,255,.86), rgba(255,255,255,.72));
}

.hero::after {
    content: "";
    position: absolute;
    top: -10%;
    right: -6%;
    width: 480px;
    height: 480px;
    background: url('/assets/img/marca/nana-sapatos-preto.jpg') center / cover no-repeat;
    opacity: .16;
    border-radius: 50%;
    filter: saturate(0) brightness(2);
    pointer-events: none;
}

.hero.tem-imagem::after { display: none; }

.hero .container, .faixa-promo .container { position: relative; z-index: 1; }
.hero h1, .faixa-promo h1 { font-size: 36px; margin-bottom: 10px; font-weight: 700; letter-spacing: .3px; }
.faixa-promo h1 { font-size: 26px; }
.hero p, .faixa-promo p { opacity: .82; font-size: 15.5px; }

.publico-pills {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 18px 0 6px;
}
.publico-pills a {
    padding: 8px 20px;
    border-radius: 30px;
    border: 1px solid #e0d3bd;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cor-principal);
    background: var(--cor-branco);
    transition: background .15s ease, color .15s ease;
}
.publico-pills a:hover { background: var(--cor-principal); color: var(--cor-branco); }

.hero.estilo-claro .btn.destaque, .faixa-promo.estilo-claro .btn.destaque {
    background: var(--cor-principal);
    color: var(--cor-branco);
}
.hero.estilo-claro .btn.destaque:hover, .faixa-promo.estilo-claro .btn.destaque:hover {
    background: #2e1a08;
}

/* Grelha de produtos */
.grelha-produtos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 22px;
    padding: 40px 0;
}

.cartao-produto {
    background: var(--cor-branco);
    border-radius: var(--raio);
    overflow: hidden;
    box-shadow: var(--sombra-suave);
    transition: transform .18s ease, box-shadow .18s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.cartao-produto:hover { transform: translateY(-4px); box-shadow: var(--sombra-media); }

.cartao-produto .imagem {
    width: 100%;
    aspect-ratio: 1/1;
    background: linear-gradient(160deg, #f2ece2, #e9e0d2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a89680;
    font-size: 13px;
}

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

.cartao-produto .info { padding: 14px; flex: 1; display: flex; flex-direction: column; }
.cartao-produto .categoria { font-size: 11px; text-transform: uppercase; color: var(--cor-destaque-escuro); font-weight: 600; letter-spacing: .3px; }
.cartao-produto h3 { font-size: 15px; margin: 6px 0; }
.cartao-produto .preco { font-weight: 700; font-size: 16px; margin-top: auto; }
.cartao-produto .preco .antigo { text-decoration: line-through; color: #999; font-weight: 400; font-size: 13px; margin-right: 6px; }

.btn {
    display: inline-block;
    background: var(--cor-principal);
    color: var(--cor-branco);
    padding: 11px 20px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
}

.btn:hover { background: #2e1a08; box-shadow: var(--sombra-suave); }
.btn:active { transform: scale(.98); }
.btn.destaque { background: var(--cor-destaque); color: var(--cor-principal); }
.btn.destaque:hover { background: var(--cor-destaque-escuro); color: var(--cor-branco); }
.btn.bloco { width: 100%; text-align: center; }
.btn.secundario { background: transparent; border: 1px solid #d8cbb8; color: var(--cor-principal); }
.btn.secundario:hover { background: #f2ece2; box-shadow: none; }

/* Formulários */
form .campo { margin-bottom: 16px; }
form label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
form input, form select, form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: var(--raio);
    font-size: 14px;
}

.alerta { padding: 12px 16px; border-radius: var(--raio); margin-bottom: 18px; font-size: 14px; }
.alerta.erro { background: #fdecea; color: var(--cor-erro); border: 1px solid #f5c6cb; }
.alerta.sucesso { background: #eaf6ea; color: var(--cor-sucesso); border: 1px solid #c3e6cb; }

/* Carrinho / tabela */
table { width: 100%; border-collapse: collapse; background: var(--cor-branco); border-radius: var(--raio); overflow: hidden; }
table th, table td { padding: 12px 14px; border-bottom: 1px solid #eee; text-align: left; font-size: 14px; }
table th { background: #ffffff; font-size: 12px; text-transform: uppercase; color: #777; }

.linha-total { display: flex; justify-content: space-between; padding: 10px 0; font-size: 15px; }
.linha-total.total-final { font-weight: 700; font-size: 18px; border-top: 2px solid var(--cor-principal); margin-top: 8px; padding-top: 14px; }

.badge-estado {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.badge-pendente { background: #fff3cd; color: #856404; }
.badge-pagamento_confirmado { background: #d1ecf1; color: #0c5460; }
.badge-em_preparacao { background: #e2d9f3; color: #4b2e83; }
.badge-enviado { background: #ffe5d0; color: #a0522d; }
.badge-entregue { background: #d4edda; color: #155724; }
.badge-cancelado { background: #f8d7da; color: #721c24; }
.badge-pago { background: #d4edda; color: #155724; }

footer.rodape {
    background: var(--cor-principal);
    color: #cfc3b3;
    text-align: center;
    padding: 32px 0;
    margin-top: 60px;
    font-size: 13px;
    line-height: 1.7;
}

/* Admin */
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar {
    width: 230px;
    background: var(--cor-principal);
    color: var(--cor-branco);
    padding: 20px 0;
    flex-shrink: 0;
}
.admin-sidebar .logo { padding: 0 20px 20px; border-bottom: 1px solid #444; margin-bottom: 12px; }
.admin-sidebar a {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    color: #ccc;
}
.admin-sidebar a:hover, .admin-sidebar a.activo { background: #2a2a2a; color: var(--cor-destaque); }
.admin-conteudo { flex: 1; padding: 28px; }

.cartoes-dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-bottom: 30px; }
.cartao-metrica { background: var(--cor-branco); padding: 20px; border-radius: var(--raio); box-shadow: var(--sombra-suave); }
.cartao-metrica .label { font-size: 13px; color: #777; margin-bottom: 6px; }
.cartao-metrica .valor { font-size: 24px; font-weight: 700; }

.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }

/* ============================================================
   RESPONSIVIDADE — telemóvel e tablet
   ============================================================ */

/* Tabelas: em vez de espremer colunas, o próprio contentor ganha
   scroll horizontal e a tabela mantém uma largura mínima legível */
.container, .admin-conteudo {
    overflow-x: auto;
}

table { min-width: 620px; }

/* Tablet e ecrãs médios (≤ 900px) */
@media (max-width: 900px) {
    .admin-shell { flex-direction: column; min-height: auto; }
    .admin-sidebar {
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 10px 12px;
        gap: 2px;
    }
    .admin-sidebar .logo {
        width: 100%;
        border-bottom: none;
        padding: 4px 8px 10px;
        margin-bottom: 4px;
    }
    .admin-sidebar a {
        padding: 8px 12px;
        border-radius: 8px;
    }
    .admin-sidebar a:last-child { margin-left: auto; border-top: none; padding-top: 8px; }
    .admin-conteudo { padding: 18px; }
}

/* Telemóvel (≤ 640px) */
@media (max-width: 640px) {
    .container { padding: 0 14px; }

    /* O cabeçalho já tem uma barra de pesquisa fixa em todas as páginas —
       esconde a segunda caixa de pesquisa da homepage para não duplicar */
    .pesquisa-hero { display: none !important; }

    /* Carrinho: a tabela vira uma lista de cartões, muito mais fácil de usar com o dedo */
    table.tabela-carrinho { min-width: 0; }
    table.tabela-carrinho thead { display: none; }
    table.tabela-carrinho, table.tabela-carrinho tbody, table.tabela-carrinho tr, table.tabela-carrinho td { display: block; width: 100%; }
    table.tabela-carrinho tr {
        background: var(--cor-branco);
        border-radius: var(--raio);
        box-shadow: var(--sombra-suave);
        margin-bottom: 12px;
        padding: 4px 14px;
    }
    table.tabela-carrinho td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid #f1ece2;
        padding: 10px 0;
        text-align: right;
    }
    table.tabela-carrinho td:last-child { border-bottom: none; }
    table.tabela-carrinho td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--cor-destaque-escuro);
        text-align: left;
    }
    table.tabela-carrinho td[data-label=""]::before { content: none; }
    table.tabela-carrinho td input[type="number"] { max-width: 70px; text-align: center; }

    /* Botão de compra sempre fácil de alcançar com o polegar */
    .botao-adicionar-carrinho { width: 100%; text-align: center; padding: 13px; font-size: 15px; }

    /* Cabeçalho: menu hambúrguer em vez de espremer as categorias */
    .logo-texto { font-size: 19px; }
    .logo-icone { height: 32px; width: 32px; }
    .botao-menu-mobile { display: flex; }
    nav.menu-categorias {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--cor-cabecalho, var(--cor-principal));
        box-shadow: var(--sombra-media);
        padding: 6px 0;
        z-index: 20;
    }
    nav.menu-categorias.aberto { display: flex; color: var(--cor-cabecalho-texto, var(--cor-branco)); }
    nav.menu-categorias a {
        padding: 12px 20px;
        border-top: 1px solid rgba(0,0,0,.12);
        font-size: 15px;
    }
    .topo-linha-principal { position: relative; }

    /* Hero */
    .hero { padding: 40px 0; }
    .hero h1 { font-size: 25px; }
    .hero p { font-size: 13.5px; }
    .hero::after { width: 260px; height: 260px; }

    /* Categorias em ícone */
    .categoria-icone { width: 70px; }
    .categoria-icone .circulo { width: 54px; height: 54px; }
    .categoria-icone .circulo svg { width: 22px; height: 22px; }

    /* Grelha e carrossel de produtos */
    .grelha-produtos {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 24px 0;
    }
    .carrossel-produtos .cartao-produto { flex: 0 0 150px; }
    .cartao-produto h3 { font-size: 13.5px; }
    .cartao-produto .preco { font-size: 14px; }

    .secao-cabecalho { margin: 26px 0 12px; }
    .secao-cabecalho h2 { font-size: 18px; }

    .faixa-marca-conteudo { padding: 32px 18px; }
    .faixa-marca-conteudo strong { font-size: 22px; }

    /* Formulários: colunas lado-a-lado passam a empilhar */
    form div[style*="display:flex"][style*="gap:16px"] {
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* Produto: colunas de imagem/detalhe empilham (já usam flex-wrap, só reduz respiro) */
    .container[style*="padding:40px 0"] { padding-top: 24px !important; padding-bottom: 24px !important; }

    /* Painel de ajuda flutuante ocupa quase o ecrã todo, sem sair da tela */
    #nana-ajuda-painel { width: 92vw; right: -4px; }
    #nana-ajuda-flutuante { bottom: 14px; right: 14px; }
    #nana-ajuda-botao { width: 50px; height: 50px; }

    /* Dashboard admin: métricas em 2 colunas */
    .cartoes-dashboard { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .cartao-metrica { padding: 14px; }
    .cartao-metrica .valor { font-size: 19px; }

    .toolbar { flex-direction: column; align-items: stretch; }
}

/* Telemóveis pequenos (≤ 380px) */
@media (max-width: 380px) {
    .grelha-produtos { grid-template-columns: 1fr 1fr; gap: 10px; }
    .categoria-icone { width: 62px; }
    .logo-texto { font-size: 17px; }
    .hero h1 { font-size: 22px; }
}

@media (max-width: 640px) {
    .faixa-promo { padding: 30px 0; margin: 20px 0; }
    .faixa-promo h1 { font-size: 20px; }
    .publico-pills a { padding: 7px 14px; font-size: 12.5px; }
}

/* Carrossel de slides no banner do meio da homepage */
.carrossel-meio {
    position: relative;
    margin: 48px 0;
    border-radius: var(--raio);
    overflow: hidden;
    height: 300px;
    box-shadow: var(--sombra-media);
}

.slide-carrossel {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity .8s ease;
    pointer-events: none;
}

.slide-carrossel.activo { opacity: 1; pointer-events: auto; }

.slide-carrossel.estilo-escuro { background-color: #170c01; }
.slide-carrossel.estilo-claro { background-color: #ffffff; }

.slide-carrossel::before {
    content: "";
    position: absolute;
    inset: 0;
}
.slide-carrossel.estilo-escuro::before { background: linear-gradient(120deg, rgba(23,12,1,.82), rgba(23,12,1,.62)); }
.slide-carrossel.estilo-claro::before { background: linear-gradient(120deg, rgba(255,255,255,.84), rgba(255,255,255,.6)); }

.slide-carrossel-conteudo {
    position: relative;
    z-index: 1;
    padding: 20px;
    max-width: 480px;
}

.slide-carrossel.estilo-escuro .slide-carrossel-conteudo { color: var(--cor-branco); }
.slide-carrossel.estilo-claro .slide-carrossel-conteudo { color: var(--cor-principal); }

.slide-carrossel-conteudo h3 { font-size: 26px; margin: 0 0 8px; font-weight: 700; }
.slide-carrossel-conteudo p { margin: 0 0 16px; font-size: 14.5px; opacity: .88; }

.carrossel-meio-pontos {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 2;
}

.carrossel-meio-pontos .ponto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.carrossel-meio-pontos .ponto.activo { background: var(--cor-destaque); transform: scale(1.25); }

@media (max-width: 640px) {
    .carrossel-meio { height: 250px; }
    .slide-carrossel-conteudo h3 { font-size: 20px; }
}

/* ============================================================
   Cartões: % de desconto e aviso de últimas unidades
   ============================================================ */
.badge-desconto {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    background: var(--cor-principal);
    color: var(--cor-destaque);
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
}

.ultimas-unidades {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--cor-erro);
}

/* Barra de ordenação nas listagens */
.barra-ordenacao {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 12px 0 0;
    font-size: 14px;
    color: #777777;
}
.barra-ordenacao label { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--cor-texto); margin: 0; }
.barra-ordenacao select { width: auto; padding: 7px 10px; }

/* Barra de confiança (página inicial) */
.barra-confianca {
    background: #ffffff;
    border-top: 1px solid #f1ece2;
    margin-top: 40px;
    padding: 26px 0;
}
.barra-confianca .container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.item-confianca {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--cor-destaque-escuro);
}
.item-confianca strong { display: block; color: var(--cor-texto); font-size: 14px; }
.item-confianca span { display: block; color: #777777; font-size: 12.5px; }

@media (max-width: 900px) {
    .barra-confianca .container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .barra-confianca .container { grid-template-columns: 1fr 1fr; gap: 14px; }
    .item-confianca svg { width: 24px; height: 24px; flex-shrink: 0; }
    .barra-ordenacao { flex-wrap: wrap; }
}

/* Página "Instalar a app" */
.passos-instalacao {
    text-align: left;
    background: #ffffff;
    border-radius: var(--raio);
    box-shadow: var(--sombra-suave);
    padding: 18px 22px;
    margin: 24px 0;
}
.passos-instalacao h3 { margin-top: 0; }
.passos-instalacao li { margin-bottom: 8px; line-height: 1.5; }

/* ============================================================
   CORRECÇÕES DE ECRÃ PEQUENO (auditoria em modo telemóvel)
   ============================================================ */

/* Margem lateral garantida em TODAS as páginas: várias páginas definem
   "padding:40px 0" directamente no HTML, o que apagava a margem lateral
   e deixava o texto colado à borda do ecrã no telemóvel. */
.container {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

@media (max-width: 640px) {
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Títulos proporcionais ao ecrã do telemóvel */
    h1 { font-size: 26px; line-height: 1.2; margin: 0 0 14px; }
    h2 { font-size: 20px; line-height: 1.25; }
    h3 { font-size: 17px; }

    /* Menos espaço morto no topo das páginas */
    .container[style*="padding:40px 0"] { padding-top: 22px !important; padding-bottom: 28px !important; }

    /* O botão do chat nunca tapa o conteúdo nem o rodapé */
    footer.rodape { padding-bottom: 96px; }
    #nana-ajuda-flutuante { bottom: 16px !important; right: 14px !important; }
    #nana-ajuda-botao { width: 52px !important; height: 52px !important; }

    /* Formulários: campos e botões confortáveis ao toque */
    form .campo input, form .campo select, form .campo textarea { font-size: 16px; } /* evita o zoom automático do iPhone */
}

/* ------------------------------------------------------------
   Cabeçalho: nunca cortar o menu nem os ícones.
   A regra ".container { overflow-x: auto }" (para as tabelas
   largas do admin) prendia o menu aberto dentro da faixa do
   cabeçalho e escondia o ícone da conta em ecrãs estreitos.
   ------------------------------------------------------------ */
header.topo .container { overflow: visible !important; }

@media (max-width: 640px) {
    header.topo .topo-linha-principal { gap: 6px; }
    header.topo .logo { flex: 1 1 auto; min-width: 0; }
    header.topo .logo-texto {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
    .icone-carrinho, .botao-menu-mobile { flex-shrink: 0; }
    .botao-menu-mobile { margin: 0; padding: 8px; min-width: 40px; min-height: 40px; }
}

@media (max-width: 380px) {
    header.topo .logo-texto { font-size: 16px; }
    header.topo .logo-icone { width: 30px; height: 30px; }
    .icone-carrinho { min-width: 36px; }
    .icone-carrinho svg { width: 21px; height: 21px; }
}