/* 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: #736E79;
  --pa-ambar: #C98A3C;
  --pa-ambar-texto: #8A5A1F;
  --pa-areia: #D8C6A8;
  --pa-marfim: #F6EFE3;
  --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}

/* 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é: esconde do nativo só o que duplica (menus) ---------- */
.pa-rodape ~ footer .footer-menu-item { display: none; }
.pa-rodape ~ footer .row > div:has(> .js-accordion-private-content .footer-menu-item),
.pa-rodape ~ footer .row > div:has(> ul .footer-menu-item) { display: none; }

/* ---------- 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); }
}