/* wcb-casa, módulo Identidade (Etapa 1 do mega menu, 12/10/2026): cabeçalho e rodapé #101238, faixa e painel do mega menu #829AB6 com texto #000/#303030, faixas da home #829AB6 (rodada 2), pictogramas por máscara, faixa que gruda no computador, cabeçalho do celular. Base: folha do designer (entregue/leitura/mega-menu-2026-10-12/css/). Zero DOM. Volta: option wcb_identidade_desligado = sim. */ html:root { --wcb-e1-nav: #101238; --wcb-e1-menu: #829AB6; --wcb-e1-titulo: #000000; --wcb-e1-link: #303030; } /* ============ COMPUTADOR ============ */ @media (min-width: 992px) { /* linha do logo */ html body #_header-2-35 #_header_row-7-35#_header_row-7-35, html body #_header-2-35 #_header_row-332-35#_header_row-332-35 { background-color: var(--wcb-e1-nav) !important; } /* logo: 120x94 de origem; +20% em 12/10 03h (144x113), mais +10% na rodada 2 (04h41, 158x124) e -10% na rodada 3 (10h33): 142x111, a proporção da origem. A linha do logo acompanha com o mesmo respiro de 12 px em cima e embaixo: 111 + 24 = 135 px (era 148). */ html body #_header-2-35 #_header_row-7-35#_header_row-7-35 > .oxy-header-container { height: 135px !important; min-height: 135px !important; } html body #_header-2-35 #_header_row-7-35 #div_block-15-35 #div_block-17-35 { width: 142px !important; height: 111px !important; margin-left: -71px !important; top: 11.5px !important; } html body #_header-2-35 #_header_row-7-35 #div_block-17-35 #link-288-35 { width: 142px !important; height: 111px !important; } html body #_header-2-35 #_header_row-7-35 #link-288-35 #image-20-35 { width: 142px !important; height: 111px !important; } /* icones: os 4 pictogramas dele, pequenos (20 px de altura), uma cor so (#000 sobre #829AB6, 7,25:1), agrupados a direita e DENTRO da faixa do menu. O Div dos icones continua na linha do logo (zero DOM): desce por transform do centro da linha do logo ao centro da faixa (medido a cada altura da linha: 107 px com 148, 100,5 com 135; a linha ímpar centraliza em meio pixel, por isso o logo leva top 11,5 e cai inteiro em y=44) e a lista do menu para 244 px antes da borda direita (os ícones ocupam 228 e sobram 32 de folga até eles). Rodada 2 (04h41): os ícones entram 16 px (folga de 24 para 40 px da borda a 1280). */ html body #_header-2-35 #_header_row-7-35 #div_block-15-35 { gap: 0 !important; } html body #_header-2-35 #_header_row-7-35 #div_block-15-35 > #div_block-18-35, html body #_header-2-35 #_header_row-7-35 #div_block-15-35 > #div_block-19-35, html body #_header-2-35 #_header_row-7-35 #div_block-15-35 > #div_block-24-35 { transform: translate(-16px, 100.5px); position: relative; z-index: 5; } html body #_header-2-35 #_header_row-7-35 #div_block-19-35 { gap: 0 !important; margin: 0 !important; } html body #_header-2-35 #_header_row-7-35 #div_block-18-35 #shortcode-21-35 .dgwt-wcas-search-wrapp, html body #_header-2-35 #_header_row-7-35 #div_block-18-35 #shortcode-21-35 .js-dgwt-wcas-search-icon-handler, html body #_header-2-35 #_header_row-7-35 #div_block-18-35 #shortcode-21-35 { width: 40px !important; min-width: 40px !important; } html body #_header-2-35 #_header_row-7-35 #div_block-19-35 #div_block-295-35, html body #_header-2-35 #_header_row-7-35 #div_block-19-35 #div_block-23-35, html body #_header-2-35 #_header_row-7-35 #div_block-19-35 #div_block-572-35 { width: 40px !important; min-width: 40px !important; } html body #_header-2-35 #_header_row-7-35 #fancy_icon-296-35 > svg { --wcb-ic-atendimento: url("/wp-content/plugins/wcb-casa/modulos/identidade/assets/ic/Chat3.png") !important; width: 22px !important; height: 20px !important; } html body #_header-2-35 #_header_row-7-35 #fancy_icon-28-35 > svg { --wcb-ic-conta: url("/wp-content/plugins/wcb-casa/modulos/identidade/assets/ic/Profile1.png") !important; width: 18px !important; height: 20px !important; } html body #_header-2-35 #_header_row-7-35 #fancy_icon-573-35 > svg { -webkit-mask: url("/wp-content/plugins/wcb-casa/modulos/identidade/assets/ic/Profile1.png") center / contain no-repeat !important; mask: url("/wp-content/plugins/wcb-casa/modulos/identidade/assets/ic/Profile1.png") center / contain no-repeat !important; width: 18px !important; height: 20px !important; } html body #_header-2-35 #_header_row-7-35 #div_block-19-35 #fancy_icon-573-35 > svg, html body #_header-2-35 #_header_row-7-35 #div_block-19-35 #fancy_icon-296-35 > svg, html body #_header-2-35 #_header_row-7-35 #div_block-19-35 #fancy_icon-28-35 > svg { background: var(--wcb-e1-titulo) !important; -webkit-mask-size: contain !important; mask-size: contain !important; } html body #_header-2-35 #_header_row-7-35 #div_block-19-35 a.ct-link:is(#div_block-295-35, #div_block-23-35, #div_block-572-35):is(:hover, :focus-visible) { background-color: rgba(16, 18, 56, .14); } html body #_header-2-35 #_header_row-7-35 #div_block-19-35 a.ct-link:is(#div_block-295-35, #div_block-23-35, #div_block-572-35):focus-visible { outline: 2px solid var(--wcb-e1-titulo) !important; outline-offset: 2px !important; } html body #_header-2-35 #_header_row-7-35 #div_block-18-35 #shortcode-21-35 .js-dgwt-wcas-search-icon-handler svg { --wcb-lupa: url("/wp-content/plugins/wcb-casa/modulos/identidade/assets/ic/Pesquisa2.png"); width: 25px !important; height: 26px !important; max-width: none !important; margin-bottom: 0 !important; background: var(--wcb-e1-titulo) !important; } /* a caixa escura ficou só no foco: no mouse a lupa cresce como as irmãs (fim da folha), e nelas o universal.css apaga a caixa com transparent !important */ html body #_header-2-35 #_header_row-7-35 #div_block-18-35 #shortcode-21-35 .js-dgwt-wcas-search-icon-handler:focus-visible { background-color: rgba(16, 18, 56, .14); } html body #_header-2-35 #_header_row-7-35 #div_block-18-35 #shortcode-21-35 .js-dgwt-wcas-search-icon-handler:is(:hover, :focus-visible) svg { background: var(--wcb-e1-titulo) !important; } html body #_header-2-35 #_header_row-7-35 #div_block-24-35 #-cart-counter-92-35 { min-width: 40px !important; padding: 0 6px !important; gap: 4px !important; border-radius: 8px; } html body #_header-2-35 #_header_row-7-35 #div_block-24-35 #-cart-counter-92-35 .oxy-cart-counter_icon_svg { --wcb-carrinho: url("/wp-content/plugins/wcb-casa/modulos/identidade/assets/ic/Carrinho4.png"); width: 28px !important; height: 20px !important; background: var(--wcb-e1-titulo) !important; } html body #_header-2-35 #_header_row-7-35 #div_block-24-35 #-cart-counter-92-35:is(:hover, :focus-within) { background-color: rgba(16, 18, 56, .14); } html body #_header-2-35 #_header_row-7-35 #div_block-24-35 #-cart-counter-92-35:is(:hover, :focus-within) .oxy-cart-counter_icon_svg { background: var(--wcb-e1-titulo) !important; } html body #_header-2-35 #_header_row-7-35 #div_block-24-35 #-cart-counter-92-35 .oxy-cart-counter_number, html body #_header-2-35 #_header_row-7-35 #div_block-24-35 #-cart-counter-92-35:is(:hover, :focus-within) .oxy-cart-counter_number { color: var(--wcb-e1-titulo) !important; font-size: 13px !important; } html body #_header-2-35 #_header_row-11-35 #div_block-34-35 { width: calc(100% - 244px) !important; max-width: none !important; margin: 0 244px 0 0 !important; } html body #_header-2-35 #_header_row-11-35 #_header_center-13-35 { justify-content: flex-start !important; } /* faixa do menu gruda ao rolar, em toda largura >= 992. O sticky do Oxygen so liga acima de 1350 px (JS `width >= 1351` e @media min-width:1351px no 35.css) e esconde a linha dos icones; aqui o header inteiro e sticky com top = -(32 + 135) = -167 px: as duas linhas de cima saem pela rolagem e a faixa fica. Zero salto de layout (o header continua no fluxo). */ /* o oxygen.css poe height:100% em html e body: o bloco do sticky teria so 1 tela de altura e a faixa soltaria na 2a tela */ html, html body { height: auto !important; min-height: 100%; } html body #_header-2-35.oxy-header-wrapper { position: sticky !important; top: -167px !important; z-index: 99999 !important; animation: none !important; box-shadow: none !important; } html body #_header-2-35.oxy-sticky-header-active .oxygen-hide-in-sticky { display: block !important; } html body { margin-top: 0 !important; } html { scroll-padding-top: 66px; } /* logado, a barra preta do WordPress (32 px, fixa, z-index 99999) cobre o topo da tela: a faixa grudava em y=0 e passava por baixo dela, cortando rotulos e icones (defeito visto pelo dono em 12/10, 04h32). A faixa gruda 32 px abaixo e fica um degrau abaixo da barra. */ html body.admin-bar #_header-2-35.oxy-header-wrapper { top: calc(var(--wp-admin--admin-bar--height, 32px) - 167px) !important; z-index: 99998 !important; } html:has(body.admin-bar) { scroll-padding-top: calc(66px + var(--wp-admin--admin-bar--height, 32px)); } html body #_header-2-35 #_header_row-11-35#_header_row-11-35 { box-shadow: 0 1px 0 rgba(16, 18, 56, .22); } /* barra do menu e painel: #829AB6, fechados e abertos. Os cantos de baixo do painel com o raio dos cards (24; dono, 14/10/2026 10h42: "arredondar no mesmo padrão feito nos novos cards"; era 14); os de cima ficam retos, colados na faixa. */ html body #_header-2-35 #_header_row-11-35#_header_row-11-35 { background-color: var(--wcb-e1-menu) !important; border-top: 1px solid var(--wcb-e1-menu) !important; border-bottom: 1px solid var(--wcb-e1-menu) !important; } html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown_container { background-color: var(--wcb-e1-menu) !important; border-top: 1px solid rgba(16, 18, 56, .22) !important; border-radius: 0 0 24px 24px !important; box-shadow: 0 24px 48px rgba(16, 18, 56, .30) !important; } /* item de topo: texto preto; os cinco estados nao dependem so de cor (fundo, filete de 3 px, peso) */ html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown_link { color: var(--wcb-e1-titulo) !important; font-weight: 600 !important; } html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown_icon { color: var(--wcb-e1-titulo) !important; } html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown_link::before { box-shadow: none !important; } html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown_link::after { height: 3px !important; bottom: 4px !important; background: var(--wcb-e1-nav) !important; } /* rodada 4 (dono, 13h51: "mouse over do mega menu home deve ser o mesmo estilo da parte interna dele, sem caixa sombreada, mesmo padrão onde aparece um traço vertical ao selecionar"): com o mouse em cima e com o painel aberto, nada de caixa (era fundo rgba(16,18,56,.14)) nem do traço de 3 px embaixo; o rótulo ganha o sublinhado de 2 px a 4 px, o mesmo dos links do painel. Rodada 5 (dono, 15h20: "remover a barra vertical dos itens principais, deixar apenas a barra horizontal"): o filete vertical de 2 px que a rodada 4 pôs no ::before do rótulo saiu; ele fica só nos links de dentro do painel. O ::before segue desligado (o universal o usava para o brilho). */ html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown:hover > .oxy-mega-dropdown_link, html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown:has(:focus-visible) > .oxy-mega-dropdown_link { background-color: transparent !important; color: var(--wcb-e1-titulo) !important; } html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown > .oxy-mega-dropdown_link::before { display: none !important; } html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown:hover > .oxy-mega-dropdown_link::after, html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown:has(:focus-visible) > .oxy-mega-dropdown_link::after { opacity: 0 !important; } html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown:hover > .oxy-mega-dropdown_link .oxy-mega-dropdown_link-text, html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown:has(:focus-visible) > .oxy-mega-dropdown_link .oxy-mega-dropdown_link-text { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown:hover > .oxy-mega-dropdown_link .oxy-mega-dropdown_icon, html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown:has(:focus-visible) > .oxy-mega-dropdown_link .oxy-mega-dropdown_icon { color: var(--wcb-e1-titulo) !important; } html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown > .oxy-mega-dropdown_link:focus-visible { outline: 2px solid var(--wcb-e1-titulo) !important; outline-offset: 2px !important; } /* Promoções (dono, 14/10/2026 03h13: "No mega menu o Promoções deve seguir o layout dos outros sem se destacar (cor preta sóbria)"): sem a pastilha marinho de antes; o laranja do Oxygen por baixo vira o preto dos outros itens, e o mouse e o foco são os deles (sublinhado). A pastilha da gaveta do celular (#div_block-534-35) não muda. */ html body #-mega-menu-76-35#-mega-menu-76-35 #-mega-dropdown-533-35 > .oxy-mega-dropdown_link { background-color: transparent !important; box-shadow: none !important; color: var(--wcb-e1-titulo) !important; } /* dentro do painel */ html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown_content .ct-headline, html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-slide-menu_list > .menu-item-has-children > a { color: var(--wcb-e1-titulo) !important; } html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown_content .ct-headline::after, html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-slide-menu_list > .menu-item-has-children > a::after { height: 3px !important; background: var(--wcb-e1-nav) !important; } html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown_content a:hover .ct-headline { color: var(--wcb-e1-titulo) !important; text-decoration: underline; } html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list .menu-item:not(.menu-item-has-children) > a { color: var(--wcb-e1-link) !important; font-weight: 500 !important; border-left: 2px solid transparent; border-radius: 0 8px 8px 0 !important; background-color: transparent !important; box-shadow: none !important; } html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list .menu-item:not(.menu-item-has-children) > a:is(:hover, :focus-visible) { color: var(--wcb-e1-titulo) !important; background-color: transparent !important; border-left-color: var(--wcb-e1-titulo); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; box-shadow: none !important; } html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list .menu-item:not(.menu-item-has-children) > a:focus-visible { outline: 2px solid var(--wcb-e1-titulo); outline-offset: 2px; } html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list .menu-item:not(.menu-item-has-children) > a:active { transform: translateY(1px); } /* o foguinho HOT: rodada 4 (dono, 13h51: "perde o círculo azul em volta e fica apenas o foguinho desenhado numa iteração do mesmo pictograma usado no mega para Mais vendidos"). Sem a pastilha marinho; o desenho é a chama A em contorno laranja (hot.js). Laranja #ff9400 sobre #829AB6 dá 1,31:1 (objeto pede 3:1): decisão dele, número dito uma vez no LEIA. 16 px, traço de 1,2 px. */ html body #-mega-menu-76-35#-mega-menu-76-35 .wcb-hot { width: 16px !important; height: 16px !important; padding: 0; border-radius: 0; background: none; } html body #-mega-menu-76-35#-mega-menu-76-35 .wcb-hot svg { width: 16px !important; height: 16px !important; } /* "Ver tudo": deixa de ser pilula. Link de pe de coluna: 13 px, peso 400, sem caixa alta, sem contorno, setinha fina. Rotulo 12,5 px/800/caixa alta e contorno #48c6fe de 1,5 px (medido hoje) saem; alvo de 32 px de altura. */ html body #-mega-menu-76-35#-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-mega-dropdown_content > .ct-div-block > .ct-div-block:last-child > a.wcb-ver-todos { height: 32px !important; margin: 8px 0 0 -2px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; gap: 6px !important; color: var(--wcb-e1-link) !important; } html body #-mega-menu-76-35#-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown a.wcb-ver-todos::before { font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; } html body #-mega-menu-76-35#-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown a.wcb-ver-todos::after { width: 6px !important; height: 6px !important; border-width: 1.5px !important; margin-left: 0 !important; transition: transform .15s ease; } html body #-mega-menu-76-35#-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-mega-dropdown_content > .ct-div-block > .ct-div-block:last-child > a.wcb-ver-todos:is(:hover, :focus-visible) { background: none !important; color: var(--wcb-e1-titulo) !important; text-decoration: underline !important; text-underline-offset: 4px; } html body #-mega-menu-76-35#-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-mega-dropdown_content > .ct-div-block > .ct-div-block:last-child > a.wcb-ver-todos:is(:hover, :focus-visible)::after { transform: translateX(2px) rotate(45deg); } html body #-mega-menu-76-35#-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-mega-dropdown_content > .ct-div-block > .ct-div-block:last-child > a.wcb-ver-todos:focus-visible { outline: 2px solid var(--wcb-e1-titulo) !important; outline-offset: 2px; } } /* ============ CELULAR E TABLET ============ */ @media (max-width: 991px) { html body #_header-2-35 #_header_row-7-35#_header_row-7-35, html body #_header-2-35 #_header_row-3-35#_header_row-3-35, html body #_header-2-35 #_header_row-332-35#_header_row-332-35 { background-color: var(--wcb-e1-nav) !important; } /* logo -15%: 101 -> 86 px de altura; a linha cai de 125 para 110 px */ html body #_header-2-35 #_header_row-7-35 #link-288-35 #image-20-35 { height: 86px !important; width: auto !important; } html body #_header-2-35 #_header_row-7-35 #div_block-17-35, html body #_header-2-35 #_header_row-7-35 #link-288-35 { height: 86px !important; width: auto !important; } /* lupa, carrinho e menu: brancos; alvo de toque de 44 px no carrinho (hoje 24x20). A lupa: o desenho 30% maior (dono, 13/10 21h31), 26 px de largura onde o max-width de 20 do FiboSearch a deixava; o alvo segue 44 x 44 */ html body #_header-2-35 #_header_row-7-35 #shortcode-21-35 .js-dgwt-wcas-search-icon-handler svg { --wcb-lupa: url("/wp-content/plugins/wcb-casa/modulos/identidade/assets/ic/Pesquisa2.png"); width: 26px !important; height: 27px !important; max-width: none !important; background: #ffffff !important; } html body #_header-2-35 #_header_row-7-35 #div_block-24-35 #-cart-counter-92-35 .oxy-cart-counter_icon_svg { --wcb-carrinho: url("/wp-content/plugins/wcb-casa/modulos/identidade/assets/ic/Carrinho4.png"); width: 32px !important; height: 23px !important; background: #ffffff !important; } html body #_header-2-35 #_header_row-7-35 #div_block-24-35, html body #_header-2-35 #_header_row-7-35 #div_block-24-35 #link-641-35 { min-width: 44px !important; min-height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; } html body #_header-2-35 #_header_row-7-35 #-burger-trigger-294-35 .hamburger-inner, html body #_header-2-35 #_header_row-7-35 #-burger-trigger-294-35 .hamburger-inner::before, html body #_header-2-35 #_header_row-7-35 #-burger-trigger-294-35 .hamburger-inner::after { background-color: #ffffff !important; } } /* ============ TODAS AS LARGURAS ============ */ /* o desenho antigo (FontAwesome, via ) nao pode aparecer por baixo da mascara */ html body #_header-2-35 #_header_row-7-35 :is(#fancy_icon-296-35, #fancy_icon-28-35, #fancy_icon-573-35) > svg use, html body #_header-2-35 #_header_row-7-35 #-cart-counter-92-35 .oxy-cart-counter_icon_svg use, html body #_header-2-35 #_header_row-7-35 #shortcode-21-35 .js-dgwt-wcas-search-icon-handler svg use { display: none !important; } @media (max-width: 991px) { html body #_header-2-35 #_header_row-7-35 #div_block-24-35 #-cart-counter-92-35 .oxy-cart-counter_number { color: #ffffff !important; } } html body #section-96-35#section-96-35 { background-color: var(--wcb-e1-nav) !important; background-image: none !important; } /* faixa "Os mais vendidos": desde a rodada 2 (12/10, 04h30) é #829AB6 e vai junto com os 2 banners de baixo; regras no fim da folha. */ /* ============ AJUSTES DO DONO DEPOIS DA ESPEC (12/10/2026, 03h2x a 03h39) ============ */ /* faixa do menu, rótulo numa linha só (dono, 03h39): NÃO entra aqui. Os 8 rótulos de hoje numa linha somam 1.320 px para 1.044 livres a 1280 (medido na hcteste em 12/10: texto de 154 px em "PODS DESCARTÁVEIS" + seta + respiro); a quebra em duas linhas de 22/09 fica até a Etapa 2, cujos 7 rótulos cabem (módulo mega-menu-b). */ /* celular (03h23): logo -15% CENTRALIZADA, hambúrguer à ESQUERDA, à direita só carrinho e lupa. O Div dos ícones (#div_block-19-35) some da caixa (display: contents) e os filhos dele passam a itens da linha: ordena sem mover nó. A logo fica no centro da linha por posição absoluta; a altura da linha vem do min-height. */ @media (max-width: 991px) { html body #_header-2-35 #_header_row-7-35 #div_block-15-35 { position: relative !important; justify-content: flex-end !important; align-items: center !important; gap: 4px !important; min-height: 86px !important; width: 100% !important; } html body #_header-2-35 #_header_row-7-35 #div_block-15-35 > #div_block-19-35 { display: contents !important; } html body #_header-2-35 #_header_row-7-35 #div_block-290-35 { order: -1 !important; margin: 0 auto 0 0 !important; } html body #_header-2-35 #_header_row-7-35 #div_block-15-35 > #div_block-17-35 { position: absolute !important; left: 50% !important; top: 0 !important; transform: translateX(-50%) !important; margin: 0 !important; } html body #_header-2-35 #_header_row-7-35 #div_block-24-35 { order: 1 !important; } html body #_header-2-35 #_header_row-7-35 #div_block-15-35 > #div_block-18-35 { order: 2 !important; width: 44px !important; min-width: 44px !important; justify-content: center !important; margin: 0 !important; } html body #_header-2-35 #_header_row-7-35 #div_block-18-35 #shortcode-21-35 { width: 44px !important; display: flex !important; justify-content: center !important; } } /* gaveta do celular: segue o mega menu (03h2x), #829AB6 com texto escuro; o cabeçalho dela fica #101238 com texto branco (18,02:1). Sobre #829AB6: título #000 (7,25:1), link #303030 (4,55:1) a 16 px/500, barra e seta #101238. A sentinela --wcb-mc-folha da redesign-c fica intacta: o menu-celular.js só age com ela. */ @media (max-width: 991px) { html body #-off-canvas-310-35.wcb-mc .offcanvas-inner, html body #-off-canvas-310-35.wcb-mc .wcb-mc-painel, html body #-off-canvas-310-35.wcb-mc #div_block-314-35 > a { background-color: var(--wcb-e1-menu) !important; } html body #-off-canvas-310-35.wcb-mc #div_block-313-35, html body #-off-canvas-310-35.wcb-mc .wcb-mc-cabeca, html body #-off-canvas-310-35.wcb-mc .wcb-mc-cabeca-li { background-color: var(--wcb-e1-nav) !important; } html body #-off-canvas-310-35.wcb-mc #div_block-314-35, html body #-off-canvas-310-35.wcb-mc #div_block-316-35 { border-color: rgba(16, 18, 56, .22) !important; } html body #-off-canvas-310-35.wcb-mc #div_block-314-35 > a { color: var(--wcb-e1-titulo) !important; border-right-color: rgba(16, 18, 56, .22) !important; } html body #-off-canvas-310-35.wcb-mc #div_block-314-35 > a:active { background-color: rgba(16, 18, 56, .14) !important; } html body #-off-canvas-310-35.wcb-mc .wcb-mc-icone { fill: var(--wcb-e1-nav) !important; } html body #-off-canvas-310-35.wcb-mc .wcb-mc-linha, html body #-off-canvas-310-35.wcb-mc .wcb-mc-painel .menu-item > a, html body #-off-canvas-310-35.wcb-mc .wcb-mc-grupo > button { background-color: var(--wcb-e1-menu) !important; background-image: linear-gradient(var(--wcb-e1-nav), var(--wcb-e1-nav)) !important; border-bottom-color: rgba(16, 18, 56, .22) !important; } html body #-off-canvas-310-35.wcb-mc .wcb-mc-linha .oxel_accordion__row__label, html body #-off-canvas-310-35.wcb-mc .wcb-mc-grupo > button, html body #-off-canvas-310-35.wcb-mc .wcb-mc-painel li.menu-item-has-children > a { color: var(--wcb-e1-titulo) !important; } html body #-off-canvas-310-35.wcb-mc .wcb-mc-painel .menu-item:not(.menu-item-has-children) > a { color: var(--wcb-e1-link) !important; font-weight: 500 !important; } html body #-off-canvas-310-35.wcb-mc .wcb-mc-linha::after, html body #-off-canvas-310-35.wcb-mc li.wcb-mc-abre > a::after, html body #-off-canvas-310-35.wcb-mc .wcb-mc-grupo > button::after { color: var(--wcb-e1-nav) !important; } html body #-off-canvas-310-35.wcb-mc .wcb-mc-linha:active, html body #-off-canvas-310-35.wcb-mc .wcb-mc-painel .menu-item > a:active, html body #-off-canvas-310-35.wcb-mc .wcb-mc-grupo > button:active { background-color: rgba(16, 18, 56, .14) !important; } html body #-off-canvas-310-35.wcb-mc .wcb-mc-linha.wcb-mc-aceso, html body #-off-canvas-310-35.wcb-mc .wcb-mc-linha.wcb-mc-aceso .oxel_accordion__row__label, html body #-off-canvas-310-35.wcb-mc .wcb-mc-painel li.wcb-mc-aceso > a, html body #-off-canvas-310-35.wcb-mc .wcb-mc-grupo.wcb-mc-aceso > button { color: var(--wcb-e1-titulo) !important; font-weight: 700 !important; } html body #-off-canvas-310-35.wcb-mc :is(.wcb-mc-linha, .wcb-mc-painel .menu-item > a, .wcb-mc-grupo > button, .wcb-mc-tudo, .wcb-mc-voltar):focus-visible { outline: 2px solid var(--wcb-e1-titulo) !important; outline-offset: -2px !important; } html body #-off-canvas-310-35.wcb-mc .wcb-mc-tudo { border-color: var(--wcb-e1-nav) !important; color: var(--wcb-e1-titulo) !important; } html body #-off-canvas-310-35.wcb-mc .wcb-mc-tudo:active { background-color: rgba(16, 18, 56, .14) !important; } html body #-off-canvas-310-35.wcb-mc .wcb-mc-vazio, html body #-off-canvas-310-35.wcb-mc li.wcb-reposicao::before, html body #-off-canvas-310-35.wcb-mc li.wcb-reposicao > a::before { color: var(--wcb-e1-link) !important; } html body #-off-canvas-310-35.wcb-mc li.wcb-reposicao { border-top-color: rgba(16, 18, 56, .22) !important; } /* Promoções (dono, 14/10/2026 04h11: "Sim perde o destaque"): sem a pastilha marinho e o laranja; uma linha como as das categorias da gaveta (fundo #829AB6, filete embaixo, texto #000 em 700 de 15 px, caixa alta, à esquerda, sem a estrela). O HOT da gaveta segue o do computador desde a rodada 4: só a chama, sem pastilha. */ html body #-off-canvas-310-35.wcb-mc #div_block-534-35 #text_block-535-35::before { content: none !important; } html body #-off-canvas-310-35.wcb-mc #div_block-534-35 { justify-content: flex-start !important; margin: 0 !important; padding: 0 16px 0 18px !important; min-height: 56px; border: 0 !important; border-bottom: 1px solid rgba(16, 18, 56, .22) !important; border-radius: 0 !important; background: var(--wcb-e1-menu) !important; box-shadow: none !important; } html body #-off-canvas-310-35.wcb-mc #div_block-534-35 * { color: var(--wcb-e1-titulo) !important; font-size: 15px !important; font-weight: 700 !important; } html body #-off-canvas-310-35.wcb-mc .wcb-hot { width: 16px !important; height: 16px !important; padding: 0; border-radius: 0; background: none; } html body #-off-canvas-310-35.wcb-mc .wcb-hot svg { width: 16px !important; height: 16px !important; } } /* faixas coloridas da home: rodada 2, no fim da folha. */ /* Todas as marcas (era Marcas Famosas; 12/10 23h): fundo preto e, desde 13/10 16h48, círculo branco de 120 px com contorno #444 (o da folha de conferência dos logos); a caixa segue preta. Desde 13/10 17h11 (dono: "Pode manter o fundo branco mas prefiro as logos na cor preto mesmo") o logo é o BRANCO do padronizado (logomarcas/padronizado/branco: tinta 100% branca sobre transparente nos 22) pintado de preto pelo filter: brightness(0), que zera a cor e guarda o alfa; preto sobre branco, 21:1. O logo ocupa o círculo inteiro: a tela de 512 já traz a margem. O zoom de 1.3 do Oxygen no mouse sai (cortaria o logo no círculo). Título branco sobre preto 21:1; mouse: anel de 3 px #829AB6; foco: anel branco de 2 px; alvo 120x120. Um efeito de mouse só, o anel (dono, 13/10 02h33): a classe .produtos--top do universal.css acende na célula de 128x160 um brilho azul com raio de 10 px (o "quadradão"), apagado só nesta seção; nos carrosséis de produto ele continua. */ html body #section-186-32 .produtos--top:hover { box-shadow: none !important; border-radius: 0 !important; } html body #section-186-32#section-186-32 { background-color: #000000 !important; background-image: none !important; } html body #section-186-32 #headline-188-32, html body #section-186-32 #headline-188-32 span { color: #ffffff !important; } html body #section-186-32 a.ct-link[href*="/marca/"] { box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 120px !important; height: 120px !important; border-radius: 50% !important; background-color: #ffffff !important; border: 1px solid #444444 !important; overflow: hidden !important; transition: box-shadow .15s ease, transform .15s ease; } html body #section-186-32 a.ct-link[href*="/marca/"] picture { display: contents; } html body #section-186-32 a.ct-link[href*="/marca/"] img { width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; object-fit: contain !important; transform: none !important; filter: brightness(0) !important; } html body #section-186-32 a.ct-link[href*="/marca/"]:hover { box-shadow: 0 0 0 3px var(--wcb-e1-menu); } html body #section-186-32 a.ct-link[href*="/marca/"]:focus-visible { outline: 2px solid #ffffff !important; outline-offset: 3px !important; } html body #section-186-32 a.ct-link[href*="/marca/"]:active { transform: translateY(1px); } /* Setas dos carrosséis em vidro (dono, 13/10/2026 20h21: "trocar todos por uma versão baseada nesse modelo [o banner do topo]. O tamanho pode permanecer fiel ao atual, mas a cor e o comportamento de mouse over repetem"): as vitrines da home e a faixa de marcas. O banner do topo (3) tem o bloco dele no cabecalho-a2.css. Tamanho e lugar ficam os do C1 (44 px, seta de 20, no cabecalho-a2.css, que vem antes desta folha e perde para o mesmo seletor por ordem); a cor e o mouse vêm do banner: branco a 18% com desfoque de 6 px atrás, seta branca com contorno escuro a 45% (é o contorno que dá o contraste sobre qualquer fundo) e, no mouse e no foco, o círculo aceso em rgba(59,124,166,.92). O banner fica sobre foto; aqui as setas pousam também sobre branco, onde o vidro sumiria: um fio branco por dentro e uma sombra curta desenham a borda. No celular as setas das vitrines não aparecem (card-novo); ficam as da faixa de marcas. */ html body .oxy-carousel-builder:not(#-carousel-builder-3-32) .oxy-carousel-builder_icon { background-color: rgba(255, 255, 255, .18) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 1px 4px rgba(16, 18, 56, .25) !important; } html body .oxy-carousel-builder:not(#-carousel-builder-3-32) .oxy-carousel-builder_icon::before { -webkit-mask: none; mask: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 6-6 6 6 6' stroke='black' stroke-opacity='.45' stroke-width='6.6'/%3E%3Cpath d='m15 6-6 6 6 6' stroke='white' stroke-width='2.6'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } html body .oxy-carousel-builder:not(#-carousel-builder-3-32) .oxy-carousel-builder_icon:is(:hover, :focus-visible) { background-color: rgba(59, 124, 166, .92) !important; box-shadow: 0 1px 4px rgba(16, 18, 56, .25) !important; } html body .oxy-carousel-builder:not(#-carousel-builder-3-32) .oxy-carousel-builder_icon:focus-visible { outline: 2px solid #ffffff !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px #143156 !important; } html body .oxy-carousel-builder:not(#-carousel-builder-3-32) .oxy-carousel-builder_icon.oxy-carousel-builder_icon_disabled { background-color: rgba(255, 255, 255, .18) !important; opacity: .35; } /* rodapé: o copyright (#text_block-99-35) fica #a9b8cc sobre #101238 (8,93:1). Na hcteste já é; a ESPEC mediu #5b6675 (3,09:1) na marcação da loja: a regra garante o mesmo nos dois. */ html body #section-96-35 #text_block-99-35 { color: #a9b8cc !important; } /* ============ RODADA 2 DO DONO (12/10/2026, 04h30) ============ */ /* Faixas azuis da home: "Os mais vendidos" + os 2 banners de baixo (#section-118-32) numa faixa só, e "Os mais queridinhos", todas #829AB6 (a cor do mega menu). Sobre #829AB6: título #000 (7,25:1), filete #101238 (6,22:1). */ html body :is(#section-34-32, #section-180-32):is(#section-34-32, #section-180-32) { background-color: var(--wcb-e1-menu) !important; background-image: none !important; } /* Card novo, rodada 3b (dono, 13/10/2026 00h2x: "Seção branca no celular"): até 767 px (o corte do card, não o 991 desta folha) as duas faixas ficam brancas. O card do celular não tem caixa, e sobre o #829AB6 o "no PIX" (#1c7a3e) dava 1,86:1 e o "em até 12x" (#5a6672) 2,03:1. No computador a faixa azul não muda. */ @media (max-width: 767px) { html body :is(#section-34-32, #section-180-32):is(#section-34-32, #section-180-32) { background-color: #ffffff !important; } } /* rodada 5 (dono, 15h27: "os dois banners que ficam embaixo dela devem ficar em uma faixa branca, deixar apenas uma faixa azul nos mais queridinhos"): os 2 banners (#section-118-32) saem do #829AB6 para o branco. A seção não tinha recuo em cima (os banners encostavam no fim da faixa azul, medido: 0 px a 1280 e 412); ganha os mesmos 40 px que já tinha embaixo. */ html body #section-118-32#section-118-32 { background-color: #ffffff !important; background-image: none !important; padding-top: 40px !important; } html body :is(#section-34-32, #section-180-32) :is(#headline-40-32, #headline-133-32), html body :is(#section-34-32, #section-180-32) :is(#headline-40-32, #headline-133-32) span { color: var(--wcb-e1-titulo) !important; } /* as setas destas faixas são as de vidro, como as de todos os carrosséis (13/10, 20h21; bloco depois de Todas as marcas) */ /* O fundo antigo que dava ritmo (#eff7ff e #f7faff alternados com branco) sai: "Dicas da White" (era #eff7ff), a seção escondida #section-21-32 (#eff7ff) e "O que dizem os clientes" (a section.wcb-av, #f7faff) ficam brancas. */ html body :is(#section-700-32, #section-21-32):is(#section-700-32, #section-21-32), html body #shortcode-778-32 > section.wcb-av { background-color: #ffffff !important; background-image: none !important; } /* Ordem das seções da home: desde a rodada 4 mora na árvore do 32 (r4-home32.php), e não em `order` de CSS: leitor de tela e Tab seguem a tela. Depois de "Os mais vendidos": Sugestões da Casa, Os mais queridinhos, os 2 banners, Marcas famosas, O que dizem os clientes, Dicas guias e novidades, e então a newsletter e o rodapé (do 35). */ /* Cantos arredondados com sombra: os cartões de produto das 4 vitrines da home e os 3 banners de "Os mais vendidos" (o mosaico e os 2 de baixo). Raio 14 (cartão e painel, direção); sombra curta para caber nos 20 px que o carrossel deixa antes de cortar (flickity-viewport). A moldura do slide (.produtos--top) cortava a sombra: overflow visível. */ html body.home :is(#section-44-32, #section-34-32, #section-700-32, #section-180-32) .produtos--top { overflow: visible !important; } html body.home :is(#section-44-32, #section-34-32, #section-700-32, #section-180-32) [id^="div_block-37-152-"] { border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 4px 14px rgba(16, 18, 56, .16) !important; } html body.home :is(#section-34-32 [id^="link-371-32-"], #section-118-32 :is([id^="link-369-32-"], [id^="link-370-32-"])) { border-radius: 28px !important; overflow: hidden !important; box-shadow: 0 6px 18px rgba(16, 18, 56, .22) !important; } html body.home :is(#section-34-32 [id^="link-371-32-"], #section-118-32 :is([id^="link-369-32-"], [id^="link-370-32-"])):focus-visible { outline: 2px solid var(--wcb-e1-titulo) !important; outline-offset: 3px !important; } /* Os 3 banners flutuam com o mouse (dono, 14/10/2026 10h43: "introduzir o efeito de mouse over que faz o banner se mexer flutuando, reproduzindo o efeito de banners desta loja", podmodturkey9.com). O de lá, lido nas folhas e medido no navegador, é o "Bob" do Elementor: sobe 8 px em 0,3 s (ease-out) e depois oscila entre -8 e -4 px a cada 1,5 s (ease-in-out, vai e volta) enquanto o mouse fica; sem sombra nem escala. Aqui os mesmos números, no banner inteiro (o raio de 28 e a sombra sobem junto); transform não mexe no vizinho nem na largura. Só com mouse e sem "reduzir movimento". */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { html body.home :is(#section-34-32 [id^="link-371-32-"], #section-118-32 :is([id^="link-369-32-"], [id^="link-370-32-"])):is(:hover, :focus-visible) { animation: wcb-flutua-sobe .3s ease-out forwards, wcb-flutua 1.5s ease-in-out .3s infinite alternate; } } @keyframes wcb-flutua-sobe { to { transform: translateY(-8px); } } @keyframes wcb-flutua { 0%, 100% { transform: translateY(-8px); } 50% { transform: translateY(-4px); } } /* Filete sob os títulos da home (rodada 2, 04h46): o desenho da marca (traço de 2,5 px + ponto de 6 + ponto de 4 a 60%, na largura que o site já dá), numa cor só, a de "Os mais queridinhos": #101238 (sobre branco 18,02:1, sobre #829AB6 6,22:1). Em Marcas Famosas (fundo preto) o #101238 some (1,17:1): lá a variável é #829AB6 (7,25:1), a mesma família. */ html body.home #inner_content-91-35 { --wcb-filete: var(--wcb-e1-nav); } html body.home #inner_content-91-35 #section-186-32 { --wcb-filete: var(--wcb-e1-menu); } html body.home #inner_content-91-35 .ct-headline::after { background: linear-gradient(90deg, var(--wcb-filete), var(--wcb-filete)) 0 50% / calc(100% - 14px) 2.5px no-repeat, radial-gradient(circle, var(--wcb-filete) 0 2px, transparent 2.5px) calc(100% - 6px) 50% / 6px 6px no-repeat, radial-gradient(circle, color-mix(in srgb, var(--wcb-filete) 60%, transparent) 0 1.25px, transparent 1.75px) 100% 50% / 4px 4px no-repeat !important; } /* Faixa da newsletter. Rodada 4 (dono, 13h51: "alterar a cor da newsletter pra mesmo azul do mega menu"): #829AB6, sem os filetes claros. Branco sobre #829AB6 dá 2,9:1 e reprova, então tudo que era claro escurece (contraste WCAG, tabela no LEIA): texto #000 (7,25:1); "10% OFF" #101238 a 800 (6,22:1); pílula "OFERTA EXCLUSIVA" e botão ASSINAR #101238 com texto branco (18,02:1; a peça contra a faixa, 6,22:1), botão no mouse #000 (21:1); o campo branco ganha contorno #101238 de 1 px (a caixa branca sozinha contra a faixa dava 2,9:1); placeholder #677788 sobre branco (4,59:1); anel de foco #000 (7,25:1 contra a faixa), porque o branco do anel antigo dava 2,9:1. */ html body #section-93-35#section-93-35 { background-color: var(--wcb-e1-menu) !important; background-image: none !important; border-top: 0 !important; border-bottom: 0 !important; } html body #section-93-35 #text_block-173-35 { color: var(--wcb-e1-titulo) !important; } html body #section-93-35 #text_block-173-35 span { color: var(--wcb-e1-nav) !important; font-weight: 800 !important; } html body #section-93-35 #div_block-171-35::before { background-color: var(--wcb-e1-nav) !important; color: #ffffff !important; } /* o campo traz borda 0 e sombra none em style inline com !important (JS da newsletter): o contorno vai por outline */ html body #section-93-35 #ff_2_email { outline: 1px solid var(--wcb-e1-nav) !important; outline-offset: -1px !important; } html body #section-93-35 #ff_2_email:focus-visible { outline: 2px solid var(--wcb-e1-titulo) !important; outline-offset: 2px !important; } /* o botão leva o fundo num style inline com !important (var(--wcb-nl-bg, #3b7ca6), JS da newsletter): muda pela variável */ html body #section-93-35 .ff-btn-submit { --wcb-nl-bg: #101238; } html body #section-93-35 .ff-btn-submit:is(:hover, :focus-visible) { --wcb-nl-bg: #000000; } html body #section-93-35 .ff-btn-submit:focus-visible { outline: 2px solid var(--wcb-e1-titulo) !important; outline-offset: 2px !important; } html body #section-93-35 .ff-btn-submit:active { transform: translateY(1px); } html body #section-93-35 #ff_2_email::placeholder { color: #677788 !important; opacity: 1 !important; } /* ============ RODADA 4 DO DONO (12/10/2026, 13h51) ============ */ /* Rodapé: o filete sob AJUDA, A EMPRESA, COMPRE COM SEGURANÇA e FORMAS DE PAGAMENTO ("colocar em branco mesmo"). O desenho da marca fica (traço de 2,5 px + ponto de 6 + ponto de 4 a 60%, na largura que o site dá), numa cor só: branco sobre #101238, 18,02:1. */ html body #section-96-35 h3.ct-headline::after { background: linear-gradient(90deg, #ffffff, #ffffff) 0 50% / calc(100% - 14px) 2.5px no-repeat, radial-gradient(circle, #ffffff 0 2px, transparent 2.5px) calc(100% - 6px) 50% / 6px 6px no-repeat, radial-gradient(circle, rgba(255, 255, 255, .6) 0 1.25px, transparent 1.75px) 100% 50% / 4px 4px no-repeat !important; } /* Fim da página ("final do rodapé tirar essa faixa branca e colocar azul do mega menu"): a faixa branca é a seção #section-98-35 do 35, vazia (só o recuo de 10 px em cima e embaixo, 20 px de altura) e sem fundo, então mostrava o branco da página. Ganha o #829AB6. */ html body #section-98-35#section-98-35 { background-color: var(--wcb-e1-menu) !important; background-image: none !important; } /* "Sugestões da White" (rodada 5, dono 15h22: "alterar para Sugestões da White e remover o pictograma de nuvem W"): o título é só texto (r5-home32.php); as regras da nuvem W da rodada 4 saíram daqui. */ /* "Dicas, guias e novidades" ("deixar com 4 posts e reduzir um pouco o espaço que ela ocupa hoje"): 4 posts (árvore, r4-home32.php) numa linha só no computador, cartão mais baixo (capa 2:1, título de até 2 linhas, resumo de 2), menos recuo; de 681 a 1024 px, 2 por linha; no celular, lista de linhas com a capa pequena à esquerda e só título e data. A grade do Easy Posts vem do Template CSS do 693 (por classe); aqui só a home, por id. */ html body.home #section-685-32 > .ct-section-inner-wrap { padding-top: 32px !important; padding-bottom: 32px !important; } html body.home #section-685-32 .wcg-topo { margin-bottom: 20px !important; } @media (min-width: 1025px) { html body.home #_posts_grid-693-32 > .oxy-posts { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px !important; } } @media (min-width: 681px) { html body.home #_posts_grid-693-32 .wcg-card__capa { aspect-ratio: 2 / 1; } html body.home #_posts_grid-693-32 .wcg-card__miolo { padding: 14px 16px 14px; } html body.home #_posts_grid-693-32 .wcg-card__nome { margin-bottom: 6px; font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html body.home #_posts_grid-693-32 .wcg-card__resumo { margin-bottom: 12px; font-size: 13.5px; -webkit-line-clamp: 2; } html body.home #_posts_grid-693-32 .wcg-card__pe { padding-top: 10px; } } @media (max-width: 680px) { html body.home #_posts_grid-693-32 > .oxy-posts { gap: 12px !important; } html body.home #_posts_grid-693-32 .wcg-card { flex-direction: row; align-items: stretch; } html body.home #_posts_grid-693-32 .wcg-card__capa { flex: 0 0 112px; aspect-ratio: auto; min-height: 96px; } html body.home #_posts_grid-693-32 .wcg-card__selo, html body.home #_posts_grid-693-32 .wcg-card__resumo, html body.home #_posts_grid-693-32 .wcg-card__marca, html body.home #_posts_grid-693-32 .wcg-card__quem b { display: none; } html body.home #_posts_grid-693-32 .wcg-card__miolo { padding: 10px 12px; min-width: 0; } html body.home #_posts_grid-693-32 .wcg-card__nome { margin: 0 0 6px; font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } html body.home #_posts_grid-693-32 .wcg-card__pe { padding-top: 6px; border-top: 0; } } /* Ícones do cabeçalho com o mouse (dono, 13/10/2026 21h31: "preciso que o zoom seja persistente enquanto o mouse estiver sobre o ícone"): o pulo iconPop do universal.css do Oxygen (1 > 1,35 > 0,95 > 1 em 0,42 s, que volta a 1 com o mouse ainda em cima) sai; o desenho cresce a 1,2 em 0,2 s e fica assim enquanto o mouse, o dedo ou o foco de teclado estiverem nele. Os mesmos alvos do pulo, mais a lupa, que não o tinha. Por transform: a caixa e os vizinhos não andam. A lupa leva 4 ids e uma classe a mais: a transição só de cor do cabecalho-a2.css tem 4 ids. */ html body #_header-2-35 #_header_row-7-35 :is(a.ct-link:is(.central-cliente, .central-cliente2, .central-cliente3) > .Icone-header, #-cart-counter-92-35 .oxy-cart-counter_icon_count, #div_block-18-35 #shortcode-21-35 .dgwt-wcas-search-icon.js-dgwt-wcas-search-icon-handler svg) { animation: none; transform-origin: center; transition: transform .2s ease, color .15s, background-color .15s; } @media (hover: hover) { html body #_header-2-35 #_header_row-7-35 :is(a.ct-link:is(.central-cliente, .central-cliente2, .central-cliente3):hover > .Icone-header, #-cart-counter-92-35:hover .oxy-cart-counter_icon_count, #shortcode-21-35 .js-dgwt-wcas-search-icon-handler:hover svg) { transform: scale(1.2); } } html body #_header-2-35 #_header_row-7-35 :is(a.ct-link:is(.central-cliente, .central-cliente2, .central-cliente3):is(:active, :focus-visible) > .Icone-header, #-cart-counter-92-35:is(:active, :has(:focus-visible)) .oxy-cart-counter_icon_count, #link-641-35:focus-visible .oxy-cart-counter_icon_count, #shortcode-21-35 .js-dgwt-wcas-search-icon-handler:is(:active, :focus-visible) svg) { transform: scale(1.2); } @media (prefers-reduced-motion: reduce) { html body #_header-2-35 #_header_row-7-35 :is(a.ct-link > .Icone-header, #-cart-counter-92-35 .oxy-cart-counter_icon_count, #div_block-18-35 #shortcode-21-35 .dgwt-wcas-search-icon.js-dgwt-wcas-search-icon-handler svg) { transition: none; } } /* Cards v2.1, rodada de 14/10/2026 03h13 (dono): "Fundo em novidades e na home voltam ao branco original. Devemos ajustar 5 cards por fileira, deixando um pouco mais de respiro, porém apenas o suficiente para a borda do card (com o mouseover) aparecer completa sem sobrepor ao vizinho". As seções voltam às cores de antes do v2.1 (a regra que as pintava de cinza saiu: #829AB6 nas duas faixas, pela regra da rodada 2; branco em Novidades e Sugestões) e "As melhores ofertas" fica preta. Escolha do dono de 04h11 ("Versão C com o espaçamento da B"): o vão entre os cards (a --wcb-vao) é de 6 px, e de 8 px no azul e no preto, onde o contorno do card some (--wcb-borda). O viewport do Flickity corta dos lados: no 1º e no último card à vista a sombra do mouse para na borda de fora (o corpo e o canto do card ficam inteiros). 5 por vista de 1200 px em diante, 4 abaixo (a 1056 o card de 5 cairia a ~205 px, abaixo dos 220 do @container do card); "Os mais vendidos", ao lado do banner (792 px a 1366), fica em 3: o card do mesmo tamanho dos de 5 por fileira. A célula estica à mais alta da fileira depois da medida (o flickity-resize sai durante ela e volta depois); as regras do card moram no card-novo. */ @media (min-width: 768px) { html body .oxy-carousel-builder:is(*, #x):has(.wcb-c) { --carousel-space-between: var(--wcb-vao, 6px); --carousel-cell-width: calc((100% - 3 * var(--carousel-space-between)) / 4); } html body :is(#-carousel-builder-211-32, #-carousel-builder-216-32):is(#-carousel-builder-211-32, #-carousel-builder-216-32) { --carousel-cell-width: calc((100% - 2 * var(--carousel-space-between)) / 3); } html body .flickity-resize .flickity-slider > :has(> * > .wcb-c) { min-height: 100%; } html body .flickity-viewport:has(.wcb-c) { overflow: clip visible; } html body #section-124-32 #_dynamic_list-153-32:is(*, #x) { background: none !important; } } @media (min-width: 1200px) { html body .oxy-carousel-builder:is(*, #x):has(.wcb-c):not(#-carousel-builder-211-32, #-carousel-builder-216-32) { --carousel-cell-width: calc((100% - 4 * var(--carousel-space-between)) / 5); } } /* "As melhores ofertas" em preto (dono, 14/10/2026 03h13: "Melhores ofertas pode aplicar o fundo preto e alterar o que for necessário"): o título já é branco (21:1), o filete passa a branco como em Todas as marcas e o "(ver todos)" laranja dá 9,6:1. No computador a caixa branca da lista sai e os cards pousam no preto; no celular ela fica (o card do celular não tem caixa). */ html body #section-124-32#section-124-32 { background-color: #000000 !important; background-image: none !important; } html body :is(#section-34-32, #section-180-32, #section-124-32) { --wcb-vao: 8px; --wcb-borda: #0000; } html body.home #inner_content-91-35 #section-124-32 { --wcb-filete: #ffffff; } /* Respiro embaixo (dono, 14/10/2026 12h18: "Aumentar respiro embaixo em 50%", e 12h19: "Apenas de onde eu mandei print"): só "Os mais vendidos" (do pé do card mais baixo ao fim da faixa: 30 para 45 px) e "As melhores ofertas" (40 para 60 px); e às 12h49 ("Aumentar o respiro do preto em mais 20% e do azul em 50%"): 45 para 68 e 60 para 72 px. Em cima não muda; as outras faixas não mudam; no celular fica como estava. */ @media (min-width: 768px) { html body #section-34-32#section-34-32 > .ct-section-inner-wrap { padding-bottom: 58px !important; } html body #section-124-32#section-124-32 > .ct-section-inner-wrap { padding-bottom: 72px !important; } } /* Menu do cabeçalho entre 992 e 1365 px (tablet deitado e notebook pequeno): os 7 itens com 12 px de recuo de cada lado e 4% de espaço entre letras, mais os 4 ícones, passavam da linha (1.264 px de conteúdo a 1280, 1.129 a 1024: a página rolava de lado e o menu cobria o ícone da conta; relato do dono de 13/10 23h57). Recuo de 6 px e letras sem espaço extra; de 1199 para baixo, recuo de 5 px e 12 px de letra. Acima de 1365 nada muda. */ @media (min-width: 992px) and (max-width: 1365px) { html body #_header-2-35 #_header_row-11-35 #-mega-menu-76-35 .oxy-mega-dropdown > .oxy-mega-dropdown_link { padding-left: 6px !important; padding-right: 6px !important; letter-spacing: 0 !important; } } @media (min-width: 992px) and (max-width: 1199px) { html body #_header-2-35 #_header_row-11-35 #-mega-menu-76-35 .oxy-mega-dropdown > .oxy-mega-dropdown_link { padding-left: 5px !important; padding-right: 5px !important; font-size: 12px !important; } } /* O logo como ícone Home da faixa (dono, 14/10/2026 20h14: "Coloque a logo da barra no mega menu em branco sem a nuvem, um pouco maior. E o mais pra esquerda possível. Ela é o ícone Home da barra"; o script está no modulo.php). Sempre visível, no topo e com a faixa grudada; preso à borda esquerda do contêiner de 1350 px da faixa, no recuo de 20 px dele, na vertical da migalha (21h03: "Em telas grandes fica um comportamento esquisito essa logo branca"; a 2468 ficava em 20 e o conteúdo em 579). 48 px de altura (eram 40), 9 px de folga em cima e embaixo na faixa de 66. Só aparece se sobrar 8 px até o 1º item (o script mede a cada largura e quando a fonte chega). z-index: o