/*
 * ELEMENTAR — páginas internas (políticas, contato, carrinho, checkout, Minha conta).
 * Cabeçalho e rodapé escuros da marca; área de conteúdo clara para formulários e
 * componentes de pagamento.
 */

:root {
	--el-black: #090a0b;
	--el-panel: #131416;
	--el-line: #292b2e;
	--el-white: #fff;
	--el-cream: #f6f4ee;
	--el-muted: #b8b9bd;
	--el-title-dark: #1a1b1e;
	--el-body-dark: #5e6065;
	--el-yellow: #fcd76c;
	--el-orange: #e7ae35;
	--el-cta: #f5c542;
	--el-cta-hover: #ffd43b;
	--el-border-light: #dad7ce;
}

body.el-site {
	margin: 0;
	background: var(--el-cream);
	color: var(--el-title-dark);
	font: 400 15px/1.65 'Inter', 'Segoe UI', Arial, sans-serif;
}

body.el-site *,
body.el-site *::before,
body.el-site *::after {
	box-sizing: border-box;
}

body.el-site h1,
body.el-site h2,
body.el-site h3,
body.el-site h4 {
	font-family: 'Manrope', 'Segoe UI', Arial, sans-serif;
	font-weight: 700;
	color: var(--el-title-dark);
	line-height: 1.22;
	letter-spacing: -.5px;
	margin: 0 0 .6em;
}

body.el-site h1 { font-size: clamp(28px, 3.5vw, 38px); letter-spacing: -1.2px; }
body.el-site h2 { font-size: 24px; }
body.el-site h3 { font-size: 18px; }

body.el-site p { color: var(--el-body-dark); margin: 0 0 1em; }
body.el-site a { color: #7a5408; }
body.el-site a:hover { color: var(--el-title-dark); }
body.el-site img { max-width: 100%; height: auto; }

body.el-site :is(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid #6b4d0f;
	outline-offset: 3px;
}

.el-site-container {
	width: min(100%, 1100px);
	margin: 0 auto;
	padding: 0 48px;
}

.el-site-header {
	background: var(--el-black);
	border-bottom: 1px solid var(--el-line);
	padding: 19px 0;
}

.el-site-header .el-site-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
}

.el-site-header .el-logo,
.el-site-header .custom-logo {
	display: block;
	width: 162px;
	height: auto;
}

body.el-site .el-site-account {
	color: var(--el-white);
	font-size: 12px;
	text-decoration: none;
}

body.el-site .el-site-account:hover { color: var(--el-yellow); }
body.el-site .el-site-header :focus-visible,
body.el-site .el-site-footer :focus-visible { outline-color: var(--el-yellow); }

.el-site-main { display: block; min-height: 50vh; }

.el-site-content { padding-top: 58px; padding-bottom: 74px; }

.el-site-entry > *:first-child { margin-top: 0; }

.el-site-footer {
	background: var(--el-black);
	color: #bbb;
	padding: 32px 0;
}

.el-site-footer .el-site-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}

.el-site-footer-logo { display: block; width: 120px; height: auto; }
.el-site-ampliar { display: block; width: 148px; height: auto; margin-top: 18px; opacity: .94; }

.el-site-footerlinks ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px 20px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 11px;
}

body.el-site .el-site-footerlinks a { color: #bbb; text-decoration: none; }
body.el-site .el-site-footerlinks a:hover { color: var(--el-yellow); }
body.el-site .el-site-footer p { color: #bbb; font-size: 11px; margin: 0; }

body.el-site .el-site-button,
body.el-site .wp-block-button__link,
body.el-site .wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 50px;
	padding: 15px 24px;
	border: 0;
	border-radius: 6px;
	background: var(--el-cta);
	color: #111;
	font: 600 12px/1.4 'Inter', 'Segoe UI', Arial, sans-serif;
	letter-spacing: .3px;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s;
}

body.el-site .el-site-button:hover,
body.el-site .wp-block-button__link:hover,
body.el-site .wp-element-button:hover {
	background: var(--el-cta-hover);
	color: #111;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 16px;
	top: 8px;
	left: 8px;
	z-index: 100000;
	background: var(--el-cta);
	color: #111;
}

@media (max-width: 800px) {
	.el-site-container { padding-left: 30px; padding-right: 30px; }
}

@media (max-width: 590px) {
	.el-site-container { padding-left: 22px; padding-right: 22px; }
	.el-site-header { padding: 15px 0; }
	.el-site-header .el-logo,
	.el-site-header .custom-logo { width: 120px; }
	.el-site-content { padding-top: 44px; padding-bottom: 44px; }
	.el-site-footer .el-site-container { flex-direction: column; align-items: flex-start; gap: 22px; }
	.el-site-footerlinks ul { justify-content: flex-start; gap: 13px 18px; }
	.el-site-ampliar { width: 142px; }
}

@media (prefers-reduced-motion: reduce) {
	body.el-site * { transition: none !important; }
}