/**
 * Chrome global (header/footer nativos — `parts/header.html`/`parts/footer.html`)
 * — port de `docs/mockups/design-system/tokens/*.css` (na verdade
 * `docs/design-system/tokens/*.css`, ver nota no header do port) +
 * `docs/mockups/home/home.css` (`.site-top`/`.site-header`/`.site-nav`/
 * `.nav-megamenu`/`.icon-button`/`.site-footer`/etc. — nenhuma classe do
 * chrome existia em nenhuma folha deste tema antes desta tarefa).
 *
 * Mesma convenção já usada por `account.css`/`woo-blocks.css`: cor/tipografia
 * só via `var(--wp--preset--*)` (`theme.json`), nunca hex solto (exceção
 * documentada nos dois pontos abaixo, mesmo espírito do `#25d366` do
 * WhatsApp em `account.css`); o resto da escala (espaçamento/raio/sombra/
 * tamanho de fonte/duração de transição) continua como valor bruto,
 * comentado com o token que espelha em
 * `frontend/src/styles/tokens/{effects,spacing,typography}.css`.
 * `.container`/`.btn`/`.btn--gold`/`.btn--outline`/`.badge`/`.badge--outline`
 * já existem em `woo-blocks.css` (enfileirado nas mesmas 5 telas — ver
 * `functions.php`) — não redeclarados aqui, só `.btn--outline-on-navy`
 * (usado pelo CTA "Solicite atendimento" da nav, nenhuma folha tinha essa
 * variante ainda).
 *
 * Duas divergências estruturais do mockup, já registradas no próprio
 * `parts/header.html`/`parts/footer.html` (não repetidas em detalhe aqui):
 * mega-menu/Coleções sem fotos (`.nav-megamenu--category`/`.nav-megamenu--tags`
 * usam uma única coluna, não a grade de duas colunas do mockup — a 2ª
 * coluna era a grade de fotos, removida) e logo do header como um só `<img>`
 * (sem o par `--icon`/`--full` morto do mockup).
 */

.skip-link {
	position: absolute;
	top: -48px;
	left: 8px; /* --space-2 */
	z-index: 1000;
	padding: 12px 20px; /* --space-3 / --space-5 */
	border-radius: 4px; /* --radius-sm */
	background: var( --wp--preset--color--navy-900 );
	color: var( --wp--preset--color--cream-50 );
	font-weight: 600; /* --fw-semibold */
	transition: top 140ms cubic-bezier( 0.4, 0, 0.2, 1 ); /* --dur-fast / --ease-standard */
}
.skip-link:focus {
	top: 8px; /* --space-2 */
}

/* ---------- .site-top / .site-header — sempre `.is-solid` nas telas nativas
   deste tema (nunca transparente-sobre-hero, ao contrário da Home do Next):
   mesmo estado que `SiteTop.tsx` já renderiza direto no servidor em toda
   rota sem hero (`hasHero=false`) — nenhum listener de scroll aqui. ---------- */
.site-top {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: var( --wp--preset--color--navy-900 );
	box-shadow: 0 6px 18px rgba( 0, 25, 50, 0.1 ); /* --shadow-md */
}

.site-header__row-top {
	padding-block: 16px; /* --space-4 */
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 32px; /* --space-8 */
}
@media ( max-width: 899.98px ) {
	.site-header__row-top {
		flex-wrap: wrap;
		row-gap: 12px; /* --space-3 */
		column-gap: 16px; /* --space-4 */
	}
}
@media ( max-width: 359.98px ) {
	.site-header__row-top {
		padding-inline: 8px; /* --space-2 */
		column-gap: 4px; /* --space-1 */
	}
}

.site-header__row-bottom {
	position: relative; /* âncora dos mega-menus */
	display: none;
	padding-block: 12px; /* --space-3 */
	border-top: 1px solid var( --wp--preset--color--navy-500 ); /* --border-on-navy */
}
@media ( min-width: 900px ) {
	.site-header__row-bottom {
		display: block;
	}
}

.site-header__nav-ctas {
	display: none;
	align-items: center;
	gap: 8px; /* --space-2 */
}
@media ( min-width: 1280px ) {
	.site-header__nav-ctas {
		display: flex;
	}
}
.site-header__nav-ctas .btn {
	padding: 6px 14px;
}
.btn--outline-on-navy {
	background: rgba( 0, 25, 50, 0.35 );
	color: var( --wp--preset--color--cream-50 ); /* --text-on-navy */
	border-color: var( --wp--preset--color--navy-500 ); /* --border-on-navy */
	backdrop-filter: blur( 2px );
}
.site-header__nav-ctas .btn--outline-on-navy:hover {
	background: rgba( 0, 25, 50, 0.55 );
}

.site-header__logo {
	flex-shrink: 0;
}
/**
 * Fix (QA): `.woocommerce img, .woocommerce-page img { height: auto;
 * max-width: 100%; }` (`woocommerce-layout.css`, carregado em TODA tela
 * nativa — `<body>` sempre leva a classe `woocommerce`/`woocommerce-page`)
 * tem 1 elemento (`img`) a mais de especificidade que um seletor de classe
 * única (`.header-logo{...}` = (0,1,0) vs. Woo (0,1,1)) — Woo vencia
 * incondicionalmente, independente da ordem de enqueue, e a logo renderizava
 * no tamanho intrínseco do PNG (1882×616, ~717-800px de altura ao vivo),
 * cobrindo o conteúdo da página. `.site-header img.header-logo` = (0,2,1),
 * bate Woo em especificidade real (não só em ordem de cascata — robusto a
 * uma futura mudança na ordem de registro do próprio `woocommerce-layout.css`).
 * `width` explícito (não `auto`) + `max-width: none`: os atributos
 * `width`/`height` do HTML (`parts/header.html`) sozinhos não bastam quando
 * uma regra de largura como `max-width:100%` está em jogo — `width:auto`
 * dependeria do navegador recalcular a partir do aspect-ratio, ainda sujeito
 * ao clamp de `max-width:100%` que Woo aplica à parte (propriedade
 * independente de `height`, não neutralizada só por vencer a especificidade
 * de `height`). 134×44 / 147×48 mantêm a proporção real do PNG
 * (1882×616 ≈ 3.055:1).
 */
.site-header img.header-logo {
	display: block;
	width: 134px;
	height: 44px;
	max-width: none;
}
@media ( min-width: 900px ) {
	.site-header img.header-logo {
		width: 147px;
		height: 48px;
	}
}

.site-nav {
	display: none;
}
.site-nav > ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px; /* --space-4 */
}
.site-nav > ul > li > a:not( .btn ) {
	font-size: 0.8125rem; /* --fs-small */
	font-weight: 500; /* --fw-medium */
	letter-spacing: 0.08em; /* --ls-wide */
	text-transform: uppercase;
	color: var( --wp--preset--color--cream-50 ); /* --text-on-navy */
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
	transition: color 140ms cubic-bezier( 0.4, 0, 0.2, 1 ), border-color 140ms cubic-bezier( 0.4, 0, 0.2, 1 ); /* --dur-fast / --ease-standard */
}
.site-nav__trigger {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.site-nav__trigger svg {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}
.site-nav > ul > li > a:not( .btn ):hover,
.site-nav > ul > li > a:not( .btn ).is-active,
.site-nav > ul > li > a:not( .btn )[aria-expanded='true'] {
	color: var( --wp--preset--color--gold-400 ); /* --accent-on-navy */
	border-bottom-color: var( --wp--preset--color--gold-400 );
}
.site-nav a.site-nav__all {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var( --wp--preset--color--gold-400 ); /* --accent-on-navy */
	font-weight: 700; /* --fw-bold */
}
.site-nav a.site-nav__all svg {
	width: 14px;
	height: 14px;
	transition: transform 140ms cubic-bezier( 0.4, 0, 0.2, 1 ); /* --dur-fast / --ease-standard */
}
.site-nav a.site-nav__all:hover svg {
	transform: translateX( 2px );
}
@media ( min-width: 900px ) {
	.site-nav {
		display: block;
	}
	.icon-button--menu {
		display: none;
	}
	.icon-button--phone {
		display: none;
	}
}
@media ( max-width: 900px ) {
	.site-nav > ul {
		gap: 10px;
	}
	.site-nav > ul > li > a:not( .btn ) {
		font-size: 12px;
		letter-spacing: 0.02em;
	}
	.site-nav__trigger {
		gap: 2px;
	}
	.site-nav__trigger svg {
		width: 11px;
		height: 11px;
	}
	.site-nav a.site-nav__all {
		gap: 2px;
	}
	.site-nav a.site-nav__all svg {
		width: 11px;
		height: 11px;
	}
	.site-nav__colecoes-trigger {
		gap: 3px;
		font-size: 12px;
		letter-spacing: 0.02em;
	}
	.site-nav__colecoes-trigger svg {
		width: 11px;
		height: 11px;
	}
}

/* Busca — campo decorativo (`readonly`), ver nota no `parts/header.html` para
   o porquê de não ter painel de sugestões. */
.site-header__search {
	display: block;
	order: 3;
	flex: 1 1 100%;
	width: 100%;
}
@media ( min-width: 900px ) {
	.site-header__search {
		order: 0;
		flex: 1 1 auto;
		width: auto;
		max-width: 880px;
	}
}
.search__field {
	position: relative;
}
.search__field input {
	width: 100%;
	padding: 7px 40px 7px 16px;
	border-radius: 999px; /* --radius-pill */
	border: 1px solid var( --wp--preset--color--navy-500 ); /* --border-on-navy */
	background: rgba( 255, 255, 255, 0.08 );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.8125rem; /* --fs-small */
	color: var( --wp--preset--color--cream-50 ); /* --text-on-navy */
}
.search__field input[type='search']::-webkit-search-cancel-button,
.search__field input[type='search']::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}
.search__submit {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY( -50% );
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: none;
	border-radius: 999px; /* --radius-pill */
	background: transparent;
	color: var( --wp--preset--color--cream-50 ); /* --text-on-navy */
	cursor: pointer;
}
.search__submit svg {
	width: 15px;
	height: 15px;
}
.search__submit:hover {
	color: var( --wp--preset--color--gold-400 );
}

/* ---------- Minha conta / telefone / WhatsApp ---------- */
.site-header__text-link {
	display: none;
}
@media ( min-width: 900px ) {
	.site-header__text-link {
		display: inline-flex;
		align-items: center;
		gap: 8px; /* --space-2 */
		font-size: 0.8125rem; /* --fs-small */
		font-weight: 500; /* --fw-medium */
		color: var( --wp--preset--color--cream-50 ); /* --text-on-navy */
		white-space: nowrap;
		transition: color 140ms cubic-bezier( 0.4, 0, 0.2, 1 ); /* --dur-fast / --ease-standard */
	}
}
.site-header__text-link svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}
.site-header__text-link:hover {
	color: var( --wp--preset--color--gold-400 );
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 12px; /* --space-3 */
}
@media ( max-width: 899.98px ) {
	.site-header__actions {
		gap: 8px; /* --space-2 */
	}
}
@media ( max-width: 359.98px ) {
	.site-header__actions {
		gap: 4px; /* --space-1 */
	}
}

.icon-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	appearance: none;
	border-radius: 8px; /* --radius-md */
	background: rgba( 0, 25, 50, 0.35 );
	color: var( --wp--preset--color--cream-50 ); /* --text-on-navy */
	font: inherit;
	cursor: pointer;
}
.icon-button svg {
	width: 26px;
	height: 26px;
}
.icon-button:hover {
	color: var( --wp--preset--color--gold-400 );
}
.icon-button--menu {
	display: inline-flex;
}
.icon-button--phone {
	display: inline-flex;
}

/* ---------- Mega-menus — casca compartilhada (categoria/Coleções). Uma
   única coluna (sem fotos, ver docblock no topo do arquivo). ---------- */
.nav-megamenu {
	position: absolute;
	top: 100%;
	left: 0;
	display: none;
	background: var( --wp--preset--color--white ); /* --color-surface */
	border: 1px solid var( --wp--preset--color--line-200 ); /* --border */
	border-radius: 8px; /* --radius-md */
	box-shadow: 0 6px 18px rgba( 0, 25, 50, 0.1 ); /* --shadow-md */
	overflow: hidden;
}
.nav-megamenu.is-open {
	display: block;
}
.nav-megamenu--tags,
.nav-megamenu--category {
	width: min( 230px, calc( 100vw - 40px ) ); /* 2 * --space-5 */
}

.nav-megamenu__subcats,
.colecoes-popover__tags {
	list-style: none;
	margin: 0;
	padding: 16px 0; /* --space-4 */
}
.nav-megamenu__subcats a,
.colecoes-popover__tags a {
	display: block;
	padding: 12px 20px; /* --space-3 / --space-5 */
	border-left: 3px solid transparent;
	font-size: 0.8125rem; /* --fs-small */
	font-weight: 500; /* --fw-medium */
	color: var( --wp--preset--color--ink-900 ); /* --text-body */
	transition: color 140ms cubic-bezier( 0.4, 0, 0.2, 1 ), border-color 140ms cubic-bezier( 0.4, 0, 0.2, 1 ), background-color 140ms cubic-bezier( 0.4, 0, 0.2, 1 ); /* --dur-fast / --ease-standard */
}
.nav-megamenu__subcats a:hover,
.colecoes-popover__tags a:hover,
.colecoes-popover__tags a.is-active {
	border-left-color: var( --wp--preset--color--gold-500 );
	background: var( --wp--preset--color--cream-100 );
	color: var( --wp--preset--color--gold-600 ); /* --text-gold */
}
.nav-megamenu__subcats a.nav-megamenu__see-all {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 8px; /* --space-2 */
	font-size: 0.6875rem; /* --fs-caption */
	font-weight: 600; /* --fw-semibold */
	letter-spacing: 0.16em; /* --ls-eyebrow */
	text-transform: uppercase;
	color: var( --wp--preset--color--gold-600 ); /* --text-gold */
}
.nav-megamenu__see-all svg {
	width: 14px;
	height: 14px;
	transition: transform 140ms cubic-bezier( 0.4, 0, 0.2, 1 ); /* --dur-fast / --ease-standard */
}
.nav-megamenu__see-all:hover svg {
	transform: translateX( 2px );
}

.site-nav__colecoes-trigger {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0 0 4px;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.8125rem; /* --fs-small */
	font-weight: 500; /* --fw-medium */
	letter-spacing: 0.08em; /* --ls-wide */
	line-height: inherit;
	text-transform: uppercase;
	color: var( --wp--preset--color--cream-50 ); /* --text-on-navy */
	cursor: pointer;
	transition: color 140ms cubic-bezier( 0.4, 0, 0.2, 1 ), border-color 140ms cubic-bezier( 0.4, 0, 0.2, 1 ); /* --dur-fast / --ease-standard */
}
.site-nav__colecoes-trigger svg {
	width: 14px;
	height: 14px;
}
.site-nav__colecoes-trigger:hover,
.site-nav__colecoes-trigger[aria-expanded='true'] {
	color: var( --wp--preset--color--gold-400 ); /* --accent-on-navy */
	border-bottom-color: var( --wp--preset--color--gold-400 );
}

/* ---------- Footer ---------- */
.site-footer {
	background: var( --wp--preset--color--navy-900 );
	color: #b9c2cd; /* --text-on-navy-muted — alias semântico sem swatch próprio em theme.json, mesmo tratamento do #25d366 (WhatsApp) em account.css */
	padding-top: 64px; /* --space-16 */
}
.site-footer__grid {
	padding-bottom: 48px; /* --space-12 */
	display: grid;
	gap: 32px; /* --space-8 */
	grid-template-columns: 1fr;
}
@media ( min-width: 768px ) {
	.site-footer__grid {
		grid-template-columns: 1.3fr 1fr 1fr 1fr;
		gap: 24px; /* --space-6 */
	}
}
/* Fix (QA) — mesma causa raiz de `.site-header img.header-logo` acima:
   `.woocommerce img,.woocommerce-page img{height:auto;max-width:100%}` vencia
   `.footer-logo{height:128px}` por especificidade (menos catastrófico aqui
   porque a coluna do footer já tinha largura própria — ~255px medidos ao
   vivo em vez de 128px, não os ~717-800px do header). 153×128 mantém a
   proporção real do PNG (1625×1360 ≈ 1.195:1). */
.site-footer img.footer-logo {
	display: block;
	width: 153px;
	height: 128px;
	max-width: none;
	margin-bottom: 16px; /* --space-4 */
}
.footer-col p {
	max-width: 32ch;
	font-size: 0.8125rem; /* --fs-small */
}
.footer-col h4 {
	margin: 0 0 16px; /* --space-4 */
	font-size: 0.75rem; /* --fs-label */
	letter-spacing: 0.16em; /* --ls-eyebrow */
	text-transform: uppercase;
	color: var( --wp--preset--color--cream-50 ); /* --text-on-navy */
}
.footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px; /* --space-3 */
}
.footer-col a {
	font-size: 0.8125rem; /* --fs-small */
	transition: color 140ms cubic-bezier( 0.4, 0, 0.2, 1 ); /* --dur-fast / --ease-standard */
}
.footer-col a:hover {
	color: var( --wp--preset--color--gold-400 );
}
.footer-col .footer-cta {
	margin-top: 8px; /* --space-2 */
	white-space: normal;
	text-align: center;
}
.footer-col .footer-cta:hover {
	color: var( --wp--preset--color--white );
}
.footer-social {
	display: flex;
	gap: 12px; /* --space-3 */
	margin-top: 20px; /* --space-5 */
}
.footer-social a {
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: 999px; /* --radius-pill */
	background: rgba( 255, 255, 255, 0.06 );
	color: var( --wp--preset--color--gold-400 );
	box-shadow: inset 0 0 0 1px var( --wp--preset--color--gold-400 );
}
.footer-social svg {
	width: 16px;
	height: 16px;
}
.footer-social a:hover {
	background: rgba( 255, 255, 255, 0.12 );
}
.site-footer__legal {
	border-top: 1px solid var( --wp--preset--color--navy-500 ); /* --border-on-navy */
	padding-block: 20px; /* --space-5 */
	font-size: 0.6875rem; /* --fs-caption */
	color: var( --wp--preset--color--ink-300 );
}
.site-footer__legal .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px; /* --space-4 */
}
.site-footer__legal p {
	flex: 1;
	min-width: 0;
	margin: 0;
	text-align: left;
}
.site-footer__credit {
	display: inline-flex;
	align-items: center;
	gap: 8px; /* --space-2 */
	color: var( --wp--preset--color--ink-300 );
	flex: 0 0 auto;
}
.site-footer__credit svg {
	width: 15px;
	height: 18px;
}
.site-footer__credit .site-footer__credit-accent {
	transition: fill 220ms cubic-bezier( 0.4, 0, 0.2, 1 ); /* --dur-base / --ease-standard */
}
.site-footer__credit:hover {
	color: var( --wp--preset--color--cream-50 ); /* --text-on-navy */
}
.site-footer__credit:hover .site-footer__credit-accent {
	fill: rgb( 80, 244, 232 );
}

/* ---------- FABs flutuantes (WhatsApp/carrinho) + barra fixa mobile —
   Tarefa 10 (Plano B mockup-fidelity). Port de `docs/mockups/cart/index.html`/
   `docs/mockups/account/index.html` (`.floating-actions`/`.fab--*` e
   `.site-sticky-cta`, `home.css` linhas ~1739-1844) — usadas por
   `parts/footer.html` E `parts/footer-flow.html`, os dois com o MESMO
   markup (ver docblock de cada um pro porquê de estar no footer apesar de
   ser chrome fixo, não conteúdo de rodapé).

   Par complementar por breakpoint — os dois precisam existir juntos, nunca
   só um: `.floating-actions` (FABs canto inferior direito, só ≥900px) e
   `.site-sticky-cta` (barra fixa inferior, só <900px); sem os dois, um dos
   dois breakpoints não mostraria nenhum botão flutuante. Equivalente
   sitewide de `.pdp-sticky-cta` do Next
   (`frontend/src/components/pdp/StickyCtaBar.tsx`) — aria-label "Ver itens
   do orçamento" do carrinho segue esse componente (mais próximo
   estruturalmente), não o "Ver itens do carrinho" do ícone pequeno de
   `.site-header__actions` em `parts/header.html`.

   Contador do carrinho (`.icon-button__count`, "2" estático no mockup):
   OMITIDO — mesma decisão já registrada na divergência 5 de
   `parts/header.html` (nenhuma integração de carrinho ao vivo nova nesta
   correção). 3º FAB do mockup dentro de `.floating-actions`,
   "voltar ao topo" (`.fab--scroll-top`): também omitido — depende de JS de
   limiar de rolagem, feature própria fora do escopo desta tarefa; por isso
   a regra do mockup que sobe `.floating-actions` no mobile (só existia pra
   não colidir esse FAB ausente com a barra) também não foi portada. */
.floating-actions {
	position: fixed;
	right: 20px; /* --space-5 */
	bottom: 20px; /* --space-5 */
	display: flex;
	flex-direction: column;
	gap: 12px; /* --space-3 */
	z-index: 200;
}
.fab {
	width: 52px;
	height: 52px;
	border-radius: 999px; /* --radius-pill */
	display: grid;
	place-items: center;
	border: none;
	box-shadow: 0 16px 40px rgba( 0, 25, 50, 0.14 ); /* --shadow-lg */
	transition: transform 140ms cubic-bezier( 0.4, 0, 0.2, 1 ), filter 140ms cubic-bezier( 0.4, 0, 0.2, 1 ); /* --dur-fast / --ease-standard */
}
.fab svg {
	width: 22px;
	height: 22px;
}
.fab:hover {
	transform: scale( 1.05 );
	filter: brightness( 1.08 );
}
.fab:active {
	transform: scale( 0.98 );
}
.fab--whatsapp-float,
.fab--cart-float {
	display: none;
}
@media ( min-width: 900px ) {
	.fab--whatsapp-float,
	.fab--cart-float {
		display: grid;
	}
}
.fab--whatsapp-float {
	background: #25d366; /* verde oficial do WhatsApp — cor de marca externa, mesmo tratamento do `#25d366` já usado em `account.css` */
	color: var( --wp--preset--color--white );
}
.fab--cart-float {
	position: relative;
	background: var( --wp--preset--color--gold-600 );
	color: var( --wp--preset--color--white );
}

/* Tooltip genérico por hover/foco — único uso, por ora: "Fale com
   Especialista" no WhatsApp flutuante de `.floating-actions`. */
[data-tooltip] {
	position: relative;
}
[data-tooltip]::after {
	content: attr( data-tooltip );
	position: absolute;
	right: calc( 100% + 12px ); /* --space-3 */
	top: 50%;
	transform: translateY( -50% ) translateX( 4px );
	background: var( --wp--preset--color--navy-900 );
	color: var( --wp--preset--color--cream-50 ); /* --text-on-navy */
	padding: 6px 12px;
	border-radius: 4px; /* --radius-sm */
	font-size: 0.6875rem; /* --fs-caption */
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 140ms cubic-bezier( 0.4, 0, 0.2, 1 ), transform 140ms cubic-bezier( 0.4, 0, 0.2, 1 ); /* --dur-fast / --ease-standard */
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
	opacity: 1;
	transform: translateY( -50% ) translateX( 0 );
}

.icon-ring {
	display: grid;
	place-items: center;
	border-radius: 999px; /* --radius-pill */
	background: var( --wp--preset--color--cream-100 );
	color: var( --wp--preset--color--gold-600 );
	box-shadow: inset 0 0 0 1px var( --wp--preset--color--gold-500 );
	flex: 0 0 auto;
}

.site-sticky-cta {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 150;
	align-items: center;
	justify-content: space-between;
	gap: 12px; /* --space-3 */
	padding: 12px 16px; /* --space-3 / --space-4 */
	padding-bottom: max( 12px, env( safe-area-inset-bottom ) ); /* --space-3 */
	border-top: 1px solid var( --wp--preset--color--line-200 ); /* --border */
	background: var( --wp--preset--color--cream-50 );
	box-shadow: 0 -8px 24px rgba( 15, 23, 42, 0.08 );
}
@media ( max-width: 899.98px ) {
	.site-sticky-cta {
		display: flex;
	}
}
.site-sticky-cta__whatsapp {
	flex: 1 1 auto;
}
.site-sticky-cta__cart {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
}
.site-sticky-cta__cart-ring {
	width: 48px;
	height: 48px;
}
.site-sticky-cta__cart-ring svg {
	width: 20px;
	height: 20px;
}