/* pa-sistema.css — regras de conjunto (conhecimento/padrao-ui.md §0 e §3.10, v1.27; crítica agents/criticas/2026-10-14-site-conjunto-ui.md).
   Carregado por ÚLTIMO em toda página: vale acima das regras de peça. Só tira e unifica; nenhum bloco novo. */

/* ---------- §0.2 barra do topo: 1 frase fixa, sem rotação ---------- */
.pa-barra-topo--fixa li { position: static !important; opacity: 1 !important; animation: none !important; height: 100%; }
.pa-barra-topo--fixa li:not(:first-child) { display: none !important; }

/* ---------- §0.5 caminho (breadcrumb) único ---------- */
html body .pa-caminho {
	display: block !important; text-align: left !important;
	font: 400 12px/16px var(--pa-sans) !important; letter-spacing: 0 !important; text-transform: none !important;
	color: var(--pa-tinta-2) !important;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	margin: 12px auto 32px !important; padding-top: 0 !important; padding-bottom: 0 !important;
	position: static !important; background: none !important;
}
html body .pa-caminho .crumb { font: inherit !important; color: var(--pa-tinta-2) !important; text-decoration: none; padding: 14px 0; margin: -14px 0; display: inline; }
html body .pa-caminho .crumb.active { color: var(--pa-tinta) !important; font-weight: 500 !important; }
html body .pa-caminho .crumb + .crumb::before { content: "/"; color: var(--pa-areia); margin: 0 8px; font-weight: 400; }
html body .pa-caminho .crumb::after { content: none !important; }
html body .pa-caminho .separator { display: none !important; }
@media (min-width: 768px) {
	html body .pa-caminho { margin: 16px auto 48px !important; }
}
/* categoria: o caminho já fica fora e acima do banner; o herói não repete margem de cima */
.template-category .pa-caminho + .pa-cat-hero { margin-top: 0 !important; }
/* ficha: o caminho fica acima das duas colunas; o respiro até o título vem das colunas (foto no 390) */
.template-product .pa-migalha.pa-caminho { margin-bottom: 16px !important; }
@media (min-width: 768px) { .template-product .pa-migalha.pa-caminho { margin-bottom: 48px !important; } }

/* ---------- cabeçalho da categoria SEM banner (de tmp/tema-blocos, ajustado: sem faixa embaixo) ---------- */
.pa-cat-hero--semarte { position: relative; isolation: isolate; background-color: var(--pa-marfim); padding: 0 0 24px; }
.pa-cat-hero--semarte::after { content: none !important; }
.pa-cat-hero--semarte .pa-cat-hero__txt, .pa-cat-hero--semarte .page-header { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; }
.pa-cat-hero--semarte .pa-cat-hero__inner { padding-left: 15px !important; padding-right: 15px !important; }
.pa-cat-hero--semarte .pa-cat-hero__txt > .page-header { max-width: none; margin: 0; padding: 0; }
.pa-cat-hero--semarte h1 { font-family: var(--pa-serif); font-size: 28px !important; line-height: 1.1; color: var(--pa-tinta); margin: 0; font-weight: 500; }
.pa-cat-hero__sub { font: 400 14px/1.4 var(--pa-sans); color: var(--pa-tinta-2); margin: 8px 0 0; max-width: 560px; }
@media (min-width: 768px) {
	.pa-cat-hero--semarte { padding-bottom: 32px; }
	.pa-cat-hero--semarte h1 { font-size: 36px !important; }
	.pa-cat-hero__sub { font-size: 16px; }
}
/* categoria COM banner: H1 serif 28/36 */
.template-category .pa-cat-hero--editorial h1 { font-size: 28px !important; }
@media (min-width: 768px) { .template-category .pa-cat-hero--editorial h1 { font-size: 36px !important; } }

/* ---------- §3.10 home: linha de 3 garantias, sem card ---------- */
.pa-garantias-linha { background: transparent; color: var(--pa-tinta); padding: 64px var(--pa-gutter, 16px); }
.pa-garantias-linha ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pa-garantias-linha li { display: flex; align-items: center; gap: 12px; font: 500 14px/20px var(--pa-sans); color: var(--pa-tinta); white-space: nowrap; }
.pa-garantias-linha svg { flex: 0 0 24px; width: 24px; height: 24px; fill: none; stroke: var(--pa-ambar); stroke-width: 1.5; }
.pa-garantias-linha__link { display: inline-block; margin-top: 16px; font: 600 12px/16px var(--pa-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--pa-tinta); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; padding: 14px 0; margin-bottom: -14px; }
/* 14/10 (bug iPhone, Bruno): no celular a lista vertical de 3 linhas pesava; passa a 3 itens lado a lado, centralizados, ícone em cima e texto curto embaixo (12/16) */
@media (max-width: 767px) {
	.pa-garantias-linha { padding: 40px var(--pa-gutter, 16px); text-align: center; }
	.pa-garantias-linha ul { flex-direction: row; align-items: flex-start; gap: 8px; }
	.pa-garantias-linha li { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; font: 500 12px/16px var(--pa-sans); text-align: center; white-space: normal; }
	.pa-garantias-linha__link { margin-top: 8px; }
}
@media (min-width: 768px) {
	.pa-garantias-linha { display: flex; align-items: center; justify-content: center; gap: 32px; padding: 96px var(--pa-gutter, 24px); max-width: var(--pa-max, 1200px); margin: 0 auto; }
	.pa-garantias-linha ul { flex-direction: row; gap: 0; }
	.pa-garantias-linha li { padding: 0 32px; }
	.pa-garantias-linha li + li { border-left: 1px solid var(--pa-linha); }
	.pa-garantias-linha__link { margin: 0; }
}

/* ---------- §0.3 card único: "Os mais desejados" sem moldura; número 12 px serif acima da foto ---------- */
.pa-top5 .pa-card--top5 { border: 0 !important; background: transparent !important; border-radius: 0 !important; }
.pa-top5 .pa-top5__num { position: static !important; display: block; background: none !important; padding: 0 !important; margin: 0 0 8px !important;
	font: 500 12px/16px var(--pa-serif) !important; letter-spacing: .08em; color: var(--pa-tinta-2) !important; }
.pa-top5 .pa-pista { padding-top: 0 !important; }

/* ---------- §0.3 ficha: 1 acordeão (linha 1px, título serif 18) ---------- */
.pa-acc__bt { font-size: 18px !important; }
.template-product .product-shipping-calculator { border: 0 !important; border-bottom: 1px solid var(--pa-linha) !important; border-radius: 0 !important; background: none !important; padding: 0 !important; box-shadow: none !important; }
.template-product .product-shipping-calculator .js-accordion-private-toggle { min-height: 56px; margin: 0 !important; padding: 0 !important; display: flex; align-items: center; }
.template-product .product-shipping-calculator .js-accordion-private-toggle,
.template-product .product-shipping-calculator .js-accordion-private-toggle * { font-family: var(--pa-serif) !important; font-size: 18px !important; font-weight: 500 !important; color: var(--pa-tinta) !important; }
/* 16/10: só o caminhão some (o svg:first-child também escondia o +); texto na margem e + igual aos outros acordeões */
.template-product .product-shipping-calculator .js-accordion-private-toggle .col .m-0 > svg { display: none; }
.template-product .product-shipping-calculator .js-accordion-private-toggle > [class*="col"] { padding-left: 0 !important; padding-right: 0 !important; }
.template-product .product-shipping-calculator .js-accordion-private-toggle { margin: 0 !important; width: 100%; }
.template-product .product-shipping-calculator .js-accordion-private-toggle .col-auto svg { display: none !important; }
.template-product .product-shipping-calculator .js-accordion-private-toggle-inactive::after { content: "+"; }
.template-product .product-shipping-calculator .js-accordion-private-toggle-active::after { content: "−"; }
.template-product .product-shipping-calculator .js-accordion-private-toggle .col-auto span { font-family: var(--pa-sans) !important; font-size: 22px !important; font-weight: 300 !important; line-height: 1; color: var(--pa-ambar-texto) !important; }
.template-product #product-shipping-container { border: 0 !important; }
/* 16/10: no celular "Envio e prazo" e "Como é o cheiro?" são uma lista só (vão de 24 px + linha dupla) */
@media (max-width: 767px) {
  .template-product .pa-acordeoes--compra { margin-bottom: 0 !important; }
  .template-product .js-pa-descricao > .pa-acordeoes { border-top: 0 !important; }
}

/* ---------- §0.2 ficha: linha de confiança sob o Comprar (15/10: 3 itens com ícone, link embaixo) ---------- */
.pa-linha-confia { margin: 0 0 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; font: 500 12.5px/1.35 var(--pa-sans); color: var(--pa-tinta); }
.pa-linha-confia > span { display: flex; align-items: center; gap: 8px; padding: 10px 10px; border: 1px solid #EADBC2; border-radius: 10px; background: #FDF8F0; }
.pa-linha-confia > span::before, .pa-linha-confia > span::after { content: none !important; }
.pa-linha-confia svg { flex: none; width: 22px; height: 22px; fill: none; stroke: #8A6A2E; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pa-linha-confia__link { grid-column: 1 / -1; justify-self: start; font: 600 12px/18px var(--pa-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--pa-tinta) !important; text-decoration: underline; text-underline-offset: 3px; padding: 13px 0; margin: -6px 0 -13px; }
@media (max-width: 599px) {
  .pa-linha-confia { gap: 8px; font-size: 11.5px; }
  .pa-linha-confia > span { flex-direction: column; text-align: center; gap: 6px; padding: 10px 6px; }
}

/* ---------- §0.3 blocos de interface sem peso de título (14/10) ----------
   Rodapé, vitrines, menu, "Veja também" e afins eram h2/h3; agora são div.pa-nh com as mesmas classes.
   O :where() devolve, sem especificidade, o que a tag h2/h3 dava (família, peso, tamanho, linha, margem);
   toda regra de classe existente continua mandando. */
:where(.pa-nh) { margin: 0 0 .5rem; font-family: var(--heading-font); font-weight: var(--title-font-weight); font-size: var(--h2); }
:where(.pa-nh--3) { font-size: var(--h3); }
/* "Veja também" da descrição: o que as regras de h2 do guia davam, agora pela classe */
.pa-guia .pa-veja-tit { font-family: var(--pa-serif); font-size: var(--pa-fs-22); font-weight: 600; line-height: var(--pa-lh-titulo); margin: 32px 0 12px; }
@media (min-width: 768px) { .pa-guia .pa-veja-tit { font-size: var(--pa-fs-26); } }

/* ---------- textura floral SÓ NO CABEÇALHO (Bruno 16/10, optbox; substitui a variante B de 14/10, "topo inteiro") ----------
   A textura cobre apenas a faixa do cabeçalho NÃO rolado (logo + menu; no celular também a faixa da busca), em toda página de cabeçalho creme
   (tudo menos a home, que segue com o banner transparente). Caminho, H1 e conteúdo ficam no fundo limpo: .pa-textura-topo / .pa-cat-topo
   não têm fundo nenhum. Ao rolar o tema põe .compress e o cabeçalho volta exatamente ao visual do ar (escuro no desktop, marfim no celular):
   todas as regras abaixo são :not(.compress). Tile 512 px sem costura exibido a 256 px CSS; ::after = cor sólida, ::before = textura. */
.pa-textura-topo, .pa-cat-topo { background: none !important; }
.pa-textura-topo::before, .pa-cat-topo::before { content: none !important; }
html body .pa-cat-topo.pa-textura-topo .pa-cat-hero--semarte { background: transparent !important; }
.pa-cat-hero--semarte::before { content: none !important; }
html body .pa-textura-topo .pa-caminho, html body .pa-textura-topo .pa-caminho .crumb { color: var(--pa-tinta) !important; }
body:not(.template-home) .js-head-main:not(.compress) { isolation: isolate; border-bottom-color: transparent; background: transparent !important; }
body:not(.template-home) .js-head-main:not(.compress)::before,
body:not(.template-home) .js-head-main:not(.compress)::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; }
body:not(.template-home) .js-head-main:not(.compress)::after { z-index: -2; background: #FDF4E6; }
body:not(.template-home) .js-head-main:not(.compress)::before { z-index: -1; opacity: .7; background: url("../images/pa-textura-floral.webp") center top / 256px 256px repeat; }
body:not(.template-home) .js-head-main:not(.compress) .head-logo-row,
body:not(.template-home) .js-head-main:not(.compress) .head-nav { background-color: transparent !important; border-bottom-color: transparent; }
/* celular: a faixa da busca (absoluta, abaixo do cabeçalho; some ao rolar) leva a própria cor e a própria textura, 64 px abaixo do topo do cabeçalho */
body:not(.template-home) .js-head-main:not(.compress) .js-big-search-mobile { isolation: isolate; border-bottom-color: transparent; background-color: #FDF4E6 !important; }
body:not(.template-home) .js-head-main:not(.compress) .js-big-search-mobile::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .7; background: url("../images/pa-textura-floral.webp") center -64px / 256px 256px repeat; }
@media (min-width: 768px) {
	body:not(.template-home) .js-head-main:not(.compress)::before { opacity: 1; }
}

/* ---------- ficha: aviso "Você já adicionou" (Bruno 14/10): logo abaixo dos botões, linha de confiança abaixo dele, sem sobreposição ----------
   Antes o aviso era absolute com vão de 0 e cobria a linha "Representante oficial Lattafa". Agora ocupa o próprio espaço (reservado, invisível
   até o clique: sem CLS), 44 px no 390 (pode quebrar em 2 linhas) e 28 px no 1440 (1 linha). */
#product_form .pa-msg-adicionado { position: relative; height: auto; min-height: 44px; }
#product_form .pa-msg-adicionado .js-added-to-cart-product-message { position: static; margin: 4px 0 0 !important; }
@media (min-width: 768px) { #product_form .pa-msg-adicionado { min-height: 28px; } }

/* ---------- modal "Meios de pagamento" (Bruno 14/10): desktop compacto e centralizado, altura pelo conteudo ----------
   Antes herdava .modal-centered-md.modal-show.modal-bottom-md (height 100%): 900 px de alto com um card Pix e vazio. Agora 600 px de largura,
   altura do conteudo, topo fixo em 40 px (nao pula ao trocar de aba; critico-ui 14/10), teto 100vh - 80 px, rolagem so no corpo. Celular (< 768 px) segue a tela cheia nativa. */
@media (min-width: 768px) {
	html body #installments-modal.modal-show {
		width: 600px; max-width: calc(100vw - 48px); height: auto !important; max-height: calc(100vh - 80px);
		top: 40px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%);
		display: flex; flex-direction: column; border-radius: var(--pa-r-12, 12px); overflow: hidden;
	}
	html body #installments-modal .modal-header { flex: 0 0 auto; }
	html body #installments-modal .modal-body { flex: 1 1 auto; height: auto !important; max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; }
	html body #installments-modal .modal-scrollable-area { height: auto !important; max-height: none; overflow: visible; }
	html body #installments-modal .modal-footer { flex: 0 0 auto; }
	html body #installments-modal .modal-close { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
}

/* ---------- institucionais no desktop (coordenacao 14/10): titulo e caminho na MESMA coluna do texto ----------
   .pa-texto-longo = 680 px centrado (650 uteis, borda esquerda em x=395 no 1440). O .page-header ocupava o container todo (x=85). Celular nao muda. */
@media (min-width: 768px) {
	.pa-textura-topo .page-header { max-width: 650px; margin-left: auto; margin-right: auto; }
}

/* ---------- selo "É original? Veja por quê" ao lado do preço (Bruno 15/10, optbox; referência aromadasarabias) ---------- */
.js-price-container { position: relative; }
.pa-orig-chip { position: absolute; right: 0; top: 4px; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 11px; border: 1px solid #E6D3B3; border-radius: 12px; background: #FDF4E6; color: var(--pa-tinta); text-decoration: none; line-height: 1.2; }
.pa-orig-chip svg { flex: none; width: 22px; height: 22px; fill: none; stroke: #8A6A2E; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pa-orig-chip b { display: block; font: 600 14px/1.25 var(--pa-sans); }
.pa-orig-chip u { font: 400 12.5px/1.3 var(--pa-sans); color: #6B4E2A; text-underline-offset: 2px; }
.pa-orig-chip:hover { border-color: #C9A66B; color: var(--pa-tinta); }
@media (max-width: 767px) { .pa-orig-chip { top: 2px; padding: 7px 11px 7px 9px; gap: 8px; } .pa-orig-chip b { font-size: 13px; } .pa-orig-chip u { font-size: 12px; } }
@media (max-width: 767px) { .pa-tem-pix .pa-pix { padding-right: 136px; } } /* critico-ui 15/10: selo não cobre o -10% em 360/390 */
/* cabeçalho rolado no desktop 1280–1439: BLOG não encosta na lupa (Bruno 15/10, "tá ficando apertado") */
@media (min-width:768px) and (max-width:1439px){.js-head-main.compress .pa-mm-topo{font-size:13px!important;letter-spacing:.03em!important}.js-head-main.compress .nav-item-desktop:last-child{margin-right:18px}}

/* topo compacto (15/10, "o cabeçalho tá usando muito espaço"; revisto 16/10 sem textura): bloco ESCALA no fim do arquivo */

/* ---------- ESCALA ÚNICA DE FONTE + topo compacto (Bruno 16/10, optbox; conhecimento/padrao-ui.md §"Escala única 16/10") ----------
   Tokens: H1 de página 30/40, H1 de produto 26/32, H2 de conteúdo 22/26, texto corrido 16 (14 só metadado/legenda). Celular / desktop (768+).
   !important só onde a regra que ele substitui já era !important (pa-categoria.css, topo da categoria no celular). */
:root { --pa-h1-pagina: 30px; --pa-h1-produto: 26px; --pa-h2-conteudo: 22px; --pa-texto: 16px; }
@media (min-width: 768px) { :root { --pa-h1-pagina: 40px; --pa-h1-produto: 32px; --pa-h2-conteudo: 26px; } }

/* H1 de página: institucional, categoria (com e sem banner), marca, blog, post */
html body .pa-textura-topo .page-header h1,
html body.template-category .pa-cat-hero .pa-cat-hero__cab h1,
html body.template-search .pa-cat-hero .pa-cat-hero__cab h1 { font-size: var(--pa-h1-pagina) !important; line-height: 1.1 !important; }
html body .pa-blog-hero-h1, html body .pa-blog-h1 { font-size: var(--pa-h1-pagina); line-height: 1.1; }
/* H1 de produto */
html body.template-product h1.js-product-name { font-size: var(--pa-h1-produto); line-height: 1.2; }
/* H2 de conteúdo */
html body .pa-categoria-seo .pa-categoria-seo__texto h2, html body .pa-cat-faq > h2, html body .pa-cat-related .pa-cat-section-head h2, html body .pa-cat-links > h2,
html body .pa-texto-longo h2, html body .pa-categoria-seo h2, html body .pa-cat-faq h2, html body .pa-marca-sobre h2,
html body .pa-marca-guia-topo h2, html body .pa-guia h2, html body .pa-blog-conteudo h2 { font-size: var(--pa-h2-conteudo); line-height: 1.2; }
/* institucionais: pa-correcoes.css fixava 28 !important em .template-page/.template-contact .user-content h2 */
html body.template-page .user-content .pa-texto-longo h2, html body.template-contact .user-content h2 { font-size: var(--pa-h2-conteudo) !important; }
/* texto corrido 16 */
html body .pa-cat-faq p, html body .pa-cat-faq summary, html body .pa-cat-banner__txt p, html body .pa-marca-veja__cab p,
html body .pa-blog-conteudo p, html body .pa-cheiro__txt p, html body .pa-acordeoes p { font-size: var(--pa-texto); }
html body .pa-blog-conteudo p.pa-bl-nota { font-size: 14px; }

/* topo compacto sem textura: cabeçalho → caminho 24, caminho → H1 16 (celular) / 20 (desktop), H1 → conteúdo 24 / 32.
   No celular a margem do caminho colapsava com a do <main> (que reserva a faixa da busca): flow-root no main faz os 24 somarem. */
body.template-page main, body.template-contact main, body.template-category main, body.template-product main { display: flow-root; }
html body .pa-cat-topo > .pa-caminho, html body.template-product .pa-migalha.pa-caminho { margin-top: 24px !important; }
html body .pa-textura-topo { padding-bottom: 0; }
html body .pa-textura-topo .pa-caminho { margin-top: 24px !important; margin-bottom: 16px !important; }
html body .pa-textura-topo .page-header.py-4 { padding-top: 0 !important; padding-bottom: 0 !important; }
html body .pa-textura-topo .page-header h1 { margin: 0 !important; }
html body .pa-textura-topo + .user-content { padding-top: 24px; }
html body .pa-cat-topo.pa-textura-topo .pa-cat-hero--semarte { padding-bottom: 12px !important; } /* + 12 do topo da barra de filtros = 24 */
html body .pa-texto-longo > :first-child, html body .pa-texto-longo > :first-child > :first-child { margin-top: 0 !important; }
html body .pa-cat-topo.pa-textura-topo .pa-cat-hero--semarte .pa-cat-hero__cab { padding-top: 0 !important; padding-bottom: 0 !important; }
@media (min-width: 768px) {
	html body .pa-textura-topo .pa-caminho { margin-bottom: 20px !important; }
	html body .pa-textura-topo + .user-content { padding-top: 32px; }
	html body .pa-cat-topo.pa-textura-topo .pa-cat-hero--semarte { padding-bottom: 8px !important; } /* + 24 da barra de filtros = 32 */
	html body.template-product .pa-migalha.pa-caminho { margin-top: 0 !important; } /* a coluna da ficha já dá 28 */
}

/* 16/10 (Bruno): miniaturas da ficha no desktop em grade de 4 por linha (~140 px), ocupando o branco sob a foto */
@media (min-width: 768px) {
  .swiper-product-thumb .swiper-wrapper { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 12px; transform: none !important; width: 100% !important; }
  html body .swiper-product-thumb .swiper-wrapper .swiper-slide { width: 100% !important; max-width: none !important; margin: 0 !important; }
  html body .swiper-product-thumb .swiper-slide .product-thumb { width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; aspect-ratio: 1; margin: 0 !important; padding: 0 !important; }
  html body .swiper-product-thumb .product-thumb img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover; }
  .product-thumbs-container, .swiper-product-thumb { height: auto !important; }
}

/* 16/10: cabeçalho rolado (.compress) — o .head-nav encolhe para a largura da barra e o mega menu herdava ~875 px,
   com "Em destaque" por cima de "Casas"; o painel passa a ocupar a tela toda, colado sob a barra (78 px; 65 até 1024) */
@media (min-width: 768px) {
  .js-head-main.compress .pa-megamenu { position: fixed !important; left: 0 !important; right: 0 !important; width: auto !important; top: 78px !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .js-head-main.compress .pa-megamenu { top: 65px !important; }
}