/* Barra da trilha de desconto progressivo (listagem da Sticker Shop).

   Segue o desenho das LPs e do header do site: branco, grafite, filete fino,
   ícone sobre o cinza do hover do header e o turquesa só como acento. O brilho
   fica onde está o progresso, na barra. */

.ns-prog {
	--np-fundo: #ffffff;
	--np-tinta: #262e3e;
	--np-texto: rgba(38, 46, 62, .72);
	--np-apagado: rgba(38, 46, 62, .5);
	--np-filete: rgba(38, 46, 62, .08);
	--np-cinza: rgba(38, 46, 62, .05);
	--np-cinza-forte: rgba(38, 46, 62, .09);
	--np-trilho: #e8edf1;
	--np-turquesa: #42d5de;
	--np-destaque: #42d5de;
	/* Verde de desconto: o #7dce85 da loja some em texto pequeno sobre branco. */
	--np-verde: #2e8540;
	--np-continuar: 88px;
	--np-sombra: 0 12px 32px rgba(38, 46, 62, .12), 0 2px 6px rgba(38, 46, 62, .06);
	--np-mola: cubic-bezier(.34, 1.4, .64, 1);
	--np-saida: cubic-bezier(.22, 1, .36, 1);
	position: fixed;
	z-index: 1029;
	left: 10px;
	right: 10px;
	/* --ns-prog-consent: altura do banner de consentimento enquanto ele está na
	   tela. A barra sobe para ficar acima dele e volta sozinha quando ele sai. */
	bottom: calc(10px + var(--ns-prog-consent, 0px) + env(safe-area-inset-bottom, 0px));
	transition: bottom .35s var(--np-saida);
	color: var(--np-tinta);
	font-family: inherit;
	-webkit-font-smoothing: antialiased;
	pointer-events: none;
}

.ns-prog[hidden],
.ns-prog [hidden] {
	display: none !important;
}

.ns-prog > * {
	pointer-events: auto;
}

.ns-prog p {
	margin: 0;
}

/* :where zera a especificidade: senão o "font: inherit" anula peso e tamanho
   definidos nas classes de cada botão. */
:where(.ns-prog button) {
	font: inherit;
	-webkit-tap-highlight-color: transparent;
}

.ns-prog button:focus-visible {
	outline: 2px solid var(--np-turquesa);
	outline-offset: 2px;
}

/* Etiqueta das LPs (.studio-eyebrow): cinza em caixa alta com o traço turquesa. */

.ns-prog__etiqueta {
	display: flex;
	align-items: center;
	gap: .6rem;
	color: var(--np-texto);
	font-size: .7rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ns-prog__etiqueta::before {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--np-turquesa);
}

/* Ícone sobre o cinza do hover do header */

.ns-prog__icone {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: var(--np-cinza);
	color: var(--np-tinta);
}

.ns-prog__icone svg {
	width: 16px;
	height: 16px;
}

/* Marca no canto do ícone: check liberado ou cadeado */

.ns-prog__marca {
	position: absolute;
	top: -5px;
	right: -5px;
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--np-fundo);
	box-shadow: inset 0 0 0 1.5px var(--np-turquesa);
	color: var(--np-tinta);
}

.ns-prog__marca svg {
	width: 9px !important;
	height: 9px !important;
	stroke-dashoffset: 0 !important;
}

.ns-prog__marca.is-cadeado {
	top: auto;
	bottom: -5px;
	box-shadow: inset 0 0 0 1px var(--np-filete), 0 1px 3px rgba(38, 46, 62, .1);
	color: var(--np-apagado);
}

/* Barra recolhida */

.ns-prog__hud {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px 12px 12px;
	border: 1px solid var(--np-filete);
	border-radius: 18px;
	background: var(--np-fundo);
	box-shadow: var(--np-sombra);
}

/* O mesmo botão do carrinho do header, copiado: ícone, contador e mini carrinho. */

.ns-prog__carrinho {
	display: block;
	flex: none;
}

.ns-prog__carrinho .button-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: var(--np-cinza);
	box-shadow: none;
	transition: background-color .15s ease;
}

.ns-prog__carrinho .button-cart:hover,
.ns-prog__carrinho .button-cart:focus-visible {
	background: var(--np-cinza-forte);
}

.ns-prog__carrinho .button-cart img {
	width: 20px;
	height: auto;
}

.ns-prog__carrinho .button-cart .count {
	position: absolute;
	top: 4px;
	right: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--np-turquesa);
	box-shadow: 0 0 0 2px var(--np-fundo);
	color: #262e3e;
	font-size: .625rem;
	font-weight: 600;
	line-height: 1;
}

.ns-prog__abrir {
	flex: 1;
	min-width: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.ns-prog__linha {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.ns-prog__msg {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	color: var(--np-apagado);
	font-size: 13px;
	line-height: 18px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ns-prog__msg strong {
	color: var(--np-tinta);
	font-weight: 600;
}

.ns-prog__seta {
	display: grid;
	place-items: center;
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--np-apagado);
}

.ns-prog__seta svg {
	width: 16px;
	height: 16px;
	transition: transform .25s var(--np-saida);
}

.ns-prog__abrir[aria-expanded="true"] .ns-prog__seta svg {
	transform: rotate(180deg);
}

/* Continuar: direto ao checkout. Apagado até o estágio marcado; aceso, grafite.
   Fica no fim da trilha, como linha de chegada, e a frase de cima continua com a
   largura toda: na coluna da direita ela perdia o prêmio no celular. */

.ns-prog.tem-continuar .ns-prog__abrir {
	row-gap: 6px;
}

/* A trilha (18px) centralizada na altura do botão (30px), parando antes dele. */
.ns-prog.tem-continuar .ns-prog__trilha {
	margin: 6px calc(var(--np-continuar) + 20px) 6px 0;
}

.ns-prog__continuar {
	position: absolute;
	right: 14px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--np-continuar);
	height: 30px;
	padding: 0;
	border-radius: 9px;
	background: var(--np-cinza);
	color: var(--np-apagado);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .35s ease, color .35s ease, opacity .2s ease;
}

.ns-prog__continuar:hover,
.ns-prog__continuar:focus-visible {
	background: var(--np-cinza-forte);
	color: var(--np-tinta);
	text-decoration: none;
}

.ns-prog__continuar.is-aceso {
	background: var(--np-tinta);
	color: var(--np-fundo);
}

.ns-prog__continuar.is-aceso:hover,
.ns-prog__continuar.is-aceso:focus-visible {
	background: #1b2230;
	color: var(--np-fundo);
}

.ns-prog__continuar.is-acendendo {
	animation: ns-prog-acende 1.1s var(--np-saida) .35s 2;
}

.ns-prog__continuar.is-esperando {
	opacity: .6;
	cursor: progress;
}

.ns-prog__continuar:focus-visible {
	outline: 2px solid var(--np-turquesa);
	outline-offset: 2px;
}

/* Trilha. O último marco (20px) termina alinhado com a seta acima. */

.ns-prog__trilha {
	position: relative;
	display: block;
	height: 18px;
	margin: 0 10px 0 0;
}

.ns-prog__fundo,
.ns-prog__cheio {
	position: absolute;
	top: 6px;
	left: 0;
	display: block;
	height: 6px;
	border-radius: 99px;
}

.ns-prog__fundo {
	right: 0;
	background: var(--np-trilho);
}

.ns-prog__cheio {
	overflow: hidden;
	width: 0;
	background: var(--np-turquesa);
	box-shadow: 0 0 12px rgba(66, 213, 222, .7), 0 0 3px rgba(66, 213, 222, .9);
	transition: width .9s var(--np-saida);
}

.ns-prog__cheio::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0) 75%);
	transform: translateX(-120%);
	animation: ns-prog-reflexo 3.4s ease-in-out 1.2s infinite;
}

.ns-prog.is-carregando .ns-prog__cheio::after {
	animation-duration: .9s;
	animation-delay: 0s;
}

.ns-prog__ponta {
	position: absolute;
	top: 9px;
	left: 0;
	display: block;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 0 0 2px var(--np-turquesa), 0 0 10px 3px rgba(66, 213, 222, .75);
	transition: left .9s var(--np-saida);
	animation: ns-prog-ponta 1.8s ease-in-out infinite;
}

/* Marcos: branco com contorno; liberado ganha contorno turquesa e check grafite. */

.ns-prog__no {
	position: absolute;
	top: 1px;
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	margin-left: -8px;
	border-radius: 50%;
	background: var(--np-fundo);
	box-shadow: inset 0 0 0 1.5px rgba(38, 46, 62, .18);
	color: var(--np-tinta);
	transition: box-shadow .4s, left .8s var(--np-saida);
}

.ns-prog__no svg {
	position: absolute;
	width: 9px;
	height: 9px;
}

.ns-prog__check {
	stroke-dasharray: 24;
	stroke-dashoffset: 24;
	transition: stroke-dashoffset .45s .15s var(--np-saida);
}

.ns-prog__no.is-liberado {
	box-shadow: inset 0 0 0 2px var(--np-turquesa), 0 0 8px rgba(66, 213, 222, .45);
}

.ns-prog__no.is-liberado .ns-prog__check {
	stroke-dashoffset: 0;
}

.ns-prog__no.is-proximo {
	box-shadow: inset 0 0 0 2px var(--np-turquesa), 0 0 8px rgba(66, 213, 222, .45);
	animation: ns-prog-respira 1.8s ease-in-out infinite;
}

.ns-prog__no.is-proximo::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--np-turquesa);
}

.ns-prog__no.is-final {
	top: -1px;
	width: 20px;
	height: 20px;
	margin-left: -10px;
}

.ns-prog__no.is-final.is-proximo::before {
	display: none;
}

.ns-prog__estrela {
	width: 11px !important;
	height: 11px !important;
	color: rgba(38, 46, 62, .3);
	transition: opacity .3s;
}

.ns-prog__no.is-final.is-proximo .ns-prog__estrela {
	color: var(--np-tinta);
}

.ns-prog__no.is-final.is-liberado .ns-prog__estrela {
	opacity: 0;
}

.ns-prog__no.is-final:not(.is-liberado) .ns-prog__check {
	opacity: 0;
}

.ns-prog__no.is-estouro {
	animation: ns-prog-pop .7s var(--np-mola);
}

.ns-prog__no.is-estouro::after {
	content: "";
	position: absolute;
	inset: -2px;
	border: 2px solid var(--np-turquesa);
	border-radius: 50%;
	animation: ns-prog-onda .9s var(--np-saida) forwards;
	pointer-events: none;
}

/* Virada do trecho: os marcos do trecho velho somem e os do novo surgem. */
.ns-prog__no.is-surgindo {
	animation: ns-prog-surge .55s var(--np-mola) both;

.ns-prog__no.is-saindo {
	animation: ns-prog-some .3s ease-in both;
	pointer-events: none;
}
}

/* Economia que sobe da ponta a cada adição, em verde */

.ns-prog__ganho {
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	padding: 3px 8px;
	border-radius: 6px;
	background: var(--np-fundo);
	box-shadow: inset 0 0 0 1px var(--np-filete), 0 4px 12px rgba(38, 46, 62, .14);
	color: var(--np-verde);
	font-size: 11px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	opacity: 0;
	transform: translateX(-50%);
	pointer-events: none;
}

.ns-prog__ganho.is-subindo {
	animation: ns-prog-ganho 1.2s var(--np-saida) forwards;
}

/* Minimizado */

.ns-prog.is-minimizado {
	left: auto;
}

.ns-prog__pilula {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	padding: 5px 13px 5px 5px;
	border: 1px solid var(--np-filete);
	border-radius: 99px;
	background: var(--np-fundo);
	box-shadow: var(--np-sombra);
	color: var(--np-tinta);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.ns-prog__anel {
	position: relative;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: conic-gradient(var(--np-turquesa) calc(var(--ns-prog-p, 0) * 1%), var(--np-trilho) 0);
}

.ns-prog__anel::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--np-fundo);
}

.ns-prog__pilula-icone {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
}

.ns-prog__pilula-icone svg {
	width: 13px;
	height: 13px;
}

/* Painel e desbloqueio sobem da barra */

.ns-prog__painel,
.ns-prog__celebra {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% + 10px);
	border: 1px solid var(--np-filete);
	background: var(--np-fundo);
	transform-origin: 50% 100%;
}

.ns-prog__painel {
	max-height: min(62vh, 480px);
	overflow-y: auto;
	padding: 14px 16px 12px;
	border-radius: 18px;
	box-shadow: var(--np-sombra);
	scrollbar-width: none;
}

.ns-prog__painel.is-abrindo {
	animation: ns-prog-abre .35s var(--np-saida);
}

.ns-prog__painel-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 28px;
}

.ns-prog__painel-acoes {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ns-prog__painel-nivel {
	color: var(--np-apagado);
	font-size: 12px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.ns-prog__min {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin-right: -6px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--np-apagado);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.ns-prog__min svg {
	width: 18px;
	height: 18px;
}

.ns-prog__min:hover {
	background: var(--np-cinza);
	color: var(--np-tinta);
}

/* Linha de valor com filete */

.ns-prog__linha-valor {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--np-filete);
	border-bottom: 1px solid var(--np-filete);
	color: var(--np-texto);
	font-size: 13px;
}

.ns-prog__linha-valor strong {
	color: var(--np-tinta);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ns-prog__painel-economia {
	margin-top: 10px !important;
}

.ns-prog__painel-economia strong,
.ns-prog__celebra-meta.is-economia strong {
	color: var(--np-verde);
}

.ns-prog__lista {
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
}

.ns-prog__item {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid var(--np-filete);
}

.ns-prog__item:last-child {
	border-bottom: 0;
}

.ns-prog__item.is-bloqueado .ns-prog__icone {
	color: rgba(38, 46, 62, .38);
}

.ns-prog__item-texto {
	min-width: 0;
}

.ns-prog__item-nome {
	display: block;
	overflow: hidden;
	color: var(--np-tinta);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ns-prog__item.is-bloqueado .ns-prog__item-nome {
	color: var(--np-texto);
	font-weight: 500;
}

.ns-prog__item-valor {
	display: block;
	color: var(--np-apagado);
	font-size: 11px;
	line-height: 1.4;
}

.ns-prog__item-mini {
	display: block;
	overflow: hidden;
	height: 3px;
	margin-top: 6px;
	border-radius: 99px;
	background: var(--np-trilho);
}

.ns-prog__item-mini span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--np-turquesa);
	box-shadow: 0 0 6px rgba(66, 213, 222, .7);
}

.ns-prog__item-status {
	color: var(--np-apagado);
	font-size: 12px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ns-prog__item.is-proximo .ns-prog__item-status,
.ns-prog__item.is-liberado .ns-prog__item-status {
	color: var(--np-tinta);
	font-weight: 600;
}

.ns-prog__nota {
	padding-top: 10px;
	border-top: 1px solid var(--np-filete);
	color: var(--np-apagado);
	font-size: 11px;
	line-height: 1.45;
}

/* Desbloqueio: ícone à esquerda, texto em hierarquia e rodapé com a ação à direita. */

.ns-prog__celebra {
	overflow: hidden;
	padding: 16px 16px 14px;
	border-radius: 18px;
	box-shadow: 0 20px 50px rgba(38, 46, 62, .18), 0 2px 8px rgba(38, 46, 62, .06);
}

.ns-prog__celebra.is-entrando {
	animation: ns-prog-entra .45s var(--np-mola);
}

.ns-prog__confete {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* X de fechar, redundante com o botão de propósito */

.ns-prog__celebra-fechar {
	position: absolute;
	z-index: 2;
	top: 12px;
	right: 12px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--np-cinza);
	color: var(--np-apagado);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.ns-prog__celebra-fechar svg {
	width: 16px;
	height: 16px;
}

.ns-prog__celebra-fechar:hover {
	background: var(--np-cinza-forte);
	color: var(--np-tinta);
}

/* O selo ocupa a altura toda do bloco de cima, até o filete. */

.ns-prog__celebra-corpo {
	position: relative;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	align-items: stretch;
	gap: 16px;
}

.ns-prog__selo {
	position: relative;
	display: grid;
	width: 64px;
	min-height: 64px;
}

.ns-prog__selo-icone {
	width: 100%;
	height: 100%;
	min-height: 64px;
	overflow: hidden;
	border-radius: 14px;
}

.ns-prog__selo-icone svg {
	width: 28px;
	height: 28px;
}

.ns-prog__selo-icone img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Foto do brinde é o sticker no meio de uma margem transparente: inteira e um pouco
   ampliada, para a margem sair do selo e o sticker não ficar perdido nele. */
.ns-prog__selo-icone.is-brinde img {
	object-fit: contain;
	transform: scale(1.2);
}

.ns-prog__selo .ns-prog__marca {
	z-index: 1;
	top: -7px;
	right: -7px;
	width: 22px;
	height: 22px;
	box-shadow: inset 0 0 0 2px var(--np-turquesa), 0 0 0 2px var(--np-fundo);
}

.ns-prog__selo .ns-prog__marca svg {
	width: 12px !important;
	height: 12px !important;
}

.ns-prog__onda {
	position: absolute;
	inset: 0;
	border-radius: 14px;
	pointer-events: none;
}

.ns-prog__celebra.is-entrando .ns-prog__selo-icone {
	animation: ns-prog-selo .55s var(--np-mola) .05s both;
}

.ns-prog__celebra.is-entrando .ns-prog__marca {
	animation: ns-prog-marca .45s var(--np-mola) .3s both;
}

.ns-prog__celebra.is-entrando .ns-prog__onda {
	animation: ns-prog-onda-selo 1.3s var(--np-saida) .2s 2;
}

.ns-prog__celebra-texto {
	align-self: center;
	min-width: 0;
	padding-right: 32px;
}

.ns-prog__celebra-etiqueta::before {
	display: none;
}

.ns-prog__celebra-titulo {
	margin-top: 4px !important;
	color: var(--np-tinta);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
}

.ns-prog__celebra-proximo {
	margin-top: 3px !important;
	color: var(--np-texto);
	font-size: 13px;
	line-height: 1.45;
}

/* Só no desbloqueio: valor que falta e próximo prêmio em turquesa. A barra fica em grafite. */
.ns-prog__celebra-proximo strong {
	color: var(--np-destaque);
	font-weight: 600;
}

.ns-prog__celebra-rodape {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--np-filete);
}

.ns-prog__celebra-meta {
	display: grid;
	gap: 1px;
	min-width: 0;
}

.ns-prog__celebra-meta span {
	color: var(--np-apagado);
	font-size: 11px;
	line-height: 1.3;
}

.ns-prog__celebra-meta strong {
	color: var(--np-tinta);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ns-prog__celebra-cta {
	flex: none;
	height: 38px;
	padding: 0 16px;
	border: 0;
	border-radius: 10px;
	background: var(--np-tinta);
	color: var(--np-fundo);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, transform .2s var(--np-mola);
}

.ns-prog__celebra-cta:hover {
	background: #1b2230;
}

.ns-prog__celebra-cta:active {
	transform: scale(.98);
}

.ns-prog__celebra-tempo {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--np-turquesa);
	transform-origin: left center;
}

.ns-prog__celebra-tempo.is-correndo {
	animation: ns-prog-tempo 5.2s linear forwards;
}

.ns-prog__celebra.is-pausado .ns-prog__celebra-tempo {
	animation-play-state: paused;
}

/* O aviso "Adicionado ao carrinho" do tema sobe para cima da barra e dá lugar
   ao desbloqueio enquanto ele está na tela. A barra fica 10px acima da área do
   indicador de início do iPhone; sem somar essa área, o aviso caía por trás dela. */

body.ns-prog-on .container-added {
	bottom: calc(var(--ns-prog-altura, 68px) + 18px + var(--ns-prog-consent, 0px) + env(safe-area-inset-bottom, 0px));
}

body.ns-prog-celebrando .container-added {
	visibility: hidden;
}

/* Tema escuro do site */

body.dark-mode .ns-prog {
	--np-fundo: #151a22;
	--np-tinta: #f2f4f8;
	--np-texto: rgba(242, 244, 248, .72);
	--np-apagado: rgba(242, 244, 248, .5);
	--np-filete: rgba(255, 255, 255, .1);
	--np-cinza: rgba(255, 255, 255, .06);
	--np-cinza-forte: rgba(255, 255, 255, .1);
	--np-trilho: #262d39;
	--np-verde: #7dce85;
	--np-sombra: 0 12px 32px rgba(0, 0, 0, .45);
}

body.dark-mode .ns-prog__carrinho .button-cart img {
	filter: invert(1);
}

body.dark-mode .ns-prog__celebra-cta:hover {
	background: #ffffff;
}

@media (min-width: 768px) {

	.ns-prog {
		left: 50%;
		right: auto;
		bottom: calc(1rem + var(--ns-prog-consent, 0px));
		width: min(520px, calc(100vw - 4rem));
		transform: translateX(-50%);
	}

	.ns-prog.is-minimizado {
		left: 50%;
		width: auto;
	}

	body.ns-prog-on .container-added {
		bottom: calc(var(--ns-prog-altura, 68px) + 1.75rem + var(--ns-prog-consent, 0px));
	}
}

@keyframes ns-prog-reflexo {
	0% { transform: translateX(-120%); }
	35%, 100% { transform: translateX(120%); }
}

@keyframes ns-prog-ponta {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.3); }
}

@keyframes ns-prog-respira {
	0%, 100% { box-shadow: inset 0 0 0 2px var(--np-turquesa), 0 0 4px rgba(66, 213, 222, .25); }
	50% { box-shadow: inset 0 0 0 2px var(--np-turquesa), 0 0 12px rgba(66, 213, 222, .75); }
}

@keyframes ns-prog-pop {
	0% { transform: scale(1); }
	40% { transform: scale(1.5); }
	100% { transform: scale(1); }
}

@keyframes ns-prog-onda {
	from { opacity: .9; transform: scale(1); }
	to { opacity: 0; transform: scale(2.6); }
}

@keyframes ns-prog-ganho {
	0% { opacity: 0; transform: translate(-50%, 6px); }
	18% { opacity: 1; transform: translate(-50%, 0); }
	70% { opacity: 1; transform: translate(-50%, -6px); }
	100% { opacity: 0; transform: translate(-50%, -14px); }
}

@keyframes ns-prog-abre {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

@keyframes ns-prog-entra {
	from { opacity: 0; transform: translateY(12px) scale(.97); }
	to { opacity: 1; transform: none; }
}

@keyframes ns-prog-selo {
	0% { opacity: 0; transform: scale(.5); }
	60% { opacity: 1; transform: scale(1.08); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes ns-prog-marca {
	0% { opacity: 0; transform: scale(0); }
	70% { opacity: 1; transform: scale(1.2); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes ns-prog-onda-selo {
	0% { box-shadow: 0 0 0 0 rgba(66, 213, 222, .5); }
	100% { box-shadow: 0 0 0 16px rgba(66, 213, 222, 0); }
}

@keyframes ns-prog-tempo {
	from { transform: scaleX(1); }
	to { transform: scaleX(0); }
}

@keyframes ns-prog-surge {
	0% { opacity: 0; transform: scale(0); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes ns-prog-some {
	0% { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(0); }
}

@keyframes ns-prog-acende {
	0% { box-shadow: 0 0 0 0 rgba(66, 213, 222, .65); }
	100% { box-shadow: 0 0 0 12px rgba(66, 213, 222, 0); }
}

@media (prefers-reduced-motion: reduce) {

	.ns-prog {
		transition: none;
	}

	.ns-prog *,
	.ns-prog *::before,
	.ns-prog *::after {
		animation: none !important;
		transition: none !important;
	}
}