/* =============================================
FOOTER — matches Figma design
============================================= */
.site-footer {
background-color: var(--color-brown-alt);
color: var(--color-text-muted);
font-family: var(--font-body);
font-size: var(--fs-sm);
}
/* -----------------------------------------------
Main footer area
----------------------------------------------- */
.site-footer__main {
padding-block: var(--space-lg);
}
/* Figma: 4-column grid — brand (wider) + Páginas + Categorias/Conta stack + Suporte */
.site-footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1.3fr 1.3fr;
gap: 40px;
align-items: start;
}
/* Categorias + Conta stack inside one footer column */
.footer-nav-stack {
display: flex;
flex-direction: column;
gap: 28px;
}
/* -----------------------------------------------
Brand column — Figma footer logo composite (116×109)
3 positioned SVG groups: S mark / SATSANGA wordmark / SPA & WELLNESS tagline
----------------------------------------------- */
.footer-brand__logo-link {
display: inline-block;
margin-bottom: 20px;
text-decoration: none;
}
/* Defensive: WooCommerce adds .woocommerce to on shop/product pages
and ships rules like `.woocommerce img { height: auto; max-width: 100% }`
that collapse our absolute layout. We inline the SVGs (no ![]()
tags) AND
use min-height + !important on the container so it can't be squashed. */
.footer-brand__logo {
position: relative;
width: 116px;
height: 109px;
min-height: 109px;
display: block;
flex-shrink: 0;
}
/* Inline SVGs inside the 3 positioned boxes fill the parent div. */
.footer-brand__logo svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
/* Each of the 3 logo boxes is an absolutely positioned wrapping its