.
------------------------------------------------------------ */
.ob-marq{display:flex;overflow:hidden;padding:16px 0;background:var(--ob-ink);}
.ob-marq-track{
display:flex;flex:0 0 auto;gap:44px;padding-right:44px;
animation:ob-slide 34s linear infinite;
font-family:var(--ob-display);
font-variation-settings:"wdth" 105,"wght" 400;
font-size:clamp(15px,2vw,26px);
text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
color:var(--ob-paper);
}
.ob-marq:hover .ob-marq-track{animation-play-state:paused;}
.ob-marq i{color:var(--ob-accent);font-style:normal;}
@keyframes ob-slide{to{transform:translateX(-100%)}}
/* ------------------------------------------------------------
7. GRADE DE PRODUTOS (WooCommerce)
ALB: elemento "Product Grid" (av_productgrid), 3 colunas,
Custom CSS Class = ob-grid
------------------------------------------------------------ */
#top .ob-grid .products{
display:grid;grid-template-columns:repeat(3,1fr);gap:0;
border-top:var(--ob-rule);border-bottom:var(--ob-rule);
}
#top .ob-grid .products li.product{
width:100% !important;margin:0 !important;float:none !important;
border-left:var(--ob-rule);border-bottom:var(--ob-rule);
padding:clamp(18px,2vw,26px);
transition:background .45s var(--ob-ease);
display:flex;flex-direction:column;
}
#top .ob-grid .products li.product:nth-child(3n+1){border-left:0;}
#top .ob-grid .products li.product:nth-last-child(-n+3){border-bottom:0;}
#top .ob-grid .products li.product:hover{background:var(--ob-paper);}
/* moldura da imagem */
#top .ob-grid .thumbnail_container{
position:relative;aspect-ratio:4/5;overflow:hidden;margin-bottom:18px;
background:var(--ob-bone-2);
}
#top .ob-grid .thumbnail_container img{
width:100%;height:100%;object-fit:cover;
transition:opacity .6s var(--ob-ease),transform .9s var(--ob-ease);
}
/* troca para a 2ª imagem da galeria no hover.
Requer o hook do functions.php que imprime a segunda imagem
como .ob-img-alt dentro do thumbnail_container. */
#top .ob-grid .ob-img-alt{
position:absolute;inset:0;opacity:0;transform:scale(1.04);
}
#top .ob-grid li.product:hover .ob-img-alt{opacity:1;transform:scale(1);}
#top .ob-grid li.product:hover .attachment-shop_catalog{opacity:0;}
/* o Enfold desenha um overlay escuro no hover da imagem — desligar */
#top .ob-grid .image-overlay{display:none !important;}
/* título, preço, badge */
#top .ob-grid .product h2,
#top .ob-grid .woocommerce-loop-product__title{
font-family:var(--ob-display);
font-variation-settings:"wdth" 95,"wght" 600;
font-size:clamp(15px,1.3vw,19px);
text-transform:uppercase;letter-spacing:0;margin:0 0 4px;
}
#top .ob-grid .price,
#top .ob-grid .price .amount{
font-family:var(--ob-mono);font-size:14px;color:var(--ob-ink);
}
#top .ob-grid .price del .amount{color:var(--ob-ink-soft);font-size:12px;}
#top .ob-grid span.onsale,
#top .ob-grid .ob-badge{
position:absolute;top:0;left:0;z-index:3;
background:var(--ob-accent);color:var(--ob-paper);
font-family:var(--ob-mono);font-size:10px;letter-spacing:.1em;
text-transform:uppercase;padding:4px 8px;
border-radius:0;margin:0;min-width:0;line-height:1.4;
}
/* quick-add por tamanho (variações) — sobe no hover.
Markup injetado pelo hook ob_quick_add() do functions.php. */
#top .ob-grid .ob-qa{
position:absolute;left:0;right:0;bottom:0;z-index:4;
display:flex;align-items:center;gap:6px;padding:9px 10px;
background:rgba(235,231,222,.94);backdrop-filter:blur(6px);
border-top:var(--ob-rule);
transform:translateY(100%);opacity:0;
transition:transform .45s var(--ob-ease),opacity .3s;
}
#top .ob-grid li.product:hover .ob-qa,
#top .ob-grid li.product:focus-within .ob-qa{transform:translateY(0);opacity:1;}
#top .ob-grid .ob-qa button{
font-family:var(--ob-mono);font-size:11px;line-height:1;
padding:6px 8px;border:1px solid rgba(23,22,15,.3);
background:none;color:var(--ob-ink);cursor:pointer;
transition:all .22s var(--ob-ease);
}
#top .ob-grid .ob-qa button:hover{
background:var(--ob-ink);color:var(--ob-paper);border-color:var(--ob-ink);
}
#top .ob-grid .ob-qa button[disabled]{
opacity:.28;cursor:not-allowed;text-decoration:line-through;
}
/* o botão padrão "Adicionar ao carrinho" do Woo sai da grade —
quem adiciona é o quick-add */
#top .ob-grid .avia_cart_buttons,
#top .ob-grid .button.add_to_cart_button{display:none;}
/* ------------------------------------------------------------
7b. MONTE SEU KIT
ALB: Code Block dentro de um Grid Row de 2 colunas.
Os kits são produtos VARIÁVEIS com o atributo "Combinação"
(10 variações no kit de 3, 6 no kit de 2 — uma para cada JPG
já existente). O montador só resolve qual variation_id enviar.
------------------------------------------------------------ */
.ob-kit-tabs{display:flex;border:1px solid var(--ob-ink);width:max-content;margin-bottom:26px;}
.ob-kit-tabs button{font-family:var(--ob-mono);font-size:11px;letter-spacing:.1em;
text-transform:uppercase;padding:10px 18px;background:none;border:0;cursor:pointer;
transition:all .3s var(--ob-ease);}
.ob-kit-tabs button[aria-pressed="true"]{background:var(--ob-ink);color:var(--ob-paper);}
.ob-kit-pick{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px;}
.ob-kit-pick button{display:flex;align-items:center;gap:9px;padding:7px 14px 7px 8px;
border:1px solid rgba(23,22,15,.25);background:none;cursor:pointer;
font-family:var(--ob-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
transition:all .3s var(--ob-ease);}
.ob-kit-pick button:hover{border-color:var(--ob-ink);background:#fff;}
.ob-kit-pick button i{width:15px;height:15px;display:block;border:1px solid rgba(23,22,15,.3);}
.ob-slots{display:grid;gap:12px;}
.ob-slot{aspect-ratio:1;background:var(--ob-paper);border:1px dashed rgba(23,22,15,.28);
display:grid;place-items:center;position:relative;overflow:hidden;}
.ob-slot.full{border-style:solid;border-color:rgba(23,22,15,.18);background:#fff;}
.ob-slot img{width:100%;height:100%;object-fit:contain;padding:8%;}
/* ------------------------------------------------------------
8. BOTÕES
ALB: elemento Button com Custom CSS Class = ob-btn
------------------------------------------------------------ */
#top .ob-btn .avia-button{
background:var(--ob-ink) !important;
color:var(--ob-paper) !important;
border:0;border-radius:0;
font-family:var(--ob-display);
font-variation-settings:"wdth" 88,"wght" 500;
font-size:12px;letter-spacing:.16em;text-transform:uppercase;
padding:14px 24px;position:relative;overflow:hidden;
transition:color .3s;
}
#top .ob-btn .avia-button::before{
content:"";position:absolute;inset:0;background:var(--ob-accent);
transform:translateY(101%);transition:transform .45s var(--ob-ease);z-index:-1;
}
#top .ob-btn .avia-button:hover::before{transform:translateY(0);}
#top .ob-btn .avia-button .avia_button_background{display:none;}
/* ------------------------------------------------------------
9. PÁGINA DE PRODUTO
------------------------------------------------------------ */
#top.single-product .product_title{
font-family:var(--ob-display);
font-variation-settings:"wdth" 112,"wght" 700;
text-transform:uppercase;letter-spacing:-.01em;
}
#top.single-product .summary .price .amount{
font-family:var(--ob-mono);font-size:20px;
}
#top.single-product .variations select{
border:1px solid rgba(23,22,15,.3);border-radius:0;
font-family:var(--ob-mono);font-size:12px;background:transparent;
}
#top.single-product .single_add_to_cart_button{
background:var(--ob-ink) !important;color:var(--ob-paper) !important;
border-radius:0;border:0;width:100%;padding:18px;
font-family:var(--ob-display);
font-variation-settings:"wdth" 88,"wght" 500;
font-size:12px;letter-spacing:.16em;text-transform:uppercase;
}
#top.single-product .single_add_to_cart_button:hover{background:var(--ob-accent) !important;}
/* acordeão de ficha técnica nas abas do produto */
#top.single-product .woocommerce-tabs ul.tabs li a{
font-family:var(--ob-display);
font-variation-settings:"wdth" 88,"wght" 500;
font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
/* ------------------------------------------------------------
10. BARRA DE FRETE GRÁTIS (mini-cart)
------------------------------------------------------------ */
.ob-freebar{height:3px;background:var(--ob-bone-3);margin:14px 0 6px;overflow:hidden;}
.ob-freebar i{display:block;height:100%;background:var(--ob-accent);width:0;
transition:width .6s var(--ob-ease);}
/* ------------------------------------------------------------
11. RODAPÉ — marca d'água cortada
ALB: Code Block no último widget area do footer
------------------------------------------------------------ */
.ob-ftr-mark{
font-family:var(--ob-display);
font-variation-settings:"wdth" 125,"wght" 800;
font-size:clamp(60px,19vw,300px);line-height:.72;
text-transform:lowercase;letter-spacing:-.045em;
color:var(--ob-ink);opacity:.1;
text-align:center;user-select:none;pointer-events:none;
margin:0 0 -.16em;overflow:hidden;
}
/* ------------------------------------------------------------
12. REVEAL NO SCROLL
Preferir o campo "Animation" do ALB quando existir. Esta classe
é para blocos de Code Block, que não têm o campo.
------------------------------------------------------------ */
.ob-rise{opacity:0;transform:translateY(26px);
transition:opacity .9s var(--ob-ease),transform .9s var(--ob-ease);}
.ob-rise.ob-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
.ob-rise{opacity:1;transform:none;}
.ob-marq-track{animation:none;}
}
/* ------------------------------------------------------------
13. RESPONSIVO
------------------------------------------------------------ */
@media (max-width:1080px){
#top .ob-grid .products{grid-template-columns:repeat(2,1fr);}
#top .ob-grid .products li.product:nth-child(3n+1){border-left:var(--ob-rule);}
#top .ob-grid .products li.product:nth-child(2n+1){border-left:0;}
#top .ob-grid .products li.product:nth-last-child(-n+3){border-bottom:var(--ob-rule);}
}
@media (max-width:767px){
#top .ob-grid .products{grid-template-columns:1fr;}
#top .ob-grid .products li.product{border-left:0 !important;}
.ob-spec .flex_cell{border-left:0;border-bottom:var(--ob-rule);padding-left:0 !important;}
/* no toque não existe hover: o quick-add fica sempre visível */
#top .ob-grid .ob-qa{position:static;transform:none;opacity:1;
background:none;backdrop-filter:none;border-top:0;padding:10px 0 0;}
}
/* ==================================================================
14. BARRA DE AVISO (impressa por ob_barra_aviso, em wp_body_open)
================================================================== */
.ob-announce{background:var(--ob-ink);color:var(--ob-paper);height:36px;
display:flex;align-items:center;justify-content:center;overflow:hidden;}
.ob-announce ul{list-style:none;margin:0;padding:0;height:36px;
animation:ob-roll 12s steps(1) infinite;}
.ob-announce li{height:36px;line-height:36px;text-align:center;
font-family:var(--ob-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;}
.ob-announce li b,.ob-announce li .amount{color:var(--ob-accent);font-weight:400;}
@keyframes ob-roll{0%,30%{transform:translateY(0)}33%,63%{transform:translateY(-36px)}
66%,96%{transform:translateY(-72px)}100%{transform:translateY(0)}}
/* ==================================================================
15. SACOLA LATERAL (impressa por ob_drawer, em wp_footer)
================================================================== */
.ob-scrim{position:fixed;inset:0;z-index:9000;background:rgba(23,22,15,.42);
opacity:0;visibility:hidden;backdrop-filter:blur(2px);
transition:opacity .4s var(--ob-ease),visibility .4s;}
.ob-scrim.on{opacity:1;visibility:visible;}
.ob-drawer{position:fixed;top:0;right:0;bottom:0;z-index:9010;width:min(430px,100%);
background:var(--ob-bone);border-left:var(--ob-rule);
display:flex;flex-direction:column;
transform:translateX(101%);transition:transform .55s var(--ob-ease);}
.ob-drawer.on{transform:translateX(0);}
.ob-drw-top{display:flex;align-items:center;justify-content:space-between;
padding:22px 24px;border-bottom:var(--ob-rule);}
.ob-drw-body{flex:1;overflow-y:auto;padding:8px 24px;}
.ob-drw-empty{padding:60px 0;text-align:center;color:var(--ob-ink-soft);}
.ob-nav-t{font-family:var(--ob-display);font-variation-settings:"wdth" 88,"wght" 500;
font-size:12px;letter-spacing:.16em;text-transform:uppercase;}
.ob-price{font-family:var(--ob-mono);font-size:14px;}
.ob-li{display:grid;grid-template-columns:62px 1fr auto;gap:14px;padding:18px 0;
border-bottom:var(--ob-rule);align-items:start;}
.ob-li .thumb{background:#fff;aspect-ratio:1;overflow:hidden;}
.ob-li .thumb img{width:100%;height:100%;object-fit:contain;padding:6%;}
.ob-li h6{margin:0 0 3px;font-family:var(--ob-display);
font-variation-settings:"wdth" 92,"wght" 600;font-size:13px;text-transform:uppercase;}
.ob-li .rm{font-family:var(--ob-mono);font-size:10px;letter-spacing:.08em;
text-transform:uppercase;color:var(--ob-ink-soft);background:none;border:0;
padding:0;cursor:pointer;}
.ob-li .rm:hover{color:var(--ob-accent);}
.ob-drw-foot{border-top:var(--ob-rule);padding:20px 24px 24px;}
.ob-drw-row{display:flex;justify-content:space-between;margin-bottom:8px;}
.ob-drw-row.tot{font-family:var(--ob-display);
font-variation-settings:"wdth" 95,"wght" 700;font-size:19px;
text-transform:uppercase;margin:14px 0 16px;}
.ob-drw-btn{display:block;width:100%;background:var(--ob-ink);color:var(--ob-paper);
padding:16px;text-align:center;position:relative;overflow:hidden;}
.ob-drw-btn span{position:relative;z-index:2;}
.ob-drw-btn::before{content:"";position:absolute;inset:0;background:var(--ob-accent);
transform:translateY(101%);transition:transform .45s var(--ob-ease);}
.ob-drw-btn:hover::before{transform:translateY(0);}
/* ==================================================================
16. MONTE SEU KIT — slots e preview
================================================================== */
.ob-slot .chip{width:38%;aspect-ratio:1;display:block;margin-bottom:8px;
border:1px solid rgba(23,22,15,.25);}
.ob-slot.full{display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:2px;}
.ob-slot .x{position:absolute;top:4px;right:7px;font-family:var(--ob-mono);
font-size:11px;color:var(--ob-ink-soft);background:none;border:0;cursor:pointer;z-index:2;}
.ob-slot .x:hover{color:var(--ob-accent);}
.ob-kit-preview{margin:18px 0;background:#fff;}
.ob-kit-preview:empty{display:none;}
.ob-kit-preview img{width:100%;height:auto;}
.ob-kit-price{display:flex;align-items:baseline;gap:14px;margin-bottom:18px;}
.ob-kit-total{font-family:var(--ob-display);
font-variation-settings:"wdth" 110,"wght" 700;font-size:clamp(26px,3vw,40px);}
.ob-kit-total .amount{font-family:inherit;font-size:inherit;}
.ob-kit-unit{font-family:var(--ob-mono);font-size:10px;color:var(--ob-accent);
letter-spacing:.06em;text-transform:uppercase;}
.ob-btn-solid{display:inline-flex;align-items:center;gap:12px;
background:var(--ob-ink);color:var(--ob-paper);border:0;cursor:pointer;
padding:14px 24px;position:relative;overflow:hidden;
font-family:var(--ob-display);font-variation-settings:"wdth" 88,"wght" 500;
font-size:12px;letter-spacing:.16em;text-transform:uppercase;}
.ob-btn-solid span{position:relative;z-index:2;}
.ob-btn-solid::before{content:"";position:absolute;inset:0;background:var(--ob-accent);
transform:translateY(101%);transition:transform .45s var(--ob-ease);}
.ob-btn-solid:hover:not([disabled])::before{transform:translateY(0);}
.ob-btn-solid[disabled]{opacity:.35;cursor:not-allowed;}
.ob-kit-hint{display:block;margin-top:12px;}
/* ==================================================================
17. HEADER COMPACTO
================================================================== */
#top #header.ob-small{background:rgba(235,231,222,.93);backdrop-filter:blur(10px);}
/* ==================================================================
18. RODAPÉ
==================================================================
O conteúdo vem de Aparência > Widgets (Footer - Column 1 a 4), não
do Layout Builder — por isso o rodapé continuava com os widgets
padrão do WordPress (Páginas, Categorias, Arquivo) mesmo com a home
toda montada. O HTML de cada coluna está em wordpress/rodape.html.
Aqui fica só a aparência, e ela é escrita para funcionar com
QUALQUER widget: se um dia entrar um widget de verdade do
WooCommerce nessas colunas, ele já nasce na paleta certa.
================================================================== */
#top #footer{
/* a marca d'água precisa saber quanto vale este padding para se
encaixar na base; variável para os dois nunca saírem de sincronia */
--ob-ftr-pad:clamp(70px,9vw,150px);
/* Fundo OSSO, não tinta. A seção da newsletter, logo acima, é escura
— dois blocos escuros seguidos viram um só e a página perde o
fecho. No protótipo o rodapé nem declara fundo: herda o da página,
e é o contraste com a newsletter que marca o fim do conteúdo. */
background:var(--ob-bone);
color:var(--ob-ink);
border-top:0;
position:relative;overflow:hidden;
padding:clamp(48px,6vw,86px) 0 var(--ob-ftr-pad);
}
/* O Enfold deixa `.widget` e `.flex_column` com position:relative, e
qualquer um dos dois vira o bloco de referência da marca d'água —
que então ficava com a largura de UMA coluna (239px) em vez da
página inteira. Precisa neutralizar OS DOIS: zerar só um não
adianta, porque o outro assume o posto. */
#top #footer .widget{margin:0;padding:0;position:static;}
#top #footer .flex_column{position:static;}
#top #footer .widgettitle,
#top #footer h5{
margin:0 0 16px;
font-family:var(--ob-mono);font-size:11px;font-weight:400;
letter-spacing:.14em;text-transform:uppercase;
color:var(--ob-ink);
}
#top #footer p{margin:0;max-width:34ch;line-height:1.6;color:var(--ob-ink-soft);}
#top #footer ul{list-style:none;margin:0;padding:0;}
#top #footer li{margin:0;padding:0;border:0;}
#top #footer li + li{margin-top:9px;}
#top #footer a{
color:var(--ob-ink);text-decoration:none;
transition:color .25s;
}
#top #footer a:hover{color:var(--ob-accent);}
/* Marca d'água cortada na base. Mora dentro do widget da coluna 4, mas
com as regras acima o bloco de referência passa a ser o `.container`
do rodapé — então ela atravessa as quatro colunas.
O `bottom` negativo desce a palavra até passar da borda inferior do
rodapé; quem faz o corte é o overflow:hidden do #footer. */
#top #footer .ob-ftr-mark{
position:absolute;left:0;right:0;
bottom:calc(-1 * var(--ob-ftr-pad) - .16em);
z-index:0;margin:0;pointer-events:none;
color:var(--ob-ink);opacity:.1;
}
/* ---- socket: a linha do copyright ---- */
#top #socket{
background:var(--ob-bone);color:var(--ob-ink-soft);
border-top:1px solid rgba(23,22,15,.16);
}
#top #socket .copyright{
font-family:var(--ob-mono);font-size:10px;letter-spacing:.1em;
text-transform:uppercase;
}
#top #socket a{color:var(--ob-ink-soft);text-decoration:none;}
#top #socket a:hover{color:var(--ob-accent);}
#top #socket .ob-socket{
display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;
}
/* O botão "voltar ao topo" vinha branco sobre o osso e sumia. O tema o
pinta junto com o na mesma regra:
`html, #scroll-top-link, #av-cookie-consent-badge{background:#fff}` */
#top #scroll-top-link{
background:var(--ob-ink);color:var(--ob-paper);
border:0;border-radius:0;
}
#top #scroll-top-link:hover{background:var(--ob-accent);color:var(--ob-paper);}
/* ==================================================================
19. FILTROS DA LOJA (sidebar)
==================================================================
Igual ao rodapé: o conteúdo vem de Aparência > Widgets, não do
Layout Builder. O passo a passo está em wordpress/filtros-loja.md.
Estas regras valem para os widgets NATIVOS do WooCommerce
(widget_price_filter, widget_layered_nav, widget_layered_nav_filters).
Escritas contra o markup do próprio WooCommerce, então funcionam
assim que os widgets forem adicionados — não dependem de HTML
colado à mão.
================================================================== */
#top .sidebar .widget{margin:0 0 34px;padding:0;border:0;}
#top .sidebar .widgettitle{
margin:0 0 14px;padding:0 0 10px;
border-bottom:1px solid rgba(23,22,15,.16);
font-family:var(--ob-mono);font-size:11px;font-weight:400;
letter-spacing:.14em;text-transform:uppercase;
color:var(--ob-ink);text-align:left;
}
#top .sidebar .widget ul{list-style:none;margin:0;padding:0;}
#top .sidebar .widget li{margin:0;padding:0;border:0;text-align:left;}
#top .sidebar .widget li + li{margin-top:8px;}
/* ---- filtro por atributo: tamanho, cor ---- */
#top .widget_layered_nav li{display:flex;align-items:baseline;gap:8px;}
#top .widget_layered_nav li a{
color:var(--ob-ink);text-decoration:none;
font-family:var(--ob-mono);font-size:12px;letter-spacing:.06em;
transition:color .25s;
}
#top .widget_layered_nav li a:hover{color:var(--ob-accent);}
#top .widget_layered_nav li.chosen > a{color:var(--ob-accent);}
#top .widget_layered_nav li.chosen > a::before{content:"×";margin-right:6px;}
#top .widget_layered_nav .count{
font-family:var(--ob-mono);font-size:10px;color:var(--ob-ink-soft);
}
/* ---- filtros ativos: viram etiquetas removíveis ---- */
#top .widget_layered_nav_filters li{display:inline-block;margin:0 6px 6px 0 !important;}
#top .widget_layered_nav_filters li a{
display:inline-block;padding:5px 10px;border:1px solid var(--ob-ink);
font-family:var(--ob-mono);font-size:10px;letter-spacing:.08em;
text-transform:uppercase;color:var(--ob-ink);text-decoration:none;
transition:all .25s;
}
#top .widget_layered_nav_filters li a::before{content:"× ";}
#top .widget_layered_nav_filters li a:hover{background:var(--ob-ink);color:var(--ob-paper);}
/* ---- filtro de preço ----
O slider do WooCommerce vem com cantos arredondados e a cor do tema.
O `price_label` recebe `order:1` e largura cheia para ficar ACIMA do
botão: no layout padrão ele fica ao lado e quebra em coluna estreita. */
#top .widget_price_filter .price_slider{
height:3px;background:var(--ob-bone-3);border:0;border-radius:0;
margin:14px 0 22px;position:relative;
}
#top .widget_price_filter .ui-slider-range{
background:var(--ob-ink);height:3px;border-radius:0;position:absolute;top:0;
}
#top .widget_price_filter .ui-slider-handle{
width:13px;height:13px;background:var(--ob-accent);
border:0;border-radius:0;top:-5px;margin-left:-6px;
cursor:grab;position:absolute;
}
#top .widget_price_filter .price_slider_amount{
display:flex;align-items:center;justify-content:space-between;
gap:12px;flex-wrap:wrap;
}
#top .widget_price_filter .price_label{
order:1;flex:1 1 100%;margin-bottom:10px;
font-family:var(--ob-mono);font-size:11px;color:var(--ob-ink-soft);
}
#top .widget_price_filter .price_slider_amount .button{
order:2;background:var(--ob-ink);color:var(--ob-paper);
border:0;border-radius:0;cursor:pointer;padding:11px 20px;
font-family:var(--ob-display);font-variation-settings:"wdth" 88,"wght" 500;
font-size:11px;letter-spacing:.14em;text-transform:uppercase;
transition:background .3s;
}
#top .widget_price_filter .price_slider_amount .button:hover{background:var(--ob-accent);}
@media (max-width:767px){
#top #footer{padding-bottom:clamp(50px,16vw,90px);}
#top #footer .flex_column + .flex_column{margin-top:34px;}
}
/* ==================================================================
19. BLOCOS DA HOME
Cada bloco abaixo corresponde a um Code Block do ALB.
O HTML de cada um está em wordpress/blocos-alb.md
================================================================== */
/* --- hero --------------------------------------------------------- */
#top .ob-hero-h1{margin:0;font-family:var(--ob-display);
font-variation-settings:"wdth" 125,"wght" 800;
font-size:clamp(52px,10.6vw,158px);line-height:.84;
letter-spacing:-.015em;text-transform:uppercase;}
#top .ob-hero-h1 span{display:block;}
#top .ob-hero-h1 .thin{font-variation-settings:"wdth" 125,"wght" 200;color:var(--ob-ink-soft);}
#top .ob-hero-h1 em{font-family:var(--ob-serif);font-style:italic;font-weight:300;
text-transform:none;letter-spacing:-.02em;color:var(--ob-accent);}
.ob-hero-sub{max-width:40ch;margin:clamp(24px,3vw,42px) 0 0;}
.ob-hero-sub p{margin:0 0 22px;color:var(--ob-ink-2);}
/* etiqueta sobre a foto do hero */
.ob-hero-tag{position:absolute;left:-14px;bottom:26px;z-index:3;
background:var(--ob-bone);padding:10px 14px;border-left:2px solid var(--ob-accent);}
/* --- categorias --------------------------------------------------- */
.ob-cats{display:grid;grid-template-columns:repeat(3,1fr);}
.ob-cat{position:relative;overflow:hidden;background:#fff;
border-left:var(--ob-rule);min-height:clamp(260px,30vw,400px);
padding:clamp(22px,2.6vw,36px);
display:flex;flex-direction:column;justify-content:space-between;}
.ob-cat:first-child{border-left:0;}
/* object-position: sem isto o padrao e 50% 50%, e como a foto e retrato
(864x1152) num tile quase quadrado, o `cover` corta topo E base em
partes iguais — comendo a cabeca do modelo. Ancorar no topo mostra
rosto e tronco, que e o que vende roupa. */
.ob-cat img{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:50% 0%;
opacity:.9;transition:transform .9s var(--ob-ease);}
/* o 3o tile e packshot em fundo branco, nao foto de pessoa:
`cover` cortaria as camisetas, entao ali e `contain` */
.ob-cat:nth-child(3) img{object-fit:contain;background:#fff;padding:4%;}
.ob-cat:hover img{transform:scale(1.045);}
.ob-cat .num,.ob-cat .txt{position:relative;z-index:2;background:var(--ob-bone);}
.ob-cat .num{padding:5px 9px;align-self:flex-start;}
.ob-cat .txt{padding:14px 16px;margin:0 -6px -6px;}
.ob-cat h3{margin:0;font-family:var(--ob-display);
font-variation-settings:"wdth" 90,"wght" 700;
font-size:clamp(19px,2.2vw,29px);text-transform:uppercase;line-height:1;}
/* A lista de peças do bloco feminino ("Camisetas · Regatas · Calcinhas
· Meias") pedia 333px numa coluna de 310 e caía para duas linhas,
enquanto as outras duas ficavam em uma. Não é caso de `nowrap`: se
um dia a lista crescer, `nowrap` a joga para fora do bloco em vez de
quebrar. Corpo 10px e entreletras .1em dão 287px, com 23px de folga,
e mantêm os três blocos com a mesma cara. */
.ob-cat .go{display:block;margin-top:7px;font-size:10px;letter-spacing:.1em;}
/* --- cabeçalho de seção ------------------------------------------- */
.ob-sec-head{display:flex;align-items:flex-end;justify-content:space-between;
gap:24px;flex-wrap:wrap;}
.ob-sec-head h2{margin:0;font-size:clamp(32px,5.2vw,80px);
font-variation-settings:"wdth" 118,"wght" 700;}
.ob-sec-head h2 em{font-family:var(--ob-serif);font-style:italic;font-weight:300;
text-transform:none;letter-spacing:-.02em;}
.ob-sec-head .aside{max-width:38ch;color:var(--ob-ink-soft);margin:0;}
/* --- manifesto ---------------------------------------------------- */
.ob-quote{margin:0;font-family:var(--ob-serif);font-weight:200;
font-size:clamp(24px,3.5vw,50px);line-height:1.14;letter-spacing:-.025em;}
.ob-quote em{font-style:italic;color:var(--ob-accent);}
.ob-pillar{border-top:2px solid var(--ob-ink);padding-top:16px;}
.ob-pillar .big{font-family:var(--ob-display);
font-variation-settings:"wdth" 125,"wght" 300;
font-size:clamp(40px,5vw,72px);line-height:.9;display:block;margin-bottom:10px;}
.ob-pillar h4{margin:0 0 8px;font-family:var(--ob-display);
font-variation-settings:"wdth" 88,"wght" 600;font-size:15px;
text-transform:uppercase;letter-spacing:.06em;}
.ob-pillar p{margin:0;color:var(--ob-ink-soft);}
/* Abaixo de 1280px os três blocos não dão largura útil suficiente para
a lista feminina em uma linha: em 1200 sobram 278px de área de texto
para 287px de conteúdo, e em 1024 sobram 229. Reduzir mais a fonte
até caber levaria a 8px, ilegível — então a correção é pela largura,
e não pela tipografia: duas colunas, com o terceiro bloco ocupando a
linha inteira. Medido: 1280 e acima ficam com três colunas e 14px de
folga; daí para baixo, duas. */
@media (min-width:768px) and (max-width:1279px){
.ob-cats{grid-template-columns:repeat(2,1fr);}
.ob-cat:nth-child(3){grid-column:1 / -1;border-left:0;border-top:var(--ob-rule);}
}
@media (max-width:767px){
.ob-cats{grid-template-columns:1fr;}
.ob-cat{border-left:0;border-bottom:var(--ob-rule);}
.ob-hero-tag{position:static;margin-top:12px;}
}
/* ==================================================================
20. SELO UNISSEX
Impresso por onebasik_selo_unissex() nos produtos com a tag `unissex`.
Explica por que a mesma peça aparece em Masculino e em Feminino.
================================================================== */
#top .ob-grid .ob-uni{
display:inline-block;margin-left:7px;vertical-align:middle;
font-family:var(--ob-mono);font-size:9px;letter-spacing:.1em;
text-transform:uppercase;color:var(--ob-ink-soft);
border:1px solid rgba(23,22,15,.3);padding:2px 6px;
}
/* ==================================================================
21. TAB SECTION DE GÊNERO (Enfold nativo)
Um Product Grid por aba, filtrado por categoria — sem código.
================================================================== */
#top .ob-tabs .av-section-tab-title{
font-family:var(--ob-display);font-variation-settings:"wdth" 88,"wght" 500;
font-size:11px;letter-spacing:.14em;text-transform:uppercase;
border-radius:0;
}
#top .ob-tabs .av-active-tab-title{background:var(--ob-ink);color:var(--ob-paper);}
/* ==================================================================
22. CHEGANDO NA GAVETA
Grid Row de 3 colunas, classe ob-soon, um Text Block por célula.
================================================================== */
.ob-soon .flex_cell{
border:1px dashed rgba(23,22,15,.3);
padding:clamp(20px,2.4vw,32px) !important;
background:repeating-linear-gradient(45deg,rgba(226,221,209,.5) 0 14px,transparent 14px 28px);
}
.ob-soon h4{margin:0 0 8px;font-family:var(--ob-display);
font-variation-settings:"wdth" 92,"wght" 600;
font-size:clamp(17px,1.6vw,22px);text-transform:uppercase;}
.ob-soon p{margin:0 0 14px;color:var(--ob-ink-soft);}
.ob-soon .avise{border-top:1px solid rgba(23,22,15,.2);padding-top:14px;
display:block;font-family:var(--ob-mono);font-size:11px;letter-spacing:.08em;
text-transform:uppercase;color:var(--ob-accent);}
/* ==================================================================
23. TABELA DE MEDIDAS
================================================================== */
.ob-med{width:100%;border-collapse:collapse;}
.ob-med th,.ob-med td{border:var(--ob-rule);padding:12px 14px;text-align:left;
font-family:var(--ob-mono);font-size:12px;}
.ob-med th{background:var(--ob-ink);color:var(--ob-paper);
font-size:10px;letter-spacing:.1em;text-transform:uppercase;}
.ob-med td:first-child{font-family:var(--ob-display);
font-variation-settings:"wdth" 95,"wght" 700;font-size:15px;}
.ob-med-wrap{overflow-x:auto;}
/* aviso enquanto os números não vierem do fornecedor */
.ob-pend{border:1px dashed var(--ob-accent);padding:12px 16px;max-width:46ch;}
.ob-pend b{display:block;margin-bottom:4px;font-family:var(--ob-mono);
font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ob-accent);}
/* variante vazada do botão — usada no par Masculino/Feminino do hero */
.ob-btn-solid.ghost{background:none;color:var(--ob-ink);
border:1px solid rgba(23,22,15,.3);}
.ob-btn-solid.ghost:hover{color:var(--ob-paper);border-color:var(--ob-ink);}
/* ==================================================================
24. CLASSES USADAS NOS CODE BLOCKS DA HOME
(ver wordpress/home-alb-shortcodes.txt)
Os Code Blocks entregam divs simples, então estas regras não
dependem da marcação interna do Enfold — o que as torna imunes a
mudança de versão do tema.
================================================================== */
/* --- ficha técnica -------------------------------------------------- */
.ob-spec-grid{display:grid;grid-template-columns:repeat(4,1fr);
border-top:var(--ob-rule);}
.ob-spec-grid > div{padding:18px 0 22px 16px;border-left:var(--ob-rule);}
.ob-spec-grid > div:first-child{border-left:0;padding-left:0;}
.ob-spec-grid strong{display:block;margin-top:6px;font-weight:400;
font-family:var(--ob-display);font-variation-settings:"wdth" 88,"wght" 500;
font-size:clamp(13px,1.15vw,16px);text-transform:uppercase;letter-spacing:.02em;}
/* --- fotos do hero: coladas e alinhadas pela base ------------------- */
/* height:100% aqui colapsa a coluna para a altura da linha de texto,
porque o pai nao tem altura definida. Deixe o wrapper esticar e a
imagem se resolver pela propria proporcao. */
#top .ob-hero-shot{align-self:stretch;}
#top .ob-hero-shot .avia_image,
#top .ob-hero-shot .avia-image-container,
#top .ob-hero-shot .avia-image-container-inner{display:block;height:100%;}
#top .ob-hero-shot img{width:100%;height:auto;max-height:none;
object-fit:cover;object-position:top center;}
#top .ob-hero-sec .container{align-items:flex-end;}
/* --- botão fantasma (segundo CTA do hero) --------------------------- */
.ob-btn-solid.ghost{background:none;color:var(--ob-ink);
border:1px solid rgba(23,22,15,.3);margin-left:10px;}
.ob-btn-solid.ghost:hover{color:var(--ob-paper);border-color:var(--ob-ink);}
/* --- chegando na gaveta --------------------------------------------- */
.ob-soon-grid{display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(16px,2.2vw,32px);margin-top:clamp(24px,3vw,40px);}
.ob-soon-card{border:1px dashed rgba(23,22,15,.3);
padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:10px;
background:repeating-linear-gradient(45deg,rgba(226,221,209,.5) 0 14px,transparent 14px 28px);}
.ob-soon-card h4{margin:0;font-family:var(--ob-display);
font-variation-settings:"wdth" 92,"wght" 600;
font-size:clamp(17px,1.6vw,22px);text-transform:uppercase;}
.ob-soon-card p{margin:0;color:var(--ob-ink-soft);}
.ob-soon-card .avise{margin-top:auto;padding-top:14px;
border-top:1px solid rgba(23,22,15,.2);
font-family:var(--ob-mono);font-size:11px;letter-spacing:.08em;
text-transform:uppercase;color:var(--ob-accent);}
/* --- depoimentos ---------------------------------------------------- */
.ob-revs{display:grid;grid-template-columns:repeat(3,1fr);
border-top:var(--ob-rule);border-bottom:var(--ob-rule);}
.ob-rev{padding:clamp(28px,3.4vw,52px) clamp(20px,2.4vw,38px);
border-left:var(--ob-rule);}
.ob-rev:first-child{border-left:0;}
.ob-rev .stars{color:var(--ob-accent);letter-spacing:.2em;
font-size:12px;margin-bottom:14px;}
.ob-rev p{margin:0 0 18px;}
.ob-rev footer{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;}
/* --- newsletter ------------------------------------------------------ */
#top .ob-news,#top .ob-news p,#top .ob-news h2{color:var(--ob-paper);}
.ob-news-h2{margin:0;font-family:var(--ob-display);
font-variation-settings:"wdth" 122,"wght" 300;
font-size:clamp(30px,4.8vw,72px);line-height:.9;text-transform:uppercase;}
.ob-news-h2 b{display:block;font-variation-settings:"wdth" 122,"wght" 800;}
@media (max-width:767px){
.ob-spec-grid{grid-template-columns:1fr;}
.ob-spec-grid > div{border-left:0;border-bottom:var(--ob-rule);padding-left:0;}
.ob-soon-grid{grid-template-columns:1fr;}
.ob-revs{grid-template-columns:1fr;}
.ob-rev{border-left:0;border-bottom:var(--ob-rule);}
.ob-btn-solid.ghost{margin-left:0;margin-top:10px;}
}
/* ==================================================================
25. CORRECOES DE CASCATA CONTRA O ENFOLD
Verificado no site em producao (onebasik.com.br, 2026-08-16).
O Enfold junta o CSS dele em `uploads/dynamic_avia/avia-merged-
styles-*.css`, que e enfileirado DEPOIS deste arquivo. Como o
`wp_enqueue_style` com dependencia em `avia-style` nao garante
ordem contra o merged, regras de mesma especificidade perdem.
Por isso os seletores abaixo sobem a especificidade (`html body`)
em vez de confiar na ordem. Sao poucos e pontuais de proposito.
================================================================== */
/* fonte do corpo: sem isso o Enfold serve HelveticaNeue */
html body,
html body .avia_textblock,
html body #top .entry-content-wrapper p{
font-family:var(--ob-serif);
}
/* fundo do header: o padrao do tema vem transparente */
#top #header,
#top #header .header_bg{
background-color:var(--ob-bone);
opacity:1;
}
/* ==================================================================
26. CORRECOES VISTAS NO SITE NO AR (2026-08-16, 2a rodada)
================================================================== */
/* --- headings vinham no #444 padrao do Enfold -------------------- */
#top .ob-sec-head h2,
#top .ob-hero-h1,
#top .ob-quote,
#top .ob-cat h3,
#top .ob-soon-card h4,
#top .ob-pillar h4,
#top .ob-med td:first-child{color:var(--ob-ink);}
#top .ob-sec-head h2 em,
#top .ob-hero-h1 em,
#top .ob-quote em{color:var(--ob-accent);}
/* --- tiles de genero saiam em AZUL DE LINK -----------------------
o h3 esta dentro de um
e herdava a cor de link do navegador */
#top a.ob-cat,
#top a.ob-cat h3,
#top a.ob-cat span{color:var(--ob-ink);text-decoration:none;}
/* --- logo ocupava a largura toda no estado inicial --------------- */
#top .logo{width:auto;}
#top .logo img{height:44px;width:auto;max-width:none;}
#top #header.ob-topo .logo img{height:36px;}
/* --- header colando no topo quando a barra de aviso sai ----------
O Enfold reescreve `top` por JS, entao a classe precisa de
!important para vencer. Quem liga/desliga e o onebasik.js. */
#top #header{transition:top .25s ease;}
#top #header.ob-topo{top:0 !important;}
/* --- cards de produto: sombra do tema e titulo sobrepondo -------- */
#top .ob-grid li.product{box-shadow:none;}
#top .ob-grid .woocommerce-loop-product__title,
#top .ob-grid .product h2{min-height:2.6em;line-height:1.25;}
/* ==================================================================
27. SEÇÕES FULL-BLEED SEM ALTURA SOBRANDO
==================================================================
A Color Section do Enfold entra com `min-height: 100px`. O marquee
mede 53px, então sobravam 47px de faixa preta vazia embaixo do
texto — foi o que apareceu no site no ar.
Vale para qualquer bloco que deva ter exatamente a altura do
próprio conteúdo. O `:has()` resolve sem JS; a classe `.ob-flush`
é o reforço aplicado pelo onebasik.js em navegador que não suporte.
================================================================== */
#top .avia-section.ob-flush,
#top .avia-section:has(> .container > .template-page .ob-marq),
#top .avia-section:has(.ob-marq),
#top .avia-section:has(.ob-cats){
min-height:0;
}
#top .avia-section.ob-flush > .container{
padding-top:0;
padding-bottom:0;
}
/* ==================================================================
28. HERO — AJUSTES VISTOS NO SITE NO AR
==================================================================
O protótipo dava 7/12 da largura para o texto; no ALB a coluna é
av_one_half, que em 1440px resolve para 568px. O h1 pedia 794px na
palavra "gaveta" e vazava por baixo da foto.
================================================================== */
#top .ob-hero-h1{font-size:clamp(40px,7vw,112px);}
/* fotos ocupando a altura do hero, e não o tamanho natural do arquivo */
#top .ob-hero-shot .avia-image-container,
#top .ob-hero-shot .avia-image-container-inner,
#top .ob-hero-shot .avia_image{display:block;height:100%;}
#top .ob-hero-shot img{
width:100%;height:100%;object-fit:cover;object-position:top center;
min-height:clamp(340px,44vw,600px);
}
/* Botões do hero.
ATENÇÃO: o wpautop do WordPress envolve texto solto em e acabou
colocando o parágrafo E o primeiro link no MESMO
— o botão saía
na linha do texto, sobrepondo. Por isso o texto do Code Block usa
, que o wpautop não toca, e os botões vivem neste wrapper. */
/* Os dois botões empilhavam no site no ar por TRÊS pixels: somavam
311px (156 + 145 + 10 de gap) numa coluna de 308px, e o
`flex-wrap:wrap` obedeceu. `nowrap` + `flex:1 1 0` resolve de vez e
ainda deixa os dois do mesmo tamanho — não depende do comprimento
da palavra, que era o que tornava a versão anterior frágil. */
#top .ob-hero-ctas{display:flex;flex-wrap:nowrap;gap:10px;margin-top:22px;}
#top .ob-hero-ctas > a{flex:1 1 0;min-width:0;justify-content:center;text-align:center;}
#top .ob-hero-ctas .ob-btn-solid{margin:0;}
#top .ob-hero-sub .txt{margin:0 0 4px;}
/* Ficha rápida sobre cada foto do hero. O recuo de -14px e a barra
laranja à esquerda são do protótipo: o card "morde" a borda da foto
em vez de flutuar dentro dela. */
#top .ob-hero-shot{position:relative;}
#top .ob-hero-tag{
position:absolute;left:-14px;bottom:26px;z-index:3;
max-width:calc(100% + 14px);
background:var(--ob-bone);padding:10px 14px;
border-left:2px solid var(--ob-accent);
font-family:var(--ob-mono);font-size:11px;line-height:1.7;
letter-spacing:.1em;text-transform:uppercase;color:var(--ob-ink-soft);
}
@media (max-width:767px){
#top .ob-hero-shot img{min-height:260px;}
/* sem espaço para o card sobrepor: ele desce para baixo da foto */
#top .ob-hero-tag{position:static;margin-top:12px;max-width:none;}
#top .ob-hero-ctas{flex-wrap:wrap;}
#top .ob-hero-ctas > a{flex:1 1 140px;}
}
/* ==================================================================
29. HEADER EM DUAS LINHAS
==================================================================
Linha 1: logo · busca larga · favoritos · conta · sacola
Linha 2: menu, largura inteira, centralizado
É o arranjo de loja grande (Renner, Amaro, Riachuelo) e resolve um
problema real: com o menu na mesma linha do logo não sobra largura
para uma busca de verdade, e busca escondida atrás de lupa é busca
que ninguém usa.
O Enfold não tem esse layout nativo — ele só oferece
logo-esquerda/menu-direita ou logo-centro/menu-embaixo. A saída é
transformar o `.inner-container` em flex com `flex-wrap`, e mandar
o menu ocupar 100% para cair sozinho na segunda linha.
ARMADILHA DO TEMA, que aparece três vezes aqui: o script do Enfold
escreve `style="height:80px;line-height:80px"` DIRETO nos
do
menu, da sacola e dos ícones, para sincronizar tudo com a altura de
header configurada no painel. Estilo inline não perde para seletor
nenhum — só para `!important`. Sem isso a linha 1 nasce com 80px de
altura em cada item e o header vira um bloco de 200px.
TUDO depende da classe `.ob-header-pronto`, que o onebasik.js só
coloca DEPOIS de mover os elementos. É a lição do logo sumido: CSS
que assume um DOM que o JS ainda não montou quebra a página inteira
quando um dos dois arquivos sobe sozinho. Sem o JS, o header volta
ao layout padrão do Enfold — feio, porém inteiro.
================================================================== */
#top #header_main,
#top #header_main > .container{height:auto !important;}
#top #header_main .inner-container.ob-header-pronto{
display:flex;flex-wrap:wrap;align-items:center;
column-gap:clamp(16px,2.4vw,40px);row-gap:0;
height:auto !important;
}
/* FAIXA BRANCA ENTRE O HEADER E O HERO.
Duas camadas causavam a mesma coisa. O `#main` do Enfold tem fundo
BRANCO e um `padding-top` calculado a partir da altura de header
configurada no painel; como aqui a altura é o conteúdo que decide,
os números não batem e a diferença aparece. Tornar o #main
transparente só empurrou o problema para o , que também é
branco por padrão.
Pintar o de osso resolve as duas de uma vez — e continua
resolvendo se a altura do header mudar de novo, o que não
aconteceria se eu tivesse acertado o padding na mão. */
html{background:var(--ob-bone);}
#top #main{background:transparent !important;}
/* O mini-carrinho de hover do Enfold competia com a gaveta lateral:
dois carrinhos, um deles fora do padrão visual. Some com o do tema,
mas SÓ quando o JS confirma que a gaveta está no ar — senão a loja
ficaria sem nenhum. A classe vem do onebasik.js. */
html.ob-sacola-js #top .dropdown_widget_cart{display:none !important;}
/* ---- linha 1: logo ----
`flex:1 1 0` aqui e nos ícones faz as duas laterais dividirem em
partes iguais o espaço que sobra — é o que deixa a busca no centro
EXATO do container, e não no meio do que sobrou depois do logo. */
#top #header_main .ob-header-pronto .logo{
order:1;flex:1 1 0;min-width:0;position:static;
height:auto !important;padding:14px 0 12px;
}
#top #header_main .ob-header-pronto .logo a{
height:auto !important;line-height:1 !important;display:block;
}
#top #header_main .ob-header-pronto .logo img{
height:40px;width:auto;max-width:none;
}
/* ---- linha 1: busca ----
Campo com caixa, e não só régua: aqui ele é elemento principal da
linha, não detalhe de canto. Fundo branco sobre o osso do header
para destacar sem precisar de sombra. */
#top #header_main .ob-header-pronto > .ob-busca{
order:2;flex:0 0 clamp(300px,40vw,520px);max-width:none;margin:0;
display:flex;align-items:center;gap:10px;
background:#fff;border:1px solid rgba(23,22,15,.18);
padding:0 14px;height:44px;
transition:border-color .25s;
}
#top #header_main .ob-header-pronto > .ob-busca:focus-within{
border-color:var(--ob-ink);
}
#top .ob-busca button{
order:1;flex:0 0 auto;
background:none;border:0;padding:0;margin:0;cursor:pointer;
display:flex;align-items:center;color:var(--ob-ink-soft);
height:auto !important;line-height:1 !important;
transition:color .25s;
}
#top .ob-busca button:hover{color:var(--ob-accent);}
#top .ob-busca svg{width:18px;height:18px;display:block;}
#top .ob-busca input[type="search"]{
order:2;flex:1 1 auto;width:auto !important;max-width:none !important;
background:none;border:0;box-shadow:none;border-radius:0;
margin:0;padding:0;height:auto;
font-family:var(--ob-mono);font-size:11px;letter-spacing:.1em;
text-transform:uppercase;color:var(--ob-ink);
}
#top .ob-busca input[type="search"]:focus{outline:none;}
#top .ob-busca input[type="search"]::placeholder{color:var(--ob-ink-soft);opacity:1;}
#top .ob-busca input[type="search"]::-webkit-search-cancel-button{display:none;}
#top .ob-busca .screen-reader-text{
position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
}
/* ---- linha 1: favoritos · conta · sacola ---- */
#top #header_main .ob-header-pronto > .ob-meta-utils{
order:3;flex:1 1 0;min-width:0;margin-left:0;
display:flex;align-items:center;justify-content:flex-end;gap:4px;
}
#top #header_main .ob-meta-utils .ob-utils{display:flex;align-items:center;gap:2px;}
#top #header_main .ob-meta-utils .ob-utils a{
display:flex;align-items:center;padding:8px 9px;color:var(--ob-ink);
height:auto !important;line-height:1 !important;
transition:color .25s;
}
#top #header_main .ob-meta-utils .ob-utils a:hover{color:var(--ob-accent);}
#top #header_main .ob-meta-utils .ob-utils svg{width:20px;height:20px;display:block;}
/* `relative` e não `static`: mantém a sacola no fluxo do flex E
continua servindo de âncora para o .dropdown_widget, que é absolute. */
#top #header_main .ob-meta-utils > .cart_dropdown{
position:relative;float:none;
height:auto;width:auto;line-height:1;
border:0;margin:0;flex:0 0 auto;
}
#top #header_main .ob-meta-utils > .cart_dropdown .cart_dropdown_link{
height:auto !important;line-height:1 !important;
padding:8px 4px 8px 9px;
border:0;color:var(--ob-ink);display:flex;align-items:center;gap:7px;
}
#top #header_main .ob-meta-utils > .cart_dropdown .cart_dropdown_link span{
line-height:1 !important;height:auto;
}
#top #header_main .ob-meta-utils > .cart_dropdown .cart_dropdown_link:hover{
color:var(--ob-accent);
}
/* O ícone da sacola do tema é um GLIFO de fonte (entypo) de 15px, ao
lado de dois SVG de 20px — parecia de outro conjunto. Em vez de
trocar o markup do tema, o glifo vira máscara: o span recebe o
desenho da sacolinha e é pintado com `currentColor`, então o hover
continua funcionando e o traço bate com o do coração e do boneco. */
#top #header_main .ob-meta-utils .cart_dropdown_link > span:not(.av-cart-counter):not(.avia_hidden_link_text){
font-size:0 !important;width:20px !important;height:20px !important;
display:block;flex:0 0 auto;background-color:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.1 12H6.1L5 8z'/%3E%3Cpath d='M9 8V6.2a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.1 12H6.1L5 8z'/%3E%3Cpath d='M9 8V6.2a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}
#top #header_main .ob-meta-utils .cart_dropdown_link > span::before{content:none !important;}
/* contador vira pastilha ao lado da sacola, e não emblema solto */
#top #header_main .ob-meta-utils .av-cart-counter{
position:static !important;transform:none !important;
font-family:var(--ob-mono);font-size:10px !important;line-height:17px !important;
min-width:17px;height:17px !important;padding:0 4px;border-radius:9px;
background:var(--ob-ink);color:var(--ob-paper);text-align:center;margin-left:-1px;
}
/* ---- linha 2: o menu ---- */
#top #header_main .ob-header-pronto > nav.main_menu{
order:4;flex:0 0 100%;width:100%;position:static;
display:flex;justify-content:center;
border-top:1px solid rgba(23,22,15,.10);
height:auto !important;
}
#top #header_main .ob-header-pronto .av-main-nav-wrap{
width:100%;display:flex;justify-content:center;height:auto !important;
}
#top #header_main .ob-header-pronto .av-main-nav{
display:flex;align-items:center;justify-content:center;height:auto !important;
}
#top #header_main .ob-header-pronto .av-main-nav > li{height:auto !important;}
#top #header_main .ob-header-pronto .av-main-nav > li > a{
height:auto !important;line-height:1 !important;
padding:15px 16px !important;
}
/* ---- o que o tema imprimia e agora sobra ----
A busca nativa abre um cartão branco com botão VERDE do tema e
esconde a busca atrás de um clique; o ícone de conta do Enfold
duplicava o nosso, com o texto "Login / Register Page" ao lado.
As duas opções podem continuar ligadas no painel — o display:none
dá conta, e assim nada quebra se alguém mexer nelas depois. */
#top .av-main-nav li.menu-item-search-dropdown{display:none !important;}
#top .av-main-nav li.menu-item-account-icon{display:none !important;}
/* ---- estado de FALLBACK: o JS não rodou ----
Ícones e busca continuam no fim do menu, onde o PHP os imprimiu.
Não é o layout desejado, mas é clicável e não desmonta o header. */
#top .av-main-nav li.ob-utils-li > .ob-utils{display:flex;align-items:center;}
#top .av-main-nav li.ob-utils-li a{
display:flex;align-items:center;padding:0 9px;color:var(--ob-ink);
}
#top .av-main-nav li.ob-utils-li svg{width:21px;height:21px;display:block;}
#top .av-main-nav li.ob-busca-li{display:flex;align-items:center;margin-left:14px;}
@media (max-width:989px){
/* aqui o centro exato deixa de valer a pena: com pouca largura, o
que importa é o campo caber. Laterais voltam ao tamanho natural. */
#top #header_main .ob-header-pronto{column-gap:14px;}
#top #header_main .ob-header-pronto .logo{flex:0 0 auto;padding:10px 0 8px;}
#top #header_main .ob-header-pronto .logo img{height:32px;}
#top #header_main .ob-header-pronto > .ob-busca{flex:1 1 auto;height:40px;}
#top #header_main .ob-header-pronto > .ob-meta-utils{flex:0 0 auto;}
}
/* ------------------------------------------------------------------
MOBILE — hambúrguer · logo · ícones, e a busca embaixo
------------------------------------------------------------------
Sem este bloco o header mobile ficava com 234px de altura: cada
elemento caía numa linha própria e o logo estourava para 400px de
largura. Três regras do Enfold, todas dentro do media query dele,
explicam o estrago — e nenhuma delas é óbvia:
1. `.responsive #top .logo{display:table}` + `.logo,.logo a{height:100%}`
fazem o logo tentar preencher a altura do pai, que por sua vez
depende do logo. Some com o `display:table`.
2. O tema escreve `max-height:109px` INLINE no e no ![]()
do logo
e casa isso com uma `line-height` da mesma altura. Mesmo com a
imagem em 20px, a CAIXA DE LINHA continuava com 109px — daí os
131px de altura do logo com conteúdo de 42px. `line-height:0`
resolve; foi o achado que derrubou a altura do header pela metade.
3. `.responsive #top #menu-item-shop.cart_dropdown{margin-left:-39px}`
puxava a sacola para cima do ícone de conta. Era isso, e não
posicionamento, que fazia os dois se sobreporem.
------------------------------------------------------------------ */
@media (max-width:767px){
#top #header_main .ob-header-pronto{column-gap:8px;row-gap:0;align-items:center;}
/* ---- linha 1: logo à esquerda, ícones à direita ----
Cheguei aqui depois de tentar hambúrguer·logo·ícones numa linha só.
Em 375px os três somam quase exatamente a largura disponível, então
qualquer logo um pouco maior quebra tudo. Duas linhas com folga são
melhores do que uma linha que só funciona neste aparelho. */
#top #header_main .ob-header-pronto .logo{
order:1;flex:1 1 auto;min-width:0;width:auto !important;
display:block !important;height:auto !important;float:none !important;
line-height:0 !important;text-align:left;margin:0;padding:11px 0;
}
#top #header_main .ob-header-pronto .logo a{
display:inline-block !important;height:auto !important;
max-height:none !important;overflow:visible !important;
}
#top #header_main .ob-header-pronto .logo img{
height:22px !important;max-height:none !important;
max-width:100% !important;width:auto !important;
}
#top #header_main .ob-header-pronto > .ob-meta-utils{
order:2;flex:0 0 auto;min-width:0;margin-left:auto;
}
#top #header_main .ob-header-pronto .ob-meta-utils .ob-utils{flex:0 0 auto;}
#top #header_main .ob-meta-utils .ob-utils a{padding:8px 6px;}
#top #header_main .ob-header-pronto .ob-meta-utils > .cart_dropdown{
flex:0 0 auto;
position:relative !important;margin:0 !important;
top:auto !important;right:auto !important;
}
#top #header_main .ob-meta-utils .cart_dropdown_link{padding:8px 2px 8px 6px;}
/* ---- linha 2: hambúrguer e busca dividem a linha ---- */
#top #header_main .ob-header-pronto > nav.main_menu{
order:3;flex:0 0 auto;width:auto;border-top:0;justify-content:flex-start;
}
#top #header_main .ob-header-pronto .av-main-nav-wrap{width:auto;justify-content:flex-start;}
#top #header_main .ob-header-pronto .av-burger-menu-main > a{
height:auto !important;line-height:1 !important;
}
/* `flex:1 1 0` e não `auto`: com base no conteúdo, a busca pedia mais
largura do que sobrava em telas de 320px e caía sozinha numa
terceira linha. Com base zero ela ocupa o que houver. */
#top #header_main .ob-header-pronto > .ob-busca{
order:4;flex:1 1 0;min-width:0;max-width:none;height:40px;margin:0 0 12px;
}
#top #header_main .ob-header-pronto > .ob-busca input[type="search"]{min-width:0;}
}