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

/* ---------- 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, .56) 50%,
      rgba(14, 11, 18, .36) 65%,
      rgba(14, 11, 18, .17) 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) {
  .pa-slide--gpt { aspect-ratio: 750 / 900; overflow: hidden; }
  .pa-slide--gpt img { width: 113.3%; max-width: none; margin: -16% 0 0 -6.67%; }
  .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; }
}