/*
 * Cabeçalho Black — só entra quando o modo está ligado (painel "Black Lizzon ›
 * Cabeçalho Black") ou na prévia ?ulj_black=<chave>. Vem DEPOIS do loja.css.
 * Tudo preso em .ulj-topo--black: o resto da página não muda (a PDP inclusive).
 * Os painéis brancos (busca, conta, categorias) continuam brancos, com texto escuro.
 */

.ulj-topo--black {
	--ulj-b-ouro-claro: #f7e0a3;
	--ulj-b-ouro: #d9a44b;
	--ulj-b-ouro-escuro: #8c5d1d;
	--ulj-b-texto: #f5efe4;
	--ulj-b-suave: rgba(245, 239, 228, .6);
	--ulj-b-fundo: #0b0a09;
	background:
		radial-gradient(70% 160% at 8% -30%, rgba(217, 164, 75, .26), transparent 60%),
		radial-gradient(50% 140% at 96% -20%, rgba(255, 110, 30, .16), transparent 62%),
		linear-gradient(180deg, #14110d 0%, var(--ulj-b-fundo) 100%);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-bottom: 0;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .32);
}
/* fio dourado embaixo, com um brilho correndo */
.ulj-topo--black::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent 0%, var(--ulj-b-ouro-escuro) 18%, var(--ulj-b-ouro) 38%, #fff6dc 50%, var(--ulj-b-ouro) 62%, var(--ulj-b-ouro-escuro) 82%, transparent 100%);
	background-size: 220% 100%;
	animation: ulj-b-fio 7s linear infinite;
	pointer-events: none;
}
@keyframes ulj-b-fio { from { background-position: 110% 0; } to { background-position: -110% 0; } }

.ulj-topo--black .ulj-topo__linha { min-height: 84px; }

/* logo champanhe + selo da campanha */
.ulj-topo--black .ulj-logo img { width: 150px; filter: drop-shadow(0 1px 6px rgba(217, 164, 75, .25)); }
.ulj-black-selo {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	margin: -6px 4px -6px -6px;
	filter: drop-shadow(0 6px 16px rgba(230, 140, 40, .42));
	animation: ulj-b-flutua 4.5s ease-in-out infinite;
	transition: transform .25s ease, filter .25s ease;
}
.ulj-black-selo img { width: auto; height: 70px; display: block; }
/* faixa de luz atravessando o selo, recortada no formato dele */
.ulj-black-selo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .7) 50%, transparent 62%);
	background-size: 260% 100%;
	background-repeat: no-repeat;
	-webkit-mask: var(--ulj-selo) center / contain no-repeat;
	mask: var(--ulj-selo) center / contain no-repeat;
	mix-blend-mode: soft-light;
	animation: ulj-b-luz 3.8s ease-in-out infinite;
	pointer-events: none;
}
a.ulj-black-selo:hover { transform: scale(1.05); filter: drop-shadow(0 8px 22px rgba(240, 150, 40, .6)); }
@keyframes ulj-b-flutua { 50% { transform: translateY(-2px); } }
@keyframes ulj-b-luz { 0%, 55% { background-position: 130% 0; } 100% { background-position: -30% 0; } }

/* menu (Univer Menu), ações e rótulos */
.ulj-topo--black .ulj-topo__menu .um-abrir,
.ulj-topo--black .ulj-icone { color: var(--ulj-b-texto) !important; }
.ulj-topo--black .ulj-topo__acao,
.ulj-topo--black .ulj-topo__acao > a,
.ulj-topo--black .ulj-topo__rotulo,
.ulj-topo--black .ulj-topo__rotulo a,
.ulj-topo--black .ulj-topo__boneco,
.ulj-topo--black .ulj-topo__carrinho { color: var(--ulj-b-texto); }
.ulj-topo--black .ulj-topo__rotulo small { color: var(--ulj-b-suave); }
.ulj-topo--black .ulj-topo__acao .ulj-i { color: var(--ulj-b-ouro-claro); }
.ulj-topo--black .ulj-topo__acao:hover .ulj-i { color: #fff; }

/* carrinho em ouro */
.ulj-topo--black .ulj-topo__carrinho > .ulj-i {
	background: linear-gradient(145deg, var(--ulj-b-ouro-claro) 0%, var(--ulj-b-ouro) 55%, #a8742a 100%);
	color: #1b1409;
	box-shadow: 0 0 0 1px rgba(247, 224, 163, .55), 0 6px 18px rgba(217, 164, 75, .38);
}
.ulj-topo--black .ulj-topo__carrinho:hover > .ulj-i { box-shadow: 0 0 0 1px rgba(247, 224, 163, .8), 0 8px 24px rgba(217, 164, 75, .55); }
.ulj-topo--black .ulj-topo__carrinho > b { border-color: var(--ulj-b-fundo); }

/* busca em vidro escuro */
.ulj-topo--black .ulj-busca input {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(217, 164, 75, .38);
	color: #fff;
}
.ulj-topo--black .ulj-busca input::placeholder { color: rgba(245, 239, 228, .5); }
.ulj-topo--black .ulj-busca input:focus {
	background: rgba(255, 255, 255, .1);
	border-color: var(--ulj-b-ouro);
	box-shadow: 0 0 0 4px rgba(217, 164, 75, .2);
}
.ulj-topo--black .ulj-busca > .ulj-i,
.ulj-topo--black .ulj-busca__limpar { color: var(--ulj-b-ouro-claro); }

/* barra de categorias */
.ulj-topo--black .ulj-nav { border-top-color: rgba(217, 164, 75, .18); background: rgba(0, 0, 0, .28); }
.ulj-topo--black .ulj-nav__item > a { color: rgba(245, 239, 228, .78); }
.ulj-topo--black .ulj-nav__item > a:hover,
.ulj-topo--black .ulj-nav__item > a[aria-current],
.ulj-topo--black .ulj-nav__item.is-aberto > a { color: var(--ulj-b-ouro-claro); border-bottom-color: var(--ulj-b-ouro); }

/* painéis brancos que abrem do cabeçalho: texto escuro de novo */
.ulj-topo--black .ulj-sug,
.ulj-topo--black .ulj-conta__lista,
.ulj-topo--black .ulj-nav__painel { color: var(--ulj-tinta, #16161a); }
.ulj-topo--black .ulj-conta__lista a,
.ulj-topo--black .ulj-nav__painel a { color: var(--ulj-tinta, #16161a); }
.ulj-topo--black .ulj-nav__subs a { color: var(--ulj-tinta-2, #3f3f46); }

@media (max-width: 899px) {
	.ulj-topo--black .ulj-topo__linha { min-height: 0; }
	.ulj-topo--black .ulj-logo img { width: 104px; }
	/* no celular o selo fica só na faixa do topo (dono, 30/10/2026) */
	.ulj-black-selo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ulj-topo--black::after,
	.ulj-black-selo,
	.ulj-black-selo::after { animation: none; }
}

/* Barra de baixo do celular (só a home tem) no modo Black: preta, ícones em ouro e o
   carrinho no mesmo desenho do carrinho dourado do topo. Este arquivo só entra com o
   modo Black ligado, por isso a .ulj-barra pode ser pega direto. */
@media (max-width: 1024px) {
	.ulj-pagina .ulj-barra {
		background: linear-gradient(180deg, #16130e 0%, #0b0a09 100%);
		box-shadow: inset 0 1px 0 rgba(217, 164, 75, .45), 0 -10px 28px rgba(0, 0, 0, .28);
	}
	.ulj-pagina .ulj-barra__item { color: rgba(245, 239, 228, .78); }
	.ulj-pagina .ulj-barra__item[aria-current="page"] { color: #f7e0a3; }
	.ulj-pagina .ulj-barra__ic { fill: #e2b25c; }
	.ulj-pagina .ulj-barra__item--carrinho {
		background: linear-gradient(180deg, #16130e 0%, #0b0a09 100%);
		box-shadow: 0 -1px 0 rgba(217, 164, 75, .45);
	}
	.ulj-pagina .ulj-barra__carrinho {
		background: linear-gradient(145deg, #f7e0a3 0%, #d9a44b 55%, #a8742a 100%);
		color: #1b1409;
		box-shadow: 0 0 0 1px rgba(247, 224, 163, .55), 0 6px 18px rgba(217, 164, 75, .4);
	}
	.ulj-pagina .ulj-barra__n { border-color: #0b0a09; }
	.ulj-pagina .ulj-barra__play { border-color: #e2b25c; background: transparent; color: #e2b25c; }
	.ulj-pagina .ulj-barra button.um-abrir.ulj-barra__menu { background: transparent !important; color: #e2b25c !important; }
}

/* ───────── Carrinho lateral (Univercart) no modo Black ─────────
   Faixa preta no topo com o selo "Acelere sua Black", barra de brindes em ouro,
   "economizou" em selo dourado e o botão de finalizar preto. Mesmo arquivo do
   cabeçalho Black: desligou o Black no painel, o carrinho volta ao normal. */
html .uc-side-cart .uc-cart-header {
	position: relative;
	justify-content: flex-end;
	min-height: 72px;
	padding: 0 14px;
	border-bottom: 0;
	background:
		radial-gradient(70% 160% at 10% -30%, rgba(217, 164, 75, .30), transparent 60%),
		radial-gradient(50% 140% at 96% -20%, rgba(255, 110, 30, .16), transparent 62%),
		linear-gradient(180deg, #14110d 0%, #0b0a09 100%);
}
html .uc-side-cart .uc-cart-header::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 108px;
	height: 60px;
	transform: translate(-50%, -50%);
	background: url("/wp-content/uploads/2026/10/acelere-sua-black-v2-300x190.webp") center / contain no-repeat;
	filter: drop-shadow(0 4px 14px rgba(230, 140, 40, .45));
	pointer-events: none;
}
html .uc-side-cart .uc-close-btn { color: #f7e0a3 !important; }
html .uc-side-cart .uc-close-btn:hover { background: rgba(247, 224, 163, .12) !important; color: #fff !important; }

/* barra de brindes: continua a faixa preta, com o progresso em ouro */
html .uc-side-cart .uc-rewards-meter {
	position: relative;
	border-bottom: 0;
	background: linear-gradient(180deg, #0b0a09 0%, #12100c 100%);
}
html .uc-side-cart .uc-rewards-meter::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent 0%, #8c5d1d 18%, #f7e0a3 50%, #8c5d1d 82%, transparent 100%);
}
html .uc-side-cart .uc-rewards-segment { background: rgba(255, 255, 255, .10); }
html .uc-side-cart .uc-rewards-fill {
	background: repeating-linear-gradient(-45deg, #f2cf7a, #f2cf7a 8px, #c9922f 8px, #c9922f 16px);
	background-size: 22px 22px;
	box-shadow: 0 0 14px rgba(217, 164, 75, .45);
}
html .uc-side-cart .uc-rewards-icon { border-color: #0b0a09; background: #1d1a14; color: rgba(247, 224, 163, .55); box-shadow: 0 0 0 1px rgba(217, 164, 75, .35); }
html .uc-side-cart .uc-rewards-icon.uc-icon-reached {
	background: linear-gradient(145deg, #f7e0a3 0%, #d9a44b 55%, #a8742a 100%);
	color: #1b1409;
	box-shadow: 0 0 0 1px rgba(247, 224, 163, .6), 0 2px 14px rgba(217, 164, 75, .55);
}
html .uc-side-cart .uc-rewards-text { color: rgba(245, 239, 228, .78); }
html .uc-side-cart .uc-rewards-text strong { color: #f7e0a3; }
html .uc-side-cart .uc-rewards-done { color: #f7e0a3 !important; }

/* "economizou" em selo dourado */
html .uc-side-cart .uc-summary-savings,
html .uc-side-cart .uc-item-savings-badge {
	background: linear-gradient(135deg, #f7e0a3 0%, #e2b25c 55%, #c48f3a 100%);
	color: #2a1d06;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
html .uc-side-cart .uc-summary-savings .uc-savings-value,
html .uc-side-cart .uc-summary-savings svg { color: #2a1d06; }

/* botão de finalizar preto, letra branca */
html .uc-side-cart .uc-checkout-btn {
	background: linear-gradient(180deg, #2a2a2e 0%, #0b0b0c 100%) !important;
	color: #fff !important;
	text-shadow: none;
	border: 1px solid #000;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px rgba(217, 164, 75, .35), 0 8px 22px rgba(0, 0, 0, .28);
}
html .uc-side-cart .uc-checkout-btn:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 0 1px rgba(247, 224, 163, .7), 0 10px 26px rgba(0, 0, 0, .35); }
html .uc-side-cart .uc-checkout-btn::before { background: linear-gradient(120deg, transparent 0%, rgba(247, 224, 163, .35) 50%, transparent 100%); }