/* SISTEMA VISUAL DA STELC — portado do afiplace-design.css.
 *
 * POR QUE ESTE ARQUIVO EXISTE
 *
 * O site tinha Inter + Quicksand carregados por Google Fonts, botões definidos
 * classe a classe em ~20 CSS e um <style> inline gigante por página, cada um
 * redefinindo cor e raio por conta própria. O admin usava "Proxima Nova" e um
 * :root só dele.
 *
 * Agora os TOKENS moram aqui e todas as páginas leem daqui. Tipografia é
 * Bricolage Grotesque (títulos) + Geist (corpo) + Geist Mono (rótulos),
 * auto-hospedadas em /fonts. O acento é o azul institucional da Stelc (#1e3370),
 * usado só como HALO, BORDA e FUNDO — nunca como cor de texto.
 *
 * ORDEM DE CARGA: entra DEPOIS de /fonts/fonts.css e ANTES do <style> da página
 * e dos CSS de componente, para que a página ainda consiga sobrescrever um
 * componente quando precisa de verdade — mas herde token, tipografia e botão.
 *
 * PONTE DE COMPATIBILIDADE (final do arquivo): as classes de botão e campo que
 * já existem no site (.btn, .btn-primary, .ch-btn-primary, .pml-btn, .adm-btn…)
 * recebem o corpo do .ap-btn sem reescrever HTML.
 */

:root {
  /* ---- Cor ----
     Off-white na página, preto no texto/número/ícone, azul da marca só nos
     detalhes. O azul (#1e3370) é escuro: serve de FUNDO, BORDA, HALO e
     ANIMAÇÃO. Quando o "acento" é TEXTO, use --ap-ink-accent (preto). */
  --ap-bg:          #f7f6f3;   /* fundo da página */
  --ap-surface:     #ffffff;   /* cartão, campo, botão */
  --ap-surface-2:   #fbfaf8;   /* faixa alternada, hover de linha */
  --ap-ink:         #111112;   /* texto, número, ícone */
  --ap-ink-2:       #4a4a52;   /* texto de apoio */
  --ap-ink-3:       #77777f;   /* legenda, placeholder */
  --ap-line:        rgba(17,17,18,.12);
  --ap-line-soft:   rgba(17,17,18,.07);

  /* Azul institucional Stelc no lugar do lilás do Afiplace. Escala derivada:
     -hi mais claro (hover de superfície), -lo o azul-céu da marca (#89CFF0)
     para realces vivos, e as faixas -08..-40 são o próprio azul em alpha
     crescente para halo e fundo translúcido. */
  --ap-accent:      #1e3370;
  --ap-accent-hi:   #2f4a9e;
  --ap-accent-lo:   #89CFF0;
  --ap-ink-accent:  #111112;   /* "acento" quando é TEXTO — preto, sempre */
  --ap-accent-08:   rgba(30,51,112,.08);
  --ap-accent-14:   rgba(30,51,112,.14);
  --ap-accent-24:   rgba(30,51,112,.24);
  --ap-accent-40:   rgba(30,51,112,.40);

  --ap-ok:          #009e5b;
  --ap-danger:      #d92d20;
  --ap-warn:        #b45309;

  /* ---- Tipografia ----
     Bricolage nos títulos, Geist no corpo, Geist Mono nos rótulos de seção.
     Servidas por /fonts/fonts.css — nenhum arquivo novo além dos .woff2. */
  --ap-display: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif;
  --ap-body:    'Geist', system-ui, -apple-system, sans-serif;
  --ap-mono:    'Geist Mono', ui-monospace, monospace;

  /* ---- Forma ----
     Botão é retângulo arredondado (12px), mesmo raio do campo. Cartão 20px.
     --ap-r-pill continua para selo, chip, badge — botão não usa. */
  --ap-r-field:  12px;
  --ap-r-btn:    12px;
  --ap-r-card:   20px;
  --ap-r-pill:   999px;

  --ap-ease:     cubic-bezier(.22, .61, .36, 1);
  --ap-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ── Tipografia base ─────────────────────────────────────────────────────── */

/* !important porque cada página tem um <style> inline com
   `body { font-family: 'Inter', sans-serif }` que carrega depois deste arquivo. */
body {
  font-family: var(--ap-body) !important;
  font-size: 16px;
  line-height: 1.62;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  color: var(--ap-ink);
}

h1, h2, h3, h4 {
  font-family: var(--ap-display) !important;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  text-wrap: balance;
}

/* Títulos de seção do site que hoje usam Quicksand — passam a Bricolage
   como o resto dos títulos. */
.brands-title,
.category-section-title,
.products-title-ml,
.about-section h2,
.home-trust-bar-title,
.home-trust-bar-revendedor-label {
  font-family: var(--ap-display) !important;
}

/* Rótulo de seção em versalete monoespaçado. Preto, não azul: azul como texto
   pequeno perde contraste. */
.ap-eyebrow {
  font-family: var(--ap-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ap-ink-3);
}

/* ── Botão padrão ────────────────────────────────────────────────────────────
 *
 * Fundo branco, letra preta, halo azul em volta. Hover = ZOOM (scale), o halo
 * fica igual em repouso e em hover; só a escala muda.
 */
.ap-btn,
button.ap-btn,
a.ap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  padding: 0 24px;
  border-radius: var(--ap-r-btn);
  border: 1px solid transparent;
  background: var(--ap-surface);
  color: var(--ap-ink);
  font-family: var(--ap-body);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: none;
  transition: transform .35s var(--ap-ease-out), box-shadow .35s var(--ap-ease-out),
              border-color .25s, background .25s;
}
.ap-btn:hover:not(:disabled) { transform: scale(1.035); }
.ap-btn:active:not(:disabled) { transform: scale(.99); }
.ap-btn:focus-visible { outline: 2px solid var(--ap-ink); outline-offset: 3px; }

.ap-btn:disabled,
.ap-btn[disabled] {
  cursor: default;
  color: var(--ap-ink-3);
  background: var(--ap-surface-2);
  border-color: var(--ap-line);
  box-shadow: none;
  transform: none;
}

.ap-btn-secondary {
  background: var(--ap-surface);
  border-color: var(--ap-line);
  box-shadow: none;
}
.ap-btn-secondary:hover:not(:disabled) {
  border-color: transparent;
  transform: scale(1.035);
  box-shadow: none;
}

.ap-btn-danger {
  color: var(--ap-danger);
  box-shadow: none;
}
.ap-btn-danger:hover:not(:disabled) { transform: scale(1.035); }

.ap-btn-sm { height: 38px; padding: 0 16px; font-size: 13.5px; }
.ap-btn-lg { height: 52px; padding: 0 28px; font-size: 15px; }
.ap-btn-block { width: 100%; }

/* ── Campo ───────────────────────────────────────────────────────────────── */

input::placeholder,
textarea::placeholder { color: var(--ap-ink-3); opacity: 1; }

/* ==========================================================================
   PONTE DE COMPATIBILIDADE
   As classes de botão/campo já espalhadas pelo site herdam o desenho novo.
   Mantidas fora de :not() agressivo de propósito — se um componente precisa
   fugir do padrão, o CSS dele carrega depois e sobrescreve.
   ========================================================================== */

/* Botão primário/CTA do site e do admin */
.btn,
.btn-primary,
.primary-btn,
.btn-submit,
.btn-login,
.btn-register,
.btn-buy-now,
.btn-add-cart,
.cart-checkout-btn,
.ch-btn-primary,
.dropdown-btn-primary,
.home-ver-todos-produtos-btn,
.ver-todos-btn,
.newsletter-form button,
.pml-btn,
.pml-btn-primary,
.adm-btn,
.adm-btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: var(--ap-r-btn);
  border: 1px solid transparent;
  background: var(--ap-surface);
  color: var(--ap-ink);
  font-family: var(--ap-body);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  transition: transform .35s var(--ap-ease-out), box-shadow .35s var(--ap-ease-out),
              border-color .25s, background .25s;
}
.btn:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled),
.btn-submit:hover:not(:disabled),
.btn-login:hover:not(:disabled),
.btn-register:hover:not(:disabled),
.btn-buy-now:hover:not(:disabled),
.btn-add-cart:hover:not(:disabled),
.cart-checkout-btn:hover:not(:disabled),
.ch-btn-primary:hover:not(:disabled),
.dropdown-btn-primary:hover:not(:disabled),
.home-ver-todos-produtos-btn:hover:not(:disabled),
.ver-todos-btn:hover:not(:disabled),
.newsletter-form button:hover:not(:disabled),
.pml-btn:hover:not(:disabled),
.pml-btn-primary:hover:not(:disabled),
.adm-btn:hover:not(:disabled),
.adm-btn--primary:hover:not(:disabled) {
  transform: scale(1.035);
  border-color: transparent;
  background: var(--ap-surface);
  color: var(--ap-ink);
  box-shadow: none;
}

/* Botão secundário/outline */
.btn-secondary,
.secondary-btn,
.ch-btn-secondary,
.ch-btn-outline,
.dropdown-btn-secondary,
.cart-continue-btn,
.ml-link-btn,
.pml-btn-secondary,
.adm-btn--ghost,
.adm-btn--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: var(--ap-r-btn);
  border: 1px solid var(--ap-line);
  background: var(--ap-surface);
  color: var(--ap-ink);
  font-family: var(--ap-body);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  transition: transform .35s var(--ap-ease-out), box-shadow .35s var(--ap-ease-out),
              border-color .25s, background .25s;
}
.btn-secondary:hover:not(:disabled),
.secondary-btn:hover:not(:disabled),
.ch-btn-secondary:hover:not(:disabled),
.ch-btn-outline:hover:not(:disabled),
.dropdown-btn-secondary:hover:not(:disabled),
.cart-continue-btn:hover:not(:disabled),
.ml-link-btn:hover:not(:disabled),
.pml-btn-secondary:hover:not(:disabled),
.adm-btn--ghost:hover:not(:disabled),
.adm-btn--secondary:hover:not(:disabled) {
  border-color: transparent;
  transform: scale(1.035);
  box-shadow: none;
}

/* Botão destrutivo */
.btn-delete,
.adm-btn--danger,
.pml-btn-danger {
  color: var(--ap-danger);
  border-color: transparent;
  background: var(--ap-surface);
  box-shadow: none;
}
.btn-delete:hover:not(:disabled),
.adm-btn--danger:hover:not(:disabled),
.pml-btn-danger:hover:not(:disabled) {
  transform: scale(1.035);
}

/* Campos de formulário do site e do admin */
.pml-input,
.adm-input,
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
  font-family: var(--ap-body);
  border-radius: var(--ap-r-field);
}

/* ==========================================================================
   OVERRIDES DE ALTA ESPECIFICIDADE
   Componentes cujo CSS carrega depois deste arquivo e usa !important ou
   seletor mais específico. Aqui igualamos a força para o botão do site
   virar o botão do design system em vez do verde/preto/gradiente antigos.
   ========================================================================== */

/* Card de produto: "Comprar" (era preto #1a1a1a) e "Contate-nos" (era verde
   WhatsApp #25d366). Viram o botão branco com halo azul.
   O prefixo `body` sobe a especificidade um degrau acima das regras !important
   de mesma especificidade em product-card-catalog.css, que carrega depois. */
body .btn-buy-now,
body .products-grid .btn-buy-now,
body .category-section .btn-buy-now,
body .category-section .products-carousel .btn-buy-now,
body .btn-buy-now.btn-contact-us,
body .products-grid .btn-buy-now.btn-contact-us,
body .category-section .btn-buy-now.btn-contact-us,
body .category-section .products-carousel .btn-buy-now.btn-contact-us {
  background: var(--ap-surface) !important;
  color: var(--ap-ink) !important;
  border: 1px solid transparent !important;
  border-radius: var(--ap-r-btn) !important;
  font-family: var(--ap-body) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
  box-shadow: none !important;
  transition: transform .35s var(--ap-ease-out), box-shadow .35s var(--ap-ease-out) !important;
}
body .btn-buy-now:hover,
body .products-grid .btn-buy-now:hover,
body .category-section .btn-buy-now:hover,
body .category-section .products-carousel .btn-buy-now:hover,
body .btn-buy-now.btn-contact-us:hover,
body .products-grid .btn-buy-now.btn-contact-us:hover,
body .category-section .btn-buy-now.btn-contact-us:hover,
body .category-section .products-carousel .btn-buy-now.btn-contact-us:hover {
  background: var(--ap-surface) !important;
  color: var(--ap-ink) !important;
  transform: scale(1.035) !important;
  box-shadow: none !important;
}

/* "Avise-me" (estoque) — era azul-céu sólido */
body .btn-notify-stock,
body .products-grid .btn-notify-stock,
body .category-section .btn-notify-stock,
body .category-section .products-carousel .btn-notify-stock {
  background: var(--ap-surface) !important;
  color: var(--ap-ink) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: var(--ap-r-btn) !important;
  font-family: var(--ap-body) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
body .btn-notify-stock:hover,
body .products-grid .btn-notify-stock:hover,
body .category-section .btn-notify-stock:hover,
body .category-section .products-carousel .btn-notify-stock:hover {
  border-color: transparent !important;
  transform: scale(1.035) !important;
  box-shadow: none !important;
}

/* Botão do banner da home (era gradiente azul→roxo) */
.banner-btn {
  background: var(--ap-surface) !important;
  color: var(--ap-ink) !important;
  border: 1px solid transparent !important;
  border-radius: var(--ap-r-btn);
  font-family: var(--ap-body);
  font-weight: 600;
  box-shadow: none;
}
.banner-btn:hover {
  transform: scale(1.035);
  box-shadow: none;
}

/* "Ver todos os produtos" / "Ver todas as categorias" — links-CTA da home */
.home-ver-todos-produtos-btn,
.ver-todos-btn {
  color: var(--ap-ink) !important;
  border-radius: var(--ap-r-btn) !important;
}

/* ==========================================================================
   FORMA ÚNICA — tudo quadrado vira retângulo arredondado (12px)
   Regra do Afiplace: card, campo e botão compartilham o mesmo raio. Sem
   círculos de categoria, sem pílula de título, sem contorno de seleção.
   ========================================================================== */

/* Cards de produto — catalog tinha raio 0, home tinha 12px. Unifica em 12px. */
body .product-card,
body .products-grid .product-card,
body .category-section .product-card,
body .category-section .products-carousel .product-card,
body .related-products-section .product-card {
  border-radius: var(--ap-r-btn) !important;
  overflow: hidden;
}

/* Ícones de categoria da home — eram círculos (border-radius: 50%).
   Viram quadrado arredondado. */
body .category-icon-shopee,
body .department-image-container {
  border-radius: var(--ap-r-btn) !important;
}

/* Chips de título de seção com contorno azul oval — "MARCAS PARCEIRAS",
   "CONTATORES INDUSTRIAIS", "NOSSOS PRODUTOS". O pedido: sem contorno,
   só a escrita. Remove borda, pílula, fundo e sombra. */
.brands-title,
.category-section-title,
.products-title-ml .products-title-wrap {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.products-title-ml .products-title-prefix,
.products-title-ml .products-title-accent {
  padding: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
}

/* Varredura de raio: qualquer elemento "caixa" com raio pílula (25px, 50px,
   999px, 25rem) volta ao raio do sistema. Não toca border-radius:50% de
   avatar/badge/botão-ícone redondo, que continuam redondos de propósito. */
.categories-section,
.products-section,
.category-section,
.card,
.modal-content,
.dropdown-menu,
.filter-drawer,
.cart-sidebar {
  border-radius: var(--ap-r-card) !important;
}

/* ==========================================================================
   BOTÃO "CONTATE-NOS" — só aparece no hover do card, sem contorno
   ========================================================================== */

/* Contorno cinza = border-top do container de ações + halo/box-shadow do
   design system. Dentro do card, o botão fica CHAPADO: sem borda, sem halo,
   sem sombra. */
body .product-card .product-actions,
body .product-card .card-bottom-row,
body .products-grid .product-actions,
body .category-section .product-actions {
  border-top: none !important;
}
body .product-card .btn-buy-now,
body .product-card .btn-buy-now.btn-contact-us,
body .products-grid .product-card .btn-buy-now.btn-contact-us,
body .category-section .product-card .btn-buy-now.btn-contact-us,
body .category-section .products-carousel .product-card .btn-buy-now.btn-contact-us {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
body .product-card:hover .btn-buy-now,
body .product-card .btn-buy-now:hover,
body .products-grid .product-card .btn-buy-now.btn-contact-us:hover,
body .category-section .products-carousel .product-card .btn-buy-now.btn-contact-us:hover {
  box-shadow: none !important;
}

/* Escondido em repouso, revelado quando o cursor entra no card — o
   contador de quantidade acompanha o botão de comprar, os dois juntos.
   Usa visibility+opacity (não display:none) para a transição suave e para
   o layout do card não pular. */
body .product-card .btn-buy-now,
body .products-grid .product-card .btn-buy-now,
body .category-section .product-card .btn-buy-now,
body .product-card .card-bottom-row .cart-qty,
body .products-grid .product-card .card-bottom-row .cart-qty,
body .category-section .product-card .card-bottom-row .cart-qty {
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s var(--ap-ease-out), transform .35s var(--ap-ease-out),
              box-shadow .35s var(--ap-ease-out) !important;
}
body .product-card:hover .btn-buy-now,
body .product-card:focus-within .btn-buy-now,
body .products-grid .product-card:hover .btn-buy-now,
body .category-section .product-card:hover .btn-buy-now,
body .product-card:hover .card-bottom-row .cart-qty,
body .product-card:focus-within .card-bottom-row .cart-qty,
body .products-grid .product-card:hover .card-bottom-row .cart-qty,
body .category-section .product-card:hover .card-bottom-row .cart-qty {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   CARD DE CATEGORIA — remover todo realce azul no hover (card e texto)
   ========================================================================== */
body .category-item-shopee:hover,
body .department-card:hover {
  background: transparent !important;
}
body .category-item-shopee:hover .category-icon-shopee,
body .department-card:hover .department-image-container {
  background: var(--ap-surface) !important;
  border-color: var(--ap-line) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
}
/* Texto da categoria: cor, fonte e peso IDÊNTICOS em repouso e hover. */
body .category-name-shopee,
body .category-item-shopee:hover .category-name-shopee {
  color: var(--ap-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--ap-body) !important;
  font-weight: 500 !important;
}
body .department-name,
body .department-card:hover .department-name {
  color: var(--ap-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--ap-body) !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   DROPDOWNS — cantos arredondados (mega-menu, autocomplete, menu do usuário,
   menu mobile). Todos tinham border-radius: 0.
   ========================================================================== */
body .mega-nav-dropdown,
body .search-autocomplete,
body .search-dropdown,
body .autocomplete-results,
body .user-dropdown,
body .mobile-menu-dropdown,
body .header-cep-modal,
body .cart-sidebar,
body .checkout-modal {
  border-radius: var(--ap-r-btn) !important;
  overflow: hidden;
}

/* ==========================================================================
   CABEÇALHO — remover a barra de busca por completo e centralizar a logo
   ========================================================================== */
body .search-bar,
body .search-bar-desktop,
body .search-bar-mobile,
body .search-bar-inner,
body .search-autocomplete,
body .mobile-search-btn,
body .search-close-mobile,
body #searchBarMobile,
body #mobileSearchBtn {
  display: none !important;
}

/* Sem a busca: 3 zonas no cabeçalho — CEP à esquerda, logo no centro,
   ícones/login à direita.

   HOME (.home-header-dual-row): o slot da logo é a coluna do meio; o
   .__body (que tem CEP + ícones) é uma coluna flex de largura total à
   direita, e dentro dele o CEP recebe order:-1 e é empurrado para a
   ponta esquerda por margin-right:auto. */
/* Esquema dos 3 zonas (CEP/logo/ícones) é só de desktop — sem esse guard
   ele furava o display:none !important do header-content--desktop no
   mobile (home-mobile-fluid.css), por ter mais classes na seletor e
   também usar !important. */
@media (min-width: 769px) {
  body.has-site-header-shell .home-header-dual-row {
    justify-content: flex-start !important;
    position: relative;
  }
  /* Logo travada no centro do cabeçalho. */
  body.has-site-header-shell .home-header-logo-slot {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    /* Acima do .header interno (position:sticky; z-index:10009; fundo azul), que
       é irmão da logo no mesmo contexto de empilhamento — com z-index menor ele
       pintava a faixa azul por cima do miolo da logo, deixando só as bordas
       de cima e de baixo à mostra. */
    z-index: 10010 !important;
  }
  /* Faixa de conteúdo ocupa a largura toda; CEP encostado à esquerda, ícones
     à direita, o vão do meio (sob a logo) fica livre. */
  body.has-site-header-shell .home-header-dual-row__body {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0;
  }
  body.has-site-header-shell .home-header-dual-row__body .header-content,
  body.has-site-header-shell .home-header-dual-row__body .header-content--desktop {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    justify-content: space-between !important;
  }
  body.has-site-header-shell .home-header-dual-row__body .header-cep-slot {
    order: -1 !important;
    margin-right: auto !important;
  }
  body.has-site-header-shell .home-header-dual-row__body .header-quick-icons {
    order: 99 !important;
    margin-left: auto !important;
  }
}

/* PÁGINAS INTERNAS (grid 1fr auto 1fr): o cluster inteiro ia para a coluna
   central, centrando o BLOCO (logo+CEP+ícones), não a logo. Aqui a logo é
   travada no centro absoluto do cabeçalho e CEP/ícones fluem para as bordas. */
body:not(.home-page) .header-content {
  position: relative !important;
  display: flex !important;
  grid-template-columns: none !important;
  justify-content: space-between !important;
  align-items: center !important;
}
body:not(.home-page) .header-main-cluster {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-self: stretch !important;
}
body:not(.home-page) .header-search-group {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}
body:not(.home-page) .header-brand {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  /* Mesmo motivo do .home-header-logo-slot acima: precisa ficar acima do
     .header (z-index 10009) para a logo não ser coberta pela faixa azul. */
  z-index: 10010 !important;
}
/* CEP à esquerda, ícones à direita. */
body:not(.home-page) .header-cep-slot {
  order: -1 !important;
  margin-right: auto !important;
}
body:not(.home-page) .header-quick-icons {
  margin-left: auto !important;
}
body .header-content .logo a,
body .header-brand .logo a {
  justify-content: center !important;
}