:root {
    --loja-accent: #16a34a;
    --loja-bg: #f7f7f8;
    --loja-surface: #ffffff;
    --loja-border: #e6e8eb;
    --loja-text: #1a1d21;
    --loja-text-muted: #6b7280;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--loja-bg);
    color: var(--loja-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: .9rem;
    line-height: 1.5;
}

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

/* ============================ TOPO ============================ */
.loja-topo {
    background: var(--loja-surface);
    border-bottom: 1px solid var(--loja-border);
    position: sticky;
    top: 0;
    z-index: 20;
}

.loja-topo-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: .85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.loja-marca {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--loja-text);
}

.loja-marca i { color: var(--loja-accent); }

.loja-logo {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--loja-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.loja-logo-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    transform-origin: center;
}

.loja-nav { display: flex; align-items: center; gap: 1.25rem; }
.loja-nav a { font-weight: 500; color: var(--loja-text-muted); display: flex; align-items: center; gap: .35rem; }
.loja-nav a:hover { color: var(--loja-text); }

.loja-carrinho-link { position: relative; }
.loja-carrinho-badge {
    background: var(--loja-accent);
    color: #fff;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    padding: .05rem .4rem;
    margin-left: .1rem;
}

/* ============================ CONTEÚDO ============================ */
.loja-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    min-height: calc(100vh - 130px);
}

.loja-rodape {
    max-width: 1100px;
    margin: 2rem auto 0;
    padding: 1rem;
    text-align: center;
    font-size: .78rem;
    color: var(--loja-text-muted);
}

.loja-titulo-pagina { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 1rem; }

/* ============================ BUSCA ============================ */
.loja-busca {
    position: relative;
    margin-bottom: 1.25rem;
}

.loja-busca input {
    width: 100%;
    padding: .65rem .9rem .65rem 2.4rem;
    border: 1px solid var(--loja-border);
    border-radius: 10px;
    background: var(--loja-surface);
    font-size: .9rem;
}

.loja-busca i {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--loja-text-muted);
}

/* ============================ CATEGORIAS ============================ */
.loja-categorias {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.loja-categoria-chip {
    display: inline-flex;
    align-items: center;
    padding: .4rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--loja-border);
    background: var(--loja-surface);
    font-size: .82rem;
    font-weight: 500;
    color: var(--loja-text-muted);
}

.loja-categoria-chip:hover { border-color: var(--loja-accent); color: var(--loja-text); }
.loja-categoria-chip.ativo { background: var(--loja-accent); border-color: var(--loja-accent); color: #fff; }

/* ============================ GRID DE PRODUTOS ============================ */
.loja-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
}

.loja-produto {
    background: var(--loja-surface);
    border: 1px solid var(--loja-border);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.loja-produto-icone {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--loja-bg);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: .5rem;
    font-size: 1.8rem;
    color: #c7cbd1;
}

.loja-produto-icone img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.loja-produto-nome { font-weight: 600; font-size: .88rem; line-height: 1.3; min-height: 2.3em; }
.loja-produto-codigo { font-size: .74rem; color: var(--loja-text-muted); }
.loja-produto-preco { font-size: 1.05rem; font-weight: 700; color: var(--loja-accent); }
.loja-produto-estoque { font-size: .74rem; color: var(--loja-text-muted); }
.loja-produto-esgotado { font-size: .78rem; font-weight: 600; color: #dc2626; }

.loja-produto form { display: flex; gap: .4rem; margin-top: auto; }
.loja-produto input[type=number] {
    width: 56px;
    border: 1px solid var(--loja-border);
    border-radius: 8px;
    padding: .35rem .4rem;
    text-align: center;
}

.loja-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    background: var(--loja-accent);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: .5rem 1rem;
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    flex: 1;
}

.loja-btn:hover { filter: brightness(.95); color: #fff; }
.loja-btn.loja-btn-outline { background: transparent; color: var(--loja-text); border: 1px solid var(--loja-border); }
.loja-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ============================ CARRINHO ============================ */
.loja-carrinho-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--loja-surface);
    border: 1px solid var(--loja-border);
    border-radius: 12px;
    padding: .85rem 1rem;
    margin-bottom: .6rem;
}

.loja-carrinho-item .loja-produto-icone { width: 56px; height: 56px; aspect-ratio: unset; font-size: 1.2rem; flex-shrink: 0; }
.loja-carrinho-item-info { flex: 1; min-width: 0; }
.loja-carrinho-item-nome { font-weight: 600; }
.loja-carrinho-item-preco { color: var(--loja-text-muted); font-size: .82rem; }

.loja-carrinho-item-link { text-decoration: none; color: inherit; transition: border-color .12s; }
.loja-carrinho-item-link:hover { border-color: var(--loja-accent); }

/* Botão de WhatsApp (verde da marca, independente da cor de destaque) */
.loja-btn-whatsapp { background: #25d366; }
.loja-btn-whatsapp:hover { background: #20bd5a; color: #fff; }

.loja-whatsapp-flutuante {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
    z-index: 30;
}
.loja-whatsapp-flutuante:hover { color: #fff; filter: brightness(1.05); }

.loja-resumo {
    background: var(--loja-surface);
    border: 1px solid var(--loja-border);
    border-radius: 12px;
    padding: 1.1rem;
    margin-top: 1rem;
}

.loja-resumo-linha { display: flex; justify-content: space-between; padding: .3rem 0; }
.loja-resumo-total { font-size: 1.2rem; font-weight: 700; border-top: 1px solid var(--loja-border); margin-top: .4rem; padding-top: .6rem; }

/* ============================ CARDS / FORMULÁRIO ============================ */
.loja-card {
    background: var(--loja-surface);
    border: 1px solid var(--loja-border);
    border-radius: 12px;
    padding: 1.25rem;
    max-width: 480px;
    margin: 0 auto;
}

.loja-card-larga { max-width: 720px; }

.loja-card h1, .loja-card h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: .25rem; }
.loja-card p.loja-sub { color: var(--loja-text-muted); margin-bottom: 1.1rem; font-size: .85rem; }

.loja-card label { font-weight: 500; font-size: .82rem; margin-bottom: .25rem; display: block; }
.loja-card .form-control, .loja-card .form-select { border-radius: 8px; margin-bottom: .85rem; }

.loja-status-box {
    text-align: center;
    padding: 2.5rem 1.5rem;
}

.loja-status-box i { font-size: 2.6rem; color: var(--loja-accent); }
.loja-status-box.pendente i { color: #d97706; }

/* ============================ BADGES DE STATUS ============================ */
.loja-badge { display: inline-block; padding: .25rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.loja-badge-pendente { background: #fef3c7; color: #92400e; }
.loja-badge-recebido { background: #dbeafe; color: #1e40af; }
.loja-badge-entregue { background: #dcfce7; color: #166534; }
.loja-badge-cancelado { background: #f3f4f6; color: #4b5563; }

@media (max-width: 576px) {
    .loja-topo-inner { flex-wrap: wrap; }
    .loja-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}