/**
 * Barra de frete gratis e botao de WhatsApp.
 */

/* ---- Barra de aviso no topo ---- */

.gerst-barra{
	background:#3F7A24;
	color:#fff;
	text-align:center;
	padding:9px 16px;
	font-size:14px;
	font-weight:600;
	line-height:1.35;
	letter-spacing:.01em;
}

.gerst-barra strong{
	font-weight:800;
}

/* ---- Quanto falta para o frete gratis ---- */

.gerst-falta{
	display:flex;
	flex-direction:column;
	gap:8px;
	margin:14px 0;
	padding:14px 16px;
	border:1px solid #cfe0c2;
	border-radius:10px;
	background:#F1F7ED;
	font-size:14px;
	color:#2F4A22;
}

.gerst-falta.ok{
	border-color:#7CB342;
	background:#E8F3E0;
	font-weight:700;
}

.gerst-falta-trilho{
	height:8px;
	border-radius:99px;
	background:#dbe8d2;
	overflow:hidden;
}

.gerst-falta-barra{
	height:100%;
	border-radius:99px;
	background:#7CB342;
	transition:width .3s ease;
}

@media (prefers-reduced-motion:reduce){
	.gerst-falta-barra{transition:none}
}

/* ---- Botao flutuante de WhatsApp ---- */

.gerst-zap{
	position:fixed;
	right:18px;
	bottom:18px;
	z-index:9990;
	display:flex;
	align-items:center;
	gap:10px;
	padding:12px 18px 12px 14px;
	border-radius:99px;
	background:#25D366;
	color:#fff;
	font-size:14.5px;
	font-weight:700;
	text-decoration:none;
	box-shadow:0 6px 20px -6px rgba(0,0,0,.4);
}

.gerst-zap:hover{
	background:#1FB855;
	color:#fff;
}

.gerst-zap svg{
	width:24px;
	height:24px;
	flex:0 0 24px;
	fill:currentColor;
	display:block;
}

/* No celular o rotulo sai e sobra so o icone, para nao tapar a tela. */
@media (max-width:600px){
	.gerst-zap{
		right:14px;
		bottom:14px;
		padding:14px;
		gap:0;
	}

	.gerst-zap .gerst-zap-txt{
		display:none;
	}
}