/*--------------------------------------------------------------
# Biomed – Black November
# Faixa (todas as páginas), pop-up (home) e selo (produtos).
# Tom suave: azul-noite no lugar do preto puro, azuis do site como acento.
--------------------------------------------------------------*/

@font-face {
	font-family: "Biomed BN Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"),
	     url("fonts/manrope-latin-wght-normal.woff2") format("woff2");
}

.bbn-faixa,
.bbn-popup,
.bbn-selo {
	--bbn-noite: #15232d;
	--bbn-noite-2: #1d3a4e;
	--bbn-azul: #54bceb;
	--bbn-azul-claro: #9fdaf5;
	--bbn-azul-escuro: #005596;
	--bbn-azul-escuro-2: #00446f;
	--bbn-gelo: #eef7fc;
	--bbn-texto: #22313b;
	--bbn-texto-suave: #5f6f7a;
	--bbn-texto-nota: #7d8a93;
	--bbn-linha: #e4ecf1;
	--bbn-titulo: "Biomed BN Manrope", "Lato", "Helvetica Neue", Arial, sans-serif;
	--bbn-corpo: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Campanha encerrada (página servida do cache depois do fim) */
html.bbn-encerrada .bbn-faixa,
html.bbn-encerrada .bbn-popup,
html.bbn-encerrada .bbn-selo {
	display: none !important;
}

/*--------------------------------------------------------------
## Faixa
--------------------------------------------------------------*/

a.bbn-faixa {
	--bbn-duracao: 70s;
	position: relative;
	z-index: 1000;
	display: block;
	overflow: hidden;
	height: 34px;
	margin: 0;
	padding: 0;
	background: var(--bbn-noite);
	background: linear-gradient(90deg, var(--bbn-noite) 0%, var(--bbn-noite-2) 50%, var(--bbn-noite) 100%);
	color: rgba(255, 255, 255, 0.86);
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}

a.bbn-faixa:hover,
a.bbn-faixa:focus,
a.bbn-faixa:active,
a.bbn-faixa:visited {
	color: rgba(255, 255, 255, 0.86);
	text-decoration: none;
}

a.bbn-faixa:focus-visible {
	outline: 2px solid var(--bbn-azul);
	outline-offset: -2px;
}

.bbn-faixa__trilho {
	display: flex;
	width: max-content;
	height: 34px;
	animation: bbn-rolar var(--bbn-duracao) linear infinite;
	will-change: transform;
}

a.bbn-faixa:hover .bbn-faixa__trilho,
a.bbn-faixa:focus .bbn-faixa__trilho {
	animation-play-state: paused;
}

.bbn-faixa__metade,
.bbn-faixa__grupo {
	display: flex;
	flex-shrink: 0;
	align-items: center;
}

.bbn-faixa__item {
	display: inline-block;
	padding: 0 26px;
	font-family: var(--bbn-corpo);
	font-size: 13px;
	font-weight: 400;
	line-height: 34px;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.bbn-faixa__item strong {
	font-weight: 700;
	color: #ffffff;
}

.bbn-faixa__tag {
	font-family: var(--bbn-titulo);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bbn-azul-claro);
}

.bbn-faixa__sep {
	display: inline-block;
	flex-shrink: 0;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--bbn-azul);
	opacity: 0.7;
}

@keyframes bbn-rolar {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 767px) {
	.bbn-faixa__item {
		padding: 0 18px;
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bbn-faixa__trilho {
		animation: none;
	}
}

/*--------------------------------------------------------------
## Selo de desconto
--------------------------------------------------------------*/

.bbn-selo {
	position: absolute;
	z-index: 8;
	top: 8px;
	left: 23px;
	display: inline-block;
	margin: 0;
	padding: 5px 10px 5px 9px;
	border-radius: 999px;
	background: var(--bbn-noite);
	color: #ffffff;
	font-family: var(--bbn-titulo);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(21, 35, 45, 0.16);
	pointer-events: none;
	-webkit-font-smoothing: antialiased;
}

/* Vitrine: acompanha o canto da miniatura (242px) quando a coluna é mais larga que a imagem */
.product-card > a .bbn-selo,
li.product > a .bbn-selo {
	left: 23px;
	left: max(23px, calc(50% - 113px));
}

/* Carrossel da página inicial */
.vitrine-tipo-home .thumbnail {
	position: relative;
}

.vitrine-tipo-home .thumbnail > .bbn-selo {
	top: 10px;
	left: 10px;
}

/*--------------------------------------------------------------
## Preço "de / por" (página do produto) e total do carrinho
--------------------------------------------------------------*/

.single-product .product .summary p.price del {
	margin-right: 8px;
	color: #9aa5ad;
	opacity: 1;
	text-decoration-thickness: 1px;
}

.single-product .product .summary p.price del .woocommerce-Price-amount,
.single-product .product .summary p.price del .woocommerce-Price-amount .woocommerce-Price-currencySymbol {
	font-size: 17px !important;
	color: #9aa5ad;
}

/* Texto só para leitores de tela ("O preço original era…") */
p.price .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.single-product .product .summary p.price ins {
	font-weight: 700;
	text-decoration: none;
}

.bbn-preco-nota {
	--bbn-azul: #54bceb;
	display: flex;
	align-items: center;
	gap: 8px;
	width: -moz-fit-content;
	width: fit-content;
	margin-top: 12px;
	padding: 6px 14px 6px 12px;
	border-radius: 999px;
	background: #eef7fc;
	color: #005596;
	font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.01em;
}

.bbn-preco-nota::before {
	content: "";
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bbn-azul);
}

.bbn-validade {
	display: block;
	max-width: 520px;
	margin-top: 10px;
	padding: 9px 14px;
	border-left: 3px solid #f99d1c;
	border-radius: 0 6px 6px 0;
	background: #fff8ee;
	color: #5c4a2c;
	font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
}

.bbn-validade strong {
	font-weight: 700;
	color: #3f3220;
}

del.bbn-total-antes {
	margin-right: 6px;
	color: #9aa5ad;
	font-size: 0.85em;
	font-weight: 400;
}

del.bbn-total-antes .woocommerce-Price-amount {
	color: #9aa5ad;
}

/*--------------------------------------------------------------
## Pop-up
--------------------------------------------------------------*/

html.bbn-popup-aberto,
html.bbn-popup-aberto body {
	overflow: hidden;
}

.bbn-popup {
	position: fixed;
	z-index: 100000;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
	font-family: var(--bbn-corpo);
	-webkit-font-smoothing: antialiased;
}

.bbn-popup[hidden] {
	display: none;
}

.bbn-popup *,
.bbn-popup *::before,
.bbn-popup *::after {
	box-sizing: border-box;
}

.bbn-popup__fundo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(21, 35, 45, 0.45);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.bbn-popup__caixa {
	position: relative;
	display: grid;
	grid-template-columns: 268px 1fr;
	width: 100%;
	max-width: 712px;
	max-height: calc(100vh - 32px);
	overflow: hidden auto;
	border-radius: 14px;
	background: #ffffff;
	box-shadow: 0 28px 70px rgba(21, 35, 45, 0.24), 0 2px 6px rgba(21, 35, 45, 0.08);
	text-align: left;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bbn-popup__caixa:focus {
	outline: none;
}

.bbn-popup.is-visivel .bbn-popup__fundo,
.bbn-popup.is-visivel .bbn-popup__caixa {
	opacity: 1;
}

.bbn-popup.is-visivel .bbn-popup__caixa {
	transform: none;
}

/* Lado escuro (azul-noite) — o destaque do pop-up */
.bbn-popup__lado {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 18px;
	padding: 32px 28px 26px;
	background: var(--bbn-noite);
	background: linear-gradient(160deg, #1f4762 0%, var(--bbn-noite-2) 34%, var(--bbn-noite) 78%);
	color: #ffffff;
}

.bbn-popup__lado > * {
	position: relative;
	z-index: 1;
}

/* Luz azul que flutua devagar ao fundo */
.bbn-popup__lado .bbn-popup__luz {
	position: absolute;
	z-index: 0;
	top: -90px;
	left: -110px;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(84, 188, 235, 0.42) 0%, rgba(84, 188, 235, 0.12) 45%, rgba(84, 188, 235, 0) 70%);
	animation: bbn-luz 9s ease-in-out infinite alternate;
	pointer-events: none;
}

@keyframes bbn-luz {
	0%   { transform: translate(0, 0) scale(1); }
	50%  { transform: translate(70px, 120px) scale(1.15); }
	100% { transform: translate(10px, 230px) scale(0.95); }
}

/* "BLACK / NOVEMBER" */
.bbn-popup p.bbn-popup__marca {
	margin: 0;
	font-family: var(--bbn-titulo);
	font-size: 30px;
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.bbn-popup__marca span {
	display: block;
}

.bbn-popup__black {
	color: #ffffff;
}

.bbn-popup__november {
	color: #7fd0f3;
}

/* "10%" */
.bbn-popup p.bbn-popup__oferta {
	display: flex;
	flex-direction: column;
	margin: 0;
	line-height: 1;
}

.bbn-popup__numero {
	display: inline-block;
	align-self: flex-start;
	margin-left: -0.06em;
	padding-right: 0.04em;
	font-family: var(--bbn-titulo);
	font-size: 118px;
	font-weight: 800;
	line-height: 0.86;
	letter-spacing: -0.05em;
	white-space: nowrap;
	color: #ffffff;
}

/* Brilho que atravessa o "10%" e o degradê do "November" (só em navegadores com suporte) */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.bbn-popup__numero {
		background-image: linear-gradient(110deg, #ffffff 0%, #ffffff 38%, #d8f2fd 45%, #7fd0f3 50%, #d8f2fd 55%, #ffffff 62%, #eaf8fe 100%);
		background-size: 300% 100%;
		background-position: 100% 0;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		animation: bbn-brilho 5s ease-in-out 1.6s infinite;
	}
	.bbn-popup__november {
		background-image: linear-gradient(90deg, #b3e5f9 0%, var(--bbn-azul) 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

.bbn-popup__digitos {
	display: inline-block;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.bbn-popup__pct {
	display: inline-block;
	margin-left: 0.04em;
	font-size: 0.5em;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	vertical-align: 0.74em;
}

@keyframes bbn-brilho {
	0%       { background-position: 100% 0; }
	45%, 100% { background-position: 0% 0; }
}

.bbn-popup__desconto {
	margin-top: 12px;
	font-family: var(--bbn-titulo);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.94);
}

.bbn-popup__desconto sup {
	position: relative;
	top: -0.5em;
	margin-left: 1px;
	font-size: 0.9em;
	line-height: 0;
	letter-spacing: 0;
	vertical-align: baseline;
	color: var(--bbn-azul);
}

/* Linha de sinal (tipo EEG) correndo como num monitor */
.bbn-popup__sinal {
	height: 44px;
	margin: 0 -28px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

.bbn-sinal {
	display: block;
	width: 720px;
	max-width: none;
	height: 44px;
	animation: bbn-sinal 4.2s linear infinite;
	will-change: transform;
}

.bbn-sinal__linha {
	stroke: #7fd0f3;
}

.bbn-sinal__brilho {
	stroke: rgba(84, 188, 235, 0.22);
}

@keyframes bbn-sinal {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-240px, 0, 0); }
}

.bbn-popup p.bbn-popup__prazo {
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-family: var(--bbn-corpo);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.82);
}

/* Entrada em sequência quando o pop-up abre */
.bbn-popup__marca,
.bbn-popup__oferta,
.bbn-popup__sinal,
.bbn-popup__prazo {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bbn-popup.is-visivel .bbn-popup__marca,
.bbn-popup.is-visivel .bbn-popup__oferta,
.bbn-popup.is-visivel .bbn-popup__sinal,
.bbn-popup.is-visivel .bbn-popup__prazo {
	opacity: 1;
	transform: none;
}

.bbn-popup.is-visivel .bbn-popup__marca  { transition-delay: 0.12s; }
.bbn-popup.is-visivel .bbn-popup__oferta { transition-delay: 0.22s; }
.bbn-popup.is-visivel .bbn-popup__sinal  { transition-delay: 0.4s; }
.bbn-popup.is-visivel .bbn-popup__prazo  { transition-delay: 0.5s; }

/* Lado claro */
.bbn-popup__corpo {
	/* sem position: o botão fechar se posiciona pelo canto da caixa */
	padding: 38px 36px 26px;
	color: var(--bbn-texto);
}

.bbn-popup button.bbn-popup__fechar {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #8a979f;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.bbn-popup button.bbn-popup__fechar:hover,
.bbn-popup button.bbn-popup__fechar:focus {
	background: var(--bbn-gelo);
	color: var(--bbn-texto);
	outline: none;
}

.bbn-popup button.bbn-popup__fechar:focus-visible {
	box-shadow: 0 0 0 2px var(--bbn-azul);
}

.bbn-popup p.bbn-popup__chamada {
	margin: 0 0 10px;
	font-family: var(--bbn-corpo);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bbn-azul-escuro);
}

.bbn-popup h2.bbn-popup__titulo {
	margin: 0 0 12px;
	padding: 0;
	padding-right: 18px;
	font-family: var(--bbn-titulo);
	font-size: 23px;
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--bbn-texto);
}

.bbn-popup p.bbn-popup__desc {
	margin: 0 0 16px;
	font-family: var(--bbn-corpo);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--bbn-texto-suave);
}

.bbn-popup p.bbn-popup__contagem {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 22px;
	padding: 5px 12px 5px 10px;
	border-radius: 999px;
	background: var(--bbn-gelo);
	font-family: var(--bbn-corpo);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: var(--bbn-azul-escuro);
}

.bbn-popup p.bbn-popup__contagem::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bbn-azul);
}

.bbn-popup p.bbn-popup__contagem:empty {
	display: none;
}

.bbn-popup__acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
}

.bbn-popup a.bbn-popup__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	margin: 0;
	padding: 0 22px;
	border: 0;
	border-radius: 8px;
	background: var(--bbn-azul-escuro);
	color: #ffffff;
	font-family: var(--bbn-corpo);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.bbn-popup a.bbn-popup__botao:hover,
.bbn-popup a.bbn-popup__botao:focus {
	background: var(--bbn-azul-escuro-2);
	color: #ffffff;
	text-decoration: none;
	outline: none;
}

.bbn-popup a.bbn-popup__botao:focus-visible {
	box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px var(--bbn-azul);
}

.bbn-popup button.bbn-popup__depois {
	margin: 0;
	padding: 6px 2px;
	border: 0;
	background: transparent;
	color: var(--bbn-texto-suave);
	font-family: var(--bbn-corpo);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.2;
	cursor: pointer;
}

.bbn-popup button.bbn-popup__depois:hover,
.bbn-popup button.bbn-popup__depois:focus {
	color: var(--bbn-texto);
	text-decoration: underline;
	outline: none;
}

.bbn-popup p.bbn-popup__nota {
	margin: 22px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--bbn-linha);
	font-family: var(--bbn-corpo);
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bbn-texto-nota);
}

/* Celular: o lado escuro vira uma faixa no topo do pop-up */
@media (max-width: 640px) {
	.bbn-popup__caixa {
		grid-template-columns: 1fr;
		border-radius: 12px;
	}
	.bbn-popup__lado {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"marca marca"
			"oferta prazo"
			"sinal sinal";
		align-items: end;
		gap: 12px 16px;
		padding: 22px 56px 0 22px;
	}
	.bbn-popup p.bbn-popup__marca {
		grid-area: marca;
		font-size: 21px;
	}
	.bbn-popup__marca span {
		display: inline;
	}
	.bbn-popup p.bbn-popup__oferta {
		grid-area: oferta;
	}
	.bbn-popup__numero {
		font-size: 76px;
	}
	.bbn-popup__desconto {
		margin-top: 8px;
		font-size: 11px;
	}
	.bbn-popup p.bbn-popup__prazo {
		grid-area: prazo;
		padding: 0 0 22px;
		border-top: 0;
		font-size: 12px;
	}
	.bbn-popup__sinal {
		grid-area: sinal;
		margin: -6px -56px 0 -22px;
	}
	.bbn-popup__lado .bbn-popup__luz {
		top: -160px;
		left: -60px;
	}
	.bbn-popup__corpo {
		padding: 24px 22px 20px;
	}
	.bbn-popup button.bbn-popup__fechar {
		top: 8px;
		right: 8px;
		color: rgba(255, 255, 255, 0.78);
	}
	.bbn-popup button.bbn-popup__fechar:hover,
	.bbn-popup button.bbn-popup__fechar:focus {
		background: rgba(255, 255, 255, 0.12);
		color: #ffffff;
	}
	.bbn-popup h2.bbn-popup__titulo {
		font-size: 20px;
		padding-right: 0;
	}
	.bbn-popup p.bbn-popup__desc {
		font-size: 14px;
	}
	.bbn-popup a.bbn-popup__botao {
		width: 100%;
	}
	.bbn-popup__acoes {
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bbn-popup__fundo,
	.bbn-popup__caixa,
	.bbn-popup__marca,
	.bbn-popup__oferta,
	.bbn-popup__sinal,
	.bbn-popup__prazo {
		transition: none;
	}
	.bbn-popup__caixa,
	.bbn-popup__marca,
	.bbn-popup__oferta,
	.bbn-popup__sinal,
	.bbn-popup__prazo {
		transform: none;
	}
	.bbn-popup__lado .bbn-popup__luz,
	.bbn-popup__numero,
	.bbn-sinal {
		animation: none;
	}
}