/*
 * Loja pública — Glass UI (mesmo padrão do PDV, CRM e painel ADM). Vale em toda a loja: a classe g-home é posta no <html> por includes/site_header.php.
 * Religa as variáveis de site.css (--purple, --bg-card...) para o azul royal e dá acabamento de vidro ao topo, aos cartões
 * e à barra de abas do celular. Carregado depois de site.css/chrome.css e do <style> de cada bloco, com glass-tokens.css.
 */

html.g-home, body.g-home {
    --bg-dark: #07070b;
    --bg-body: #07070b;
    --bg-card: #12121b;
    --bg-card2: #1a1a27;
    --bg-header: rgba(14, 14, 22, .78);
    --bg-navbar: transparent;
    --border: rgba(255, 255, 255, .10);
    --purple: #4169e1;
    --purple-dark: #2b49c9;
    --purple-light: #7f9dff;
    --purple-glow: rgba(65, 105, 225, .16);
    --text: #f5f2ea;
    --text-secondary: #a8a396;
    --text-muted: #8a8578;
    --radius: 14px;
    --radius-sm: 10px;
    --radius-lg: 22px;
    --shadow: 0 10px 34px rgba(0, 0, 0, .42);
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, .30);

    font-family: var(--g-font), 'Poppins', sans-serif;
    background-color: var(--g-bg);
    background-image: var(--g-bg-image);
    background-attachment: fixed;
    background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -.003em;
}
/* o fundo com brilho fica no <html>; o <body> não pode pintar por cima */
html.g-home body, body.g-home { background: transparent; }
.g-home ::selection { background: rgba(65, 105, 225, .35); }
.g-home :focus-visible { outline: 2px solid var(--g-accent-2); outline-offset: 2px; }
.g-home a { color: var(--g-accent-2); }
.g-home a:hover { color: var(--g-text); }

/* ===================================================== topo */
.g-home .header-topbar {
    background: color-mix(in srgb, var(--g-surface-solid) 70%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
    border-bottom: 1px solid var(--g-border);
}
.g-home .header-search input { background: var(--g-input-bg); border: 1px solid var(--g-border); border-radius: 999px 0 0 999px; color: var(--g-text); }
.g-home .header-search input:focus { border-color: var(--g-accent); box-shadow: 0 0 0 4px rgba(65, 105, 225, .16); outline: none; }
.g-home .header-search-btn { background: var(--g-accent-grad); border: 0; border-radius: 0 999px 999px 0; color: #fff; box-shadow: 0 6px 18px rgba(65, 105, 225, .4); }
.g-home .header-cart, .g-home .header-auth-link, .g-home .header-social a { border-radius: 12px; }
.g-home .header-cart:hover, .g-home .header-auth-link:hover { background: var(--g-surface-2); color: var(--g-text); }
.g-home .cart-badge { background: var(--g-accent-grad); color: #fff; box-shadow: 0 0 12px rgba(65, 105, 225, .6); }

/* faixa de navegação: sai o bloco roxo chapado, entra vidro com o item ativo em pílula azul */
.g-home .header-navbar {
    background: color-mix(in srgb, var(--g-surface-solid) 58%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid var(--g-border);
}
.g-home .navbar-links .nav-link { color: var(--g-muted); border-radius: 999px; transition: background .2s, color .2s; }
.g-home .navbar-links .nav-link:hover { background: var(--g-surface-2); color: var(--g-text); }
.g-home .navbar-links .nav-link.active {
    background: var(--g-accent-grad); color: #fff; box-shadow: 0 6px 18px rgba(65, 105, 225, .4), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.g-home .navbar-links .nav-link.active i, .g-home .navbar-links .nav-link.active .nav-link-icon { color: #fff; }
.g-home .category-bar { background: rgba(255, 255, 255, .03); border-bottom: 1px solid var(--g-border); }
.g-home .cat-bar-link { color: var(--g-muted); }
.g-home .cat-bar-link:hover { color: var(--g-text); }
.g-home .cat-bar-dropdown, .g-home .cat-dd-sub {
    background: color-mix(in srgb, var(--g-surface-solid) 94%, transparent); border: 1px solid var(--g-border-strong); border-radius: 16px; box-shadow: var(--g-shadow);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.g-home .cat-dd-link:hover, .g-home .cat-dd-item:hover > .cat-dd-link { background: var(--g-accent-glass); color: var(--g-text); }

/* ===================================================== banner e faixa de confiança */
.g-home .banner-slider { border-radius: 26px; border: 1px solid var(--g-border); box-shadow: var(--g-shadow), inset 0 1px 0 var(--g-hl); }
.g-home .banner-nav { background: color-mix(in srgb, var(--g-surface-solid) 60%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--g-border-strong); }
.g-home .banner-dots .dot { background: rgba(255, 255, 255, .22); }
.g-home .banner-dots .dot.active { background: var(--g-accent-grad); box-shadow: 0 0 10px rgba(65, 105, 225, .7); }
.g-home .trust-item {
    background: var(--g-surface); border: 1px solid var(--g-border); border-radius: 18px; box-shadow: var(--g-shadow-sm), inset 0 1px 0 var(--g-hl);
    -webkit-backdrop-filter: blur(var(--g-blur)); backdrop-filter: blur(var(--g-blur));
}
.g-home .trust-item i { color: var(--g-accent-2); }

/* ===================================================== títulos de seção */
.g-home .section-header h2 { font-weight: 800; letter-spacing: -.01em; position: relative; padding-left: 14px; }
.g-home .section-header h2::before {
    content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 4px; border-radius: 4px; background: var(--g-accent-grad); box-shadow: 0 0 12px rgba(65, 105, 225, .6);
}
.g-home .section-header h2 i { color: var(--g-accent-2); }
.g-home .section-header a { border-radius: 999px; padding: 6px 14px; background: var(--g-surface); border: 1px solid var(--g-border); color: var(--g-accent-2); font-weight: 700; }
.g-home .section-header a:hover { background: var(--g-accent-glass); color: var(--g-text); }

/* ===================================================== cartões (produtos, eventos, atalhos) */
.g-home :is(.home-product-card, .home-event-card, .quick-card, .fnh-card, .related-card) {
    background: var(--g-surface); border: 1px solid var(--g-border); border-radius: 20px; overflow: hidden; position: relative;
    box-shadow: var(--g-shadow-sm), inset 0 1px 0 var(--g-hl);
    -webkit-backdrop-filter: blur(var(--g-blur)) saturate(140%); backdrop-filter: blur(var(--g-blur)) saturate(140%);
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), border-color .2s, box-shadow .25s;
}
.g-home :is(.home-product-card, .home-event-card, .quick-card, .fnh-card):hover {
    transform: translateY(-4px); border-color: rgba(65, 105, 225, .6); box-shadow: var(--g-accent-glow), var(--g-shadow);
}
.g-home .prod-media { background: radial-gradient(120% 90% at 50% 0%, rgba(65, 105, 225, .14), transparent 70%), rgba(255, 255, 255, .025); }
.g-home .prod-name { font-weight: 700; }
.g-home .prod-price { color: var(--g-text); font-weight: 800; }
.g-home .prod-badge, .g-home .ev-badge, .g-home .badge-red { border-radius: 999px; font-weight: 800; letter-spacing: .02em; }
.g-home .btn-buy, .g-home .btn-primary {
    background: var(--g-accent-grad); color: #fff; border: 0; border-radius: 999px; font-weight: 800;
    box-shadow: 0 8px 22px rgba(65, 105, 225, .38), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.g-home .btn-buy:hover, .g-home .btn-primary:hover { filter: brightness(1.08); background: var(--g-accent-grad); box-shadow: var(--g-accent-glow); color: #fff; }
.g-home .btn-outline { border-radius: 999px; background: var(--g-surface-2); border: 1px solid var(--g-border); color: var(--g-text); }
.g-home .qc-icon { background: var(--g-accent-glass); border: 1px solid rgba(65, 105, 225, .4); border-radius: 16px; color: var(--g-accent-2); box-shadow: inset 0 1px 0 var(--g-hl); }

/* ===================================================== rodapé e avisos */
.g-home footer.site-footer, .g-home .site-footer {
    background: linear-gradient(180deg, rgba(14, 14, 22, .9), rgba(7, 7, 11, .96)); border-top: 1px solid var(--g-border);
}
.g-home .ft-chip { background: var(--g-surface); border-color: var(--g-border); }
.g-home .float-btn { background: color-mix(in srgb, var(--g-surface-solid) 78%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--g-border-strong); color: var(--g-text); }

/* ===================================================== barra de abas do celular (a da loja, em vidro flutuante) */
@media (max-width: 991.98px) {
    .g-home .bottom-nav {
        left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; border-radius: 24px; border: 1px solid var(--g-border-strong);
        background: color-mix(in srgb, var(--g-surface-solid) 76%, transparent);
        -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
        box-shadow: 0 18px 50px rgba(0, 0, 0, .45), inset 0 1px 0 var(--g-hl);
    }
    .g-home .bnav-item { color: var(--g-muted); }
    .g-home .bnav-item.active { color: var(--g-text); }
    .g-home .bnav-item.active i { color: var(--g-accent-2); }
    .g-home .bnav-fab-circle { background: var(--g-accent-grad); box-shadow: 0 12px 30px rgba(65, 105, 225, .55), inset 0 1px 0 rgba(255, 255, 255, .45); border: 1px solid rgba(255, 255, 255, .35); }
    /* desempenho no celular: sem desfoque em cada cartão (vidro fica no topo e na barra de abas) */
    .g-home :is(.home-product-card, .home-event-card, .quick-card, .fnh-card, .trust-item) { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) { .g-home :is(.home-product-card, .home-event-card, .quick-card, .fnh-card):hover { transform: none; } }

/* ===================================================== selos e janela de aviso (Fábrica Nerd) */
.g-home .home-product-card .prod-badge:not(.hot) { background: var(--g-accent-grad); color: #fff; box-shadow: 0 4px 12px rgba(65, 105, 225, .45); }
.g-home .home-product-card.is-soldout .prod-badge { background: #4b5563; box-shadow: none; }
.g-home .fn-promo-card {
    background: color-mix(in srgb, var(--g-surface-solid) 90%, transparent); border: 1px solid var(--g-border-strong); border-radius: 28px;
    -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55), inset 0 1px 0 var(--g-hl), 0 0 60px rgba(65, 105, 225, .22);
}
.g-home .fn-promo-badge { background: var(--g-accent-glass); border-color: rgba(65, 105, 225, .55); color: var(--g-accent-2); }
.g-home .fn-promo-cta { background: var(--g-accent-grad); border-radius: 999px; box-shadow: 0 10px 26px rgba(65, 105, 225, .45), inset 0 1px 0 rgba(255, 255, 255, .3); }
.g-home .fn-promo-spark.s2 { background: var(--g-accent-2); }
.g-home .fn-promo-cta { background: linear-gradient(135deg, #4169e1, #2b49c9); }

/* o topo é fixo: precisa ser opaco o bastante para o conteúdo que rola por baixo não aparecer misturado */
.g-home .header-topbar { background: color-mix(in srgb, var(--g-surface-solid) 90%, transparent); }
.g-home .header-navbar { background: color-mix(in srgb, var(--g-surface-solid) 88%, transparent); }
.g-home .category-bar { background: color-mix(in srgb, var(--g-surface-solid) 97%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); }
/* no celular as três faixas do topo ficam sólidas (o texto que passa por baixo aparecia "vazado" entre elas) */
@media (max-width: 767.98px) {
    .g-home .header-topbar, .g-home .header-navbar, .g-home .category-bar { background: var(--g-surface-solid); }
}

/* faixas que rolam de lado no celular: sem a barra de rolagem grossa */
.g-home .trust-bar { scrollbar-width: none; }
.g-home .trust-bar::-webkit-scrollbar { display: none; }

/* ===================================================== celular: correções de largura (nada pode passar da tela) */
@media (max-width: 768px) {
    /* a coluna única do grid crescia até a largura do conteúdo (imagem de 580px) e cortava a página */
    .g-home :is(.product-detail, .checkout-layout, .cart-layout) { grid-template-columns: minmax(0, 1fr) !important; }
    .g-home :is(.product-detail, .checkout-layout, .cart-layout, .shop-layout) > * { min-width: 0; }
    .g-home .product-image img, .g-home .main-img-wrap img { max-width: 100%; height: auto; }
}
@media (max-width: 575.98px) {
    /* o topo estourava a tela e o carrinho ficava para fora: "Entrar" e "Carrinho" já estão na barra de abas de baixo */
    .g-home .header-user-area { display: none; }
    .g-home .header-topbar-inner { gap: 8px; }
}

/* barras de rolagem discretas (a antiga era um bloco azul grosso nas tabelas que rolam de lado) */
.g-home * { scrollbar-width: thin; scrollbar-color: var(--g-border-strong) transparent; }
.g-home ::-webkit-scrollbar { width: 7px; height: 7px; }
.g-home ::-webkit-scrollbar-track { background: transparent; }
.g-home ::-webkit-scrollbar-thumb { background: var(--g-border-strong); border-radius: 7px; }