/* Assinatura União Magistral — CSS da página /assinatura/
   Quase todo o visual está em estilos inline no HTML (copiados 1:1 do protótipo aprovado).
   Este arquivo cobre só o que não cabe inline. Carregar SOMENTE nesta página.

   ----------------------------------------------------------------------
   DE ONDE VEIO: entregue pelo Claude Design com seletores-marcadores
   .TEMA-… , que o handoff (README §4.7) manda trocar pelos seletores reais
   do tema. A troca foi feita lendo o DOM da loja no ar. Tabela do que virou
   o quê, para quem precisar conferir ou refazer:

     .TEMA-barra-avisos       -> .js-adbar            (fundo #E74C3C medido)
     .TEMA-cabecalho          -> .js-head-main        (cabeçalho normal)
                                 .js-head-fixed       (compacto ao rolar; no
                                                       Flex é OUTRO elemento,
                                                       não uma classe extra)
     .TEMA-cabecalho-rolado   -> .js-head-fixed       (por isso a sombra do
                                                       estado rolado mira ele
                                                       direto)
     .TEMA-logo img           -> .logo-img
     .TEMA-menu               -> .js-nav-desktop-list
     .TEMA-icones             -> .utilities-container, .head-search-icon
     .TEMA-hamburguer         -> .btn-hamburger
     .TEMA-contador-sacola    -> .js-cart-widget-amount
     .TEMA-faixa-aproveite    -> .CA_shipping_header  (é do app Cashing, não
                                                       do tema — ver nota lá
                                                       embaixo)
     .TEMA-menu-lateral       -> #nav-hamburger
     .TEMA-menu-lateral-topo  -> #nav-hamburger .modal-header
     .TEMA-fechar             -> #nav-hamburger .modal-close

   Os modais de busca, sacola e menu lateral do tema são irmãos do <body>, e
   não filhos do cabeçalho — por isso pintar o cabeçalho de branco não os
   alcança. Conferido no DOM antes de escrever estas regras.
   ---------------------------------------------------------------------- */

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
#assinatura, #assinatura *, #assinatura *::before, #assinatura *::after { box-sizing: border-box; }
#assinatura { -webkit-font-smoothing: antialiased; }
#assinatura a { color: #3B2619; }
#assinatura a:hover { color: #C8490C; }
#assinatura a:focus-visible, #assinatura button:focus-visible { outline: 3px solid #FFB37E; outline-offset: 3px; }
#assinatura ::selection { background: #FFD3B5; color: #3B2619; }

/* ---------- Proteção contra estilos globais do tema ---------- */
#assinatura h1, #assinatura h2, #assinatura h3 { text-transform: none; font-family: 'Satoshi', system-ui, -apple-system, sans-serif; }
#assinatura ul, #assinatura ol { list-style: none; }
#assinatura button { -webkit-appearance: none; appearance: none; text-transform: none; letter-spacing: normal; min-height: 0; font-family: inherit; }
#assinatura img { max-width: none; }

/* ---------- Cabeçalho da loja no MODO ASSINATURA ----------
   Tudo fica sob body.is-assinatura, então só vale nesta página. Nas outras
   páginas o cabeçalho continua normal — e como este arquivo nem é emitido
   fora daqui, não há risco de vazar. */
body.is-assinatura .js-adbar { background: #C2470C !important; }
body.is-assinatura .js-adbar, body.is-assinatura .js-adbar * { color: #FFFFFF !important; }

body.is-assinatura .js-head-main,
body.is-assinatura .js-head-fixed { background: #E8611A !important; }
body.is-assinatura .js-head-fixed { box-shadow: 0 12px 28px -18px rgba(120,40,0,.65) !important; }

/* LOGO BRANCO.
   O filter do pacote (brightness(0) invert(1)) so funciona com logo de fundo
   transparente, e o logo desta loja e um WebP OPACO: VP8X com flag 0x20, so
   perfil ICC, sem canal alfa - conferido byte a byte. Com o filter, o
   retangulo inteiro virava um bloco branco.
   Tentativas anteriores: mix-blend-mode (depende do navegador compor a
   mistura) e um PNG de outra proporcao (saia menor que o original).
   Agora e o arquivo que o lojista mandou: mesmo 480x192 do logo do tema, ja
   branco e com canal alfa. So trocar a imagem resolve - sem filtro, sem
   blend, sem object-fit, e no tamanho exato de antes.
   O nome do arquivo tem o prefixo assinatura- por um motivo pratico: a
   primeira versao se chamava logo-branco.png e, quando o conteudo dela
   mudou, navegador e borda continuaram servindo a imagem velha no mesmo
   endereco - o logo apareceu escuro mesmo com o arquivo certo publicado.
   Endereco novo, cache nenhum.

   ATENCAO: se o logo da loja mudar, troque tambem este arquivo,
   porque este caminho e fixo e nao acompanha o logo do painel. */
body.is-assinatura .js-head-main .logo-img,
body.is-assinatura .js-head-fixed .logo-img,
body.is-assinatura #nav-hamburger .modal-header .logo-img { content: url("../images/assinatura-logo-branco.png"); }

body.is-assinatura .js-head-main,
body.is-assinatura .js-head-fixed,
body.is-assinatura .js-head-main a,
body.is-assinatura .js-head-fixed a,
body.is-assinatura .js-head-main button,
body.is-assinatura .js-head-fixed button,
body.is-assinatura .js-head-main .js-nav-desktop-list a,
body.is-assinatura .js-head-main .utilities-container,
body.is-assinatura .js-head-fixed .utilities-container,
body.is-assinatura .js-head-main .head-search-icon,
body.is-assinatura .js-head-fixed .head-search-icon,
body.is-assinatura .js-head-main .btn-hamburger,
body.is-assinatura .js-head-fixed .btn-hamburger { color: #FFFFFF !important; }
body.is-assinatura .js-head-main svg,
body.is-assinatura .js-head-fixed svg { color: #FFFFFF; }

/* Os icones de busca, conta e sacola nao seguem o color: o tema pinta eles
   com fill fixo (rgb(93,86,86)), e no cabecalho compacto - o que aparece ao
   rolar - eles ficavam cinza escuro em cima do laranja. O proprio handoff
   avisa (secao 4.7): se o SVG tiver cor fixa, aplicar fill direto. O * pega
   os <use> e os <path> de dentro dos simbolos. */
body.is-assinatura .js-head-main svg,
body.is-assinatura .js-head-fixed svg,
body.is-assinatura .js-head-main svg *,
body.is-assinatura .js-head-fixed svg * { fill: rgba(255,255,255,.82) !important; }

/* O .82 ai em cima e o unico botao de ajuste do brilho dos icones: branco
   puro (1) estava duro demais em cima do laranja; mais baixo que .7 eles
   comecam a sumir. O logo fica em branco pleno de proposito - e a marca. */

/* Os painéis que descem do cabeçalho (submenu de PRODUTOS, resumo da sacola)
   têm fundo branco próprio. Sem isto, o texto branco de cima vazaria para
   dentro deles e sumiria no branco. */
body.is-assinatura .js-head-main .nav-dropdown-content,
body.is-assinatura .js-head-fixed .nav-dropdown-content { background: #FFFFFF !important; }
body.is-assinatura .js-head-main .nav-dropdown-content,
body.is-assinatura .js-head-fixed .nav-dropdown-content,
body.is-assinatura .js-head-main .nav-dropdown-content a,
body.is-assinatura .js-head-fixed .nav-dropdown-content a,
body.is-assinatura .js-head-main .nav-dropdown-content svg,
body.is-assinatura .js-head-fixed .nav-dropdown-content svg { color: #3B2619 !important; }

body.is-assinatura .js-head-main .js-nav-desktop-list a[href*="/assinatura"],
body.is-assinatura .js-head-fixed .js-nav-desktop-list a[href*="/assinatura"] {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: #FFFFFF; color: #C2470C !important; font-weight: 700; box-shadow: 0 8px 18px -10px rgba(80,20,0,.55);
}

body.is-assinatura .js-cart-widget-amount { background: #FFFFFF !important; color: #C2470C !important; }

/* A faixa laranja "Aproveite: comprando a partir de R$ …" não é do tema: é o
   app Cashing, que a injeta por JS. Ela conflita com a regra de R$ 150 da
   assinatura, então sai aqui. O seletor é carregado de propósito — o app traz
   [data-slot-item] .CA_shipping_header:not([data-key]){display:flex
   !important}, e entre dois !important quem decide é a especificidade. */
body.is-assinatura .CA_shipping_header,
html body.is-assinatura [data-slot-item] .CA_shipping_header:not([data-key]) { display: none !important; }

/* A janela de brinde do mesmo app (canto inferior esquerdo) nao esta no
   handoff, mas no celular ela cai EM CIMA da barra fixa - medido em 390px:
   brinde ocupa 20-95 x 635-710 e a barra 0-375 x 659-730, cruzando bem no
   texto "15% OFF em toda entrega". Como a barra e a chamada principal da
   pagina no celular, a janela sai daqui. Em qualquer outra tela da loja ela
   continua aparecendo. Para traze-la de volta, apague estas duas linhas. */
body.is-assinatura #CA_widget_container { display: none !important; }

/* Menu lateral (mobile) */
body.is-assinatura #nav-hamburger { background: #FFF6EF !important; }
/* O painel do menu ja ficava creme, mas o .modal-body por dentro continuava
   branco: dava um retangulo branco atras dos itens e creme embaixo, partindo
   o painel em dois tons. Visto no celular. */
body.is-assinatura #nav-hamburger .modal-body,
body.is-assinatura #nav-hamburger .nav-primary { background: transparent !important; }
body.is-assinatura #nav-hamburger .modal-header { background: #E8611A !important; border-bottom-color: transparent !important; }
body.is-assinatura #nav-hamburger .modal-close { background: rgba(255,255,255,.18) !important; color: #FFFFFF !important; border-radius: 50%; }
/* .nav-list no meio do seletor nao e enfeite: o botao de fechar do menu e
   um <a> que aponta para a propria pagina, entao em /assinatura/ ele casa
   com [href*="/assinatura"] e ganhava a pilula laranja e o selo 15% OFF no
   canto do cabecalho do menu. Visto no ar antes de corrigir. */
body.is-assinatura #nav-hamburger .nav-list a[href*="/assinatura"] {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 10px 0 14px;
  border-radius: 16px; background: #E8611A; color: #FFFFFF !important; font-weight: 700; box-shadow: 0 4px 0 #B4470D;
}
body.is-assinatura #nav-hamburger .nav-list a[href*="/assinatura"]::after {
  content: "15% OFF"; padding: 5px 10px; border-radius: 999px; background: #FFFFFF; color: #B33F0A;
  font: 900 12.5px/1 'Satoshi', system-ui, sans-serif; letter-spacing: .01em; text-transform: none;
}

/* ---------- Rodape ---------- */
/* Boleto e Pix saem das formas de pagamento NESTA pagina. Assinatura e
   cobranca recorrente: so cartao serve, e anunciar boleto e Pix aqui promete
   o que a assinatura nao entrega. O resto da loja segue mostrando os dois.
   O seletor usa o alt da imagem porque e o que o tema emite - os arquivos vem
   do painel, sem classe por bandeira. */
body.is-assinatura .footer-payments img[alt="boleto"],
body.is-assinatura .footer-payments img[alt="payment-method-types_pix"] { display: none !important; }

/* ---------- Breakpoints ---------- */
/* Barra fixa "15% OFF + Assinar": só no mobile (< 720px) */
.as-sticky { display: none !important; }
@media (max-width: 719.98px) {
  .as-sticky { display: block !important; }
  body.is-assinatura { padding-bottom: 80px; }
}

/* ---------- Animações ---------- */
@keyframes as-orbit { to { transform: rotate(360deg); } }
@keyframes as-orbit-rev { to { transform: rotate(-360deg); } }
@keyframes as-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
#assinatura [data-orbit] { animation: as-orbit 72s linear infinite; }
#assinatura [data-orbit-item] { animation: as-orbit-rev 72s linear infinite; }
#assinatura [data-bob] { animation: as-bob 4.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #assinatura [data-orbit], #assinatura [data-orbit-item], #assinatura [data-bob] { animation: none !important; }
}

/* ---------- Hover (só em dispositivos com mouse) ---------- */
@media (hover: hover) {
  #assinatura .as-i1:hover { transform:translateY(-2px) !important; background:#DE5713 !important; box-shadow:0 22px 36px -16px rgba(232,97,26,.9) !important; color:#FFFFFF !important }
  #assinatura .as-i2:hover { color:#C8490C !important; text-decoration-color:#C8490C !important }
  #assinatura .as-i3:hover { transform:translateY(-2px) !important; color:#B33F0A !important }
  #assinatura .as-i4:hover { transform:translateY(-1px) !important; background:#DE5713 !important; color:#FFFFFF !important }
  #assinatura .as-i5:hover { transform:translateY(-1px) !important; background:#DE5713 !important; color:#FFFFFF !important }
  #assinatura .as-i6:hover { transform:translateY(-1px) !important; background:#DE5713 !important; color:#FFFFFF !important }
  #assinatura .as-i7:hover { transform:translateY(-1px) !important; background:#DE5713 !important; color:#FFFFFF !important }
  #assinatura .as-i8:hover { color:#8F3208 !important }
}

/* ---------- Active (toque/clique) ---------- */
#assinatura .as-i1:active { transform:translateY(1px) scale(.99) !important }
#assinatura .as-i3:active { transform:translateY(1px) scale(.99) !important }
#assinatura .as-i4:active { transform:translateY(1px) !important }
#assinatura .as-i5:active { transform:translateY(1px) !important }
#assinatura .as-i6:active { transform:translateY(1px) !important }
#assinatura .as-i7:active { transform:translateY(1px) !important }
#assinatura .as-i9:active { transform:translateY(1px) !important }