/*
Theme Name: EasyIce
Theme URI: https://easyice.com
Template: twentytwentyfive
Author: Estudio Grampo
Description: Tema do site da EasyIce (filho do Twenty Twenty-Five). Os blocos personalizados ficam em /acf-custom-blocks e são registrados automaticamente pelo plugin ACF Blocks Setup.
Requires at least: 6.7
Requires PHP: 7.2
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: easyice
*/

/* ==========================================================================
   0. Tokens e base
   Escala tipográfica e espaçamentos moram em theme.json (font sizes e
   settings.custom); aqui só ficam apelidos e regras de layout.
   ========================================================================== */
:root {
	--ei-container: 1200px;
	--ei-gutter: var(--wp--custom--gutter, 24px);
	--ei-gap: var(--wp--custom--gap, 48px);
	--ei-section: var(--wp--custom--section, 80px);
	--ei-shape: var(--wp--custom--radius-shape, 120px);
	--ei-header-h: 96px;
	--ei-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: 0.01ms !important; }
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

/* Blocos "alignfull" vão de borda a borda; o resto ganha respiro lateral. */
.entry-content.is-layout-constrained > :is(.wp-block-group, .wp-block-columns, .wp-block-heading, .wp-block-paragraph, p, ul, ol, figure, .wp-block-buttons, .wp-block-shortcode):not(.alignfull):not(.alignwide) {
	padding-left: var(--ei-gutter);
	padding-right: var(--ei-gutter);
	box-sizing: border-box;
}

/* Linhas mais largas que a coluna de 1200px. */
.entry-content > .onde-linhas,
.entry-content > .lojas-lista { max-width: 1264px !important; }

/* ==========================================================================
   1. Botão (pill) -- markup em inc/helpers.php easyice_botao()
   ========================================================================== */
.botao-personalizado {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	padding: 0.28em 1.1em 0.32em;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--veneer-clean);
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.25s var(--ei-ease), filter 0.2s, box-shadow 0.25s;
}

.botao-personalizado:hover {
	filter: brightness(1.1);
	color: var(--wp--preset--color--base);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(86, 44, 75, 0.22);
}

.botao-personalizado--pequeno { font-size: 1.0625rem; }
.botao-personalizado--grande { font-size: 1.625rem; }

.botao-personalizado__seta { display: inline-flex; color: var(--wp--preset--color--secondary); }
.botao-personalizado__seta svg { display: block; height: 0.5em; width: auto; }
.botao-personalizado__seta--baixo svg { height: 0.95em; }

/* Laranja: fundo laranja, seta branca. .botao-laranja mantido por compatibilidade. */
.botao-personalizado--laranja,
.botao-laranja.botao-personalizado { background: var(--wp--preset--color--secondary); }

.botao-personalizado--laranja:hover,
.botao-laranja.botao-personalizado:hover { box-shadow: 0 8px 20px rgba(220, 137, 61, 0.35); }

.botao-personalizado--laranja .botao-personalizado__seta,
.botao-laranja.botao-personalizado .botao-personalizado__seta { color: var(--wp--preset--color--base); }

@media (max-width: 600px) {
	.botao-personalizado { font-size: 1.1875rem; }
	.botao-personalizado--grande { font-size: 1.3125rem; }
}

/* ==========================================================================
   2. Cabeçalho (sobre o hero)
   ========================================================================== */
/* Fixo no topo: o menu (e o botão no celular) fica sempre à mão. Como já estava
   fora do fluxo (sobre o hero), nada muda no layout. */
header.wp-block-template-part {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

.admin-bar header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 0px); }

/* Âncoras (#historia, #franquias, #interesse...) não ficam escondidas sob o cabeçalho. */
html { scroll-padding-top: calc(var(--ei-header-h) + 16px); }

.easyice-header__bar {
	position: relative;
	isolation: isolate;
	align-items: center;
	min-height: var(--ei-header-h);
	padding: 20px clamp(20px, 3vw, 44px);
	box-sizing: border-box;
	transition: min-height 0.25s var(--ei-ease), padding 0.25s var(--ei-ease), box-shadow 0.25s;
}

/* Depois de rolar: barra sólida e mais baixa, com uma sombra leve. */
.is-scrolled .easyice-header__bar {
	min-height: 68px;
	padding-top: 10px;
	padding-bottom: 10px;
	box-shadow: 0 6px 24px rgba(21, 35, 46, 0.1);
}

.is-scrolled .easyice-header__bar::before { background: rgba(255, 255, 255, 0.95); }
.is-scrolled .easyice-header__logo img { width: 92px; height: auto; }
.easyice-header__logo img { transition: width 0.25s var(--ei-ease); }

/* O fundo vai num pseudo-elemento: backdrop-filter no próprio elemento
   quebraria o menu em tela cheia (position: fixed) dentro dele. */
.easyice-header__bar::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.6);
	-webkit-backdrop-filter: blur(10px) saturate(1.15);
	backdrop-filter: blur(10px) saturate(1.15);
}

.easyice-header__logo { margin: 0; }
.easyice-header__logo img { display: block; height: auto; }

.easyice-header__nav {
	font-family: var(--wp--preset--font-family--veneer-clean);
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #000;
}

.easyice-header__nav .wp-block-navigation__container { gap: clamp(20px, 2.4vw, 40px); }

.easyice-header__nav .wp-block-navigation-item a {
	position: relative;
	padding-block: 6px;
	transition: color 0.2s;
}

.easyice-header__nav .wp-block-navigation-item a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--secondary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s var(--ei-ease);
}

.easyice-header__nav .wp-block-navigation-item a:hover { color: var(--wp--preset--color--primary); }
.easyice-header__nav .wp-block-navigation-item a:hover::after,
.easyice-header__nav .current-menu-item > a::after { transform: scaleX(1); }

.easyice-header__social { gap: 16px; }
.easyice-header__social .wp-social-link { background: none; }

/* Ícones sociais dentro do menu: só aparecem no menu em tela cheia. O <li> que
   os envolve também some, senão sobra um item vazio (e uma folga) no menu desktop. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .easyice-nav-social,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item:has(> .easyice-nav-social) { display: none !important; }

/* ---- Tablet e celular: menu em tela cheia (o núcleo só quebra em 600px) ---- */
@media (max-width: 1099px) {
	:root { --ei-header-h: 80px; }

	.easyice-header__bar { padding: 14px 20px; }
	.easyice-header__bar::before { background: rgba(255, 255, 255, 0.94); }
	.easyice-header__social { display: none !important; }

	.easyice-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
	.easyice-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
}

/* Botão do menu: círculo roxo bem visível, à direita. */
.easyice-header__nav .wp-block-navigation__responsive-container-open,
.easyice-header__nav .wp-block-navigation__responsive-container-close {
	width: 48px;
	height: 48px;
	padding: 0;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 26px 26px;
	color: var(--wp--preset--color--base);
	box-shadow: 0 4px 14px rgba(86, 44, 75, 0.35);
	cursor: pointer;
	transition: transform 0.2s var(--ei-ease), background-color 0.2s;
}

.easyice-header__nav .wp-block-navigation__responsive-container-open svg,
.easyice-header__nav .wp-block-navigation__responsive-container-close svg { display: none; }

.easyice-header__nav .wp-block-navigation__responsive-container-open {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M4 7h18M4 13h18M4 19h18'/%3E%3C/svg%3E");
}

.easyice-header__nav .wp-block-navigation__responsive-container-close {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l14 14M20 6L6 20'/%3E%3C/svg%3E");
	top: 16px;
	right: 20px;
}

.easyice-header__nav .wp-block-navigation__responsive-container-open:hover,
.easyice-header__nav .wp-block-navigation__responsive-container-close:hover {
	background-color: var(--wp--preset--color--secondary);
	transform: scale(1.06);
}

/* Menu aberto */
.easyice-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 0;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}

/* O núcleo alinha os itens do menu ao centro via estas variáveis: aqui, à esquerda. */
.easyice-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-align: stretch;
	--navigation-layout-justify: flex-start;
	--navigation-layout-justification-setting: flex-start;
}

.easyice-header__nav .is-menu-open .wp-block-navigation__responsive-close {
	min-height: 100%;
	display: flex;
	flex-direction: column;
}

.easyice-header__nav .is-menu-open .wp-block-navigation__responsive-dialog {
	flex: 1;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	padding: 92px 24px 40px;
	box-sizing: border-box;
	background: url("assets/images/logo-header.png") no-repeat 24px 24px / 111px auto;
}

.easyice-header__nav .is-menu-open .wp-block-navigation__responsive-container-content {
	flex: 1;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* O núcleo centraliza os itens do menu; aqui viram uma lista de largura total. */
.easyice-header__nav .is-menu-open .wp-block-navigation__container {
	width: 100%;
	flex: 1;
	flex-direction: column;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 0;
	font-size: clamp(1.875rem, 8vw, 2.5rem);
	line-height: 1.1;
	color: var(--wp--preset--color--primary);
}

.easyice-header__nav .is-menu-open .wp-block-navigation-item {
	display: block !important;
	width: 100%;
	align-items: stretch !important;
	border-bottom: 1px solid rgba(86, 44, 75, 0.14);
}

.easyice-header__nav .is-menu-open .wp-block-navigation-item a {
	display: block;
	width: 100%;
	padding: 14px 0;
	border-radius: 8px;
}

.easyice-header__nav .is-menu-open .wp-block-navigation-item a:focus-visible { outline-offset: -2px; }
.easyice-header__nav .is-menu-open .wp-block-navigation-item a::after { display: none; }
.easyice-header__nav .is-menu-open .current-menu-item > a { color: var(--wp--preset--color--secondary); }

/* Ícones sociais no fim do menu, alinhados à esquerda como os links. */
.easyice-header__nav .is-menu-open .wp-block-navigation-item:has(> .easyice-nav-social) {
	margin-top: auto;
	padding-top: 28px;
	border-bottom: 0;
}

.easyice-header__nav .is-menu-open .easyice-nav-social {
	justify-content: flex-start;
	margin: 0;
	padding: 0;
	gap: 22px;
}

.easyice-header__nav .is-menu-open .easyice-nav-social .wp-social-link { background: none; }
.easyice-header__nav .is-menu-open .easyice-nav-social svg { width: 30px; height: 30px; }

/* ==========================================================================
   3. Rodapé
   ========================================================================== */
footer.wp-block-template-part { margin: 0; }

.easyice-footer {
	padding: clamp(40px, 5vw, 64px) var(--ei-gutter);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.65;
	box-sizing: border-box;
}

.easyice-footer__inner {
	max-width: var(--ei-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(150px, 1fr) minmax(230px, 1.3fr) minmax(200px, 1fr) auto;
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}

.easyice-footer p { margin: 0; }

.easyice-footer__marca { justify-content: flex-start; }
.easyice-footer__marca img { filter: brightness(0) invert(1); }

.easyice-footer__info { display: flex; flex-direction: column; gap: 10px; }
.easyice-footer__titulo { font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.01em; }
.easyice-footer a:hover { color: var(--wp--preset--color--secondary); }
.easyice-footer__info a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.35); }

.easyice-footer__nav { font-size: 1rem; }
.easyice-footer__nav .wp-block-navigation__container { gap: 6px; }
.easyice-footer__nav a { padding-block: 2px; transition: color 0.2s; }

/* O núcleo fixa a cor dos links de navegação com especificidade (0,3,0), que vence o
   ".easyice-footer a:hover" acima. Sem esta regra os links do rodapé não reagiriam ao
   hover (o sublinhado nativo do tema pai, único sinal até então, foi removido no theme.json). */
.easyice-footer .wp-block-navigation .wp-block-navigation-item__content:hover,
.easyice-footer .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--secondary);
}

.easyice-footer__social { gap: 18px; }
.easyice-footer__social svg { width: 22px; height: 22px; }

@media (max-width: 1000px) {
	.easyice-footer__inner { grid-template-columns: 1fr 1fr; align-items: start; }
	.easyice-footer__marca { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
	.easyice-footer__inner { grid-template-columns: 1fr; gap: 32px; }
	.easyice-footer__nav .wp-block-navigation__container { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
}

/* ==========================================================================
   4. Quem Somos
   ========================================================================== */
/* Fundo da página: cinza liso + duas peças ancoradas (lóbulo roxo sob o hero e
   curva branca no rodapé), em vez de uma imagem única esticada que "andava"
   quando a altura do hero mudava. O isolamento cria o contexto de empilhamento
   que deixa o lóbulo aparecer só através da onda transparente do hero. */
.qs-pagina {
	position: relative;
	isolation: isolate;
	overflow: clip;
	background: #d2d2d2;
}

.qs-historia {
	--lobo-w: max(42.7vw, 300px);
	position: relative;
	padding: clamp(24px, 3vw, 40px) var(--ei-gutter) clamp(120px, 20vw, 300px);
	background: url("assets/images/qs-base.png") no-repeat left bottom / 100% auto;
}

.qs-historia::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	top: calc(var(--lobo-w) * -0.0862);
	width: var(--lobo-w);
	aspect-ratio: 2 / 1;
	background: url("assets/images/qs-lobo.png") no-repeat 0 0 / 100% 100%;
	pointer-events: none;
}

.qs-historia > * { position: relative; z-index: 1; }

.qs-historia__abertura {
	max-width: 1000px;
	margin: 0 auto clamp(40px, 5vw, 72px);
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
	flex-wrap: nowrap;
}

.qs-historia__abertura figure { flex: 0 1 460px; margin: 0; }
.qs-historia__abertura figure img { width: 100%; height: auto; display: block; }

.qs-historia__destaque {
	flex: 1 1 0;
	margin: 0;
	font-size: clamp(1.5rem, 2.3vw, 2rem);
	font-weight: 700;
	font-style: italic;
	line-height: 1.25;
	color: var(--wp--preset--color--contrast);
}

.qs-historia__colunas {
	max-width: 940px;
	margin: 0 auto;
	gap: clamp(32px, 5vw, 72px);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.7;
	text-align: left;
}

.qs-historia__colunas p { margin: 0 0 1.3em; }

.qs-historia .qs-deco { position: absolute; z-index: 0; margin: 0; pointer-events: none; }
.qs-historia .qs-deco img { display: block; width: 100%; height: auto; }
.qs-historia .qs-deco--copos { right: 0; bottom: -12vw; width: 47vw; }
.qs-historia .qs-deco--sobremesa { left: -6vw; top: 32vw; width: 19vw; }

/* Entre 1100 e 1360px a foto da esquerda encostaria no texto: some. */
@media (max-width: 1360px) {
	.qs-historia .qs-deco--sobremesa { display: none; }
}

@media (max-width: 1100px) {
	.qs-historia { padding-bottom: var(--ei-section); background-size: 180% auto; }
	.qs-historia .qs-deco { display: none; }
	.qs-historia__abertura { flex-wrap: wrap; justify-content: center; }
	.qs-historia__abertura figure { flex: 0 1 460px; }
	.qs-historia__destaque { flex-basis: 100%; }
	.qs-historia__colunas { column-gap: 32px; row-gap: 1.3em; }
}

/* ==========================================================================
   5. Home
   ========================================================================== */
.home-produtos-titulo { padding-top: clamp(32px, 4vw, 56px) !important; padding-bottom: clamp(20px, 2.5vw, 36px) !important; text-align: center; }

.especialistas__titulo h2 { line-height: 1; margin: 0; }
.especialistas__subtitulo {
	margin: 14px 0 0;
	font-size: clamp(1.25rem, 2.2vw, 1.875rem) !important;
	line-height: 1.1;
}

.especialistas__logos {
	max-width: 860px;
	margin: clamp(32px, 4vw, 56px) auto 0;
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 3vw, 40px);
}

.logos-linha { width: 100%; align-items: center; gap: 24px; }
.logos-linha .wp-block-image { margin: 0; }
.logos-linha img { display: block; max-width: none; flex: 0 0 auto; }
.logos-linha .logo-screen img { mix-blend-mode: screen; } /* PNGs com fundo preto (bigmais, verdemar) */

.especialistas__botao { margin-top: clamp(32px, 4vw, 52px); }

.home-quem-somos { padding: clamp(40px, 5vw, 72px) var(--ei-gutter) var(--ei-section); }
.home-quem-somos h2 { margin: 0 0 clamp(24px, 3vw, 40px); text-align: center; }

.home-quem-somos__linha { max-width: var(--ei-container); margin: 0 auto; gap: var(--ei-gap); flex-wrap: nowrap; }
.home-quem-somos__linha figure { flex: 0 1 560px; margin: 0; }
.home-quem-somos__linha figure img { width: 100%; height: auto; display: block; }

.home-quem-somos__texto {
	flex: 1 1 380px;
	max-width: 480px;
	align-items: flex-start;
	gap: 28px;
	font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
	font-weight: 400;
	line-height: 1.65;
}

.home-quem-somos__texto p { margin: 0; text-align: left !important; }

@media (max-width: 900px) {
	.logos-linha { flex-wrap: wrap; justify-content: center; }
	.home-quem-somos__linha { flex-wrap: wrap; }
	.home-quem-somos__texto { max-width: none; }
}

/* Celular: os logos viram uma grade única de 2 colunas. */
@media (max-width: 700px) {
	.especialistas__logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; align-items: center; justify-items: center; }
	/* .especialistas__logos > … vence o display:flex que o WordPress injeta nos grupos. */
	.especialistas__logos > .logos-linha { display: contents; }
	.especialistas__logos .logos-linha .wp-block-image { display: flex; justify-content: center; width: 100%; }
	.especialistas__logos .logos-linha img { zoom: 0.85; }
}

/* ==========================================================================
   6. Nossas Lojas
   ========================================================================== */
.lojas-lista { padding: clamp(24px, 3vw, 40px) var(--ei-gutter) 0; }

.lojas-linha {
	max-width: var(--ei-container);
	margin: 0 auto clamp(20px, 3vw, 40px);
	gap: var(--ei-gap);
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
}

.lojas-linha > figure { flex: 0 1 560px; margin: 0; }
.lojas-linha > figure img { width: 100%; height: auto; display: block; }

.lojas-linha__texto { flex: 1 1 320px; max-width: 460px; gap: 6px; }
.lojas-linha__texto h3 { margin: 0 0 12px; font-size: clamp(1.75rem, 2.6vw, 2.25rem); color: var(--wp--preset--color--contrast); }
.lojas-linha__texto p { margin: 0 0 1em; font-size: 1.0625rem; font-weight: 400; line-height: 1.6; color: var(--wp--preset--color--contrast); }
.lojas-linha__texto .lojas-linha__intro { font-weight: 500; max-width: 440px; }
.lojas-linha__texto .lojas-insta { margin: 4px 0 0; }

.lojas-insta { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.lojas-insta::before {
	content: "";
	width: 20px;
	height: 20px;
	background: var(--wp--preset--color--primary);
	-webkit-mask: url(assets/images/icon-instagram-roxo.svg) center / contain no-repeat;
	mask: url(assets/images/icon-instagram-roxo.svg) center / contain no-repeat;
}

/* Franquias: faixa laranja com cantos redondos */
.lojas-franquia {
	background: var(--wp--preset--color--secondary);
	border-radius: var(--ei-shape) var(--ei-shape) 0 0;
	margin-top: clamp(24px, 4vw, 56px);
	padding-top: clamp(24px, 3vw, 40px);
	overflow: hidden;
}

.lojas-franquia__cabecalho h2,
.lojas-franquia__sub { color: var(--wp--preset--color--base); text-align: center; }

.lojas-franquia__cabecalho { padding: clamp(28px, 4vw, 56px) var(--ei-gutter); }
.lojas-franquia__cabecalho h2 { line-height: 1.02; margin: 0 0 14px; }
.lojas-franquia__sub { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-style: italic; font-weight: 500; line-height: 1.3; }

.lojas-franqueado {
	max-width: var(--ei-container);
	margin: 0 auto;
	padding: 0 var(--ei-gutter) clamp(24px, 3vw, 40px);
	gap: var(--ei-gap);
	flex-wrap: nowrap;
	align-items: center;
	position: relative;
	z-index: 2;
	margin-bottom: clamp(-90px, -6vw, -40px);
}

.lojas-franqueado > figure { flex: 0 1 480px; margin: 0; }
.lojas-franqueado > figure img { width: 100%; height: auto; display: block; }
.lojas-franqueado__texto { flex: 1 1 0; gap: 20px; color: var(--wp--preset--color--base); }
.lojas-franqueado__texto h3 { margin: 0; font-size: clamp(1.875rem, 3.2vw, 2.75rem); line-height: 1.12; color: var(--wp--preset--color--base); }
.lojas-franqueado__texto p { margin: 0; font-size: clamp(1rem, 1.3vw, 1.1875rem); font-weight: 400; line-height: 1.6; color: var(--wp--preset--color--base); }
.lojas-franqueado__texto .lojas-franqueado__autor { margin-left: 22px; display: list-item; list-style: disc; font-style: italic; font-size: 1rem; }

.lojas-oferece {
	background-size: 100% 100%;
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(28px, 4vw, 48px);
	padding: clamp(110px, 12vw, 170px) var(--ei-gutter) clamp(90px, 10vw, 150px);
	box-sizing: border-box;
}

.lojas-oferece h2 { margin: 0; color: var(--wp--preset--color--base); text-align: center; }

.lojas-oferece .lojas-oferece__itens {
	width: 100%;
	max-width: var(--ei-container);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 44px);
	align-items: start;
}

.oferta-item { container-type: inline-size; max-width: 250px; width: 100%; margin: 0 auto; text-align: center; color: var(--wp--preset--color--base); }

.oferta-pill {
	width: 100%;
	aspect-ratio: 228 / 209;
	padding: 6cqw 8cqw;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	display: flex;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: center;
	justify-content: center !important;
	gap: 3cqw;
}

.oferta-pill > * { flex-shrink: 0; }
.oferta-pill figure { margin: 0; width: 46cqw; height: 46cqw; }
.oferta-pill img { width: 100%; height: 100%; object-fit: contain; display: block; }

.oferta-pill .oferta-titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--veneer-clean);
	font-size: clamp(1.0625rem, 12cqw, 1.625rem);
	line-height: 0.95;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
}

.oferta-item .oferta-texto {
	margin: 16px 0 0;
	padding: 10px 14px 12px;
	border-radius: 18px;
	background: rgba(21, 35, 46, 0.62);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--base);
}

.lojas-revendedor {
	max-width: var(--ei-container);
	margin: 0 auto;
	padding: clamp(40px, 5vw, 72px) var(--ei-gutter);
	gap: var(--ei-gap);
	flex-wrap: nowrap;
	align-items: center;
}

.lojas-revendedor__texto { flex: 1 1 0; gap: 26px; }
.lojas-revendedor__texto h2 {
	margin: 0;
	font-family: var(--wp--preset--font-family--ranille);
	font-size: clamp(2.5rem, 4.6vw, 4rem);
	font-weight: 400;
	line-height: 1.05;
	text-align: left;
	color: var(--wp--preset--color--contrast);
}
.lojas-revendedor__texto p { margin: 0; max-width: 520px; font-size: 1.0625rem; font-weight: 400; line-height: 1.65; }
.lojas-revendedor > figure { flex: 0 1 600px; margin: 0; }
.lojas-revendedor > figure img { width: 100%; height: auto; display: block; }

@media (max-width: 1100px) {
	.lojas-linha, .lojas-franqueado, .lojas-revendedor { flex-wrap: wrap; justify-content: center; }
	.lojas-linha > figure, .lojas-franqueado > figure, .lojas-revendedor > figure { flex: 0 1 100%; max-width: 520px; }
	.lojas-linha > figure { order: -1; }
	.lojas-linha { margin-bottom: 48px; }
	.lojas-linha__texto { flex-basis: 100%; max-width: 560px; }
	.lojas-franqueado { margin-bottom: 0; }
	.lojas-oferece .lojas-oferece__itens { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
}

@media (max-width: 782px) {
	.lojas-franqueado__texto, .lojas-revendedor__texto { flex-basis: 100%; }
	.lojas-oferece { background-size: cover; }
	/* "Seja um revendedor": título, texto e botão centralizados no mobile */
	.lojas-revendedor__texto { align-items: center; text-align: center; }
	.lojas-revendedor__texto h2 { text-align: center; }
	.lojas-revendedor__texto p { margin-inline: auto; }
}

/* ==========================================================================
   7. Marca Própria
   ========================================================================== */
.marcas-intro {
	max-width: var(--ei-container);
	margin: 0 auto;
	padding: clamp(24px, 3vw, 48px) var(--ei-gutter) clamp(40px, 5vw, 72px);
	gap: var(--ei-gap);
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
}

.marcas-intro__texto { flex: 1 1 0; max-width: 520px; gap: 24px; }
.marcas-intro__texto .marcas-intro__destaque {
	margin: 0;
	font-family: var(--wp--preset--font-family--ranille);
	font-size: clamp(1.625rem, 2.5vw, 2.125rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
}
.marcas-intro__texto p:not(.marcas-intro__destaque) { margin: 0; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); font-weight: 400; line-height: 1.65; text-align: left; }
.marcas-intro__foto { flex: 0 1 520px; margin: 0; }
.marcas-intro__foto img { width: 100%; max-width: 520px; aspect-ratio: 606 / 588; height: auto; object-fit: cover; border-radius: 500px; display: block; }

.marcas-faixa { background: var(--wp--preset--color--primary); padding: clamp(36px, 4vw, 56px) 0; }
.marcas-faixa__titulo {
	margin: 0 auto clamp(20px, 2.5vw, 32px);
	padding: 0 var(--ei-gutter);
	max-width: 900px;
	font-family: var(--wp--preset--font-family--ranille);
	font-size: clamp(1.375rem, 2.2vw, 1.875rem);
	font-weight: 400;
	line-height: 1.25;
	text-align: center;
	color: var(--wp--preset--color--base);
}
.marcas-faixa .logos-marquee { margin: 0 0 clamp(20px, 2.5vw, 32px); }
.marcas-faixa__botao { display: flex; justify-content: center; }

.marcas-mapa { background: var(--wp--preset--color--cinza); padding: clamp(40px, 5vw, 64px) 0 0; }
.marcas-mapa__titulo {
	margin: 0 0 clamp(20px, 2.5vw, 32px);
	padding: 0 var(--ei-gutter);
	font-family: var(--wp--preset--font-family--ranille);
	font-size: clamp(1.875rem, 3.4vw, 2.75rem);
	font-weight: 400;
	line-height: 1.15;
	text-align: center;
	color: var(--wp--preset--color--contrast);
}

/* O bloco roxo (cantos arredondados) sobe sobre o fim da seção cinza do mapa,
   assim os cantos mostram cinza em vez de branco. */
.marcas-mapa:not(.marcas-mapa--redondo) { padding-bottom: var(--ei-shape); }
.marcas-busca {
	margin-top: calc(var(--ei-shape) * -1);
	background: var(--wp--preset--color--primary);
	border-radius: var(--ei-shape) var(--ei-shape) 0 0;
}
.marcas-busca__chamada {
	margin: 0 auto;
	max-width: 900px;
	padding: clamp(48px, 6vw, 88px) var(--ei-gutter);
	font-family: var(--wp--preset--font-family--ranille);
	font-size: clamp(1.5rem, 3.2vw, 2.75rem);
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	color: var(--wp--preset--color--base);
}

.marcas-busca__painel {
	background: var(--wp--preset--color--cinza);
	border-radius: var(--ei-shape) var(--ei-shape) 0 0;
	padding: clamp(44px, 5vw, 72px) var(--ei-gutter) clamp(48px, 5vw, 72px);
}

.marcas-busca__painel h2 {
	margin: 0 0 clamp(20px, 2.5vw, 32px);
	font-family: var(--wp--preset--font-family--ranille);
	font-size: clamp(1.875rem, 3.4vw, 2.75rem);
	font-weight: 400;
	line-height: 1.15;
	text-align: center;
	color: var(--wp--preset--color--contrast);
}

.marcas-busca__formas { display: flex; justify-content: center; gap: clamp(16px, 2.5vw, 36px); flex-wrap: wrap; }
.marca-forma { position: relative; width: min(100%, 250px); cursor: pointer; transition: transform 0.3s var(--ei-ease); }
.marca-forma:hover { transform: translateY(-4px); }
.marca-forma:focus-visible { outline: 3px solid var(--wp--preset--color--secondary); outline-offset: 4px; border-radius: 40px; }
.marca-forma figure { margin: 0; }
.marca-forma img { display: block; width: 100%; height: auto; }
.marca-forma .marca-forma__texto {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	margin: 0;
	transform: translateY(-50%);
	text-align: center;
	font-family: var(--wp--preset--font-family--ranille);
	font-size: clamp(1.25rem, 1.7vw, 1.5rem);
	line-height: 1.15;
	color: var(--wp--preset--color--base);
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

@media (max-width: 1100px) {
	.marcas-intro { flex-wrap: wrap; justify-content: center; }
	.marcas-intro__texto { flex-basis: 100%; max-width: 620px; }
	.marcas-intro__foto { flex: 0 1 100%; max-width: 420px; }
}

@media (max-width: 560px) {
	.marca-forma { width: calc(50% - 10px); }
}

/* ==========================================================================
   8. Onde Encontrar
   ========================================================================== */
.onde-linhas { padding: clamp(24px, 3vw, 40px) 0 clamp(32px, 4vw, 64px); }

.onde-linha {
	max-width: 1240px;
	margin: 0 auto clamp(24px, 3vw, 48px);
	padding: 0 var(--ei-gutter);
	gap: var(--ei-gap);
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
}

.onde-linha > figure { flex: 0 1 540px; margin: 0; }
.onde-linha > figure img { width: 100%; height: auto; display: block; }
.onde-linha__texto { flex: 1 1 320px; max-width: 500px; min-width: 0; gap: 22px; }
.onde-linha__texto h2 {
	margin: 0;
	font-family: var(--wp--preset--font-family--ranille);
	font-size: clamp(1.75rem, 2.8vw, 2.5rem);
	font-weight: 400;
	line-height: 1.12;
	color: var(--wp--preset--color--contrast);
}
.onde-linha__texto p { margin: 0; font-size: 1.0625rem; font-weight: 400; line-height: 1.65; color: var(--wp--preset--color--contrast); }
.onde-linha--img-esq > figure { order: -1; }

.marcas-mapa--redondo { border-radius: var(--ei-shape) var(--ei-shape) 0 0; padding-top: clamp(48px, 6vw, 80px); }
.onde-revendedor { background: var(--wp--preset--color--secondary); border-radius: var(--ei-shape) var(--ei-shape) 0 0; overflow: hidden; }

@media (max-width: 1100px) {
	.onde-linha { flex-wrap: wrap; margin-bottom: 48px; }
	.onde-linha > figure { flex: 0 1 100%; max-width: 520px; order: -1; }
	.onde-linha__texto { flex-basis: 100%; max-width: 560px; }
}

/* ==========================================================================
   9. Logística
   ========================================================================== */
.logistica-intro {
	max-width: var(--ei-container);
	margin: 0 auto;
	padding: clamp(24px, 3vw, 48px) var(--ei-gutter) clamp(40px, 5vw, 72px);
	gap: var(--ei-gap);
	flex-wrap: nowrap;
	align-items: center;
}

.logistica-intro > figure { flex: 0 1 480px; margin: 0; }
.logistica-intro > figure img { width: 100%; height: auto; display: block; }
.logistica-intro__texto { flex: 1 1 0; gap: 0; }
.logistica-intro__texto h2 {
	margin: 0 0 clamp(20px, 2.5vw, 32px);
	font-family: var(--wp--preset--font-family--ranille);
	font-size: clamp(1.875rem, 3.4vw, 2.75rem);
	font-weight: 400;
	line-height: 1.12;
	color: var(--wp--preset--color--contrast);
}
.logistica-intro__texto p { margin: 0 0 1.2em; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); font-weight: 400; line-height: 1.65; text-align: left; }

.logistica-foto { margin: 0 !important; }
.logistica-foto img { width: 100%; height: auto; aspect-ratio: 1440 / 560; object-fit: cover; display: block; }

.logistica-cta {
	max-width: 900px;
	margin: 0 auto;
	padding: var(--ei-section) var(--ei-gutter);
	text-align: center;
}
.logistica-cta h2 {
	margin: 0 0 clamp(24px, 3vw, 36px);
	font-family: var(--wp--preset--font-family--ranille);
	font-size: clamp(1.75rem, 3.2vw, 2.625rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
}

@media (max-width: 1100px) {
	.logistica-intro { flex-wrap: wrap; }
	.logistica-intro > figure { flex: 0 1 100%; max-width: 420px; }
	.logistica-intro__texto { flex-basis: 100%; }
}

/* ==========================================================================
   10. Páginas simples: busca, arquivos, artigos e 404
   ========================================================================== */
.easyice-pagina-simples {
	max-width: var(--ei-container);
	margin: 0 auto;
	padding: calc(var(--ei-header-h) + clamp(48px, 6vw, 88px)) var(--ei-gutter) var(--ei-section);
	box-sizing: border-box;
	min-height: 60vh;
}

.easyice-pagina-simples__titulo { margin: 0 0 32px; font-size: clamp(2.25rem, 4.4vw, 3.75rem); line-height: 1.05; }
.easyice-pagina-simples > * + * { margin-top: 24px; }

.easyice-busca { max-width: 640px; margin-bottom: 48px !important; }
.easyice-busca .wp-block-search__inside-wrapper { gap: 10px; border: 0; padding: 0; }

.easyice-busca .wp-block-search__input {
	height: 52px;
	padding: 0 26px;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 30px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--asap);
	font-size: 1.0625rem;
}

.easyice-busca .wp-block-search__button,
.easyice-btn-laranja .wp-block-button__link,
.easyice-btn-roxo .wp-block-button__link {
	margin: 0;
	padding: 0.28em 1.2em 0.32em;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--veneer-clean);
	font-size: 1.375rem;
	line-height: 1.3;
	text-transform: uppercase;
	cursor: pointer;
}

.easyice-btn-roxo .wp-block-button__link { background: var(--wp--preset--color--primary); }
.easyice-busca .wp-block-search__button:hover,
.easyice-btn-laranja .wp-block-button__link:hover,
.easyice-btn-roxo .wp-block-button__link:hover { filter: brightness(1.1); color: var(--wp--preset--color--base); }

.easyice-resultados { list-style: none; padding: 0; margin: 0 0 40px; display: flex; flex-direction: column; gap: 32px; }
.easyice-resultados > li { border-bottom: 1px solid var(--wp--preset--color--cinza); padding-bottom: 32px; }
.easyice-resultados__titulo { margin: 0 0 8px; font-family: var(--wp--preset--font-family--ranille); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 400; }
.easyice-resultados__titulo a { color: var(--wp--preset--color--primary); }
.easyice-resultados__titulo a:hover { color: var(--wp--preset--color--secondary); }

.easyice-cards { list-style: none; padding: 0; margin: 0 0 40px; }
.easyice-cards > li { display: flex; flex-direction: column; gap: 10px; }
.easyice-cards__img { margin: 0; overflow: hidden; border-radius: 40px 40px 40px 8px; }
.easyice-cards__data { margin: 0; font-size: 0.875rem; color: #666; }
.easyice-cards h3 a { color: var(--wp--preset--color--primary); }
.easyice-cards h3 a:hover { color: var(--wp--preset--color--secondary); }

.wp-block-query-pagination { gap: 16px; font-family: var(--wp--preset--font-family--veneer-clean); font-size: 1.25rem; text-transform: uppercase; }
.wp-block-query-pagination a { color: var(--wp--preset--color--primary); }
.wp-block-query-pagination .page-numbers.current { color: var(--wp--preset--color--secondary); }

.easyice-vazio { font-size: 1.125rem; }
.easyice-404 { text-align: center; }
.easyice-pagina-simples .easyice-busca { margin-left: 0; margin-right: auto; }
.easyice-404 .easyice-busca { margin-left: auto; margin-right: auto; }
.easyice-404__codigo { margin: 0; font-family: var(--wp--preset--font-family--ranille); font-size: clamp(5rem, 16vw, 10rem); line-height: 1; color: var(--wp--preset--color--secondary); }
.easyice-artigo__img { overflow: hidden; border-radius: 60px 60px 60px 8px; }

@media (max-width: 782px) {
	.easyice-busca .wp-block-search__inside-wrapper { flex-wrap: wrap; }
}

/* ==========================================================================
   11. Acessibilidade
   ========================================================================== */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link.screen-reader-text:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 1000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 18px;
	clip: auto;
	clip-path: none;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--veneer-clean);
	font-size: 1.25rem;
	text-transform: uppercase;
}

/* Honeypot do Contact Form 7 ("your-website"): invisível para pessoas. */
.easyice-form .hp-field {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

a:focus-visible, button:focus-visible { outline: 2px solid var(--wp--preset--color--secondary); outline-offset: 3px; }

/* Nossos Produtos: a onda decorativa de fundo some no celular (vira ruído atrás dos cards). */
@media (max-width: 640px) {
	.produtos-fundo { background-image: none !important; }
}

/* Logística: a foto do caminhão ganha proporção de foto (não faixa) no celular. */
@media (max-width: 782px) {
	.logistica-foto img { aspect-ratio: 4 / 3; }
}