/* ============================================================================
 * vendou-rebrand-loja.css — Novo visual na LOJA pública (storefront)
 * ----------------------------------------------------------------------------
 * Espelha os mocks (Cardápio / Área do Cliente / Marketplace) na vitrine.
 * Seletores REAIS confirmados ao vivo no DOM da loja (.section-header,
 * .product-card/.product-name, .btn-add-cart).
 *
 * CONVIVE COM FESTIVIDADES (regra de ouro): cor sempre via var(--brand).
 * festividades.css carrega DEPOIS (festInjetarHead) e troca --brand por
 * [data-fest], então a paleta festiva manda na cor por data; aqui cuidamos só
 * de ESTRUTURA/tipografia. Carregar DEPOIS de cliente.css. Reversível.
 * ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap');

:root {
    --font-display: "Sora", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Títulos em Sora (como nos mocks) — seletores reais da loja */
.section-header h1, .section-header h2, .section-header h3,
.section-title, .secao-titulo,
.product-name, .product-info strong,
h1.loja-nome, .hero h1, .hero-titulo {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}
/* cliente.css tem regra mais específica nos títulos de seção → !important garante Sora */
.section-header h1, .section-header h2, .section-header h3,
.catalog-group__title {
    font-family: var(--font-display) !important;
}

/* Cartões de produto: cantos e borda "app" suave (mock) */
.product-card {
    border-radius: 18px;
    border: 1px solid #eceff3;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    transition: transform .18s ease, box-shadow .18s ease;
}
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -12px rgba(15, 23, 42, .18);
}

/* Pílulas de categoria (cobre variações de classe); ativo = gradiente DERIVADO
 * de --brand via color-mix (segue a cor festiva do dia). */
.catalog-chip, .categoria-pill, .cat-chip, .category-pill { border-radius: 999px; font-weight: 700; }
.catalog-chip.is-active, .categoria-pill.is-active, .cat-chip.is-active, .category-pill.is-active {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--brand) 78%, #fff 22%),
        var(--brand));
    border-color: transparent;
    color: #fff;
}

/* Botões da marca em pílula (coerência com admin/mocks) */
.btn-add-cart, .btn-primary, .btn-finalizar, .btn-add-cart.qty-control__add {
    border-radius: 999px;
}

/* ── Card CLUBE VENDOU (mock Área do Cliente): escuro + dourado ── */
.clube-vendou-card {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #2a1206, #140a04);
    border-radius: 20px; padding: 20px; margin-bottom: 18px;
    color: #fff; box-shadow: 0 14px 34px -14px rgba(0,0,0,.5);
}
.clube-vendou-card__glow {
    position: absolute; top: -50px; right: -40px; width: 190px; height: 190px;
    background: radial-gradient(circle, rgba(255,184,0,.28), transparent 70%);
    pointer-events: none;
}
.clube-vendou-card__badge {
    font-family: var(--font-display, "Sora"), sans-serif; font-weight: 800;
    font-size: 12px; letter-spacing: .08em; color: #ffb800;
}
.clube-vendou-card__label { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 12px; }
.clube-vendou-card__saldo {
    font-family: var(--font-display, "Sora"), sans-serif; font-weight: 800;
    font-size: 32px; letter-spacing: -.02em; line-height: 1.1; margin-top: 2px;
}
.clube-vendou-card__hint { font-size: 13px; color: rgba(255,255,255,.78); margin-top: 10px; position: relative; }
.clube-vendou-card__hint strong { color: #ffb800; }

/* ── Card da loja (mock Cardápio): sobrepõe o banner + selos Entrega/Taxa/Mín ── */
.vd-storecard {
    max-width: 1180px;
    margin: -46px auto 10px;
    position: relative; z-index: 5;
    background: #fff; border: 1px solid #eceff3; border-radius: 22px;
    box-shadow: 0 14px 34px -14px rgba(15, 23, 42, .22);
    padding: 18px 20px;
}
.vd-storecard__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.vd-storecard__logo {
    width: 60px; height: 60px; border-radius: 16px; flex: none;
    display: grid; place-items: center; font-size: 26px; font-weight: 800; color: #fff;
    font-family: var(--font-display);
    background: linear-gradient(135deg, #34d399, #15a34a);
    box-shadow: 0 8px 18px -6px rgba(21, 163, 74, .5);
}
.vd-storecard__logo--img { object-fit: cover; background: #fff; }
.vd-storecard__name { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: #0f172a; line-height: 1.1; margin: 0; }
.vd-storecard__meta { display: flex; align-items: center; gap: 9px; margin-top: 5px; font-size: 13.5px; color: #64748b; flex-wrap: wrap; }
.vd-storecard__status { font-weight: 700; }
.vd-storecard__status i { font-size: 8px; vertical-align: middle; margin-right: 3px; }
.vd-storecard__status.is-open { color: #0a7752; }
.vd-storecard__status.is-closed { color: #b30000; }
.vd-storecard__status.is-manut { color: #b35a00; }
.vd-storecard__star { color: #f59e0b; font-weight: 800; }
.vd-storecard__star small { color: #94a3b8; font-weight: 600; }
.vd-storecard__chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.vd-chip { background: #fff8ef; border: 1px solid #ffe9d6; border-radius: 14px; padding: 11px 8px; text-align: center; }
.vd-chip__l { display: block; font-size: 11px; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.vd-chip__v { display: block; font-family: var(--font-display); font-weight: 800; font-size: 16px; color: #0f172a; margin-top: 3px; }
.vd-chip__v--green { color: #15a34a; }
@media (max-width: 640px) {
    .vd-storecard { margin: -32px 12px 10px; border-radius: 18px; padding: 16px; }
    .vd-storecard__name { font-size: 19px; }
    .vd-storecard__logo { width: 52px; height: 52px; }
}

/* ============================================================================
 * AJUSTES FINOS DE FIDELIDADE — auditoria multi-agente (2026-06-23)
 * Só apresentação, aditivo, reversível. Convive com festividades (cor via --brand).
 * ============================================================================ */

/* ── Capa laranja sempre-presente quando a loja NÃO tem banner (mock Cardápio) ──
 * Renderizada por home.php no else do banner-carousel. O store-card sobrepõe
 * essa capa via margin-top negativo já existente — agora ele "flutua" sobre
 * algo intencional em vez de subir colado no header. */
.vd-cover {
    height: 200px;
    background: linear-gradient(150deg, #ff7b45 0%, var(--brand, #ff6a1a) 56%, #db2a18 100%);
    background-image:
        repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 14px, transparent 14px 28px),
        linear-gradient(150deg, #ff7b45 0%, var(--brand, #ff6a1a) 56%, #db2a18 100%);
    position: relative;
}
.vd-cover::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.28), transparent 30%);
    pointer-events: none;
}
@media (max-width: 640px) { .vd-cover { height: 150px; } }

/* ── Cardápio (home): refinos do store-card e chips pra bater com o mock ── */
.vd-storecard { box-shadow: 0 18px 40px -16px rgba(219, 42, 24, .26), 0 2px 6px rgba(31, 26, 19, .06); border-color: #f3e7d4; }
.vd-storecard__logo { border: 3px solid #fff; }
.vd-chip { border: 0; border-radius: 13px; padding: 9px 4px; }
.vd-chip__l { text-transform: none; letter-spacing: 0; font-size: 11px; color: #94897a; }
.vd-chip__v { font-size: 13px; }
.vd-chip__v--green { color: #0a7752; }
/* Estado ATIVO da categoria = gradiente laranja do mock (hoje fica escuro) */
.category-card.active { background: linear-gradient(135deg, var(--brand), var(--brand-700, #db2a18)); border-color: transparent; color: #fff; box-shadow: 0 6px 14px -5px rgba(255, 106, 26, .55); }
.category-card.active .category-icon { background: rgba(255, 255, 255, .22); color: #fff; }
/* Botão "Adicionar" do card de produto — gradiente/sombra de marca (mantém pílula+texto) */
.btn-add-cart { background: linear-gradient(135deg, var(--brand), var(--brand-600, #ff5a1a)); box-shadow: 0 5px 12px -4px rgba(255, 61, 36, .55); }

/* ── Área do Cliente (paginas/conta.php) — app-cards do mock ── */
.checkout-section > .container > h2 {
    font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
    color: #fff; background: linear-gradient(160deg, #ff7b45, #db2a18);
    margin: 0 0 18px; padding: 22px 20px; border-radius: 18px; font-size: 22px;
    display: flex; align-items: center; gap: 10px;
}
.checkout-section > .container > h2 > i { font-size: 20px; opacity: .95; }
.checkout-section .checkout-card {
    border-radius: 20px; border: 1px solid #f1ece3;
    box-shadow: 0 10px 26px -16px rgba(31, 26, 19, .2);
}
.checkout-section .checkout-card h4, .checkout-section .checkout-card h5 {
    font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; color: #1f1a13;
}
/* Barra "Meus pedidos / Falar com a loja" como segmented-pill */
.checkout-section .checkout-card > .d-flex.flex-wrap.gap-2 { background: #fff; border: 1px solid #f1ece3; padding: 5px; border-radius: 14px; gap: 5px; }
.checkout-section .checkout-card > .d-flex.gap-2 > .btn { border-radius: 10px; font-weight: 700; }
/* Cards de endereço como linha de lista app */
.checkout-section #enderecos .card { border: 1px solid #f1ece3; border-radius: 14px; box-shadow: none; }
.checkout-section #enderecos .card.border-primary { border-color: var(--brand); }
.checkout-section #enderecos .card .badge.bg-primary { border-radius: 999px; background: var(--brand) !important; font-weight: 700; padding: 3px 9px; }
/* Inputs + botões do bloco da conta */
.checkout-section .checkout-card .form-control { border-radius: 12px; border: 1px solid #eceff3; }
.checkout-section .checkout-card .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.checkout-section .checkout-card .btn-primary, .checkout-section .checkout-card .btn-outline-danger { border-radius: 999px; }
.checkout-section .checkout-card .btn-outline-danger { background: #fff1ee; color: #db2a18; border-color: #ffd9cc; }
/* Card "Indique e ganhe" âmbar inline — suavizar pra não competir com o Clube */
.checkout-section .checkout-card[style*="fde68a"] { border-width: 1px !important; border-radius: 18px !important; }

/* ── Marketplace (marketplace.php) — identidade unificada (precisa do <link> no head) ── */
.loja-card { border-radius: 20px; border-color: transparent; box-shadow: 0 10px 26px -16px rgba(31, 26, 19, .22), 0 1px 3px rgba(31, 26, 19, .05); }
.loja-nome, .hero h1, .sec-titulo h2, .cta-lojista h3 { font-family: var(--font-display); letter-spacing: -.02em; }
.sec-link { color: #ff3d24; font-weight: 700; }
.sec-link:hover { text-decoration: none; }
.loja-meta .meta-item.estrela { background: #fff3d6; color: #8a5a00; padding: 3px 9px; border-radius: 99px; font-weight: 800; }
.loja-meta .meta-item.estrela i { color: #ffb020; }
.loja-meta .meta-item.frete { color: #0a7752; }
.loja-logo { border-radius: 15px; }