/* "Modo cinema": só na página dedicada /live (body.page-template-
   wplc-live-page-php, classe que o próprio WordPress adiciona a partir
   do _wp_page_template — não afeta o shortcode [wplc_live] usado solto
   em outro conteúdo, nem o painel do operador, que tem seu próprio
   override em admin/css/admin/console.css). Objetivo: fullscreen de
   verdade, tipo TikTok Live Shopping — nada do cromo do tema disputando
   atenção com o vídeo, vídeo dominando a tela inteira.

   Decisão revista em 2026-08-12 (a pedido explícito): a versão anterior só
   reduzia o espaço do cabeçalho/rodapé sem escondê-los; agora eles somem
   de vez nesta página. Continuam carregados no DOM (get_header()/
   get_footer() seguem sendo chamados no template, ver templates/live-
   page.php — carrinho, busca, menu mobile e wp_footer()/scripts de
   tracking continuam funcionando por baixo, só a exibição visual muda) —
   decisão consciente: mais fácil de reverter (troca de display) do que
   remover as chamadas do template, e nada que dependa desses elementos
   existirem quebra. `#minicart`/`#offcanvas-header` nem precisam de regra
   própria: já ficam fora da tela por padrão (offcanvas do Bootstrap) e
   nenhum JS do tema os abre sozinho em reação a adicionar/remover item do
   carrinho (conferido: nenhum listener de added_to_cart no tema) — o
   carrinho nativo simplesmente não aparece na live, por isso não precisa
   de botão pra ele.

   Layout mobile (≤900px, a maior parte deste arquivo): coluna única
   vertical, 9:16 (retrato), com o chat SOBREPOSTO no vídeo — pedido em
   2026-08-13: as mensagens ficam logo ACIMA do card de produto fixado
   (não no topo absoluto da tela — tentativa anterior, corrigida a
   pedido do usuário), com produto/curtir/campo de digitar continuando
   agrupados perto da base do vídeo; sem produto fixado, a faixa cola
   direto acima do botão de curtir (ver o `:has()` em .wplc-chat-messages
   abaixo, junto com o fix de um flex:1 que jogava as mensagens longe do
   campo de digitar). Nenhuma mudança de HTML: .wplc-chat continua sendo
   irmão de .wplc-player no DOM (ver class-render.php), só passa a ser
   posicionado por cima via position:absolute, ancorado em .wplc-live
   (position:relative).

   Layout desktop (≥901px, bloco @media no fim do arquivo): três colunas
   ocupando a tela toda — sacola sempre aberta à esquerda, vídeo 9:16 no
   centro, chat completo (não sobreposto) à direita. Também sem HTML novo,
   só flexbox com `order` reordenando os mesmos três irmãos. */

body.page-template-wplc-live-page-php #masthead,
body.page-template-wplc-live-page-php #lifeoption-footer,
body.page-template-wplc-live-page-php .site-footer,
body.page-template-wplc-live-page-php .footer-saq,
body.page-template-wplc-live-page-php .toast-container,
body.page-template-wplc-live-page-php #it-message-container {
    display: none !important;
}

body.page-template-wplc-live-page-php .wplc-live-page-wrap {
    box-sizing: border-box;
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 32px 24px 48px;
    /*background: #0b0b0d;*/
}

body.page-template-wplc-live-page-php .wplc-live {
    display: block;
    position: relative;
    width: min(100%, 420px);
    margin: 0 auto;
}

body.page-template-wplc-live-page-php .wplc-player {
    width: 100%;
    aspect-ratio: 9 / 16;
    max-height: 82vh;
    border-radius: 0.81vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Único jeito de sair do "modo cinema": cabeçalho/rodapé do tema somem
   inteiros nesta página (ver topo do arquivo), sem isto o visitante
   ficaria preso na live sem navegação nenhuma de volta pro site. */
body.page-template-wplc-live-page-php .wplc-exit-live {
    display: flex;
}

/* ORDEM (de cima pra baixo, pedido explícito): mensagens do chat > card de
   produto fixado > campo de enviar mensagem. Os três são elementos
   separados no DOM (form é FILHO de .wplc-chat, produto é filho de
   .wplc-player) então pra intercalar produto ENTRE mensagens e form, o
   form precisa escapar do fluxo de .wplc-chat via position:absolute
   próprio, com um bottom NEGATIVO que o empurra pra baixo do resto da
   caixa de chat, até a base de verdade. Matemática coordenada abaixo —
   mudar um valor exige recalcular os outros (comentado em cada um).

   Tudo em vw, não px: mesma exigência já usada no bloco desktop deste
   arquivo, só que com referência de tela MOBILE (420px = a largura máxima
   de .wplc-live aqui, não os 1728px do desktop). px ÷ 420 × 100 = vw. */
body.page-template-wplc-live-page-php .wplc-chat-form {
    position: absolute;
    left: 0;
    right: 0;
    /* -(bottom de .wplc-chat COM produto, 52.39vw, menos os 2.86vw de
       margem até a base de verdade do player) — pedido explícito: ordem
       de cima pra baixo é mensagens > card de produto > campo de
       mensagem, então o campo precisa ESCAPAR da própria caixa de
       .wplc-chat (que fica inteira acima do card) com um bottom negativo
       grande o bastante pra furar por baixo do card e pousar na base de
       verdade. Sempre que o bottom de .wplc-chat mudar, este valor tem
       que acompanhar (mesma fórmula, só troca o primeiro número).
       Medido com Chrome headless numa viewport de 420px (a mesma
       referência deste arquivo). */
    bottom: -34.53vw;
    /* -208px */
    z-index: 3;
}

/* Produto fixado: acima do campo de mensagem (18.10vw = 2.86vw do campo +
   ~13.33vw da altura dele + folga), largura inteira agora — a curtida
   saiu daqui embaixo (foi pro topo, abaixo) e não disputa mais espaço com
   ele, mesmo ajuste já feito no bloco desktop. Essa posição (bottom) do
   PRÓPRIO card não mudou — o que mudou foi o quanto o .wplc-chat (acima)
   precisa subir pra não bater nele, ver comentário lá. */
body.page-template-wplc-live-page-php .wplc-product-overlay {
    bottom: 18.10vw;
    /* 76px */
    left: 2.38vw;
    /* 10px */
    right: 2.38vw;
    max-width: none;
}

/* Curtida subiu pro canto superior ESQUERDO (mesmo pedido já feito pro
   desktop) — o direito já tem .wplc-exit-live (top:2.86vw/right:2.86vw,
   ver bloco @media max-width:900px mais abaixo). */
body.page-template-wplc-live-page-php .wplc-like-button {
    top: 2.86vw;
    /* 12px */
    bottom: auto;
    left: 2.38vw;
    right: auto;
}

/* Mensagens: acima do card de produto QUANDO ele existe (52.39vw =
   18.10vw do produto + 31.43vw da altura REAL dele hoje (132px, card
   fixado em promoção tem faixa/selo de frete + linha de imagem/nome/
   preço + linha de botão largo — ver
   WPLC_Product_Card::render_promo_card_html() — maior que os 100px do
   card mínimo sem promoção) + 2.86vw de folga — recalculado de novo
   depois do grupo de badges (faixa+frete+cronômetro) crescer uma linha;
   valores antigos (64.16vw/37.14vw/44.77vw/50.72vw) assumiam alturas
   anteriores do card, sempre menores. Medido com Chrome headless numa
   viewport de 420px, produto COM promoção ativa (pior caso, o mais
   alto). Sem produto fixado, a regra :has() mais abaixo troca esse
   bottom pra 18.10vw (só precisa pular o campo de mensagem, não tem
   produto pra pular também) — sem essa troca, mensagem e campo colidem
   visualmente (bug real visto em captura de tela: texto verde cortado
   por baixo do campo). Sem fundo sólido — a caixa flutua isolada,
   gradiente aqui viraria uma faixa visível em vez de um degradê suave
   (removido); legibilidade do texto já vem do text-shadow em
   .wplc-chat-messages li / :empty::before. justify-content:flex-end
   mantém as mensagens coladas na borda de BAIXO desta caixa — a
   transição natural pro resto da interface.

   IMPORTANTE pra quem mexer de novo: existia uma regra
   `body.page-template-wplc-live-page-php .wplc-chat { bottom: 0; }`
   dentro do @media (max-width:900px) mais abaixo neste arquivo, sem
   nenhum comentário — ela ANULAVA esta aqui (mesma especificidade,
   carregava depois), grudando o "Chat indisponível" atrás/embaixo do
   card em vez de acima dele (bug real relatado pelo usuário). Removida.
   Se o card mudar de altura de novo, só este valor aqui precisa ser
   recalculado — não recriar aquela regra. */
body.page-template-wplc-live-page-php .wplc-chat {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 37.39vw;
    /* 220px */
    z-index: 2;
    height: auto;
    max-height: 39.14vw;
    /* 240px */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: transparent;
    border: none;
    border-radius: 0;
    padding-top: 11.43vw;
    /* 48px */
}

/* .wplc-chat-messages tem flex:1 no CSS base (feito pra uma caixa de
   ALTURA FIXA — height:100% lá) — aqui a caixa é height:auto (cresce só
   até onde precisa, capado em max-height), e um item flex:1 dentro de
   uma caixa auto-height estica pra preencher o espaço disponível mesmo
   com um histórico curto (ou vazio), jogando as mensagens longe do
   campo de digitar — a causa real do espaço vazio enorme, não a posição
   da própria faixa de chat. Corrigido: não cresce além do
   próprio conteúdo (flex:0 1 auto); overflow-y:auto (herdado da regra
   base) continua garantindo rolagem interna se o histórico passar dos
   240px do .wplc-chat. */
body.page-template-wplc-live-page-php .wplc-chat-messages {
    flex: 0 1 auto;
    padding: 0 2.86vw;
    /* 12px */
}

/* Sem produto fixado: as mensagens só precisam pular o CAMPO de mensagem
   (não tem produto pra pular também) — mesmo bottom que o produto usaria
   (18.10vw), não os 37.14vw da regra acima. Bug corrigido aqui: a versão
   anterior usava 24px (~5.71vw), pouco pra sobrar da altura real do
   campo — mensagem/campo colidiam visualmente (captura de tela mostrou
   texto cortado por baixo do campo). O campo em si continua fixo em
   2.86vw sempre (regra lá em cima); o -34.29vw dele precisa de um valor
   diferente aqui porque .wplc-chat mudou de bottom: -(18.10-2.86).
   .wplc-product-overlay:empty é o mesmo sinal já usado em live.css pra
   esconder o próprio card quando não há produto fixado
   (WPLC_Product_Card::build() devolve null, a div fica sem filhos). */
body.page-template-wplc-live-page-php .wplc-player:has(.wplc-product-overlay:empty)+.wplc-chat {
    bottom: 18.10vw;
    /* 76px */
}

body.page-template-wplc-live-page-php .wplc-player:has(.wplc-product-overlay:empty)+.wplc-chat .wplc-chat-form {
    bottom: -15.24vw;
    /* -64px */
}

body.page-template-wplc-live-page-php .wplc-chat-messages li {
    color: #f2f3f1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Mesmo motivo: .wplc-chat-system-text tem cor própria (span filho, não
   herda o li acima), cinza-escura demais sobre o vídeo/scrim. */
body.page-template-wplc-live-page-php .wplc-chat-system-text {
    color: #3d3d3d;
    /*text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);*/
}

body.page-template-wplc-live-page-php .wplc-chat-author {
    color: #7dd88a;
}

body.page-template-wplc-live-page-php .wplc-chat-status {
    padding: 0 12px;
    color: #c7c9c5;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

body.page-template-wplc-live-page-php .wplc-chat-pinned-inner {
    margin: 6px 12px;
    background: rgba(42, 35, 6, 0.85);
    border-color: #4a3d10;
    color: #e7e7ea;
    backdrop-filter: blur(4px);
}

/* Campo de mensagem: pílula translúcida flutuando sobre o vídeo, não uma
   barra sólida — o vídeo continua visível atrás dela. */
body.page-template-wplc-live-page-php .wplc-chat-form {
    padding: 8px 12px 12px;
    background: transparent;
    border-top: none;
}

body.page-template-wplc-live-page-php .wplc-chat-form input {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #f2f3f1;
    border-radius: 999px;
    padding: 8px 14px;
    padding-right: 70px;
    backdrop-filter: blur(4px);
}

body.page-template-wplc-live-page-php .wplc-chat-form input::placeholder {
    color: #d3d5d1;
}

body.page-template-wplc-live-page-php .wplc-chat-form button {
    border-radius: 999px;
}

/* Botão "Enviar" embutido no campo (canto final) — precisa de fundo
   sólido pra não sumir contra o vidro fosco do input, diferente dos
   .wplc-action-btn (bag/share/curtir), que ficam translúcidos porque
   sobrepõem o vídeo, não um campo já translúcido. */
body.page-template-wplc-live-page-php .wplc-chat-send {
    background: #157916;
    color: #fff;
}

body.page-template-wplc-live-page-php .wplc-chat-login-link {
    color: #157916;
    /*text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);*/
}

/* Sacola/compartilhar/curtir ao lado do campo — círculos translúcidos,
   mesmo tratamento visual do campo de mensagem (vidro fosco sobre o
   vídeo), não os botões cinza sólidos da versão clara/console. */
body.page-template-wplc-live-page-php .wplc-action-btn {
    background: rgba(255, 255, 255, 0.14);
    color: #f2f3f1;
    backdrop-filter: blur(4px);
}

body.page-template-wplc-live-page-php .wplc-action-btn:hover {
    background: rgba(255, 255, 255, 0.24);
}

/* Painel da sacola: centralizado na mesma largura do "phone frame"
   (.wplc-live), não a largura inteira do viewport — mesmo truque de
   left:50%+transform que .wplc-live-page-wrap não precisa (ele É o
   viewport), mas aqui o painel é position:fixed, então precisa recentrar
   sozinho. */
body.page-template-wplc-live-page-php .wplc-bag-panel {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(100%, 420px);
    /*background: #16171a;*/
    border: 1px solid #2a2b2f;
    border-bottom: none;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5);
}

body.page-template-wplc-live-page-php .wplc-bag-panel-header {
    border-bottom-color: #c5c7d0;
    color: #363636;
}

body.page-template-wplc-live-page-php .wplc-bag-close {
    color: #363636;
}

body.page-template-wplc-live-page-php .wplc-bag-empty {
    color: #363636;
}

@media screen and (max-width: 900px) {

    /* Sem padding nenhum, vídeo cobrindo a tela toda de verdade — igual
       app de live shopping, não uma "janela" de vídeo dentro da página.
       100dvh (não 100vh): em navegador mobile, 100vh inclui a área atrás
       da barra de endereço, que empurra conteúdo pra fora da tela visível;
       dvh acompanha a altura visível de verdade, contraindo/expandindo
       com a barra do navegador. */
    body.page-template-wplc-live-page-php .wplc-live-page-wrap {
        padding: 0;
    }

    body.page-template-wplc-live-page-php .wplc-live {
        width: 100%;
        height: 100vh;
        height: 100dvh;
    }

    body.page-template-wplc-live-page-php .wplc-player {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        max-height: none;
        border-radius: 0;
        box-shadow: none;
    }

    /* height:100% (acima/abaixo) deveria bastar em teoria — porcentagem
       resolvida em cima de .wplc-live, que já é 100dvh — mas depender só
       da cascata é frágil demais aqui: <iframe> (.wplc-youtube-embed) tem
       histórico real no WebKit/iOS de não re-fluir de forma confiável só
       porque a barra do Safari entrou/saiu (sem resize/troca de
       orientação de verdade), ficando com a caixa antiga até um reflow
       "de verdade" acontecer. Fixando 100dvh direto aqui também, sem
       depender só do que .wplc-player calculou. */
    body.page-template-wplc-live-page-php .wplc-player video,
    body.page-template-wplc-live-page-php .wplc-player .wplc-fake-video,
    body.page-template-wplc-live-page-php .wplc-player .wplc-youtube-embed {
        height: 100vh;
        height: 100dvh;
    }

    /* Referência mobile (420px = largura máx. de .wplc-live): px ÷ 420 × 100 = vw. */
    body.page-template-wplc-live-page-php .wplc-exit-live {
        top: 2.86vw;
        /* 12px */
        right: 2.86vw;
        width: 7.62vw;
        /* 32px */
        height: 7.62vw;
    }

    .wplc-product-daily {
        margin: 1vw 0 0;
        font-size: 2.5vw;
        padding: 1vw 2vw;
        border-radius: 1vw;
    }

    .wplc-badge {
        border-radius: 1vw;
        padding: .5vw 2vw;
        font-size: 2.5vw;
    }

    .wplc-product-divider {
        gap: 1vw;
        font-size: 2.5vw;
    }

    .wplc-product-divider::before,
    .wplc-product-divider::after {
        width: .25vw;
    }

    .wplc-product-price-installment {
        font-size: 3.5vw;
    }

    .wplc-promo-countdown {
        margin: 1vw 0 0;
        font-size: 3vw;
        padding: 2vw 4vw;
        border-radius: 5vw;
        display: inline-block;
    }

    .wplc-product-mini-image img {
        width: 20vw;
        height: 20vw;
    }

    .wplc-product-mini-name {
        margin-bottom: 2vw;
    }

    .wplc-product-mini-price {
        font-size: 4vw;
    }

    .wplc-product-mini-from {
        font-size: 3vw;
        margin-right: 1.5vw;
        color: #616161;
    }

    .wplc-product-card-inner--compact .wplc-promo-countdown {
        margin-top: 2vw;
        font-size: 3vw;
        padding: 1vw 2vw;
        width: 43vw;
        text-align: center;
    }

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

    .wplc-product-anvisa {
        font-size: 2.5vw;
        border-radius: 1vw;
        padding: 1vw 3vw;
    }

    .wplc-product-image img {
        width: 100%;
        height: auto;
    }

    .wplc-bag-list {
        padding: 1vw;
        background: #f5f5f5;
    }

    body.page-template-wplc-live-page-php .wplc-chat-system-text {
        color: #fff;
    }

    html body.page-template-wplc-live-page-php .wplc-chat-form {
        padding-bottom: 0;
    }

    body.page-template-wplc-live-page-php .wplc-chat-messages li.wplc-chat-system {
        background: #ffffff3b;
        border-radius: 10vw;
        padding: 1vw;
    }

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

    .wplc-checkout-form .woocommerce-checkout-review-order-table th:first-child, .wplc-checkout-form .woocommerce-checkout-review-order-table thead tr,
    .wplc-checkout-form .woocommerce-checkout-review-order-table th:first-child, .wplc-checkout-form .woocommerce-checkout-review-order-table tfoot tr {
        padding: 3vw !important;
        background: whitesmoke !important;
        border-radius: 1vw;
    }

    .wplc-checkout-form .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal {
        border-radius: 1vw 1vw 0 0;
    }

    .wplc-checkout-form .woocommerce-checkout-review-order-table tfoot tr.order-total {
        border-radius: 0 0 1vw 1vw;
    }

    .wplc-checkout-form .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals {
        border-radius: 0 !important;
    }

    .wplc-checkout-form .shop_table > tbody > .cart_item > .product-total {
        width: 30%;
    }

    html body .wplc-checkout-step-title {
        margin-top: 10vw;
    }

    html body.page-template-wplc-live-page-php #wplc-checkout-panel .form-row input,
    html body.page-template-wplc-live-page-php #wplc-checkout-panel .form-row select {
        font-size: 16px !important;
    }

    html body.page-template-wplc-live-page-php .wplc-chat-login-link {
        color: #fff;
    }

    body.page-template-wplc-live-page-php .wplc-youtube-mute-toggle {
        top: 2.86vw;
        right: 13vw;
        /* Fixo (não vw) enquanto mudo: 44px é a área de toque mínima
           recomendada — em vw ficava proporcionalmente MENOR que o
           próprio botão desktop na maioria dos celulares (7.62vw ≈
           28-31px em telas de 375-430px), o oposto do que se quer aqui. */
        width: 44px;
        height: 44px;
    }

    /* Depois de ativar o som, volta ao tamanho discreto original (o
       mesmo 7.62vw de antes desta mudança) — o destaque maior só faz
       sentido enquanto o botão ainda precisa ser encontrado. */
    body.page-template-wplc-live-page-php .wplc-youtube-mute-toggle[data-muted="0"] {
        width: 7.62vw;
        height: 7.62vw;
    }

    .wplc-product-top-badges .wplc-promo-countdown--top {
        font-size: 2.65vw;
    }

    body.page-template-wplc-live-page-php .wplc-chat li {
        font-size: 3.5vw !important;
        color: #fff;
        text-shadow: 0 1px 5px #000;
        font-weight: bolder;
    }

    
}

/* Desktop (>900px): em vez do "phone frame" centralizado com chat
   sobreposto, três colunas ocupando a tela toda — sacola sempre aberta à
   esquerda, vídeo 9:16 no centro, chat completo à direita. Mobile fica
   exatamente como já estava (bloco acima) — isto aqui só existe pra telas
   largas, onde sobra espaço de sobra nas laterais de um vídeo em pé.

   Continua sem HTML novo: .wplc-bag-panel, .wplc-player e .wplc-chat
   continuam os mesmos três irmãos dentro de .wplc-live — aqui eles só
   saem do empilhamento/overlay (position:fixed / position:absolute) e
   voltam a ser colunas normais lado a lado, cada um com sua largura.

   TODA medida física deste bloco (largura, altura, gap, padding, margin,
   border-radius, posição, fonte) é `vw` — pedido explícito: nada de px
   nem rem aqui, nem como "piso" de segurança (clamp()/max() já tentados
   antes viraram uma mistura de vw com rem, que era exatamente o que não
   era pra ter). Cada valor foi convertido a partir do px original usando
   uma tela de referência de 1728px (px ÷ 1728 × 100 = vw) — é só uma
   referência de cálculo, o resultado funciona em qualquer largura.
   Consequência aceita conscientemente: sem piso nenhum, texto/espaçamento
   ficam menores que o design original bem no início do breakpoint
   (~901px) — cresce a partir daí sem limite nenhum, pra cima ou pra baixo.
   As DUAS exceções, de propósito: `border: 1px solid` (contorno de 1px é
   pra continuar sendo um fio fino sempre, não pra grossar/sumir de
   subpixel) e `border-radius: 999px`/`50%` (já são "sempre totalmente
   redondo", não têm o que converter). */
@media screen and (min-width: 901px) {
    body.page-template-wplc-live-page-php .wplc-live-page-wrap {
        padding: 1.39vw;
        /* 24px */
        min-height: 100vh;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    body.page-template-wplc-live-page-php .wplc-live {
        display: flex;
        align-items: stretch;
        justify-content: center;
        gap: 0.93vw;
        /* 16px */
        width: 100%;
        /* 2.78vw = 2 × 1.39vw (o padding vertical de .wplc-live-page-wrap
           acima, em cima + embaixo) — se aquele padding mudar, este valor
           precisa acompanhar, os dois são o mesmo número por definição. */
        height: calc(100vh - 2.78vw);
        margin: 0 auto;
    }

    /* A sacola vem sempre aberta — display:flex faz questão de vencer o
       atributo `hidden` (que o botão de sacola do chat continua
       alternando, sem efeito nenhum aqui: o botão e o "×" de fechar somem
       logo abaixo, já que não têm mais nada útil pra fazer). */
    body.page-template-wplc-live-page-php .wplc-bag-panel {
        display: flex !important;
        flex-direction: column;
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none;
        order: 1;
        flex: 0 0 30vw;
        width: 30vw;
        max-height: none;
        border-radius: 0.81vw;
        background: #f5f5f5;
        border: 1px solid #c5c7d0;
        box-shadow: none;
    }

    body.page-template-wplc-live-page-php .wplc-bag-list {
        flex: 1;
        padding: 0.46vw 0.69vw 0.93vw;
        /* 8px 12px 16px */
    }

    body.page-template-wplc-live-page-php .wplc-bag-list li {
        margin-bottom: 0.46vw;
        /* 8px */
    }

    body.page-template-wplc-live-page-php .wplc-bag-panel-header {
        padding: 0.81vw 0.93vw;
        /* 14px 16px */
    }

    body.page-template-wplc-live-page-php #wplc-bag-toggle,
    body.page-template-wplc-live-page-php .wplc-bag-close {
        display: none;
    }

    /* Card de produto dentro da sacola (o mesmo HTML de sempre,
       WPLC_Product_Card::build() — nunca tinha ganhado override de
       tamanho nenhum pro desktop até agora). */
    body.page-template-wplc-live-page-php .wplc-product-card-inner {
        gap: 0.58vw;
        /* 10px */
        border-radius: 0.46vw;
        /* 8px */
        padding: 0.46vw;
        /* 8px */
    }

    body.page-template-wplc-live-page-php .wplc-product-image img {
        width: 3.24vw;
        /* 56px */
        height: 3.24vw;
        border-radius: 0.23vw;
        /* 4px */
    }

    body.page-template-wplc-live-page-php .wplc-product-price {
        margin: 0.12vw 0;
        /* 2px */
    }

    body.page-template-wplc-live-page-php .wplc-product-buy {
        margin-top: 0.23vw;
        padding: 1vw;
        font-size: 1vw !important;
    }

    /* De volta a 9:16, igual mobile — pedido explícito, revertendo a
       tentativa anterior de 16:9 (que ficava mais largo no meio, mas
       diferente do formato retrato do mobile). Sizing derivado da ALTURA
       de novo: height:100% da linha (herdando align-items:stretch de
       .wplc-live) + aspect-ratio deriva a largura sozinha — o vídeo fica
       estreito e alto, com espaço sobrando nas laterais dentro da própria
       coluna, exatamente como no mobile, só que numa tela mais larga. */
    body.page-template-wplc-live-page-php .wplc-player {
        order: 2;
        flex: 0 0 auto;
        width: auto;
        height: 100%;
        aspect-ratio: 9 / 16;
        max-height: none;
    }

    /* Sem chat sobreposto nessa largura, então o produto volta pro canto
       normal do vídeo (a versão "levantada" acima era só pra não colidir
       com a faixa de chat que só existe até 900px) — mas agora ocupando a
       largura inteira (left+right, sem max-width), já que a curtida saiu
       de aqui embaixo e não disputa mais espaço com ele. */
    body.page-template-wplc-live-page-php .wplc-product-overlay {
        bottom: 0.69vw;
        /* 12px */
        left: 0.69vw;
        right: 0.69vw;
        max-width: none;
    }

    /* Curtida subiu pro canto superior ESQUERDO (livre — o direito já tem
       sair/mudo) em vez do inferior direito, pedido explícito. */
    body.page-template-wplc-live-page-php .wplc-like-button {
        top: 0.69vw;
        /* 12px */
        bottom: auto;
        left: 0.69vw;
        right: auto;
        gap: 0.35vw;
        /* 6px */
        padding: 0.35vw 0.69vw;
        /* 6px 12px */
    }

    body.page-template-wplc-live-page-php .wplc-exit-live {
        top: 0.69vw;
        /* 12px */
        right: 0.69vw;
        width: 1.85vw;
        /* 32px */
        height: 1.85vw;
    }

    /* Chat completo, painel sólido — não mais um scrim sobre o vídeo. */
    body.page-template-wplc-live-page-php .wplc-chat {
        order: 3;
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        /* mesma lógica vw sem piso da sacola, só com uma faixa um pouco
           maior — o chat precisa de mais espaço horizontal que os cards
           da sacola pra mensagem não quebrar linha toda hora. */
        flex: 0 0 23vw;
        width: 23vw;
        max-height: none;
        /*background: #16171a;*/
        border: 1px solid #c5c7d0;
        border-radius: 0.81vw;
        /* 14px */
        padding-top: 0;
    }

    /* flex:1 de volta (a regra base do mobile, acima, zera pra flex:0 1
       auto — certo pra um scrim que não deve esticar sobre vídeo vazio,
       errado aqui: esta é uma coluna sólida de altura real, .wplc-chat-
       messages precisa preencher a coluna inteira pra rolagem interna
       funcionar). */
    body.page-template-wplc-live-page-php .wplc-chat-messages {
        flex: 1;
        padding: 1vw 0.69vw 0;
        /* 12px */
    }

    body.page-template-wplc-live-page-php .wplc-chat-messages li {
        margin-bottom: 0.35vw;
        /* 6px */
        padding-right: 1.16vw;
        /* 20px */
    }

    body.page-template-wplc-live-page-php .wplc-chat-status {
        padding: 0 0.69vw;
        /* 12px */
    }

    body.page-template-wplc-live-page-php .wplc-chat-pinned-inner {
        margin: 0.35vw;
        /* 6px */
        padding: 0.35vw 0.46vw;
        /* 6px 8px */
        border-radius: 0.23vw;
        /* 4px */
    }

    /* position:static de volta — a versão mobile/imersiva tira o campo
       do fluxo (position:absolute, bottom negativo) pra intercalar o
       card de produto entre mensagens e campo; aqui o chat é uma coluna
       sólida normal, o campo precisa continuar dentro dela no fluxo. */
    body.page-template-wplc-live-page-php .wplc-chat-form {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        gap: 0.23vw;
        /* 4px */
        padding: 0.46vw 0.69vw 0.69vw;
        /* 8px 12px 12px */
    }

    body.page-template-wplc-live-page-php .wplc-player {
        box-shadow: 0 0px 5px rgba(0, 0, 0, 0.5);
    }

    body.page-template-wplc-live-page-php .wplc-chat-messages:empty::before {
        color: #363636;
        text-shadow: unset;
    }

    body.page-template-wplc-live-page-php .wplc-chat-form input {
        padding: 0.46vw 0.81vw;
        /* 8px 14px */
        padding-right: 4.05vw;
        border-color: #363636;
        color: #363636;
        /* 70px, espaço pro botão "Enviar" embutido */
    }

    body.page-template-wplc-live-page-php .wplc-chat-form input::placeholder,
    body.page-template-wplc-live-page-php .wplc-chat-status,
    body.page-template-wplc-live-page-php .wplc-chat-messages li {
        color: #363636;
    }

    body.page-template-wplc-live-page-php .wplc-chat-form button {
        border: 1px solid #363636;
        color: #363636;
    }

    body.page-template-wplc-live-page-php #wplc-chat-send {
        right: 0.23vw;
        color: #fff;
        /* 4px */
        padding: 0.29vw 0.69vw;
        /* 5px 12px */
    }

    /* Texto legível sozinho, sem precisar de sombra pra destacar do vídeo
       atrás (agora é um fundo sólido, não uma sobreposição). */
    body.page-template-wplc-live-page-php .wplc-chat-messages li,
    body.page-template-wplc-live-page-php .wplc-chat-status {
        text-shadow: none;
    }

    body.page-template-wplc-live-page-php .wplc-fake-video-caption {
        font-size: 0.64vw;
        /* 11px */
    }

    body.page-template-wplc-live-page-php .wplc-quality-label,
    body.page-template-wplc-live-page-php .wplc-quality-selector select,
    body.page-template-wplc-live-page-php .wplc-chat-pinned-inner,
    body.page-template-wplc-live-page-php .wplc-chat-status,
    body.page-template-wplc-live-page-php .wplc-product-buy {
        font-size: 0.7vw;
        /* 12px */
    }

    body.page-template-wplc-live-page-php .wplc-like-count,
    body.page-template-wplc-live-page-php .wplc-product-name,
    body.page-template-wplc-live-page-php .wplc-product-price,
    body.page-template-wplc-live-page-php .wplc-chat-login-link,
    body.page-template-wplc-live-page-php .wplc-bag-empty,
    body.page-template-wplc-live-page-php .wplc-chat-messages:empty::before {
        font-size: 0.75vw;
    }

    body.page-template-wplc-live-page-php .wplc-bag-panel-header {
        font-size: 1vw;
    }

    body.page-template-wplc-live-page-php .wplc-chat-messages:empty::before {
        padding: 1.39vw 0;
        /* 24px */
    }

    body.page-template-wplc-live-page-php .wplc-chat-messages,
    body.page-template-wplc-live-page-php .wplc-chat-form input,
    body.page-template-wplc-live-page-php .wplc-chat-form button {
        font-size: 0.81vw;
        /* 14px, .wplc-chat-messages passa pra li/autor por herança */
    }

    body.page-template-wplc-live-page-php .wplc-chat-pinned-close {
        font-size: 0.93vw;
        /* 16px */
    }

    body.page-template-wplc-live-page-php .wplc-bag-close {
        font-size: 1.16vw;
        /* 20px */
    }

    /* Ícones (sacola/compartilhar/curtir ao lado do chat, e o coração
       flutuante sobre o vídeo) — o círculo em si (width/height, base
       34px) e o SVG dentro dele (base 16px, tamanho fixo por atributo
       HTML — CSS width/height nele vence e sobrescreve) crescem juntos,
       senão o ícone ficaria pequeno demais dentro de um botão já maior. */
    body.page-template-wplc-live-page-php .wplc-action-btn {
        width: 1.97vw;
        /* 34px */
        height: 1.97vw;
    }

    body.page-template-wplc-live-page-php .wplc-action-btn svg,
    body.page-template-wplc-live-page-php .wplc-like-icon svg {
        width: 0.93vw;
        /* 16px */
        height: 0.93vw;
    }

    body.page-template-wplc-live-page-php .col-pix .wplc-product-price-pix .woocommerce-Price-amount.amount {
        font-size: 1.35vw;
    }

    body.page-template-wplc-live-page-php .col-installment .wplc-product-price-installment {
        font-size: 1vw;
        color: #363636;
        margin-top: 1.6vw;
        line-height: 1.2;
    }

    body.page-template-wplc-live-page-php .wplc-product-open {
        font-size: 1.15vw;
        line-height: 1.3;
    }

    body.page-template-wplc-live-page-php .wplc-product-image img {
        width: 100%;
        height: auto;
    }

    body.page-template-wplc-live-page-php .wplc-product-open svg {
        width: 1vw;
        height: 1vw
    }

    body.page-template-wplc-live-page-php .wplc-player .col-installment .wplc-product-price-installment {
        font-size: .9vw;
    }

    .wplc-product-mini-image img {
        width: 5vw;
        height: 5vw;
    }

    .wplc-product-mini-name {
        margin-bottom: .5vw;
    }

    .wplc-product-mini-price {
        font-size: 1.5vw;
    }

    .wplc-product-mini-from {
        font-size: 1vw;
        margin-right: .5vw;
        color: #616161;
    }

    .wplc-product-card-inner--compact .wplc-promo-countdown {
        margin-top: .5vw;
        font-size: .65vw;
        padding: .25vw .5vw;
        width: 11vw;
        text-align: center;
    }

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

    .wplc-product-mini-buy {
        font-size: 1vw;
        padding: .35vw .65vw;
        gap: .26vw;
    }

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

    div#wplc-checkout-summary .wplc-product-card-inner {
        display: none;
    }

    .wplc-checkout-form .woocommerce-checkout-review-order-table th:first-child, .wplc-checkout-form .woocommerce-checkout-review-order-table thead tr,
    .wplc-checkout-form .woocommerce-checkout-review-order-table tfoot tr {
        padding: 1vw !important;
        background: whitesmoke !important;
        border-radius: 1vw;
    }

    .wplc-checkout-form .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal {
        border-radius: 1vw 1vw 0 0;
    }

    .wplc-checkout-form .woocommerce-checkout-review-order-table tfoot tr.order-total {
        border-radius: 0 0 1vw 1vw;
    }

    .wplc-checkout-form .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals {
        border-radius: 0 !important;
    }

    html body .wplc-checkout-form .woocommerce-checkout-review-order-table .opt-quantity {
        width: 90%;
    }

    .wplc-checkout-form .shop_table > tbody > .cart_item > .product-total {
        width: 30%;
    }

    body.page-template-wplc-live-page-php .wplc-youtube-mute-toggle {
        top: 0.69vw;
        right: 3vw;
        /* Fixo enquanto mudo, mesmo motivo do breakpoint mobile acima —
           1.85vw só passa de 44px em telas maiores que ~2380px. */
        width: 44px;
        height: 44px;
    }

    /* Volta ao tamanho discreto original (1.85vw de antes desta mudança)
       depois de ativar o som — mesmo raciocínio do breakpoint mobile. */
    body.page-template-wplc-live-page-php .wplc-youtube-mute-toggle[data-muted="0"] {
        width: 1.85vw;
        height: 1.85vw;
    }

}