/* Base: desktop. Mobile só via @media (max-width: ...). */
.wplc-live {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px;
    align-items: start;
}

.wplc-player {
    position: relative;
    background: #000;
    aspect-ratio: 16 / 9;
    /* Sem isso, dois toques rápidos num <div> genérico (a overlay do
       YouTube abaixo é exatamente isso) podem virar o gesto nativo de
       zoom por duplo-toque no mobile — o navegador "engole" o segundo
       toque antes dele virar um segundo evento click, e a detecção de
       curtida em live-bag.js (que só compara timestamp entre clicks,
       sem touchstart/touchend próprio) nunca dispara. manipulation
       desliga zoom-por-toque e o delay de ~300ms do click sintético. */
    touch-action: manipulation;
}

.wplc-player video,
.wplc-player .wplc-fake-video,
.wplc-player .wplc-youtube-embed {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
    border-radius: 0.81vw;
}

/* Placeholder animado quando não há URL de vídeo resolvida ainda pra live
   (ver includes/class-render.php) — nunca aparece com vídeo real
   configurado. Não é aspect-ratio próprio: preenche o .wplc-player
   existente (16:9), qualquer que seja o tamanho definido lá. */
.wplc-fake-video {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 18% 12%, #1b1030, transparent 60%),
        radial-gradient(110% 90% at 85% 30%, #0d1b2b, transparent 55%),
        radial-gradient(140% 100% at 50% 100%, #1a2b1f, transparent 60%),
        #0a0b0d;
    background-size: 180% 180%;
    animation: wplc-fake-video-drift 18s ease-in-out infinite;
}

@keyframes wplc-fake-video-drift {

    0%,
    100% {
        background-position: 0% 0%, 100% 20%, 50% 100%;
    }

    50% {
        background-position: 30% 20%, 70% 60%, 60% 80%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wplc-fake-video {
        animation: none;
    }
}

.wplc-fake-video-caption {
    margin: 0 0 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
}

.wplc-player-msg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin: 0;
    z-index: 1;
}

/* "Já voltamos" — por cima do vídeo de verdade (diferente de .wplc-fake-video
   sozinho, que SUBSTITUI o vídeo quando não há URL nenhuma configurada).
   O wrapper não define `display` nenhum de propósito: deixa o atributo
   `hidden` nativo mandar sozinho (display:none) sem entrar em conflito de
   especificidade — mesmo cuidado já tomado em .wplc-bag-panel. */
.wplc-player-pause-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.wplc-player-pause-overlay .wplc-fake-video {
    width: 100%;
    height: 100%;
}



/* Camada transparente SEMPRE presente por cima do iframe do YouTube — dois
   motivos, não um só:
   1) Captura o clique pro duplo-toque de curtir (live-bag.js escuta click
      em .wplc-player, mas o clique nunca sai de dentro de um iframe de
      outra origem — sem esta camada, tocar duas vezes no vídeo do YouTube
      não curtia nada, o clique morria lá dentro). Com ela, o clique
      acontece nesta div (nosso DOM, mesma origem) e borbulha normal.
   2) Faixas de desfoque/escurecimento de cima/baixo, cobrindo onde o
      canal/logo do YouTube aparecem. SEMPRE ativas agora, não mais só
      durante "buffering" — depender do estado do player (onStateChange)
      se mostrou pouco confiável na prática (o momento em que o YouTube
      mostra/esconde a própria UI não bate exatamente com as transições de
      estado que a API expõe, então as faixas ora sumiam cedo demais, ora
      nem apareciam). Como a exigência é NUNCA deixar vazar nada do
      YouTube, ficar sempre ligado é o único jeito confiável. O DESFOQUE
      fica 100% forte a faixa inteira (garante ilegível o que tiver por
      baixo); só o ESCURECIMENTO por cima esmaece gradualmente até
      transparente perto do vídeo limpo, pro efeito de "emergir" suave em
      vez de um corte reto. Generosas de propósito (32%/28% da altura). */
.wplc-youtube-buffering-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
    /* Mesmo motivo do .wplc-player acima — esta é a superfície tocável de
       verdade quando o provedor é YouTube (não tem <video> nativo por
       baixo reagindo a nada), então reforçar aqui também. */
    touch-action: manipulation;
}

.wplc-youtube-buffering-overlay::before,
.wplc-youtube-buffering-overlay::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    /*backdrop-filter: blur(28px);*/
    /*-webkit-backdrop-filter: blur(28px);*/
}

.wplc-youtube-buffering-overlay::before {
    top: 0;
    height: 32%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
}

.wplc-youtube-buffering-overlay::after {
    bottom: 0;
    height: 28%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
}

/* Botão "toque para assistir" — some por padrão ([hidden]), live-youtube.js
   revela quando detecta que o autoplay não conseguiu iniciar sozinho.
   z-index acima do overlay de buffering (1) e do próprio player, centrado
   sobre o vídeo, bem visível de propósito (diferente do botão de som, que
   é discreto no canto — aqui é a única forma de a live começar a tocar). */
.wplc-youtube-tap-to-play {
    position: absolute;
    inset: 0;
    z-index: 3;
    margin: auto;
    width: fit-content;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    border: none;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    cursor: pointer;
}

.wplc-youtube-tap-to-play[hidden] {
    display: none;
}

.wplc-youtube-tap-to-play span {
    font-size: 14px;
    font-weight: 600;
}

.wplc-quality-selector {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    background: rgba(0, 0, 0, 0.7);
    padding: 4px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wplc-quality-label {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: default;
    user-select: none;
}

.wplc-quality-selector select {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    padding: 2px 4px;
    font-size: 12px;
    cursor: pointer;
}

/* Card do produto SOBREPOSTO no vídeo (canto inferior esquerdo), não um
   bloco separado na página — estilo Shopee Live/TikTok Shop. */
.wplc-product-overlay {
    position: absolute;
    left: 12px;
    bottom: 12px;
    /* % em vez de px fixo — acompanha a largura real do .wplc-player em
       qualquer tamanho de tela, não trava num valor que só fazia sentido
       pra uma largura de referência específica. */
    max-width: 45%;
    z-index: 2;
}

.wplc-product-overlay:empty {
    display: none;
}

/* Botão de curtir SOBREPOSTO no vídeo (canto inferior direito, simétrico ao
   card de produto do outro lado) — sempre ativo, logado ou não. */
.wplc-like-button {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
}

.wplc-like-button:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* Botão de ativar/silenciar som SOBREPOSTO no vídeo (canto superior
   direito) — só existe quando o provedor é YouTube (ver class-render.php),
   controls=0 tira o botão de volume nativo, então sem este aqui o vídeo
   ficaria mudo pra sempre (ver assets/js/live-youtube.js). Ao lado de
   .wplc-exit-live (right:12px) — sem isso os dois colidiriam no mesmo
   canto. */
.wplc-youtube-mute-toggle {
    position: absolute;
    top: 12px;
    right: 52px;
    /* 12 (exit-live) + 32 (largura do exit-live) + 8 (respiro) — right
       fica fixo mesmo com a largura do próprio botão maior abaixo (right
       define a borda direita, não depende da própria largura). */
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44px: tamanho mínimo de área de toque recomendado (WCAG) — o
       círculo original de 32px era pequeno demais pra quem não sabe
       procurar o controle de som. Só enquanto está mudo (ver a regra
       [data-muted="0"] abaixo) — depois de ativar o som, volta ao
       tamanho discreto original: o destaque maior só faz sentido
       enquanto o botão ainda precisa ser encontrado. */
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    transition: width 0.25s ease, height 0.25s ease;
    /* Pulso sutil enquanto o vídeo está mudo, pra chamar atenção de quem
       não reconheceria o ícone sozinho — some assim que ativa o som
       (setMutedState() troca data-muted pra "0" em live-youtube.js). */
    animation: wplc-mute-pulse 2.2s ease-in-out infinite;
}

.wplc-youtube-mute-toggle[data-muted="0"] {
    width: 32px;
    height: 32px;
    animation: none;
}

@keyframes wplc-mute-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); }
    50% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
}

.wplc-youtube-mute-toggle:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* Balão de texto ao lado do botão — reforço pra quem não reconhece o
   ícone de volume cortado como "toque aqui". Some junto com o pulso
   assim que o som é ativado. */
.wplc-youtube-mute-hint {
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    margin-right: 8px;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 12px;
    line-height: 1.2;
    padding: 6px 10px;
    border-radius: 999px;
}

.wplc-youtube-mute-toggle[data-muted="0"] .wplc-youtube-mute-hint {
    display: none;
}

/* Sair da live — canto superior direito do vídeo. Escondido por padrão:
   o shortcode embutido numa página normal já tem a navegação do próprio
   site ao redor, não precisa disto. live-immersive.css troca pra
   display:flex só na página dedicada /live, onde o "modo cinema" esconde
   cabeçalho/rodapé do tema (ver comentário lá) e este é o único jeito do
   visitante sair. */
.wplc-exit-live {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    text-decoration: none;
}

.wplc-exit-live:hover {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}

.wplc-like-button:active .wplc-like-icon {
    transform: scale(1.25);
}

.wplc-like-icon {
    color: #ff4d67;
    font-size: 16px;
    line-height: 1;
    transition: transform 0.15s ease;
}

.wplc-like-count {
    font-size: 13px;
    font-weight: 600;
}

/* Coração do duplo-tap no vídeo (live-bag.js) — posicionado em pixels
   relativos a .wplc-player (que já é position:relative), some sozinho. */
.wplc-heart-burst {
    position: absolute;
    z-index: 5;
    transform: translate(-50%, -50%) scale(0.4);
    color: #ff4d67;
    font-size: 64px;
    pointer-events: none;
    animation: wplc-heart-burst 0.9s ease-out forwards;
}

@keyframes wplc-heart-burst {
    0% {
        transform: translate(-50%, -50%) scale(0.4);
        opacity: 0;
    }

    25% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -60%) scale(1);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wplc-heart-burst {
        animation: none;
        opacity: 0;
    }
}

.wplc-product-card-inner {
    display: flex;
    gap: 10px;
    border-radius: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.97);
    /*box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.25);*/
    border: 2px solid transparent;
    cursor: pointer;
}

/* Card com promoção ativa — friso dourado (mesma paleta do painel de
   detalhe em modo live, ver .wplc-product-detail-pix-badge--live em
   live-checkout.css) em vez do vermelho sólido de antes; a faixa
   .wplc-product-ribbon é quem carrega o alerta visual agora, o cartão
   inteiro não precisa mais gritar sozinho. Vale pros dois cards (sacola,
   render_html(), e fixado, render_promo_card_html()) — position:relative
   é só pra ancorar a faixa nos dois. */
.wplc-product-card-inner--promo {
    position: relative;
    /* A base .wplc-product-card-inner é display:flex SEM flex-wrap (row,
       nowrap) — certo pro card normal (só a imagem + a coluna de info
       lado a lado), mas .wplc-product-top-badges (abaixo) precisa poder
       quebrar pra próxima linha em vez de espremer ao lado da imagem;
       flex-basis:100% nela + wrap aqui é o que empurra o resto do card
       pra baixo dela. */
    flex-wrap: wrap;
    /* SEM borda de propósito (a base .wplc-product-card-inner tem border:
       2px solid transparent) — um contorno dourado bem no canto onde a
       faixa .wplc-product-ribbon fica sobreposta, somado à sombra dela,
       criava a ilusão de um segundo elemento "abraçando" o card. Só a
       sombra abaixo já basta pra destacar o card sem esse efeito. */
    border-color: transparent;
    background: #fffdf7;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}

/* Fileira dos selos de cima (faixa/frete/cronômetro) — card da SACOLA em
   promoção (render_html()). EM FLUXO normal (não position:absolute cada
   um por si, ver override logo abaixo) de propósito: com até 3 badges de
   tamanhos bem diferentes (o do cronômetro é o mais longo dos três,
   "⏱ 00:00:00 CORRA!!!"), empilhar cada um com offset fixo furava o nome
   do produto sempre que o mais comprido entrava. Uma fileira flex-wrap de
   verdade resolve de vez: cresce sozinha e empurra o resto do card pra
   baixo sozinha, sem precisar recalcular nada aqui se um selo mudar de
   tamanho ou algum entrar/sair. */
.wplc-product-top-badges {
    /* flex:0 0 100% (não width:100%, que sozinho não força quebra de
       linha) — reivindica a linha INTEIRA dentro do .wplc-product-card-
       inner--promo (flex-wrap:wrap, ver acima), o que empurra a .row de
       imagem+info pra próxima linha automaticamente. */
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.wplc-product-top-badges .wplc-product-ribbon,
.wplc-product-top-badges .wplc-product-shipping-tag,
.wplc-product-top-badges .wplc-promo-countdown--top {
    position: static;
}

/* Trava o tamanho do badgezinho do cronômetro em QUALQUER largura —
   a regra .wplc-promo-countdown (sem --top) ganha um reforço só pra
   mobile logo abaixo (@media max-width:782px) pra ficar bem visível
   quando aparece sozinho; mas --top é a classe extra que ele ganha
   quando entra nessa fileira (ver WPLC_Product_Card::render_html()),
   e nessa fileira ele PRECISA ficar do tamanho da faixa/selo ao lado
   (.wplc-product-ribbon/.wplc-product-shipping-tag, ambos ~.75vw) —
   sem esta regra (mais específica, 2 classes, sempre vence o reforço
   de mobile), o texto "⏱ 00:00:00 CORRA!!!" virava enorme no mobile e
   estourava a largura do card (o "R" de CORRA cortado na borda). */
.wplc-product-top-badges .wplc-promo-countdown--top {
    font-size: .75vw;
    padding: 3px 8px;
}

/* Faixa "🔥 Promoção Relâmpago!!!" — badgezinho pequeno e estático (sem
   animação, pedido explícito), amarelo sólido, texto escuro pro
   contraste (branco em cima de amarelo não lê bem). Canto DIREITO — o
   selo de frete grátis (.wplc-product-shipping-tag, logo abaixo) usa o
   mesmo tratamento no canto ESQUERDO, pra quando os dois aparecem juntos
   não colidirem. Sem borda no card (.wplc-product-card-inner--promo) de
   propósito: uma borda dourada bem nesse canto, somada à sombra da
   faixa, criava a ilusão de um segundo elemento "abraçando" o card. -6px
   (não mais) de propósito: o card fixado pode ser o primeiro/único item
   dentro de .wplc-bag-list, que tem overflow-y:auto (implicitamente
   também overflow-x:auto, regra do próprio CSS) — um offset maior corta
   o topo da faixa contra o scroll. */
.wplc-product-ribbon {
    position: absolute;
    top: -6px;
    right: 10px;
    display: inline-block;
    padding: 3px 7px;
    border-radius: 5px;
    background: #fff000;
    color: #362b00;
    font-size: .75vw;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Selo "🚚 Frete Grátis" — mesmo tratamento visual da faixa acima
   (.wplc-product-ribbon), só no canto OPOSTO (esquerdo), pra não colidir
   com ela quando os dois aparecem juntos (promoção com desconto E frete
   grátis marcados ao mesmo tempo). Só entra no HTML quando a promoção
   ativa da live pra esse produto tem frete grátis de verdade (ver
   WPLC_Product_Card::render_html()/render_promo_card_html()). */
.wplc-product-shipping-tag {
    position: absolute;
    top: -6px;
    left: 10px;
    display: inline-block;
    padding: 3px 7px;
    border-radius: 5px;
    background: #fff000;
    color: #362b00;
    font-size: .75vw;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.wplc-product-mini-buy--full svg {
    width: 21px;
    height: 21px;
}

/* ---------- Card FIXADO em promoção (WPLC_Product_Card::render_promo_card_html())
   ---------- Figma node-id=0-1: imagem+nome+preço numa linha (herda o
   mesmo esqueleto .wplc-product-mini-* do card mínimo sem promoção — ver
   mais abaixo), botão "Comprar" ocupando a largura toda numa linha PRÓPRIA
   embaixo — por isso troca pra flex-direction:column aqui (a base
   .wplc-product-card-inner é display:flex sem direção, ou seja row). */
.wplc-product-card-inner--overlay.wplc-product-card-inner--promo {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    /* Só este contexto precisa do espaço reservado em cima — aqui a faixa/
       selo de frete continuam sobrepostos (position:absolute) no canto,
       não numa fileira em fluxo como no card da sacola (ver
       .wplc-product-top-badges acima). */
    padding-top: 18px;
}

.wplc-product-promo-top {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.product-fixed-standard .wplc-product-mini-name {
	margin-top: 0;
}

.wplc-product-card-inner--overlay .wplc-product-mini-image img {
    width: 4vw;
    height: 4vw;
}

.wplc-product-mini-buy--full {
    justify-content: center;
    width: 100%;
    padding: 9px;
    font-size: 12px;
}

html body .wplc-live-page-wrap span.woocommerce-Price-amount.amount>bdi {
    color: #363636 !important;
}

.wplc-product-image img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background: #f2f2f2;
}

.wplc-product-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wplc-product-name {
    font-weight: 700;
    font-size: 1.1vw !important;
    line-height: 1.25;
    text-decoration: none;
    color: #222;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "De: <riscado>" do preço ANTES da promoção da live — só aparece quando
   há desconto de verdade (ver render_html(), $original_price > $price). */
.wplc-product-from {
    color: #616161;
    font-size: 11px;
}

.wplc-product-from del {
    text-decoration: line-through;
}

.wplc-product-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .2vw;
    margin: .25vw 0;
}

.wplc-badge {
    display: inline-block;
    border-radius: .4vw;
    padding: .25vw .5vw;
    font-size: .65vw;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.wplc-badge-pix {
    background: #e3efe0;
    color: #097635;
}

.wplc-product-price-pix {
    font-size: 16px;
    font-weight: 700;
    color: #097635;
    line-height: 1.2;
}

/* O número em si vem do wc_price() do WooCommerce, embrulhado num
   <bdi> — a cor verde acima (na span de fora) nunca chega nele por
   causa da regra html body .wplc-live-page-wrap span.woocommerce-
   Price-amount.amount>bdi (mais abaixo neste arquivo, !important,
   pensada como "cor padrão" dos preços da live), que teria prioridade
   sobre a regra acima por especificidade. Mesmo truque já usado em
   .wplc-product-daily/.wplc-product-from logo abaixo: repete a mesma
   cadeia de ancestrais + a classe daqui no meio, pra ficar mais
   específica que a regra padrão. */
html body .wplc-live-page-wrap .wplc-product-price-pix span.woocommerce-Price-amount.amount>bdi {
    color: #097635 !important;
}

.wplc-product-price-label {
    font-size: 10px;
    font-weight: 400;
    color: #363636;
}

.wplc-product-price-installment {
    font-size: 11px;
    color: #363636;
    line-height: 1.3;
}

/* Coluna do meio (col-1) entre pix e parcelamento: "ou" centralizado
   verticalmente, com uma linha em cima e outra embaixo (mesmo truque do
   divisor horizontal do painel de detalhe, só que girado — ::before/::after
   como barras verticais de largura 1px em vez de horizontais de altura
   1px). .row do Bootstrap já estica as colunas (align-items:stretch),
   então height:100% aqui acompanha a coluna mais alta ao lado. */
.wplc-product-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: .25vw;
    color: #363636;
    font-size: .5vw;
    font-weight: 600;
}

.wplc-product-divider::before,
.wplc-product-divider::after {
    content: '';
    flex: 1;
    width: .1vw;
    background: #ddd;
}

.wplc-product-daily {
    margin: .25vw 0 0;
    font-size: .67vw;
    padding: .2vw .4vw;
    border-radius: .5vw;
    font-weight: 600;
    color: #157916;
    background: #e3efe0;
    display: inline-block;
}

.wplc-promo-countdown {
    margin: auto;
    font-size: 1vw;
    padding: .4vw 0.2vw .4vw;
    border-radius: .25vw;
    font-weight: 600;
    display: inline-block;
    background: #d63638;
    color: #fff;
    font-weight: 700;
    width: auto;
}

.wplc-promo-countdown::before {
    content: '⏱ ';
}

.wplc-promo-countdown:empty {
    display: none;
}

/* Badgezinho (não mais a barra cheia de antes) — card da SACOLA em
   promoção (render_html()), não o fixado sobre o vídeo (esse continua
   com a pill pequena de sempre, ao lado do preço). Tentei deixar esse
   também sobreposto num canto do card, igual .wplc-product-ribbon/
   .wplc-product-shipping-tag, mas os dois cantos de baixo já são
   ocupados pelo selo ANVISA e pelo botão "Comprar" (esse card tem mais
   coisa que os outros dois contextos) — sem canto livre, fica em fluxo
   normal mesmo, só pequeno como um badge em vez de esticado. Mesma cor
   vermelha de sempre pra sinalizar urgência. */
.wplc-promo-countdown--top {
    position: absolute;
    top: 20px;
    left: 10px;
    display: inline-block;
    padding: 3px 8px;
    border-radius: 5px;
    background: #d63638;
    color: #fff;
    font-size: .75vw;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

body.page-template-wplc-live-page-php .wplc-product-daily .woocommerce-Price-amount.amount bdi {
    color: #157916 !important;
}

.wplc-product-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.wplc-product-anvisa {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: .65vw;
    line-height: 1.2;
    color: #666;
    text-align: center;
    background: #f0f0f0;
    border-radius: .4vw;
    padding: .2vw .5vw;
    white-space: nowrap;
}

/* Logo do selo ANVISA (build() só cola quando o produto tem o meta
   marcado e a live tem a imagem cadastrada, ver anvisa_badge_image_html())
   — empilhada ACIMA do texto "Regulamentado/ANVISA" dentro do mesmo
   badge, por isso .wplc-product-anvisa vira coluna flex acima. Só
   aparece durante promoção ativa (pedido do Figma) — sem promoção o
   footer continua só com o texto, como sempre. */
.wplc-product-anvisa-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto 2px;
    max-width: 80px;
}

/* ---------- Card FIXADO sobre o vídeo (WPLC_Product_Card::render_featured_html())
   ---------- Deliberadamente minúsculo — padrão TikTok/Shopee Live, não a
   vitrine completa da sacola. Nenhuma classe daqui é usada pelo card da
   sacola (render_html()) — mexer aqui nunca afeta lá, e vice-versa.
   --compact sobrescreve o padding/gap herdados da regra base
   .wplc-product-card-inner (linha ~325 acima), que continua sendo usada
   como esqueleto comum aos dois (fundo, cantos arredondados, cursor). */
.wplc-product-card-inner--compact {
    align-items: center;
    padding: 6px;
    gap: 8px;
}

.wplc-product-mini-image img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    background: #f2f2f2;
}

.wplc-product-mini-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.wplc-product-mini-name {
    font-size: 1.25vw;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1vw;
}

.wplc-product-mini-price {
    font-size: 13px;
    font-weight: 700;
    color: #157916;
}

/* Mesmo caso de .wplc-product-price-pix acima — sem isso o preço do
   card fixado (compacto e em promoção, os dois usam esta classe)
   ficava cinza-escuro em vez de verde. */
html body .wplc-live-page-wrap .wplc-product-mini-price span.woocommerce-Price-amount.amount>bdi {
    color: #157916 !important;
}

/* "De: <riscado>" — só aparece com promoção ativa (ver render_featured_html(),
   $original_price > $price). */
.wplc-product-mini-from {
    font-size: 10px;
    color: #999;
}

html body .wplc-live-page-wrap .wplc-product-from span.woocommerce-Price-amount.amount>bdi {
    color: #616161 !important;
}

.wplc-product-mini-from del {
    text-decoration: line-through;
}

.wplc-product-mini-buy {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #159615;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.wplc-product-mini-buy:hover {
    background: #128a12;
    color: #fff;
}

/* Preço "De: <riscado> Por: <destaque>" de uma promoção da live (ver
   WPLC_Product_Card::promotional_price_html()) — só aparece nesse
   formato quando há promoção ativa; produto sem promoção continua
   mostrando o price_html normal do WooCommerce, sem nenhuma dessas
   classes. */
.wplc-promo-price {
    display: block;
}

.wplc-promo-from {
    color: #999;
    font-size: 11px;
}

.wplc-promo-from del {
    text-decoration: line-through;
}

.wplc-promo-to {
    font-weight: 700;
    color: #157916;
}

.wplc-promo-to ins {
    text-decoration: none;
}

/* Cronômetro em tempo real (live-promo-countdown.js escreve o texto,
   contando segundo a segundo — o data-ends-at só carrega o dado bruto,
   um valor calculado no servidor ficaria desatualizado na hora). */
/* Selo de alerta — fundo sólido (não mais rosa claro) pra chamar mais
   atenção, mesmo vermelho da borda do card em promoção
   (.wplc-product-card-inner--promo), reforçando a mesma mensagem de
   urgência em vez de duas cores concorrendo. Ícone via ::before (não
   innerHTML no JS) porque live-promo-countdown.js escreve o texto com
   textContent — ::before soma sem precisar mexer no script. */

.wplc-product-open {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 6px;
    background: #159615;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

.wplc-product-open:hover {
    background: #128a12;
    color: #fff;
}

.wplc-chat {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 70vh;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.wplc-chat-messages {
    flex: 1;
    overflow-y: auto;
    margin: 0;
    padding: 8px;
    list-style: none;
}

.wplc-chat-messages li {
    position: relative;
    margin-bottom: 6px;
    padding-right: 20px;
    word-break: break-word;
}

/* Só aparece pro operador (única perspectiva que recebe showHiddenBadge
   true) — fundo na linha inteira, não só o texto pequeno do selo abaixo:
   numa lista longa, o selo sozinho passava despercebido. */
.wplc-chat-messages li.wplc-chat-message-hidden {
    padding: 4px 20px 4px 6px;
    border-radius: 4px;
    background: #fdecef;
}

/* Linha de sistema ("Fulano entrou na live") — sem autor/menu, de
   propósito visualmente apagada em relação à bolha de mensagem normal,
   pra não competir com o que as pessoas realmente escreveram. */
.wplc-chat-messages li.wplc-chat-system {
    padding-right: 0;
    text-align: center;
}

.wplc-chat-system-text {
    font-size: 12px;
    font-style: italic;
    color: #999;
}

.wplc-chat-author {
    font-weight: 600;
    margin-right: 4px;
}

/* Selo de conta oficial ("Produção") — visível pra todo mundo (espectador e
   operador), não é uma marcação de moderação. */
.wplc-chat-staff-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    border-radius: 50%;
    background: #157916;
    color: #fff;
    font-size: 9px;
    line-height: 1;
    vertical-align: middle;
}

.wplc-chat-menu-wrap {
    position: absolute;
    top: 0;
    right: 0;
}

.wplc-chat-menu-toggle {
    padding: 0 4px;
    border: none;
    background: transparent;
    color: #777;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}

.wplc-chat-menu-toggle:hover {
    color: #333;
}

.wplc-chat-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    min-width: 140px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.wplc-chat-menu button {
    padding: 6px 10px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 12px;
    cursor: pointer;
}

.wplc-chat-menu button:hover {
    background: #f0f0f0;
}

.wplc-chat-menu-block,
.wplc-chat-menu-delete {
    color: #d63638;
}

/* Só aparece pro operador (a única perspectiva que recebe showHiddenBadge
   true), nunca pro espectador comum nem pro próprio remetente. */
.wplc-chat-hidden-badge {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    color: #d63638;
}

.wplc-chat-pinned:empty {
    display: none;
}

.wplc-chat-pinned-inner {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 6px 8px;
    margin: 6px;
    background: #fff8e5;
    border: 1px solid #f0d896;
    border-radius: 4px;
    font-size: 12px;
}

.wplc-chat-pinned-author {
    font-weight: 600;
    flex-shrink: 0;
}

.wplc-chat-pinned-text {
    word-break: break-word;
}

/* Só existe no DOM quando cfg.canModerate (injetado via JS, nunca vem no
   HTML do GET /chat-pin, que é público) — nunca aparece pro espectador. */
.wplc-chat-pinned-close {
    margin-left: auto;
    flex-shrink: 0;
    padding: 0 2px;
    border: none;
    background: transparent;
    color: #987b2e;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.wplc-chat-pinned-close:hover {
    color: #5c4300;
}

.wplc-chat-status {
    margin: 0;
    padding: 4px 8px;
    font-size: 12px;
    color: #777;
    min-height: 20px;
}

.wplc-chat-form {
    display: flex;
    gap: 4px;
    padding: 8px;
    border-top: 1px solid #e0e0e0;
}

.wplc-chat-input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.wplc-chat-form input {
    width: 100%;
    box-sizing: border-box;
    padding-right: 64px;
}

.wplc-chat-form input:disabled,
.wplc-chat-form button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Fica dentro do próprio campo, no canto final, e só aparece (via
   [hidden], alternado pelo live-chat.js) quando há texto digitado — o
   Enter do teclado já envia sozinho (submit nativo do form), então o
   botão é um atalho visual, não a única forma de enviar. */
.wplc-chat-send {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    border: none;
    border-radius: 999px;
    background: #157916;
    color: #fff;
    padding: 5px 12px;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
}

.wplc-chat-login-link {
    flex: 1;
    text-align: center;
    padding: 6px 0;
    font-size: 13px;
    color: #157916;
    text-decoration: none;
}

.wplc-chat-login-link:hover {
    text-decoration: underline;
}

/* Sacola/compartilhar/curtir, ao lado do campo de mensagem e do "Enviar"
   — .wplc-chat-form já é display:flex, então só entram na mesma linha. */
.wplc-action-btn {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #f0f0f0;
    color: #333;
    font-size: 15px;
    cursor: pointer;
}

.wplc-action-btn:hover {
    background: #e2e2e2;
}

.wplc-action-btn.wplc-like-trigger:active {
    transform: scale(1.15);
}

/* Painel da sacola (todos os produtos da live, não só o em destaque) —
   fixed cobrindo a parte de baixo da tela, funciona igual em qualquer
   contexto (shortcode solto, console do operador, /live imersiva), sem
   precisar de position:relative num ancestral específico.

   :not([hidden]) de propósito: display:flex incondicional aqui bateria de
   frente com o atributo `hidden` nativo (que o JS alterna direto,
   ver live-bag.js) — a regra da UA (`[hidden]{display:none}`) tem
   especificidade baixa e perde pra qualquer `display` declarado por CSS
   de autor sem esse guard. */
.wplc-bag-panel:not([hidden]) {
    display: flex;
    flex-direction: column;
}

.wplc-bag-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    max-height: 70vh;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
}

.wplc-bag-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    flex-shrink: 0;
}

.wplc-bag-panel-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wplc-bag-cart-btn:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wplc-bag-cart-btn {
    position: relative;
    border: none;
    background: transparent;
    color: #363636;
    cursor: pointer;
    padding: 2px;
}

.wplc-bag-cart-count {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--opt-color-green-medium, #159615);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.wplc-bag-close {
    border: none;
    background: transparent;
    color: #777;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.wplc-bag-list {
    margin: 0;
    padding: 8px 12px 16px;
    list-style: none;
    overflow-y: auto;
}

.wplc-bag-list li {
    margin-bottom: 8px;
}

.wplc-bag-list li:last-child {
    margin-bottom: 0;
}

.wplc-bag-empty {
    padding: 24px 0;
    text-align: center;
    color: #777;
    font-size: 13px;
}

@media (max-width: 782px) {
    .wplc-live {
        grid-template-columns: 1fr;
    }

    .wplc-live-page-wrap>p {
        text-align: center;
        font-weight: 700;
        color: #fff;
        border-radius: 0!important;
        margin: 0!important;
        background: #d63638;
        padding: 8px;
    }

    .wplc-product-top-badges .wplc-promo-countdown--top {
        font-size: 2.75vw;
        padding: 3px 8px;
    }

    .wplc-product-name {
        font-size: 4.1vw !important;
    }

    .wplc-bag-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid #e0e0e0;
        font-weight: 600;
        flex-shrink: 0;
        font-size: 5vw;
        color: var(--opt-color-green-dark) !important;
    }

    .wplc-product-footer {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 4px;
        padding: 0 0 !important;
    }

    .wplc-chat {
        max-height: 50vh;
    }

    .wplc-product-card-inner--overlay .wplc-product-mini-image img {
        width: 14vw;
        height: 14vw;
    }

    .wplc-product-mini-name {
        font-size: 4.25vw;
        font-weight: 600;
        color: #222;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 1vw;
    }

    .wplc-chat-status {
        margin: 5vw 0;
        padding: 4px 8px;
        font-size: 12px;
        color: #777;
        min-height: 20px;
    }

    .wplc-product-shipping-tag {
        position: absolute;
        top: -6px;
        left: 10px;
        display: inline-block;
        padding: 3px 7px;
        border-radius: 5px;
        background: #fff000;
        color: #362b00;
        font-size: 3.75vw;
        font-weight: 800;
        line-height: 1.3;
        white-space: nowrap;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .wplc-promo-countdown {
        margin: 0 0 0 auto !important;
        font-size: 3vw;
        padding: 1.2vw 1.2vw 1.2vw !important;
        border-radius: 2vw;
        display: inline-block;
    }
}