/* ==================================================================
   ANINEI COMERCIO — DESIGN SYSTEM
   Folha de estilos central. Todas as páginas (loja + admin)
   dependem destas classes — os nomes abaixo já são usados no HTML
   existente e não devem ser renomeados.
   ================================================================== */

/* ============================== TOKENS ============================== */
:root {
    /* Marca */
    --vermelho: #E90000;
    --vermelho-escuro: #b40000;
    --vermelho-claro: #ff3b3b;
    --vermelho-50: #fdeceb;
    --vermelho-100: #fbd6d3;

    /* Neutros */
    --branco: #FFFFFF;
    --preto: #14141a;
    --tinta: #14141a;
    --tinta-suave: #3a3a44;
    --cinza-900: #1b1c22;
    --cinza-800: #2b2d36;
    --cinza-700: #454855;
    --cinza-600: #5c5f6d;
    --cinza-500: #767a89;
    --cinza-400: #9a9daa;
    --cinza-300: #c3c6d0;
    --cinza-200: #e2e4ea;
    --cinza-100: #eef0f4;
    --cinza-claro: #f5f6f9;
    --cinza-50: #f8f9fb;
    --borda: #e4e6ec;
    --borda-forte: #d2d5de;

    /* Semânticas */
    --sucesso: #16a34a;
    --sucesso-bg: #e9f9ef;
    --sucesso-borda: #bdeccd;
    --erro: #dc2626;
    --erro-bg: #fdecec;
    --erro-borda: #f6c6c6;
    --aviso: #d97706;
    --aviso-bg: #fef6e7;
    --aviso-borda: #f6dfab;
    --info: #2563eb;
    --info-bg: #eaf1fe;
    --info-borda: #c6d9fb;

    /* Admin */
    --admin-bg: #0f1117;
    --admin-bg-elev: #171a24;
    --admin-borda: rgba(255, 255, 255, 0.08);
    --admin-texto: #cdd0da;
    --admin-texto-suave: #8a8d9c;

    /* Forma */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* Sombra */
    --sombra-sm: 0 1px 2px rgba(20, 20, 26, 0.06), 0 1px 1px rgba(20, 20, 26, 0.04);
    --sombra-md: 0 6px 16px -4px rgba(20, 20, 26, 0.12), 0 2px 6px -2px rgba(20, 20, 26, 0.06);
    --sombra-lg: 0 20px 40px -12px rgba(20, 20, 26, 0.18), 0 8px 16px -8px rgba(20, 20, 26, 0.08);
    --sombra-vermelho: 0 10px 24px -8px rgba(233, 0, 0, 0.4);

    /* Movimento */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 150ms;
    --dur: 240ms;
    --dur-slow: 420ms;

    /* Layout */
    --container-w: 1200px;
    --header-h: 118px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================== RESET ============================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
    background: var(--branco);
    color: var(--tinta);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }

:focus-visible {
    outline: 2px solid var(--vermelho);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============================== LAYOUT ============================== */
.container {
    width: 100%;
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
}

.mt-3 { margin-top: 1rem; }

/* ============================== TIPOGRAFIA ============================== */
h1, h2, h3, h4, h5 {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--tinta);
    line-height: 1.2;
}
h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin-bottom: 1.1rem; }
h3 { font-size: 1.2rem; font-weight: 650; }
h4 { font-size: 1.05rem; font-weight: 650; }

.texto-corpo { font-size: 1rem; color: var(--tinta-suave); }
.texto-pequeno { font-size: 0.9rem; color: var(--cinza-600); }
.destaque-texto,
.destaque { color: var(--vermelho); }
.secao-titulo { text-align: center; margin-bottom: 2.2rem; }
.secao-titulo p { color: var(--cinza-600); margin-top: 0.4rem; }
.breadcrumb { font-size: 0.85rem; color: var(--cinza-500); padding: 1rem 0 0; }
.breadcrumb a { color: var(--cinza-600); transition: color var(--dur) var(--ease); }
.breadcrumb a:hover { color: var(--vermelho); }
.ver-todos, .voltar {
    color: var(--vermelho);
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: gap var(--dur) var(--ease);
}
.ver-todos:hover, .voltar:hover { gap: 0.55rem; text-decoration: none; }

/* ============================== ANIMAÇÕES ============================== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes pulseCarrinho {
    0% { transform: scale(1); }
    30% { transform: scale(1.35); }
    60% { transform: scale(0.92); }
    100% { transform: scale(1); }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > * { animation: fadeInUp var(--dur-slow) var(--ease) backwards; }
.reveal-stagger.is-visible > *:nth-child(1) { animation-delay: 0.02s; }
.reveal-stagger.is-visible > *:nth-child(2) { animation-delay: 0.08s; }
.reveal-stagger.is-visible > *:nth-child(3) { animation-delay: 0.14s; }
.reveal-stagger.is-visible > *:nth-child(4) { animation-delay: 0.2s; }
.reveal-stagger.is-visible > *:nth-child(5) { animation-delay: 0.26s; }
.reveal-stagger.is-visible > *:nth-child(6) { animation-delay: 0.32s; }
.reveal-stagger.is-visible > *:nth-child(7) { animation-delay: 0.38s; }
.reveal-stagger.is-visible > *:nth-child(8) { animation-delay: 0.44s; }

.pulse-badge { animation: pulseCarrinho 0.5s var(--ease-out-back); }

/* ============================== BOTÕES ============================== */
.btn, button.btn, a.btn,
.btn-add, .btn-filter, .btn-filtrar, .btn-cadastrar, .btn-enviar, .btn-finalizar,
.btn-submit, .btn-reset, .btn-export, .btn-upload, .btn-ver, .btn-whatsapp,
.btn-remover, .btn-remover-favorito, .btn-close-modal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.75rem 1.7rem;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease),
        background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
    background: var(--branco);
    color: var(--tinta);
    border-color: var(--borda-forte);
    line-height: 1.2;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.btn:hover, .btn-add:hover, .btn-filter:hover, .btn-filtrar:hover, .btn-cadastrar:hover,
.btn-enviar:hover, .btn-finalizar:hover, .btn-submit:hover, .btn-export:hover, .btn-upload:hover,
.btn-ver:hover, .btn-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-md);
}
.btn:active, .btn-add:active, .btn-submit:active { transform: translateY(0) scale(0.98); box-shadow: var(--sombra-sm); }

.btn-primario, .btn-add, .btn-cadastrar, .btn-enviar, .btn-finalizar, .btn-submit,
.btn-whatsapp, .status-tabs a.active {
    background: var(--vermelho);
    color: var(--branco);
    border-color: var(--vermelho);
    box-shadow: var(--sombra-vermelho);
}
.btn-primario:hover, .btn-add:hover, .btn-cadastrar:hover, .btn-enviar:hover,
.btn-finalizar:hover, .btn-submit:hover, .btn-whatsapp:hover {
    background: var(--vermelho-escuro);
    border-color: var(--vermelho-escuro);
}

.btn-secundario, .btn-reset, .btn-close-modal {
    background: transparent;
    color: var(--tinta);
    border-color: var(--tinta);
}
.btn-secundario:hover, .btn-reset:hover, .btn-close-modal:hover {
    background: var(--tinta);
    color: var(--branco);
}

.btn-outline-vermelho, .btn-outline, .btn-export, .btn-ver, .btn-filter, .btn-filtrar, .btn-upload {
    background: transparent;
    color: var(--vermelho);
    border-color: var(--vermelho);
}
.btn-outline-vermelho:hover, .btn-outline:hover, .btn-export:hover, .btn-ver:hover,
.btn-filter:hover, .btn-filtrar:hover, .btn-upload:hover {
    background: var(--vermelho);
    color: var(--branco);
}

.btn-branco {
    background: var(--branco);
    color: var(--tinta);
    border-color: var(--branco);
}
.btn-branco:hover { background: var(--cinza-100); }

.btn-danger, .btn-remover, .btn-remover-favorito, .delete {
    background: var(--erro-bg);
    color: var(--erro);
    border-color: var(--erro-borda);
}
.btn-danger:hover, .btn-remover:hover, .btn-remover-favorito:hover, .delete:hover {
    background: var(--erro);
    color: var(--branco);
    border-color: var(--erro);
}

.btn-success, .activate {
    background: var(--sucesso-bg);
    color: var(--sucesso);
    border-color: var(--sucesso-borda);
}
.btn-success:hover, .activate:hover { background: var(--sucesso); color: var(--branco); }

.btn-pequeno { padding: 0.4rem 1rem; font-size: 0.82rem; }
.btn-login { width: 100%; padding: 0.85rem; font-size: 1.02rem; }
.edit { color: var(--info); }
.view { color: var(--cinza-600); }

/* ============================== FORMULÁRIOS ============================== */
.form-grupo, .campo { margin-bottom: 1.1rem; }
.form-grupo label, .campo label {
    display: block;
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 0.4rem;
    color: var(--tinta);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; font-weight: 400; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="tel"], input[type="date"], input[type="search"], input[type="url"],
textarea, select,
.form-grupo input, .form-grupo select, .form-grupo textarea,
.campo input, .campo select, .campo textarea {
    width: 100%;
    padding: 0.72rem 0.9rem;
    border: 1.5px solid var(--borda);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.96rem;
    background: var(--branco);
    color: var(--tinta);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea { resize: vertical; min-height: 110px; }

input:focus, select:focus, textarea:focus,
.form-grupo input:focus, .form-grupo select:focus, .form-grupo textarea:focus,
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--vermelho);
    box-shadow: 0 0 0 4px var(--vermelho-50);
}

.form-links { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; margin: 0.4rem 0 1.3rem; flex-wrap: wrap; gap: 0.5rem; }
.form-links a, .login-link { color: var(--vermelho); font-weight: 500; }
.form-links a:hover, .login-link:hover { text-decoration: underline; }
.registrar { text-align: center; margin-top: 1.3rem; font-size: 0.95rem; color: var(--cinza-600); }
.registrar a { color: var(--vermelho); font-weight: 600; }
.registrar a:hover { text-decoration: underline; }

/* ===== Campo com ícone + toggle de senha ===== */
.campo-icone { position: relative; }
.campo-icone > i {
    position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%);
    color: var(--cinza-400); font-size: 0.92rem; transition: color var(--dur) var(--ease); pointer-events: none;
}
.campo-icone input { padding-left: 2.6rem; }
.campo-icone:focus-within > i { color: var(--vermelho); }
.campo-icone input[type="password"], .campo-icone input.tem-toggle { padding-right: 2.7rem; }
.toggle-senha {
    position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border: none; background: transparent; color: var(--cinza-500);
    cursor: pointer; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.toggle-senha:hover { color: var(--tinta); background: var(--cinza-100); }

/* ===== Estados de validação e feedback inline ===== */
.campo-icone input.is-valida, .form-grupo input.is-valida { border-color: var(--sucesso); }
.campo-icone input.is-invalida, .form-grupo input.is-invalida { border-color: var(--erro); }
.campo-icone input.is-invalida:focus, .form-grupo input.is-invalida:focus { box-shadow: 0 0 0 4px var(--erro-bg); }
.campo-icone input.is-valida:focus, .form-grupo input.is-valida:focus { box-shadow: 0 0 0 4px var(--sucesso-bg); }
.campo-feedback {
    display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; margin-top: 0.4rem;
    max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.campo-feedback.mostrar { max-height: 40px; opacity: 1; }
.campo-feedback.erro { color: var(--erro); }
.campo-feedback.sucesso { color: var(--sucesso); }

/* ===== Checklist de requisitos da senha ===== */
.senha-requisitos {
    list-style: none; display: grid; gap: 0.35rem; margin-top: 0.55rem;
    max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.senha-requisitos.mostrar { max-height: 200px; opacity: 1; }
.senha-requisitos li {
    display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--cinza-500);
    transition: color var(--dur) var(--ease);
}
.senha-requisitos li i { font-size: 0.72rem; width: 14px; color: var(--cinza-300); transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.senha-requisitos li.ok { color: var(--sucesso); }
.senha-requisitos li.ok i { color: var(--sucesso); transform: scale(1.15); }

/* ===== Banner de sucesso (ex: pós-cadastro na página de login) ===== */
.auth-success-banner {
    display: flex; align-items: flex-start; gap: 0.8rem;
    background: var(--sucesso-bg); border: 1px solid var(--sucesso-borda); color: #0d7a37;
    border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1.4rem;
    animation: fadeInUp var(--dur-slow) var(--ease);
}
.auth-success-banner i { font-size: 1.3rem; margin-top: 0.1rem; }
.auth-success-banner strong { display: block; font-size: 0.95rem; margin-bottom: 0.15rem; }
.auth-success-banner p { font-size: 0.87rem; opacity: 0.9; }

/* ===== Botão em estado de carregamento ===== */
.btn.is-loading { pointer-events: none; opacity: 0.85; }
.btn-carregando { display: inline-flex; align-items: center; gap: 0.5rem; }
.btn-spinner {
    width: 15px; height: 15px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: var(--branco);
    animation: spin 0.6s linear infinite; display: inline-block;
}
.btn-secundario .btn-spinner, .btn-outline .btn-spinner { border-color: rgba(20, 20, 26, 0.25); border-top-color: var(--tinta); }

/* ============================== BADGES / STATUS ============================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--cinza-100);
    color: var(--cinza-700);
}
.badge-azul, .badge.azul, .tipo-badge, .principal-badge { background: var(--info-bg); color: var(--info); }
.badge-carrinho {
    position: absolute;
    top: -8px;
    right: -10px;
    background: var(--vermelho);
    color: var(--branco);
    font-size: 0.68rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 0 0 2px var(--branco);
}

.status, .status-badge, .edit-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.85rem;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: capitalize;
    background: var(--cinza-100);
    color: var(--cinza-700);
}
.status-badge.pendente, .status.pendente, .pendente,
.status-badge.laranja, .laranja { background: var(--aviso-bg); color: var(--aviso); }
.status-badge.processando, .status.processando, .processando,
.status-badge.azul { background: var(--info-bg); color: var(--info); }
.status-badge.enviado, .status.enviado, .enviado { background: #eef0fe; color: #5457e0; }
.status-badge.entregue, .status.entregue, .entregue,
.status-badge.verde, .verde,
.status-ativo, .ativo { background: var(--sucesso-bg); color: var(--sucesso); }
.status-badge.cancelado, .status.cancelado, .cancelado,
.status-inativo, .inativo, .status-badge.indisponivel, .indisponivel { background: var(--erro-bg); color: var(--erro); }

/* ============================== ALERTAS / FLASH ============================== */
.alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.95rem 2.6rem 0.95rem 1.1rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--borda);
    font-size: 0.92rem;
    margin-bottom: 1rem;
    animation: fadeInUp var(--dur-slow) var(--ease);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), max-height var(--dur-slow) var(--ease), margin var(--dur-slow) var(--ease), padding var(--dur-slow) var(--ease);
}
.alert i { margin-top: 0.15rem; flex-shrink: 0; }
.alert .close {
    position: absolute; right: 0.7rem; top: 0.6rem; border: none; background: transparent;
    font-size: 1.1rem; line-height: 1; color: inherit; opacity: 0.55; cursor: pointer; transition: opacity var(--dur) var(--ease);
}
.alert .close:hover { opacity: 1; }
.alert.alert-fade-out { opacity: 0; transform: translateY(-8px); max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }
.alert-success, .alert.success { background: var(--sucesso-bg); border-color: var(--sucesso-borda); color: #0d7a37; }
.alert-error, .alert.error, .alert-danger { background: var(--erro-bg); border-color: var(--erro-borda); color: #a51c1c; }
.alert-warning, .alert.warning { background: var(--aviso-bg); border-color: var(--aviso-borda); color: #92600a; }
.alert-info, .alert.info { background: var(--info-bg); border-color: var(--info-borda); color: #1a4bb8; }

/* ============================== HEADER / NAV ============================== */
header {
    border-bottom: 1px solid var(--borda);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    position: sticky;
    top: 0;
    z-index: 200;
    transition: box-shadow var(--dur) var(--ease), transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
header.is-scrolled { box-shadow: 0 6px 20px -10px rgba(20, 20, 26, 0.18); }
header.header-hidden { transform: translateY(-100%); }

.header-top { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 0; flex-wrap: wrap; gap: 1.5rem; }

.logo { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.03em; display: flex; align-items: center; gap: 0.3rem; }
.logo span { color: var(--vermelho); }
.logo small { font-size: 0.75rem; font-weight: 400; color: var(--cinza-600); display: block; margin-top: -0.2rem; }

.header-acoes { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.header-conta { display:flex; align-items:center; gap:.35rem; color:var(--tinta); font-size:.9rem; font-weight:600; text-decoration:none; white-space:nowrap; }
.header-conta i { color:var(--vermelho); font-size:1.15rem; }
.header-conta:hover { color:var(--vermelho); }

.nav-toggle {
    display: none;
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--borda);
    background: var(--branco);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-direction: column;
    gap: 4px;
}
.nav-toggle span { width: 18px; height: 2px; background: var(--tinta); border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.nav-toggle.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-principal, .main-nav {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 1rem;
}
.nav-principal ul, .main-nav ul { display: flex; flex-wrap: wrap; gap: 0.2rem 1.8rem; font-weight: 550; font-size: 0.9rem; }
.nav-principal ul li a, .main-nav ul li a {
    position: relative;
    display: inline-flex;
    padding: 0.6rem 0.05rem;
    color: var(--tinta-suave);
    letter-spacing: 0.02em;
    transition: color var(--dur) var(--ease);
}
.nav-principal ul li a::after, .main-nav ul li a::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: 0.35rem; height: 2px;
    background: var(--vermelho); transition: right var(--dur) var(--ease);
}
.nav-principal ul li a:hover, .main-nav ul li a:hover,
.nav-principal ul li a.active, .main-nav ul li a.active { color: var(--tinta); }
.nav-principal ul li a:hover::after, .nav-principal ul li a.active::after,
.main-nav ul li a:hover::after, .main-nav ul li a.active::after { right: 0; }

.btn-encomenda {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--vermelho); color: var(--branco); padding: 0.6rem 1.4rem;
    border-radius: var(--radius-pill); font-weight: 650; font-size: 0.86rem; border: none;
    box-shadow: var(--sombra-vermelho); white-space: nowrap;
    transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn-encomenda:hover { background: var(--vermelho-escuro); transform: translateY(-2px); }

.carrinho-icone { position: relative; display: flex; align-items: center; justify-content: center; color: var(--tinta); font-size: 1.3rem; transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.carrinho-icone:hover { color: var(--vermelho); transform: translateY(-2px); }

/* ============================== HEADER / FOOTER DE AUTENTICAÇÃO ============================== */
.header-auth { border-bottom: 1px solid var(--borda); background: var(--branco); position: sticky; top: 0; z-index: 200; }
.header-top-auth { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 0; }
.auth-voltar {
    display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600;
    color: var(--tinta-suave); transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.auth-voltar:hover { color: var(--vermelho); gap: 0.7rem; }
.footer-auth { background: var(--admin-bg); padding: 1.5rem 0; border-top: 3px solid var(--vermelho); margin-top: auto; }
.footer-auth .copy { text-align: center; font-size: 0.85rem; color: #a9abb8; }

/* ============================== HERO INSTITUCIONAL (index) ============================== */
.hero-institucional { padding: clamp(2.6rem, 5vw, 4.5rem) 0; background: var(--cinza-claro); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hero-texto { animation: fadeInUp var(--dur-slow) var(--ease); }
.hero-tag { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; color: var(--vermelho); margin-bottom: 0.9rem; }
.hero-texto h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); font-weight: 800; line-height: 1.12; margin-bottom: 1rem; color: var(--tinta); }
.hero-texto h1 span { color: var(--vermelho); }
.hero-texto > p { font-size: 1.05rem; color: var(--tinta-suave); max-width: 480px; margin-bottom: 1.7rem; }
.hero-botoes { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.hero-imagem { position: relative; display: flex; align-items: center; justify-content: center; }
.hero-imagem img { width: 100%; max-width: 560px; height: auto; animation: fadeInUp var(--dur-slow) var(--ease); }

/* ============================== INDICADORES (abaixo do hero) ============================== */
.indicadores-strip { background: var(--tinta); padding: 1.1rem 0; }
.indicadores-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.indicador-item { display: flex; align-items: center; gap: 0.8rem; color: var(--branco); }
.indicador-item i { font-size: 1.2rem; color: var(--vermelho-claro); flex-shrink: 0; }
.indicador-item div { display: flex; flex-direction: column; line-height: 1.3; }
.indicador-item strong { font-size: 0.88rem; font-weight: 700; }
.indicador-item span { font-size: 0.78rem; color: #b8b8c4; }

/* ============================== SOBRE A ANINEI (index) ============================== */
.sobre-aninei { padding: clamp(3rem, 6vw, 5rem) 0; }
.sobre-grid-institucional { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.secao-tag { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; color: var(--vermelho); margin-bottom: 0.7rem; }
.sobre-texto h2 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.2rem); font-weight: 800; margin-bottom: 1rem; line-height: 1.2; }
.sobre-texto .texto-corpo { color: var(--tinta-suave); margin-bottom: 0.9rem; }
.link-saber-mais { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--vermelho); font-weight: 700; font-size: 0.92rem; margin-top: 0.6rem; transition: gap var(--dur) var(--ease); }
.link-saber-mais:hover { gap: 0.8rem; }

.sobre-grafico {
    position: relative; aspect-ratio: 1/0.85; border-radius: var(--radius-xl);
    overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.sobre-grafico-forma {
    position: absolute; width: 65%; aspect-ratio: 1/1; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--vermelho-claro), var(--vermelho) 60%, var(--vermelho-escuro) 100%);
    opacity: 0.92; top: 10%; right: -10%;
}
.sobre-grafico-icones {
    position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.2rem, 3vw, 2.2rem);
    z-index: 1;
}
.sobre-grafico-icones i {
    width: clamp(52px, 8vw, 76px); height: clamp(52px, 8vw, 76px); border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    color: var(--branco); font-size: clamp(1.2rem, 2.4vw, 1.7rem);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

/* ============================== SOLUÇÕES / O QUE OFERECEMOS (index) ============================== */
.solucoes-secao { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--cinza-claro); }
.secao-titulo-centro { text-align: center; max-width: 640px; margin: 0 auto 2.4rem; }
.secao-titulo-centro h2 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.2rem); font-weight: 800; line-height: 1.2; }
.secao-titulo-centro h2 span { color: var(--vermelho); }
.secao-titulo-centro .texto-corpo { color: var(--tinta-suave); margin-top: 0.6rem; }
.solucoes-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; }
.solucao-card {
    background: var(--branco); border: 1px solid var(--borda); border-radius: var(--radius-lg);
    padding: 1.6rem 1.3rem; text-align: center; box-shadow: var(--sombra-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.solucao-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); border-color: var(--vermelho-100); }
.solucao-icone {
    width: 56px; height: 56px; border-radius: var(--radius); margin: 0 auto 1rem;
    background: var(--vermelho-50); color: var(--vermelho);
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.solucao-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.4rem; }
.solucao-card p { font-size: 0.85rem; color: var(--tinta-suave); margin-bottom: 0.9rem; }
.solucao-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--vermelho); font-weight: 700; font-size: 0.85rem; }

/* ============================== PRODUTOS EM DESTAQUE (index) ============================== */
.produtos-destaque-secao { padding: clamp(3rem, 6vw, 5rem) 0; }
.produtos-destaque-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
.ver-todos-centro { text-align: center; }

/* ============================== VANTAGENS INSTITUCIONAL (index) ============================== */
.vantagens-institucional { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--cinza-claro); }
.vantagens-grid-institucional { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.vantagens-lista h2 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.2rem); font-weight: 800; margin-bottom: 1.3rem; line-height: 1.2; }
.vantagens-lista h2 span { color: var(--vermelho); }
.lista-checks li { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0; font-size: 0.95rem; color: var(--tinta-suave); border-bottom: 1px dashed var(--borda); }
.lista-checks li:last-child { border-bottom: none; }
.lista-checks i {
    width: 24px; height: 24px; border-radius: 50%; background: var(--sucesso-bg); color: var(--sucesso);
    display: flex; align-items: center; justify-content: center; font-size: 0.7rem; flex-shrink: 0;
}
.vantagens-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.vantagem-mini-card {
    background: var(--branco); border: 1px solid var(--borda); border-radius: var(--radius);
    padding: 1.3rem; display: flex; flex-direction: column; gap: 0.5rem;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.vantagem-mini-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-md); }
.vantagem-mini-card i { font-size: 1.3rem; color: var(--vermelho); }
.vantagem-mini-card strong { font-size: 0.92rem; font-weight: 700; }
.vantagem-mini-card span { font-size: 0.8rem; color: var(--cinza-600); }

/* ============================== MARCAS (index) ============================== */
.marcas-secao { padding: clamp(2.6rem, 5vw, 4rem) 0; }
.marcas-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.2rem; }
.marca-card {
    background: var(--branco); border: 1px solid var(--borda); border-radius: var(--radius);
    height: 86px; display: flex; align-items: center; justify-content: center; padding: 1rem;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.marca-card:hover { border-color: var(--borda-forte); transform: translateY(-2px); }
.marca-card img { max-width: 100%; max-height: 36px; object-fit: contain; filter: grayscale(1); opacity: 0.75; transition: all var(--dur) var(--ease); }
.marca-card:hover img { filter: grayscale(0); opacity: 1; }
.marca-nome { font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--cinza-500); transition: color var(--dur) var(--ease); }
.marca-card:hover .marca-nome { color: var(--tinta); }

/* ============================== EMPRESAS PARCEIRAS (index) — faixa com rolagem lateral infinita ============================== */
.parceiros-secao { padding: clamp(2.6rem, 5vw, 4rem) 0; background: var(--branco); }
.parceiros-marquee {
    width: 100%; overflow: hidden; position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.parceiros-track {
    display: flex; align-items: center; width: max-content; gap: clamp(2.5rem, 6vw, 4.5rem);
    animation: parceiros-scroll 26s linear infinite;
}
.parceiros-marquee:hover .parceiros-track { animation-play-state: paused; }
.parceiro-item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 64px; }
.parceiro-item img {
    max-height: 100%; max-width: 170px; object-fit: contain;
    filter: grayscale(1); opacity: 0.7; transition: all var(--dur) var(--ease);
}
.parceiro-item img:hover { filter: grayscale(0); opacity: 1; }
@keyframes parceiros-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .parceiros-track { animation: none; }
}

/* ============================== CTA FINAL (index) ============================== */
.cta-final { padding: clamp(2.4rem, 5vw, 3.4rem) 0 clamp(3rem, 6vw, 5rem); }
.cta-final-box {
    position: relative; overflow: hidden;
    background: linear-gradient(120deg, var(--vermelho) 0%, var(--vermelho-escuro) 100%);
    border-radius: var(--radius-xl); padding: clamp(2rem, 4vw, 3rem);
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
    box-shadow: var(--sombra-vermelho);
}
.cta-final-icone { font-size: 2.6rem; color: rgba(255, 255, 255, 0.35); flex-shrink: 0; }
.cta-final-texto { flex: 1; min-width: 260px; }
.cta-final-texto h2 { color: var(--branco); font-size: clamp(1.3rem, 1rem + 1.2vw, 1.7rem); font-weight: 800; margin-bottom: 0.4rem; }
.cta-final-texto p { color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; }
.cta-final-box .btn-branco { flex-shrink: 0; }

/* ============================== BANNER DE PÁGINA INTERNA ============================== */
.banner-full { width: 100%; overflow: hidden; background: var(--admin-bg); }
.banner-simples {
    width: 100%;
    min-height: 190px;
    background: radial-gradient(900px 320px at 85% -20%, #2a2a46 0%, transparent 60%), linear-gradient(150deg, #14141f 0%, #1c1c2e 55%, #22213a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--branco);
    padding: 2rem 24px;
}
.banner-simples h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); font-weight: 800; color: var(--branco); }
.banner-simples p { color: var(--branco); opacity: 0.82; margin-top: 0.4rem; }
.banner-simples .breadcrumb { font-size: 0.85rem; color: rgba(255, 255, 255, 0.65); margin-top: 0.7rem; padding: 0; }
.banner-simples .breadcrumb a { color: rgba(255, 255, 255, 0.65); }
.banner-simples .breadcrumb a:hover { color: var(--branco); }
.banner-simples .breadcrumb span { color: var(--vermelho-claro); }

/* ============================== CATEGORIAS / GRIDS ============================== */
.categorias-destaque, .produtos-destaque { padding: clamp(2.4rem, 4vw, 3.4rem) 0; border-bottom: 1px solid var(--borda); }
.categorias-destaque h2, .produtos-destaque h2 { text-align: center; }
.categorias-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8rem 1.2rem; margin-top: 1.8rem; }
.subcategorias-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: 1rem; }

/* Categorias em destaque: círculo minimalista + rótulo */
.categoria-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.85rem;
    text-align: center;
    padding: 0.4rem;
    border-radius: var(--radius);
}
.categoria-circulo {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: var(--branco);
    border: 2px solid var(--vermelho-100);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sombra-sm);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.categoria-circulo i { font-size: 1.9rem; color: var(--vermelho); transition: transform var(--dur) var(--ease-out-back); }
.categoria-item:hover .categoria-circulo { border-color: var(--vermelho); transform: translateY(-5px); box-shadow: var(--sombra-md); }
.categoria-item:hover .categoria-circulo i { transform: scale(1.1); }
.categoria-item h3 { font-size: 0.95rem; font-weight: 650; color: var(--tinta); }

/* Subcategorias (página de categoria): mantém o formato em cartão */
.subcat {
    background: var(--cinza-claro);
    border-radius: var(--radius);
    padding: 1.6rem 1.3rem;
    text-align: center;
    border: 1px solid var(--borda);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.subcat:hover { border-color: var(--vermelho); transform: translateY(-4px); box-shadow: var(--sombra-md); background: var(--branco); }
.subcat i { font-size: 2.4rem; color: var(--vermelho); margin-bottom: 0.8rem; }
.subcat h3 { font-size: 1.08rem; font-weight: 700; }
.subcat p { font-size: 0.88rem; color: var(--cinza-600); margin: 0.25rem 0 0.7rem; }
.categoria-link { color: var(--vermelho); font-weight: 600; font-size: 0.88rem; }
.categoria-link:hover { text-decoration: underline; }

/* ============================== CARDS DE PRODUTO ============================== */
.produtos-grid, .grid-relacionados, .grid-recomendados, .grid-marketplace, .grid-favoritos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.5rem;
    margin-top: 0.6rem;
}
.produto-card, .favorito-card {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--radius);
    padding: 1rem 0.9rem 1rem;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    display: flex;
    flex-direction: column;
    position: relative;
}
.produto-card:hover, .favorito-card:hover { border-color: var(--vermelho); transform: translateY(-5px); box-shadow: var(--sombra-lg); }
.produto-card .img-produto, .favorito-card .img {
    background: var(--cinza-claro);
    border-radius: var(--radius-sm);
    aspect-ratio: 1 / 0.85;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 0.7rem;
    background-size: cover; background-position: center;
    color: var(--cinza-500); font-size: 0.7rem;
    border: 1px solid var(--borda);
    overflow: hidden;
}
.produto-card .img-produto i { font-size: 2.7rem; color: var(--cinza-300); }
.produto-card .img-produto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.produto-card:hover .img-produto img { transform: scale(1.06); }
.produto-card .nome-produto, .nome-produto { font-weight: 700; font-size: 1rem; }
.produto-card .marca-modelo, .marca-modelo { font-size: 0.84rem; color: var(--cinza-600); margin: 0.1rem 0 0.25rem; }
.produto-card .preco, .preco { font-weight: 800; font-size: 1.2rem; color: var(--tinta); margin: 0.3rem 0 0.4rem; }
.produto-card .preco small, .preco small { font-weight: 400; font-size: 0.7rem; color: var(--cinza-600); }
.preco-grande { font-size: 2rem; font-weight: 800; color: var(--vermelho); }
.produto-card .acoes, .acoes, .acoes-principais { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
.produto-card .acoes .btn { padding: 0.5rem 0.6rem; font-size: 0.78rem; flex: 1 1 0; min-width: 0; text-align: center; }

/* ============================== FOOTER ============================== */
footer {
    background: var(--admin-bg);
    color: #d7d8e0;
    padding: 3rem 0 1.6rem;
    border-top: 4px solid var(--vermelho);
    margin-top: auto;
}
footer .footer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2.2rem; margin-bottom: 2.2rem; }
footer h4 { color: var(--branco); font-weight: 700; margin-bottom: 0.9rem; font-size: 1.05rem; }
footer ul li { margin-bottom: 0.4rem; font-size: 0.9rem; color: #a9abb8; }
footer ul li a, footer li { transition: color var(--dur) var(--ease); }
footer ul li a:hover { color: var(--branco); }
footer .copy { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 1.3rem; text-align: center; font-size: 0.85rem; color: #82869b; }

/* ============================== NAVEGAÇÃO INFERIOR (mobile) ============================== */
.mobile-bottom-nav { display: none; }

/* ============================== TABELAS (loja) ============================== */
.tabela-carrinho, .tabela-encomendas, .tabela-produtos, .itens-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--branco);
}
.tabela-carrinho th, .tabela-encomendas th, .tabela-produtos th, .itens-table th {
    text-align: left; padding: 0.9rem 1rem; font-size: 0.78rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--cinza-600); background: var(--cinza-50); border-bottom: 1px solid var(--borda);
}
.tabela-carrinho td, .tabela-encomendas td, .tabela-produtos td, .itens-table td {
    padding: 1rem; border-bottom: 1px solid var(--borda); font-size: 0.92rem; vertical-align: middle;
}
.tabela-carrinho tbody tr, .tabela-encomendas tbody tr, .tabela-produtos tbody tr, .itens-table tbody tr {
    transition: background var(--dur) var(--ease);
}
.tabela-carrinho tbody tr:hover, .tabela-encomendas tbody tr:hover, .tabela-produtos tbody tr:hover, .itens-table tbody tr:hover {
    background: var(--cinza-50);
}
.produto-info { display: flex; align-items: center; gap: 0.9rem; }
.produto-info .img { width: 64px; height: 64px; border-radius: var(--radius-sm); background: var(--cinza-100); display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--borda); flex-shrink: 0; }
.produto-info .img img { width: 100%; height: 100%; object-fit: cover; }
.produto-info .nome { font-weight: 650; }
.produto-info .detalhe { font-size: 0.82rem; color: var(--cinza-600); }

/* ============================== CARRINHO ============================== */
.carrinho-layout { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; padding: 2rem 0 3rem; }
.quantidade-controle { display: inline-flex; align-items: center; gap: 0.6rem; border: 1.5px solid var(--borda); border-radius: var(--radius-pill); padding: 0.25rem 0.5rem; }
.qtd-btn {
    width: 28px; height: 28px; border-radius: 50%; border: none; background: var(--cinza-100);
    color: var(--tinta); font-weight: 700; cursor: pointer; transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.qtd-btn:hover { background: var(--vermelho); color: var(--branco); }
.qtd-btn:active { transform: scale(0.9); }
.qtd-valor { min-width: 22px; text-align: center; font-weight: 650; }
.resumo-carrinho { background: var(--cinza-50); border: 1px solid var(--borda); border-radius: var(--radius); padding: 1.5rem; position: sticky; top: calc(var(--header-h) + 1rem); }
.resumo-carrinho .linha, .resumo-encomenda .linha { display: flex; justify-content: space-between; padding: 0.5rem 0; font-size: 0.92rem; color: var(--tinta-suave); }
.resumo-carrinho .total, .resumo-encomenda .total { display: flex; justify-content: space-between; font-size: 1.2rem; font-weight: 800; padding-top: 0.9rem; margin-top: 0.5rem; border-top: 1px solid var(--borda); color: var(--tinta); }
.cupom { display: flex; gap: 0.5rem; margin: 1rem 0; }
.cupom input { flex: 1; }
.carrinho-vazio { text-align: center; padding: 4rem 1rem; color: var(--cinza-600); }
.carrinho-vazio i { font-size: 3.4rem; color: var(--cinza-300); margin-bottom: 1rem; }

/* ============================== LAYOUTS "MINHA CONTA" ============================== */
.perfil-layout, .editar-perfil-layout, .seguranca-layout, .enderecos-layout,
.favoritos-layout, .encomendas-layout, .detalhe-layout {
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 2rem;
    padding: 2rem 0 3.5rem;
    align-items: start;
}
.conteudo-perfil, .conteudo-editar, .conteudo-seguranca, .conteudo-enderecos,
.conteudo-favoritos, .conteudo-encomendas, .conteudo-detalhe, .conteudo-detalhe {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--radius);
    padding: clamp(1.3rem, 3vw, 2rem);
}

.menu-lateral {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--radius);
    padding: 1.6rem 0;
    position: sticky;
    top: calc(var(--header-h) + 1rem);
}
.menu-lateral .avatar { text-align: center; padding: 0 1.4rem 1.4rem; border-bottom: 1px solid var(--borda); margin-bottom: 0.6rem; }
.menu-lateral .foto {
    width: 72px; height: 72px; border-radius: 50%; background: var(--vermelho-50); color: var(--vermelho);
    display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin: 0 auto 0.7rem;
}
.menu-lateral .nome { font-weight: 700; }
.menu-lateral .email { font-size: 0.82rem; color: var(--cinza-600); word-break: break-word; }
.menu-lateral ul li a {
    display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 1.4rem;
    color: var(--tinta-suave); font-weight: 500; font-size: 0.92rem;
    border-left: 3px solid transparent; transition: all var(--dur) var(--ease);
}
.menu-lateral ul li a:hover { background: var(--cinza-50); color: var(--tinta); }
.menu-lateral ul li a.ativo { background: var(--vermelho-50); color: var(--vermelho); border-left-color: var(--vermelho); font-weight: 650; }
.menu-lateral ul li a.sair { color: var(--erro); }
.menu-lateral ul li a.sair:hover { background: var(--erro-bg); }

.stats-grid, .estatisticas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.2rem; }
.stat-card, .estatistica-item, .info-card, .valor-card {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--radius);
    padding: 1.3rem;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.stat-card:hover, .estatistica-item:hover, .info-card:hover, .valor-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-md); }
.stat-number { font-size: 1.8rem; font-weight: 800; color: var(--tinta); }
.stat-label { font-size: 0.85rem; color: var(--cinza-600); }
.stat-sub { font-size: 0.78rem; color: var(--cinza-500); margin-top: 0.2rem; }

.enderecos-grid, .sessoes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }
.endereco-card, .sessao-item {
    border: 1px solid var(--borda); border-radius: var(--radius); padding: 1.2rem;
    transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.endereco-card:hover, .sessao-item:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-sm); }
.enderecos-vazio, .favoritos-vazio, .sem-encomendas {
    text-align: center; padding: 3.5rem 1rem; color: var(--cinza-600);
}
.enderecos-vazio i, .favoritos-vazio i, .sem-encomendas i { font-size: 3rem; color: var(--cinza-300); margin-bottom: 1rem; }

.progresso-container { background: var(--cinza-100); border-radius: var(--radius-pill); height: 10px; overflow: hidden; }
.progresso-bar, .fill { height: 100%; background: linear-gradient(90deg, var(--vermelho), var(--vermelho-claro)); border-radius: var(--radius-pill); transition: width var(--dur-slow) var(--ease); }
.progresso-label { font-size: 0.8rem; color: var(--cinza-600); margin-top: 0.4rem; }

/* ============================== FILTROS (barra horizontal) / PAGINAÇÃO / STATUS TABS ============================== */
.filtros-encomendas { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin-bottom: 1.4rem; background: var(--cinza-claro); border: 1px solid var(--borda); border-radius: var(--radius); padding: 0.9rem 1.1rem; }
.filtro-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.filtro-item label { font-weight: 600; color: var(--tinta-suave); }
.faixa-preco { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--cinza-600); margin-top: 0.3rem; }

/* ============================== FILTROS DA SIDEBAR (produtos.php) ============================== */
.filtros {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--radius);
    padding: 1.4rem;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 1rem);
    max-height: calc(100vh - var(--header-h) - 2rem);
    overflow-y: auto;
}
.filtros h3 { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--borda); }
.grupo-filtro { margin-bottom: 1.2rem; }
.grupo-filtro label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.35rem; color: var(--tinta-suave); }
.grupo-filtro input[type="range"] { padding: 0; border: none; accent-color: var(--vermelho); }
.filtros .btn-filtrar { width: 100%; margin-top: 0.3rem; }
.status-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.4rem; }
.status-tabs a {
    padding: 0.5rem 1.1rem; border-radius: var(--radius-pill); font-size: 0.86rem; font-weight: 600;
    border: 1.5px solid var(--borda); color: var(--tinta-suave); transition: all var(--dur) var(--ease);
}
.status-tabs a:hover { border-color: var(--vermelho); color: var(--vermelho); }
.paginacao { display: flex; justify-content: center; gap: 0.4rem; margin-top: 2rem; }
.paginacao a, .paginacao span {
    width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); border: 1.5px solid var(--borda); font-weight: 600; font-size: 0.9rem;
    transition: all var(--dur) var(--ease); color: var(--tinta-suave);
}
.paginacao a:hover { border-color: var(--vermelho); color: var(--vermelho); }
.paginacao .atual { background: var(--vermelho); color: var(--branco); border-color: var(--vermelho); }
.paginacao .desativado { opacity: 0.4; cursor: default; }
.paginacao .reticencias { border: none; width: auto; color: var(--cinza-500); }

/* ============================== BANNER DE PRODUTOS ============================== */
.banner-produtos { background: var(--cinza-claro); padding: clamp(1.8rem, 4vw, 3rem) 0; overflow: hidden; }
.banner-produtos-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; }
.banner-produtos h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); font-weight: 800; line-height: 1.15; }
.banner-produtos h1 span { color: var(--vermelho); }
.banner-produtos p { color: var(--tinta-suave); margin-top: 0.7rem; max-width: 480px; }
.banner-produtos .breadcrumb { margin-top: 1rem; }
.banner-produtos .breadcrumb i { font-size: 0.65rem; margin: 0 0.3rem; color: var(--cinza-400); }
.banner-produtos-imagem { display: flex; justify-content: center; }
.banner-produtos-imagem img { width: 100%; max-width: 380px; height: auto; }

/* ============================== PÍLULAS DE CATEGORIA / BOTÃO FILTROS (mobile) ============================== */
.categorias-pills, .btn-filtros-mobile { display: none; }

/* ============================== SIDEBAR: CATEGORIAS / MARCAS / DISPONIBILIDADE ============================== */
.lista-categorias li { list-style: none; }
.lista-categorias a {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.55rem 0.2rem; font-size: 0.9rem; color: var(--tinta-suave); font-weight: 550;
    border-radius: var(--radius-sm); transition: all var(--dur) var(--ease);
}
.lista-categorias a span { color: var(--cinza-500); font-size: 0.82rem; font-weight: 600; }
.lista-categorias a:hover { color: var(--vermelho); padding-left: 0.4rem; }
.lista-categorias a.ativo { color: var(--vermelho); font-weight: 700; }
.lista-categorias a.ativo span { color: var(--vermelho); }
.ver-mais-toggle {
    display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem;
    background: none; border: none; color: var(--vermelho); font-weight: 650; font-size: 0.85rem;
    cursor: pointer; font-family: inherit; padding: 0;
}
.checkbox-linha {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0;
    font-size: 0.88rem; color: var(--tinta-suave); cursor: pointer;
}
.checkbox-linha input { accent-color: var(--vermelho); width: 16px; height: 16px; flex-shrink: 0; }
.checkbox-linha span { color: var(--cinza-500); font-size: 0.8rem; }
.grupo-filtro label i { color: var(--vermelho); margin-right: 0.35rem; }

/* ============================== BARRA DE PESQUISA / RESULTADOS / ORDENAR / VISTA ============================== */
.busca-produtos {
    display: flex; align-items: stretch; background: var(--branco); border: 1.5px solid var(--borda);
    border-radius: var(--radius-pill); overflow: hidden; margin-bottom: 1.2rem;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.busca-produtos:focus-within { border-color: var(--vermelho); box-shadow: 0 0 0 4px var(--vermelho-50); }
.busca-produtos > i { display: flex; align-items: center; padding-left: 1.2rem; color: var(--cinza-500); }
.busca-produtos input { flex: 1; border: none; background: transparent; padding: 0.85rem 0.8rem; font-size: 0.93rem; outline: none; font-family: inherit; }
.busca-produtos button { border: none; background: var(--vermelho); color: var(--branco); padding: 0 1.3rem; cursor: pointer; transition: background var(--dur) var(--ease); }
.busca-produtos button:hover { background: var(--vermelho-escuro); }

.barra-resultados { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.2rem; }
.barra-resultados h3 { font-size: 1rem; font-weight: 700; }
.barra-resultados-acoes { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ordenar-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; color: var(--tinta-suave); font-weight: 550; }
.ordenar-label select {
    padding: 0.4rem 0.7rem; border: 1.5px solid var(--borda); border-radius: var(--radius-sm);
    font-family: inherit; font-size: 0.85rem; color: var(--tinta); background: var(--branco); cursor: pointer;
}
.vista-toggle { display: flex; gap: 0.4rem; }
.vista-toggle a {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); border: 1.5px solid var(--borda); color: var(--cinza-500);
    transition: all var(--dur) var(--ease);
}
.vista-toggle a.ativo { background: var(--vermelho); border-color: var(--vermelho); color: var(--branco); }

/* ============================== CARTÃO DE PRODUTO (marketplace) ============================== */
.produto-card { position: relative; }
.badge-canto {
    position: absolute; top: 0.8rem; left: 0.8rem; z-index: 2;
    padding: 0.25rem 0.65rem; border-radius: var(--radius-pill); font-size: 0.7rem; font-weight: 700;
    color: var(--branco); text-transform: uppercase; letter-spacing: 0.03em;
}
.badge-novo { background: var(--vermelho); }
.badge-popular { background: var(--tinta); }
.btn-favoritar-card {
    position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2;
    width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.92);
    display: flex; align-items: center; justify-content: center; color: var(--cinza-500);
    box-shadow: var(--sombra-sm); transition: all var(--dur) var(--ease);
}
.btn-favoritar-card:hover { color: var(--vermelho); transform: scale(1.08); }
.btn-favoritar-card.is-favorito { color: var(--vermelho); }
.descricao-curta { font-size: 0.82rem; color: var(--cinza-600); margin: 0.15rem 0 0.3rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.produto-card-rodape { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 0.5rem; gap: 0.6rem; }
.disponibilidade-mini { display: flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 600; margin-top: 0.2rem; }
.disponibilidade-mini i { font-size: 0.5rem; }
.disponibilidade-mini.em-stock { color: var(--sucesso); }
.disponibilidade-mini.sob-encomenda { color: var(--aviso); }
.btn-carrinho-card {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius-sm); border: 1.5px solid var(--vermelho);
    color: var(--vermelho); display: flex; align-items: center; justify-content: center;
    transition: all var(--dur) var(--ease);
}
.btn-carrinho-card:hover { background: var(--vermelho); color: var(--branco); }

.produtos-vazio { grid-column: 1/-1; text-align: center; padding: 3.5rem 1rem; color: var(--cinza-600); }
.produtos-vazio i { font-size: 3rem; color: var(--cinza-300); margin-bottom: 1rem; display: block; }
.produtos-vazio p { margin-bottom: 1.2rem; }

/* Vista em lista */
.grid-marketplace.vista-lista { grid-template-columns: 1fr; }
.grid-marketplace.vista-lista .produto-card { flex-direction: row; align-items: center; gap: 1.2rem; padding: 1rem; }
.grid-marketplace.vista-lista .img-produto { width: 110px; height: 110px; flex-shrink: 0; margin-bottom: 0; aspect-ratio: auto; }
.grid-marketplace.vista-lista .produto-card-rodape { flex-direction: row-reverse; margin-top: 0; align-items: center; }
.grid-marketplace.vista-lista .descricao-curta { -webkit-line-clamp: 1; }

/* ============================== BOTÃO FLUTUANTE WHATSAPP (mobile) ============================== */
.whatsapp-flutuante {
    display: none; position: fixed; right: 1.1rem; bottom: 80px; z-index: 240;
    width: 54px; height: 54px; border-radius: 50%; background: var(--sucesso); color: var(--branco);
    align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: var(--sombra-lg);
}

/* ============================== LOGIN / CADASTRO / RESET ============================== */
.login-section, .cadastro-section, .reset-section { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 5vw, 3.5rem) 1rem; }
.login-card, .cadastro-card, .reset-card {
    max-width: 440px; width: 100%; padding: clamp(1.6rem, 4vw, 2.4rem);
    border: 1px solid var(--borda); border-radius: var(--radius-lg); background: var(--branco);
    box-shadow: var(--sombra-lg);
    animation: scaleIn var(--dur-slow) var(--ease-out-back);
}
.cadastro-card { max-width: 560px; }
.auth-icone {
    width: 52px; height: 52px; border-radius: 50%; background: var(--vermelho-50); color: var(--vermelho);
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 1rem;
}
.login-card h1, .cadastro-card h1, .reset-card h1 { font-size: 1.7rem; font-weight: 800; margin-bottom: 0.35rem; }
.login-card .sub, .cadastro-card .sub, .reset-card .sub { color: var(--cinza-600); margin-bottom: 1.6rem; font-size: 0.95rem; }
.termos { font-size: 0.85rem; color: var(--cinza-600); }
.termos a { color: var(--vermelho); font-weight: 600; }
.termos a:hover { text-decoration: underline; }

/* ============================== PRODUTO (detalhe) ============================== */
.faixa-breadcrumb { background: var(--cinza-claro); border-bottom: 1px solid var(--borda); }
.faixa-breadcrumb .breadcrumb { padding: 0.9rem 0; }
.faixa-breadcrumb .breadcrumb i { font-size: 0.65rem; margin: 0 0.4rem; color: var(--cinza-400); }
.produto-detalhe { padding: 2rem 0 1rem; }
.detalhe { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 1.2rem; align-items: start; }

/* Galeria */
.galeria-produto { display: contents; }
.galeria-thumbs { display: flex; flex-direction: column; gap: 0.7rem; }
.galeria-thumbs .thumb {
    width: 100%; aspect-ratio: 1/1; border-radius: var(--radius-sm); border: 1.5px solid var(--borda);
    overflow: hidden; cursor: pointer; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.galeria-thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; }
.galeria-thumbs .thumb:hover, .galeria-thumbs .thumb.ativo { border-color: var(--vermelho); }
.galeria-principal {
    position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--borda);
    background: var(--cinza-claro);
}
.galeria-principal .principal { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
.galeria-principal .principal i { font-size: 4.5rem; color: var(--cinza-300); }
.galeria-principal .principal img { width: 100%; height: 100%; object-fit: contain; }
.galeria-contador {
    position: absolute; top: 0.8rem; right: 0.8rem; z-index: 2;
    background: rgba(20, 20, 26, 0.65); color: var(--branco); font-size: 0.75rem; font-weight: 650;
    padding: 0.2rem 0.6rem; border-radius: var(--radius-pill);
}
.btn-ampliar {
    position: absolute; right: 0.8rem; bottom: 0.8rem; z-index: 2;
    display: flex; align-items: center; gap: 0.5rem; background: var(--branco); color: var(--tinta);
    border: 1px solid var(--borda); border-radius: var(--radius-sm); padding: 0.5rem 0.9rem;
    font-size: 0.8rem; font-weight: 650; cursor: pointer; box-shadow: var(--sombra-sm);
    transition: all var(--dur) var(--ease);
}
.btn-ampliar:hover { border-color: var(--vermelho); color: var(--vermelho); }
.galeria-dots { display: none; gap: 0.5rem; justify-content: center; padding: 0.8rem 0; }
.galeria-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--cinza-300); cursor: pointer; }
.galeria-dots span.ativo { background: var(--vermelho); }

/* Informações */
.info-produto h1 { font-size: 1.6rem; font-weight: 800; margin-bottom: 0.5rem; }
.descricao-curta-produto { color: var(--tinta-suave); font-size: 0.95rem; margin-bottom: 0.9rem; }
.preco-grande { font-size: 2rem; font-weight: 800; color: var(--vermelho); margin-bottom: 0.7rem; }
.preco-riscado { text-decoration: line-through; color: var(--cinza-500); font-size: 1.1rem; font-weight: 600; margin-right: 0.6rem; }
.badge-promocao { background: var(--erro-bg); color: var(--erro); font-size: 0.7rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: var(--radius-pill); vertical-align: middle; margin-left: 0.6rem; }
.stock-sku-linha { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--cinza-600); margin-bottom: 1.3rem; }
.stock-sku-linha .verde { color: var(--sucesso); font-weight: 650; }
.stock-sku-linha .laranja { color: var(--aviso); font-weight: 650; }
.stock-sku-linha i { font-size: 0.5rem; }
.stock-sku-linha .separador { color: var(--cinza-400); }

.acoes-produto { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 1.4rem; }
.quantidade-label { font-size: 0.82rem; font-weight: 650; color: var(--tinta-suave); }
.linha-carrinho { display: flex; gap: 0.7rem; align-items: stretch; margin-top: 0.4rem; }
.linha-carrinho .quantidade-controle { flex-shrink: 0; }
.qtd-valor-input { width: 46px; text-align: center; border: none; background: transparent; padding: 0; font-family: inherit; font-size: 0.95rem; }
.acoes-principais .btn-adicionar { flex: 1; }
.btn-favoritar-grande {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    padding: 0.85rem; border-radius: var(--radius-pill); border: 1.5px solid var(--borda);
    color: var(--tinta-suave); font-weight: 650; font-size: 0.92rem; transition: all var(--dur) var(--ease);
}
.btn-favoritar-grande:hover { border-color: var(--vermelho); color: var(--vermelho); }
.btn-favoritar-grande.is-favorito { border-color: var(--vermelho); color: var(--vermelho); background: var(--vermelho-50); }

.indicadores-produto { display: flex; flex-direction: column; gap: 0.9rem; border: 1px solid var(--borda); border-radius: var(--radius); padding: 1.1rem 1.2rem; background: var(--cinza-50); }
.indicador-produto-item { display: flex; align-items: center; gap: 0.8rem; }
.indicador-produto-item i { font-size: 1.15rem; color: var(--vermelho); width: 22px; text-align: center; flex-shrink: 0; }
.indicador-produto-item div { display: flex; flex-direction: column; line-height: 1.3; }
.indicador-produto-item strong { font-size: 0.86rem; font-weight: 700; }
.indicador-produto-item span { font-size: 0.78rem; color: var(--cinza-600); }

/* Tabs / Acordeão */
.tabs-produto { margin-top: 2rem; border-top: 1px solid var(--borda); padding-top: 0.5rem; }
.tab-item { border-bottom: 1px solid var(--borda); }
.tab-header {
    width: 100%; display: flex; align-items: center; gap: 0.7rem; text-align: left;
    background: none; border: none; padding: 1.1rem 0.2rem; font-family: inherit;
    font-size: 0.95rem; font-weight: 700; color: var(--tinta); cursor: pointer;
}
.tab-header i:first-child { color: var(--vermelho); width: 18px; }
.tab-seta { margin-left: auto; font-size: 0.8rem; color: var(--cinza-400); transition: transform var(--dur) var(--ease); }
.tab-item.is-aberto .tab-seta { transform: rotate(180deg); }
.tab-conteudo {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
    font-size: 0.92rem; color: var(--tinta-suave); line-height: 1.6;
}
.tab-item.is-aberto .tab-conteudo { max-height: 900px; opacity: 1; padding-bottom: 1.3rem; }
.tab-conteudo p + p { margin-top: 0.7rem; }
.tab-vazio { color: var(--cinza-500); font-style: italic; }
.tabela-especificacoes { width: 100%; border-collapse: collapse; }
.tabela-especificacoes tr { border-bottom: 1px dashed var(--borda); }
.tabela-especificacoes tr:last-child { border-bottom: none; }
.tabela-especificacoes td { padding: 0.6rem 0.4rem; font-size: 0.9rem; }
.tabela-especificacoes td:first-child { color: var(--tinta-suave); font-weight: 600; width: 40%; }
.tabela-especificacoes td:last-child { color: var(--tinta); }

.recomendados, .relacionados { padding: 2.4rem 0; border-top: 1px solid var(--borda); }

/* Lightbox */
.lightbox-overlay {
    position: fixed; inset: 0; background: rgba(10, 10, 14, 0.92); z-index: 600;
    display: flex; align-items: center; justify-content: center; padding: 2rem;
    opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur) linear;
}
.lightbox-overlay.is-aberto { opacity: 1; visibility: visible; }
.lightbox-overlay img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: var(--radius-sm); }
.lightbox-fechar {
    position: absolute; top: 1.2rem; right: 1.2rem; width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.12); color: var(--branco); border: none; font-size: 1.2rem; cursor: pointer;
}

/* ============================== CATEGORIA / MARKETPLACE ============================== */
.categoria-header { text-align: center; padding: 2.2rem 0 1.6rem; }
.marketplace-layout { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; padding: 1.5rem 0 3rem; align-items: start; }

/* ============================== PÁGINAS INSTITUCIONAIS ============================== */
.sobre-layout, .sobre-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; padding: 2.5rem 0; }
.sobre-imagem { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--sombra-lg); }
.sobre-imagem img { transition: transform var(--dur-slow) var(--ease); }
.sobre-imagem:hover img { transform: scale(1.04); }
.equipe-section, .valores-section, .estatisticas-section, .passos-grid { padding: 2.6rem 0; }
.equipe-grid, .valores-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.membro-card, .valor-card {
    text-align: center; padding: 1.6rem; border: 1px solid var(--borda); border-radius: var(--radius);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.membro-card:hover, .valor-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); }
.membro-card .foto, .sub-equipe { width: 92px; height: 92px; border-radius: 50%; background: var(--cinza-100); margin: 0 auto 0.9rem; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--cinza-400); overflow: hidden; }
.membro-card .cargo { font-size: 0.85rem; color: var(--vermelho); font-weight: 600; }
.passos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.6rem; }
.passo-item { text-align: center; position: relative; }
.passo-item .numero {
    width: 46px; height: 46px; border-radius: 50%; background: var(--vermelho); color: var(--branco);
    display: flex; align-items: center; justify-content: center; font-weight: 800; margin: 0 auto 0.8rem; font-size: 1.1rem;
}
.cta-como, .cta-sobre {
    text-align: center; padding: 3rem 1.5rem; border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #16162a, #201f38); color: var(--branco); margin: 2.5rem 0;
}
.cta-como h2, .cta-sobre h2, .cta-como h3, .cta-sobre h3 { color: var(--branco); }
.cta-como p, .cta-sobre p { color: var(--branco); opacity: 0.85; }

/* ============================== CONTACTOS ============================== */
.hero-contacto { padding: clamp(2.2rem, 5vw, 4rem) 0; background: var(--cinza-claro); overflow: hidden; }
.hero-contacto-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hero-contacto-grid h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.8rem); font-weight: 800; line-height: 1.15; margin: 0.6rem 0 1rem; }
.hero-contacto-grid h1 span { color: var(--vermelho); }
.hero-contacto-grid > div:first-child > p { color: var(--tinta-suave); max-width: 460px; }
.hero-contacto-imagem { display: flex; justify-content: center; }
.hero-contacto-imagem img { width: 100%; max-width: 460px; height: auto; }

.contacto-grid-principal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; padding: 2.5rem 0; align-items: start; }
.contacto-coluna h2 { font-size: 1.15rem; font-weight: 800; margin-bottom: 1.1rem; }

.contacto-mini-card {
    display: flex; gap: 0.9rem; padding: 1rem; border: 1px solid var(--borda); border-radius: var(--radius);
    background: var(--branco); margin-bottom: 0.9rem; transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.contacto-mini-card:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-sm); }
.contacto-mini-card .icone {
    width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--vermelho-50); color: var(--vermelho);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.05rem;
}
.contacto-mini-card h4 { font-size: 0.92rem; font-weight: 700; margin-bottom: 0.2rem; }
.contacto-mini-card p { font-size: 0.88rem; color: var(--tinta); }
.contacto-mini-card p a { color: inherit; }
.contacto-mini-card p a:hover { color: var(--vermelho); }
.contacto-mini-card span { display: block; font-size: 0.78rem; color: var(--cinza-500); margin-top: 0.2rem; }

.form-contacto-novo textarea { min-height: 130px; resize: vertical; }
.btn-enviar-mensagem { width: 100%; justify-content: center; padding: 0.85rem; font-size: 0.92rem; }
.nota-confianca { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--cinza-500); margin-top: 0.8rem; }

.mapa-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--borda); aspect-ratio: 4/3; margin-bottom: 1rem; }
.mapa-embed iframe { width: 100%; height: 100%; border: none; }
.empresa-mapa-card {
    display: flex; gap: 0.9rem; padding: 1.1rem; border: 1px solid var(--borda); border-radius: var(--radius); background: var(--cinza-50);
}
.empresa-mapa-card .icone {
    width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--vermelho-50); color: var(--vermelho);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.05rem;
}
.empresa-mapa-card h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.3rem; }
.empresa-mapa-card p { font-size: 0.85rem; color: var(--tinta-suave); margin-bottom: 0.6rem; }
.lista-checks-mini li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--tinta-suave); padding: 0.2rem 0; }
.lista-checks-mini i { color: var(--sucesso); font-size: 0.72rem; }

/* Redes sociais no footer */
.footer-redes { display: flex; gap: 0.6rem; margin-top: 1rem; }
.footer-redes a {
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex; align-items: center; justify-content: center; color: var(--branco);
    transition: all var(--dur) var(--ease);
}
.footer-redes a:hover { background: var(--vermelho); border-color: var(--vermelho); transform: translateY(-3px); }
.copy-com-links { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; text-align: left; }
.copy-links a { color: #82869b; transition: color var(--dur) var(--ease); }
.copy-links a:hover { color: var(--branco); }
.copy-separador { margin: 0 0.5rem; color: #4a4d5c; }

/* Páginas legais (privacidade / termos) */
.pagina-legal { max-width: 780px; margin: 0 auto; padding: 2.5rem 0 4rem; color: var(--tinta-suave); line-height: 1.7; }
.pagina-legal h2 { font-size: 1.15rem; font-weight: 700; color: var(--tinta); margin: 1.6rem 0 0.6rem; }
.pagina-legal h2:first-of-type { margin-top: 0.5rem; }
.pagina-legal a { color: var(--vermelho); font-weight: 600; }
.pagina-legal a:hover { text-decoration: underline; }

/* ============================== PEDIDO DE ENCOMENDA (formulário público) ============================== */
.pedido-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; padding: 2.2rem 0 3.5rem; align-items: start; }
.form-encomenda, .info-lateral {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--radius-lg);
    padding: clamp(1.4rem, 3vw, 2.2rem);
    box-shadow: var(--sombra-sm);
}
.info-lateral { position: sticky; top: calc(var(--header-h) + 1rem); }
.pedido-titulo { font-size: 1.4rem; margin-bottom: 0.35rem; }
.pedido-subtitulo { color: var(--cinza-600); margin-bottom: 1.4rem; }
.info-lateral h3 {
    display: flex; align-items: center; gap: 0.5rem; font-size: 1.02rem;
    border-bottom: 1px solid var(--borda); padding-bottom: 0.8rem; margin-bottom: 1.1rem;
}
.info-lateral h3 i { color: var(--vermelho); }
.info-lateral h3.sem-borda { border-bottom: none; padding-bottom: 0; margin-bottom: 0.7rem; }
.info-lateral .item { display: flex; align-items: flex-start; gap: 0.8rem; margin-bottom: 1rem; }
.info-lateral .item p { font-size: 0.9rem; color: var(--tinta-suave); line-height: 1.5; }
.info-lateral .item strong { color: var(--tinta); }
.item-numero {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--vermelho-50); color: var(--vermelho);
    font-weight: 700; font-size: 0.8rem; display: flex; align-items: center; justify-content: center;
}
.info-lateral-divisor { border-top: 1px solid var(--borda); margin: 1.2rem 0; }
.item-contacto { align-items: center; margin-bottom: 0.7rem; }
.item-contacto i { width: 20px; text-align: center; color: var(--vermelho); }
.item-contacto a { color: var(--vermelho); font-weight: 600; }
.item-contacto p { margin: 0; }
.pedido-btn-whatsapp { width: 100%; justify-content: center; margin-top: 0.8rem; }

/* ============================== 404 / MANUTENÇÃO ============================== */
.maintenance-page { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 3rem 1rem; }
.maintenance-page .gif-container { font-size: 5rem; color: var(--vermelho); margin-bottom: 1rem; animation: fadeInUp var(--dur-slow) var(--ease); }
.maintenance-page .titulo { font-size: 2rem; margin-bottom: 0.6rem; }
.maintenance-page .texto-principal { font-size: 1.1rem; color: var(--tinta-suave); margin-bottom: 0.4rem; }
.maintenance-page .texto-secundario { color: var(--cinza-600); margin-bottom: 1.6rem; }
.maintenance-page .botoes { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; }
.maintenance-page .contactos { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; font-size: 0.92rem; color: var(--cinza-600); }
.whatsapp-link { color: var(--sucesso); font-weight: 600; }

/* ============================== PAINEL ADMIN ============================== */
.admin-wrapper { display: flex; align-items: stretch; min-height: calc(100vh - var(--header-h)); position: relative; }
.admin-sidebar-toggle {
    display: none;
    align-items: center; gap: 0.6rem;
    width: fit-content;
    padding: 0.55rem 1rem;
    margin-bottom: 1.2rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--borda);
    background: var(--branco);
    color: var(--tinta);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
}
.admin-sidebar-overlay {
    display: none;
    position: fixed; inset: 0; top: var(--header-h);
    background: rgba(20, 20, 26, 0.5);
    z-index: 255;
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility var(--dur) linear;
}
.admin-sidebar-overlay.is-open { opacity: 1; visibility: visible; }
.admin-sidebar {
    width: 260px;
    background: linear-gradient(185deg, var(--admin-bg) 0%, #14151f 100%);
    color: var(--admin-texto);
    padding: 1.6rem 0;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.admin-logo { padding: 0 1.6rem 1.4rem; border-bottom: 1px solid var(--admin-borda); margin-bottom: 1rem; }
.admin-logo h2 { color: var(--branco); font-size: 1.15rem; margin: 0; }
.admin-logo small { color: var(--admin-texto-suave); font-size: 0.75rem; }
.admin-sidebar .nav-item, .admin-nav ul li a {
    display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 1.6rem; color: var(--admin-texto-suave);
    transition: all var(--dur) var(--ease); border-left: 3px solid transparent; text-decoration: none; font-size: 0.92rem;
}
.admin-sidebar .nav-item:hover, .admin-nav ul li a:hover { background: rgba(255, 255, 255, 0.05); color: var(--branco); padding-left: 1.8rem; }
.admin-sidebar .nav-item.active, .admin-nav ul li a.active {
    background: rgba(233, 0, 0, 0.14); color: var(--branco); border-left-color: var(--vermelho); font-weight: 600;
}
.admin-sidebar .nav-item i, .admin-nav ul li a i { width: 1.4rem; text-align: center; font-size: 1.05rem; }

.admin-content { flex: 1; padding: clamp(1.2rem, 2vw, 2rem); min-width: 0; }
.admin-topbar { display:flex; justify-content:space-between; align-items:center; min-height:42px; margin-bottom:1.35rem; padding-bottom:.8rem; border-bottom:1px solid var(--borda); }
.admin-topbar-account { display:flex; align-items:center; gap:.9rem; }
.admin-topbar-account span { display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; }
.admin-topbar-account small { color:var(--admin-texto-suave); font-size:.68rem; }
.admin-topbar-account strong { color:var(--texto); font-size:.86rem; }
.admin-topbar-account a { color:var(--cinza-600); font-size:1rem; text-decoration:none; }
.admin-topbar-account a:hover { color:var(--vermelho); }
.page-header, .admin-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.6rem; }
.page-header h1, .admin-header h1 { font-size: 1.5rem; }
.page-header .subtitle, .subtitle, .admin-header p { color: var(--cinza-600); font-size: 0.92rem; margin-top: 0.2rem; }
.admin-header-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; font-size: 0.85rem; color: var(--cinza-600); }

.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.2rem; margin-bottom: 1.6rem; }
.admin-section { margin-bottom: 2rem; }
.admin-section-header { margin-bottom: 1rem; }
.admin-section-header h2 { font-size: 1.15rem; font-weight: 700; }
.admin-section-header p { color: var(--cinza-600); font-size: 0.88rem; margin-top: 0.2rem; }
.table-responsive { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--radius); overflow: hidden; overflow-x: auto; }

/* Ícone dentro dos cards de estatística do dashboard admin */
.stat-icon {
    width: 42px; height: 42px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; margin-bottom: 0.8rem;
}
.stat-icon-neutro { background: var(--cinza-100); color: var(--cinza-700); }
.stat-icon-aviso { background: var(--aviso-bg); color: var(--aviso); }
.stat-icon-sucesso { background: var(--sucesso-bg); color: var(--sucesso); }
.stat-icon-info { background: var(--info-bg); color: var(--info); }
.stat-icon-vermelho { background: var(--vermelho-50); color: var(--vermelho); }

/* Estado vazio (sem pedidos, sem dados, etc.) */
.admin-empty-state {
    background: var(--branco); border: 1px dashed var(--borda-forte); border-radius: var(--radius);
    text-align: center; padding: 3rem 1.5rem; color: var(--cinza-600);
}
.admin-empty-state i { font-size: 2.4rem; color: var(--cinza-300); margin-bottom: 0.8rem; display: block; }

/* Dropdown de estado (alterar diretamente na listagem) */
.status-select {
    border: 1.5px solid var(--borda); border-radius: var(--radius-pill);
    padding: 0.35rem 1.8rem 0.35rem 0.8rem; font-size: 0.78rem; font-weight: 700;
    font-family: inherit; text-transform: capitalize; cursor: pointer;
    background-color: var(--cinza-100); color: var(--cinza-700);
    transition: opacity var(--dur) var(--ease);
}
.status-select[data-status="pendente"] { background-color: var(--aviso-bg); color: var(--aviso); border-color: var(--aviso-borda); }
.status-select[data-status="processando"] { background-color: var(--info-bg); color: var(--info); border-color: var(--info-borda); }
.status-select[data-status="enviado"] { background-color: #eef0fe; color: #5457e0; border-color: #d3d6fb; }
.status-select[data-status="entregue"] { background-color: var(--sucesso-bg); color: var(--sucesso); border-color: var(--sucesso-borda); }
.status-select[data-status="cancelado"] { background-color: var(--erro-bg); color: var(--erro); border-color: var(--erro-borda); }
.status-select.is-loading { opacity: 0.55; cursor: wait; }

/* Notificação toast de feedback (ex.: estado atualizado com sucesso) */
.admin-toast {
    position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 500;
    background: var(--tinta); color: var(--branco); padding: 0.8rem 1.2rem;
    border-radius: var(--radius-sm); font-size: 0.88rem; font-weight: 600;
    box-shadow: var(--sombra-lg);
    transform: translateY(12px); opacity: 0; visibility: hidden;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility var(--dur) linear;
}
.admin-toast.is-visible { transform: translateY(0); opacity: 1; visibility: visible; }
.admin-toast.error { background: var(--erro); }
.admin-toast.success { background: var(--sucesso); }

.filters { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin-bottom: 1.4rem; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--radius); padding: 1rem; }
.filters input, .filters select { width: auto; min-width: 180px; }

.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; margin-bottom: 1.6rem; }
.admin-card, .card-info {
    background: var(--branco); border: 1px solid var(--borda); border-radius: var(--radius); padding: 1.3rem;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.admin-card { display:flex; align-items:center; gap:.8rem; text-decoration:none; color:inherit; }
.admin-card > strong { font-size:1.35rem; color:var(--texto); }
.admin-card > span:last-child { color:var(--cinza-600); font-size:.88rem; }
.admin-card-acoes { display:block; }
.admin-card-title { display:block; color:var(--texto); font-weight:700; margin-bottom:.65rem; }
.admin-card-links { display:flex; flex-wrap:wrap; gap:.55rem; }
.admin-card-links a, .btn-table { color:var(--vermelho); font-size:.84rem; font-weight:600; text-decoration:none; }
.admin-breadcrumb { color:var(--cinza-600); font-size:.82rem; margin-bottom:.35rem; }
.admin-breadcrumb a { color:var(--vermelho); text-decoration:none; }
.page-header-actions, .admin-form-actions { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.admin-form-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,1fr); gap:1.2rem; }
.admin-form-page .admin-section { background:#fff; border:1px solid var(--borda); border-radius:var(--radius); padding:1.2rem; }
.admin-form-page .admin-section h2, .admin-section h2 { font-size:1.05rem; margin-bottom:1rem; }
.admin-form-actions { justify-content:flex-end; margin-top:1rem; }
.admin-detail-grid { display:grid; grid-template-columns:minmax(220px,1fr) minmax(0,2fr); gap:1.2rem; }
.admin-detail-media { min-height:260px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--borda); border-radius:var(--radius); padding:1rem; }
.admin-detail-media img { max-width:100%; max-height:300px; object-fit:contain; }
.admin-detail-media i { font-size:4rem; color:var(--cinza-400); }
.admin-existing-media { grid-column:1 / -1; }
.existing-media-grid { display:flex; flex-wrap:wrap; gap:1rem; }
.existing-media-item { width:150px; border:1px solid var(--borda); border-radius:var(--radius); background:var(--cinza-100); padding:.6rem; }
.existing-media-item img { width:100%; height:105px; object-fit:contain; background:#fff; border-radius:var(--radius-sm); display:block; }
.existing-media-item span, .existing-media-item label { display:block; font-size:.76rem; margin-top:.45rem; color:var(--cinza-600); }
.upload-fields-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
@media (max-width:600px) { .upload-fields-row { grid-template-columns:1fr; } }
.admin-detail-list { display:grid; grid-template-columns:150px 1fr; gap:.7rem 1rem; margin:0; }
.admin-detail-list dt { color:var(--cinza-600); font-size:.86rem; }
.admin-detail-list dd { margin:0; color:var(--texto); }
@media (max-width:760px) { .admin-form-grid, .admin-detail-grid { grid-template-columns:1fr; } .admin-detail-list { grid-template-columns:1fr; gap:.2rem; } .admin-detail-list dd { margin-bottom:.6rem; } }
.admin-inline-form { display:inline; }
.admin-inline-form button { border:0; background:none; cursor:pointer; font:inherit; }
.consulta-encomenda { max-width:900px; padding-top:2rem; padding-bottom:4rem; }
.consulta-form, .consulta-resultado { background:#fff; border:1px solid var(--borda); border-radius:var(--radius); padding:1.4rem; margin-bottom:1.25rem; }
.consulta-form label { display:block; font-weight:700; margin-bottom:.5rem; }
.consulta-form-row { display:flex; gap:.7rem; }
.consulta-form-row input { flex:1; min-width:0; }
.consulta-resultado-header { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; border-bottom:1px solid var(--borda); padding-bottom:1rem; }
.consulta-resultado-header h2 { margin:.3rem 0; }
.consulta-resultado-header p { color:var(--cinza-600); margin:0; }
.consulta-finalizada { margin:1rem 0; padding:.8rem 1rem; background:#e8f7ef; color:#18794e; border-radius:var(--radius); font-weight:600; }
.consulta-finalizada.is-cancelada { background:#fff0f0; color:var(--erro); }
.consulta-progresso { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin:1.5rem 0; }
.consulta-etapa { color:var(--cinza-500); text-align:center; font-size:.8rem; }
.consulta-etapa span { display:block; margin:0 auto .4rem; color:inherit; }
.consulta-etapa.is-active { color:var(--vermelho); }
.consulta-dados { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; background:var(--cinza-100); padding:1rem; margin-bottom:1.4rem; }
.consulta-dados span { display:block; color:var(--cinza-600); font-size:.78rem; margin-bottom:.25rem; }
@media (max-width:600px) { .consulta-form-row { flex-direction:column; } .consulta-resultado-header { flex-direction:column; } .consulta-progresso { grid-template-columns:repeat(2,1fr); } }
.admin-card:hover, .card-info:hover { transform: translateY(-3px); box-shadow: var(--sombra-md); }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; }
.card-title { font-weight: 700; font-size: 1rem; }
.card-actions { display: flex; gap: 0.5rem; }
.card-body { font-size: 0.92rem; color: var(--tinta-suave); }
.chart-placeholder {
    background: repeating-linear-gradient(-45deg, var(--cinza-50), var(--cinza-50) 10px, var(--cinza-100) 10px, var(--cinza-100) 20px);
    border-radius: var(--radius-sm); min-height: 220px; display: flex; align-items: center; justify-content: center;
    color: var(--cinza-500); font-size: 0.9rem;
}

.table-admin { width: 100%; border-collapse: collapse; background: var(--branco); }
.table-admin thead th {
    position: sticky; top: 0; background: var(--cinza-50); text-align: left; padding: 0.85rem 1rem;
    font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cinza-600); border-bottom: 1px solid var(--borda);
}
.table-admin td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--borda); font-size: 0.9rem; vertical-align: middle; }
.table-admin tbody tr { transition: background var(--dur) var(--ease); }
.table-admin tbody tr:nth-child(even) { background: var(--cinza-50); }
.table-admin tbody tr:hover { background: var(--vermelho-50); }
.btn-actions { display: flex; gap: 0.4rem; }
.btn-actions a, .btn-actions button {
    width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--borda); background: var(--branco);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--dur) var(--ease);
}
.btn-actions a:hover, .btn-actions button:hover { transform: translateY(-2px); box-shadow: var(--sombra-sm); }

/* ============================== UPLOAD DE IMAGENS (ADMIN) ============================== */
.produto-thumb-admin {
    width: 48px; height: 48px; border-radius: var(--radius-sm); overflow: hidden;
    background: var(--cinza-100); border: 1px solid var(--borda);
    display: flex; align-items: center; justify-content: center; color: var(--cinza-400);
}
.produto-thumb-admin img { width: 100%; height: 100%; object-fit: cover; }

.upload-imagem { display: flex; gap: 1rem; align-items: flex-start; }
.upload-preview {
    width: 96px; height: 96px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0;
    background: var(--cinza-100); border: 1.5px dashed var(--borda-forte);
    display: flex; align-items: center; justify-content: center; color: var(--cinza-400); font-size: 1.6rem;
}
.upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.upload-controlos { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.upload-nome-ficheiro { font-size: 0.8rem; color: var(--cinza-600); word-break: break-all; }

.galeria-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 0.7rem; }
.galeria-admin-item {
    border: 1px solid var(--borda); border-radius: var(--radius-sm); overflow: hidden;
    background: var(--cinza-100); text-align: center;
}
.galeria-admin-item img { width: 100%; height: 80px; object-fit: cover; display: block; }
.galeria-admin-remover {
    display: flex; align-items: center; justify-content: center; gap: 0.3rem; font-size: 0.72rem;
    padding: 0.3rem; color: var(--erro); font-weight: 600; cursor: pointer;
}

/* ============================== MODAL ============================== */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(15, 17, 23, 0.55); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; z-index: 1000;
    opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
    padding: 1.2rem;
}
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-box {
    background: var(--branco); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2rem);
    width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
    box-shadow: var(--sombra-lg); transform: translateY(18px) scale(0.98); transition: transform var(--dur) var(--ease-out-back);
}
.modal-overlay.active .modal-box { transform: translateY(0) scale(1); }
.modal-box h2 { margin-bottom: 1.2rem; }
.modal-box .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ============================== UTILITÁRIOS DIVERSOS ============================== */
.foto-perfil-upload { position: relative; width: 100px; height: 100px; margin: 0 auto 1rem; }
.foto-perfil-upload img, .foto-perfil-upload .foto { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.dispositivo { display: flex; align-items: center; gap: 0.8rem; }
.localizacao { font-size: 0.82rem; color: var(--cinza-600); }
.form-perfil, .form-editar, .form-senha { display: flex; flex-direction: column; gap: 1rem; }
.novo-endereco-form { border-top: 1px dashed var(--borda); margin-top: 1.4rem; padding-top: 1.4rem; }
.acoes-encomenda { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }
.vendedor-info, .vendedor-dados { display: flex; align-items: center; gap: 0.8rem; }
.pagamento-info, .info { background: var(--cinza-50); border-radius: var(--radius-sm); padding: 1rem; }

.btn-outline-branco { background: transparent; color: var(--branco); border-color: rgba(255, 255, 255, 0.6); }
.btn-outline-branco:hover { background: var(--branco); color: var(--vermelho); border-color: var(--branco); }

/* ============================== SOBRE NÓS ============================== */
.hero-sobre { padding: clamp(2.2rem, 5vw, 4rem) 0; background: var(--cinza-claro); overflow: hidden; }
.hero-sobre-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hero-sobre .hero-texto h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.7rem); font-weight: 800; line-height: 1.15; margin: 0.6rem 0 1rem; }
.hero-sobre .hero-texto h1 span { color: var(--vermelho); }
.hero-sobre .hero-texto > p { color: var(--tinta-suave); max-width: 460px; margin-bottom: 1.6rem; }
.hero-sobre-imagem { position: relative; display: flex; align-items: center; justify-content: center; min-height: 340px; }
.hero-sobre-forma {
    position: absolute; width: 78%; aspect-ratio: 1/1; border-radius: 50%;
    background: linear-gradient(150deg, var(--vermelho-50), var(--vermelho-100));
    z-index: 0;
}
.hero-sobre-imagem img { position: relative; z-index: 1; max-width: 78%; height: auto; }
.hero-sobre-pontos {
    position: absolute; right: 4%; top: 8%; width: 90px; height: 90px; z-index: 2;
    background-image: radial-gradient(var(--vermelho) 2.5px, transparent 2.5px);
    background-size: 14px 14px; opacity: 0.7;
}

.quem-somos-secao { padding: 0 0 clamp(2.6rem, 5vw, 4rem); }
.quem-somos-box {
    display: grid; grid-template-columns: auto 1fr 1fr; gap: 2rem; align-items: center;
    background: var(--cinza-claro); border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.4rem);
}
.quem-somos-icone {
    width: 64px; height: 64px; border-radius: 50%; background: var(--vermelho-50); color: var(--vermelho);
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0;
}
.quem-somos-titulo h2 { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.7rem); font-weight: 800; line-height: 1.25; }
.quem-somos-texto p { color: var(--tinta-suave); font-size: 0.92rem; margin-bottom: 0.6rem; }
.quem-somos-texto p:last-child { margin-bottom: 0; }

.fazemos-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; }
.fazemos-card {
    background: var(--branco); border: 1px solid var(--borda); border-radius: var(--radius-lg);
    padding: 1.6rem 1.3rem; text-align: center; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fazemos-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); }
.fazemos-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.4rem; }
.fazemos-card p { font-size: 0.85rem; color: var(--tinta-suave); }
.valores-grid-novo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; }

.missao-visao-secao { padding: 0 0 clamp(2.6rem, 5vw, 4rem); }
.missao-visao-box {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; align-items: start;
    background: var(--cinza-claro); border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.4rem);
}
.missao-visao-item { display: flex; gap: 1rem; }
.missao-visao-item h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; }
.missao-visao-item p { font-size: 0.9rem; color: var(--tinta-suave); }
.missao-visao-divisor { width: 1px; background: var(--borda); }

.porque-escolher-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.porque-escolher-grid h2 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.2rem); font-weight: 800; margin-bottom: 1.3rem; line-height: 1.2; }
.porque-escolher-grid h2 span { color: var(--vermelho); }
.lista-checks-duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }

/* ============================== SERVIÇOS ============================== */
.hero-servicos-imagem { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--sombra-lg); }
.hero-servicos-imagem img { width: 100%; height: 100%; object-fit: cover; display: block; }

.areas-servico-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.area-servico-card {
    background: var(--branco); border: 1px solid var(--borda); border-radius: var(--radius-lg);
    padding: 1.6rem 1.4rem; text-align: center; display: flex; flex-direction: column;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.area-servico-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); }
.area-servico-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; }
.area-servico-card > p { font-size: 0.85rem; color: var(--tinta-suave); margin-bottom: 1rem; }
.area-servico-card .lista-checks { text-align: left; margin-bottom: 1rem; }
.area-servico-card .lista-checks li { border-bottom: none; padding: 0.3rem 0; font-size: 0.85rem; }
.area-servico-card .solucao-link { justify-content: center; margin-top: auto; }

.porque-escolher-strip { padding: clamp(2rem, 4vw, 3rem) 0; }
.porque-escolher-strip-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.4rem;
    background: var(--cinza-claro); border-radius: var(--radius-lg); padding: 1.8rem;
}
.indicador-coluna { flex-direction: column; text-align: center; gap: 0.6rem; }
.indicador-coluna i { font-size: 1.6rem; width: auto; }

.processo-grid { display: flex; gap: 1.5rem; position: relative; }
.processo-passo { flex: 1; text-align: center; position: relative; padding-top: 0.5rem; }
.processo-passo:not(:last-child)::after {
    content: ""; position: absolute; top: 26px; left: 60%; right: -40%; height: 2px; background: var(--borda);
}
.processo-numero { font-size: 0.8rem; font-weight: 800; color: var(--vermelho); opacity: 0.5; margin-bottom: 0.3rem; }
.processo-icone {
    position: relative; z-index: 1; width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 1rem;
    background: var(--vermelho-50); color: var(--vermelho); display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; border: 3px solid var(--branco); box-shadow: 0 0 0 1px var(--borda);
}
.processo-passo h3 { font-size: 0.98rem; font-weight: 700; margin-bottom: 0.4rem; }
.processo-passo p { font-size: 0.84rem; color: var(--tinta-suave); }

.contacto-servico-grid {
    display: grid; grid-template-columns: 1fr 1.15fr; border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--sombra-lg); margin: 1rem 0 clamp(2.6rem, 5vw, 4rem);
}
.contacto-servico-info {
    background: linear-gradient(135deg, var(--vermelho) 0%, var(--vermelho-escuro) 100%);
    color: var(--branco); padding: clamp(1.8rem, 3vw, 2.6rem);
}
.contacto-servico-info h2 { font-size: clamp(1.4rem, 1rem + 1.4vw, 1.8rem); font-weight: 800; margin: 0.5rem 0 0.8rem; }
.contacto-servico-info > p { opacity: 0.9; margin-bottom: 1.5rem; font-size: 0.92rem; }
.contacto-servico-linha { display: flex; align-items: center; gap: 0.7rem; font-size: 0.9rem; margin-bottom: 0.9rem; opacity: 0.95; }
.contacto-servico-linha i { width: 18px; }
.contacto-servico-form { background: var(--branco); padding: clamp(1.8rem, 3vw, 2.6rem); }
.contacto-servico-form h2 { font-size: 1.15rem; font-weight: 800; margin-bottom: 1.2rem; }

/* ============================== RESPONSIVIDADE ============================== */
@media (max-width: 1080px) {
    .carrinho-layout, .marketplace-layout { grid-template-columns: 1fr; }
    .resumo-carrinho { position: static; }
    .filtros { position: static; max-height: none; }
}

@media (max-width: 992px) {
    .categorias-grid, .subcategorias-grid { grid-template-columns: repeat(2, 1fr); }
    .detalhe, .sobre-layout, .sobre-grid, .contactos-layout, .pedido-layout { grid-template-columns: 1fr; }
    .nav-principal ul, .main-nav ul { gap: 0.3rem 0.9rem; font-size: 0.85rem; }
    .perfil-layout, .editar-perfil-layout, .seguranca-layout, .enderecos-layout,
    .favoritos-layout, .encomendas-layout, .detalhe-layout { grid-template-columns: 1fr; }
    .menu-lateral, .info-lateral { position: static; }
}

@media (max-width: 768px) {
    .nav-toggle { display: inline-flex; }
    .header-top { flex-wrap: wrap; }
    .header-acoes { gap: 0.7rem; }
    .btn-encomenda { padding: 0.55rem 1rem; font-size: 0.78rem; }
    .header-conta span { display:none; }

    .galeria-thumbs { display: none; }
    .galeria-dots { display: flex; }
    .btn-ampliar span, .btn-ampliar { font-size: 0; padding: 0.6rem; gap: 0; }
    .btn-ampliar i { font-size: 1rem; }
    .indicadores-produto { flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
    .indicadores-produto .indicador-produto-item { flex: 1 1 45%; }

    .hero-contacto-grid { grid-template-columns: 1fr; text-align: left; }
    .hero-contacto-imagem { order: -1; max-width: 320px; margin: 0 auto 0.5rem; }
    .hero-contacto-imagem img { max-width: 260px; }
    .contacto-grid-principal { grid-template-columns: 1fr; }
    .copy-com-links { justify-content: center; text-align: center; }

    .hero-sobre-grid { grid-template-columns: 1fr; text-align: left; }
    .hero-sobre-imagem { order: -1; min-height: 260px; margin-bottom: 0.5rem; }
    .quem-somos-box { grid-template-columns: 1fr; text-align: center; }
    .quem-somos-icone { margin: 0 auto; }
    .fazemos-grid, .valores-grid-novo { grid-template-columns: 1fr 1fr; }
    .missao-visao-box { grid-template-columns: 1fr; }
    .missao-visao-divisor { display: none; }
    .porque-escolher-grid { grid-template-columns: 1fr; }
    .lista-checks-duas-colunas { grid-template-columns: 1fr; }

    .hero-servicos-imagem { order: -1; max-height: 240px; }
    .areas-servico-grid { grid-template-columns: 1fr 1fr; }
    .porque-escolher-strip-grid { grid-template-columns: 1fr 1fr; }
    .processo-grid { flex-direction: column; gap: 2rem; }
    .processo-passo::after { display: none; }
    .contacto-servico-grid { grid-template-columns: 1fr; }

    .banner-produtos-grid { grid-template-columns: 1fr; text-align: left; }
    .banner-produtos-imagem { order: -1; max-width: 320px; margin: 0 0 0.5rem; }
    .banner-produtos-imagem img { max-width: 260px; }
    .categorias-pills, .btn-filtros-mobile { display: flex; }
    .whatsapp-flutuante { display: flex; }
    .barra-resultados-acoes { width: 100%; justify-content: space-between; }
    .grid-marketplace.vista-lista .produto-card { flex-direction: column; align-items: stretch; }
    .grid-marketplace.vista-lista .img-produto { width: 100%; height: auto; aspect-ratio: 1/0.85; }

    body { padding-bottom: 64px; }
    .mobile-bottom-nav {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
        background: var(--branco); border-top: 1px solid var(--borda);
        box-shadow: 0 -6px 20px -10px rgba(20, 20, 26, 0.15);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .mobile-bottom-nav a, .mobile-bottom-nav button {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
        padding: 0.55rem 0.2rem 0.5rem; border: none; background: none; font-family: inherit;
        font-size: 0.68rem; font-weight: 600; color: var(--cinza-500); cursor: pointer;
    }
    .mobile-bottom-nav i { font-size: 1.15rem; }
    .mobile-bottom-nav a.ativo { color: var(--vermelho); }
    .mobile-nav-icone { position: relative; display: inline-flex; }
    .mobile-nav-badge {
        position: absolute; top: -6px; right: -10px; background: var(--vermelho); color: var(--branco);
        font-size: 0.6rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: var(--radius-pill);
        display: flex; align-items: center; justify-content: center; padding: 0 3px;
    }

    .nav-principal, .main-nav {
        flex-direction: column; align-items: stretch; gap: 0;
        max-height: 0; overflow: hidden; opacity: 0;
        transition: max-height var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
        border-top: none;
    }
    .nav-principal.is-open, .main-nav.is-open { max-height: 600px; opacity: 1; padding: 0.5rem 0 1rem; border-top: 1px solid var(--borda); }
    .nav-principal ul, .main-nav ul { flex-direction: column; gap: 0; }
    .nav-principal ul li a, .main-nav ul li a { padding: 0.75rem 0; width: 100%; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-imagem { order: -1; max-width: 420px; margin: 0 auto; }
    .indicadores-grid { grid-template-columns: 1fr 1fr; }
    .sobre-grid-institucional, .vantagens-grid-institucional { grid-template-columns: 1fr; }
    .sobre-grafico { order: -1; }
    .solucoes-grid { grid-template-columns: repeat(3, 1fr); }
    .produtos-destaque-grid { grid-template-columns: 1fr 1fr; }
    .marcas-grid { grid-template-columns: repeat(3, 1fr); }
    .categorias-grid, .subcategorias-grid { grid-template-columns: 1fr 1fr; gap: 1.4rem 1rem; }
    .categoria-circulo { width: 78px; height: 78px; }
    .categoria-circulo i { font-size: 1.6rem; }
    .produtos-grid, .grid-relacionados, .grid-recomendados, .grid-marketplace, .grid-favoritos { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .login-card, .cadastro-card, .reset-card { padding: 1.6rem; }
    .admin-wrapper { flex-direction: column; }
    .admin-sidebar-toggle { display: inline-flex; }
    .admin-sidebar-overlay { display: block; }
    .admin-sidebar {
        position: fixed; left: 0; top: var(--header-h); bottom: 0;
        width: 82%; max-width: 300px; height: auto;
        padding: 1.4rem 0;
        transform: translateX(-105%);
        transition: transform var(--dur-slow) var(--ease);
        box-shadow: var(--sombra-lg);
        z-index: 260;
    }
    .admin-sidebar.is-open { transform: translateX(0); }
    .admin-header-meta { align-items: flex-start; }
    .table-admin { font-size: 0.8rem; }
    .table-admin th, .table-admin td { padding: 0.5rem 0.4rem; }
    .form-row, .modal-box .form-row { grid-template-columns: 1fr; }

    /* ==================== FILTROS (produtos.php) — mobile: pílulas + botão + painel ==================== */
    .filtros { position: static; max-height: none; padding: 0; border: none; background: none; }
    .categorias-pills {
        display: flex; gap: 0.6rem; overflow-x: auto; padding: 0.1rem 0.1rem 0.9rem;
        -webkit-overflow-scrolling: touch;
    }
    .categorias-pills::-webkit-scrollbar { display: none; }
    .categorias-pills a, .pill-mais {
        flex: 0 0 auto; display: flex; align-items: center; gap: 0.4rem;
        padding: 0.55rem 1rem; border-radius: var(--radius-pill); border: 1.5px solid var(--borda);
        background: var(--branco); color: var(--tinta-suave); font-size: 0.85rem; font-weight: 650;
        cursor: pointer; font-family: inherit; transition: all var(--dur) var(--ease);
    }
    .categorias-pills a span { color: var(--cinza-500); font-weight: 600; }
    .categorias-pills a.ativo { border-color: var(--vermelho); color: var(--vermelho); background: var(--vermelho-50); }
    .categorias-pills a.ativo span { color: var(--vermelho); }
    .btn-filtros-mobile {
        display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%;
        padding: 0.75rem; margin-bottom: 1rem; border-radius: var(--radius); border: 1.5px solid var(--borda);
        background: var(--branco); color: var(--tinta); font-weight: 650; font-size: 0.9rem; cursor: pointer;
    }
    .filtro-overlay {
        position: fixed; inset: 0; background: rgba(20, 20, 26, 0.45); z-index: 390;
        opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur) linear;
    }
    .filtro-overlay.is-aberto { opacity: 1; visibility: visible; }
    .filtros-form {
        position: fixed; left: 0.7rem; right: 0.7rem; bottom: 0.7rem;
        max-height: 78vh; overflow-y: auto;
        background: var(--branco); border: 1px solid var(--borda); border-radius: var(--radius-lg);
        padding: 1.5rem 1.3rem 1.3rem; box-shadow: var(--sombra-lg); z-index: 400;
        transform: translateY(24px); opacity: 0; visibility: hidden; pointer-events: none;
        transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility var(--dur) linear;
    }
    .filtros-form.is-aberto { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
    .filtro-fechar {
        position: absolute; top: 0.9rem; right: 0.9rem;
        width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--borda);
        background: var(--branco); color: var(--tinta-suave); display: flex; align-items: center; justify-content: center;
        cursor: pointer;
    }
    .grupo-filtro.filtro-em-foco { box-shadow: 0 0 0 3px var(--vermelho-50); border-radius: var(--radius-sm); }

    /* ==================== TABELAS (carrinho / encomendas / itens) — mobile: cartões em vez de linhas ==================== */
    .tabela-carrinho thead, .tabela-encomendas thead, .tabela-produtos thead, .itens-table thead { display: none; }
    .tabela-carrinho, .tabela-encomendas, .tabela-produtos, .itens-table,
    .tabela-carrinho tbody, .tabela-encomendas tbody, .tabela-produtos tbody, .itens-table tbody,
    .tabela-carrinho tr, .tabela-encomendas tr, .tabela-produtos tr, .itens-table tr,
    .tabela-carrinho td, .tabela-encomendas td, .tabela-produtos td, .itens-table td {
        display: block; width: 100%;
    }
    .tabela-carrinho tbody tr, .tabela-encomendas tbody tr, .tabela-produtos tbody tr, .itens-table tbody tr {
        border: 1px solid var(--borda); border-radius: var(--radius); margin-bottom: 0.9rem; padding: 0.9rem 1rem;
    }
    .tabela-carrinho td, .tabela-encomendas td, .tabela-produtos td, .itens-table td {
        display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
        padding: 0.45rem 0; border-bottom: 1px dashed var(--borda); text-align: right;
    }
    .tabela-carrinho td:last-child, .tabela-encomendas td:last-child, .tabela-produtos td:last-child, .itens-table td:last-child { border-bottom: none; }
    .tabela-carrinho td::before, .tabela-encomendas td::before, .tabela-produtos td::before, .itens-table td::before {
        content: attr(data-label); font-weight: 650; font-size: 0.78rem; color: var(--tinta-suave); text-align: left; flex-shrink: 0;
    }
    .tabela-carrinho td[data-label="Produto"], .tabela-encomendas td[data-label="Produtos"],
    .tabela-produtos td[data-label="Produto"], .itens-table td[data-label="Produto"] {
        flex-direction: column; align-items: flex-start; text-align: left;
    }
    .tabela-carrinho td[data-label="Produto"]::before, .tabela-encomendas td[data-label="Produtos"]::before,
    .tabela-produtos td[data-label="Produto"]::before, .itens-table td[data-label="Produto"]::before {
        margin-bottom: 0.3rem;
    }

    /* ==================== MENU LATERAL DO PERFIL — mobile: apenas ícones, na horizontal ==================== */
    .menu-lateral { padding: 1.2rem 0.9rem 0.7rem; }
    .menu-lateral .foto { width: 56px; height: 56px; font-size: 1.4rem; }
    .menu-lateral ul {
        display: flex; gap: 0.55rem; overflow-x: auto; padding: 0 0 0.2rem;
        -webkit-overflow-scrolling: touch;
    }
    .menu-lateral ul::-webkit-scrollbar { display: none; }
    .menu-lateral ul li { flex: 0 0 auto; }
    .menu-lateral ul li a {
        width: 46px; height: 46px; padding: 0; justify-content: center;
        border-radius: 50%; border: 1.5px solid var(--borda);
        font-size: 0; gap: 0;
    }
    .menu-lateral ul li a i { font-size: 1.05rem; }
    .menu-lateral ul li a.ativo { border-color: var(--vermelho); background: var(--vermelho-50); }
    .menu-lateral ul li a.sair { border-color: var(--erro-borda); }
}

@media (max-width: 480px) {
    .hero-texto h1 { font-size: 1.7rem; }
    .hero-botoes .btn { width: 100%; justify-content: center; }
    .indicadores-grid { grid-template-columns: 1fr; }
    .solucoes-grid, .produtos-destaque-grid { grid-template-columns: 1fr; }
    .marcas-grid { grid-template-columns: repeat(2, 1fr); }
    .vantagens-cards { grid-template-columns: 1fr; }
    .cta-final-box { flex-direction: column; text-align: center; }
    .cta-final-icone { display: none; }
    .categorias-grid, .subcategorias-grid { grid-template-columns: 1fr; }
    .produtos-grid, .grid-relacionados, .grid-recomendados, .grid-marketplace, .grid-favoritos { grid-template-columns: repeat(2, 1fr); }
    .stats-grid, .estatisticas-grid, .admin-grid, .admin-stats { grid-template-columns: 1fr; }

    .fazemos-grid, .valores-grid-novo, .areas-servico-grid, .porque-escolher-strip-grid { grid-template-columns: 1fr; }
}