/* ==========================================================================
   Sousènsi — moldura das páginas: aviso do topo, cabeçalho e rodapé
   ========================================================================== */

/* -------------------------------------------------------------- aviso do topo */

body.sd .woocommerce-store-notice {
	font-family: var(--sd-text) !important;
	font-size: 0.75rem !important;
	font-weight: 400 !important;   /* o contraste do fundo já destaca; peso extra pesava */
	letter-spacing: 0.06em !important;
	line-height: 1.4;
	margin: 0 !important;          /* é um <p>: a margem padrão abria 9px antes do cabeçalho */
	padding-block: 9px !important;
	background: var(--sd-blue-deep) !important;
	color: var(--sd-white) !important;
}

/* -------------------------------------------------------------- cabeçalho e menus */

body.sd .c-top-menu__item > a,
body.sd .c-top-menu__list > li > a {
	font-family: var(--sd-text) !important;
	font-size: 0.875rem !important;
	font-weight: var(--sd-text-weight) !important;
	letter-spacing: 0.02em !important;
	color: var(--sd-ink) !important;
	position: relative;
}

/* O tema desenha um traço no <li> (com !important no hover); fica só o traço novo, no link */
body.sd .c-top-menu__item:not(.c-top-menu__item--has-children)::after { display: none !important; }

/* Itens com submenu usam a::after para a seta: o traço novo vale só para os demais */
body.sd .c-top-menu__item:not(.c-top-menu__item--has-children) > a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -4px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--sd-ease);
}
body.sd .c-top-menu__item:not(.c-top-menu__item--has-children) > a:hover::after,
body.sd .c-top-menu__item.current-menu-item:not(.c-top-menu__item--has-children) > a::after { transform: scaleX(1); }

body.sd .c-mobile-menu__item > a {
	font-family: var(--sd-display) !important;
	font-weight: var(--sd-display-weight) !important;
	font-size: var(--sd-step-2) !important;
	letter-spacing: 0 !important;
}

/* Itens gravados em minúsculas ou Em Título: só a primeira letra maiúscula */
body.sd .c-top-menu__item > a,
body.sd .c-mobile-menu__item > a {
	display: inline-block;
	text-transform: lowercase !important;
}
body.sd .c-top-menu__item > a::first-letter,
body.sd .c-mobile-menu__item > a::first-letter {
	text-transform: uppercase;
}

/* Celular e tablet: o cabeçalho transparente sobre a foto do hero escondia o logo no rosto da
   modelo. O posicionamento fica com o tema (absoluto e fixo ao rolar, com top calculado por JS
   abaixo do aviso do topo); aqui só o fundo sólido e a reserva da altura no fluxo. */
@media (max-width: 1189px) {
	body.sd .c-header--header-type-1 { background: var(--sd-paper) !important; }
	body.sd .c-header__outer--mobile { min-height: 60px; }
}

@media (max-width: 767px) {
	body.sd .woocommerce-store-notice {
		font-size: 0.6875rem !important;
		letter-spacing: 0.03em !important;
		padding-inline: 16px !important;
	}
}

/* -------------------------------------------------------------- rodapé
   Template Elementor 57 com um widget HTML (.sd-footer): garantias, marca, Loja, Sousènsi,
   Atendimento, selo do manual e barra legal. Fundo no Azul profundo com tudo em branco (5,1:1);
   os textos de apoio também ficam brancos, porque qualquer transparência cai abaixo de 4,5:1
   nesse azul. As cores ficam em variáveis para o rodapé poder mudar de tom sem mexer nas regras. */

body.sd .c-footer {
	--sd-f-bg: var(--sd-blue-deep);
	--sd-f-ink: var(--sd-white);
	--sd-f-muted: var(--sd-white);
	--sd-f-line: rgba(255, 255, 255, 0.28);
	--sd-f-icon: var(--sd-white);
	background: var(--sd-f-bg) !important;
	padding: 0 !important;
	margin: 0 !important;
}
body.sd .c-footer .elementor-section,
body.sd .c-footer .elementor-column,
body.sd .c-footer .elementor-widget-wrap { background: transparent !important; padding: 0 !important; margin: 0 !important; }
body.sd .c-footer .elementor-container { max-width: none !important; }
body.sd .c-footer .elementor-widget { width: 100% !important; margin: 0 !important; }

body.sd .sd-footer {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
	font-family: var(--sd-text);
	font-style: normal;
	color: var(--sd-f-ink);
	text-align: left;
}
body.sd .sd-footer ul { list-style: none; margin: 0; padding: 0; }
body.sd .sd-footer li { margin: 0; }
body.sd .sd-footer a {
	color: var(--sd-f-ink) !important;
	font: inherit;
	text-decoration: none;
	text-underline-offset: 4px;
}
body.sd .sd-footer a:hover { text-decoration: underline; }
body.sd .sd-footer svg { fill: none !important; stroke: currentColor !important; }

/* Garantias: a mesma lista da home (base.css), nas cores do rodapé. Na home a página já tem a
   faixa própria. */
body.sd .sd-footer__trust .sd-trust {
	border-top: 0;
	border-bottom: 1px solid var(--sd-f-line);
	padding: 40px 0;
}
body.sd .sd-footer__trust .sd-trust svg { color: var(--sd-f-icon); }
body.sd .sd-footer__trust .sd-trust strong { color: var(--sd-f-ink); }
body.sd .sd-footer__trust .sd-trust span { color: var(--sd-f-muted); }
body.sd.home .sd-footer__trust { display: none; }

body.sd .sd-footer__main {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr auto;
	gap: 48px;
	padding: clamp(56px, 6vw, 80px) 0 clamp(48px, 5vw, 64px);
}
body.sd .sd-footer__logo {
	display: block;
	width: 148px;
	height: 26px;
	background: var(--sd-white);
	-webkit-mask: url("../../../../uploads/2026/08/logotipo-azul-sousensi.svg") left center / contain no-repeat;
	mask: url("../../../../uploads/2026/08/logotipo-azul-sousensi.svg") left center / contain no-repeat;
}
body.sd .sd-footer__tagline {
	max-width: 26ch;
	margin: 20px 0 24px;
	font-size: 0.9375rem;
	font-weight: var(--sd-light-weight);
	line-height: 1.6;
	color: var(--sd-f-muted);
}
body.sd .sd-footer__social { display: flex; gap: 8px; margin: 0; }
body.sd .sd-footer__social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--sd-f-line);
	border-radius: 50%;
	color: var(--sd-f-icon) !important;
	transition: border-color .25s var(--sd-ease);
}
body.sd .sd-footer__social a:hover { border-color: currentColor; text-decoration: none; }

body.sd .sd-footer__heading {
	margin: 0 0 18px;
	font-size: var(--sd-caps-size) !important;
	font-weight: 500 !important;
	letter-spacing: var(--sd-caps-tracking) !important;
	text-transform: uppercase !important;
	color: var(--sd-f-muted);
}
body.sd .sd-footer__col li {
	font-size: 0.9375rem;
	line-height: 1.5;
	padding: 5px 0;
	color: var(--sd-f-ink);
}
body.sd .sd-footer__hours { color: var(--sd-f-muted) !important; font-size: 0.875rem !important; }

/* Selo circular do manual (pág. 25), com a tagline emocional do briefing */
body.sd .sd-footer__seal {
	display: block;
	width: 112px;
	height: 113px;
	background: var(--sd-white);
	-webkit-mask: url("../img/selo-cuidado.svg") center / contain no-repeat;
	mask: url("../img/selo-cuidado.svg") center / contain no-repeat;
}

body.sd .sd-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px 32px;
	padding: 24px 0 32px;
	border-top: 1px solid var(--sd-f-line);
	font-size: var(--sd-step--1);
	color: var(--sd-f-muted);
}
body.sd .sd-footer__bottom p { margin: 0; }
body.sd .sd-footer__bottom ul { display: flex; gap: 24px; }

@media (max-width: 1024px) {
	body.sd .sd-footer__main { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
	body.sd .sd-footer__brand { grid-column: 1 / -1; grid-row: 1; padding-right: 104px; }
	body.sd .sd-footer__seal { grid-column: 1 / -1; grid-row: 1; justify-self: end; align-self: start; width: 88px; height: 89px; }
}
@media (max-width: 767px) {
	body.sd .sd-footer__trust .sd-trust { padding: 32px 0; }
	body.sd .sd-footer__main { padding: 48px 0 40px; }
	/* o selo é o último filho: Atendimento, a última coluna, ocupa a linha toda */
	body.sd .sd-footer__main > div:last-of-type { grid-column: 1 / -1; }
	body.sd .sd-footer__bottom { flex-direction: column; align-items: flex-start; }
}