/* Perfume Árabe — tokens do tema Recife (E1).
   Fonte: site/prototipos/home-v1/style.css (protótipo aprovado) + bot/moldes/tema.py.
   Prefixo .pa- em tudo. Não sobrescreve nenhuma classe nativa do Recife. */

:root {
  /* cor — 9 cores, e só estas (conhecimento/padrao-ui.md §1) */
  --pa-noite: #0E0B14;
  --pa-noite-2: #17121F;
  --pa-tinta: #241D2E;
  --pa-tinta-2: #6A6570;
  --pa-ambar: #C98A3C;
  --pa-ambar-texto: #8A5A1F;
  --pa-areia: #D8C6A8;
  --pa-marfim: #F6EFE3;
  --pa-vinho: #2A0F18; /* 28/09: degradê do cabeçalho transparente (direção do dono) */
  --pa-branco: #FFFFFF;
  --pa-linha: rgba(36, 29, 46, .14);
  --pa-linha-noite: rgba(216, 198, 168, .18);

  /* tipografia */
  --pa-serif: "EB Garamond", Georgia, serif;
  --pa-sans: Montserrat, "Helvetica Neue", Arial, sans-serif;
  --pa-fs-12: 12px;
  --pa-fs-14: 14px;
  --pa-fs-16: 16px;
  --pa-fs-18: 18px;
  --pa-fs-22: 22px;
  --pa-fs-26: 26px;
  --pa-fs-36: 36px;
  --pa-fs-48: 48px;
  --pa-lh-titulo: 1.15;
  --pa-lh-texto: 1.6;

  /* espaço — escala única */
  --pa-e-4: 4px; --pa-e-8: 8px; --pa-e-12: 12px; --pa-e-16: 16px;
  --pa-e-24: 24px; --pa-e-32: 32px; --pa-e-40: 40px; --pa-e-64: 64px;
  --pa-gutter: 16px;
  --pa-gutter-desk: 32px;
  --pa-max: 1200px;

  /* raio, sombra, movimento */
  --pa-r-4: 4px;
  --pa-r-8: 8px;
  --pa-r-pill: 999px;
  --pa-sombra-1: 0 2px 8px rgba(14, 11, 20, .08);
  --pa-sombra-2: 0 18px 40px rgba(14, 11, 20, .22);
  --pa-t: .25s ease;
}

.pa-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.pa-caixa-alta {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
}
/* Cabeçalho — barra fina + logo/busca/conta-carrinho.
   Estiliza o cabeçalho nativo do Recife (.header, .head-nav, .js-search-form)
   sem trocar o markup: se o CSS cair, o cabeçalho nativo continua de pé. */

/* ---------- barra fina do topo ---------- */
.pa-barra-topo {
  background: var(--pa-noite);
  color: var(--pa-areia);
  font-family: var(--pa-sans);
  font-size: var(--pa-fs-12);
  letter-spacing: .06em;
}
.pa-barra-topo ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  justify-content: center;
  align-items: center;
  max-width: var(--pa-max);
  margin: 0 auto;
  padding: 8px var(--pa-gutter);
  list-style: none;
}
.pa-barra-topo li + li::before {
  content: "·";
  color: var(--pa-ambar);
  margin-right: 14px;
}

/* ---------- cabeçalho do tema ---------- */
.pa-cabecalho,
body .head-main.head-colors,
body .head-main .head-logo-row {
  background: var(--pa-branco);
  border-bottom: 1px solid var(--pa-linha);
}

/* busca central */
.pa-cabecalho .js-search-form .search-input,
.head-main .js-search-form .search-input {
  border: 1px solid var(--pa-linha);
  border-radius: 24px;
  background: var(--pa-marfim);
  font-family: var(--pa-sans);
  font-size: 13px;
  padding-left: 16px;
}
.pa-cabecalho .js-search-form .search-input:focus,
.head-main .js-search-form .search-input:focus {
  border-color: var(--pa-ambar);
  outline: none;
  box-shadow: 0 0 0 2px rgba(201, 138, 60, .18);
}

/* conta e carrinho */
.pa-cabecalho .utilities-icon,
.head-main .utilities-icon { color: var(--pa-tinta); }
.pa-cabecalho .badge,
.head-main .js-cart-widget-amount.badge {
  background: var(--pa-ambar);
  color: var(--pa-noite);
  font-weight: 700;
}

/* logo (hoje é texto; vira imagem horizontal quando o arquiteto subir o logo no painel) */
.head-main .logo-text h1 {
  font-family: var(--pa-serif);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--pa-tinta);
}

/* faixa de navegação do tema */
.head-nav, .head-main .head-nav { background: var(--pa-branco); border-top: 1px solid var(--pa-linha); }
.head-nav .nav-list-link {
  font-family: var(--pa-sans);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pa-tinta);
}
.head-nav .nav-list-link:hover,
.head-nav .nav-list-link.selected { color: var(--pa-ambar); }

/* layout do cabeçalho na página de teste (preview.html) */
.pa-cabecalho__linha {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  max-width: var(--pa-max);
  margin: 0 auto;
  padding: 12px var(--pa-gutter);
}
.pa-cabecalho__busca { max-width: 520px; width: 100%; justify-self: center; }
@media (max-width: 767px) {
  .pa-cabecalho__linha { grid-template-columns: auto 1fr auto; }
  .pa-cabecalho__busca { display: none; }
  .pa-cabecalho__busca-mob { padding: 0 var(--pa-gutter) 12px; }
}
@media (min-width: 768px) { .pa-cabecalho__busca-mob { display: none; } }

/* ícones do tema são SVG com currentColor: no cabeçalho claro precisam de tinta */
.head-main .utilities-icon,
.head-main .svg-icon-text,
.head-main .search-btn,
.head-main .logo-text { color: var(--pa-tinta); fill: currentColor; }
.head-main .js-search-form .search-input::placeholder { color: rgba(36, 29, 46, .55); }
/* Mega menu (desktop) e gaveta com sanfona (celular).
   Tudo com prefixo .pa-. Só aparece depois que o JS marca <html class="pa-mm-on">:
   sem JS, nada disso existe e o menu nativo do Recife segue inteiro. */

/* ---------- desktop ---------- */
/* o painel ocupa a largura da faixa de navegação, não a do item */
.pa-mm-on .head-nav { position: relative; }
.pa-mm-on .head-nav .nav-desktop,
.pa-mm-on .head-nav .container { position: static; }

.pa-megamenu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 60;
  background: var(--pa-branco);
  border-top: 1px solid var(--pa-linha);
  box-shadow: var(--pa-sombra-2);
  display: none;
  text-align: left;
}
.pa-mm-on .js-desktop-nav-item.pa-mm-host:hover > .pa-megamenu,
.pa-megamenu.pa-aberto { display: block; }

/* esconde o dropdown nativo só quando o nosso painel existe */
.pa-mm-on .pa-mm-host > .js-desktop-dropdown { display: none !important; }

.pa-megamenu__grade {
  max-width: var(--pa-max);
  margin: 0 auto;
  padding: 28px var(--pa-gutter) 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.head-nav .pa-megamenu .pa-megamenu__titulo,
.pa-megamenu__titulo {
  font-family: var(--pa-sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pa-ambar);
  margin: 0 0 12px;
}
.pa-megamenu ul { list-style: none; margin: 0; padding: 0; }
.pa-megamenu li { margin-bottom: 10px; }
.pa-megamenu, .pa-megamenu a { color: var(--pa-tinta); }
.head-nav .pa-megamenu .pa-megamenu__link,
.pa-megamenu__link {
  font-family: var(--pa-sans);
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--pa-tinta);
  text-decoration: none;
}
.pa-megamenu__link:hover { color: var(--pa-ambar); }

/* coluna "Em alta" */
.pa-megamenu__alta { border-left: 1px solid var(--pa-linha); padding-left: 24px; }
.pa-alta-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  text-decoration: none;
}
.pa-alta-item img {
  width: 56px; height: 56px; object-fit: contain;
  background: var(--pa-marfim);
  border-radius: 8px;
  display: block;
}
.pa-alta-item__casa {
  display: block;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pa-ambar);
}
.head-nav .pa-megamenu .pa-alta-item__nome,
.pa-alta-item__nome {
  display: block;
  font-family: var(--pa-serif);
  font-size: 17px;
  line-height: 1.2;
  color: var(--pa-tinta);
}

/* cartões de marca */
.pa-megamenu--marcas .pa-megamenu__grade {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1100px) {
  .pa-megamenu--marcas .pa-megamenu__grade { grid-template-columns: repeat(3, 1fr); }
}
.pa-marca-card {
  display: block;
  background: var(--pa-noite);
  border-radius: var(--pa-r-8);
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--pa-linha-noite);
}
.pa-marca-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: var(--pa-noite-2);
  display: block;
}
.head-nav .pa-megamenu .pa-marca-card__nome,
.pa-marca-card__nome {
  display: block;
  padding: 12px 10px 14px;
  text-align: center;
  color: var(--pa-marfim);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
}
.pa-marca-card:hover .head-nav .pa-megamenu .pa-marca-card__nome,
.pa-marca-card__nome { color: var(--pa-ambar); }
.pa-marca-card--todas {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  background: var(--pa-marfim);
  border: 1px dashed var(--pa-ambar);
}
.pa-marca-card--todas .head-nav .pa-megamenu .pa-marca-card__nome,
.pa-marca-card__nome { color: var(--pa-ambar); }

/* ---------- celular: gaveta com sanfona ---------- */
.pa-gaveta { font-family: var(--pa-sans); }
.pa-mm-on .pa-gaveta-nativo { display: none !important; }

.pa-gaveta__grupo { border-bottom: 1px solid var(--pa-linha); }
.pa-gaveta__botao {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: none;
  border: 0;
  padding: 16px var(--pa-gutter);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pa-tinta);
  text-align: left;
  cursor: pointer;
  min-height: 48px;
}
.pa-gaveta__botao::after {
  content: "+";
  font-size: 18px;
  line-height: 1;
  color: var(--pa-ambar);
}
.pa-gaveta__botao[aria-expanded="true"]::after { content: "–"; }
.pa-gaveta__link-direto {
  display: block;
  padding: 16px var(--pa-gutter);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pa-tinta);
  text-decoration: none;
  min-height: 48px;
}
.pa-gaveta__painel { display: none; padding: 0 0 8px; }
.pa-gaveta__painel[data-aberto="1"] { display: block; }
.pa-gaveta__sub {
  padding: 4px var(--pa-gutter) 10px;
  border-top: 1px solid var(--pa-linha);
}
.pa-gaveta__sub-titulo {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pa-ambar);
  font-weight: 700;
  margin: 12px 0 6px;
}
.pa-gaveta__painel ul { list-style: none; margin: 0; padding: 0; }
.pa-gaveta__painel li a {
  display: block;
  padding: 11px 8px;
  font-size: 14px;
  color: var(--pa-tinta);
  text-decoration: none;
}
.pa-gaveta__painel li a:active { color: var(--pa-ambar); }
.pa-gaveta__alta { padding: 8px var(--pa-gutter) 4px; }
.pa-gaveta__alta .pa-alta-item { margin-bottom: 12px; }
.pa-gaveta__marcas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 8px var(--pa-gutter) 14px;
}

/* ---------- troca nativo → nosso (só com JS on) ---------- */
/* os itens nativos continuam no DOM; sem .pa-mm-on eles aparecem normalmente */
.pa-mm-on .js-nav-desktop-list > li:not(.pa-mm-li) { display: none !important; }
.pa-mm-on .nav-primary > .nav-list { display: none !important; }
.pa-mm-li { position: static; }
.pa-mm-li > .nav-item-container > .pa-mm-topo {
  display: inline-block;
  padding: 14px 14px;
  font-family: var(--pa-sans);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pa-tinta);
  text-decoration: none;
}
.pa-mm-li:hover > .nav-item-container > .pa-mm-topo { color: var(--pa-ambar); }
/* Rodapé — 4 colunas + bandeiras + WhatsApp.
   Estiliza o rodapé nativo (.footer-menu-item/.footer-menu-link/.footer-legal)
   e serve o markup .pa-rodape da página de teste. */

.pa-rodape,
body .footer-colors {
  background: var(--pa-noite);
  color: var(--pa-marfim);
  font-family: var(--pa-sans);
  font-size: 13px;
}
.pa-rodape a,
.footer-colors .footer-menu-link { color: var(--pa-areia); text-decoration: none; }
.pa-rodape a:hover,
.footer-colors .footer-menu-link:hover { color: var(--pa-ambar); }

.pa-rodape__grade {
  max-width: var(--pa-max);
  margin: 0 auto;
  padding: 32px var(--pa-gutter) 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .pa-rodape__grade { grid-template-columns: repeat(4, 1fr); gap: 32px; }
}
.pa-rodape__titulo {
  font-family: var(--pa-serif);
  font-size: 18px;
  margin: 0 0 12px;
  color: var(--pa-marfim);
}
.pa-rodape ul { list-style: none; margin: 0; padding: 0; }
.pa-rodape li { margin-bottom: 8px; }

.pa-rodape__base {
  border-top: 1px solid var(--pa-linha-noite);
  max-width: var(--pa-max);
  margin: 16px auto 0;
  padding: 16px var(--pa-gutter) 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .pa-rodape__base { flex-direction: row; justify-content: space-between; text-align: left; }
}
.pa-rodape__bandeiras {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.pa-rodape__bandeira {
  border: 1px solid var(--pa-linha-noite);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--pa-areia);
}
.pa-rodape__zap {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--pa-ambar);
  color: var(--pa-ambar);
  border-radius: 24px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pa-rodape__legal { font-size: 11px; color: rgba(216, 198, 168, .7); line-height: 1.6; }

/* categoria */
.pa-intro{max-width:760px;margin:0 auto 24px;font-family:var(--pa-sans);color:var(--pa-tinta)} .pa-guia{max-width:860px;margin:40px auto 0;padding:0 var(--pa-gutter);font-family:var(--pa-sans);line-height:1.65;color:var(--pa-tinta)} .pa-guia h2{font-family:var(--pa-serif);font-size:28px;margin:36px 0 12px} .pa-guia h3{font-family:var(--pa-serif);font-size:22px;margin:24px 0 8px} .pa-guia table{width:100%;border-collapse:collapse;font-size:14px;margin:16px 0} .pa-guia th,.pa-guia td{border-bottom:1px solid var(--pa-linha);padding:8px 6px;text-align:left} .pa-guia th{color:var(--pa-ambar);font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* pa: CLS categoria (fase 2, 28/09) — pa-menu.js:297 move .pa-guia pra depois da
   grade via DOMContentLoaded; sem isto o elemento pinta na posição original e o
   reflow do reposicionamento conta como shift (CLS ~1.0). Escondido só na posição
   de origem (dentro de .pa-categoria-descricao): quando o JS insere o nó como
   irmão de .category-body este seletor deixa de casar e ele aparece já no lugar
   final — nunca existiu um "antes" pra comparar, então não conta como shift.
   <noscript> abaixo cobre o caso sem JS (fallback = mostra no lugar original). */
.pa-categoria-descricao .pa-guia{display:none}

/* home + rodapé (E2b) — transplante do protótipo aprovado
   (site/prototipos/home-v1/style.css). Só classes .pa-; nada de classe nativa
   sobrescrita, exceto a ocultação dos menus duplicados do rodapé nativo. */

/* ---------- moldura das seções ---------- */
.pa-secao {
  padding: var(--pa-e-40) var(--pa-gutter);
  font-family: var(--pa-sans);
}
/* correção 3 (crítica §12): filho direto de .pa-secao sempre centrado em
   x = 120 no desktop; margin: 0 auto não pode ser anulado por regra mais
   específica — por isso o título e a lista usam margin com auto, nunca 0. */
.pa-secao > * {
  max-width: var(--pa-max);
  margin-left: auto;
  margin-right: auto;
}
.pa-claro { background: var(--pa-marfim); color: var(--pa-tinta); }
.pa-noite { background: var(--pa-noite); color: var(--pa-marfim); }

/* correção 4 + régua 3.1: título de seção único — vale para o título .pa-
   e para os títulos nativos do Recife (.section-title), a mesma classe em
   home-categories.tpl, home-banners-grid.tpl e home-featured-grid.tpl. */
.pa-secao .pa-titulo,
.section-title {
  font-family: var(--pa-serif) !important;
  font-weight: 600 !important;
  font-size: var(--pa-fs-26);
  line-height: var(--pa-lh-titulo);
  letter-spacing: .01em;
  text-align: center !important;
  margin: 0 auto var(--pa-e-24) !important;
  color: inherit;
}
.pa-secao .pa-titulo::before,
.section-title::before {
  content: "";
  display: block;
  width: 120px;
  height: 20px;
  margin: 0 auto 12px;
  background-image:
    url("../images/pa-simbolo-ambar.png"),
    linear-gradient(var(--pa-ambar), var(--pa-ambar)),
    linear-gradient(var(--pa-ambar), var(--pa-ambar));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center center, left center, right center;
  background-size: 20px 20px, 40px 1px, 40px 1px;
}
.pa-secao ul { list-style: none; margin: 0 auto; padding: 0; }
.pa-secao img { max-width: 100%; height: auto; display: block; }

.pa-pill {
  display: inline-block;
  background: var(--pa-ambar);
  color: var(--pa-noite);
  font-weight: 600;
  font-size: var(--pa-fs-12);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 15px 28px;
  border: 1px solid var(--pa-ambar);
  border-radius: 24px;
  text-decoration: none;
}
.pa-pill--contorno { background: transparent; color: var(--pa-ambar); }
.pa-pill--contorno:hover { background: var(--pa-ambar); color: var(--pa-noite); }

/* ---------- confiança ---------- */
.pa-confianca { text-align: center; }
.pa-provas { display: grid; gap: 14px; margin: 0 auto 24px; }
.pa-provas li {
  border: 1px solid rgba(201, 138, 60, .35);
  border-radius: 8px;
  padding: 20px 16px;
  background: var(--pa-noite-2);
}
.pa-prova__selo {
  display: block;
  font-family: var(--pa-serif);
  font-size: 22px;
  color: var(--pa-ambar);
  margin-bottom: 8px;
}
.pa-provas p { margin: 0; font-size: var(--pa-fs-14); color: var(--pa-areia); }

/* ---------- texto-mãe da home ---------- */
.pa-home-texto .pa-intro { max-width: 70ch; margin: 0 auto 8px; }
.pa-home-texto .pa-guia { margin: 0 auto; padding: 0; max-width: 860px; }
/* recolhido só quando o JS confirma que sabe abrir (classe posta pelo pa-menu.js) */
.pa-home-texto--recolhivel .pa-guia {
  max-height: 600px;
  overflow: hidden;
  position: relative;
}
.pa-home-texto--recolhivel .pa-guia::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 160px;
  background: linear-gradient(to bottom, rgba(246, 239, 227, 0), var(--pa-marfim));
  pointer-events: none;
}
.pa-home-texto--aberto .pa-guia { max-height: none; }
.pa-home-texto--aberto .pa-guia::after { display: none; }
.pa-home-texto__mais {
  display: block;
  margin: 20px auto 0;
  background: transparent;
  border: 1px solid var(--pa-ambar);
  border-radius: 24px;
  color: var(--pa-ambar);
  font-family: var(--pa-sans);
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 13px 28px;
  cursor: pointer;
}
.pa-home-texto__mais:hover { background: var(--pa-ambar); color: var(--pa-noite); }

/* ---------- rodapé: o nativo some inteiro (dono, 28/09) ----------
   O .pa-rodape é o único rodapé visível. O que o nativo tinha de obrigatório
   (crédito Nuvemshop, claim-info) está em snipplets/pa/rodape.tpl; bandeiras
   e newsletter já vinham de lá. */
.pa-rodape ~ footer { display: none !important; margin: 0 !important; padding: 0 !important; }

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  .pa-secao { padding: var(--pa-e-64) var(--pa-gutter-desk); }
  .pa-secao .pa-titulo,
  .section-title {
    font-size: var(--pa-fs-36) !important;
    margin: 0 auto var(--pa-e-32) !important;
  }
  .pa-provas { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* =========================================================================
   Rodada 2026-09-28 — correções 6, 8, 9, 10 + pós-Top-10
   (agents/criticas/2026-09-28-ui.md §12 + conhecimento/padrao-ui.md)
   ========================================================================= */

/* ---------- correção 6: card de produto (régua 3.3) ---------- */
/* Sem campo de marca no objeto product do Recife (não há product.brand nos
   templates do tema) — rótulo de marca fica de fora aqui; ver relatório. */
.item-name.js-item-name {
  font-family: var(--pa-sans);
  font-weight: 500;
  font-size: var(--pa-fs-14);
  line-height: 1.35;
  color: var(--pa-tinta);
}
.item-price.js-price-display {
  font-family: var(--pa-sans);
  font-weight: 600;
  font-size: var(--pa-fs-16);
  color: var(--pa-tinta);
}
.item-price-container .price-compare,
.item-price-container .js-compare-price-display {
  font-family: var(--pa-sans);
  font-size: var(--pa-fs-12);
  color: var(--pa-tinta-2);
}
.item-price-container .item-installments,
.item-price-container [class*="installment"] {
  font-family: var(--pa-sans);
  font-size: var(--pa-fs-12);
  color: var(--pa-tinta-2);
}
.item-price-container [class*="payment-discount-price"],
.item-price-container .font-smallest {
  font-family: var(--pa-sans);
  font-weight: 600;
  font-size: var(--pa-fs-12);
  color: var(--pa-ambar-texto);
}

/* ---------- correção 8: tabela do guia sem rolagem da página ---------- */
.pa-guia {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pa-guia table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  white-space: nowrap;
}

/* ---------- logo v3 (régua 3.12, decisão do dono 28/09) ---------- */
/* Arte: midia/marca/logo/horizontal-v3@header.png (575x95, 6,49:1), copiada em
   static/images/logo-v3.png. `height` e não `max-height`: com max-height o
   navegador não escala a arte nova para a altura pedida.
   Celular: símbolo 32px numa linha de cabeçalho de 56px.
   Desktop (>=768): símbolo 55px numa linha de 72px. */
.pa-cabecalho .pa-logo img,
.head-main .js-desktop-logo img,
.head-main .logo img,
.head-main .logo-text-container img {
  height: 32px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.pa-cabecalho .pa-cabecalho__linha,
.head-main .head-logo-row { min-height: 56px; }
@media (min-width: 768px) {
  .pa-cabecalho .pa-logo img,
  .head-main .js-desktop-logo img,
  .head-main .logo img,
  .head-main .logo-text-container img { height: 55px; }
  .pa-cabecalho .pa-cabecalho__linha,
  .head-main .head-logo-row { min-height: 72px; }
}

/* ---------- pós-Top-10: ícones do cabeçalho em área de toque 44×44 ---------- */
.head-main .utilities-container .btn-utility,
.head-main .utilities-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* ---------- pós-Top-10: busca em 16px (evita zoom no iOS) ---------- */
.pa-cabecalho .js-search-form .search-input,
.head-main .js-search-form .search-input {
  font-size: var(--pa-fs-16);
  min-height: 44px;
}
.pa-cabecalho .js-search-form .search-input::placeholder,
.head-main .js-search-form .search-input::placeholder {
  font-size: var(--pa-fs-16);
}

/* ---------- pós-Top-10: :focus-visible global (régua §5) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.pa-pill:focus-visible,
.pa-casas a:focus-visible,
.pa-mm-topo:focus-visible,
.pa-megamenu__link:focus-visible,
.pa-gaveta__botao:focus-visible,
.pa-gaveta__link-direto:focus-visible {
  outline: 2px solid var(--pa-ambar);
  outline-offset: 2px;
}

/* ---------- correção 10: rodapé único (régua §2, §6) ---------- */
/* Um newsletter só — o do pa-rodape; o nativo (footer/footer.tpl) some.
   Mesma lógica aplicada às bandeiras nativas (a nossa já vem do component
   payment-shipping-logos dentro de .pa-rodape__bandeiras). */
.pa-rodape ~ footer .newsletter-footer,
.pa-rodape ~ footer .footer-payments-shipping-logos {
  display: none !important;
}
.pa-rodape__newsletter {
  max-width: var(--pa-max);
  margin: 0 auto var(--pa-e-24);
  padding: 0 var(--pa-gutter);
  text-align: center;
}
/* O fundo nativo da newsletter vem da cor do painel (rosado, fora da
   paleta); dentro do nosso rodapé noite ela fica sem caixa. */
.pa-rodape__newsletter .newsletter-footer {
  background: transparent !important;
}
.pa-rodape__newsletter .newsletter-form input[type="email"],
.pa-rodape__newsletter .newsletter-form .form-control {
  font-size: var(--pa-fs-16);
  min-height: 44px;
  border-radius: var(--pa-r-pill);
}
.pa-rodape__newsletter .newsletter-form .btn {
  background: var(--pa-ambar);
  color: var(--pa-noite);
  border-radius: var(--pa-r-pill);
  font-family: var(--pa-sans);
  font-weight: 600;
  font-size: var(--pa-fs-14);
  text-transform: uppercase;
  letter-spacing: .08em;
  border: 0;
  padding: 0 var(--pa-e-24);
  min-height: 44px;
}

/* =========================================================================
   Home v3 (28/09/2026) — porte do protótipo site/prototipos/home-v2 (rodada 3)
   para o tema. Só classes .pa-; nada de classe nativa sobrescrita.
   Régua: conhecimento/padrao-ui.md §2, §3.1 a §3.14, §5.
   ========================================================================= */

/* subtítulo de seção (régua 1.1) — ≤ 45 caracteres, 1 linha */
.pa-secao .pa-sub {
  font-size: var(--pa-fs-14);
  color: var(--pa-tinta-2);
  text-align: center;
  margin: calc(-1 * var(--pa-e-12)) auto var(--pa-e-24);
  max-width: 680px;
}
.pa-noite .pa-sub { color: var(--pa-areia); }

/* botões (régua 3.2) */
.pa-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 28px; border-radius: var(--pa-r-pill);
  font-family: var(--pa-sans);
  font-size: var(--pa-fs-14); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  transition: background var(--pa-t), color var(--pa-t);
}
.pa-btn--primario { background: var(--pa-noite); color: var(--pa-marfim); }
.pa-btn--primario:hover { background: var(--pa-tinta); color: var(--pa-marfim); }
.pa-btn--ambar { background: var(--pa-ambar); color: var(--pa-noite); }
.pa-btn--ambar:hover { background: var(--pa-ambar-texto); color: var(--pa-marfim); }
.pa-vertodos-linha { display: flex; justify-content: center; }
.pa-vertodos {
  display: inline-flex; align-items: center; min-height: 44px;
  width: fit-content; margin: var(--pa-e-24) auto 0;
  font-size: var(--pa-fs-12); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pa-ambar-texto);
  text-decoration: underline; text-underline-offset: 4px;
}

/* ---------- carrossel de banners (régua 3.4) ---------- */
.pa-heroi { position: relative; font-family: var(--pa-sans); }
.pa-heroi__pista { display: flex; overflow: hidden; }
.pa-slide { position: relative; min-width: 100%; display: none; }
.pa-slide.is-ativo { display: block; }
.pa-slide img { width: 100%; height: auto; display: block; object-fit: cover; }
.pa-slide__texto {
  position: absolute; inset: auto 0 0 0;
  padding: 0 var(--pa-gutter) var(--pa-e-24);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--pa-e-16);
}
.pa-slide__titulo {
  font-family: var(--pa-serif); font-weight: 600; font-size: var(--pa-fs-36);
  line-height: var(--pa-lh-titulo); margin: 0; color: var(--pa-marfim);
  max-width: 18ch; text-shadow: 0 2px 8px rgba(14, 11, 20, .45);
  font-variant-numeric: lining-nums;
}
.pa-slide--claro .pa-slide__titulo { color: var(--pa-tinta); text-shadow: none; }
.pa-heroi__pontos {
  display: flex; gap: var(--pa-e-8); justify-content: center;
  list-style: none; margin: 0; padding: var(--pa-e-16) 0 0;
}
.pa-heroi__pontos li { display: flex; }
/* o alvo tem 44x44 (régua §5); o ponto visível é o ::before */
.pa-heroi__pontos button {
  width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pa-heroi__pontos button::before {
  content: ""; display: block;
  width: 8px; height: 8px; border-radius: var(--pa-r-pill); background: var(--pa-linha);
  transition: width var(--pa-t), background var(--pa-t);
}
.pa-heroi__pontos button[aria-current="true"]::before { width: 24px; background: var(--pa-ambar); }

/* ---------- Encontre sua fragrância (6 tiles 2:1) ---------- */
/* O rótulo (FEMININO, seta) vem desenhado na arte: nenhum texto HTML por cima.
   A sobrelinha em HTML é o que separa as duas formas de descoberta. */
.pa-encontre__sobrelinha {
  font-size: var(--pa-fs-12); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--pa-tinta-2);
  margin: var(--pa-e-24) auto var(--pa-e-12);
  max-width: var(--pa-max);
}
.pa-encontre__sobrelinha:first-of-type { margin-top: 0; }
.pa-tiles {
  display: flex; gap: var(--pa-e-12);
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
}
.pa-tiles::-webkit-scrollbar { display: none; }
.pa-tiles li { flex: 0 0 82%; scroll-snap-align: start; }
.pa-tiles a {
  display: block; border-radius: var(--pa-r-8); overflow: hidden;
  background: var(--pa-marfim);
}
.pa-tiles img {
  width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover;
  transition: transform .5s ease;
}
.pa-tiles a:hover img { transform: scale(1.04); }

/* ---------- card de produto (régua 3.3) ---------- */
.pa-card { display: block; background: var(--pa-branco); position: relative; text-decoration: none; color: var(--pa-tinta); }
.pa-card__foto {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--pa-branco); aspect-ratio: 1 / 1; border-radius: var(--pa-r-4); overflow: hidden;
}
.pa-card__foto img { width: 100%; height: 100%; object-fit: contain; }
.pa-selo {
  position: absolute; top: var(--pa-e-8); left: var(--pa-e-8); z-index: 1;
  background: var(--pa-noite); color: var(--pa-marfim);
  padding: var(--pa-e-4) var(--pa-e-8); border-radius: var(--pa-r-4);
  font-size: var(--pa-fs-12); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.pa-card__texto { display: block; padding-top: var(--pa-e-12); }
.pa-card__texto > span { display: block; }
.pa-card__nome {
  font-size: var(--pa-fs-14); font-weight: 500; line-height: 1.35;
  height: 38px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pa-card__preco { font-size: var(--pa-fs-16); font-weight: 600; margin-top: var(--pa-e-8); }
.pa-card__antes { font-size: var(--pa-fs-12); color: var(--pa-tinta-2); text-decoration: line-through; }
.pa-card__parcela { font-size: var(--pa-fs-12); color: var(--pa-tinta-2); white-space: nowrap; }

/* ---------- vitrine com abas (régua 3.6) ---------- */
.pa-abas {
  display: flex; overflow-x: auto; scrollbar-width: none;
  margin: 0 auto var(--pa-e-24); max-width: var(--pa-max);
}
.pa-abas::-webkit-scrollbar { display: none; }
.pa-abas button {
  flex: 0 0 auto; min-height: 44px; padding: 0 var(--pa-e-16);
  background: none; border: 0; cursor: pointer;
  font-family: var(--pa-sans);
  font-size: var(--pa-fs-12); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pa-tinta-2); border-bottom: 2px solid transparent; white-space: nowrap;
}
.pa-abas button[aria-selected="true"] { color: var(--pa-tinta); border-bottom-color: var(--pa-ambar); }
.pa-pista {
  display: flex; gap: var(--pa-e-12);
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
}
.pa-pista::-webkit-scrollbar { display: none; }
.pa-pista > * { flex: 0 0 156px; scroll-snap-align: start; }
.pa-vitrine [role="tabpanel"][hidden] { display: none; }

/* ---------- TOP 5 (régua 3.7) ---------- */
.pa-top5 .pa-pista > * { flex: 0 0 148px; }
.pa-top5__card {
  position: relative; display: block; text-align: center; overflow: hidden;
  border-radius: var(--pa-r-8);
  background: var(--pa-noite-2); border: 1px solid var(--pa-linha-noite);
  padding: var(--pa-e-12) var(--pa-e-12) var(--pa-e-16);
  text-decoration: none;
}
.pa-top5__topo { display: flex; align-items: flex-start; gap: var(--pa-e-8); }
.pa-top5__num {
  font-family: var(--pa-serif); font-weight: 600; font-size: 72px;
  line-height: 1; color: var(--pa-areia); text-align: left; flex: 0 0 auto;
  font-variant-numeric: lining-nums;
}
/* poço branco: a foto do CDN é opaca; sobre o noite o quadrado branco é intencional */
.pa-top5__poco {
  flex: 1 1 auto; background: var(--pa-branco); border-radius: var(--pa-r-8);
  padding: var(--pa-e-8); display: flex; align-items: center; justify-content: center;
}
.pa-top5__card img { width: 100%; height: 120px; object-fit: contain; }
.pa-top5__nome {
  font-size: var(--pa-fs-14); font-weight: 500; line-height: 1.35;
  margin-top: var(--pa-e-12); height: 38px; overflow: hidden; color: var(--pa-marfim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pa-top5__fio { display: block; width: 40px; height: 1px; background: var(--pa-ambar); margin: var(--pa-e-8) auto 0; }
.pa-top5__link {
  display: inline-block; margin-top: var(--pa-e-8);
  font-size: var(--pa-fs-12); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pa-ambar); text-decoration: underline; text-underline-offset: 4px;
}

/* ---------- faixa de garantias (régua 3.10) ---------- */
.pa-garantias ul {
  display: flex; gap: var(--pa-e-16);
  overflow-x: auto; scrollbar-width: none;
}
.pa-garantias ul::-webkit-scrollbar { display: none; }
.pa-garantias li { flex: 0 0 150px; }
.pa-garantias svg { width: 40px; height: 40px; stroke: var(--pa-ambar); stroke-width: 1.5; fill: none; }
.pa-garantias h3 {
  font-family: var(--pa-sans);
  font-size: var(--pa-fs-12); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pa-tinta); margin: var(--pa-e-12) 0 0;
}
.pa-garantias p { font-size: var(--pa-fs-14); color: var(--pa-tinta-2); margin: var(--pa-e-4) 0 0; line-height: 1.35; }

/* ---------- casas (régua 3.9) ---------- */
.pa-casas {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--pa-linha); border-left: 1px solid var(--pa-linha);
  background: var(--pa-branco);
}
.pa-casas li { display: flex; }
.pa-casas a,
.pa-casas > li > .pa-wordmark {
  flex: 1 1 auto; min-height: 100px;
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--pa-linha); border-bottom: 1px solid var(--pa-linha);
  text-decoration: none;
}
.pa-wordmark {
  font-family: var(--pa-serif); font-weight: 600; font-size: var(--pa-fs-22);
  letter-spacing: .08em; text-transform: uppercase; color: var(--pa-tinta);
  max-width: 80%; text-align: center; line-height: 1.15;
}
.pa-casas > li > .pa-wordmark { color: var(--pa-tinta-2); max-width: none; padding: 0 var(--pa-e-8); }
.pa-casas a:hover .pa-wordmark { color: var(--pa-ambar-texto); }

/* ---------- FAQ (régua 3.11) ---------- */
.pa-faq__lista { max-width: 760px; margin: 0 auto; }
.pa-faq__item { border-bottom: 1px solid var(--pa-linha); }
.pa-faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--pa-e-16);
  padding: var(--pa-e-16) 0; min-height: 56px; text-align: left;
  background: none; border: 0; cursor: pointer;
  font-family: var(--pa-sans);
  font-size: var(--pa-fs-16); font-weight: 500; color: var(--pa-tinta);
}
.pa-faq__q span { font-size: var(--pa-fs-18); color: var(--pa-ambar-texto); }
.pa-faq__r { padding: 0 0 var(--pa-e-16); margin: 0; font-size: var(--pa-fs-16); line-height: var(--pa-lh-texto); }
.pa-faq__r[hidden] { display: none; }

/* ---------- bloco de confiança: o botão estava colado nos cards ---------- */
.pa-confianca .pa-provas { margin-bottom: 0; }
.pa-confianca .pa-pill {
  margin-top: var(--pa-e-32);
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- desktop (>= 900px) ---------- */
@media (min-width: 900px) {
  .pa-secao .pa-sub { font-size: var(--pa-fs-16); margin-bottom: var(--pa-e-32); }
  .pa-vertodos { margin-top: var(--pa-e-32); }

  .pa-slide__texto {
    inset: 0 auto 0 0; width: 44%; justify-content: center;
    padding-left: max(var(--pa-gutter-desk), calc((100vw - var(--pa-max)) / 2));
  }
  .pa-slide__titulo { font-size: var(--pa-fs-48); max-width: 16ch; }

  .pa-encontre__sobrelinha { margin-top: var(--pa-e-32); }
  .pa-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pa-e-24); overflow: visible; }
  .pa-tiles li { flex: none; }

  .pa-abas { justify-content: center; }
  .pa-pista { gap: var(--pa-e-24); overflow: visible; flex-wrap: wrap; justify-content: center; }
  .pa-pista > * { flex: 0 0 220px; }
  .pa-top5 .pa-pista > * { flex: 0 0 220px; }
  .pa-top5__card { padding: var(--pa-e-16) var(--pa-e-16) var(--pa-e-24); }
  .pa-top5__num { font-size: 112px; }
  .pa-top5__card img { height: 180px; }

  .pa-garantias ul { justify-content: center; gap: 0; overflow: visible; }
  .pa-garantias li { flex: 1 1 0; padding: 0 var(--pa-e-24); border-right: 1px solid var(--pa-linha); }
  .pa-garantias li:last-child { border-right: 0; }

  .pa-casas { grid-template-columns: repeat(6, 1fr); }
  .pa-casas a,
  .pa-casas > li > .pa-wordmark { min-height: 112px; }
}

/* ---------- movimento reduzido (régua §5) ---------- */
@media (prefers-reduced-motion: reduce) {
  .pa-tiles img, .pa-btn { transition-duration: .01ms; }
}

/* ---------- 1º slide: herói do GPT (ordem do arquiteto, 28/09) ----------
   No celular a fonte ainda é banner-marca-mobile (cena escura): o texto segue
   o padrão dos outros slides — marfim no rodapé da arte, com sombra.
   No desktop (>= 900px) a arte é 1920x800 com 45% da esquerda livre e o texto
   vira tinta escura na zona medida em pixels: imagem x 160-600, y 150-490,
   pior pixel 4,58:1 contra #241D2E (o botão é sólido e não depende da arte). */
.pa-slide__sobrelinha,
.pa-slide__sub { display: none; }
@media (min-width: 900px) {
  .pa-slide--heroi .pa-slide__texto {
    inset: 0 auto 0 0;
    /* a coluna termina em x = 600px da arte (31,25vw): é onde acaba a zona
       medida como legível. O padding-left é o mesmo x = 120 do resto. */
    width: min(calc(max(var(--pa-gutter-desk), (100vw - var(--pa-max)) / 2) + 330px), 31.25vw);
    justify-content: center;
    gap: var(--pa-e-12);
    padding-left: max(var(--pa-gutter-desk), calc((100vw - var(--pa-max)) / 2));
    padding-bottom: 0;
  }
  /* 36px e não 48: a coluna legível desta arte tem 330px e "perfumaria árabe"
     a 48px não cabe em 2 linhas (medido). O dono pediu 2 linhas. */
  .pa-slide--heroi .pa-slide__titulo {
    color: var(--pa-tinta); text-shadow: none; max-width: none;
    font-size: var(--pa-fs-36);
  }
  .pa-slide--heroi .pa-slide__sobrelinha {
    display: flex; align-items: center; gap: var(--pa-e-8);
    margin: 0; color: var(--pa-tinta);
    font-size: var(--pa-fs-12); font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
  }
  /* o traço é grafismo: fica na tinta, não no âmbar — sobre esta arte o
     âmbar-texto cai a 1,66:1 no pior pixel e reprovaria os 3:1 da régua §5 */
  .pa-slide--heroi .pa-slide__sobrelinha span {
    display: block; width: 40px; height: 1px; background: var(--pa-tinta);
  }
  .pa-slide--heroi .pa-slide__sub {
    display: block; margin: 0; color: var(--pa-tinta);
    font-size: var(--pa-fs-18); line-height: var(--pa-lh-texto);
  }
}
/* entre 900 e 1199 a coluna encolhe junto com a arte: o título desce um degrau
   da escala para não virar 3 linhas */
@media (min-width: 900px) and (max-width: 1199px) {
  .pa-slide--heroi .pa-slide__titulo { font-size: var(--pa-fs-36); }
  .pa-slide--heroi .pa-slide__sub { font-size: var(--pa-fs-16); }
}

/* ---------- cabeçalho transparente sobre o 1º banner — só home, só desktop
   (decisão do dono, 28/09/2026). Breakpoint -md do cabeçalho nativo (768px,
   o mesmo que d-md-none/d-none d-md-block usados em header.tpl) — não o
   900px das artes do carrossel, que é outra decisão (largura da imagem).
   O JS (pa-home.js) liga/desliga .pa-topo-transparente no <body> conforme
   scroll, mega menu e foco; tudo aqui é passivo e depende só dessa classe.
   Sem JS (ou fora home+desktop) nada muda: cabeçalho sólido, banner no lugar
   de sempre — progressive enhancement, igual ao resto do tema.
   --pa-head-h é medido pelo JS; o fallback 157px é a altura real hoje
   (30px de barra + 157px de cabeçalho com busca grande e logo centralizado),
   então mesmo sem JS a home já nasce sem faixa branca entre header e banner. */
@media (min-width: 768px) {
  body.template-home .pa-heroi {
    margin-top: calc(-1 * var(--pa-head-h, 157px));
  }

  body.template-home .head-main,
  body.template-home .head-main .head-logo-row,
  body.template-home .head-main .head-nav {
    transition: background-color .2s ease, border-color .2s ease;
  }

  /* estado transparente: só existe com a classe que o JS liga/desliga */
  body.template-home.pa-topo-transparente .head-main,
  body.template-home.pa-topo-transparente .head-main.head-colors,
  body.template-home.pa-topo-transparente .head-main .head-logo-row,
  body.template-home.pa-topo-transparente .head-main .head-nav {
    background: transparent;
    border-color: transparent;
  }
  /* degradê noite → transparente: sai do cabeçalho e morre sobre o banner
     (180% da altura do cabeçalho), sem aresta no pé do .head-main. Os slides
     claros (.pa-slide--claro) não passam por aqui: com um deles ativo o JS
     tira .pa-topo-transparente e o cabeçalho fica sólido, então o degradê só
     precisa servir às artes escuras/médias. Paradas em curva (não linear) para
     não desenhar linha onde a inclinação muda. z-index negativo fica confinado
     ao stacking context do .head-main (position+z-index nativos): acima do
     banner, atrás do conteúdo do cabeçalho. */
  body.template-home.pa-topo-transparente .head-main::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 180%;
    z-index: -1;
    background: linear-gradient(to bottom,
      rgba(14, 11, 18, .70) 0%,
      rgba(14, 11, 18, .66) 30%,
      rgba(14, 11, 18, .62) 50%,
      rgba(14, 11, 18, .44) 65%,
      rgba(14, 11, 18, .20) 80%,
      rgba(14, 11, 18, .05) 92%,
      rgba(14, 11, 18, 0) 100%);
    pointer-events: none;
  }

  body.template-home.pa-topo-transparente .head-main .utilities-icon,
  body.template-home.pa-topo-transparente .head-main .svg-icon-mask,
  body.template-home.pa-topo-transparente .head-main .search-btn,
  body.template-home.pa-topo-transparente .head-main .logo-text,
  body.template-home.pa-topo-transparente .head-nav .nav-list-link {
    color: var(--pa-marfim);
  }
  body.template-home.pa-topo-transparente .head-nav .nav-list-link:hover,
  body.template-home.pa-topo-transparente .head-nav .nav-list-link.selected {
    color: var(--pa-ambar);
  }
  body.template-home.pa-topo-transparente .js-search-form .search-input {
    background: rgba(246, 239, 227, .22);
    border-color: rgba(246, 239, 227, .6);
    color: var(--pa-marfim);
  }
  body.template-home.pa-topo-transparente .js-search-form .search-input::placeholder {
    color: rgba(246, 239, 227, .85);
  }
  body.template-home.pa-topo-transparente .js-search-form .search-input:focus {
    border-color: var(--pa-marfim);
    box-shadow: 0 0 0 2px rgba(246, 239, 227, .28);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.template-home .head-main,
  body.template-home .head-main .head-logo-row,
  body.template-home .head-main .head-nav {
    transition: none;
  }
}

/* ---------- Frente 1 da home v3 (Tasks 01–03, 05–06), 28/09/2026 ---------- */

/* Task 02 — barra superior: #0E0B12 é o valor literal da task (não o
   --pa-noite #0E0B14); 34px no desktop, 30px no celular. */
.pa-barra-topo { background: #0E0B12; color: var(--pa-areia); }
.pa-barra-topo ul {
  height: 34px; padding: 0 var(--pa-gutter); flex-wrap: nowrap;
  gap: 0 var(--pa-e-16);
}
.pa-barra-topo li {
  font-size: var(--pa-fs-12); font-weight: 500; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.pa-barra-topo li + li::before { margin-right: var(--pa-e-16); }
/* no celular as três frases não cabem numa linha de 343px a 12px: uma de
   cada vez, em rodízio de 9s; com movimento reduzido fica só a primeira */
@media (max-width: 767px) {
  .pa-barra-topo ul { position: relative; height: 30px; }
  .pa-barra-topo li {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    opacity: 0; animation: pa-barra-rodizio 9s infinite;
  }
  .pa-barra-topo li + li::before { content: none; }
  .pa-barra-topo li:nth-child(2) { animation-delay: 3s; }
  .pa-barra-topo li:nth-child(3) { animation-delay: 6s; }
}
@keyframes pa-barra-rodizio {
  0%, 30% { opacity: 1; }
  36%, 94% { opacity: 0; }
  100% { opacity: 1; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .pa-barra-topo li { animation: none; }
  .pa-barra-topo li:first-child { opacity: 1; }
}

/* Task 01 — contador do carrinho discreto: pequeno, em noite/areia, sem o
   disco âmbar chamativo; tamanho no mínimo da escala (12px) */
.head-main .js-cart-widget-amount.badge {
  min-width: 16px; height: 16px; padding: 0 var(--pa-e-4);
  border-radius: var(--pa-r-pill);
  background: var(--pa-noite); color: var(--pa-areia);
  font-size: var(--pa-fs-12); font-weight: 500; line-height: 16px;
}
body.template-home.pa-topo-transparente .head-main .js-cart-widget-amount.badge {
  background: var(--pa-marfim); color: var(--pa-noite);
}

/* Task 03 — navegação: caixa alta, espaçada, sans 500, hover âmbar */
@media (min-width: 768px) {
  .head-nav .nav-list-link.pa-mm-topo {
    font-family: var(--pa-sans); font-weight: 500; font-size: var(--pa-fs-12);
    letter-spacing: .14em; text-transform: uppercase;
  }
  .head-nav .pa-mm-li { padding: 0 var(--pa-e-16); }
  .head-nav .pa-mm-li .nav-list-link:hover { color: var(--pa-ambar-texto); }
}

/* Tasks 05–06 — CTA do carrossel: ~48px, padding generoso, raio moderado */
.pa-heroi .pa-btn {
  min-height: 48px; padding: 0 var(--pa-e-32);
  border-radius: var(--pa-r-8);
}

/* herói desktop: 45% texto / 55% imagem, margem lateral 9%, bloco 420–480px,
   centrado na parte do banner que o cabeçalho transparente não cobre */
@media (min-width: 900px) {
  .pa-slide__texto { padding-left: 9vw; width: 45%; }
  body.template-home .pa-slide__texto { padding-top: var(--pa-head-h, 157px); }
  .pa-slide--heroi .pa-slide__texto {
    width: 45%; padding-left: 9vw; gap: var(--pa-e-16);
  }
  .pa-slide--heroi .pa-slide__texto > * { max-width: 450px; }
  .pa-slide--heroi .pa-slide__titulo { font-size: var(--pa-fs-48); }
  .pa-slide--heroi .pa-slide__texto .pa-btn { margin-top: var(--pa-e-8); }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .pa-slide--heroi .pa-slide__titulo { font-size: var(--pa-fs-36); }
}

/* herói celular (slides do GPT): imagem → overlay → texto → CTA. A arte 4:5
   sobe 16% da largura (corta céu, não frasco) e a caixa mantém 750x900, então
   o carrossel não muda de altura entre slides. Os frascos terminam a ~55% da
   caixa; o overlay noite cobre só a base (água e pedra) e garante o contraste
   do texto marfim, qualquer que seja o pixel atrás. A arte cresce 13,3% (corta
   ~25px de cada lado e 60px de céu) para a base não ficar vazia. */
@media (max-width: 899px) {
  /* tela cheia (dono, 29/09): a caixa ocupa a altura visível e a arte cobre por
     object-fit — corta laterais, não frasco. */
  .pa-slide, .pa-slide--gpt { aspect-ratio: auto; height: calc(100svh - 30px); overflow: hidden; }
  .pa-slide picture { display: block; height: 100%; }
  .pa-slide img, .pa-slide--gpt img { width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; object-position: 60% 40%; }
  .pa-slide--gpt::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%;
    background: linear-gradient(to top,
      rgba(14, 11, 18, .90) 0%, rgba(14, 11, 18, .88) 50%,
      rgba(14, 11, 18, .70) 75%, rgba(14, 11, 18, 0) 100%);
    pointer-events: none;
  }
  .pa-slide--gpt .pa-slide__texto { z-index: 1; gap: var(--pa-e-12); padding-bottom: var(--pa-e-16); }
  .pa-slide--gpt .pa-slide__titulo { color: var(--pa-marfim); text-shadow: none; }
}

/* Task 01 — a busca cabe o placeholder inteiro ("Buscar perfumes, marcas ou
   produtos…" a 16px mede ~390px): coluna da busca de 25% para 32% no desktop
   e a do logo de 50% para 36%, o que mantém o logo no centro da página */
@media (min-width: 1200px) {
  .head-main .js-search-utility { max-width: 32%; flex-basis: 32%; }
  .head-main .js-logo-container.col-md-6 { max-width: 36%; flex-basis: 36%; }
  .head-main .js-search-utility .js-search-form { max-width: 420px; }
}
/* herói desktop: o bloco para em 420px (x ≈ 550 em 1440) — depois disso a arte
   já tem açafrão e flores atrás do apoio, e a tinta perde contraste */
@media (min-width: 900px) {
  .pa-slide--heroi .pa-slide__texto > * { max-width: 420px; }
}

/* herói desktop: véu atrás do texto, só na coluna da esquerda, para o pior
   pixel da arte não derrubar o contraste (medido por pixel, ver relatório).
   Slide 1: véu marfim sob a tinta. Slide 2: véu noite sob o marfim (a
   lanterna acesa atrás de "despercebida" dava 1,02:1 sem ele). */
@media (min-width: 900px) {
  .pa-slide--gpt::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to right,
      rgba(14, 11, 18, .72) 0%, rgba(14, 11, 18, .62) 30%,
      rgba(14, 11, 18, .30) 42%, rgba(14, 11, 18, 0) 52%);
  }
  .pa-slide--heroi.pa-slide--gpt::after {
    background: linear-gradient(to right,
      rgba(246, 239, 227, .62) 0%, rgba(246, 239, 227, .55) 30%,
      rgba(246, 239, 227, .25) 40%, rgba(246, 239, 227, 0) 48%);
  }
  .pa-slide--gpt .pa-slide__texto { z-index: 1; }
}

/* ---------- menu cabe inteiro entre 768 e 1365 px (print do Bruno, 28/09) ----------
   A 1000 px a lista pedia 1173 px e tinha 930: o tema virava faixa com setas e
   cortava "CORPO E BANHO". Menos respiro lateral e tracking nessa faixa. */
@media (min-width: 768px) and (max-width: 1365px) {
  .head-nav .nav-desktop-list > li { padding-left: 8px; padding-right: 8px; }
  .head-nav .nav-list-link { letter-spacing: .06em; }
}

/* ---------- cabeçalho transparente sobre slide CLARO (28/09) ----------
   Texto tinta, logo âmbar (o do painel) e véu marfim no lugar do degradê
   noite. O JS liga .pa-topo-claro junto com .pa-topo-transparente. */
@media (min-width: 768px) {
  body.template-home.pa-topo-transparente.pa-topo-claro .head-main::before {
    background: linear-gradient(to bottom,
      rgba(246, 239, 227, .92) 0%,
      rgba(246, 239, 227, .88) 30%,
      rgba(246, 239, 227, .62) 50%,
      rgba(246, 239, 227, .36) 65%,
      rgba(246, 239, 227, .15) 80%,
      rgba(246, 239, 227, .04) 92%,
      rgba(246, 239, 227, 0) 100%);
  }
  body.template-home.pa-topo-transparente.pa-topo-claro .head-main .utilities-icon,
  body.template-home.pa-topo-transparente.pa-topo-claro .head-main .svg-icon-mask,
  body.template-home.pa-topo-transparente.pa-topo-claro .head-main .search-btn,
  body.template-home.pa-topo-transparente.pa-topo-claro .head-main .logo-text,
  body.template-home.pa-topo-transparente.pa-topo-claro .head-nav .nav-list-link {
    color: var(--pa-tinta);
  }
  body.template-home.pa-topo-transparente.pa-topo-claro .js-search-form .search-input {
    background: rgba(255, 255, 255, .55);
    border-color: rgba(36, 29, 46, .25);
    color: var(--pa-tinta);
  }
  body.template-home.pa-topo-transparente.pa-topo-claro .js-search-form .search-input::placeholder {
    color: rgba(36, 29, 46, .6);
  }
  body.template-home.pa-topo-transparente.pa-topo-claro .head-main .js-cart-widget-amount.badge {
    background: var(--pa-noite); color: var(--pa-areia);
  }
}

/* ---------- QA home v3 (28/09): texto dos slides 3 e 4 no celular ----------
   Esses slides não são .pa-slide--gpt e não herdavam o véu do pé: título e
   botão caíam direto nos rótulos dos frascos. Mesmo véu do gpt, na cor do
   slide (marfim sob a tinta no claro, noite sob o marfim no 4). */
@media (max-width: 899px) {
  .pa-slide:not(.pa-slide--gpt)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
    background: linear-gradient(to top,
      rgba(14, 11, 18, .88) 0%, rgba(14, 11, 18, .82) 55%,
      rgba(14, 11, 18, .55) 80%, rgba(14, 11, 18, 0) 100%);
    pointer-events: none;
  }
  .pa-slide--claro:not(.pa-slide--gpt)::after {
    background: linear-gradient(to top,
      rgba(246, 239, 227, .92) 0%, rgba(246, 239, 227, .86) 55%,
      rgba(246, 239, 227, .58) 80%, rgba(246, 239, 227, 0) 100%);
  }
  .pa-slide:not(.pa-slide--gpt) .pa-slide__texto { z-index: 1; }
  .pa-slide:not(.pa-slide--gpt) .pa-slide__titulo { text-shadow: none; }
}
/* QA home v3 (28/09): logo âmbar sobre o véu marfim do slide claro dava
   ~4,1:1 no pior pixel; o véu já está no limite do "sutil". Escurece só o
   tom do logo nesse estado, sem trocar a arte. */
@media (min-width: 768px) {
  body.template-home.pa-topo-transparente.pa-topo-claro #logo .logo-img { filter: brightness(.82); }
}
/* QA home v3 (28/09, ordem do arquiteto): enquanto o webp não chega, o herói
   ficava branco e parecia "sem banner". Fundo noite + proporção reservada da
   arte (750x900 celular, 1920x800 desktop): sem área branca nem salto. */
.pa-slide { background: var(--pa-noite); aspect-ratio: 750 / 900; }
/* o <img> traz width/height 750x900 da arte do celular: sem isto, no desktop
   ele reserva 1200px de altura (a 1000) até o webp desktop chegar */
@media (min-width: 900px) { .pa-slide, .pa-slide img { aspect-ratio: 1920 / 800; } }

/* ---------- cabeçalho: assinatura própria (direção aprovada pelo dono, 28/09) ----------
   Translúcido sobre o banner com degradê vinho→transparente (--pa-vinho, não
   o preto chapado do King); ao rolar vira sólido MARFIM com logo escura
   (a do painel), em transição de ~250ms. O véu vive sempre no ::before e só
   muda de opacidade — por isso a troca é suave e não "pisca". No celular não
   há transparente: o sólido também passa a marfim, por coerência. */
body.template-home .head-main,
body.template-home .head-main.head-colors,
body.template-home .head-main .head-logo-row,
body.template-home .head-main .head-nav { background: var(--pa-marfim); }
@media (min-width: 768px) {
  body.template-home .head-main,
  body.template-home .head-main .head-logo-row,
  body.template-home .head-main .head-nav {
    transition: background-color .25s ease, border-color .25s ease;
  }
  body.template-home .head-main .utilities-icon,
  body.template-home .head-main .svg-icon-mask,
  body.template-home .head-main .search-btn,
  body.template-home .head-main .logo-text,
  body.template-home .head-nav .nav-list-link,
  body.template-home .js-search-form .search-input { transition: color .25s ease, background-color .25s ease, border-color .25s ease; }
  body.template-home .head-main::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 180%;
    z-index: -1; pointer-events: none; opacity: 0; transition: opacity .25s ease;
  }
  body.template-home.pa-topo-transparente .head-main::before {
    opacity: 1;
    background: linear-gradient(to bottom,
      rgba(42, 15, 24, .40) 0%,
      rgba(34, 13, 21, .34) 30%,
      rgba(24, 12, 19, .24) 50%,
      rgba(14, 11, 18, .14) 65%,
      rgba(14, 11, 18, .06) 80%,
      rgba(14, 11, 18, .02) 92%,
      rgba(14, 11, 18, 0) 100%);
  }
  /* 28/09 (Bruno): véu vinho bem mais fraco para a foto ficar limpa; a leitura vem da sombra no texto */
  body.template-home.pa-topo-transparente:not(.pa-topo-claro) .head-nav .nav-list-link,
  body.template-home.pa-topo-transparente:not(.pa-topo-claro) .head-main .logo-text { text-shadow: 0 1px 3px rgba(14, 11, 18, .75), 0 0 12px rgba(14, 11, 18, .45); }
  body.template-home.pa-topo-transparente:not(.pa-topo-claro) #logo .logo-img { filter: drop-shadow(0 1px 3px rgba(14, 11, 18, .6)); }
  /* menu: marfim com hover dourado suave (areia), em vez do âmbar cheio */
  body.template-home.pa-topo-transparente:not(.pa-topo-claro) .head-nav .nav-list-link:hover,
  body.template-home.pa-topo-transparente:not(.pa-topo-claro) .head-nav .nav-list-link.selected { color: var(--pa-areia); }
}
@media (min-width: 768px) {
  body.template-home.pa-topo-transparente.pa-topo-claro .head-main::before {
    background: linear-gradient(to bottom,
      rgba(246, 239, 227, .92) 0%,
      rgba(246, 239, 227, .88) 30%,
      rgba(246, 239, 227, .62) 50%,
      rgba(246, 239, 227, .36) 65%,
      rgba(246, 239, 227, .15) 80%,
      rgba(246, 239, 227, .04) 92%,
      rgba(246, 239, 227, 0) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.template-home .head-main, body.template-home .head-main *,
  body.template-home .head-main::before, body.template-home .head-nav .nav-list-link { transition: none !important; }
}
/* sólido marfim: "logo escura" (dono) — o âmbar da arte sobre marfim dava
   4,3:1 no celular; mesmo escurecimento do slide claro, sem trocar a arte */
body.template-home:not(.pa-topo-transparente) #logo .logo-img { filter: brightness(.82); }

/* ---------- ajuste fino do herói (Bruno, 28/09) ----------
   1) slide 1 tem o topo claro: entra no modo claro do cabeçalho (classe no tpl).
   2) celular: o véu cobria 40–50% da foto e atravessava os frascos → ~32%.
   3) CTA: mesma largura em todos os slides e letra mais delicada. */
@media (max-width: 899px) {
  .pa-slide--gpt::after, .pa-slide:not(.pa-slide--gpt)::after { height: 32%; }
  .pa-slide .pa-slide__titulo { font-size: 26px; line-height: 1.15; }
  .pa-slide .pa-slide__texto { gap: var(--pa-e-12); padding-bottom: var(--pa-e-16); }
}
.pa-heroi .pa-btn {
  min-width: 260px; min-height: 44px; padding: 0 var(--pa-e-24);
  font-size: 12px; font-weight: 500; letter-spacing: .16em;
}
@media (max-width: 899px) { .pa-heroi .pa-btn { min-width: 220px; min-height: 42px; font-size: 11px; } }
/* CTA com largura fixa: o texto mais longo ("Ver perfumes masculinos") cabe e todos ficam iguais */
.pa-heroi .pa-btn { width: 280px; min-width: 0; padding: 0 var(--pa-e-12); }
@media (max-width: 899px) { .pa-heroi .pa-btn { width: 260px; letter-spacing: .14em; } }

/* ---------- barra superior: uma mensagem por vez (ordem do dono, 28/09) ----------
   Celular e desktop. As três frases continuam no HTML; cada uma fica ~4s:
   some (fade-out), troca, entra (fade-in) — sem slide, sem ticker. Altura fixa
   (30px celular / 34px desktop), então não há layout shift. Com movimento
   reduzido não anima: fica só a primeira frase. */
.pa-barra-topo ul { position: relative; height: 30px; }
.pa-barra-topo li {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; letter-spacing: .08em;
  opacity: 0; animation: pa-barra-troca 12s infinite;
}
.pa-barra-topo li + li::before,
.pa-barra-topo ul li + li::before { content: none; display: none; }
.pa-barra-topo li:nth-child(2) { animation-delay: 4s; }
.pa-barra-topo li:nth-child(3) { animation-delay: 8s; }
@media (min-width: 768px) {
  .pa-barra-topo ul { height: 34px; }
  .pa-barra-topo li { font-size: 14px; }
}
/* fix 28/09 (régua §3.16): cross-fade — a próxima entra enquanto a atual sai;
   delays negativos + fill both = a 1ª pintura já tem uma frase em opacidade 1 */
.pa-barra-topo li { animation-fill-mode: both; }
.pa-barra-topo li:nth-child(2) { animation-delay: -8s; }
.pa-barra-topo li:nth-child(3) { animation-delay: -4s; }
@keyframes pa-barra-troca {
  0%, 30% { opacity: 1; }
  36%, 94% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pa-barra-topo li { animation: none; opacity: 0; }
  .pa-barra-topo li:first-child { opacity: 1; }
}

/* ---------- cabeçalho transparente no CELULAR (mockup + ordem do dono, 28/09) ----------
   Só home, só < 768. Mesmo contrato do desktop: o JS liga .pa-topo-transparente
   (topo) e .pa-topo-claro (hero claro sob o cabeçalho); sem JS fica sólido
   marfim. SEM véu atrás do cabeçalho (ordem do dono): o contraste vem da cor
   do traço escolhida por slide + sombra leve no traço. Linha de 60px:
   ☰ | logo centrado | conta + carrinho. A busca fica fora do fluxo (absoluta,
   logo abaixo): some no topo e aparece ao rolar sem empurrar a página. */
@media (max-width: 767px) {
  body.template-home .pa-heroi { margin-top: calc(-1 * var(--pa-head-h, 60px)); }

  body.template-home .head-main .head-logo-row > .container { padding-left: 20px; padding-right: 20px; }
  body.template-home .head-main .head-logo-row .row { height: 60px; flex-wrap: nowrap; }
  body.template-home .head-main .head-logo-row { padding-top: 0; padding-bottom: 0; }
  /* ☰ com a mesma largura de conta + carrinho: o logo fica no centro da tela */
  body.template-home .head-main .col-utility.d-md-none { flex: 0 0 88px; max-width: 88px; }
  /* conta ao lado do carrinho (o tema esconde no celular) */
  body.template-home .head-main .js-utility-col.text-right.d-none { display: block !important; flex: 0 0 44px; width: 44px; max-width: 44px; }
  /* logo ~10% menor que o de hoje (30px → 27px de altura, ~163px de largura):
     é o que cabe entre ☰ (88) e conta + carrinho (88) em 390 */
  body.template-home .head-main .js-logo-container { min-width: 0; }
  body.template-home .head-main #logo .logo-img { height: 27px; width: auto; max-width: 100%; max-height: none; }
  /* contador do carrinho: 18px, secundário */
  body.template-home .head-main .js-cart-widget-amount.badge {
    min-width: 18px; height: 18px; line-height: 18px; font-size: 12px; font-weight: 500;
  }

  body.template-home .head-main .js-big-search-mobile {
    position: absolute; left: 0; right: 0; top: 100%;
    padding: 0 20px 8px; background: var(--pa-marfim);
    border-bottom: 1px solid var(--pa-linha);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  body.template-home .head-main .js-big-search-mobile .search-input { height: 46px; }

  body.template-home .head-main,
  body.template-home .head-main .head-logo-row { transition: background-color .25s ease, border-color .25s ease; }
  body.template-home .head-main .utilities-icon,
  body.template-home .head-main .svg-icon-mask,
  body.template-home .head-main .logo-text { transition: color .25s ease, filter .25s ease; }

  body.template-home.pa-topo-transparente .head-main,
  body.template-home.pa-topo-transparente .head-main.head-colors,
  body.template-home.pa-topo-transparente .head-main .head-logo-row { background: transparent; border-color: transparent; }
  body.template-home.pa-topo-transparente .head-main::before { content: none; }
  body.template-home.pa-topo-transparente .head-main .js-big-search-mobile {
    opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none;
  }
  /* hero escuro: traço marfim com sombra leve */
  body.template-home.pa-topo-transparente .head-main .utilities-icon,
  body.template-home.pa-topo-transparente .head-main .svg-icon-mask,
  body.template-home.pa-topo-transparente .head-main .logo-text { color: var(--pa-marfim); }
  body.template-home.pa-topo-transparente:not(.pa-topo-claro) .head-main .utilities-icon,
  body.template-home.pa-topo-transparente:not(.pa-topo-claro) .head-main .svg-icon-mask { filter: drop-shadow(0 1px 2px rgba(14, 11, 18, .75)) drop-shadow(0 0 6px rgba(14, 11, 18, .45)); }
  body.template-home.pa-topo-transparente:not(.pa-topo-claro) #logo .logo-img { filter: drop-shadow(0 1px 2px rgba(14, 11, 18, .75)) drop-shadow(0 0 8px rgba(14, 11, 18, .45)); }
  body.template-home.pa-topo-transparente .head-main .js-cart-widget-amount.badge { background: var(--pa-marfim); color: var(--pa-noite); }
  /* hero claro: traço tinta, logo âmbar escurecido, sombra marfim leve */
  body.template-home.pa-topo-transparente.pa-topo-claro .head-main .utilities-icon,
  body.template-home.pa-topo-transparente.pa-topo-claro .head-main .svg-icon-mask,
  body.template-home.pa-topo-transparente.pa-topo-claro .head-main .logo-text { color: var(--pa-tinta); filter: drop-shadow(0 0 2px rgba(246, 239, 227, .9)) drop-shadow(0 0 6px rgba(246, 239, 227, .7)); }
  body.template-home.pa-topo-transparente.pa-topo-claro #logo .logo-img { filter: brightness(.45) drop-shadow(0 0 2px rgba(246, 239, 227, .9)) drop-shadow(0 0 8px rgba(246, 239, 227, .75)); }
  body.template-home.pa-topo-transparente.pa-topo-claro .head-main .js-cart-widget-amount.badge { background: var(--pa-noite); color: var(--pa-areia); }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  body.template-home .head-main .js-big-search-mobile { transition: none; }
}
/* indicadores do carrossel DENTRO do hero no celular (ordem do dono, 28/09):
   sobrepostos, centrados, ponto a 28px do pé; sem faixa branca abaixo. O texto
   sobe só o necessário (padding-bottom 16 → 48) para o CTA não encostar. */
@media (max-width: 767px) {
  body.template-home .pa-heroi__pontos { position: absolute; left: 0; right: 0; bottom: 6px; padding: 0; z-index: 2; }
  body.template-home .pa-heroi .pa-slide .pa-slide__texto { padding-bottom: 48px; }
  body.template-home .pa-heroi__pontos button::before {
    background: rgba(246, 239, 227, .5); box-shadow: 0 0 3px rgba(14, 11, 18, .45);
  }
  body.template-home .pa-heroi__pontos button[aria-current="true"]::before { background: var(--pa-ambar); }
}

/* ---------- TASK 01 — header interno (categoria, busca, produto…), ordem do dono 28/09 ----------
   Tudo fora da home (body:not(.template-home)); a home tem o transparente acima.
   Marfim sólido, leve: desktop ~104px (linha do logo 60 + menu 43), borda
   inferior quase invisível, sem sombra. Celular: ☰ | logo | carrinho em 60px e
   a busca inteira logo abaixo (50px, pílula, fundo marfim claro, fio champagne). */
body:not(.template-home) .head-main,
body:not(.template-home) .head-main.head-colors,
body:not(.template-home) .head-main .head-logo-row,
body:not(.template-home) .head-main .head-nav { background: var(--pa-marfim); box-shadow: none; }
body:not(.template-home) .head-main { border-bottom: 1px solid rgba(36, 29, 46, .08); }
body:not(.template-home) .head-main .head-logo-row { border-bottom: 0; }
body:not(.template-home) .head-main .head-nav { border-top: 1px solid rgba(36, 29, 46, .05); }
body:not(.template-home) .head-main .js-search-form .search-input {
  background: #FBF7F0; border: 1px solid var(--pa-areia); border-radius: var(--pa-r-pill);
}
body:not(.template-home) .head-main .js-search-form .search-input:focus {
  border-color: var(--pa-ambar); box-shadow: 0 0 0 2px rgba(201, 138, 60, .14);
}
body:not(.template-home) #logo .logo-img { filter: brightness(.82); }
@media (min-width: 768px) {
  /* o tema fixa min-height 72px na linha do logo; aqui 60px (8 + 44 + 8) */
  body:not(.template-home) .head-main .head-logo-row { padding-top: 8px; padding-bottom: 8px; min-height: 60px; }
  body:not(.template-home) .head-main #logo .logo-img { height: 40px; width: auto; max-height: none; }
  body:not(.template-home) .head-main .nav-desktop-list { padding-top: 0; padding-bottom: 0; }
}
@media (max-width: 767px) {
  body:not(.template-home) .head-main .head-logo-row { padding-top: 0; padding-bottom: 0; }
  body:not(.template-home) .head-main .head-logo-row > .container { padding-left: 16px; padding-right: 16px; }
  body:not(.template-home) .head-main .head-logo-row .row { height: 60px; flex-wrap: nowrap; }
  body:not(.template-home) .head-main #logo .logo-img { height: 30px; width: auto; max-width: 100%; max-height: none; }
  body:not(.template-home) .head-main .js-big-search-mobile { padding: 0 24px 12px; }
  body:not(.template-home) .head-main .js-big-search-mobile .search-input { height: 50px; padding-left: 20px; font-size: 16px; }
}
/* contador do carrinho: desce 6px para não encostar na barra do topo (celular e desktop) */
body:not(.template-home) .head-main .js-cart-widget-amount.badge { transform: translateY(6px); }
@media (min-width: 768px) { body:not(.template-home) .head-main .js-cart-widget-amount.badge { transform: translate(6px, -5px); } }
/* lupa: o tema pinta a máscara (::before) com --header-foreground (branco do painel); passa a seguir a cor
   do ícone do estado — tinta no sólido/internas e no transparente claro,
   marfim só no transparente sobre foto escura (bug visto pelo dono, 28/09) */
.head-main .search-btn.svg-icon-mask::before { color: inherit; background-color: currentColor; }

/* ---------- revisão do arquiteto (28/09): header compacto ao rolar (desktop, home) ----------
   Sólido ao rolar ocupava 157px. Compacto: linha do logo 80 → 56 e menu 75 → 45,
   logo em escala .8 — ~103px, o mesmo alvo do header interno. O .head-main ganha
   a diferença (--pa-head-delta, medida pelo JS) como margin-bottom: a página não
   pula. Tudo em 250ms, na mesma curva, para a soma altura + margem ficar constante. */
@media (min-width: 768px) {
  body.template-home .head-main { transition: background-color .25s ease, border-color .25s ease, margin-bottom .25s ease; }
  body.template-home .head-main .head-logo-row { transition: background-color .25s ease, border-color .25s ease, padding .25s ease, min-height .25s ease; }
  body.template-home .head-main .nav-desktop-list { transition: padding .25s ease; }
  body.template-home .head-main #logo .logo-img { transition: transform .25s ease, filter .25s ease; transform-origin: center; }
  body.template-home.pa-topo-compacto .head-main { margin-bottom: var(--pa-head-delta, 0px); }
  body.template-home.pa-topo-compacto .head-main .head-logo-row { padding-top: 3px; padding-bottom: 3px; min-height: 56px; }
  body.template-home.pa-topo-compacto .head-main .nav-desktop-list { padding-top: 0; padding-bottom: 0; }
  body.template-home.pa-topo-compacto .head-main #logo .logo-img { transform: scale(.8); }
  /* contador: na linha baixa ele sairia pelo topo — desce e encosta no canto do carrinho */
  body.template-home .head-main .js-cart-widget-amount.badge { transition: transform .25s ease; }
  body.template-home.pa-topo-compacto .head-main .js-cart-widget-amount.badge { transform: translate(8px, 10px); }
}
body.pa-sem-transicao .head-main,
body.pa-sem-transicao .head-main *,
body.pa-sem-transicao .head-main::before { transition: none !important; }

/* ---------- pontos do carrossel dentro do hero também no desktop (revisão, 28/09) ----------
   Mesma regra do celular: sobrepostos, centrados, ponto a 28px do pé, sem
   faixa abaixo. No desktop o texto é centrado na vertical e não encosta. */
@media (min-width: 768px) {
  body.template-home .pa-heroi__pontos { position: absolute; left: 0; right: 0; bottom: 6px; padding: 0; z-index: 2; }
  body.template-home .pa-heroi__pontos button::before {
    background: rgba(246, 239, 227, .5); box-shadow: 0 0 3px rgba(14, 11, 18, .45);
  }
  body.template-home .pa-heroi__pontos button[aria-current="true"]::before { background: var(--pa-ambar); }
}
/* 768–899 ainda usa a arte e o texto no pé do celular: o CTA sobe o mesmo tanto */
@media (min-width: 768px) and (max-width: 899px) {
  body.template-home .pa-heroi .pa-slide .pa-slide__texto { padding-bottom: 48px; }
}

/* ---------- ritmo vertical e largura únicos na home (ordem do dono, 28/09) ----------
   Um respiro só entre seções, dividido entre o pé de uma e o topo da outra:
   40 + 40 = 80px no desktop, 24 + 24 = 48px no celular (antes 64/96/40 misturados). */
body.template-home .pa-secao { padding-top: 24px; padding-bottom: 24px; }
@media (min-width: 900px) {
  body.template-home .pa-secao { padding-top: 40px; padding-bottom: 40px; }
}

/* ---------- busca recolhe ao descer, volta ao subir (celular, todas as páginas; dono 28/09) ----------
   Nas internas a busca sai do fluxo (absoluta sob a linha do logo) e o
   .head-main reserva a altura dela com margin-bottom: recolher não mexe no
   conteúdo. O JS (pa-menu.js) liga .pa-busca-recolhida no <body>. */
@media (max-width: 767px) {
  body:not(.template-home) .head-main { margin-bottom: 62px; }
  body:not(.template-home) .head-main .js-big-search-mobile {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--pa-marfim); border-bottom: 1px solid rgba(36, 29, 46, .08);
  }
  body:not(.template-home) .head-main .js-big-search-mobile,
  body.template-home .head-main .js-big-search-mobile {
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  body.pa-busca-recolhida .head-main .js-big-search-mobile {
    opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none;
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  body .head-main .js-big-search-mobile { transition: none !important; }
}
/* 768–1023 px: o menu desktop (8 itens) passava de 950 px e dava rolagem lateral.
   Letra e respiro menores só nessa faixa; nada muda a partir de 1024. */
@media (min-width: 768px) and (max-width: 1023px) {
  .head-nav .nav-desktop-list { flex-wrap: nowrap; justify-content: center; }
  .head-nav .nav-desktop-list > li { padding-left: 5px; padding-right: 5px; }
  .head-nav .nav-list-link { font-size: 11px; letter-spacing: .04em; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .head-nav .nav-desktop-list > li.pa-mm-li { padding-left: 5px; padding-right: 5px; }
  .head-nav .pa-mm-topo { font-size: 11px; letter-spacing: .04em; }
}
/* tabelas dos guias (texto SEO) não podem alargar a página: rolam dentro de si */
.pa-guia table { display: block; max-width: 100%; overflow-x: auto; }
@media (min-width: 768px) and (max-width: 1023px) {
  .head-nav .pa-mm-li > .nav-item-container > .pa-mm-topo { font-size: 11px; letter-spacing: .04em; padding-left: 4px; padding-right: 4px; }
}

/* ajustes UI 28/09 (item 3a): em 900–1199 o botão do herói descia até os pontos
   (botão 407–451 × ponto em 429). Respiro menor entre as linhas (16 → 10) e pé
   de 44px: botão termina em 416, 13px acima do ponto. */
@media (min-width: 900px) and (max-width: 1199px) {
  body.template-home .pa-heroi .pa-slide .pa-slide__texto { padding-bottom: 44px; gap: 10px; }
  body.template-home .pa-heroi .pa-slide .pa-slide__texto .pa-btn { margin-top: 0; }
}
/* item 3b: 768–899 usava a arte 4:5 do celular a 922px de altura (> 1 tela).
   Altura limitada a 720px, arte em cover: título e botão voltam para a dobra. */
@media (min-width: 768px) and (max-width: 899px) {
  .pa-slide--gpt { aspect-ratio: auto; height: min(88vh, 720px); }
  .pa-slide--gpt img { width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: center 40%; }
}

/* dono 28/09: sem aviso de cookies até a inauguração */
.js-notification-cookie-banner { display: none !important; }

/* ==========================================================================
   pa: mega menu editorial (régua do dono 28/09) — Perfumes e Marcas.
   Navegação à esquerda, "Em destaque/Em alta" com produtos reais à direita.
   Só marfim, grafite e âmbar; divisórias finas. Sobrepõe o bloco antigo acima.
   ========================================================================== */
.pa-megamenu--perfumes,
.pa-megamenu--marcas {
  background: var(--pa-marfim);
  border-top: 1px solid rgba(36, 29, 46, .08);
  border-bottom: 1px solid rgba(36, 29, 46, .08);
  box-shadow: 0 14px 30px rgba(14, 11, 20, .10);
  overflow: hidden;
}
/* textura editorial: a mesma cena do rodapé, quase apagada, só no canto direito */
.pa-megamenu--perfumes::before,
.pa-megamenu--marcas::before {
  content: "";
  position: absolute;
  inset: 0 0 0 45%;
  background: url("../images/rodape-fundo-desktop.webp") right center / cover no-repeat;
  opacity: .045;
  filter: grayscale(1) sepia(.35);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
          mask-image: linear-gradient(90deg, transparent, #000 60%);
  pointer-events: none;
}
/* .pa-mm-on: a página traz uma cópia minificada antiga deste arquivo num <style>
   posterior (não vem do tema — provável CSS do painel) com repeat(5,1fr) nas marcas */
.pa-mm-on .pa-megamenu--perfumes .pa-megamenu__grade,
.pa-mm-on .pa-megamenu--marcas .pa-megamenu__grade {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 0;
  padding: 44px var(--pa-gutter-desk) 40px;
  min-height: 420px;
  max-height: 480px;
  box-sizing: border-box;
}
.pa-megamenu__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  grid-auto-rows: min-content;
  column-gap: 56px;
  padding-right: 48px;
  align-content: start;
}
.pa-megamenu--marcas .pa-megamenu__nav { grid-template-columns: 660px; }
.pa-megamenu__nav .pa-megamenu__coluna + .pa-megamenu__coluna {
  border-left: 1px solid rgba(36, 29, 46, .08);
  padding-left: 56px;
  margin-left: -56px;
}
.pa-megamenu--perfumes .pa-megamenu__nav { column-gap: 0; grid-template-columns: 300px 340px; }
.pa-megamenu--perfumes .pa-megamenu__nav .pa-megamenu__coluna + .pa-megamenu__coluna { margin-left: 0; }
.head-nav .pa-megamenu--perfumes .pa-megamenu__titulo,
.head-nav .pa-megamenu--marcas .pa-megamenu__titulo {
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--pa-ambar-texto);
  margin: 0 0 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(36, 29, 46, .08);
}
.pa-megamenu--perfumes li,
.pa-megamenu--marcas li { margin-bottom: 0; }
.head-nav .pa-megamenu--perfumes .pa-megamenu__link,
.head-nav .pa-megamenu--marcas .pa-megamenu__link {
  display: inline-block;
  font-family: var(--pa-serif);
  font-size: 22px !important; /* o tema fixa 13px nos links do head-nav com prioridade maior */
  line-height: 1.2;
  letter-spacing: 0;
  padding: 6px 0;
  color: var(--pa-tinta);
  transition: color var(--pa-t), transform var(--pa-t);
}
.head-nav .pa-megamenu--perfumes .pa-megamenu__link:hover,
.head-nav .pa-megamenu--marcas .pa-megamenu__link:hover { color: var(--pa-ambar-texto); transform: translateX(3px); }
.pa-megamenu__coluna--multi ul { columns: 3; column-gap: 32px; }
.pa-megamenu__coluna--multi li { break-inside: avoid; }
.head-nav .pa-megamenu .pa-megamenu__ver {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 28px;
  font-family: var(--pa-sans);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pa-tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--pa-ambar);
  padding-bottom: 4px;
}
.head-nav .pa-megamenu .pa-megamenu__ver:hover { color: var(--pa-ambar-texto); }
/* coluna de produtos */
.pa-megamenu--perfumes .pa-megamenu__alta,
.pa-megamenu--marcas .pa-megamenu__alta {
  border-left: 1px solid rgba(36, 29, 46, .10);
  padding-left: 40px;
}
.pa-megamenu--perfumes .pa-alta-item,
.pa-megamenu--marcas .pa-alta-item {
  grid-template-columns: 88px 1fr;
  gap: 18px;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid rgba(36, 29, 46, .07);
}
.pa-megamenu--perfumes .pa-alta-item:last-child,
.pa-megamenu--marcas .pa-alta-item:last-child { border-bottom: 0; }
.pa-megamenu--perfumes .pa-alta-item img {
  width: 88px; height: 110px;
  background: var(--pa-marfim);
  mix-blend-mode: multiply;
  border-radius: 6px;
  object-fit: contain;
  transform: scale(1.12);
}
.pa-megamenu--marcas .pa-alta-item { grid-template-columns: 64px 1fr; padding: 10px 0; }
.pa-megamenu--marcas .pa-alta-item img {
  width: 64px; height: 76px;
  background: var(--pa-marfim);
  mix-blend-mode: multiply;
  border-radius: 6px;
  object-fit: contain;
  transform: scale(1.12);
}
.head-nav .pa-megamenu .pa-alta-item__casa { color: var(--pa-ambar-texto); letter-spacing: .16em; margin-bottom: 4px; }
.head-nav .pa-megamenu--perfumes .pa-alta-item__nome { font-size: 22px !important; }
.head-nav .pa-megamenu--marcas .pa-alta-item__nome { font-size: 18px !important; }
.pa-megamenu .pa-alta-item:hover .pa-alta-item__nome { color: var(--pa-ambar-texto); }

/* celular: marcas em 2 colunas dentro da sanfona */
.pa-gaveta__sub--multi ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }

/* ==========================================================================
   pa: carrinho vazio premium (régua do dono 28/09) — só o estado vazio;
   itens, totais e checkout seguem nativos.
   ========================================================================== */
.pa-carrinho-vazio {
  text-align: center;
  padding: 40px 24px 32px;
  max-width: 400px;
  min-height: 62vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-family: var(--pa-sans);
  color: var(--pa-tinta);
}
.pa-carrinho-vazio__foto {
  width: 132px; height: 132px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 28% 62%;
  display: block;
  margin: 0 auto 24px;
  border: 1px solid rgba(201, 138, 60, .35);
  box-shadow: 0 0 0 6px var(--pa-marfim);
}
.pa-carrinho-vazio__titulo {
  font-family: var(--pa-serif);
  font-size: 25px;
  line-height: 1.15;
  font-weight: 500;
  text-wrap: balance;
  margin: 0 0 10px;
  color: var(--pa-tinta);
}
.pa-carrinho-vazio__texto {
  font-size: 14px;
  line-height: 1.6;
  color: var(--pa-tinta-2);
  margin: 0 0 24px;
}
.pa-carrinho-vazio__cta,
a.pa-carrinho-vazio__cta {
  display: inline-block;
  background: var(--pa-noite);
  color: var(--pa-marfim);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 34px;
  border-radius: var(--pa-r-4);
  transition: background var(--pa-t), color var(--pa-t);
}
.pa-carrinho-vazio__cta:hover { background: var(--pa-ambar); color: var(--pa-noite); }
.pa-carrinho-vazio__garantias {
  list-style: none;
  margin: 28px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(36, 29, 46, .08);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 0;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--pa-tinta-2);
}
.pa-carrinho-vazio__garantias li { white-space: nowrap; }
.pa-carrinho-vazio__garantias { width: 100%; }
.pa-carrinho-vazio__garantias li + li::before { content: "•"; color: var(--pa-ambar); margin: 0 8px; }
/* o painel nativo esconde totais/rodapé quando vazio; se aparecerem, não competem */
@media (max-width: 767px) {
  .pa-carrinho-vazio { padding: 32px 20px 24px; }
  .pa-carrinho-vazio__foto { width: 112px; height: 112px; }
  .pa-carrinho-vazio__titulo { font-size: 24px; }
}

/* revisão do arquiteto (28/09): carrinho vazio — elemento olfativo (oud) em vez
   de pessoa, painel marfim e título do painel na serifa da marca. */
.pa-carrinho-vazio__foto { object-fit: contain; object-position: center; padding: 14px; background: var(--pa-marfim); box-sizing: border-box; }
#modal-cart, #modal-cart .modal-body, #modal-cart .modal-header { background: var(--pa-marfim) !important; }
#modal-cart .modal-header .h4, #modal-cart .modal-header h4, #modal-cart .modal-title { font-family: var(--pa-serif) !important; font-weight: 500 !important; font-size: 22px !important; }
.js-ajax-cart-panel .modal-header .col { font-family: var(--pa-serif) !important; font-weight: 500 !important; font-size: 22px !important; }

/* contas (login, cadastro, senha) — coluna única centralizada, título na serifa (28/09) */
body[class*="template-account"] main .container,
body[class*="template-account"] .js-account-page .container { max-width: 520px; margin-left: auto; margin-right: auto; }
body[class*="template-account"] main .row > [class*="col"] { flex: 0 0 100%; max-width: 100%; }
body[class*="template-account"] main h1,
body[class*="template-account"] main .h1 { font-family: var(--pa-serif); font-weight: 500; text-align: center; }
body[class*="template-account"] main .breadcrumbs { justify-content: center; text-align: center; }
body[class*="template-account"] main { padding-bottom: 56px; }

/* fix 28/09: texto digitado na busca estava branco sobre o campo claro */
.head-main input[type=search], .head-main .js-search-input, .js-search-input { color: var(--pa-tinta) !important; caret-color: var(--pa-tinta); }

/* ---------- fix cirúrgico 28/09 (crítica ui-fechamento) ---------- */
/* gaveta do celular na linguagem do mega menu (régua §3.17): marfim + serifa
   20/48, sem caixa alta. Só cor/fonte/espaço; estrutura igual. */
#nav-hamburger, #nav-hamburger .nav-body, #nav-hamburger .hamburger-footer { background: var(--pa-marfim); }
.pa-gaveta .pa-gaveta__botao,
.pa-gaveta .pa-gaveta__link-direto {
  font-family: var(--pa-serif); font-size: 20px; line-height: 1.2; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--pa-tinta);
  min-height: 48px; padding-top: 12px; padding-bottom: 12px;
}
.pa-gaveta .pa-gaveta__sub-titulo { font-size: 11px; letter-spacing: .12em; color: var(--pa-ambar-texto); }
.pa-gaveta .pa-gaveta__painel li a { font-family: var(--pa-serif); font-size: 17px; }

/* pontos do herói: o alvo de 44px dos pontos cobria o pé do CTA (390: 448×450;
   1024: 411×416). O texto sobe 18px; alvo fica ≥ 12px abaixo do botão. */
/* (28/09) padding-bottom extra do texto do herói REVERTIDO — subia o título sobre os frascos no celular (reprovado pelo dono) */

/* busca do header < 768 no blog/artigo: a regra que reduz o placeholder mora
   no pa-produto.css (só categoria/busca/produto), então no blog o longo saía a
   16px (316px num campo de 275px, cortado); na home, 316 em 287. Mesma regra
   aqui, carregada em tudo, home inclusive. */
@media (max-width: 767px) {
  body .head-main .js-search-form .search-input::placeholder { font-size: calc(var(--pa-fs-14) - 1px); }
}

/* página de método (29/09) entrou sozinha no menu principal e estourou a largura
   no desktop; ela é linkada pelos guias, não pelo menu. */
.js-desktop-nav a[href*="como-fazemos-nossos-guias"], .nav-desktop a[href*="como-fazemos-nossos-guias"],
.nav-list a[href*="como-fazemos-nossos-guias"], .js-nav-list-item a[href*="como-fazemos-nossos-guias"] { display: none !important; }
li:has(> a[href*="como-fazemos-nossos-guias"]):not(footer li) { display: none !important; }