/* * AREA HEADER - Fastyshop V8 (area do modulo 2.8) * ------------------------------------------------------------------ * TROCA LOCAL: o Header V8 substitui apenas o
do tema. * O conteudo da pagina, os estilos do tema/Elementor e o footer * permanecem naturais. * * GUILHOTINA ANTI-TEMA (V8 SEMPRE VENCE): TODAS as regras deste * arquivo carregam !important e escopo proprio (#v8sf-* / .v8sf-*). * Se o Razzi (ou qualquer plugin/Elementor) atualizar amanha, nada * dele invade o visual do V8: uma regra NORMAL do tema perde para * !important, e um seletor de ELEMENTO (button/input/a/form/...) * perde para os seletores com prefixo de elemento (ex.: * input.v8sf-hdr-search-input) usados abaixo. * * REGRA DE MANUTENCAO (obrigatoria): * 1. Toda declaracao nova DEVE terminar com !important; * 2. Seletor de elemento SEMPRE com prefixo (button. / a. / input.); * 3. Mudanca de estado via JS usa atributo hidden + regra [hidden] * deste arquivo (nunca style.display inline). * * O MOBILE e uma replicacao fiel do amostra-cart.html (padrao aprovado): * botao voltar/hamburguer + logo + busca com micro-interacoes + carrinho. * Tokens vindos do painel (--v8sf-hdr-bg/-text/-primary). */ /* --------------------------------------------------------------- SEGURANCA - se por algum motivo o tema nao tiver
para trocar, o header antigo jamais exibe. O footer do tema fica vivo. --------------------------------------------------------------- */ body.fastyshop-v8-header #site-header, body.fastyshop-v8-header .site-header, body.fastyshop-v8-header .site-branding { display: none !important; } /* --------------------------------------------------------------- GUILHOTINA - invariantes escopados ao V8. Nenhuma regra NORMAL do tema (button/input/a/ul/strong/svg...) muda estes valores. NAO usar overflow-x no body: quebra position:sticky no iOS. --------------------------------------------------------------- */ .v8sf-hdr-desktop, .v8sf-hdr-desktop *, .v8sf-hdr-mobile, .v8sf-hdr-mobile *, .v8sf-drawer, .v8sf-drawer *, .v8sf-search-backdrop { box-sizing: border-box !important; margin: 0 !important; font-family: inherit !important; } /* --------------------------------------------------------------- GUILHOTINA x TEMA - overflow-x: hidden do tema/CSS custom no html/body vira scroll container e ANULA o position:sticky do header (o elemento rola junto com a pagina). Aqui trocamos por overflow-x: clip: recorta o vazamento horizontal SEM criar scroll container, entao o sticky funciona e o layout nao estoura. Classe vai no via language_attributes. --------------------------------------------------------------- */ html.fastyshop-v8-header, html.fastyshop-v8-header body { overflow-x: clip !important; } /* Estado via JS usa atributo hidden: vence sempre o display do componente */ #v8sf-drawer[hidden], #v8sf-drawer-backdrop[hidden], #v8sf-hdr-pop-shortcuts[hidden], #v8sf-hdr-pop-suggest[hidden], #v8sf-hdr-pop-results[hidden], #v8sf-hdr-pop-shortcuts-d[hidden], #v8sf-hdr-pop-suggest-d[hidden], #v8sf-hdr-pop-results-d[hidden] { display: none !important; } .v8sf-hdr-cart-badge[hidden], .v8sf-hdr-mobile .v8sf-cart-badge[hidden] { display: none !important; } /* Mobile/desktop: cada versao aparece somente no seu breakpoint. O drawer de menu (hamburguer) e GLOBAL (mobile e desktop): a visibilidade e controlada pelo atributo hidden + classe .is-open. */ .v8sf-hdr-mobile { display: none !important; } /* ================================================================ HEADER DESKTOP ================================================================ */ .v8sf-hdr-desktop { display: flex !important; flex-direction: column !important; background: var(--v8sf-hdr-bg, #fff) !important; border-bottom: 1px solid var(--border) !important; position: -webkit-sticky !important; position: sticky !important; top: 0 !important; z-index: 900 !important; transition: box-shadow 0.25s ease !important; } /* Sticky desativado no painel (hdr_sticky = no): header fica estático. */ .v8sf-hdr-desktop.v8sf-hdr-static { position: static !important; top: auto !important; } /* Bloco esquerdo do desktop: hambúrguer/voltar + logo (padrão mobile). */ .v8sf-hdr-desktop .v8sf-back { display: flex !important; align-items: center !important; gap: 10px !important; flex-shrink: 0 !important; } .v8sf-hdr-desktop .v8sf-hdr-back { display: flex !important; align-items: center !important; color: var(--v8sf-hdr-text, var(--text-main)) !important; text-decoration: none !important; transition: color 0.2s, background 0.2s !important; flex-shrink: 0 !important; padding: 6px !important; border-radius: 8px !important; } .v8sf-hdr-desktop .v8sf-hdr-back:hover { color: var(--brand) !important; background: rgba(16, 185, 129, 0.08) !important; } .v8sf-hdr-desktop.is-stuck { box-shadow: 0 6px 20px -10px rgba(17, 24, 39, 0.25) !important; } .v8sf-hdr-inner { display: flex !important; align-items: center !important; gap: 24px !important; max-width: 1280px !important; width: 100% !important; margin: 0 auto !important; padding: 14px 24px !important; } a.v8sf-hdr-logo { display: flex !important; align-items: center !important; flex-shrink: 0 !important; text-decoration: none !important; } .v8sf-hdr-logo-img { width: auto !important; height: auto !important; object-fit: contain !important; } .v8sf-hdr-logo-text { font-size: 24px !important; font-weight: 900 !important; letter-spacing: -1px !important; color: var(--brand) !important; white-space: nowrap !important; } .v8sf-hdr-search { position: relative !important; flex: 1 !important; min-width: 0 !important; } form.v8sf-hdr-search-form { margin: 0 !important; } input.v8sf-hdr-search-input { width: 100% !important; height: 46px !important; padding: 0 44px 0 44px !important; border: 1.5px solid var(--border) !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 500 !important; color: var(--text-main) !important; background: #FAFAFA !important; outline: none !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* Blindagem de acessibilidade: o modal de login do tema deixa um