/*
 * Pele de Black Friday (usuário, 03/11/2026). Só entra com a chave ligada em Partials/jv/campanha.template, e carrega
 * nos 3 PageHeader depois do tokens.css e antes dos componentes. Duas camadas:
 * 1. Tokens: o site novo não tem cor fixa fora do tokens.css, então basta apontar os papéis (--jv-color-*) para a paleta
 *    escura e topo, busca, menu do celular, PLP, PDP, Facilidades, cartão de leilão e mensagens de erro viram escuros
 *    sozinhos, sem tocar em nenhum componente.
 * 2. CSS antigo (styles.css): topo, menu do computador e os cartões e títulos das vitrines da home não usam tokens; aqui
 *    as regras repetem os seletores dele com um "body" a mais, para vencer na especificidade. O styles.css carrega antes
 *    desta pele; os componentes (Styles/jv/components) carregam depois, por isso toda regra que não é token leva "body".
 * Onde vale (decisão do usuário, 03/11/2026): topo e menu pretos em todo o site; conteúdo escuro só na home, na grade de
 * joias (categoria, busca e marca: grid-products e grid-empty) e na página de produto (context-product-N). Leilão
 * (ProductAuction*), carrinho, login e painel continuam claros; o checkout tem o próprio topo e não carrega esta pele.
 * O rodapé segue roxo.
 * Paleta aprovada: preto #000 na página, o Text (#1d1d1d) nos cartões, #2b2b2b em faixas e campos, texto branco e #aaa no
 * apagado, lilás nos títulos e no preço (o roxo sobre preto dá 2,1), botão Comprar como é. Fora da paleta só o azul de
 * informação, que vira claro para o texto de erro e de aviso continuar legível (o navy sobre preto dá 2,5).
 */

/* 1. Tokens escuros: no topo e no menu do celular em todo o site, e na página inteira onde o conteúdo é escuro. */
body #header,
body .jv-menu,
body.HomeRoute,
body.grid-products:not(.ProductAuctionRoute),
body.grid-empty:not(.ProductAuctionRoute),
body[class*="context-product-"] {
  --jv-color-bg: #000000;
  --jv-color-surface: var(--jv-palette-ink);
  --jv-color-surface-alt: #2b2b2b;
  --jv-color-text: var(--jv-palette-white);
  --jv-color-text-muted: #aaaaaa;          /* sobre o preto dá 8,6; sobre o cartão, 7,6 */
  --jv-color-text-muted-on-alt: #aaaaaa;   /* sobre #2b2b2b dá 6,5 */
  --jv-color-brand: var(--jv-palette-lilac);
  --jv-color-on-brand: var(--jv-palette-ink);          /* texto sobre o lilás: 9,5 */
  --jv-color-discount-text: var(--jv-palette-ink);     /* número do selo de desconto, que agora é lilás (o dourado dava 1,2) */
  --jv-color-border: var(--jv-palette-white);          /* botões de contorno e linhas */
  --jv-color-focus: var(--jv-palette-lilac);
  --jv-color-info: #7fb2f0;                            /* texto de erro e de aviso: 9,0 sobre o preto */
  /* Tokens que o tokens.css deriva de outro token no :root resolvem lá, com o roxo: precisam ser reapontados aqui. */
  --jv-color-price: var(--jv-palette-lilac);           /* o "12x" (usuário, 03/11/2026: lilás) */
  --jv-color-price-old: #aaaaaa;                       /* o "De R$", riscado */
}

/* Facilidades (Partials/jv/benefits) seguem roxas com texto e ícones brancos (usuário, 03/11/2026: "pode manter em
   roxo"): os ícones são desenhos brancos e sumiam sobre o lilás. */
body .jv-benefits {
  --jv-color-brand: var(--jv-palette-purple);
  --jv-color-on-brand: var(--jv-palette-white);
}

/* Compartilhar (Partials/jv/pdp-share) e galeria (Partials/jv/pdp-gallery) da página de produto ficam sobre a foto, que
   é branca: voltam às cores claras do padrão (usuário, 03/11/2026: "não precisava mudar de cor"; "as setas de navegação
   também ficaram brancas"). Com os tokens escuros o Compartilhar virava lilás e o texto e os ícones do menu sumiam em
   branco sobre o vidro branco; as setas, o Fechar e a miniatura do vídeo ficavam brancos sobre a foto. */
body .jv-pdp-share,
body .jv-pdp-gallery {
  --jv-color-text: var(--jv-palette-ink);
  --jv-color-text-muted: var(--jv-palette-gray-600);
  --jv-color-border: var(--jv-palette-ink);
  --jv-color-surface: var(--jv-palette-white);
  --jv-color-brand: var(--jv-palette-purple);
  --jv-color-focus: var(--jv-palette-purple);
}

/* Fundo e texto da página escura. O styles.css pinta o body com --body-color e --color-primary. */
body.HomeRoute,
body.grid-products:not(.ProductAuctionRoute),
body.grid-empty:not(.ProductAuctionRoute),
body[class*="context-product-"] {
  background-color: #000000;
  color: var(--jv-palette-white);
}

/* Atrás das janelas, a página escura fica mais escura, e não esbranquiçada como no tema claro. */
body.HomeRoute dialog::backdrop,
body.grid-products:not(.ProductAuctionRoute) dialog::backdrop,
body.grid-empty:not(.ProductAuctionRoute) dialog::backdrop,
body[class*="context-product-"] dialog::backdrop {
  --jv-color-overlay: rgb(0 0 0 / 55%);
}

/* Onde o azul de informação é fundo com texto branco (o contador da Oferta Relâmpago e o botão da janela de erro), fica
   o navy do tema: o azul claro de cima é só para texto. */
body .jv-pdp-countdown {
  background: var(--jv-palette-navy);
}

body .jv-erro-janela__botao {
  border-color: var(--jv-palette-navy);
  background: var(--jv-palette-navy);
}

/* 2. Topo, em todo o site (styles.css: #top-bar roxo, #header branco, #main-menu cinza, textos no roxo). */
body #top-bar,
body #header {
  background-color: #000000;
}

body #header .options a,
body #header .options .cart .total {
  color: var(--jv-palette-white);
}

body #header #hamburguer svg {
  stroke: var(--jv-palette-white);
}

/* Login e carrinho do topo (LoginMobile e CartMobile do sprite compartilhado) têm roxo fixo dentro do desenho e ficavam
   apagados sobre o preto (2,1): o filtro deixa o desenho branco sem mexer no sprite, que é da loja. O "Sair" (vermelho)
   e o hambúrguer (verde-água fixo) ficam como são. */
body #header .options a:not(.logoff) svg {
  filter: brightness(0) invert(1);
}

body #header #main-menu {
  background-color: var(--jv-palette-ink);
}

body #header #main-menu .section-1 > li > h3 > a {
  color: var(--jv-palette-white);
}

/* O item da campanha continua lilás; o texto vai para o preto, como no botão de aro. */
body #header #main-menu .section-1 li.ofertas-24 h3 a {
  color: var(--jv-palette-ink);
}

/* Celular: a barra Joias / Leilão / Relógios / Novidades; o Leilão segue lilás com texto preto (styles.css). */
body #header .menu a {
  color: var(--jv-palette-white);
}

/* Ofertas de 24h dentro do menu do celular (Partials/offers; styles.css pinta nome e "de R$" no preto e o resto no roxo).
   Usuário, 03/11/2026: nome da joia e "de R$" em branco, "12x" em lilás; a frase "Super ofertas válidas por 24h" também
   vai para o lilás, porque o roxo some sobre o preto. A faixa roxa do título e o relógio ficam como são. */
body .jv-menu .offers .products .list .product-line .info h3,
body .jv-menu .offers .products .list .product-line .price .list-price {
  color: var(--jv-palette-white);
}

body .jv-menu .offers .more-info > strong,
body .jv-menu .offers .products .list .product-line .price,
body .jv-menu .offers .products .list .product-line .price .sale-price,
body .jv-menu .offers .products .list .product-line .price .condition {
  color: var(--jv-palette-lilac);
}

/* 3. Home: títulos das vitrines e cartão antigo (styles.css: .header-title no roxo, .product-line no preto). */
body.HomeRoute .header-title .title-ml,
body.HomeRoute .header-title .title-ml + a::after,
body.HomeRoute .product-line .price,
body.HomeRoute .product-line .condition {
  color: var(--jv-palette-lilac);
}

body.HomeRoute .header-title h3::after {
  background-color: var(--jv-palette-lilac);
}

body.HomeRoute .product-line,
body.HomeRoute .product-line h3,
body.HomeRoute .product-line .sale-price {
  color: var(--jv-palette-white);
}

body.HomeRoute .product-line h3 {
  border-bottom-color: #aaaaaa;
}

body.HomeRoute .product-line .list-price {
  color: #aaaaaa;
}

/* Botão de contorno das vitrines (home.new.css: borda verde-água e texto preto): o texto fica branco; o cheio não muda. */
body.HomeRoute .btn-outline-new {
  color: var(--jv-palette-white);
}

/* 4. Modais do CSS antigo sobre a página escura (usuário, 03/11/2026, print do "Minha seleção": o texto herdava o branco
   da página sobre o fundo branco do modal). O mini carrinho (#modal-mini-cart) e o painel lateral (#modal-fixed: frete e
   tabelas da página de produto) ficam pretos com texto branco; o rodapé roxo do mini carrinho, com os botões, fica como é. */
body:is(.HomeRoute, .grid-products, .grid-empty, [class*="context-product-"]):not(.ProductAuctionRoute) #modal-mini-cart,
body:is(.HomeRoute, .grid-products, .grid-empty, [class*="context-product-"]):not(.ProductAuctionRoute) #modal-fixed {
  background-color: #000000;
  color: var(--jv-palette-white);
}

body:is(.HomeRoute, .grid-products, .grid-empty, [class*="context-product-"]):not(.ProductAuctionRoute) #mini-cart .header .text-secondary,
body:is(.HomeRoute, .grid-products, .grid-empty, [class*="context-product-"]):not(.ProductAuctionRoute) #mini-cart .items .price,
body:is(.HomeRoute, .grid-products, .grid-empty, [class*="context-product-"]):not(.ProductAuctionRoute) #mini-cart .items .remove {
  color: var(--jv-palette-lilac);
}

body:is(.HomeRoute, .grid-products, .grid-empty, [class*="context-product-"]):not(.ProductAuctionRoute) #mini-cart .items .actions a {
  color: var(--jv-palette-white);
}

body:is(.HomeRoute, .grid-products, .grid-empty, [class*="context-product-"]):not(.ProductAuctionRoute) #mini-cart .items .actions .group {
  border-color: #aaaaaa;
}

body:is(.HomeRoute, .grid-products, .grid-empty, [class*="context-product-"]):not(.ProductAuctionRoute) #mini-cart .items [data-basket-item-id]:not(:last-child),
body:is(.HomeRoute, .grid-products, .grid-empty, [class*="context-product-"]):not(.ProductAuctionRoute) #modal-fixed .content table th,
body:is(.HomeRoute, .grid-products, .grid-empty, [class*="context-product-"]):not(.ProductAuctionRoute) #modal-fixed .content table td {
  border-bottom-color: #2b2b2b;
}