/*
Theme Name: Swisshop
Theme URI: https://swisshop.com.br
Author: Swisshop
Description: Tema minimalista estilo blog para e-commerce. Logo enxuta, menu de categorias em cinza-escuro e feed de postagens (produtos ou notícias) com as mais recentes sempre no topo.
Version: 7.19.5
Text Domain: swisshop
*/

/* Fonte padrão do sistema (sans-serif) — sem carregamento de fonte externa */

/* =========================================================
   VARIÁVEIS DE COR
   ========================================================= */
:root{
	--preto: #14161A;
	--cinza-escuro: #23262B;   /* tom do menu */
	--cinza-escuro-hover: #32363D;
	--cinza-medio: #6B7280;
	--cinza-claro: #F2F3F5;
	--branco: #FFFFFF;
	--azul-marinho: #0B2545;
	--azul-marinho-hover: #123C69;
	--linha: #E4E6EA;
	--verde: #17915F;         /* selo de melhor preço */
	--verde-bg: #E4F5EC;
	--verde-hover: #12784D;
	--coral: #FF7A33;         /* mesma cor de destaque da página de vendas original */
	--coral-bg: #FDECE2;      /* fundo claro para ícones/selos em coral */

	--display: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--texto: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--mono: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* =========================================================
   RESET BÁSICO
   ========================================================= */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0;
	background:var(--branco);
	color:var(--preto);
	font-family:var(--texto);
	font-size:16.5px;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ font-family:var(--display); font-weight:700; color:var(--preto); margin:0 0 10px; line-height:1.15; letter-spacing:-0.02em; }

.container{ max-width:1180px; margin:0 auto; padding:0 24px; }
.container-produto{ max-width:880px; margin:0 auto; padding:0 24px; }

a:focus-visible, button:focus-visible{
	outline:2px solid var(--azul-marinho);
	outline-offset:2px;
}

/* =========================================================
   MENU HORIZONTAL — BRANCO, COM SUBMENU NO HOVER
   Agora é o topo do site: a logo mora aqui dentro.
   ========================================================= */
.menu-categorias{
	background:var(--branco);
	border-bottom:1px solid var(--linha);
}
.menu-categorias-inner{
	display:flex;
	align-items:center;
	gap:28px;
}
.logo-menu{
	display:inline-flex;
	align-items:center;
	gap:10px;
	flex-shrink:0;
	padding:16px 0;
}
.logo-menu-simbolo{
	transition:transform .3s ease;
}
.logo-menu:hover .logo-menu-simbolo{ transform:rotate(-10deg) scale(1.05); }
.logo-menu-texto{
	font-family:var(--display);
	font-size:18.5px;
	font-weight:800;
	letter-spacing:0.03em;
	color:#2E323A;
	white-space:nowrap;
}
.logo-menu img{ max-height:32px; width:auto; }
.logo-menu-imagem{ max-height:36px; width:auto; display:block; }
.logo-menu .custom-logo-link{ display:flex; align-items:center; }
.logo-menu img.custom-logo{ max-height:36px !important; width:auto !important; height:auto !important; object-fit:contain; }

.menu-divisor{
	width:1px;
	height:22px;
	background:var(--linha);
	flex-shrink:0;
}

/* Agrupa as ações do lado direito do menu (busca flutuante + hambúrguer) */
.menu-categorias-acoes{
	display:flex;
	align-items:center;
	gap:10px;
	margin-left:auto;
	flex-shrink:0;
}

/* Lupinha azul que só aparece no celular, depois de rolar a página —
   mesmo ícone/tamanho da barra de busca (18px). Aparece com um
   esmaecimento suave (crossfade) enquanto a barra de busca desaparece
   — ver JS (busca-flutuante.js). */
.busca-toggle-topo{
	display:none;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	border-radius:50%;
	background:var(--azul-marinho);
	color:var(--branco);
	border:none;
	cursor:pointer;
	flex-shrink:0;
	touch-action:manipulation;
	transition:background-color .15s ease;
}
.busca-toggle-topo svg{ width:18px; height:18px; display:block; }
.busca-toggle-topo:hover{ background:var(--azul-marinho-hover); }
.busca-toggle-topo[aria-expanded="true"]{ background:var(--azul-marinho-hover); }

/* Botão hambúrguer e overlay — só existem visualmente no celular */
.menu-toggle{
	display:none;
	flex-direction:column;
	justify-content:center;
	gap:5px;
	width:34px;
	height:34px;
	background:transparent;
	border:none;
	cursor:pointer;
	flex-shrink:0;
	touch-action:manipulation;
}
.menu-toggle-linha{
	display:block;
	width:100%;
	height:2px;
	border-radius:2px;
	background:#2E323A;
}
.menu-overlay{ display:none; }

/* No desktop, a gaveta é só um wrapper neutro — o menu
   continua se comportando exatamente como antes (hover).
   (Evitamos "display:contents" aqui de propósito: essa
   propriedade tem um bug conhecido no Safari/iOS quando um
   elemento assim depois vira position:fixed via media query
   — o conteúdo pode parar de renderizar visualmente.) */
.menu-drawer{ display:block; }
.menu-drawer-topo{ display:none; }

.menu-principal{
	display:flex;
	gap:2px;
}
.menu-categorias a,
.menu-categorias button{
	-webkit-tap-highlight-color:transparent;
}
.menu-principal > .menu-item{ position:relative; }

/* Cada linha do menu é OU um link (categoria sem filhos) OU um
   botão (categoria com filhos) — nunca os dois juntos disputando
   a mesma área de toque. Os dois têm exatamente o mesmo visual. */
.menu-item-link,
.acordeao-linha{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	width:100%;
	padding:16px 18px;
	font-size:14px;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:.06em;
	line-height:1;
	color:#2E323A;
	background:transparent;
	border:none;
	cursor:pointer;
	text-align:left;
	font-family:inherit;
}
.menu-item:hover > .menu-item-link,
.menu-item:hover > .acordeao-linha,
.menu-item-link:focus,
.acordeao-linha:focus{
	color:var(--azul-marinho);
	background:var(--cinza-claro);
}
.acordeao-chevron{ display:none; } /* só aparece no celular — no desktop o hover já mostra o painel */

/* Painel: contém "Ver tudo" + a lista de subcategorias */
.acordeao-painel, .sub-menu{
	position:absolute;
	top:100%;
	left:0;
	min-width:230px;
	background:var(--branco);
	border:1px solid var(--linha);
	box-shadow:0 18px 30px -16px rgba(20,22,26,.28);
	padding:8px 0;
	display:none;
	z-index:100;
}
.submenu-acordeao li, .sub-menu li{ position:relative; }
.menu-item .menu-item .acordeao-painel{ top:-9px; left:100%; }
@media (min-width: 861px){
	.menu-item.tem-submenu:hover > .acordeao-painel,
	.menu-item.tem-submenu:focus-within > .acordeao-painel,
	.menu-item-has-children:hover > .sub-menu,
	.menu-item-has-children:focus-within > .sub-menu{
		display:block;
	}
}
.acordeao-ver-tudo{
	display:block;
	padding:10px 20px;
	font-size:14px;
	font-weight:700;
	color:var(--coral);
	border-bottom:1px solid var(--linha);
	margin-bottom:4px;
}
.acordeao-ver-tudo:hover{ background:var(--cinza-claro); }
@media (min-width: 861px){
	/* No desktop, clicar na categoria já navega pra ela (ver menu-mobile.js),
	   então o link "Ver tudo" some — ele só existe no accordeon do celular.
	   Esta regra precisa vir DEPOIS da declaração base de .acordeao-ver-tudo
	   acima (mesma especificidade — quem vem por último no arquivo vence). */
	.acordeao-ver-tudo{ display:none; }
}
.submenu-acordeao li .menu-item-link,
.submenu-acordeao li .acordeao-linha,
.sub-menu li a{
	display:block;
	padding:10px 20px;
	font-size:15px;
	font-weight:400;
	text-transform:none;
	letter-spacing:normal;
	color:var(--preto);
	white-space:nowrap;
	background:transparent;
}
.submenu-acordeao li .menu-item-link:hover,
.submenu-acordeao li .acordeao-linha:hover,
.sub-menu li a:hover{
	background:var(--cinza-claro);
	color:var(--azul-marinho);
}

/* =========================================================
   FEED DE POSTAGENS (ESTILO BLOG)
   ========================================================= */
.page-wrap{ padding:48px 0 64px; }
.feed-header{ margin-bottom:36px; max-width:60ch; }
.page-title{ font-size:32px; }
.page-desc{ color:var(--cinza-medio); }

/* =========================================================
   BARRA DE BUSCA (abaixo do menu — v6.17.0)
   ========================================================= */
.barra-busca-wrap{
	background:var(--cinza-claro);
	border-bottom:1px solid var(--linha);
	padding:14px 0;
}
.barra-busca{
	display:flex;
	align-items:center;
	gap:8px;
	max-width:640px;
	margin:0 auto;
	background:var(--branco);
	border:1px solid var(--linha);
	border-radius:100px;
	padding:6px 8px 6px 18px;
	transition:border-color .15s ease;
}
.barra-busca:focus-within{
	border-color:var(--azul-marinho);
}
.barra-busca-icone{
	display:flex;
	color:var(--cinza-medio);
	flex-shrink:0;
}
.barra-busca-icone svg{ width:18px; height:18px; }
.barra-busca-input{
	flex:1;
	border:none;
	outline:none;
	background:transparent;
	font-size:15px;
	color:var(--preto);
	min-width:0;
	padding:8px 0;
}
.barra-busca-input::placeholder{ color:var(--cinza-medio); }
.barra-busca-input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.barra-busca-input:focus,
.barra-busca-input:focus-visible,
.barra-busca-botao:focus,
.barra-busca-botao:focus-visible{
	outline:none;
}
.barra-busca-botao{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
	background:var(--azul-marinho);
	color:var(--branco);
	font-weight:700;
	font-size:14px;
	border:none;
	border-radius:100px;
	padding:10px 20px;
	cursor:pointer;
	transition:background-color .15s ease;
}
.barra-busca-botao:hover{ background:var(--azul-marinho-hover); }
.barra-busca-botao-icone{ display:none; }

/* No celular, a lupa da esquerda (decorativa) some — a única lupa
   visível na barra passa a ser o botão de buscar, à direita, redondo,
   igual em tudo ao ícone do menu (mesmo desenho e mesmo tamanho de
   18px). */
@media (max-width: 860px){
	.barra-busca-icone{ display:none; }
	.barra-busca-botao{
		width:34px;
		height:34px;
		padding:0;
		border-radius:50%;
	}
	.barra-busca-botao-texto{ display:none; }
	.barra-busca-botao-icone{ display:flex; align-items:center; justify-content:center; }
	.barra-busca-botao-icone svg{ width:18px; height:18px; display:block; }
}

@media (max-width: 600px){
	.barra-busca-wrap{ padding:10px 0; }
	.barra-busca{ padding:4px 6px 4px 14px; }
}

.subcategorias-lista{
	display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px;
}
.subcategorias-lista a{
	padding:8px 16px; border:1px solid var(--linha); border-radius:100px;
	font-size:14px; font-weight:600;
}
.subcategorias-lista a:hover{ border-color:var(--azul-marinho); color:var(--azul-marinho); }
.subcategorias-lista a.filtro-ativo{
	background:var(--azul-marinho); border-color:var(--azul-marinho); color:var(--branco);
}

.filtro-ordenar{
	display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
	margin-bottom:32px; padding:20px; background:var(--cinza-claro); border-radius:14px;
}
.filtro-ordenar-campo{ display:flex; flex-direction:column; gap:6px; min-width:220px; }
.filtro-ordenar-campo label{ font-size:14px; font-weight:600; color:var(--preto); }
.filtro-ordenar-campo select{
	appearance:none; -webkit-appearance:none;
	width:100%; padding:12px 40px 12px 16px; border-radius:10px; border:1px solid var(--linha);
	background:var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 16px center;
	font-size:15px; font-weight:600; color:var(--preto); cursor:pointer;
	transition:border-color .15s ease;
}
.filtro-ordenar-campo select:hover,
.filtro-ordenar-campo select:focus{ border-color:var(--azul-marinho); outline:none; }
.filtro-ordenar .btn-navy{ padding:12px 24px; border:none; cursor:pointer; font-size:15px; }

/* No celular, "Ordenar por" e a caixa de seleção ficam lado a lado em vez de
   um embaixo do outro (o rótulo fica curto, então não faz sentido ocupar
   uma linha inteira sozinho). Vale pra qualquer página que use esse filtro
   (categoria, busca, artigos etc). */
@media (max-width: 600px){
	.filtro-ordenar-campo{
		flex-direction:row; align-items:center; justify-content:space-between;
		gap:12px; min-width:0; width:100%;
	}
	.filtro-ordenar-campo label{ flex-shrink:0; }
	.filtro-ordenar-campo select{ width:auto; flex:1 1 auto; min-width:0; }
}

.trilha-cat{
	display:block; font-size:11.5px; font-weight:700; text-transform:uppercase;
	letter-spacing:.04em; color:var(--azul-marinho); margin-bottom:6px;
}

.feed-paginacao{ margin-top:36px; display:flex; align-items:center; gap:16px; font-size:15px; font-weight:600; }
.feed-paginacao a:hover{ color:var(--azul-marinho); }
.artigos-paginacao{ justify-content:center; flex-wrap:wrap; }
.artigos-pagina-label{ color:var(--cinza-medio); font-weight:600; }
.data-card{ font-size:12.5px; color:var(--cinza-medio); font-weight:600; }

.sem-produtos{ color:var(--cinza-medio); }

/* ---------- Elementos reutilizados em várias seções da home ---------- */
.eyebrow-secao{
	display:block; font-family:var(--display); font-size:14px; font-weight:700; text-transform:uppercase;
	letter-spacing:.06em; color:var(--cinza-medio); margin-bottom:12px;
}
.eyebrow-claro{ color:#9FB0CC; }
.titulo-grande{ font-size:clamp(30px,4vw,42px); margin:0 0 14px; }
.descricao-secao{ color:var(--cinza-medio); font-size:16px; max-width:60ch; margin:0 0 32px; }

/* ---------- 2. ÚLTIMAS NOVIDADES (destaques fixos) ---------- */
.secao-destaques{ padding:48px 0 16px; }
.produtos-grid-destaque .produto-card .corpo{ gap:8px; }

/* "Você também pode gostar" — mesmo carrossel em grade da home, só que
   dentro da página de produto (container mais estreito) e com um
   título mais discreto que os da home. */
.secao-relacionados{ padding:8px 0 40px; }
.secao-relacionados .titulo-relacionados{ font-size:22px; margin:0 0 16px; }

/* ---------- Carrossel em GRADE 2x3 (Top ofertas / Acabaram de chegar) ----------
   Reaproveita o mesmo JS/estrutura do carrossel de categorias, mas cada
   "slide" é uma grade de 2 colunas x 3 linhas (6 cards) em vez de uma
   imagem única — até 3 slides, totalizando 18 cards arrastáveis. */
.produtos-carrossel{ position:relative; margin-top:8px; }
.produtos-carrossel .carrossel-viewport{ height:auto; }
.produtos-grid-carrossel{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:14px; }

/* Variante de uma linha só (carrossel "Você também pode gostar" na
   página do produto) — mesmo card/mesmo comportamento de arraste e
   setas do carrossel em grade, só que 3 colunas x 1 linha por slide
   em vez de 2x3. */
.produtos-grid-carrossel.linha-unica{ grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:auto; }

/* Cards dentro do carrossel de produtos só têm imagem + título (sem
   categoria, sem resumo, sem botão) — o clamp de 2 linhas do título já
   vem da regra global .produto-card:not(.card-noticia) h3 acima,
   reaproveitada também pela grade das páginas de categoria. */

/* Bolinhas de posição: centralizadas, em fluxo normal abaixo dos cards.
   Os !important aqui são propositais: essa regra pisa numa posição
   absoluta (left:0) que existe na regra genérica .carrossel-dots (usada
   por outros carrosséis do tema) — sem isso, se algum plugin/cache
   servir as regras fora de ordem, o alinhamento à esquerda pode voltar. */
.produtos-carrossel .carrossel-dots{
	position:static !important; left:auto !important; bottom:auto !important; transform:none !important;
	width:100%; margin-top:16px;
	display:flex !important; justify-content:center !important; align-items:center;
}
.produtos-carrossel .carrossel-dot{ background:var(--linha); }
.produtos-carrossel .carrossel-dot.ativo{ background:var(--azul-marinho); box-shadow:none; }

/* Setas: cinza-transparentes, sobrepostas na vertical central dos
   cards (não mais um botão retangular embaixo) — a seta de "voltar"
   some quando já está no primeiro grupo, e a de "avançar" some no
   último (ver .carrossel-seta-oculta / lógica em carrossel.js). */
.produtos-carrossel .carrossel-seta{
	position:absolute; top:50%; transform:translateY(-50%);
	width:36px; height:36px; border-radius:50%;
	background:rgba(35,38,43,.4); border:none; color:var(--branco);
	font-size:19px; box-shadow:none; transition:opacity .15s ease;
	opacity:1;
}
.produtos-carrossel .carrossel-seta:hover{ background:rgba(35,38,43,.6); }
.produtos-carrossel .carrossel-seta-oculta{ opacity:0; pointer-events:none; }
.produtos-carrossel .carrossel-anterior{ left:4px; }
.produtos-carrossel .carrossel-proximo{ right:4px; }

@media (max-width: 480px){
	.produtos-grid-carrossel{ gap:10px; }
	.produtos-carrossel .carrossel-seta{ width:32px; height:32px; font-size:17px; }
}
.btn-ver-preco{
	display:block; text-align:center; margin-top:6px;
	background:var(--verde); color:var(--branco); font-weight:700; font-size:15px;
	padding:12px 16px; border-radius:9px; transition:background-color .15s ease;
}
.btn-ver-preco:hover{ background:var(--verde-hover); }

/* ---------- 1. HERO (Encontre o melhor preço antes de comprar) ---------- */
.secao-hero{ padding:56px 0; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.hero-texto{ text-align:left; max-width:560px; margin:0; display:flex; flex-direction:column; align-items:flex-start; }
.eyebrow-coral{ color:var(--coral); }
.hero-texto h1{ font-size:clamp(38px,4.2vw,54px); margin:0 0 18px; line-height:1.08; }
.hero-texto > p{ color:var(--cinza-medio); font-size:16.5px; max-width:60ch; margin:0 0 22px; text-align:left; text-align-last:left; }
.hero-lista{ list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:12px; text-align:left; }
.hero-lista li{ display:flex; align-items:flex-start; gap:10px; font-size:16px; color:var(--preto); }
.hero-lista-icone{ flex:none; color:var(--coral); font-size:17px; line-height:1.4; }
.intro-botoes{ display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-start; }
.btn-navy{
	display:inline-flex; align-items:center; justify-content:center;
	background:var(--azul-marinho); color:var(--branco); font-weight:700; font-size:15.5px;
	padding:14px 24px; border-radius:10px; transition:background-color .15s ease;
}
.btn-navy:hover{ background:#0A1E3B; color:var(--branco); }
.btn-outline{
	display:inline-flex; align-items:center; justify-content:center;
	background:transparent; color:var(--preto); font-weight:700; font-size:15.5px;
	padding:14px 24px; border-radius:10px; border:1px solid var(--linha);
	transition:border-color .15s ease, background-color .15s ease;
}
.btn-outline:hover{ border-color:var(--azul-marinho); color:var(--azul-marinho); }
.secao-ver-todos{ text-align:center; margin-top:28px; }
.intro-imagem{
	aspect-ratio:4/3; border-radius:18px; overflow:hidden;
	background:var(--cinza-claro); border:1px dashed var(--linha);
	display:flex; align-items:center; justify-content:center;
}
.intro-imagem img{ width:100%; height:100%; object-fit:cover; }
.intro-imagem-vazia{ text-align:center; color:var(--cinza-medio); font-size:14px; padding:24px; line-height:1.6; }
.hero-imagem{ aspect-ratio:16/9; }

/* ---------- 3. NAVEGUE POR CATEGORIA (carrossel 2x3) ---------- */
.categorias-atalho{ padding:32px 0 56px; }
.categorias-carrossel{ position:relative; margin-top:8px; }
.categorias-carrossel .carrossel-viewport{ height:auto; }
.categorias-grid-carrossel{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:14px; }
.categoria-card{
	background:var(--cinza-claro); border-radius:14px; padding:16px;
	display:flex; flex-direction:column; gap:4px; border:1px solid transparent; height:100%;
	overflow:hidden;
	transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.categoria-card:hover{ transform:translateY(-3px); border-color:var(--linha); box-shadow:0 14px 26px -18px rgba(20,22,26,.3); background:var(--branco); }
.categoria-avatar{
	width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
	font-weight:800; font-size:15.5px; color:var(--branco); margin-bottom:4px;
}
.categoria-avatar.cor-0{ background:var(--azul-marinho); }
.categoria-avatar.cor-1{ background:var(--verde); }
.categoria-avatar.cor-2{ background:var(--coral); }
.categoria-avatar.cor-3{ background:var(--cinza-escuro); }
.categoria-nome{
	font-weight:800; font-size:14.5px; line-height:1.25;
	display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
	overflow:hidden; min-height:2.5em;
}
.categoria-conteudo{ display:flex; flex-direction:column; gap:4px; flex:1; padding:10px; }

/* Variante com imagem cadastrada pelo admin (substitui o avatar) */
.categoria-card.tem-imagem{ padding:0; gap:0; }
.categoria-imagem{ display:block; width:100%; aspect-ratio:1/1; background:var(--linha); overflow:hidden; }
.categoria-imagem img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; transform:scale(1.15); }
.categoria-imagem.sem-corte{ background:var(--branco); }
.categoria-imagem.sem-corte img{ object-fit:contain; transform:none; }

/* Setas e bolinhas: mesmo padrão enxuto usado no carrossel de produtos —
   bolinhas centralizadas em fluxo normal, setas cinza-transparentes
   sobrepostas no meio dos cards, sem loop (some no primeiro/último grupo). */
.categorias-carrossel .carrossel-dots{
	position:static !important; left:auto !important; bottom:auto !important; transform:none !important;
	width:100%; margin-top:16px;
	display:flex !important; justify-content:center !important; align-items:center;
}
.categorias-carrossel .carrossel-dot{ background:var(--linha); }
.categorias-carrossel .carrossel-dot.ativo{ background:var(--azul-marinho); box-shadow:none; }
.categorias-carrossel .carrossel-seta{
	position:absolute; top:50%; transform:translateY(-50%);
	width:36px; height:36px; border-radius:50%;
	background:rgba(35,38,43,.4); border:none; color:var(--branco);
	font-size:19px; box-shadow:none; transition:opacity .15s ease;
	opacity:1;
}
.categorias-carrossel .carrossel-seta:hover{ background:rgba(35,38,43,.6); }
.categorias-carrossel .carrossel-anterior{ left:4px; }
.categorias-carrossel .carrossel-proximo{ right:4px; }

@media (max-width: 480px){
	.categorias-grid-carrossel{ gap:10px; }
	.categorias-carrossel .carrossel-seta{ width:32px; height:32px; font-size:17px; }
}

/* ---------- GRADE DE PRODUTOS ---------- */
.produtos-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.produto-card{
	border:1px solid var(--linha); border-radius:14px; overflow:hidden; background:var(--branco);
	display:flex; flex-direction:column; transition:box-shadow .18s ease, transform .18s ease;
}
.produto-card:hover{ box-shadow:0 20px 34px -22px rgba(20,22,26,.3); transform:translateY(-2px); }
.produto-card .thumb{ aspect-ratio:4/3; background:var(--branco); border-bottom:1px solid var(--linha); overflow:hidden; }
.produto-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.produto-card .thumb.sem-corte img{ object-fit:contain; }
.produto-card .corpo{ padding:16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.produto-card h3{ font-size:17px; margin:0; line-height:1.3; }
.produto-card h3 a:hover{ color:var(--azul-marinho); }
.produto-card .resumo{ font-size:14px; color:var(--cinza-medio); flex:1; margin:0; }

/* Cards de PRODUTO (não de notícia/artigo) ficam mais compactos: sem o
   texto de resumo em cinza-claro, imagem um pouco menor e espaçamentos
   reduzidos — pensado principalmente pro celular, onde o card antigo
   ocupava a tela quase inteira. Cards de notícia (.card-noticia) não
   são afetados e mantêm o tamanho/resumo de sempre. */
.produto-card:not(.card-noticia) .resumo{ display:none; }
.produto-card:not(.card-noticia) .thumb{ aspect-ratio:1/1; }
.produto-card:not(.card-noticia) .corpo{ padding:10px; gap:5px; }
.produto-card:not(.card-noticia) h3{
	font-size:14px; line-height:1.25;
	display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
	overflow:hidden; min-height:2.6em;
}
.produto-card:not(.card-noticia) .btn-ver-preco{ font-size:12.5px; padding:9px 10px; }
.produto-card:not(.card-noticia) .preco-card{ font-size:15px; margin-top:1px; }

/* ---------- Grade estática de PRODUTOS nas páginas de categoria ----------
   Sem carrossel: sempre 2 colunas, 20 cards por página (10 linhas) —
   cards de produto ficam iguais aos da home (imagem + título de até 2
   linhas), só que com o preço embaixo do título quando cadastrado.
   Cards de notícia (.card-noticia) mantêm o formato completo de sempre. */
.produtos-grid-categoria{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.produtos-grid-categoria .card-noticia{ grid-column:1 / -1; }

@media (max-width: 480px){
	.produtos-grid-categoria{ gap:10px; }
}
.produto-card .rodape-card{
	display:flex; align-items:center; justify-content:space-between;
	margin-top:8px; padding-top:12px; border-top:1px solid var(--linha);
}
.preco-card{ font-family:var(--mono); font-weight:600; color:var(--verde); font-size:17px; }
.ver-mais{ font-size:14px; font-weight:600; color:var(--preto); }
.ver-mais:hover{ color:var(--azul-marinho); }

.tag-noticia{
	align-self:flex-start; font-size:11.5px; font-weight:700; text-transform:uppercase;
	color:var(--cinza-medio); background:var(--cinza-claro); padding:3px 9px; border-radius:100px;
	margin-bottom:2px;
}
.card-noticia{ border-style:dashed; }

/* ---------- TRANSPARÊNCIA (como funciona) ---------- */
.secao-transparencia{ padding:56px 0; background:var(--cinza-claro); }
.transparencia-cabecalho{ max-width:640px; text-align:center; margin:0 auto; }
.transparencia-cabecalho .descricao-secao{ margin-left:auto; margin-right:auto; }
.passos-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:36px; text-align:center; justify-items:center; }
.passo{ display:flex; flex-direction:column; align-items:center; width:100%; }
.passo-icone{
	display:flex; align-items:center; justify-content:center;
	width:72px; height:72px; border-radius:16px;
	background:var(--coral-bg); color:var(--coral); margin:0 auto 20px;
}
.passo-icone svg{ width:30px; height:30px; }
.passo h3{ font-size:20.5px; margin:0 0 8px; }
.passo p{ color:var(--cinza-medio); font-size:15.5px; margin:0 auto; max-width:32ch; }

/* ---------- NEWSLETTER ---------- */
.secao-newsletter{ padding:64px 0; background:var(--azul-marinho); }
.newsletter-centro{ text-align:center; max-width:640px; margin:0 auto; }
.newsletter-centro h2{ color:var(--branco); font-size:clamp(28px,3.6vw,38px); margin:0 0 16px; line-height:1.2; }
.newsletter-centro > p{ color:#B9C6DD; font-size:16.5px; margin:0 0 30px; }
.form-newsletter{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.form-newsletter input{
	flex:1; min-width:240px; padding:14px 18px; border-radius:10px;
	border:1px solid rgba(255,255,255,.3); background:transparent; color:var(--branco); font-size:15.5px;
}
.form-newsletter input::placeholder{ color:#93A4C2; }
.form-newsletter button{
	padding:14px 26px; border-radius:10px; border:none; background:var(--branco);
	color:var(--azul-marinho); font-weight:700; cursor:pointer; transition:opacity .15s ease;
}
.form-newsletter button:hover{ opacity:.85; }
.newsletter-status{ text-align:center; color:#B9C6DD; font-size:14px; margin-top:14px; min-height:1.4em; }

/* ---------- PERGUNTAS FREQUENTES ---------- */
.secao-faq{ padding:56px 0 64px; text-align:center; }
.secao-faq .descricao-secao{ margin-left:auto; margin-right:auto; }
.faq-lista{ max-width:800px; margin:32px auto 0; text-align:left; border-top:1px solid var(--linha); }
.faq-item{ border-bottom:1px solid var(--linha); }
.faq-pergunta{
	width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
	background:transparent; border:none; text-align:left; cursor:pointer;
	padding:22px 4px; font-size:17px; font-weight:700; color:var(--preto); font-family:inherit;
}
.faq-seta{ flex-shrink:0; transition:transform .2s ease; color:var(--cinza-medio); font-size:17px; }
.faq-item.aberto .faq-seta{ transform:rotate(180deg); }
/* Mostrar/esconder simples (display), sem depender de animação de
   grid-template-rows — essa técnica tem suporte irregular entre
   navegadores e podia deixar a resposta sempre visível. */
.faq-resposta{ display:none; }
.faq-item.aberto .faq-resposta{ display:block; }
.faq-resposta > p{ color:var(--cinza-medio); font-size:15.5px; margin:0; padding:0 4px 22px; line-height:1.6; }

.faq-cta{
	margin:48px auto 0; padding:36px; border-radius:16px; background:var(--cinza-claro);
	text-align:center; max-width:800px;
}
.faq-cta h3{ font-size:21.5px; margin:0 0 8px; }
.faq-cta p{ color:var(--cinza-medio); margin:0 0 20px; }

/* =========================================================
   PÁGINA "SOBRE"
   ========================================================= */

/* 1. Hero (quem somos) — card grande e centralizado */
.secao-sobre-hero{ padding:48px 0 8px; }
.sobre-hero-card{
	max-width:760px; margin:0 auto; text-align:center;
	background:var(--cinza-claro); border-radius:20px; padding:56px 40px;
}
.sobre-hero-card .eyebrow-secao{ text-align:center; }
.sobre-hero-card h1{ font-size:clamp(34px,5.5vw,48px); line-height:1.1; margin:0 0 18px; }
.sobre-hero-card p{ color:var(--cinza-medio); font-size:16.5px; max-width:56ch; margin:0 auto 28px; }

/* 2. Nossa missão — reaproveita o grid do hero da home */
.secao-sobre-missao{ padding:64px 0; text-align:center; }
.secao-sobre-missao .hero-texto{ text-align:center; }
.secao-sobre-missao .hero-texto > p{ margin-left:auto; margin-right:auto; }
.missao-grid{ max-width:1020px; }

@media (min-width: 861px){
	.missao-grid{ grid-template-columns:1fr 1fr; align-items:center; gap:56px; }
}

/* 3. Nossos valores */
.secao-valores{ padding:16px 0 64px; text-align:center; }
.secao-valores .descricao-secao{ margin-left:auto; margin-right:auto; }
.valores-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:36px; }
.valor-card{
	background:var(--cinza-claro); border-radius:16px; padding:28px;
	display:flex; flex-direction:column; align-items:center; gap:8px; border:1px solid transparent;
	text-align:center;
	transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.valor-card:hover{ transform:translateY(-3px); border-color:var(--linha); box-shadow:0 14px 26px -18px rgba(20,22,26,.3); background:var(--branco); }
.valor-icone{
	width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center;
	color:var(--branco); margin-bottom:6px; margin-left:auto; margin-right:auto;
}
.valor-icone svg{ width:22px; height:22px; }
.valor-icone.cor-0{ background:var(--azul-marinho); }
.valor-icone.cor-1{ background:var(--verde); }
.valor-icone.cor-2{ background:var(--coral); }
.valor-icone.cor-3{ background:var(--cinza-escuro); }
.valor-card h3{ font-size:19px; margin:0; }
.valor-card p{ color:var(--cinza-medio); font-size:15px; line-height:1.5; margin:0; }

.secao-sobre-conteudo{ padding:0 0 56px; }

/* =========================================================
   POST ÚNICO — NOTÍCIA (sem preço de loja)
   ========================================================= */
.noticia-single{ display:grid; grid-template-columns:1fr; gap:36px; max-width:74ch; margin:0 auto; }
.noticia-single .thumb{
	background:var(--cinza-claro); border:1px solid var(--linha); border-radius:14px; overflow:hidden;
	display:flex; align-items:center; justify-content:center;
}
.noticia-single .thumb img{ width:100%; height:auto; max-height:70vh; object-fit:contain; display:block; }

.categoria-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; justify-content:center; }
.categoria-tag{
	display:inline-block; font-size:13px; font-weight:700; text-transform:uppercase;
	letter-spacing:.05em; color:var(--azul-marinho); background:var(--cinza-claro);
	padding:6px 12px; border-radius:100px;
}
.categoria-tag:hover{ background:#E3E7EE; }

/* ---- Caminho de navegação (breadcrumb) no topo da página de produto ---- */
.produto-breadcrumb{
	display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
	gap:6px; margin-bottom:14px; font-size:13px; color:var(--cinza-medio);
}
.produto-breadcrumb a{ color:var(--cinza-medio); text-decoration:none; }
.produto-breadcrumb a:hover{ color:var(--azul-marinho); text-decoration:underline; }
.produto-breadcrumb a.produto-breadcrumb-atual{ color:var(--preto); font-weight:700; }
.produto-breadcrumb-separador{ color:var(--cinza-medio); opacity:.6; }
.noticia-single h1{ font-size:32px; }
.data-post{ color:var(--cinza-medio); font-size:14px; margin-bottom:20px; }
.descricao{ margin-top:26px; color:var(--preto); }
.descricao p{ margin:0 0 16px; }

/* ---------- Barra flutuante "Ver onde comprar" (páginas de produto) ----------
   Mesmo padrão visual do botão de CTA de notícia (.barra-noticia-cta-btn),
   reaproveitando as cores verdes já usadas em botões de compra do site. */
.barra-comprar-flutuante{
	background:var(--branco);
	border-bottom:1px solid var(--linha);
}
.barra-comprar-flutuante-inner{
	display:flex;
	justify-content:center;
	padding:9px 24px;
}
.barra-comprar-btn{
	display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
	background:var(--verde); color:var(--branco) !important; font-weight:700; font-size:14px;
	padding:9px 16px; border-radius:7px; text-decoration:none;
	transition:background-color .15s ease;
}
.barra-comprar-btn:hover{ background:var(--verde-hover); }

/* Botão maior apenas no desktop — no celular mantém o tamanho original
   (definido acima em .barra-comprar-btn) para não ocupar espaço demais
   na tela pequena. */
@media (min-width: 861px){
	.barra-comprar-btn{
		font-size:16px;
		padding:11px 22px;
		gap:8px;
	}
}

.barra-noticia-cta{
	position:sticky;
	top:0;
	z-index:90;
	background:var(--branco);
	border-bottom:1px solid var(--linha);
}
.barra-noticia-cta-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	flex-wrap:wrap;
	padding:14px 24px;
}
.barra-noticia-cta-nome{
	font-family:var(--display);
	font-size:17px;
	font-weight:800;
	color:var(--preto);
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	max-width:60vw;
}
.barra-noticia-cta-btn{
	display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
	background:var(--verde); color:var(--branco); font-weight:700; font-size:14.5px;
	padding:11px 18px; border-radius:9px; transition:background-color .15s ease;
}
.barra-noticia-cta-btn:hover{ background:var(--verde-hover); }

@media (max-width:600px){
	.barra-noticia-cta-inner{ padding:12px 16px; }
	.barra-noticia-cta-nome{ font-size:14.5px; max-width:46vw; }
	.barra-noticia-cta-btn{ padding:9px 14px; font-size:13.5px; }
}

/* ---- Botões de CTA e imagens inseridos dentro do corpo da notícia ---- */
.noticia-single .descricao img.noticia-imagem-inserida,
.noticia-single .descricao img{
	max-width:100%; height:auto; border-radius:10px; display:block; margin:18px auto;
}
.noticia-single .descricao a.noticia-cta-btn{
	display:inline-block; background:var(--verde); color:var(--branco) !important;
	font-weight:700; padding:14px 26px; border-radius:9px; text-decoration:none;
	font-size:16px; transition:background-color .15s ease;
}
.noticia-single .descricao a.noticia-cta-btn:hover{ background:var(--verde-hover); }

/* ---- Card de produto inserido dentro do corpo da notícia ----
   Card único (foto + título + preço) usado como "página" do carrossel
   embutido (swisshop-carrossel-produtos-embutido logo abaixo) quando o
   autor cola só UM link de produto — nesse caso o carrossel devolve
   uma única página com um card só, com largura fixa parecida com a de
   um card "normal" numa grade, centralizado. */
.swisshop-card-embutido-wrap{
	display:flex; justify-content:center; margin:24px auto; max-width:100%;
}
.swisshop-card-embutido-wrap .produto-card{
	width:100%; max-width:150px; /* mesmo tamanho aproximado de UM card do carrossel "Você também pode gostar" (3 por linha) no celular */
}
.swisshop-card-embutido-wrap .produto-card .thumb{
	aspect-ratio:1/1 !important; height:auto !important; /* caixa quadrada FIXA — todos os cards do carrossel ficam com a mesma altura, alinhados */
	display:flex !important; align-items:center; justify-content:center;
	padding:4px !important; box-sizing:border-box !important;
	background:#FFFFFF !important;
	/* Só um respiro mínimo (4px), o suficiente pra foto não colar na
	   borda arredondada do card. Quem garante "nunca corta, nunca fica
	   minúscula" é o object-fit:contain no <img> logo abaixo: ele
	   encaixa a imagem pelo lado (largura ou altura) que for
	   proporcionalmente maior dentro da caixa quadrada, sempre no
	   maior tamanho possível sem cortar o outro lado — exatamente a
	   regra "respeita o lado maior". Fotos quadradas preenchem a
	   caixa quase inteira; fotos retrato/paisagem sobram só nas
	   pontas dos lados menores (barras brancas), nunca cortando.
	   Só vale aqui, nos cards embutidos em notícias — as grades
	   normais do site continuam com o padding de sempre. */
}
.swisshop-card-embutido-wrap .produto-card .thumb img{
	width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important;
	object-fit:contain !important; /* essa é a regra: encaixa pelo lado maior, sem cortar o menor */
}
.swisshop-card-embutido-wrap .produto-card h3{ font-size:13px; min-height:2.5em; }
.swisshop-card-embutido-wrap .produto-card .preco-card{ font-size:10.5px; }
.swisshop-card-embutido-wrap .produto-card .corpo{ padding-bottom:6px; } /* menos espaço entre o "Ver Preços"/preço e a borda de baixo do card */

/* ---- Carrossel com produto(s) inserido(s) dentro do corpo da
   notícia (botão "🎞️ Adicionar carrossel") ----
   Mesma infra genérica de carrossel do tema. Cada "página" mostra até
   3 produtos DIFERENTES lado a lado, com o mesmo card compacto de
   150px usado no card único (swisshop-card-embutido-wrap .produto-card).
   Quando o autor cola só UM link, o servidor marca essa única página
   com a classe extra "carrossel-produtos-pagina-unico" (ver
   swisshop_renderizar_carrossel_produtos_html em functions.php): em
   vez do grid de 3 colunas, vira um flex centralizado com o card no
   tamanho padrão — o mesmo resultado visual que o antigo botão
   "Adicionar card" (removido, virou redundante). */
.swisshop-carrossel-produtos-embutido{
	display:block; max-width:540px; margin:24px auto;
}
.swisshop-carrossel-produtos-embutido .carrossel,
.swisshop-carrossel-produtos-embutido .carrossel-viewport,
.swisshop-carrossel-produtos-embutido .carrossel-trilho,
.swisshop-carrossel-produtos-embutido .carrossel-slide{
	height:auto; /* os genéricos do tema usam height:100% (pensados pra fotos com altura fixa) */
}
.swisshop-carrossel-produtos-embutido .carrossel-slide{ scroll-snap-align:start; }
.carrossel-produtos-pagina{
	display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;
	padding:2px 22px; /* espaço lateral pras setas não ficarem em cima dos cards */
}
.carrossel-produtos-pagina .produto-card{ width:100%; max-width:none; } /* larguras fixas em px não cabiam em telas de celular mais estreitas — aqui cada coluna do grid encolhe/cresce junto com o espaço disponível */
/* Página com um produto só: sem grid de 3 colunas (deixaria o card
   esticado e desalinhado à esquerda) — um único card centralizado,
   com a largura fixa padrão (herdada de .swisshop-card-embutido-wrap
   .produto-card acima, 150px), igual ao antigo card avulso. */
.carrossel-produtos-pagina-unico{
	display:flex; justify-content:center; padding:2px 22px;
}
.carrossel-produtos-pagina-unico .produto-card{ width:100%; max-width:150px; }
.swisshop-carrossel-produtos-embutido .carrossel-seta{ width:26px; height:26px; font-size:14px; }
.swisshop-carrossel-produtos-embutido .carrossel-anterior{ left:0; }
.swisshop-carrossel-produtos-embutido .carrossel-proximo{ right:0; }

/* ---- Botão de CTA inserido no meio da descrição do produto ---- */
.produto-resumo a.produto-cta-btn{
	display:inline-block; background:var(--verde); color:var(--branco) !important;
	font-weight:700; padding:14px 26px; border-radius:9px; text-decoration:none;
	font-size:16px; transition:background-color .15s ease;
}
.produto-resumo a.produto-cta-btn:hover{ background:var(--verde-hover); }

/* =========================================================
   POST ÚNICO — PRODUTO (hero + ficha técnica + comparador)
   ========================================================= */

/* ---- Seletor de variações (cor, armazenamento etc.) ----
   Miniatura da foto principal da variação + o nome dela embaixo, em
   vez do antigo botão-pílula só com texto. Fica dentro de um mini
   carrossel paginado (reaproveita o carrossel genérico do tema —
   .carrossel/.carrossel-viewport/.carrossel-slide — e o JS que já
   existe em carrossel.js, sem precisar de nenhuma lógica nova de
   arrastar/paginar): cada "página" (carrossel-slide) sempre agrupa 3
   variações, numa única linha de 3 colunas — no celular cada página
   ocupa o viewport inteiro (3 visíveis por vez); no desktop cada
   página passa a ocupar metade do viewport, então 2 páginas ficam
   lado a lado, mostrando 6 de uma vez. */
.variacoes-titulo{
	font-size:13px; font-weight:700; color:var(--cinza-medio);
	text-align:center; margin:4px 0 10px;
}
.variacoes-carrossel{ margin:0 0 18px; }
.variacoes-carrossel .carrossel,
.variacoes-carrossel .carrossel-viewport,
.variacoes-carrossel .carrossel-trilho,
.variacoes-carrossel .carrossel-slide{
	height:auto; /* os genéricos do tema usam height:100% (pensados pra fotos com altura fixa) — aqui a altura é definida pelo conteúdo (grade de cartões) */
}
.variacoes-carrossel .carrossel-slide{ scroll-snap-align:start; }
.variacoes-pagina{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:14px 10px;
	padding:2px 34px; /* espaço lateral pras setas não ficarem em cima dos cartões */
}
/* No desktop, cada "página" continua com 3 itens (mesmo agrupamento de
   dados do celular) — só que cada página passa a ocupar metade da
   largura do carrossel, então 2 páginas ficam lado a lado dentro do
   mesmo viewport, formando uma única linha visível de 6. O clique nas
   setas continua avançando "1 view" por vez (a mesma lógica genérica
   do carrossel.js), que no desktop corresponde a pular de um grupo de
   6 pro próximo. */
@media (min-width:861px){
	.variacoes-carrossel .carrossel-slide{ flex-basis:50%; }
	.variacoes-pagina{ padding:2px 12px; gap:14px; }
}
.variacao-card{
	display:flex; flex-direction:column; align-items:center; gap:6px;
	width:100%; background:none; border:none; padding:0; cursor:pointer;
	text-decoration:none; /* o card de variações embutido em notícias usa <a>, não <button> */
}
.variacao-card-thumb{
	width:100%; aspect-ratio:1/1; max-width:64px; border-radius:12px; overflow:hidden;
	border:1.5px solid var(--linha); background:var(--branco); margin:0 auto;
	display:flex; align-items:center; justify-content:center;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.variacoes-carrossel .variacao-card-thumb img{ width:100%; height:100%; object-fit:contain; display:block; } /* sobrescreve a regra genérica ".carrossel-slide img" com mais especificidade — contain (não cover) pra mostrar a foto inteira, sem cortar/dar zoom */
.variacao-card:hover .variacao-card-thumb{ border-color:var(--azul-marinho); }
.variacao-card.ativo .variacao-card-thumb{
	border-color:var(--azul-marinho); border-width:2px;
	box-shadow:0 0 0 1px var(--azul-marinho);
}
.variacao-card-nome{
	font-size:11px; font-weight:600; line-height:1.3; text-align:center;
	color:var(--cinza-medio); max-width:100%;
}
.variacao-card.ativo .variacao-card-nome{ color:var(--preto); }

/* Setas do mini-carrossel de variações: mesmo componente genérico do
   tema, só um pouco menor pra não brigar visualmente com as setas
   (bem maiores) do carrossel de fotos logo acima. */
.variacoes-carrossel .carrossel-seta{ width:28px; height:28px; font-size:16px; background:var(--branco); border:1px solid var(--linha); box-shadow:0 4px 10px -6px rgba(20,22,26,.35); }
.variacoes-carrossel .carrossel-anterior{ left:-2px; }
.variacoes-carrossel .carrossel-proximo{ right:-2px; }

.produto-hero{
	padding:56px 0 48px;
	background:radial-gradient(1000px 380px at 85% -10%, #E7EEFB 0%, transparent 60%), var(--branco);
	border-bottom:1px solid var(--linha);
}
.produto-hero-grid{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:32px;
}
.produto-hero h1{ font-size:clamp(29.5px,4vw,39.5px); margin-bottom:14px; }
.produto-hero-titulo-topo{ width:100%; text-align:center; }
.produto-hero-titulo-topo h1{ margin-bottom:0; }
/* Nome da variação atual (campo "Nome desta variação padrão" — ou o
   nome de uma variação extra), mostrado como um selo pequeno logo
   abaixo do título. Aparece sempre que esse nome for diferente do
   título do produto, mesmo em produtos com uma única variação (sem
   nenhuma extra cadastrada) — antes só aparecia quando havia 2+
   variações, nos botões de "Outras opções". */
.produto-variacao-atual-nome{
	display:inline-block; margin:8px 0 0; padding:4px 12px;
	background:#F1F3F6; border-radius:999px;
	font-size:13px; font-weight:700; color:var(--cinza-medio);
}
.produto-resumo{
	color:#000; width:100%; margin:0 0 24px; text-align:left;
	font-family:"Public Sans", sans-serif; font-size:16px; line-height:1.7;
}
.produto-resumo p{ margin:0 0 12px; text-align:left; }
.produto-resumo p:last-child{ margin-bottom:0; }
.produto-resumo strong, .produto-resumo b{ color:var(--preto); font-weight:700; }
.produto-resumo em, .produto-resumo i{ font-style:italic; }
.produto-resumo ul, .produto-resumo ol{ margin:0 0 12px; padding-left:22px; text-align:left; }
.produto-resumo ul{ list-style:disc; }
.produto-resumo ol{ list-style:decimal; }
.produto-resumo ul ul{ list-style:circle; }
.produto-resumo li{ display:list-item; margin-bottom:4px; }
.produto-resumo a{ color:var(--azul-marinho); text-decoration:underline; }

.btn-comprar{
	display:flex; align-items:center; justify-content:center; gap:8px;
	width:100%; background:var(--verde); color:var(--branco) !important;
	font-family:var(--display); font-weight:700; font-size:15.5px;
	padding:16px 22px; border-radius:14px; text-decoration:none;
	transition:background-color .15s ease, transform .2s ease;
}
.btn-comprar:hover{ background:var(--verde-hover); transform:translateY(-2px); }
.btn-comprar:active{ transform:translateY(0); }

/* O botão "Ver onde comprar" agora usa a mesma largura máxma da caixa
   que envolve os botões de loja lá embaixo (.podium, 440px) — antes,
   no desktop, ficava do tamanho de um botão de loja (bem menor); agora
   fica com a largura da caixa toda, só que continua um botão inline
   (centralizado), não esticado 100% da coluna de informações do
   produto. No celular continua ocupando a largura inteira. */
@media (min-width: 861px){
	.btn-comprar{
		width:100%; max-width:440px; margin:0 auto; align-self:center;
	}
}

/* No desktop, os carrosséis de categoria/produto usavam a mesma grade
   de 2 colunas do celular — cada card ficava enorme (quase a largura
   toda da tela) e cabia muito pouca coisa por vez. A partir daqui, em
   telas largas, viram 4 colunas — os grupos por slide também subiram
   de 6 para 8 (2x4), então continuam sem sobrar buraco na última
   linha nem no celular (2 colunas) nem no desktop (4 colunas). */
@media (min-width: 861px){
	.categorias-grid-carrossel,
	.produtos-grid-carrossel{
		grid-template-columns:repeat(4, minmax(0,1fr));
	}
	/* A grade de produtos da página de categoria não é um carrossel (é
	   uma listagem paginada normal do WordPress), então pode ir direto
	   pra 4 colunas — não tem grupo fixo de itens pra se preocupar com
	   "sobrar buraco" na última linha. */
	.produtos-grid-categoria{
		grid-template-columns:repeat(4, minmax(0,1fr));
	}
}

.produto-hero-thumb{
	width:100%;
	max-width:440px;
	margin:0 auto;
	background:var(--branco); border:1px solid var(--linha); border-radius:16px; overflow:hidden; aspect-ratio:1/1;
}
.produto-hero-info{
	width:100%;
	margin:0 auto;
	text-align:center;
}
.produto-hero-thumb img{ width:100%; height:100%; object-fit:cover; }
.produto-hero-thumb.sem-corte{ background:var(--branco); }
.produto-hero-thumb.sem-corte img,
.produto-hero-thumb.sem-corte .carrossel-slide img{ object-fit:contain; }

/* ---- Carrossel de imagens do produto ---- */
.carrossel{ position:relative; width:100%; height:100%; }
.carrossel-viewport{
	display:flex;
	width:100%; height:100%;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scrollbar-width:none;
}
.carrossel-viewport::-webkit-scrollbar{ display:none; }
.carrossel-trilho{ display:flex; width:100%; height:100%; }
.carrossel-slide{ flex:0 0 100%; scroll-snap-align:start; }
.carrossel-slide img{ width:100%; height:100%; object-fit:cover; }

.carrossel-seta{
	position:absolute; top:50%; transform:translateY(-50%);
	width:38px; height:38px; border-radius:50%;
	background:rgba(255,255,255,.92); border:none; cursor:pointer;
	display:flex; align-items:center; justify-content:center;
	font-size:21.5px; color:var(--preto);
	box-shadow:0 8px 18px -8px rgba(20,22,26,.35);
	transition:opacity .15s ease;
}
/* Regra genérica: esconde a seta "voltar"/"avançar" quando o carrossel
   está no primeiro/último grupo (ver data-ocultar-setas-pontas em
   carrossel.js) — vale pra qualquer carrossel que use esse atributo,
   não só os de produto/categoria de hoje. !important pra não correr o
   risco de outra regra mais específica (ou cache) manter a seta visível. */
.carrossel-seta-oculta{ opacity:0 !important; pointer-events:none !important; }
.carrossel-anterior{ left:14px; }
.carrossel-proximo{ right:14px; }

.carrossel-dots{
	position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
	display:flex; gap:6px;
}
.carrossel-dot{
	width:8px; height:8px; border-radius:50%;
	background:#E4E6EA; border:none; padding:0; cursor:pointer;
}
.carrossel-dot.ativo{ background:var(--preto); box-shadow:none; }

.section-tag{
	display:block; font-family:var(--display); font-size:13px; font-weight:600; text-transform:uppercase;
	letter-spacing:.08em; color:var(--cinza-medio); margin-bottom:10px;
}

.produto-specs{ padding:52px 0; border-bottom:1px solid var(--linha); }

/* Cabeçalho "Ficha técnica — o essencial" virou um botão que
   expande/recolhe a grade logo abaixo (ver js/faq.js). Fonte um
   pouco maior e num cinza mais escuro que o .section-tag padrão,
   pra deixar claro que é clicável. */
.produto-specs-toggle{
	display:flex; align-items:center; justify-content:flex-start; gap:8px;
	width:100%; background:none; border:none; padding:0; margin-bottom:10px; cursor:pointer;
	text-align:left;
}
.produto-specs-toggle .section-tag{
	margin-bottom:0; font-size:17px; font-weight:700; color:var(--azul-marinho);
}
.produto-specs-toggle-chevron{
	font-size:22px; font-weight:700; color:#374151; transition:transform .15s ease; flex-shrink:0;
}
.produto-specs-toggle[aria-expanded="false"] .produto-specs-toggle-chevron{ transform:rotate(-90deg); }
.spec-grid{
	display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
	background:var(--linha); border:1px solid var(--linha); border-radius:14px; overflow:hidden;
}
.spec-grid[hidden]{ display:none; }
.spec-cell{ background:var(--branco); padding:15px 18px; }
.spec-cell-larga{ grid-column:1 / -1; }
.spec-grid:has(.spec-cell:only-child){
	grid-template-columns:1fr;
	max-width:360px;
	background:var(--branco);
	border-color:var(--linha);
}
.spec-valor{ font-family:var(--display); font-size:18.5px; font-weight:700; color:var(--preto); margin-bottom:4px; }
.spec-label{ font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.05em; color:var(--cinza-medio); }

/* Vídeo do produto (opcional) — entre o botão "Ver onde comprar" e a
   ficha técnica. Some da página inteiramente se nenhum vídeo foi
   enviado (ver swisshop_get_video_url() / single.php). */
.produto-video{ padding:8px 0 64px; }
.produto-video video{
	display:block; width:100%; max-width:420px; max-height:70vh; margin:0 auto; border-radius:14px;
	background:#000;
}

.produto-comparador{ padding:56px 0; }
.produto-comparador h2{ font-size:25.5px; margin:6px 0 30px; }
.aviso-afiliado{
	font-weight:400; font-size:12.5px; line-height:1.6; color:var(--cinza-escuro);
	margin:26px 0 0; width:100%; text-align:center;
}

.podium{ display:grid; gap:14px; align-items:stretch; grid-template-columns:1fr; max-width:440px; margin:0 auto; }

.store-card{
	position:relative; border:1px solid var(--linha); border-radius:14px;
	padding:18px 16px; background:var(--branco); display:flex; flex-direction:column;
	justify-content:center; gap:12px; text-align:left;
}
.store-price{ font-family:var(--display); font-size:19px; font-weight:700; letter-spacing:-.005em; color:var(--preto); }

/* Preço em destaque (verde): só quando faz sentido — loja única, ou o
   preço realmente mais baixo entre 2+ lojas que divulgam valor. Ver
   swisshop_renderizar_podium_html() pra regra completa. A caixinha
   inteira ganha um contorno/fundo verde suave, não só o texto do
   preço, pra ficar bem claro qual é a melhor oferta. */
.store-price-destaque{ color:var(--verde); }
.store-card-menor-preco{
	border-color:var(--verde); background:var(--verde-bg);
	box-shadow:0 0 0 1px var(--verde);
}

/* Texto mostrado no lugar do preço quando a loja não divulga um valor —
   mesmo texto genérico pra qualquer loja nessa situação. */
.store-sem-preco{
	font-family:var(--display); font-size:15px; font-weight:700; letter-spacing:.02em;
	text-transform:uppercase; line-height:1.3; color:var(--preto);
}

.store-btn{
	text-align:center; padding:11px 14px; border-radius:8px;
	font-weight:700; font-size:12.5px; letter-spacing:.03em; text-transform:uppercase;
	border:none; background:var(--cinza-escuro); color:var(--branco);
	transition:background-color .15s ease, filter .15s ease;
}
.store-btn:hover{ background:var(--cinza-escuro-hover); }
.store-btn-desativado{ opacity:.5; border:1px solid var(--linha); background:transparent; color:var(--cinza-medio); }

/* Cor de cada loja na própria marca, só no botão — o resto do card
   (preço, texto sem preço) continua neutro e igual pra todas. */
.store-btn.loja-shopee{ background:linear-gradient(135deg, #F0602F, #D8360F); }
.store-btn.loja-shopee:hover{ filter:brightness(.94); }
.store-btn.loja-amazon{ background:#0F0D12; }
.store-btn.loja-amazon:hover{ filter:brightness(1.35); }
.store-btn.loja-mercadolivre{ background:#FFE600; color:var(--preto) !important; }
.store-btn.loja-mercadolivre:hover{ filter:brightness(.95); }

.produto-descricao{ padding:48px 0 64px; }
.produto-descricao .descricao{ max-width:74ch; margin-top:0; }

/* =========================================================
   RODAPÉ
   ========================================================= */
.site-footer{ background:var(--preto); color:#C9CCD2; margin-top:0; overflow:hidden; }
.footer-grid{
	display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:24px;
	padding:40px 0 24px;
}
.footer-grid > div{ min-width:0; }
.footer-grid h4{ color:var(--branco); font-size:13px; text-transform:uppercase; letter-spacing:.05em; margin:0 0 12px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; font-size:13.5px; }
.footer-grid ul a:hover{ color:var(--branco); }
.footer-sobre{ font-size:13.5px; color:#9AA0AA; max-width:32ch; margin:0 0 12px; }
.footer-selos{ display:flex; flex-wrap:wrap; gap:8px; }
.footer-selos span{ font-family:var(--mono); font-size:10.5px; background:rgba(255,255,255,.08); padding:5px 9px; border-radius:6px; white-space:nowrap; }
.footer-em-breve{ color:#6B7280; }
.footer-redes-sociais{ display:flex; flex-direction:column; gap:10px; }
.footer-rede-social{ display:flex; align-items:center; gap:8px; }
.footer-rede-icone{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; min-width:16px; max-width:16px; max-height:16px; flex-shrink:0; overflow:hidden; }
.footer-rede-icone svg{ display:block; width:16px !important; height:16px !important; max-width:16px; max-height:16px; }
.footer-base{
	border-top:1px solid rgba(255,255,255,.1); padding:16px 0;
	font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
	color:#9AA0AA;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 1024px){
	.hero-grid{ grid-template-columns:1fr; gap:36px; justify-items:center; }
	.hero-texto{ text-align:center; max-width:760px; margin:0 auto; align-items:center; }
	.hero-texto > p{ text-align:justify; text-align-last:center; margin:0 auto 22px; }
	.hero-lista{ display:inline-flex; }
	.intro-botoes{ justify-content:center; }
	.produtos-grid{ grid-template-columns:repeat(2,1fr); }
	.footer-grid{ grid-template-columns:1fr 1fr; }
	.passos-grid{ grid-template-columns:1fr; gap:24px; }
	.valores-grid{ grid-template-columns:1fr; }
}

@media (max-width: 600px){
	.hero-grid{ justify-items:flex-start; }
	.hero-texto{ text-align:left; margin:0; align-items:flex-start; }
	.hero-texto h1{ font-size:30px; }
	.hero-texto > p{ text-align:left; text-align-last:left; margin:0 0 22px; }
	.hero-lista{ display:flex; }
	.intro-botoes{ justify-content:flex-start; }
}

@media (max-width: 860px){
	.menu-categorias-inner{ flex-wrap:nowrap; position:relative; }

	.menu-toggle{ display:flex; }

	/* Menu flutuante: fica sempre visível ao rolar a página (v6.77.0) */
	.menu-categorias{
		position:sticky;
		top:0;
		z-index:500;
	}

	/* A lupinha azul aparece com um esmaecimento suave (crossfade) —
	   sem nenhum ícone "voando" pela tela. */
	.busca-toggle-topo{
		display:flex;
		opacity:0;
		pointer-events:none;
		transition:opacity .3s ease;
	}
	body.swisshop-scrolled .busca-toggle-topo{
		opacity:1;
		pointer-events:auto;
	}
	/* Enquanto a caixa de busca está aberta (flutuando), a lupinha do
	   menu some — do mesmo jeito que ela some no topo da página — pra
	   não ter duas lupas visíveis ao mesmo tempo. Ela volta assim que a
	   pessoa rolar a tela (o que também fecha a busca de novo). */
	body.swisshop-busca-aberta .busca-toggle-topo{
		opacity:0;
		pointer-events:none;
	}

	/* A barra de busca é um elemento comum, no fluxo normal da página —
	   não é escondida nem tem a altura mexida quando a página rola.
	   Ela só "some" da forma mais simples e sem bugs possível: rolando
	   pra fora da tela como qualquer outro conteúdo. Antes, escondê-la
	   via JS ao cruzar o ponto de rolagem fazia o resto da página pular
	   de posição (o espaço dela sendo removido/devolvido ao layout na
	   hora). Sem nenhum JS mexendo nela nesse momento, esse pulo não
	   acontece mais — ela é "independente" do resto da estrutura.
	   Só quando a pessoa toca de propósito na lupinha do menu (estado
	   "aberta" abaixo) é que ela vira um overlay fixo — aí sim, uma
	   ação deliberada, não algo automático da rolagem. */
	.barra-busca-wrap{
		opacity:1;
		transition:opacity .2s ease;
	}
	body.swisshop-busca-aberta .barra-busca-wrap{
		opacity:1;
		position:fixed;
		top:var(--swisshop-nav-altura, 61px);
		left:0;
		right:0;
		z-index:495;
		box-shadow:0 14px 24px -16px rgba(20,22,26,.3);
	}

	/* Barra "Ver onde comprar": começa logo abaixo da barra de busca, no
	   fluxo normal (igual a ela) — usa "position:sticky" com o mesmo
	   deslocamento (altura do menu) da busca flutuante aberta acima, pra
	   grudar exatamente no mesmo lugar assim que rolar o bastante pra
	   sair da tela. Diferente da busca (que só vira "fixed" quando a
	   pessoa toca de propósito na lupinha), aqui é automático — é uma
	   barra permanente de CTA, não uma busca que aparece sob demanda. */
	.barra-comprar-flutuante{
		position:sticky;
		top:var(--swisshop-nav-altura, 61px);
		z-index:490; /* abaixo do menu (500) e da busca aberta (495), acima do conteúdo normal */
		transition:top .2s ease;
	}

	/* Com a busca flutuante aberta (a lupinha do menu foi tocada), a
	   caixa de busca vira "fixed" e ocupa o mesmo topo onde a barra
	   "Ver onde comprar" gruda (position:sticky) — sem isso, uma barra
	   ficaria sobreposta à outra. Aqui a barra "Ver onde comprar" desce
	   a altura da busca (medida em JS), pra ficar logo abaixo dela, de
	   forma fluída, e não por cima. */
	body.swisshop-cta-recuada .barra-comprar-flutuante{
		top:calc(var(--swisshop-nav-altura, 61px) + var(--swisshop-busca-altura, 56px));
	}

	.menu-overlay{
		display:block;
		position:fixed;
		inset:0;
		background:rgba(20,22,26,0);
		pointer-events:none;
		transition:background .25s ease;
		z-index:400;
	}
	.menu-aberto .menu-overlay{
		background:rgba(20,22,26,.5);
		pointer-events:auto;
	}

	.menu-drawer{
		display:none;
		position:fixed;
		top:0;
		left:0;
		bottom:0;
		width:82%;
		max-width:340px;
		background:var(--branco);
		overflow-y:auto;
		z-index:410;
		padding-bottom:24px;
	}
	.menu-aberto .menu-drawer{ display:block; }

	.menu-drawer-topo{
		display:flex;
		align-items:center;
		justify-content:space-between;
		padding:18px 20px;
		background:var(--branco);
		border-bottom:1px solid var(--linha);
		margin-bottom:6px;
	}
	.menu-drawer-titulo{
		font-family:var(--display);
		font-weight:700;
		font-size:15px;
		text-transform:uppercase;
		letter-spacing:.06em;
		color:var(--preto);
	}
	.menu-fechar{
		background:transparent;
		border:none;
		color:var(--preto);
		font-size:28px;
		line-height:1;
		cursor:pointer;
		padding:0 4px;
	}

	/* Lista de cards, um por linha, alinhados à esquerda.
	   Cada linha é OU um link OU um botão — nunca os dois juntos. */
	.menu-principal{
		display:flex;
		flex-direction:column;
		gap:6px;
		padding:12px;
	}
	.menu-item-link,
	.acordeao-linha{
		display:flex;
		align-items:center;
		justify-content:space-between;
		width:100%;
		border-radius:10px;
		background:var(--cinza-claro);
		padding:14px 16px;
		color:var(--preto);
		font-size:14px;
		font-weight:600;
		text-transform:uppercase;
		letter-spacing:.06em;
		line-height:1;
		border:none;
		text-align:left;
		font-family:inherit;
		cursor:pointer;
		transition:background-color .15s ease;
	}
	.menu-item-link:active,
	.acordeao-linha:active{
		background:var(--linha);
	}

	.acordeao-chevron{
		display:inline-block;
		font-size:14px;
		color:var(--cinza-medio);
		flex-shrink:0;
		margin-left:10px;
		transition:transform .2s ease;
	}
	.menu-item.acordeao-aberto > .acordeao-linha .acordeao-chevron{
		transform:rotate(180deg);
	}

	/* Painel: some/aparece empurrando o conteúdo de baixo — sem
	   sobrepor nada, sem tela cheia.
	   IMPORTANTE: esse mesmo seletor (.acordeao-painel) também é
	   usado no desktop com position:absolute — por isso todo campo
	   de posicionamento precisa ser resetado aqui explicitamente,
	   senão "vaza" e o painel flutua por cima do item de baixo. */
	.acordeao-painel{
		display:none;
		position:static;
		top:auto;
		left:auto;
		right:auto;
		z-index:auto;
		flex-direction:column;
		background:#EBEDF0;
		border:none;
		box-shadow:none;
		border-radius:10px;
		margin:4px 0 0;
		padding:6px;
		gap:2px;
		min-width:0;
		max-width:100%;
		width:100%;
	}
	.menu-item.acordeao-aberto > .acordeao-painel{ display:flex; }
	.menu-item .menu-item .acordeao-painel{ top:auto; left:auto; } /* mesma especificidade da regra do desktop, garantindo que sempre vença aqui */

	.acordeao-ver-tudo{
		display:block;
		padding:12px 10px;
		font-size:14px;
		font-weight:700;
		text-transform:none;
		letter-spacing:normal;
		color:var(--coral);
		border-bottom:1px solid var(--linha);
		margin-bottom:4px;
	}
	.acordeao-ver-tudo:active{ opacity:.6; }

	.submenu-acordeao{
		display:flex;
		flex-direction:column;
		gap:2px;
	}
	.submenu-acordeao .menu-item-link,
	.submenu-acordeao .acordeao-linha{
		background:transparent;
		font-size:14.5px;
		font-weight:500;
		text-transform:none;
		letter-spacing:normal;
		padding:11px 10px;
		color:var(--preto);
		white-space:normal;
	}
	.submenu-acordeao .menu-item-link:active,
	.submenu-acordeao .acordeao-linha:active{
		background:rgba(0,0,0,.06);
	}

	.produtos-grid{ grid-template-columns:1fr; }
	.form-newsletter{ width:100%; flex-direction:column; }
	.form-newsletter input{ flex:1; min-width:0; }
	.passos-grid{ grid-template-columns:1fr; }
	.faq-cta{ padding:28px 22px; }
	.sobre-hero-card{ padding:36px 24px; }

	.footer-grid{ grid-template-columns:1fr 1fr; gap:28px 20px; }
	.footer-grid > div:nth-child(1){ grid-column:1 / -1; padding-left:18px; }
	.footer-grid > div:nth-child(2){ padding-left:18px; }
	.footer-base{ flex-direction:column; gap:6px; }
}

@media (max-width: 480px){
	.spec-grid{ grid-template-columns:1fr; }
	.spec-cell{ padding:12px 15px; }
	.spec-valor{ font-size:16.5px; }
	.spec-label{ font-size:10.5px; }
}

/* Estilos da galeria de fotos no admin (frame, número, setas) foram
   movidos para css/admin-campos.css, carregado só nas telas de admin —
   ver swisshop_admin_scripts() e as páginas Novo/Editar Produto. */

/* =========================================================
   PÁGINA: POLÍTICA DE PRIVACIDADE
   ========================================================= */
.politica-hero{ background:var(--cinza-claro); padding:56px 0 40px; border-bottom:1px solid var(--linha); }
.politica-hero-inner{ max-width:760px; }
.politica-hero .titulo-grande{ font-size:clamp(30px,5vw,42px); }
.politica-hero .descricao-secao{ margin-bottom:20px; }
.politica-badge-atualizacao{
	display:inline-flex; align-items:center; gap:8px;
	background:var(--verde-bg); color:var(--verde-hover);
	font-size:13.5px; font-weight:700;
	padding:8px 14px; border-radius:100px;
}

.politica-corpo-grid{
	display:grid; grid-template-columns:1fr; gap:40px;
	padding:44px 0 80px; align-items:start;
}

.politica-sumario{
	background:var(--cinza-claro); border:1px solid var(--linha); border-radius:16px;
	padding:22px 20px;
}
.politica-sumario-titulo{
	display:block; font-family:var(--display); font-size:13px; font-weight:700;
	text-transform:uppercase; letter-spacing:.06em; color:var(--cinza-medio); margin-bottom:12px;
}
.politica-sumario-lista{ display:flex; flex-direction:column; gap:2px; }
.politica-sumario-lista a{
	color:var(--preto); font-size:14.5px; font-weight:600; text-decoration:none;
	padding:8px 10px; border-radius:8px; border-left:2px solid transparent;
	transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.politica-sumario-lista a:hover{ background:var(--branco); }
.politica-sumario-lista a.ativo{ background:var(--branco); border-left-color:var(--azul-marinho); color:var(--azul-marinho); }

.politica-conteudo{
	max-width:720px; font-size:16.5px; line-height:1.75; color:var(--cinza-escuro);
}
.politica-conteudo h2{
	font-size:24px; margin-top:2em; padding-top:8px; scroll-margin-top:24px;
}
.politica-conteudo h2:first-child{ margin-top:0; }
.politica-conteudo h3{ font-size:19px; margin-top:1.6em; }
.politica-conteudo p{ margin:0 0 18px; }
.politica-conteudo ul,
.politica-conteudo ol{ margin:0 0 18px; padding-left:1.4em; }
.politica-conteudo ul{ list-style:disc; }
.politica-conteudo ol{ list-style:decimal; }
.politica-conteudo ul ul{ list-style:circle; margin-bottom:0; }
.politica-conteudo li{ margin-bottom:8px; display:list-item; }
.politica-conteudo a{ color:var(--azul-marinho); text-decoration:underline; text-underline-offset:2px; }
.politica-conteudo a:hover{ color:var(--azul-marinho-hover); }
.politica-conteudo strong{ color:var(--preto); }
.politica-conteudo blockquote{
	border-left:3px solid var(--azul-marinho); margin:24px 0; padding:6px 0 6px 20px;
	color:var(--cinza-medio); font-style:italic;
}
.politica-conteudo hr{ border:none; border-top:1px solid var(--linha); margin:36px 0; }
.politica-conteudo table{ width:100%; border-collapse:collapse; margin:0 0 24px; }
.politica-conteudo th,
.politica-conteudo td{ border:1px solid var(--linha); padding:10px 12px; text-align:left; font-size:15px; }
.politica-conteudo th{ background:var(--cinza-claro); font-weight:700; }

@media (min-width: 900px){
	.politica-corpo-grid{ grid-template-columns:220px 1fr; gap:56px; }
	.politica-sumario{
		position:sticky; top:24px;
		/* Trava a altura da caixa ao espaço visível da tela (descontando
		   o "top" e uma margem embaixo), e deixa só a lista de links
		   rolar dentro dela — assim dá pra ver todas as seções sem
		   precisar rolar a página inteira. */
		max-height:calc(100vh - 48px);
		display:flex;
		flex-direction:column;
	}
	.politica-sumario-lista{
		overflow-y:auto;
		padding-right:6px; /* evita a barra de rolagem colar no texto */
		flex:1 1 auto;
		min-height:0; /* necessário pro overflow funcionar dentro de flex column */
	}
}

@media (max-width: 600px){
	.politica-hero{ padding:44px 0 32px; }
	.politica-hero-inner{ padding:0 8px; }
	.politica-corpo-grid{ padding:36px 0 64px; }
	.politica-corpo-grid > *{ padding:0 8px; }
}