* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: #1f2937;
    background: #fafafa;
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

.header {
    background: linear-gradient(90deg, #7c2d12, #c2410c);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(194, 65, 12, 0.25);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}

.logo {
    color: #fff;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 0.3px;
}

.nav-list {
    display: flex;
    list-style: none;
    gap: 1.5rem;
}

.nav-list a {
    color: #ffedd5;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    padding-bottom: 4px;
    transition: color 0.3s;
}

.nav-list a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #f59e0b, #f97316);
    transition: width 0.3s;
}

.nav-list a:hover {
    color: #fff;
}

.nav-list a:hover::after {
    width: 100%;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}

.nav-acoes {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.btn-conta {
    white-space: nowrap;
    padding: 0.7rem 1.2rem;
}

.hero {
    background: linear-gradient(135deg, #f97316, #ef4444);
    color: #fff;
    text-align: center;
    padding: 1.75rem 0;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 24px;
    margin: 1rem auto;
    width: 92%;
    max-width: 1200px;
    box-shadow: 0 10px 30px rgba(249, 115, 22, 0.2);
}

.hero h1 {
    font-size: 2.1rem;
    margin-bottom: 0.6rem;
    font-weight: 800;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.hero p {
    font-size: 1rem;
    margin-bottom: 1.25rem;
    opacity: 0.95;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.busca-hero {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 720px;
    margin-bottom: 1.75rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    border-radius: 14px;
    overflow: hidden;
}

.busca-hero input {
    flex: 1;
    min-width: 0;
    padding: 1.1rem 1.4rem;
    border: none;
    border-radius: 0;
    font-size: 1.05rem;
    outline: none;
}

.busca-hero .btn {
    border-radius: 0;
    padding: 1.1rem 1.8rem;
}

.hero-content > .btn {
    margin-top: 1rem;
}

@media (max-width: 700px) {
    .busca-hero {
        flex-direction: column;
        border-radius: 14px;
        overflow: hidden;
    }

    .busca-hero input,
    .busca-hero .btn {
        width: 100%;
        border-radius: 0;
    }
}

.btn {
    display: inline-block;
    background: linear-gradient(180deg, #b45309, #92400e);
    color: #fff;
    padding: 0.8rem 1.8rem;
    border: 1px solid rgba(15, 23, 42, 0.5);
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
    transition: transform 0.12s, box-shadow 0.12s, filter 0.12s, background 0.12s;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -2px 0 rgba(0, 0, 0, 0.22),
        0 2px 6px rgba(15, 23, 42, 0.3),
        0 6px 14px rgba(15, 23, 42, 0.18);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.btn:hover {
    background: linear-gradient(180deg, #c2610b, #8a3e0c);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -2px 0 rgba(0, 0, 0, 0.22),
        0 3px 8px rgba(15, 23, 42, 0.35),
        0 8px 20px rgba(15, 23, 42, 0.25);
}

.btn:active {
    background: linear-gradient(180deg, #92400e, #b45309);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        0 1px 2px rgba(15, 23, 42, 0.25);
    transform: translateY(1px);
}

.section {
    padding: 4.5rem 0;
}

.section-alt {
    background: linear-gradient(180deg, #fff7ed, #ffffff);
}

.section h2 {
    text-align: center;
    margin-bottom: 2.25rem;
    color: #431407;
    font-size: 2rem;
    font-weight: 800;
    position: relative;
    padding-bottom: 0.75rem;
}

.section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f59e0b, #c2410c);
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.card {
    background: #fff;
    border-radius: 12px;
    padding: 0.75rem;
    box-shadow: 0 6px 24px rgba(30, 27, 75, 0.08);
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    border: 2px solid #fed7aa;
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(99, 102, 241, 0.18);
    border-color: #f97316;
}

.card h3 {
    color: #c2410c;
    margin-bottom: 0.3rem;
    font-weight: 700;
    font-size: 0.95rem;
}

.card p {
    font-size: 0.85rem;
}

.card-icone {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.6rem;
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.3);
}

.card-icone svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
}

.card-icone img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.card-imagem {
    width: 100%;
    height: 170px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0.6rem;
    background: linear-gradient(135deg, #f97316, #c2410c);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.foto-legenda {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    text-align: center;
    font-size: 0.6rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.3);
    padding: 0.1rem 0.3rem;
}

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

.card-imagem .card-imagem-place img {
    width: 54px;
    height: 54px;
    object-fit: contain;
}

.imagem-atual {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.4rem;
}

.imagem-atual img {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #fed7aa;
    display: block;
}

.check-remover {
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
}

.thumb-produto {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
}

.sem-imagem {
    color: #bbb;
}

.preco {
    font-weight: bold;
    color: #059669;
    margin-top: 0.5rem;
    font-size: 0.95rem;
}

.estoque {
    color: #6b7280;
    font-size: 0.75rem;
    margin-top: 0.2rem;
}

.sobre-texto {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.1rem;
    color: #4b5563;
}

.formulario {
    max-width: 500px;
    margin: 0 auto 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.formulario input,
.formulario textarea,
.formulario select {
    padding: 0.75rem 0.9rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.formulario input:focus,
.formulario textarea:focus,
.formulario select:focus {
    outline: none;
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}

.form-msg {
    text-align: center;
    font-weight: bold;
    color: #059669;
}

.contato-info {
    text-align: center;
    line-height: 2;
    color: #4b5563;
}

.icone-info {
    width: 18px;
    height: 18px;
    vertical-align: -3px;
    color: #f97316;
}

.contato-link {
    color: #c2410c;
    text-decoration: none;
    font-weight: 600;
}

.contato-link:hover {
    color: #c2410c;
}

.loja-box {
    max-width: 560px;
    margin: 0 auto;
}

.footer {
    background: linear-gradient(90deg, #7c2d12, #c2410c);
    color: #fff;
    text-align: center;
    padding: 2rem 0;
}

.footer p {
    opacity: 0.95;
}

.admin-titulo {
    color: #fbbf24;
    font-weight: bold;
}

.admin-links {
    text-align: right;
    margin-bottom: 1rem;
}

.btn-sair {
    background: linear-gradient(180deg, #a55045, #8c3d33);
    border-color: rgba(70, 25, 20, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -2px 0 rgba(0, 0, 0, 0.22),
        0 2px 6px rgba(70, 25, 20, 0.3),
        0 6px 14px rgba(140, 61, 51, 0.18);
}

.btn-sair:hover {
    background: linear-gradient(180deg, #b05a4e, #8c3d33);
}

.btn-sair:active {
    background: linear-gradient(180deg, #8c3d33, #a55045);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 1px 2px rgba(70, 25, 20, 0.25);
    transform: translateY(1px);
}

.header-admin {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

.header-admin-direita {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.admin-nav {
    background: #1a252f;
}

.admin-nav-cabecalho {
    display: flex;
    align-items: center;
}

.admin-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: #1a252f;
    color: #fff;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
}

.admin-menu-toggle:focus {
    outline: 2px solid #f97316;
    outline-offset: -2px;
}

.admin-nav-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.admin-nav-link {
    color: #bdc3c7;
    text-decoration: none;
    padding: 0.7rem 0.9rem;
    font-size: 0.9rem;
    border-radius: 5px 5px 0 0;
    transition: background 0.2s, color 0.2s;
}

.admin-nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.admin-nav-link.ativo {
    background: #f4f6f7;
    color: #2c3e50;
    font-weight: bold;
}

.admin-nav-sair {
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;
    padding: 0.4rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    transition: background 0.2s, color 0.2s;
}

.admin-nav-sair:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 6px 24px rgba(30, 27, 75, 0.08);
    display: flex;
    align-items: center;
    gap: 1rem;
    border-left: 4px solid #f97316;
    border: 2px solid #fed7aa;
}

.stat-pendentes {
    border-left-color: #f39c12;
}

.stat-icone {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, #b45309, #92400e);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 3px 8px rgba(15, 23, 42, 0.2);
}

.stat-icone svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
}

.com-icone {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.com-icone svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    flex-shrink: 0;
}

.stat-valor {
    display: block;
    font-size: 1.6rem;
    font-weight: bold;
    color: #2c3e50;
    line-height: 1.2;
}

.stat-rotulo {
    font-size: 0.85rem;
    color: #7f8c8d;
}

@media (max-width: 700px) {
    .admin-menu-toggle {
        display: inline-flex;
    }

    .admin-nav-inner {
        display: none;
        flex-direction: column;
    }

    .admin-nav-inner.open {
        display: flex;
    }

    .admin-nav-link {
        border-radius: 5px;
    }
}

.btn-excluir {
    background: linear-gradient(180deg, #a55045, #8c3d33);
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
    border-color: rgba(70, 25, 20, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -2px 0 rgba(0, 0, 0, 0.22),
        0 2px 5px rgba(70, 25, 20, 0.3),
        0 5px 12px rgba(140, 61, 51, 0.18);
}

.btn-excluir:hover {
    background: linear-gradient(180deg, #b05a4e, #8c3d33);
}

.btn-excluir:active {
    background: linear-gradient(180deg, #8c3d33, #a55045);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 1px 2px rgba(70, 25, 20, 0.25);
    transform: translateY(1px);
}

.campo-senha {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.busca-clientes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    max-width: 640px;
}

.busca-clientes input {
    flex: 1;
    min-width: 240px;
    padding: 0.7rem 0.9rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.busca-clientes input:focus {
    outline: none;
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}

.filtro-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.filtro-status-pill {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #4b5563;
    background: #ffffff;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.filtro-status-pill:hover {
    border-color: #f97316;
    color: #ea580c;
}

.filtro-status-pill.ativo {
    border-color: #f97316;
    background: #f97316;
    color: #ffffff;
}


.campo-senha input {
    flex: 1;
}

.btn-visualizar {
    background: none;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.btn-visualizar:hover {
    background: #f4f6f7;
}

.layout-produtos {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.carrinho {
    width: 280px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 6px 24px rgba(30, 27, 75, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.08);
    position: sticky;
    top: 80px;
}

.carrinho h3 {
    color: #431407;
    margin-bottom: 1rem;
}

.vazio-carrinho {
    color: #6b7280;
    font-size: 0.95rem;
}

.carrinho-lista {
    list-style: none;
    margin-bottom: 1rem;
}

.carrinho-lista li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.carrinho-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.carrinho-nome {
    flex: 1;
}

.carrinho-preco {
    font-weight: bold;
    color: #059669;
}

.carrinho-qtd {
    color: #6b7280;
}

.carrinho-remover {
    text-decoration: none;
    color: #e74c3c;
    font-weight: bold;
}

.carrinho-total {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.carrinho-limpar {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: #6b7280;
}

.btn-finalizar {
    width: 100%;
    text-align: center;
}

.grid-produtos {
    flex: 1;
}

.btn-comprar {
    margin-top: 0.75rem;
    width: 100%;
    text-align: center;
}

.comprar-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.qtd-label {
    font-size: 0.9rem;
    font-weight: bold;
    color: #431407;
}

.qtd-input {
    flex: 1;
    min-width: 0;
    width: auto;
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    font-size: 0.9rem;
}

.comprar-form .btn-comprar {
    flex: 1 1 100%;
    margin-top: 0;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
}

.layout-pedido {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.layout-pedido .trocar-senha-box {
    flex: 1;
}

@media (max-width: 900px) {
    .layout-produtos {
        flex-direction: column;
    }

    .carrinho {
        width: 100%;
        position: static;
    }

    .layout-pedido {
        flex-direction: column;
    }
}

.pedido-box {
    background: #fff;
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pedido-cabecalho {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.pedido-status {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.pedido-status-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pedido-status-form label {
    font-size: 0.95rem;
    font-weight: bold;
}

.status-select {
    padding: 0.5rem 0.75rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 0.95rem;
    font-family: inherit;
    background: #fff;
}

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-overlay.aberto {
    display: flex;
}

.baloon {
    position: relative;
    background: #fff;
    border-radius: 14px;
    padding: 2rem 1.75rem;
    max-width: 360px;
    width: 100%;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    animation: baloon-entrar 0.25s ease-out;
}

.baloon-setinha {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    background: #fff;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.baloon-icone {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.baloon h3 {
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.baloon p {
    color: #7f8c8d;
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
}

.baloon-acoes {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    align-items: stretch;
}

.baloon-acoes .btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.baloon-acoes form {
    flex: 1;
    margin: 0;
    display: flex;
}

.baloon-acoes form .btn {
    flex: 1;
    width: 100%;
}

.baloon .btn-cancelar {
    display: inline-flex;
}

@keyframes baloon-entrar {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.btn-cancelar {
    display: block;
    text-align: center;
    background: linear-gradient(180deg, #a55045, #8c3d33);
    border-color: rgba(70, 25, 20, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -2px 0 rgba(0, 0, 0, 0.22),
        0 2px 5px rgba(70, 25, 20, 0.3),
        0 5px 12px rgba(140, 61, 51, 0.18);
}

.btn-cancelar:hover {
    background: linear-gradient(180deg, #b05a4e, #8c3d33);
}

.btn-cancelar:active {
    background: linear-gradient(180deg, #8c3d33, #a55045);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 1px 2px rgba(70, 25, 20, 0.25);
    transform: translateY(1px);
}

.btn-status {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    background: linear-gradient(180deg, #b08a3d, #96742f);
    border-color: rgba(85, 65, 20, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -2px 0 rgba(0, 0, 0, 0.22),
        0 2px 5px rgba(85, 65, 20, 0.3),
        0 5px 12px rgba(150, 116, 47, 0.18);
}

.btn-status:hover {
    background: linear-gradient(180deg, #bc9440, #96742f);
}

.btn-status:active {
    background: linear-gradient(180deg, #96742f, #b08a3d);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 1px 2px rgba(85, 65, 20, 0.25);
    transform: translateY(1px);
}

.abas {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.aba {
    flex: 1;
    text-align: center;
    padding: 0.7rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

.aba.ativa {
    background: #2c3e50;
    color: #fff;
    border-color: #2c3e50;
}

.trocar-senha-box {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 500px;
}

.trocar-senha-box h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

.form-excluir {
    display: inline;
}

.vazio {
    text-align: center;
    color: #7f8c8d;
    font-size: 1.1rem;
}

.tabela-wrap {
    overflow-x: auto;
}

.tabela {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tabela th,
.tabela td {
    padding: 0.8rem;
    text-align: left;
    border-bottom: 1px solid #ecf0f1;
}

.tabela th {
    background: #2c3e50;
    color: #fff;
}

.tabela tr:hover {
    background: #f4f6f7;
}

.pet-bloco {
    background: #f8f9fa;
    border: 1px solid #ecf0f1;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.pet-bloco label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
    font-weight: bold;
    color: #2c3e50;
}

.pet-bloco input,
.pet-bloco select {
    width: 100%;
    margin-bottom: 0.75rem;
}

.pet-bloco-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.pet-bloco-cabecalho strong {
    color: #2c3e50;
}

.btn-remover-pet {
    background: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
}

.btn-remover-pet:hover {
    background: #c0392b;
}

.btn-adicionar-pet {
    border: 2px dashed #f97316;
    background: #fff;
    color: #f97316;
    border-radius: 8px;
    padding: 0.7rem 1.2rem;
    cursor: pointer;
    font-size: 0.95rem;
    width: 100%;
}

.btn-adicionar-pet:hover {
    background: #ebf5fb;
}

.pets-lista {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.pet-item {
    background: #f8f9fa;
    border: 1px solid #ecf0f1;
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
}

.pet-item-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.pet-item-cabecalho strong {
    color: #2c3e50;
}

.pet-item-linha {
    font-size: 0.9rem;
    color: #7f8c8d;
}

.pet-item-linha span {
    color: #2c3e50;
}

.aviso-inatividade {
    background: #f39c12;
    color: #fff;
    text-align: center;
    padding: 0.9rem 1rem;
    font-weight: bold;
}

.conta-banner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: #fff;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.conta-avatar {
    font-size: 3rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.conta-banner-texto h2 {
    color: #fff;
    font-size: 1.6rem;
    margin-bottom: 0.25rem;
}

.conta-banner-texto p {
    color: #bdc3c7;
    font-size: 1rem;
}

.conta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.conta-card h3 {
    margin-bottom: 0.6rem;
    font-size: 1rem;
}

.conta-info-linha {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #ecf0f1;
    font-size: 0.88rem;
}

.conta-info-linha:last-child {
    border-bottom: none;
}

.conta-info-label {
    color: #7f8c8d;
}

.conta-info-valor {
    font-weight: bold;
    text-align: right;
    color: #2c3e50;
}

.conta-acoes {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.conta-acoes-centro {
    justify-content: center;
}

.btn-ok {
    background: linear-gradient(180deg, #3f7a55, #356545);
    border-color: rgba(25, 60, 40, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -2px 0 rgba(0, 0, 0, 0.22),
        0 2px 6px rgba(25, 60, 40, 0.3),
        0 6px 14px rgba(53, 101, 69, 0.18);
}

.btn-ok:hover {
    background: linear-gradient(180deg, #46895f, #356545);
}

.btn-ok:active {
    background: linear-gradient(180deg, #356545, #3f7a55);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 1px 2px rgba(25, 60, 40, 0.25);
    transform: translateY(1px);
}

.btn-cinza {
    background: linear-gradient(180deg, #99a5a8, #7f8c8d);
    border-color: rgba(90, 100, 100, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -2px 0 rgba(0, 0, 0, 0.18),
        0 2px 6px rgba(90, 100, 100, 0.3),
        0 6px 16px rgba(127, 140, 141, 0.2);
}

.btn-cinza:hover {
    background: linear-gradient(180deg, #a8b3b5, #7f8c8d);
}

.btn-cinza:active {
    background: linear-gradient(180deg, #7f8c8d, #99a5a8);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.25),
        0 1px 2px rgba(90, 100, 100, 0.2);
    transform: translateY(1px);
}

.conta-subtitulo {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #ecf0f1;
    color: #2c3e50;
}

.conta-editar-box {
    max-width: 560px;
    margin: 0 auto;
}

.conta-editar-box .formulario select {
    padding: 0.7rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: inherit;
    font-size: 1rem;
    background: #fff;
}

.admin-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    align-items: start;
    gap: 2rem;
}

.admin-lateral {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-width: 0;
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding-bottom: 0.25rem;
}

.admin-sidebar {
    width: 100%;
    flex-shrink: 0;
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.admin-sidebar h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

.admin-conteudo {
    flex: 1;
    min-width: 0;
}

.admin-conteudo .trocar-senha-box {
    max-width: 640px;
}

.admin-conteudo .tabela {
    min-width: 640px;
}

.sidebar-lista {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sidebar-item {
    border: 1px solid #ecf0f1;
    border-radius: 8px;
    padding: 0.75rem;
}

.sidebar-item-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.sidebar-status {
    font-size: 0.75rem;
    font-weight: bold;
    color: #fff;
    background: #95a5a5;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
}

.status-em-preparacao {
    background: #f39c12;
}

.status-a-caminho {
    background: #ea580c;
}

.status-concluido {
    background: #27ae60;
}

.status-cancelado {
    background: #e74c3c;
}

.status-aguardando-pagamento {
    background: #8e44ad;
}

.sidebar-item-detalhe {
    font-size: 0.85rem;
    color: #7f8c8d;
}

.btn-sidebar {
    width: 100%;
    text-align: center;
    margin-top: 1rem;
}

@media (max-width: 900px) {
    .admin-layout {
        grid-template-columns: 1fr;
    }

    .admin-lateral {
        gap: 1.25rem;
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}

@media (max-width: 700px) {
    .conta-banner {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    .menu-toggle {
        display: block;
    }

    .nav {
        gap: 0.5rem;
    }

    .logo {
        font-size: 1.05rem;
    }

    .nav-acoes {
        margin-left: auto;
    }

    .btn-conta {
        padding: 0.45rem 0.8rem;
        font-size: 0.8rem;
        max-width: 45vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .nav-list {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #2c3e50;
        padding: 1rem;
    }

    .nav-list.open {
        display: flex;
    }

    .hero h1 {
        font-size: 2rem;
    }
}

body.corpo-fundo {
    background-color: #fff7ed;
    background-image:
        linear-gradient(rgba(255, 247, 237, 0.45), rgba(255, 247, 237, 0.45)),
        url('imagens-site/fundo-prato.jpg?v=2');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.corpo-fundo .section {
    background: rgba(255, 247, 237, 0.3);
}

body.corpo-fundo .section-alt {
    background: rgba(255, 247, 237, 0.45);
}

.form-grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem 1.5rem;
    margin-bottom: 0.5rem;
}

.form-grid-4 label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: bold;
    color: #2c3e50;
}

.form-grid-4 input,
.form-grid-4 select {
    width: 100%;
    padding: 0.7rem 0.8rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    background: #fff;
    margin: 0;
    box-sizing: border-box;
}

.form-grid-4 input:focus,
.form-grid-4 select:focus {
    outline: none;
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}

.formulario .form-linha {
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

.formulario .form-campo {
    flex: 1 1 0% !important;
    min-width: 0;
}

.formulario .form-campo label {
    display: block;
    margin-bottom: 4px;
}

.formulario .form-campo input,
.formulario .form-campo select {
    width: 100% !important;
    padding: 0.75rem 0.9rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.formulario .form-campo input:focus,
.formulario .form-campo select:focus {
    outline: none;
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}

.form-largura {
    max-width: 100% !important;
}

@media print {
    .header,
    .footer,
    .admin-nav,
    .nav,
    .hero,
    .trocar-senha-box .btn,
    .pedido-status,
    .filtro-status,
    .print-btn,
    .nao-imprimir,
    .col-acoes,
    .modal-overlay,
    #formConfirmar,
    .admin-nav-sair,
    h2:not(.print-titulo) {
        display: none !important;
    }

    .print-titulo {
        display: block !important;
        text-align: center;
        font-size: 1.2rem;
        margin-bottom: 1rem;
        color: #000;
    }

    .section {
        padding: 0 !important;
    }

    .container {
        max-width: 100% !important;
        width: 100% !important;
    }

    .tabela {
        width: 100%;
        border: 1px solid #333;
    }

    .tabela th,
    .tabela td {
        border: 1px solid #333;
        padding: 0.5rem;
        font-size: 0.85rem;
    }

    .tabela th {
        background: #eee !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .sidebar-status {
        border: 1px solid #333;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body.print-so-estoque #blocoHistorico,
    body.print-so-historico #blocoEstoque,
    body.print-so-historico .stats-grid {
        display: none !important;
    }

    body.print-ficha > :not(#modalVer) {
        display: none !important;
    }

    body.print-ficha #modalVer {
        display: block !important;
        position: static;
        background: none;
        padding: 0;
    }

    body.print-ficha #modalVer .baloon {
        box-shadow: none;
        max-width: 100%;
    }

    .pedido-box {
        page-break-inside: avoid;
        border: 1px solid #333;
        padding: 0.75rem;
        margin-bottom: 1rem;
    }

    .pedido-cabecalho span {
        font-size: 0.85rem;
    }

    #lista td:last-child {
        display: none !important;
    }
}

/* =====================================================================
   [NOVO] PÁGINA INICIAL (body.home)
   Paleta tirada do banner da marca: verde-musgo, terracota e creme.
   Terracota só nas ações (comprar, adicionar, planos).
   ===================================================================== */
body.home {
    --h-verde: #33452e;
    --h-verde-escuro: #25331f;
    --h-terracota: #b9501c;
    --h-terracota-escuro: #9a4115;
    --h-creme: #f6efe4;
    --h-creme-forte: #ede2cf;
    --h-papel: #fffdf9;
    --h-texto: #2b211b;
    --h-texto-suave: #6b5c50;
    --h-linha: #e3d6c1;
    --h-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
    background: var(--h-creme);
    color: var(--h-texto);
}

.home h1, .home h2, .home h3, .home .logo, .home .h-rodape-marca {
    font-family: var(--h-titulo);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.home a:focus-visible, .home button:focus-visible, .home input:focus-visible, .home textarea:focus-visible {
    outline: 3px solid #e9a46b;
    outline-offset: 2px;
}

/* Cabeçalho */
.home .header {
    background: var(--h-verde);
    box-shadow: none;
}
.home .logo {
    font-size: 1.45rem;
    color: #fff;
}
.home .nav-list a {
    color: #ece3d2;
}
.home .nav-list a::after {
    background: #e9a46b;
}
.home .btn-conta {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: none;
    text-shadow: none;
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
}
.home .btn-conta:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: none;
}
@media (max-width: 700px) {
    .home .nav-list {
        background: var(--h-verde);
    }
}

.h-aviso-simulacao {
    background: #6d3f8a;
    color: #fff;
    text-align: center;
    font-weight: 600;
    padding: 0.5rem 1rem;
}

/* Botões */
.h-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.8rem 1.4rem;
    border-radius: 10px;
    border: 2px solid transparent;
    font: inherit;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.h-btn-acao {
    background: var(--h-terracota);
    color: #fff;
}
.h-btn-acao:hover {
    background: var(--h-terracota-escuro);
}
.h-btn-escuro {
    background: var(--h-verde);
    color: #fff;
}
.h-btn-escuro:hover {
    background: var(--h-verde-escuro);
}
.h-btn-contorno, .h-btn-contorno-escuro {
    background: transparent;
    color: var(--h-verde);
    border-color: var(--h-verde);
}
.h-btn-contorno:hover, .h-btn-contorno-escuro:hover {
    background: var(--h-verde);
    color: #fff;
}
.h-btn-whatsapp {
    background: #128c4b;
    color: #fff;
}
.h-btn-whatsapp:hover {
    background: #0e713c;
}
.h-btn-largo {
    width: 100%;
}

/* Topo */
.h-hero {
    padding: 3rem 0 3.5rem;
}
.h-hero-grade {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 3rem;
    align-items: center;
}
.h-hero h1 {
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    line-height: 1.08;
    margin-bottom: 1rem;
}
.h-hero-texto > p {
    font-size: 1.12rem;
    color: var(--h-texto-suave);
    max-width: 34ch;
    margin-bottom: 1.75rem;
}
.h-hero-acoes {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.h-hero-imagem img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 24px 48px -24px rgba(60, 38, 18, 0.55);
}

/* Seções */
.h-secao {
    padding: 3.5rem 0;
}
.h-secao h2 {
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    line-height: 1.15;
}
.h-secao-topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.h-secao-sub {
    color: var(--h-texto-suave);
    max-width: 46ch;
}
.h-vazio {
    color: var(--h-texto-suave);
    padding: 2rem 0;
}

/* Cardápio: busca e categorias */
.h-busca {
    display: flex;
    gap: 0.5rem;
    width: min(100%, 380px);
}
.h-busca input {
    flex: 1;
    min-width: 0;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--h-linha);
    border-radius: 10px;
    background: var(--h-papel);
    font: inherit;
}
.h-busca .h-btn {
    padding: 0.7rem 1rem;
}
.h-categorias {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.4rem;
    margin-bottom: 1.5rem;
    scrollbar-width: thin;
}
.h-categorias a {
    flex-shrink: 0;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--h-linha);
    background: var(--h-papel);
    color: var(--h-texto);
    text-decoration: none;
    font-size: 0.95rem;
    white-space: nowrap;
}
.h-categorias a:hover {
    border-color: var(--h-verde);
}
.h-categorias a.ativo {
    background: var(--h-verde);
    border-color: var(--h-verde);
    color: #fff;
}
.h-resultado {
    margin: -0.5rem 0 1.25rem;
    color: var(--h-texto-suave);
}
.h-resultado a {
    color: var(--h-terracota);
}

/* Cardápio: grade + carrinho */
.h-layout-cardapio {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 2rem;
    align-items: start;
}
.h-grade-produtos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}
.h-card {
    display: flex;
    flex-direction: column;
    background: var(--h-papel);
    border: 1px solid var(--h-linha);
    border-radius: 14px;
    overflow: hidden;
}
.h-card-imagem {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--h-creme-forte);
}
.h-card-imagem > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.h-card-legenda {
    position: absolute;
    right: 0.5rem;
    bottom: 0.4rem;
    font-size: 0.7rem;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.h-card-sem-foto {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--h-texto-suave);
    font-size: 0.9rem;
}
.h-card-sem-foto img {
    width: 56px;
    height: 56px;
    opacity: 0.55;
    filter: grayscale(0.4);
}
.h-selo {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    background: var(--h-papel);
    color: var(--h-terracota-escuro);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}
.h-selo-esgotado {
    background: var(--h-texto);
    color: #fff;
}
.h-card-corpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1rem 1rem 1.1rem;
}
.h-card h3 {
    font-size: 1.15rem;
    line-height: 1.25;
    margin-bottom: 0.35rem;
}
.h-card-desc {
    color: var(--h-texto-suave);
    font-size: 0.92rem;
    line-height: 1.45;
    margin-bottom: 0.75rem;
}
.h-preco {
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: auto;
    margin-bottom: 0.75rem;
}
.h-card-aviso {
    font-size: 0.88rem;
    color: var(--h-texto-suave);
}
.h-comprar {
    display: flex;
    gap: 0.5rem;
}
.h-comprar .h-btn {
    flex: 1;
    padding: 0.65rem 0.8rem;
}
.h-qtd {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--h-linha);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.h-qtd button {
    width: 2.1rem;
    border: none;
    background: transparent;
    font-size: 1.15rem;
    color: var(--h-verde);
    cursor: pointer;
}
.h-qtd button:hover {
    background: var(--h-creme);
}
.h-qtd input {
    width: 2.2rem;
    border: none;
    text-align: center;
    font: inherit;
    font-weight: 600;
    -moz-appearance: textfield;
    appearance: textfield;
}
.h-qtd input::-webkit-outer-spin-button,
.h-qtd input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.h-carrinho {
    position: sticky;
    top: 5.5rem;
    background: var(--h-papel);
    border: 1px solid var(--h-linha);
    border-radius: 14px;
    padding: 1.25rem;
}
.h-carrinho h3 {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}
.h-carrinho-msg {
    color: var(--h-texto-suave);
    font-size: 0.92rem;
}
.h-carrinho ul {
    list-style: none;
    margin-bottom: 1rem;
}
.h-carrinho li {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--h-linha);
    font-size: 0.92rem;
}
.h-carrinho-qtd {
    font-weight: 700;
    color: var(--h-verde);
}
.h-carrinho-preco {
    white-space: nowrap;
}
.h-carrinho-remover {
    color: var(--h-texto-suave);
    text-decoration: none;
    padding: 0 0.2rem;
}
.h-carrinho-remover:hover {
    color: var(--h-terracota);
}
.h-carrinho-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}
.h-carrinho-limpar {
    display: block;
    text-align: center;
    margin-top: 0.75rem;
    font-size: 0.88rem;
    color: var(--h-texto-suave);
}

/* Planos */
.h-secao-planos {
    background: var(--h-creme-forte);
}
.h-grade-planos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}
.h-plano {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--h-papel);
    border: 1px solid var(--h-linha);
    border-radius: 14px;
    padding: 1.5rem;
}
.h-plano-destaque {
    border: 2px solid var(--h-terracota);
}
.h-plano-selo {
    position: absolute;
    top: -0.8rem;
    left: 1.5rem;
    background: var(--h-terracota);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
}
.h-plano h3 {
    font-size: 1.35rem;
    margin-bottom: 0.4rem;
}
.h-plano-desc {
    color: var(--h-texto-suave);
    margin-bottom: 1.25rem;
}
.h-plano-preco {
    font-family: var(--h-titulo);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin-top: auto;
}
.h-plano-unit {
    color: var(--h-verde);
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0.5rem 0 1.25rem;
}

/* Sobre */
.h-sobre {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
}
.h-sobre h2 {
    margin-bottom: 1rem;
}
.h-sobre p {
    font-size: 1.08rem;
    color: var(--h-texto-suave);
    max-width: 60ch;
}
.h-sobre-sem-foto {
    grid-template-columns: 1fr;
    max-width: 720px;
}
.h-sobre-foto img {
    display: block;
    width: 100%;
    border-radius: 18px;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

/* Contato */
.h-secao-contato {
    background: var(--h-papel);
    border-top: 1px solid var(--h-linha);
}
.h-contato {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}
.h-contato-info > p {
    color: var(--h-texto-suave);
    margin: 0.75rem 0 1.25rem;
}
.h-contato-lista {
    list-style: none;
    margin-top: 1.75rem;
}
.h-contato-lista li {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--h-linha);
}
.h-contato-lista strong {
    color: var(--h-texto-suave);
    font-weight: 600;
}
.h-contato-lista a {
    color: var(--h-texto);
}
.h-contato-form {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    background: var(--h-creme);
    border-radius: 14px;
    padding: 1.5rem;
}
.h-contato-form h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}
.h-contato-form label {
    font-size: 0.92rem;
    font-weight: 600;
    margin-top: 0.35rem;
}
.h-contato-form input, .h-contato-form textarea {
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--h-linha);
    border-radius: 10px;
    background: #fff;
    font: inherit;
}
.h-contato-form .h-btn {
    margin-top: 0.75rem;
    align-self: flex-start;
}
.h-contato-form .form-msg {
    text-align: left;
}

/* Rodapé */
.h-rodape {
    background: var(--h-verde-escuro);
    color: #d9d1c2;
    padding: 3rem 0 1.5rem;
    font-size: 0.95rem;
}
.h-rodape-grade {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2rem;
}
.h-rodape p {
    margin-bottom: 0.35rem;
}
.h-rodape a {
    color: #fff;
    text-decoration: none;
}
.h-rodape a:hover {
    text-decoration: underline;
}
.h-rodape-marca {
    font-size: 1.4rem;
    color: #fff;
}
.h-rodape-titulo {
    color: #fff;
    font-weight: 600;
}
.h-rodape-copy {
    text-align: center;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.85rem;
    color: #b5ad9f;
}

/* WhatsApp flutuante e barra do carrinho (celular) */
.h-wa-flutuante {
    position: fixed;
    right: 1.1rem;
    bottom: 1.1rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #128c4b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    z-index: 90;
}
.h-wa-flutuante svg {
    width: 30px;
    height: 30px;
}
.h-wa-flutuante:hover {
    background: #0e713c;
}
.h-barra-carrinho {
    display: none;
}

/* Responsivo */
@media (max-width: 960px) {
    .h-layout-cardapio {
        grid-template-columns: 1fr;
    }
    .h-carrinho {
        position: static;
    }
    .h-carrinho-vazio {
        display: none;
    }
    .h-barra-carrinho {
        position: fixed;
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.9rem 1.1rem;
        background: var(--h-terracota);
        color: #fff;
        border-radius: 12px;
        text-decoration: none;
        font-weight: 600;
        box-shadow: 0 10px 24px rgba(60, 30, 10, 0.35);
        z-index: 95;
    }
    .h-wa-acima {
        bottom: 5.4rem;
    }
    body.home:has(.h-barra-carrinho) .h-rodape {
        padding-bottom: 6rem;
    }
}

@media (max-width: 800px) {
    .h-hero {
        padding: 1.25rem 0 2rem;
    }
    .h-hero-grade {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .h-hero-imagem {
        order: -1;
    }
    .h-hero-texto > p {
        margin-bottom: 1.25rem;
    }
    .h-hero-acoes .h-btn {
        flex: 1;
    }
    .h-secao {
        padding: 2.5rem 0;
    }
    .h-busca {
        width: 100%;
    }
    .h-sobre, .h-contato {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .h-rodape-grade {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 520px) {
    .h-grade-produtos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
    .h-card-corpo {
        padding: 0.75rem;
    }
    .h-card h3 {
        font-size: 1rem;
    }
    .h-card-desc {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 0.85rem;
    }
    .h-comprar {
        flex-direction: column;
    }
    .h-qtd {
        justify-content: space-between;
    }
    .h-qtd input {
        flex: 1;
    }
    .h-contato-lista li {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .h-btn, .h-categorias a {
        transition: none;
    }
}

/* Âncoras não ficam escondidas sob o cabeçalho fixo */
.home section[id], .home #carrinho {
    scroll-margin-top: 5rem;
}

/* Página de política de privacidade */
.h-texto-legal {
    max-width: 720px;
}
.h-texto-legal h1 {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    margin-bottom: 0.25rem;
}
.h-texto-legal-data {
    color: var(--h-texto-suave);
    margin-bottom: 2rem;
}
.h-texto-legal h2 {
    font-size: 1.3rem;
    margin: 2rem 0 0.5rem;
}
.h-texto-legal p {
    line-height: 1.7;
}
.h-texto-legal a {
    color: var(--h-terracota);
}

/* Ajustes finos da página inicial */
.home .logo {
    white-space: nowrap;
}
.h-card-corpo > .h-btn {
    width: 100%;
    font-size: 0.92rem;
    padding: 0.65rem 0.8rem;
}
@media (max-width: 700px) {
    .home .logo {
        font-size: 1.15rem;
    }
    .home .btn-conta {
        padding: 0.4rem 0.8rem;
    }
    .h-hero-acoes .h-btn {
        padding: 0.8rem 0.9rem;
        font-size: 0.95rem;
    }
    .h-wa-flutuante {
        width: 50px;
        height: 50px;
        right: 0.8rem;
        bottom: 0.8rem;
    }
    .h-wa-acima {
        bottom: 5rem;
    }
}

/* =====================================================================
   [NOVO] TEMA GLOBAL (todas as páginas: loja, área do cliente e painel)
   Mesma paleta da página inicial. Fica no fim do arquivo para prevalecer
   sobre os estilos antigos sem mudar a estrutura das páginas.
   ===================================================================== */
:root {
    --h-verde: #33452e;
    --h-verde-escuro: #25331f;
    --h-terracota: #b9501c;
    --h-terracota-escuro: #9a4115;
    --h-vinho: #9e3a2b;
    --h-vinho-escuro: #822e21;
    --h-ocre: #96742f;
    --h-creme: #f6efe4;
    --h-creme-forte: #ede2cf;
    --h-papel: #fffdf9;
    --h-texto: #2b211b;
    --h-texto-suave: #6b5c50;
    --h-linha: #e3d6c1;
    --h-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
}

body {
    background: var(--h-creme);
    color: var(--h-texto);
}
h1, h2, h3, .logo {
    font-family: var(--h-titulo);
    letter-spacing: -0.01em;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid #e9a46b;
    outline-offset: 2px;
}

/* Cabeçalho e rodapé */
.header {
    background: var(--h-verde);
    box-shadow: none;
}
.logo {
    white-space: nowrap;
}
.nav-list a {
    color: #ece3d2;
}
.nav-list a::after {
    background: #e9a46b;
}
.btn-conta {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: none;
    text-shadow: none;
    border-radius: 999px;
}
.btn-conta:hover {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}
.footer {
    background: var(--h-verde-escuro);
    color: #d9d1c2;
}
.admin-titulo {
    color: #e9a46b;
}
@media (max-width: 700px) {
    .nav-list {
        background: var(--h-verde);
    }
}

/* Botões: planos, sem relevo; cor indica a intenção */
.btn {
    background: var(--h-terracota);
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: none;
    text-shadow: none;
}
.btn:hover {
    background: var(--h-terracota-escuro);
    box-shadow: none;
}
.btn:active {
    background: var(--h-terracota-escuro);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.18);
}
.btn-ok {
    background: var(--h-verde);
    border-color: transparent;
    box-shadow: none;
}
.btn-ok:hover, .btn-ok:active {
    background: var(--h-verde-escuro);
}
.btn-status {
    background: var(--h-ocre);
    border-color: transparent;
    box-shadow: none;
}
.btn-status:hover, .btn-status:active {
    background: #7d6025;
}
.btn-excluir, .btn-cancelar, .btn-sair {
    background: var(--h-vinho);
    border-color: transparent;
    box-shadow: none;
}
.btn-excluir:hover, .btn-excluir:active,
.btn-cancelar:hover, .btn-cancelar:active,
.btn-sair:hover, .btn-sair:active {
    background: var(--h-vinho-escuro);
}
.btn-cinza {
    background: var(--h-creme-forte);
    color: var(--h-texto);
    border-color: var(--h-linha);
    box-shadow: none;
}
.btn-cinza:hover, .btn-cinza:active {
    background: #e2d4bd;
    color: var(--h-texto);
}
.btn-visualizar {
    border-color: var(--h-linha);
    background: var(--h-papel);
}
.btn-visualizar:hover {
    background: var(--h-creme);
}
.btn-adicionar-pet {
    border-color: var(--h-terracota);
    color: var(--h-terracota);
    background: var(--h-papel);
}
.btn-adicionar-pet:hover {
    background: var(--h-creme);
}

/* Seções, cartões e caixas */
.section-alt {
    background: var(--h-creme-forte);
}
.section h2 {
    color: var(--h-texto);
}
.section h2::after {
    background: var(--h-terracota);
    height: 3px;
    width: 48px;
}
.card, .carrinho, .pedido-box, .trocar-senha-box, .admin-sidebar, .baloon, .pet-bloco, .pet-item {
    background: var(--h-papel);
    border: 1px solid var(--h-linha);
    box-shadow: none;
}
.baloon {
    box-shadow: 0 20px 50px rgba(43, 33, 27, 0.25);
}
.baloon-setinha {
    background: var(--h-papel);
}
.card:hover {
    border-color: var(--h-linha);
    box-shadow: none;
    transform: none;
}
.card h3, .carrinho h3, .trocar-senha-box h3, .admin-sidebar h3, .baloon h3,
.pet-bloco label, .pet-bloco-cabecalho strong, .pet-item-cabecalho strong, .pet-item-linha span {
    color: var(--h-texto);
}
.baloon p, .vazio, .vazio-carrinho, .carrinho-qtd, .carrinho-limpar, .estoque, .sobre-texto,
.contato-info, .pet-item-linha, .sidebar-item-detalhe {
    color: var(--h-texto-suave);
}
.card-icone {
    background: var(--h-verde) !important;
    box-shadow: none;
}
.card-imagem {
    background: var(--h-creme-forte);
}
.imagem-atual img {
    border-color: var(--h-linha);
}
.preco, .carrinho-preco {
    color: var(--h-verde);
}
.qtd-label {
    color: var(--h-texto);
}
.carrinho-lista li, .conta-info-linha, .sidebar-item {
    border-color: var(--h-linha);
}
.carrinho-remover {
    color: var(--h-vinho);
}
.icone-info, .contato-link, .contato-link:hover {
    color: var(--h-terracota);
}
.form-msg {
    color: #2f6b3a;
}
.aviso-inatividade {
    background: var(--h-terracota-escuro);
}

/* Formulários */
.formulario input, .formulario textarea, .formulario select,
.formulario .form-campo input, .formulario .form-campo select,
.form-grid-4 input, .form-grid-4 select, .busca-clientes input,
.qtd-input, .status-select, .conta-editar-box .formulario select {
    border-color: var(--h-linha);
    background: #fff;
}
.formulario input:focus, .formulario textarea:focus, .formulario select:focus,
.formulario .form-campo input:focus, .formulario .form-campo select:focus,
.form-grid-4 input:focus, .form-grid-4 select:focus, .busca-clientes input:focus {
    border-color: var(--h-verde);
    box-shadow: 0 0 0 3px rgba(51, 69, 46, 0.16);
}
.form-grid-4 label {
    color: var(--h-texto);
}

/* Abas e filtros */
.aba {
    border-color: var(--h-linha);
    color: var(--h-texto);
    background: var(--h-papel);
}
.aba.ativa {
    background: var(--h-verde);
    border-color: var(--h-verde);
    color: #fff;
}
.filtro-status-pill {
    border-color: var(--h-linha);
    background: var(--h-papel);
    color: var(--h-texto);
}
.filtro-status-pill:hover {
    border-color: var(--h-verde);
    color: var(--h-verde);
}
.filtro-status-pill.ativo {
    background: var(--h-verde);
    border-color: var(--h-verde);
    color: #fff;
}

/* Tabelas */
.tabela {
    background: var(--h-papel);
    box-shadow: none;
    border: 1px solid var(--h-linha);
}
.tabela th {
    background: var(--h-verde);
    color: #fff;
}
.tabela th, .tabela td {
    border-bottom-color: var(--h-linha);
}
.tabela tr:hover {
    background: var(--h-creme);
}

/* Situações (pedidos, insumos) */
.sidebar-status {
    background: #8a8076;
}
.status-em-preparacao {
    background: #b7791f;
}
.status-a-caminho {
    background: var(--h-terracota);
}
.status-concluido {
    background: #3f7a4a;
}
.status-cancelado {
    background: var(--h-vinho);
}
.status-aguardando-pagamento {
    background: #6d3f8a;
}

/* Área do cliente */
.conta-banner {
    background: var(--h-verde);
}
.conta-banner-texto p {
    color: #d9d1c2;
}
.conta-info-label {
    color: var(--h-texto-suave);
}
.conta-info-valor, .conta-subtitulo {
    color: var(--h-texto);
}
.conta-subtitulo {
    border-top-color: var(--h-linha);
}

/* Painel administrativo */
.admin-nav, .admin-menu-toggle {
    background: var(--h-verde-escuro);
}
.admin-menu-toggle:focus {
    outline-color: #e9a46b;
}
.admin-nav-link {
    color: #d9d1c2;
}
.admin-nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
.admin-nav-link.ativo {
    background: var(--h-creme);
    color: var(--h-texto);
}
.stat-card {
    background: var(--h-papel);
    border: 1px solid var(--h-linha);
    border-left: 4px solid var(--h-verde);
    box-shadow: none;
}
.stat-pendentes {
    border-left-color: var(--h-terracota);
}
.stat-icone {
    background: var(--h-verde);
    box-shadow: none;
}
.stat-valor {
    color: var(--h-texto);
}
.stat-rotulo {
    color: var(--h-texto-suave);
}

/* Impressão: mantém o visual neutro de antes */
@media print {
    body {
        background: #fff;
    }
    .tabela th {
        background: #eee !important;
        color: #000 !important;
    }
}
.conta-avatar {
    font-family: var(--h-titulo);
    font-weight: 700;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Ajustes do tema */
.header .nav > .btn, .header .nav-acoes > .btn:not(.btn-conta) {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
}
.header .nav > .btn:hover, .header .nav-acoes > .btn:not(.btn-conta):hover {
    background: rgba(255, 255, 255, 0.12);
}
.section .conta-banner-texto h2 {
    color: #fff;
}
.section .conta-banner-texto h2::after {
    display: none;
}
.formulario a:not(.btn):not(.aba), .trocar-senha-box a:not(.btn):not(.aba), .conta-card a:not(.btn), .section p a:not(.btn) {
    color: var(--h-terracota);
}
.section .conta-banner-texto h2 {
    text-align: left;
    padding-bottom: 0;
    margin-bottom: 0.25rem;
}
/* Tabelas largas rolam dentro do próprio quadro no celular */
.pedido-box, .tabela-wrap {
    overflow-x: auto;
}

/* =====================================================================
   [NOVO] Card clicável e página do produto
   ===================================================================== */
a.h-card-imagem {
    display: block;
    overflow: hidden;
    color: var(--h-texto-suave);
    text-decoration: none;
}
a.h-card-imagem > img, a.h-card-imagem .h-card-sem-foto {
    transition: transform 0.25s ease;
}
a.h-card-imagem:hover > img, a.h-card-imagem:hover .h-card-sem-foto {
    transform: scale(1.04);
}
.h-card h3 a {
    color: inherit;
    text-decoration: none;
}
.h-card h3 a:hover {
    color: var(--h-terracota);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.h-pagina-produto {
    padding-top: 2rem;
}
.h-trilha {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.92rem;
    color: var(--h-texto-suave);
    margin-bottom: 1.5rem;
}
.h-trilha a {
    color: var(--h-texto-suave);
}
.h-trilha a:hover {
    color: var(--h-terracota);
}
.h-trilha [aria-current] {
    color: var(--h-texto);
}
.h-produto {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}
.h-produto-imagem {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--h-linha);
}
.h-produto-imagem .h-card-sem-foto img {
    width: 72px;
    height: 72px;
}
.h-produto-imagem .h-selo {
    top: 1rem;
    left: 1rem;
    font-size: 0.9rem;
}
.h-produto-categoria {
    color: var(--h-verde);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
}
.h-produto h1 {
    font-size: clamp(1.9rem, 3.6vw, 2.6rem);
    line-height: 1.1;
    margin-bottom: 0.75rem;
}
.h-produto-preco {
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}
.h-produto-desc {
    color: var(--h-texto-suave);
    font-size: 1.05rem;
    line-height: 1.65;
    margin-bottom: 1.75rem;
    max-width: 52ch;
}
.h-produto-comprar {
    max-width: 420px;
    margin-bottom: 1rem;
}
.h-produto-comprar .h-qtd button {
    width: 2.6rem;
}
.h-produto-comprar .h-qtd input {
    width: 2.8rem;
    font-size: 1.05rem;
}
.h-produto-comprar .h-btn {
    padding: 0.85rem 1.2rem;
}
.h-produto-aviso {
    background: #e6efe1;
    border: 1px solid #c4d6bb;
    color: var(--h-verde-escuro);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
    max-width: 420px;
}
.h-produto-nota {
    color: var(--h-verde);
    font-weight: 600;
    margin-bottom: 1rem;
}
.h-produto-acoes-carrinho {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.h-produto-links {
    margin-top: 1.25rem;
    font-size: 0.95rem;
    color: var(--h-texto-suave);
}
.h-produto-links a {
    color: var(--h-terracota);
}
.h-relacionados {
    margin-top: 4rem;
}
.h-relacionados h2 {
    font-size: 1.6rem;
    margin-bottom: 1.25rem;
}
.h-produto-404 {
    text-align: center;
    padding: 3rem 0 4rem;
}
.h-produto-404 h1 {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}
.h-produto-404 p {
    color: var(--h-texto-suave);
    margin-bottom: 1.5rem;
}
@media (max-width: 800px) {
    .h-pagina-produto {
        padding-top: 1.25rem;
    }
    .h-produto {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .h-produto-comprar {
        flex-direction: row;
        max-width: none;
    }
    .h-produto-comprar .h-btn {
        flex: 1;
    }
}
@media (prefers-reduced-motion: reduce) {
    a.h-card-imagem > img, a.h-card-imagem .h-card-sem-foto {
        transition: none;
    }
}

/* [NOVO] Passo a passo do Telegram em Painel > Loja */
.passos-telegram {
    margin: 0 0 0.75rem 1.2rem;
    font-size: 0.92rem;
    color: var(--h-texto-suave);
    line-height: 1.55;
}
.passos-telegram li {
    margin-bottom: 0.35rem;
}
.passos-telegram code {
    background: var(--h-creme-forte);
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.88em;
    color: var(--h-texto);
}

/* [NOVO] Aviso de lotes acima do saldo (tela de Estoque) */
.aviso-lotes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: #fbf1df;
    border: 1px solid #e8cf9f;
    border-left: 4px solid var(--h-ocre);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.25rem;
}
.aviso-lotes p {
    flex: 1 1 320px;
    margin: 0;
    color: var(--h-texto);
    font-size: 0.95rem;
}

/* [NOVO] Edição de pedido (painel) */
.btn-editar-pedido {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    margin-left: 0.5rem;
    text-decoration: none;
}
.pedido-editado {
    color: var(--h-ocre);
    font-size: 0.88rem;
}
.editar-pedido h2 {
    margin-bottom: 1.5rem;
}
.editar-voltar {
    margin-bottom: 0.5rem;
}
.editar-voltar a {
    color: var(--h-terracota);
}
.editar-aviso {
    background: #fbf1df;
    border: 1px solid #e8cf9f;
    border-left: 4px solid var(--h-ocre);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin: 0.75rem 0 1rem;
    font-size: 0.95rem;
}
.editar-dica {
    color: var(--h-texto-suave);
    font-size: 0.92rem;
    margin: 0.5rem 0 1rem;
}
.editar-qtd {
    width: 5rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--h-linha);
    border-radius: 8px;
    font: inherit;
}
.editar-itens tr.editar-removido td {
    color: #a99c8f;
    text-decoration: line-through;
}
.editar-itens tr.editar-removido td:nth-child(3), .editar-itens tr.editar-removido td:last-child {
    text-decoration: none;
}
.editar-itens tr.editar-novo td:first-child {
    color: var(--h-verde);
    font-weight: 600;
}
.editar-adicionar {
    margin-top: 1.25rem;
}
.editar-adicionar label {
    font-weight: 600;
    display: block;
    margin-bottom: 0.4rem;
}
.editar-adicionar-linha {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.editar-adicionar-linha select {
    flex: 1 1 260px;
    padding: 0.6rem;
    border: 1px solid var(--h-linha);
    border-radius: 8px;
    font: inherit;
    background: #fff;
}
.editar-adicionar-linha input {
    width: 5rem;
    padding: 0.6rem;
    border: 1px solid var(--h-linha);
    border-radius: 8px;
    font: inherit;
}

/* [CORREÇÃO] Pedidos no celular: status, botões e tabela de itens cabem na tela */
.pedido-status {
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.pedido-status .btn-editar-pedido {
    margin-left: 0;
}
@media (max-width: 600px) {
    .pedido-box {
        overflow-x: visible;
        padding: 1rem;
    }
    .pedido-cabecalho {
        gap: 0.35rem 1rem;
    }
    .pedido-status {
        justify-content: stretch;
    }
    .pedido-status-form {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }
    .pedido-status-form label {
        flex: 0 0 100%;
    }
    .pedido-status-form .status-select {
        flex: 1 1 0;
        min-width: 0;
    }
    .pedido-status-form .btn,
    .pedido-status > form:not(.pedido-status-form),
    .pedido-status .btn-editar-pedido {
        flex: 0 0 auto;
    }
    .pedido-status .btn-editar-pedido {
        flex: 1 1 100%;
        text-align: center;
    }
    .pedido-box .tabela th,
    .pedido-box .tabela td {
        padding: 0.55rem 0.4rem;
        font-size: 0.85rem;
    }
    .pedido-box .tabela td:not(:first-child),
    .pedido-box .tabela th:not(:first-child) {
        white-space: nowrap;
    }
}

/* [CORREÇÃO] Mensagens recebidas (painel): cartões em qualquer tela.
   A área de conteúdo do painel é estreita para uma tabela de 6 colunas. */
.tabela-wrap:has(.tabela-mensagens) {
    overflow-x: visible;
}
.tabela-mensagens,
.admin-conteudo .tabela.tabela-mensagens {
    display: block;
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
}
.tabela-mensagens thead,
.tabela-mensagens .msg-id {
    display: none;
}
.tabela-mensagens tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.9rem;
}
.tabela-mensagens tr {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: var(--h-papel);
    border: 1px solid var(--h-linha);
    border-radius: 12px;
    padding: 0.9rem 1rem;
}
.tabela-mensagens tr:hover {
    background: var(--h-papel);
}
.tabela-mensagens td {
    display: block;
    box-sizing: border-box;
    border: none;
    padding: 0.15rem 0;
    text-align: left;
}
.tabela-mensagens .msg-nome {
    font-weight: 700;
    font-size: 1rem;
}
.tabela-mensagens .msg-email {
    font-size: 0.9rem;
}
.tabela-mensagens .msg-email a {
    color: var(--h-terracota);
    overflow-wrap: anywhere;
}
.tabela-mensagens .msg-texto {
    margin: 0.6rem 0 0.4rem;
    padding: 0.6rem 0.75rem;
    background: var(--h-creme);
    border-radius: 8px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.tabela-mensagens .msg-data {
    color: var(--h-texto-suave);
    font-size: 0.85rem;
    margin-top: auto;
}
.tabela-mensagens .msg-acoes {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.tabela-mensagens .msg-acoes .btn {
    flex: 1;
    text-align: center;
    padding: 0.6rem;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
    text-decoration: none;
}

/* [CORREÇÃO] Cabeçalho do painel no celular (selo de simulação + Sair) */
@media (max-width: 600px) {
    .header-admin {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .header-admin-direita {
        gap: 0.6rem;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .header-admin-direita .admin-titulo {
        font-size: 0.85rem;
    }
}

/* [NOVO] Código de barras no pedido de insumo */
.pi-codigo {
    background: var(--h-creme);
    border: 1px dashed var(--h-linha);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.pi-codigo label {
    font-weight: 600;
}
.pi-codigo-linha {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.pi-codigo-linha input {
    flex: 1 1 220px;
    min-width: 0;
    letter-spacing: 1px;
}
.pi-codigo-linha .btn {
    padding: 0.6rem 1rem;
}
.pi-status {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
}
.pi-status:empty {
    display: none;
}

/* [CORREÇÃO] Estoque de produtos no celular: cartões em vez de tabela larga */
@media (max-width: 700px) {
    .tabela-wrap:has(.tabela-estoque),
    .tabela-wrap:has(.tabela-hist) {
        overflow-x: visible;
    }
    .tabela-estoque, .tabela-hist,
    .admin-conteudo .tabela.tabela-estoque, .admin-conteudo .tabela.tabela-hist {
        display: block;
        min-width: 0;
        border: none;
        background: transparent;
    }
    .tabela-estoque thead, .tabela-hist thead, .tabela-hist .hist-id {
        display: none;
    }
    .tabela-estoque tbody, .tabela-hist tbody {
        display: block;
    }
    .tabela-estoque tr, .tabela-hist tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.3rem 0.9rem;
        background: var(--h-papel);
        border: 1px solid var(--h-linha);
        border-radius: 12px;
        padding: 0.85rem 1rem;
        margin-bottom: 0.75rem;
    }
    .tabela-estoque tr:hover, .tabela-hist tr:hover {
        background: var(--h-papel);
    }
    .tabela-estoque td, .tabela-hist td {
        display: block;
        border: none;
        padding: 0;
        text-align: left;
    }
    .tabela-estoque td[data-rotulo]::before, .tabela-hist td[data-rotulo]::before {
        content: attr(data-rotulo) ": ";
        color: var(--h-texto-suave);
        font-size: 0.85rem;
    }
    .tabela-estoque .est-produto {
        flex: 1 1 100%;
        font-size: 1rem;
    }
    .tabela-estoque .est-status {
        margin-left: auto;
    }
    .tabela-estoque .est-acoes {
        flex: 1 1 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        margin-top: 0.5rem;
        white-space: normal;
    }
    .tabela-estoque .est-acoes .btn {
        width: 100%;
        margin: 0 !important;
        padding: 0.6rem 0.5rem !important;
        text-align: center;
    }
    .tabela-hist .hist-produto {
        flex: 1 1 100%;
        font-weight: 700;
        order: -1;
    }
    .tabela-hist .hist-data {
        color: var(--h-texto-suave);
        font-size: 0.85rem;
    }
    .tabela-hist .hist-tipo {
        margin-left: auto;
    }
    .tabela-hist .hist-motivo {
        flex: 1 1 100%;
        color: var(--h-texto-suave);
        font-size: 0.9rem;
    }
}

/* [CORREÇÃO] Lotes (janela do estoque) no celular */
@media (max-width: 700px) {
    .tabela-lotes, .admin-conteudo .tabela.tabela-lotes {
        display: block;
        min-width: 0;
        border: none;
        background: transparent;
    }
    .tabela-lotes thead {
        display: none;
    }
    .tabela-lotes tbody {
        display: block;
    }
    .tabela-lotes tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 0.8rem;
        padding: 0.6rem 0.2rem;
        border-bottom: 1px solid var(--h-linha);
    }
    .tabela-lotes tr:hover {
        background: transparent;
    }
    .tabela-lotes td {
        display: block;
        border: none;
        padding: 0;
        font-size: 0.9rem;
    }
    .tabela-lotes td[data-rotulo]::before {
        content: attr(data-rotulo) " ";
        color: var(--h-texto-suave);
        font-size: 0.8rem;
    }
    .tabela-lotes .lote-status {
        margin-left: auto;
    }
}

/* [NOVO] Central de avisos (Painel > Loja) */
.avisos-canais {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.avisos-canais label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}
.avisos-canais small {
    font-weight: 400;
    color: var(--h-texto-suave);
}
.avisos-eventos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.avisos-eventos label {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    background: var(--h-creme);
    border: 1px solid var(--h-linha);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
}
.avisos-eventos label input {
    margin-top: 0.2rem;
}
.avisos-eventos span {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.avisos-eventos small {
    color: var(--h-texto-suave);
    font-size: 0.8rem;
    line-height: 1.35;
}
.avisos-cron {
    margin: 1rem 0 0.5rem;
    font-size: 0.9rem;
    color: var(--h-texto-suave);
}
.avisos-cron summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--h-texto);
}
.avisos-cron code {
    display: block;
    margin-top: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--h-creme-forte);
    border-radius: 8px;
    font-size: 0.8rem;
    word-break: break-all;
    color: var(--h-texto);
}

/* =====================================================================
   [NOVO] Tela Loja em cartões + Central de avisos com chaves liga/desliga
   ===================================================================== */
.loja-painel {
    max-width: 1100px;
    margin: 0 auto;
}
.loja-form.formulario {
    max-width: none;
    margin: 0;
    gap: 0;
}
.loja-grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
}
.loja-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    background: var(--h-papel);
    border: 1px solid var(--h-linha);
    border-radius: 14px;
    padding: 1.25rem 1.35rem;
    min-width: 0;
}
.loja-card-largo {
    grid-column: 1 / -1;
}
.loja-card-titulo {
    font-size: 1.15rem;
    margin: 0 0 0.35rem;
    color: var(--h-texto);
}
.loja-card-topo p {
    color: var(--h-texto-suave);
    font-size: 0.92rem;
    margin: 0;
}
.loja-card .vazio-carrinho {
    margin: 0 0 0.25rem;
}
.loja-card-acoes {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
.loja-detalhes {
    background: var(--h-creme);
    border-radius: 10px;
    padding: 0.6rem 0.85rem;
}
.loja-detalhes summary {
    cursor: pointer;
    font-weight: 600;
}
.loja-detalhes .passos-telegram {
    margin-top: 0.6rem;
}
.loja-barra-salvar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.25rem;
    padding: 0.85rem 1rem;
    background: rgba(246, 239, 228, 0.96);
    border: 1px solid var(--h-linha);
    border-radius: 14px;
    box-shadow: 0 -6px 18px rgba(43, 33, 27, 0.08);
}
.loja-barra-salvar span {
    color: var(--h-texto-suave);
    font-size: 0.88rem;
}

.avisos-subtitulo {
    font-weight: 700;
    margin: 0.9rem 0 0.1rem;
}
.avisos-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.75rem;
}
.aviso-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    background: var(--h-papel);
    border: 1px solid var(--h-linha);
    border-radius: 12px;
    padding: 0.85rem 0.95rem;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}
.aviso-card-com-campo {
    flex-direction: column;
    align-items: stretch;
    cursor: default;
}
.aviso-card-linha {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    cursor: pointer;
}
.aviso-card > input[type="checkbox"],
.aviso-card-linha > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.aviso-card:has(> input:checked),
.aviso-card:has(> .aviso-card-linha > input:checked) {
    border-color: var(--h-verde);
    background: #f1f5ec;
}
.aviso-icone {
    font-size: 1.35rem;
    line-height: 1;
    margin-top: 0.1rem;
}
.aviso-texto {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}
.aviso-texto strong {
    font-size: 0.97rem;
}
.aviso-texto small {
    color: var(--h-texto-suave);
    font-size: 0.8rem;
    line-height: 1.35;
}
.aviso-texto small.aviso-ok {
    color: #2f6b3a;
    font-weight: 600;
}
.aviso-texto small.aviso-pendente {
    color: var(--h-ocre);
    font-weight: 600;
}
/* chave liga/desliga */
.aviso-chave {
    flex: 0 0 auto;
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: #d6cbbb;
    transition: background-color 0.15s;
    margin-top: 0.1rem;
}
.aviso-chave::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s;
}
input:checked ~ .aviso-chave {
    background: var(--h-verde);
}
input:checked ~ .aviso-chave::after {
    transform: translateX(16px);
}
input:focus-visible ~ .aviso-chave {
    outline: 3px solid #e9a46b;
    outline-offset: 2px;
}
.aviso-card-com-campo input[type="email"],
.aviso-resumo-opcoes select {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--h-linha);
    border-radius: 8px;
    font: inherit;
    font-size: 0.9rem;
    background: #fff;
}
.aviso-resumo-opcoes {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}
.aviso-resumo-opcoes select {
    width: auto;
}
.aviso-resumo-vazio {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--h-texto-suave);
    cursor: pointer;
}
.aviso-resumo-vazio input {
    width: auto !important;
}
@media (max-width: 800px) {
    .loja-grade {
        grid-template-columns: 1fr;
    }
    .loja-barra-salvar span {
        display: none;
    }
    .loja-barra-salvar .btn {
        width: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .aviso-card, .aviso-chave, .aviso-chave::after {
        transition: none;
    }
}

/* =====================================================================
   [NOVO] Login com Google e cadastro completo
   ===================================================================== */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: #fff;
    color: #1f1f1f;
    border: 1px solid #747775;
    border-radius: 999px;
    font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    margin-top: 0.5rem;
    transition: background-color 0.15s, box-shadow 0.15s;
}
.btn-google:hover {
    background: #f8f8f8;
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.25);
}
.btn-google svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}
.login-google-nota {
    text-align: center;
    color: var(--h-texto-suave);
    font-size: 0.85rem;
    margin: 0.45rem 0 0;
}
.login-separador {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.1rem 0 0.5rem;
    color: var(--h-texto-suave);
    font-size: 0.85rem;
}
.login-separador::before, .login-separador::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--h-linha);
}
.cadastro-completo {
    max-width: 640px;
    margin: 0 auto;
}
.cadastro-completo h2 {
    margin-bottom: 0.5rem;
}
.cadastro-completo h2::after {
    display: none;
}
.cadastro-intro {
    color: var(--h-texto-suave);
    margin-bottom: 1rem;
    line-height: 1.55;
}
.cadastro-completo input:disabled {
    background: var(--h-creme);
    color: var(--h-texto-suave);
}
.cadastro-cancelar {
    text-align: center;
    margin-top: 0.25rem;
    font-size: 0.9rem;
}
.cadastro-cancelar a {
    color: var(--h-texto-suave);
}
.conta-bem-vindo {
    background: #e6efe1;
    border: 1px solid #c4d6bb;
    border-radius: 12px;
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
    color: var(--h-verde-escuro);
    font-weight: 600;
}
.loja-duas-colunas {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 1.5rem;
}
.loja-duas-colunas > div {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
}
.google-ativar {
    margin-top: 0.5rem;
}
@media (max-width: 800px) {
    .loja-duas-colunas {
        grid-template-columns: 1fr;
    }
}
/* Botão do Google com as cores oficiais (não herda a cor dos links) */
.trocar-senha-box a.btn-google:not(.btn):not(.aba),
a.btn-google:visited {
    color: #1f1f1f;
    text-decoration: none;
}
@media (max-width: 600px) {
    .cadastro-completo .formulario .form-linha {
        flex-direction: column !important;
        gap: 0.6rem;
    }
}
/* Botão oficial do Google (desenhado pelo próprio Google) */
.google-entrar {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0.5rem;
}
.google-botao {
    width: 100%;
    max-width: 400px;
    min-height: 44px;
    display: flex;
    justify-content: center;
}
.google-carregando {
    opacity: 0.5;
    pointer-events: none;
}
.login-google-falha {
    color: var(--h-vinho);
    font-weight: 600;
}

/* [NOVO] Sair da conta (cliente) */
.nav-sair {
    color: #ece3d2;
    font-size: 0.92rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}
.nav-sair:hover {
    color: #fff;
}
.nav-sair-celular {
    display: none;
}
.aviso-saiu {
    background: #e6efe1;
    color: var(--h-verde-escuro);
    text-align: center;
    padding: 0.7rem 1rem;
    font-weight: 600;
}
@media (max-width: 700px) {
    /* no celular, "Sair" vai para o menu ☰ (o espaço do topo é curto) */
    .nav-acoes .nav-sair:not(.nav-sair-visivel) {
        display: none;
    }
    .nav-sair-celular {
        display: list-item;
    }
}

/* [NOVO] Checkout: alterar quantidade e remover itens */
.checkout-lista {
    margin-bottom: 0.5rem;
}
.checkout-lista li.checkout-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
        "info qtd preco"
        "info qtd remover";
    align-items: center;
    gap: 0.15rem 0.85rem;
    padding: 0.75rem 0;
}
.checkout-item-info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.checkout-item-info small {
    color: var(--h-texto-suave);
    font-size: 0.82rem;
}
.checkout-qtd {
    grid-area: qtd;
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--h-linha);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.checkout-qtd button {
    width: 2.2rem;
    border: none;
    background: transparent;
    font-size: 1.05rem;
    color: var(--h-verde);
    cursor: pointer;
}
.checkout-qtd button:hover:not(:disabled) {
    background: var(--h-creme);
}
.checkout-qtd button:disabled {
    color: #c9bfb1;
    cursor: not-allowed;
}
.checkout-qtd-num {
    min-width: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.checkout-item .carrinho-preco {
    grid-area: preco;
    text-align: right;
    white-space: nowrap;
}
.checkout-remover-form {
    grid-area: remover;
    text-align: right;
}
.checkout-remover {
    background: none;
    border: none;
    padding: 0;
    color: var(--h-texto-suave);
    font-size: 0.8rem;
    text-decoration: underline;
    cursor: pointer;
}
.checkout-remover:hover {
    color: var(--h-vinho);
}
.checkout-aviso {
    background: #fbf1df;
    border: 1px solid #e8cf9f;
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.88rem;
    margin: 0.4rem 0;
}
.checkout-continuar {
    margin: 0.25rem 0 0.75rem;
    font-size: 0.9rem;
}
.checkout-continuar a {
    color: var(--h-terracota);
}
@media (max-width: 520px) {
    .checkout-lista li.checkout-item {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "info info"
            "qtd preco"
            "qtd remover";
        gap: 0.4rem 0.75rem;
    }
    .checkout-item-info {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.2rem 0.5rem;
    }
}

/* [NOVO] Estoque: produtos desativados (ocultos na loja) */
.est-oculto {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
}
.est-oculto form {
    margin: 0;
}
.est-mostrar {
    background: none;
    border: none;
    padding: 0;
    color: var(--h-terracota);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.aviso-ocultos {
    border-left-color: #8a8076;
}

/* [NOVO] Busca nas listas do painel (Produtos e Estoque) */
.busca-tabela {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}
.busca-tabela-campo {
    flex: 1 1 280px;
    max-width: 460px;
    padding: 0.65rem 0.9rem 0.65rem 2.4rem;
    border: 1px solid var(--h-linha);
    border-radius: 999px;
    font: inherit;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b5c50' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 0.85rem center / 18px;
}
.busca-tabela-campo:focus {
    outline: none;
    border-color: var(--h-verde);
    box-shadow: 0 0 0 3px rgba(51, 69, 46, 0.16);
}
.busca-tabela-campo::-webkit-search-cancel-button {
    display: none;
}
.busca-tabela-limpar {
    background: none;
    border: none;
    color: var(--h-terracota);
    font: inherit;
    font-size: 0.9rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}
.busca-tabela-contagem {
    color: var(--h-texto-suave);
    font-size: 0.88rem;
}
.tabela tr.busca-oculta,
.tabela-estoque tr.busca-oculta {
    display: none !important;
}