:root { --asta-red:#a01c24; --asta-ink:#17161a; --asta-line:#eae6df; }
.asta-custom-header-active #site-header,.asta-custom-header-active .elementor-location-header { display:none !important; }
.asta-header,.asta-header *,.asta-mobile-menu,.asta-mobile-menu * { box-sizing:border-box; }
.asta-header { position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.96); border-bottom:1px solid var(--asta-line); backdrop-filter:blur(12px); color:#3a3733; font-family:Inter,Helvetica,Arial,sans-serif; }
.asta-header--dark { background:rgba(20,19,17,.96); border-color:#2a2723; color:#fff; }
.asta-header__inner,.asta-mega__inner { max-width:1180px; margin:0 auto; padding-left:clamp(20px,4vw,48px); padding-right:clamp(20px,4vw,48px); }
.asta-header__inner { min-height:53px; display:flex; align-items:center; justify-content:flex-start; gap:32px; padding-top:16px; padding-bottom:16px; }
.asta-header__brand { flex:none; display:flex; align-items:center; }
/* Especificidade reforçada (.asta-header .asta-header__brand img, não só
   .asta-header__brand img) + width/height/max-width/max-height SEMPRE
   explícitos (nunca `auto` sozinho) — blinda o logo (SVG só com viewBox,
   sem width/height próprios) contra qualquer reset genérico de `img` vindo
   de tema/WooCommerce/Elementor (todos concorrem no máximo com uma classe +
   tag, nunca duas classes + tag). Corrige na origem, vale em qualquer
   página — não é um ajuste isolado para a Shop/archives. */
.asta-header .asta-header__brand img { display:block; width:118px; height:21px; max-width:118px; max-height:21px; object-fit:contain; }
.asta-header__nav { display:flex; flex:none; align-items:center; gap:clamp(14px,2.2vw,34px); margin-left:auto; }
.asta-header a,.asta-header button { font:inherit; }
.asta-header__link,.asta-header__mega-toggle { padding:8px 0; color:inherit; background:transparent; border:0; font-size:13.5px; line-height:1.2; cursor:pointer; text-decoration:none; transition:color .15s ease; }
.asta-header .asta-header__link { display:inline-flex; align-items:center; margin:0; padding:8px 0; color:#3a3733; font-size:13.5px !important; font-weight:400; line-height:1.2 !important; text-decoration:none; text-shadow:none; }
.asta-header--dark .asta-header__link { color:#fff; }
.asta-header .asta-header__mega-toggle { appearance:none !important; -webkit-appearance:none !important; display:inline-flex !important; align-items:center; gap:6px; margin:0; padding:8px 0; border:0 !important; border-radius:0 !important; outline:0; background:transparent !important; box-shadow:none !important; color:#3a3733 !important; font-size:13.5px; font-weight:400; line-height:1.2; text-align:start; text-decoration:none; text-shadow:none !important; }
.asta-header--dark .asta-header__mega-toggle { color:#fff !important; }
.asta-header__link:hover,.asta-header__mega-toggle:hover,.asta-header__link.is-current,.asta-header__mega-toggle.is-current,.asta-header__mega-toggle[aria-expanded="true"] { color:var(--asta-red); }
.asta-header .asta-header__mega-toggle:hover,.asta-header .asta-header__mega-toggle:focus-visible,.asta-header .asta-header__mega-toggle.is-current,.asta-header .asta-header__mega-toggle[aria-expanded="true"] { color:var(--asta-red) !important; }
.asta-header__chevron { width:auto; height:auto; color:currentColor; font-size:8px; line-height:1; transition:transform .15s ease; }
.asta-header__chevron::after { content:"▼"; }
.asta-header__mega-toggle[aria-expanded="true"] .asta-header__chevron { transform:rotate(180deg); }
.asta-header .asta-header__cta { padding:11px 18px; border-radius:10px; background:var(--asta-red); color:#fff; font-size:13px !important; font-weight:400; line-height:1.2 !important; letter-spacing:.03em; text-decoration:none; text-shadow:none; white-space:nowrap; transition:background .18s ease; }
.asta-header__cta:hover { background:#7e1319; color:#fff; }
.asta-header .asta-header__menu-toggle { display:none !important; appearance:none !important; -webkit-appearance:none !important; margin:0; padding:8px 4px; border:0 !important; border-radius:0 !important; outline:0; background:transparent !important; box-shadow:none !important; color:inherit; cursor:pointer; }
.asta-header__menu-toggle span { display:block; width:22px; height:1.5px; margin:0; background:currentColor; }
.asta-mega { position:absolute; top:100%; left:0; width:100%; background:#fff; border-top:1px solid var(--asta-line); color:var(--asta-ink); }
.asta-mega__inner { padding-top:26px; padding-bottom:30px; display:flex; flex-direction:column; gap:18px; }
#asta-mega-setores .asta-mega__inner { padding-top:28px; padding-bottom:32px; gap:20px; }
.asta-mega__eyebrow { margin:0; color:var(--asta-red); font-size:10px; line-height:1.2; letter-spacing:.16em; text-transform:uppercase; }
.asta-mega__products { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,22px); }
.asta-mega__product { display:flex; gap:14px; padding:14px; border:1px solid var(--asta-line); color:var(--asta-ink); text-decoration:none; transition:border-color .18s ease; }
.asta-mega__product:hover { border-color:var(--asta-ink); }
.asta-mega__product svg { flex:none; width:26px; height:26px; stroke:var(--asta-red); fill:none; stroke-width:1.3; }
.asta-mega__product-icon { flex:none; width:26px; height:26px; object-fit:contain; }
.asta-mega__product span,.asta-mega__sector { display:flex; flex-direction:column; gap:5px; }
.asta-mega__product strong,.asta-mega__sector > span:last-of-type { font-family:Manrope,Helvetica,Arial,sans-serif; font-size:16px; font-weight:500; line-height:1.2; }
.asta-mega small { color:#6e6a63; font-size:12.5px; line-height:1.5; }
.asta-mega__all { align-self:flex-start; color:var(--asta-red); font-size:12.5px; text-decoration:none; }
.asta-mega__sectors { display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(12px,1.6vw,22px); }
.asta-mega__sector { color:var(--asta-ink); text-decoration:none; }
.asta-mega__sector-image { display:block; aspect-ratio:16/10; background:linear-gradient(135deg,#d9d3ca,#9f978c); transition:filter .18s ease; }
.asta-mega__sector:nth-child(2n) .asta-mega__sector-image { background:linear-gradient(135deg,#c9bdb1,#786e63); }.asta-mega__sector:nth-child(3n) .asta-mega__sector-image { background:linear-gradient(135deg,#beb8ae,#5f615d); }
.asta-mega__sector:hover .asta-mega__sector-image { filter:brightness(.82); }
/* [hidden] força display:none independentemente de qualquer especificidade
   de outra regra desta folha — sem isso o `display:flex` logo abaixo
   poderia, em tese, sobrepor o atributo `hidden` (ver MDN: um elemento com
   `display` definido em CSS pode anular `hidden`). Mantém o estado
   totalmente fora do fluxo/árvore de acessibilidade sem JS ou entre o fim
   do fechamento e a próxima abertura. */
.asta-mobile-menu[hidden] { display:none !important; }
/* Motion do overlay (piloto): estado fechado por padrão — fora da tela
   (translateY), inacessível a mouse/teclado (pointer-events) e fora da
   árvore de acessibilidade (visibility), sem depender de display:none
   durante a transition. `visibility` só troca para "hidden" ao FIM da
   transição de saída (transition-delay igual à duração) — nunca
   instantaneamente; ao abrir, ambas trocam sem delay. */
.asta-mobile-menu { position:fixed; z-index:1100; inset:0; display:flex; flex-direction:column; overflow:auto; background:#141311; color:#fff; font-family:Inter,Helvetica,Arial,sans-serif; transform:translateY(-100%); visibility:hidden; pointer-events:none; transition:transform 460ms cubic-bezier(0.22,1,0.36,1), visibility 0s linear 460ms, pointer-events 0s linear 460ms; }
.asta-mobile-menu.is-open { transform:translateY(0); visibility:visible; pointer-events:auto; transition:transform 460ms cubic-bezier(0.22,1,0.36,1), visibility 0s linear 0s, pointer-events 0s linear 0s; }
/* .asta-mobile-menu__top button tem `visibility:visible !important` (regra
   pré-existente, linha abaixo) para outro propósito. Sem esta sobreposição
   mais específica, o botão "fechar" ficaria visível sozinho durante a
   pequena janela entre o painel virar `visibility:hidden` (fim da
   transition) e o JS reaplicar `hidden` — nunca chegava a acontecer antes
   porque o `display:none` do `hidden` já bastava sozinho. */
.asta-mobile-menu:not(.is-open) .asta-mobile-menu__top button { visibility:hidden !important; }
.asta-mobile-menu__top { position:relative; z-index:1; display:flex; flex:none; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid #2a2723; }.asta-mobile-menu .asta-mobile-menu__top img { display:block; width:90px; height:16px; max-width:90px; max-height:16px; object-fit:contain; }.asta-mobile-menu .asta-mobile-menu__top button { appearance:none !important; -webkit-appearance:none !important; display:inline-flex !important; visibility:visible !important; opacity:1 !important; position:relative; z-index:2; flex:0 0 40px; align-items:center; justify-content:center; min-width:40px; min-height:40px; margin:0; padding:8px !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; color:#fff !important; font-size:20px !important; font-weight:400; line-height:1 !important; text-shadow:none !important; cursor:pointer; }
.asta-mobile-menu__nav { flex:1; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:0 22px; }.asta-mobile-menu__nav a { color:#fff; font-family:Manrope,Helvetica,Arial,sans-serif; font-size:36px; font-weight:600; line-height:1.25; letter-spacing:-.03em; text-decoration:none; }.asta-mobile-menu__nav a[aria-current="page"] { color:#d9a9ac; }
.asta-mobile-menu__footer { display:flex; flex-direction:column; gap:14px; padding:22px; border-top:1px solid #2a2723; }.asta-mobile-menu__footer a { display:flex; justify-content:space-between; padding:17px 22px; border-radius:8px; background:var(--asta-red); color:#fff; font-size:14.5px; text-decoration:none; }.asta-mobile-menu__footer span { color:#57524a; font-size:10px; letter-spacing:.1em; }
/* Acabamento interno dos itens (nav + rodapé): entram com pequeno
   translateY + leve fade DEPOIS que o painel começa a abrir
   (--asta-mobile-item-delay, calculado em JS por item — stagger curto).
   Sem a classe .is-open não há `transition`, então o fechamento apenas
   volta ao estado inicial sem animação própria — os itens acompanham o
   painel em vez de "viajarem" sozinhos enquanto ele já saiu. */
.asta-mobile-menu__nav a,.asta-mobile-menu__footer > * { transform:translateY(-12px); opacity:.6; }
.asta-mobile-menu.is-open .asta-mobile-menu__nav a,.asta-mobile-menu.is-open .asta-mobile-menu__footer > * { transform:translateY(0); opacity:1; transition:transform 380ms cubic-bezier(0.22,1,0.36,1), opacity 380ms cubic-bezier(0.22,1,0.36,1); transition-delay:var(--asta-mobile-item-delay, 0ms); }
.asta-header :focus-visible,.asta-mobile-menu :focus-visible { outline:2px solid var(--asta-red) !important; outline-offset:4px; }
body.asta-menu-open { overflow:hidden; }
@media (prefers-reduced-motion: reduce) {
	.asta-mobile-menu,.asta-mobile-menu.is-open,.asta-mobile-menu__nav a,.asta-mobile-menu__footer > *,.asta-mobile-menu.is-open .asta-mobile-menu__nav a,.asta-mobile-menu.is-open .asta-mobile-menu__footer > * {
		transition-duration:0.01ms !important;
		transition-delay:0s !important;
	}
}
@media (min-width: 768px) { .asta-header__nav { display:flex !important; }.asta-header .asta-header__menu-toggle { display:none !important; }.asta-mega[hidden] { display:none !important; } }
@media (max-width: 767px) { .asta-header__inner { min-height:41px; display:grid; grid-template-columns:44px 1fr 44px; gap:0; padding:12px 14px; }.asta-header__brand { grid-column:2; justify-content:center; }.asta-header .asta-header__brand img { width:96px; height:17px; max-width:96px; max-height:17px; }.asta-header__nav { display:none; }.asta-header .asta-header__menu-toggle { display:flex !important; flex-direction:column; gap:5px; align-items:center; justify-content:center; grid-column:3; justify-self:end; }.asta-header--dark .asta-header__menu-toggle { color:#fff; }.asta-mega { display:none; } }