/* Botão flutuante de ajuda — inc/flutuante.php. */
/* ---------- Botão de ajuda (30/09/2026): aba rosa na borda direita, parte de baixo, "?" + AJUDA na vertical ---------- */
.gd-flut {
	position: fixed;
	right: 0;
	bottom: 96px;
	z-index: 80;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	font-family: var(--gd-fonte);
}
html.gd-gaveta-aberta .gd-flut { display: none; }
/* Barra fixa de compra da página de produto no celular (produto.js): a aba sobe junto e fica sempre acima dela. */
.gd-flut { transition: bottom 0.3s ease; }
html.dd-pd-barra-on .gd-flut { bottom: calc(var(--dd-barra-h, 68px) + 40px); }
@media (prefers-reduced-motion: reduce) {
	.gd-flut { transition: none; }
}
.gd-flut-ajuda {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.25s, transform 0.25s, box-shadow 0.25s;
	flex-direction: column;
	gap: 6px;
	width: 38px;
	padding: 10px 0 9px;
	border-radius: 10px 0 0 14px;
	background: #7D6A55;
	box-shadow: -6px 8px 20px -10px rgba(125, 106, 85, 0.6);
}
.gd-flut-ajuda:hover { background: #6F5D49; }
.gd-flut-ajuda.is-aberto { background: var(--gd-roxo, #14110E); box-shadow: -6px 8px 20px -10px rgba(20, 17, 14, 0.5); }
.gd-flut-interroga, .gd-flut-x { grid-area: icone; transition: opacity 0.25s, transform 0.25s; }
.gd-flut-ajuda .gd-flut-interroga { width: 22px; height: 22px; }
.gd-flut-ajuda .gd-flut-x { position: absolute; top: 11px; left: 50%; width: 18px; height: 18px; margin-left: -9px; opacity: 0; transform: rotate(-90deg) scale(0.6); }
.gd-flut-ajuda.is-aberto .gd-flut-interroga { opacity: 0; transform: rotate(90deg) scale(0.6); }
.gd-flut-ajuda.is-aberto .gd-flut-x { opacity: 1; transform: none; }
.gd-flut-rotulo {
	font: 500 10px/1 var(--gd-fonte);
	letter-spacing: 0.01em;
	text-transform: none;
	font-style: normal;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}
.gd-flut :focus-visible { outline: 2px solid var(--gd-roxo); outline-offset: 3px; }
/* Cartão branco com os atalhos (abre acima do botão, alinhado à direita). */
.gd-ajuda-cartao {
	width: min(320px, calc(100vw - 32px));
	margin-right: 12px;
	padding: 18px 12px 12px;
	border: 1px solid #EDE8E2;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 24px 48px -20px rgba(20, 17, 14, 0.35);
	transform-origin: bottom right;
	opacity: 0;
	transform: translateY(8px) scale(0.96);
	transition: opacity 0.2s, transform 0.2s;
}
.gd-ajuda-cartao.is-aberta { opacity: 1; transform: none; }
.gd-ajuda-cartao[hidden] { display: none; }
.gd-ajuda-titulo { margin: 0 0 10px 8px; font: 500 18px/24px var(--gd-fonte-marca, Cormorant Garamond, serif); color: var(--gd-roxo); }
.gd-ajuda-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.gd-ajuda-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: 10px;
	color: var(--gd-roxo);
	text-decoration: none;
	transition: background-color 0.2s;
}
.gd-ajuda-item:hover, .gd-ajuda-item:focus-visible { background: #E9E1D6; color: var(--gd-roxo); }
.gd-ajuda-icone { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #E9E1D6; color: #6F5D49; }
.gd-ajuda-item--whatsapp .gd-ajuda-icone { background: #25D366; color: #fff; }
.gd-ajuda-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gd-ajuda-nome { font-size: 15px; font-weight: 500; line-height: 20px; }
.gd-ajuda-sub { font-size: 12px; line-height: 16px; color: #726E69; }
.gd-ajuda-seta { flex: none; color: #6F5D49; }
@media (prefers-reduced-motion: reduce) {
	.gd-ajuda-cartao, .gd-flut-x, .gd-flut-interroga, .gd-flut-ajuda { transition: none; }
}