/* ================================================================ BRZ WooCommerce Header — woo-header.css Importa as mesmas variáveis do header.php (inline no ). ================================================================ */ /* ── BASE DO HEADER (idêntico ao header.php) ────────────────────── */ #brz-hdr { position: fixed; top: 0; left: 0; right: 0; z-index: var(--brz-h-z, 9900); padding: 20px 0; background: var(--brz-h-bg, transparent); transition: background .22s ease, padding .22s ease, box-shadow .22s ease; } #brz-hdr.scrolled, #brz-hdr.brz-hdr--solid { background: var(--brz-h-bg-s, rgba(20,20,20,.96)); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); padding: 14px 0; box-shadow: 0 1px 0 rgba(255,255,255,.07); } /* Páginas internas: header começa estático (no fluxo, sem offset no body) e só vira fixo após rolar mais que a própria altura (classe .brz-hdr--stuck via JS). */ body.brz-internal #brz-hdr { position: static; } body.brz-internal #brz-hdr.brz-hdr--stuck { position: fixed; top: 0; left: 0; right: 0; animation: brz-hdr-down .32s cubic-bezier(.4,0,.2,1); } @keyframes brz-hdr-down { from { transform: translateY(-100%); } to { transform: translateY(0); } } .brz-hdr__inner { max-width: var(--brz-h-maxw, 1180px); margin: 0 auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } /* ── Logo ── */ .brz-hdr__logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; } .brz-hdr__logo img { height: 34px; width: auto; display: block; } .brz-hdr__logo span { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 22px; color: #fff; } .brz-hdr__store { font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(255,255,255,.5); margin-left: 14px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.15); white-space: nowrap; } /* ── Nav wrap (desktop: linha; mobile: painel) ── */ #brz-nav-wrap { display: flex; align-items: center; gap: 16px; flex: 1; justify-content: end; } /* ── Nav ── */ .brz-nav { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .brz-nav > .brz-nav__item { position: relative; } .brz-nav__link { display: flex; align-items: center; gap: 4px; font-family: 'Inter', sans-serif; font-size: 14.5px; font-weight: 500; color: var(--brz-h-txt, rgba(255,255,255,.82)) !important; text-decoration: none; padding: 8px 12px; border-radius: 4px; white-space: nowrap; transition: color .22s ease, background .22s ease; } .brz-nav__link:hover, .brz-nav__item.is-active > .brz-nav__link { color: #fff !important;} .brz-nav__item.is-active > .brz-nav__link { font-weight: 600; } /* Toggle seta */ .brz-nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: none; border: none; cursor: pointer; color: rgba(255,255,255,.7); padding: 0; margin-left: -4px; border-radius: 3px; transition: color .22s ease, transform .22s ease; flex-shrink: 0; } .brz-nav__toggle svg { pointer-events: none; } .brz-nav__item.is-open > .brz-nav__toggle { transform: rotate(180deg); color: #fff; } /* Submenus */ .brz-nav__sub { list-style: none; margin: 0; padding: 0; position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px; background: #1a1a1a; border: 1px solid rgba(255,255,255,.08); border-radius: 4px; box-shadow: 0 16px 40px rgba(0,0,0,.45); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .22s ease, visibility .22s ease, transform .22s ease; z-index: 9910; } .brz-nav__sub::before { content: ''; display: block; height: 2px; background: var(--brz-accent, #E2533B); border-radius: 4px 4px 0 0; } .brz-nav > .brz-nav__item:hover > .brz-nav__sub, .brz-nav > .brz-nav__item.is-open > .brz-nav__sub { opacity: 1; visibility: visible; transform: translateY(0); } .brz-nav__sub .brz-nav__item { position: relative; } .brz-nav__sub .brz-nav__link { font-size: 14px; padding: 10px 16px; border-radius: 0; color: rgba(255,255,255,.78) !important; } .brz-nav__sub .brz-nav__link:hover { border-left: 2px solid var(--brz-accent, #E2533B); padding-left: 14px; } .brz-nav__sub .brz-nav__item:hover > .brz-nav__sub--lv2, .brz-nav__sub .brz-nav__item.is-open > .brz-nav__sub--lv2 { opacity: 1; visibility: visible; transform: translateY(0); } .brz-nav__sub--lv2 { top: -1px; left: calc(100% + 2px); } .brz-nav__sub--lv2.open-left { left: auto; right: calc(100% + 2px); } .brz-nav__sub--lv1 .brz-nav__toggle { margin-left: auto; transform: rotate(-90deg); } .brz-nav__sub .brz-nav__item:hover > .brz-nav__sub--lv3, .brz-nav__sub .brz-nav__item.is-open > .brz-nav__sub--lv3 { opacity: 1; visibility: visible; transform: translateY(0); } .brz-nav__sub--lv3 { top: -1px; left: calc(100% + 2px); } .brz-nav__sub--lv3.open-left { left: auto; right: calc(100% + 2px); } /* ── Botão "Inserir logo" ── */ .brz-hdr__cta--upload { display: inline-flex; align-items: center; gap: 8px; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 14px; padding: 10px 20px; border-radius: 4px; background: var(--brz-h-cta-bg, #E2533B); color: var(--brz-h-cta-tx, #fff) !important; border: none; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: opacity .22s ease, transform .22s ease; text-decoration: none; } .brz-hdr__cta--upload:hover { opacity: .88; transform: translateY(-2px); } /* ── Ícones (usuário + carrinho) ── */ .brz-hdr__icons { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .brz-hdr__icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: none; border: none; border-radius: 50%; cursor: pointer; color: rgba(255,255,255,.8) !important; text-decoration: none; transition: background .2s ease, color .2s ease; } .brz-hdr__icon-btn:hover { background: rgba(255,255,255,.1); color: #fff; } .brz-hdr__icon-btn svg { display: block; flex-shrink: 0; } /* Dot "logado" */ .brz-hdr__icon-dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; background: var(--brz-accent, #E2533B); border-radius: 50%; border: 1.5px solid #111; } /* Contador do carrinho */ .brz-cart-count { position: absolute; top: 4px; right: 4px; min-width: 17px; height: 17px; background: var(--brz-accent, #E2533B); color: #fff; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; line-height: 17px; border-radius: 99px; text-align: center; padding: 0 4px; display: none; /* JS mostra quando count > 0 */ pointer-events: none; } .brz-cart-count:not(:empty) { display: block; } [data-count="0"] .brz-cart-count { display: none; } /* ── Burger ── */ .brz-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; z-index: 9920; flex-shrink: 0; } .brz-burger span { width: 24px; height: 2px; background: #fff; display: block; transition: .22s; transform-origin: center; } .brz-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .brz-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); } .brz-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Overlay (menu mobile) ── */ #brz-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9914; backdrop-filter: blur(2px); height: 100vh; } #brz-overlay.is-open { display: block; } /* ═══════════════════════════════════════════════════════ CARRINHO SIDEBAR ═══════════════════════════════════════════════════════ */ #brz-cart-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9930; backdrop-filter: blur(3px); transition: opacity .28s ease; } #brz-cart-overlay.is-open { display: block; } #brz-cart-sidebar { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: #fff; z-index: 9931; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1); box-shadow: -12px 0 48px rgba(0,0,0,.6); } #brz-cart-sidebar:not([hidden]) { transform: translateX(0); } /* Header do sidebar */ .brz-cart__header { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 18px; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; } .brz-cart__title { display: flex; align-items: center; gap: 10px; font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 700; color: #fff; margin: 0; } .brz-cart__close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(255,255,255,.06); border: none; border-radius: 50%; cursor: pointer; color: #000; transition: background .2s, color .2s; } .brz-cart__close:hover { background: rgba(0,0,0,.12); color: #000; } /* Body — lista de itens */ .brz-cart__body { flex: 1; overflow-y: auto; padding: 8px 0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; } .brz-cart__body::-webkit-scrollbar { width: 4px; } .brz-cart__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; } /* Estado vazio */ .brz-cart__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 60px 24px; color: #000; text-align: center; } .brz-cart__empty svg { opacity: .4; } .brz-cart__empty p { font-family: 'Inter', sans-serif; font-size: 15px; margin: 0; } .brz-cart__go-shop { font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 600; padding: 10px 22px; border-radius: 4px; background: var(--brz-accent, #E2533B); color: #fff !important; text-decoration: none; transition: opacity .2s; } .brz-cart__go-shop:hover { opacity: .85; } /* Lista de itens */ .brz-cart__list { list-style: none; margin: 0; padding: 0; } .brz-cart__item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 24px; border-bottom: 1px solid rgba(255,255,255,.06); position: relative; transition: background .2s; } .brz-cart__item:hover { background: rgba(255,255,255,.02); } .brz-cart__item-img { flex-shrink: 0; border-radius: 6px; overflow: hidden; display: block; background: #1e1e1e; } .brz-cart__item-img img { width: 72px; height: 72px; object-fit: cover; display: block; } .brz-cart__item-info { flex: 1; min-width: 0; } .brz-cart__item-name { display: block; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.9); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; transition: color .2s; } .brz-cart__item-name:hover { color: #000; } .brz-cart__item-meta { font-family: 'Inter', sans-serif; font-size: 12px; } .brz-cart__item-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* Qty stepper */ .brz-cart__item-qty { display: flex; align-items: center; gap: 0; background: rgba(0,0,0,.07); border-radius: 4px; overflow: hidden; } .brz-qty-btn { width: 28px; height: 28px; background: none; border: none; cursor: pointer; color: var(--brz-text, #000); font-size: 16px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .brz-qty-btn:hover { background: rgba(255,255,255,.1); color: var(--brz-text, #000); } .brz-qty-val { min-width: 28px; text-align: center; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--brz-text, #000); } .brz-cart__item-price { font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 600; color: var(--brz-text, #000); white-space: nowrap; } /* Botão remover */ .brz-cart__remove { position: absolute; top: 14px; right: 16px; width: 26px; height: 26px; background: rgba(0,0,0,.05); border: none; border-radius: 50%; cursor: pointer; color: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; } .brz-cart__remove:hover { background: rgba(226,83,59,.2); color: var(--brz-coral); } /* Footer do sidebar */ .brz-cart__footer { padding: 20px 24px; border-top: 1px solid rgba(0,0,0,.08); flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; } .brz-cart__subtotal { display: flex; justify-content: space-between; align-items: center; font-family: 'Inter', sans-serif; font-size: 15px; color: #000; margin-bottom: 4px; } .brz-cart-total { font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 700; color: #000; } .brz-cart__checkout-btn { display: block; padding: 14px; background: var(--brz-accent, #E2533B); color: #fff !important; font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 700; text-align: center; text-decoration: none; border-radius: 4px; transition: opacity .2s, transform .2s; } .brz-cart__checkout-btn:hover { opacity: .9; transform: translateY(-1px); } .xt_woovs-attribute-value{ display: none !important; } .brz-cart__view-btn { display: block; padding: 11px; background: transparent; color: rgba(0,0,0,.55) !important; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; text-align: center; text-decoration: none; border: 1px solid rgba(0,0,0,.12); border-radius: 4px; transition: border-color .2s, color .2s; } .brz-cart__view-btn:hover { border-color: rgba(0,0,0,.3); color: #000 !important; } /* Spinner */ .brz-cart__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(15,15,15,.7); opacity: 0; pointer-events: none; transition: opacity .2s; border-radius: 0; } .brz-cart__loading.is-visible { opacity: 1; pointer-events: all; } .brz-cart__loading svg { color: var(--brz-accent, #E2533B); animation: brz-spin .7s linear infinite; } @keyframes brz-spin { to { transform: rotate(360deg); } } /* ═══════════════════════════════════════════════════════ MODAL DE BUSCA ═══════════════════════════════════════════════════════ */ #brz-search-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 9940; backdrop-filter: blur(4px); } #brz-search-overlay.is-open { display: block; } #brz-search-modal { position: fixed; top: 0; left: 0; right: 0; z-index: 9941; display: flex; justify-content: center; padding: 18vh 20px 20px; pointer-events: none; } #brz-search-modal:not([hidden]) { pointer-events: all; } .brz-search__inner { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 680px; transform: translateY(-16px); opacity: 0; transition: transform .28s ease, opacity .28s ease; } #brz-search-modal:not([hidden]) .brz-search__inner { transform: translateY(0); opacity: 1; } .brz-search__form { display: flex; align-items: center; gap: 10px; flex: 1; background: #fff; border-radius: 6px; padding: 6px 6px 6px 18px; box-shadow: 0 24px 80px rgba(0,0,0,.5); } .brz-search__icon { color: rgba(0,0,0,.4); flex-shrink: 0; } .brz-search__input { flex: 1; border: none; outline: none; background: transparent; font-family: 'Inter', sans-serif; font-size: 17px; color: #111; padding: 12px 0; } .brz-search__input::placeholder { color: rgba(0,0,0,.4); } .brz-search__submit { flex-shrink: 0; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 14px; padding: 12px 22px; border: none; border-radius: 4px; background: var(--brz-accent, #E2533B); color: #fff; cursor: pointer; transition: opacity .2s; } .brz-search__submit:hover { opacity: .9; } .brz-search__close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: rgba(255,255,255,.1); border: none; border-radius: 50%; cursor: pointer; color: #fff; transition: background .2s; } .brz-search__close:hover { background: rgba(255,255,255,.2); } /* ═══════════════════════════════════════════════════════ MOBILE (≤ 900px) ═══════════════════════════════════════════════════════ */ @media (max-width: 900px) { .brz-burger { display: flex; } /* No mobile o menu é off-canvas (position:fixed). O backdrop-filter do header criava um "containing block" que prendia o menu fixo ao header — cortando seu conteúdo e jogando-o para fora da tela (scroll horizontal). Desligamos o filtro no header mobile (aqui ele é sólido mesmo) e cortamos overflow-x. */ #brz-hdr, #brz-hdr.scrolled, #brz-hdr.brz-hdr--solid { -webkit-backdrop-filter: none; backdrop-filter: none; } html, body { overflow-x: hidden; } #brz-nav-wrap { display: block; position: fixed; inset: 0 0 0 auto; width: min(85vw, 340px); background: #111; padding: 80px 0 32px; height: 100vh; overflow-y: auto; transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1); z-index: 9915; box-shadow: -8px 0 32px rgba(0,0,0,.5); justify-content: flex-start; } #brz-nav-wrap.is-open { transform: translateX(0); } .brz-nav { flex-direction: column; align-items: stretch; gap: 0; padding: 0 20px; } .brz-nav > .brz-nav__item { position: static; } .brz-nav__link { padding: 14px 8px; font-size: 16px; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.07); } .brz-nav__link:hover { background: rgba(255,255,255,.05); } .brz-nav__sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: transparent; max-height: 0; overflow: hidden; transition: max-height .3s ease; } .brz-nav__sub::before { display: none; } .brz-nav__item.is-open > .brz-nav__sub { max-height: 2000px; } .brz-nav__sub--lv1 .brz-nav__link { padding-left: 20px; font-size: 14.5px; } .brz-nav__sub--lv2 .brz-nav__link { padding-left: 36px; font-size: 13.5px; } .brz-nav__sub--lv3 .brz-nav__link { padding-left: 52px; font-size: 13px; } .brz-nav__sub--lv2, .brz-nav__sub--lv3 { top: auto; left: auto; right: auto; } .brz-nav__sub--lv1 .brz-nav__toggle { transform: none; } .brz-nav__sub--lv1 .brz-nav__item.is-open > .brz-nav__toggle { transform: rotate(180deg); } .brz-hdr__cta--upload { margin: 20px 20px 0; width: calc(100% - 40px); justify-content: center; } .brz-hdr__store { display: none; } /* Busca no mobile */ #brz-search-modal { padding: 90px 16px 20px; } .brz-search__form { padding-left: 14px; } .brz-search__submit { padding: 11px 16px; } } /* Foco */ .brz-nav__link:focus-visible, .brz-nav__toggle:focus-visible, .brz-hdr__cta--upload:focus-visible, .brz-hdr__icon-btn:focus-visible, .brz-cart__close:focus-visible, .brz-burger:focus-visible { outline: 2px solid var(--brz-accent, #E2533B); outline-offset: 2px; }