/* =====================================================================
   loja-pro.css — camada de vitrine "loja pronta"
   ---------------------------------------------------------------------
   Carregada DEPOIS de shop.css/responsive.css. Não substitui aquele
   arquivo: adiciona os componentes de e-commerce que faltavam (barra de
   categorias, faixa de garantias, cabeçalho de seção, carrossel, card de
   produto com preço, prova social, passos, FAQ, newsletter) e reescreve
   só os pontos onde o visual antigo destoava.

   Regra de cor:
     - barra de navegação e títulos → tom escuro da marca
     - preço "a partir de" → cor da marca
     - ação de compra, "à vista" e selo de desconto → verde
   ===================================================================== */

:root {
    --lp-nav-bg: var(--accent-hover, #034d4f);
    --lp-nav-fg: #ffffff;
    --lp-green: #16a34a;
    --lp-green-dark: #12873d;
    --lp-green-soft: #eafaf0;
    --lp-star: #f5a623;
    --lp-ink: #16232b;
    --lp-muted: #6b7a83;
    --lp-line: #e6ebee;
    --lp-soft: #f6f8f9;
    --lp-radius: 12px;
    --lp-shadow: 0 1px 2px rgba(16,35,43,.05), 0 8px 24px -14px rgba(16,35,43,.18);
}

/* ============ 1. Barra de categorias (abaixo do header) ============ */

.lp-navbar {
    background: var(--lp-nav-bg);
    color: var(--lp-nav-fg);
    position: relative;
    z-index: 70;
}
.lp-navbar-inner {
    max-width: var(--shop-max, 1440px);
    margin: 0 auto;
    padding: 0 var(--shop-gutter, 24px);
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
}
.lp-navbar .lp-nav-item { position: relative; display: flex; }
.lp-navbar .lp-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 15px 18px;
    color: var(--lp-nav-fg);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    border: 0;
    background: none;
    cursor: pointer;
    transition: background .15s ease;
    font-family: inherit;
}
.lp-navbar .lp-nav-link svg { width: 14px; height: 14px; opacity: .8; }
.lp-nav-item:hover > .lp-nav-link,
.lp-nav-link.is-open { background: rgba(255,255,255,.14); }

/* Pronta entrega: a outra vitrine, e não mais uma categoria.
   O ponto verde é o que a separa da fileira — sem ele a entrada some no meio
   das categorias, que é justamente a confusão que a vitrine separada evita. */
.lp-navbar .lp-nav-pronta { border-left: 1px solid rgba(255,255,255,.20); }
.lp-navbar .lp-nav-pronta .lp-nav-link { color: #eafff2; }
.lp-navbar .lp-nav-pronta .lp-nav-link:hover { background: rgba(0,214,105,.20); }
.lp-nav-ponto {
    width: 7px; height: 7px; border-radius: 50%;
    background: #00d669;
    box-shadow: 0 0 0 3px rgba(0,214,105,.25);
    flex-shrink: 0;
}

/* mega menu */
.lp-mega {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 620px;
    background: #fff;
    border: 1px solid var(--lp-line);
    border-top: 0;
    border-radius: 0 0 var(--lp-radius) var(--lp-radius);
    box-shadow: 0 24px 48px -22px rgba(16,35,43,.35);
    padding: 22px 24px;
    display: none;
    grid-template-columns: 1fr 220px;
    gap: 26px;
    z-index: 90;
}
.lp-nav-item:hover .lp-mega,
.lp-mega.is-open { display: grid; }
/* O painel tem 620px e nasce colado à esquerda do item. Nas categorias do fim
   da barra isso jogava metade dele para fora da janela (foi o caso de Ecobags).
   O JS mede na hora de abrir e escreve em --mg-desloca o quanto ele precisa
   andar para caber — para a esquerda no fim da barra, para a direita no começo.
   Sem JS, fica como sempre foi. */
.lp-mega { transform: translateX(var(--mg-desloca, 0px)); }
/* Janela estreita: o painel encolhe até a largura disponível em vez de sangrar. */
@media (max-width: 1180px) {
    .lp-mega { min-width: 0; width: min(620px, calc(100vw - 24px)); }
}
.lp-mega h4 {
    margin: 0 0 12px;
    font-size: 15px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.lp-mega ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 22px; }
.lp-mega li { break-inside: avoid; margin-bottom: 2px; }
.lp-mega li a {
    display: block;
    padding: 7px 0;
    color: var(--lp-ink);
    font-size: 13.5px;
    text-decoration: none;
    border-bottom: 1px solid var(--lp-line);
}
.lp-mega li a:hover { color: var(--accent); }
.lp-mega-nome { display: block; }
/* O mínimo é apoio, não título: fica menor e mais claro para o nome do produto
   continuar sendo o que se lê primeiro na varredura da lista. */
.lp-mega-min {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--lp-muted, #8a8a8f);
    font-variant-numeric: tabular-nums;
}
.lp-mega li a:hover .lp-mega-min { color: inherit; opacity: .75; }
.lp-mega-featured {
    background: var(--lp-soft);
    border-radius: var(--lp-radius);
    padding: 14px;
    text-align: center;
    /* O conteúdo troca quando o mouse passa pela lista ao lado. A transição
       curta evita o pisca-pisca de trocar foto, nome e preço de uma vez. */
    transition: background 140ms;
}
.lp-mega-featured > * { animation: mgTroca 180ms ease-out; }
@keyframes mgTroca {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: none; }
}
/* Item da lista apontado: fica claro qual nome corresponde à foto do lado. */
.lp-mega ul a:hover, .lp-mega ul a:focus-visible {
    color: var(--accent);
    text-decoration: underline;
}
.lp-mega-featured .mg-img,
.lp-mega-featured img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 10px;
}
.lp-mega-featured .nm { font-size: 13px; font-weight: 600; line-height: 1.35; margin-bottom: 6px; color: var(--lp-ink); }
.lp-mega-featured .pr { font-size: 16px; font-weight: 800; color: var(--accent); }
.lp-mega-featured .pr small { display: block; font-size: 11px; font-weight: 500; color: var(--lp-muted); }

@media (max-width: 900px) {
    .lp-navbar-inner {
        /* Centralizado agora que as cinco categorias cabem. O `safe` é o que
           impede isso de virar defeito no dia em que entrar uma sexta: com
           `center` puro, conteúdo maior que a tela é cortado dos DOIS lados e o
           começo fica inalcançável mesmo com a barra rolando. `safe center`
           centraliza quando cabe e volta a alinhar à esquerda quando não cabe. */
        justify-content: center;
        justify-content: safe center;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 0;
    }
    .lp-navbar-inner::-webkit-scrollbar { display: none; }
    /* Menor no celular para as cinco categorias caberem na largura da tela: com
       12,5px e 14px de respiro sobrava sempre uma fora do campo de visão, e a
       barra rola — mas ninguém rola o que não parece ter mais nada. A caixa
       alta continua, então o texto segue legível bem abaixo do tamanho de
       leitura corrida. */
    /* O respiro lateral da barra também encolhe: são 32px de gutter que não
       servem a nada aqui e valem meia categoria na conta de quem cabe. */
    .lp-navbar-inner { padding: 0 6px; }
    .lp-navbar .lp-nav-link { padding: 12px 7px; font-size: 10.5px; letter-spacing: 0; }
    .lp-navbar .lp-nav-link svg { width: 11px; height: 11px; }
    .lp-navbar .lp-nav-link .lp-nav-caret,
    .lp-navbar .lp-nav-link > svg:last-child { display: none; }
    .lp-mega { display: none !important; }
}
@media (max-width: 380px) {
    .lp-navbar .lp-nav-link { padding: 11px 5px; font-size: 10px; }
}

/* ============ 2. Faixa de garantias ============ */

.lp-trust {
    background: #fff;
    border-bottom: 1px solid var(--lp-line);
}
.lp-trust-inner {
    max-width: var(--shop-max, 1440px);
    margin: 0 auto;
    padding: 18px var(--shop-gutter, 24px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.lp-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}
.lp-trust-item .ico {
    color: var(--accent);
    display: inline-flex;
    flex: 0 0 auto;
}
.lp-trust-item .ico svg { width: 26px; height: 26px; }
.lp-trust-item .tx { line-height: 1.25; }
.lp-trust-item .t1 { font-size: 11px; color: var(--lp-muted); text-transform: uppercase; letter-spacing: .05em; }
.lp-trust-item .t2 { font-size: 13.5px; font-weight: 700; color: var(--lp-ink); text-transform: uppercase; letter-spacing: .02em; }

@media (max-width: 900px) {
    .lp-trust-inner { grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 14px var(--shop-gutter, 16px); }
    .lp-trust-item { justify-content: flex-start; }
    .lp-trust-item .ico svg { width: 22px; height: 22px; }
    .lp-trust-item .t2 { font-size: 12px; }
    .lp-trust-item .t1 { font-size: 10px; }
}

/* ============ 3. Seção + cabeçalho com sublinhado ============ */

.lp-section {
    max-width: var(--shop-max, 1440px);
    margin: 0 auto;
    padding: 40px var(--shop-gutter, 24px) 0;
}
.lp-section.tight { padding-top: 22px; }
.lp-section-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    border-bottom: 1px solid var(--lp-line);
    margin-bottom: 22px;
    position: relative;
    flex-wrap: wrap;
}
.lp-section-head h2 {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--accent);
    position: relative;
}
.lp-section-head h2::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -11px;
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
}
.lp-section-head .sub {
    font-size: 14px;
    color: var(--lp-muted);
    margin-bottom: 10px;
}
.lp-section-head .lp-sec-link {
    margin-left: auto;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}
.lp-section-head .lp-sec-link:hover { text-decoration: underline; }

@media (max-width: 700px) {
    .lp-section { padding-top: 28px; }
    .lp-section-head h2 { font-size: 17px; }
    .lp-section-head .sub { font-size: 12.5px; }
}

/* ============ 4. Carrossel de produtos ============ */

.lp-carousel { position: relative; }
.lp-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * 20px) / 4);
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 6px;
}
.lp-track::-webkit-scrollbar { display: none; }
.lp-track > * { scroll-snap-align: start; }
.lp-track.cols-3 { grid-auto-columns: calc((100% - 2 * 20px) / 3); }
.lp-arrow {
    position: absolute;
    top: 38%;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--lp-line);
    background: #fff;
    color: var(--lp-ink);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: var(--lp-shadow);
    z-index: 4;
    transition: opacity .15s ease;
}
.lp-arrow:hover { color: var(--accent); border-color: var(--accent); }
.lp-arrow.prev { left: -14px; }
.lp-arrow.next { right: -14px; }
.lp-arrow[hidden] { display: none; }

@media (max-width: 1100px) { .lp-track { grid-auto-columns: calc((100% - 2 * 16px) / 3); gap: 16px; } }
@media (max-width: 820px)  { .lp-track { grid-auto-columns: calc((100% - 16px) / 2); gap: 16px; } .lp-arrow { display: none; } }
@media (max-width: 520px)  { .lp-track { grid-auto-columns: 72%; gap: 12px; } }

/* Grade simples (sem carrossel) */
.lp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
    gap: 20px;
}
@media (max-width: 640px) { .lp-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* ============ 5. Card de produto ============ */

.lp-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
    position: relative;
    height: 100%;
}
.lp-card:hover {
    border-color: rgba(var(--accent-rgb), .35);
    box-shadow: var(--lp-shadow);
    transform: translateY(-2px);
}
.lp-card .lp-thumb {
    position: relative;
    aspect-ratio: 1/1;
    background: #fff center/contain no-repeat;
    border-bottom: 1px solid var(--lp-line);
}
.lp-card .lp-thumb .ph {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #c8d2d7;
}
/* A FITA de fotos: uma linha de imagens do tamanho do card, deslizando. O
   `overflow:hidden` do .lp-thumb é o que deixa a vizinha fora da vista até a
   hora dela.

   Estas regras ficaram FORA do arquivo por uma hora (25/08/2026): o comando que
   as escrevia estava encadeado depois de um `node --check` de outro arquivo, o
   check falhou e o encadeamento parou antes do CSS. O HTML foi para o ar com a
   fita, e sem estas linhas cada `<i>` nasceu com 0 × 0 — ou seja, o catálogo
   inteiro ficou sem a foto principal nos produtos com mais de uma imagem. */
.lp-thumb { overflow: hidden; }
.lp-slide {
    position: absolute; inset: 0;
    display: flex; width: 100%; height: 100%;
    transition: transform .3s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}
.lp-slide > i {
    flex: 0 0 100%;
    height: 100%;
    background: #fff center/contain no-repeat;
}
@media (prefers-reduced-motion: reduce) { .lp-slide { transition: none; } }

/* Setas da galeria no card — a foto de capa é uma só, e o copo tem frente,
   verso e a peça montada. Elas aparecem no HOVER no computador e ficam SEMPRE
   visíveis no toque: no celular não existe hover, e seta que só aparece ao
   passar o mouse é seta que metade dos clientes nunca vê. */
.lp-thumb-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.92); color: #123;
    box-shadow: 0 1px 6px rgba(0,0,0,.18);
    font-size: 20px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .15s ease;
    z-index: 2;
}
.lp-thumb-nav.ant { left: 6px; }
.lp-thumb-nav.prox { right: 6px; }
.lp-card:hover .lp-thumb-nav, .lp-thumb-nav:focus-visible { opacity: 1; }
.lp-thumb-nav:hover { background: #fff; }
@media (hover: none) { .lp-thumb-nav { opacity: .85; } }

.lp-thumb-pontos {
    position: absolute; left: 0; right: 0; bottom: 7px;
    display: flex; gap: 4px; justify-content: center;
    pointer-events: none; z-index: 2;
}
.lp-thumb-pontos i {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(0,0,0,.22);
}
.lp-thumb-pontos i.on { background: var(--accent, #0c8a8a); }
.lp-badge-off {
    position: absolute;
    top: 10px; left: 10px;
    background: var(--lp-green);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 5px;
    display: inline-flex; align-items: center; gap: 4px;
    z-index: 2;
}
.lp-badge-off::before { content: '▼'; font-size: 8px; }
/* A flag sem número: quem ligou "Em oferta" no painel e não cadastrou o preço
   "de" tem oferta, não tem desconto medido — e a seta para baixo prometeria uma
   queda que a vitrine não sabe dizer de quanto é. Mesmo vermelho da flag grande
   da página do produto (`.sale-flag`), para o card e a página que ele abre
   dizerem a mesma coisa. */
.lp-badge-oferta {
    background: var(--red, #ff3b30);
    letter-spacing: .05em;
}
.lp-badge-oferta::before { content: none; }
.lp-badge-tag {
    position: absolute;
    top: 10px; right: 10px;
    background: rgba(var(--accent-rgb), .12);
    color: var(--accent);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 5px;
    z-index: 2;
}
.lp-card .lp-body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.lp-card .lp-name {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--lp-ink);
    min-height: 2.7em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lp-card .lp-stars { display: flex; align-items: center; gap: 1px; margin: 2px 0 4px; }
.lp-card .lp-stars small { color: var(--lp-muted); font-size: 11px; margin-left: 3px; }

/* Estrela em glifo — cheia, do tamanho do texto, sem depender do pacote de ícones */
.lp-star { font-style: normal; color: var(--lp-star); line-height: 1; letter-spacing: 1px; }
.lp-star.off { color: #dfe5e8; }
/* O pedido mínimo virou a linha DE BAIXO do preço — antes era a de cima, e
   dizia de qual pacote saiu o unitário. Como agora vem depois do número, ganha
   um respiro no topo para não colar na base do preço. */
.lp-card .lp-from { font-size: 11.5px; color: var(--lp-muted); margin-top: 2px; }
.lp-card .lp-price {
    font-size: 21px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -.01em;
    line-height: 1.15;
}
.lp-card .lp-price s { font-size: 12.5px; font-weight: 500; color: var(--lp-muted); margin-right: 6px; }
.lp-card .lp-price .un { font-size: 12px; font-weight: 600; color: var(--lp-muted); }
/* No card o selo é etiqueta de leitura rápida: sem pílula, só a cor. O grid
   tem dezenas deles lado a lado e a pílula viraria ruído de fundo. */
.lp-card .lp-price .selo-pix {
    padding: 0; border: 0; background: none;
    margin-left: 7px; font-size: 11.5px; cursor: inherit;
}
.lp-card .lp-parcela { font-size: 12px; color: var(--lp-muted); }
/* Faixa do preço progressivo. Fica em verde (a mesma cor do "você economiza"
   dos pacotes) porque é notícia boa: diz que o número acima é o teto, não o
   preço final de quem compra volume. */
.lp-progressivo {
    display: flex; align-items: flex-start; gap: 5px;
    margin-top: 7px; padding: 5px 8px;
    border-radius: 7px;
    background: rgba(31, 175, 100, .10);
    color: #157347;
    font-size: 11.5px; line-height: 1.35;
}
.lp-progressivo svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 1px; }
.lp-progressivo b { font-weight: 800; }
.lp-card .lp-parcela b { color: var(--lp-ink); font-weight: 700; }
.lp-card .lp-avista {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 8px;
    align-self: flex-start;
    background: var(--lp-green-soft);
    border-radius: 6px;
    padding: 4px 8px;
    color: var(--lp-green-dark);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}
.lp-card .lp-avista svg { width: 15px; height: 15px; }
.lp-card .lp-avista small { color: var(--lp-muted); font-weight: 500; font-size: 11px; }
.lp-card .lp-cta {
    margin-top: 10px;
    display: block;
    text-align: center;
    background: var(--lp-green);
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    padding: 9px 12px;
    border-radius: 8px;
}
.lp-card:hover .lp-cta { background: var(--lp-green-dark); }

@media (max-width: 640px) {
    .lp-card .lp-body { padding: 10px 10px 12px; }
    .lp-card .lp-name { font-size: 12.5px; min-height: 2.6em; }
    .lp-card .lp-price { font-size: 17px; }
    .lp-card .lp-parcela, .lp-card .lp-from { font-size: 11px; }
    .lp-card .lp-avista { font-size: 12px; }
}

/* Blocos longos que ficam abaixo da dobra. `content-visibility: auto` deixa o
   navegador pular layout e pintura enquanto eles estão fora da tela, e
   `contain-intrinsic-size` reserva a altura aproximada para a barra de rolagem
   não dar solavanco quando eles entram. */
.lp-prova, .lp-passos-box, .lp-faq, .lp-selos, .shop-footer {
    content-visibility: auto;
}
.lp-prova   { contain-intrinsic-size: auto 900px; }
.lp-passos-box { contain-intrinsic-size: auto 520px; }
.lp-faq     { contain-intrinsic-size: auto 600px; }
.lp-selos   { contain-intrinsic-size: auto 320px; }
.shop-footer { contain-intrinsic-size: auto 700px; }

/* ============ 5b. Chamada do prompt do agente Ekko ============ */

.lp-promptcta {
    max-width: var(--shop-max, 1440px);
    margin: 26px auto 0;
    padding: 0 var(--shop-gutter, 24px);
}
.lp-promptcta-inner {
    position: relative;
    overflow: hidden;
    display: flex; align-items: center; gap: 18px;
    padding: 18px 22px;
    border-radius: 16px;
    background: linear-gradient(115deg, var(--accent) 0%, #0b6f70 55%, #08585c 100%);
    color: #fff;
    box-shadow: 0 14px 32px -18px rgba(12, 138, 138, .8);
}
/* O brilho que atravessa a faixa de tempos em tempos. É o que faz o olho
   voltar para cá numa página cheia de produto. */
.lp-promptcta-inner::after {
    content: '';
    position: absolute; top: 0; bottom: 0; left: -40%;
    width: 35%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
    transform: skewX(-14deg);
    animation: ctaBrilho 4.5s ease-in-out 1.5s infinite;
    pointer-events: none;
}
@keyframes ctaBrilho {
    0%   { left: -40%; }
    55%  { left: 115%; }
    100% { left: 115%; }
}
.lp-promptcta .ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; flex: 0 0 auto;
    border-radius: 14px;
    background: rgba(255,255,255,.16);
    animation: ctaPulso 2.6s ease-in-out infinite;
}
@keyframes ctaPulso {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,.28); }
    50%      { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(255,255,255,0); }
}
.lp-promptcta .tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lp-promptcta .tx strong { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.lp-promptcta .tx span { font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.92); }
.lp-promptcta .tx b { font-weight: 800; color: #fff; }
.lp-promptcta .cta {
    margin-left: auto; flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 12px 20px;
    border-radius: 999px;
    background: #fff;
    color: var(--accent);
    font-size: 14px; font-weight: 700;
    text-decoration: none;
    transition: transform 140ms, box-shadow 140ms;
}
.lp-promptcta .cta:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.lp-promptcta .cta svg { width: 15px; height: 15px; }

@media (max-width: 760px) {
    .lp-promptcta-inner { flex-wrap: wrap; gap: 12px; padding: 16px; }
    .lp-promptcta .ico { width: 44px; height: 44px; }
    .lp-promptcta .tx strong { font-size: 15.5px; }
    .lp-promptcta .tx span { font-size: 12.5px; }
    .lp-promptcta .cta { margin-left: 0; width: 100%; justify-content: center; }
}
/* Quem pediu menos movimento no sistema recebe a faixa parada — ela continua
   com o mesmo contraste e o mesmo botão. */
@media (prefers-reduced-motion: reduce) {
    .lp-promptcta-inner::after { animation: none; display: none; }
    .lp-promptcta .ico { animation: none; }
}

/* ============ 6. Prova social ============ */

.lp-prova {
    max-width: var(--shop-max, 1440px);
    margin: 44px auto 0;
    padding: 0 var(--shop-gutter, 24px);
}
.lp-prova-box {
    background: linear-gradient(180deg, #fbfdfe 0%, #f4f8f9 100%);
    border: 1px solid var(--lp-line);
    border-radius: 18px;
    padding: 34px 28px 28px;
}
.lp-prova-selo {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(var(--accent-rgb), .10);
    color: var(--accent);
    font-size: 11px; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    padding: 5px 12px; border-radius: 999px;
}
.lp-prova-head { text-align: center; margin-bottom: 24px; }
.lp-prova-head h2 {
    margin: 12px auto 8px;
    max-width: 22ch;
    font-size: 30px;
    font-weight: 800;
    color: var(--lp-ink);
    letter-spacing: -.02em;
    line-height: 1.2;
    text-wrap: balance;
}
.lp-prova-head p {
    margin: 0 auto;
    max-width: 56ch;
    color: var(--lp-muted);
    font-size: 15px; line-height: 1.5;
}


/* O trilho do carrossel dos depoimentos. A cópia da lista que dá o loop sem
   emenda mora dentro dele — ver Shop._lpDepoLoop em /js/shop.js. */
.lp-depos-wrap { position: relative; margin: 0 -4px; padding: 4px; }
/* Setas por cima do trilho: quem não arrasta (mouse, teclado) precisa de um
   jeito de andar, e elas também avisam que a fileira continua. */
.lp-depo-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--lp-line);
    background: #fff;
    color: var(--lp-ink);
    box-shadow: 0 6px 18px rgba(15, 40, 50, .12);
    cursor: pointer;
    opacity: 0;
    transition: opacity 160ms, background 140ms, color 140ms;
    z-index: 2;
}
.lp-depos-wrap:hover .lp-depo-nav,
.lp-depo-nav:focus-visible { opacity: 1; }
.lp-depo-nav:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.lp-depo-nav.prev { left: -6px; }
.lp-depo-nav.next { right: -6px; }
.lp-depo-nav svg { width: 18px; height: 18px; }
/* No toque a seta não some (não há hover) e fica menor, encostada na borda. */
@media (hover: none) {
    .lp-depo-nav { opacity: .92; width: 34px; height: 34px; }
    .lp-depo-nav.prev { left: 2px; }
    .lp-depo-nav.next { right: 2px; }
}
.lp-depos {
    display: grid;
    grid-auto-flow: column;
    /* Quatro por tela e não cinco: sem a foto do produto o cartão é só texto, e
       coluna estreita demais quebrava a fala em cinco linhas de três palavras. */
    grid-auto-columns: calc((100% - 3 * 16px) / 4);
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}
.lp-depos::-webkit-scrollbar { display: none; }
.lp-depo {
    position: relative;
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: 16px;
    padding: 20px 18px 16px;
    scroll-snap-align: start;
    display: flex; flex-direction: column;
    box-shadow: 0 2px 10px rgba(15, 40, 50, .04);
    transition: box-shadow 160ms, border-color 160ms, transform 160ms;
}
.lp-depo:hover {
    box-shadow: 0 12px 28px rgba(15, 40, 50, .10);
    border-color: rgba(var(--accent-rgb), .30);
    transform: translateY(-2px);
}
/* Aspas de marca d'água: dizem "isto é fala de alguém" sem gastar linha de
   texto, e ficam atrás do conteúdo para não disputar leitura. */
.lp-depo::after {
    content: '”';
    position: absolute; right: 14px; top: 6px;
    font-size: 58px; line-height: 1;
    color: rgba(var(--accent-rgb), .10);
    pointer-events: none;
}
/* Sem retrato e sem as iniciais (25/08/2026): o cartão começa no NOME. O
   círculo vazio com duas letras não era informação — era o buraco da foto
   pedindo desculpa por estar lá. `gap` continua para o dia em que o retrato
   voltar; com um filho só ele não desenha nada. */
.lp-depo-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.lp-depo-id { min-width: 0; }
/* Retrato de quem falou. Nos depoimentos ilustrativos ele é gerado por IA
   (services/provaSocial.js) — e é por isso que o rodapé do bloco avisa que os
   depoimentos são ilustrativos. Sem retrato, cai nas iniciais. */
.lp-depo-av {
    width: 54px; height: 54px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--lp-soft) center/cover no-repeat;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1.5px rgba(var(--accent-rgb), .35), 0 4px 10px rgba(15, 40, 50, .10);
    display: flex; align-items: center; justify-content: center;
}
.lp-depo-av.sem-foto {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .06));
    color: var(--accent);
    font-size: 15px; font-weight: 800; letter-spacing: .02em;
}
.lp-depo-nome {
    display: flex; align-items: center; gap: 5px;
    font-size: 14.5px; font-weight: 700; color: var(--lp-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    letter-spacing: -.01em;
}
/* Selo de verificado — azul, o mesmo código visual que as redes usam pra
   "essa pessoa é quem diz ser". Aqui ele afirma menos e mais preciso: o
   depoimento veio de uma conta que recebeu o pedido e respondeu ao convite. */
.lp-depo-ok {
    display: inline-flex;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: #1d9bf0;
    color: #fff;
    align-items: center; justify-content: center;
    flex: 0 0 auto;
    box-shadow: 0 0 0 2px rgba(29, 155, 240, .14);
}
.lp-depo-ok svg { width: 10px; height: 10px; stroke-width: 3.2; }
/* O "G" do Google fica sem moldura: a marca já é reconhecida sozinha, e
   colorir um fundo atrás dela só disputaria com as quatro cores dela. */
.lp-depo-g {
    display: inline-flex; align-items: center;
    flex: 0 0 auto; margin-left: 1px;
}
.lp-depo-stars { display: flex; gap: 1px; font-size: 14px; margin-top: 3px; }
.lp-depo p {
    margin: 0;
    font-size: 13.8px;
    line-height: 1.6;
    color: var(--lp-ink);
    flex: 1;
}
/* Pé do cartão: ocasião como etiqueta e cidade com alfinete. Separado por uma
   linha fina porque é dado sobre a compra, não continuação da fala. */
.lp-depo-pe {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px dashed var(--lp-line);
}
.lp-depo-tag {
    background: rgba(var(--accent-rgb), .09);
    color: var(--accent);
    font-size: 11px; font-weight: 700;
    letter-spacing: .03em; text-transform: uppercase;
    padding: 4px 9px; border-radius: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.lp-depo-local {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.5px; color: var(--lp-muted);
}
.lp-depo-local svg { width: 12px; height: 12px; color: #9aa8b0; }

.lp-prova-bens {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin-top: 22px;
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: 14px;
    overflow: hidden;
}
.lp-prova-bem {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 16px 16px;
    border-right: 1px solid var(--lp-line);
    transition: background 140ms;
}
.lp-prova-bem:hover { background: rgba(var(--accent-rgb), .04); }
.lp-prova-bem:last-child { border-right: 0; }
.lp-prova-bem .ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: 0 0 auto;
    border-radius: 10px;
    background: rgba(var(--accent-rgb), .10);
    color: var(--accent);
}
.lp-prova-bem .ico svg { width: 20px; height: 20px; }
.lp-prova-bem .t { font-size: 13px; font-weight: 700; color: var(--lp-ink); line-height: 1.3; }
.lp-prova-bem .d { font-size: 11.5px; color: var(--lp-muted); line-height: 1.45; margin-top: 3px; }

/* O aviso de depoimento ilustrativo, discreto: uma linha só, sem caixa e sem
   ícone. Discreto não é escondido — o texto continua no fluxo da página, em
   tamanho legível e com contraste suficiente para ser lido. Ele é a única
   coisa que separa este bloco de uma avaliação de cliente de verdade, então
   pode encolher, mas não pode sair (nem virar cinza sobre cinza). */
.lp-prova-rodape {
    margin: 16px auto 0;
    max-width: 62ch;
    font-size: 11.5px;
    line-height: 1.45;
    /* Um tom mais escuro que o --lp-muted: neste tamanho o cinza padrão dá
       4,15:1 sobre o fundo do bloco, abaixo do mínimo legível da WCAG. Este dá
       4,93:1 e continua discreto ao lado dos depoimentos. */
    color: #5f6e77;
    text-align: center;
}

@media (max-width: 1100px) { .lp-depos { grid-auto-columns: calc((100% - 2 * 16px) / 3); } .lp-prova-bens { grid-template-columns: repeat(2, 1fr); } .lp-prova-bem { border-bottom: 1px solid var(--lp-line); } }
@media (max-width: 860px) { .lp-depos { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (max-width: 700px) {
    .lp-prova { margin-top: 30px; }
    .lp-prova-box { padding: 22px 16px 20px; border-radius: 14px; }
    .lp-prova-head h2 { font-size: 21px; }
    .lp-prova-head p { font-size: 13px; }
    .lp-depo { padding: 16px 15px 14px; }
    .lp-depo-av { width: 46px; height: 46px; }
    .lp-depo p { font-size: 13.2px; }
    /* No celular a seta cairia em cima da fala, e o dedo já arrasta o trilho. */
    .lp-depo-nav { display: none; }
    .lp-depos { grid-auto-columns: 78%; }
    .lp-prova-bens { grid-template-columns: 1fr; }
}

/* ============ 7. Como funciona (passos) ============ */

.lp-passos-box {
    background: linear-gradient(135deg, #f3f9fb 0%, #eef5fb 100%);
    border: 1px solid var(--lp-line);
    border-radius: 18px;
    padding: 30px 28px;
}
.lp-passos-top { max-width: 620px; margin-bottom: 24px; }
.lp-passos-top .eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--accent); font-size: 12px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
}
.lp-passos-top h2 {
    margin: 12px 0 8px;
    font-size: 30px; font-weight: 700; line-height: 1.12; color: var(--lp-ink);
    letter-spacing: -.02em;
}
.lp-passos-top h2 em { font-style: normal; color: var(--accent); }
.lp-passos-top p { margin: 0; color: var(--lp-muted); font-size: 14.5px; line-height: 1.55; }
.lp-passos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 12px;
}
.lp-passo {
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: 14px;
    padding: 16px 14px;
    position: relative;
}
.lp-passo .n {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    margin-bottom: 12px;
}
.lp-passo .ico { color: var(--accent); margin-bottom: 10px; }
.lp-passo .ico svg { width: 30px; height: 30px; }
.lp-passo .t { font-size: 13px; font-weight: 700; color: var(--lp-ink); line-height: 1.3; margin-bottom: 4px; }
.lp-passo .d { font-size: 11.8px; color: var(--lp-muted); line-height: 1.45; }
.lp-passo + .lp-passo::before {
    content: '›';
    position: absolute;
    left: -11px; top: 50%;
    transform: translateY(-50%);
    color: var(--accent);
    font-size: 20px;
    font-weight: 700;
    opacity: .5;
}
@media (max-width: 1000px) { .lp-passos { grid-template-columns: repeat(2, 1fr); } .lp-passo + .lp-passo::before { display: none; } }
@media (max-width: 700px) {
    .lp-passos-box { padding: 22px 16px; border-radius: 14px; }
    .lp-passos-top h2 { font-size: 22px; }
    .lp-passos-top p { font-size: 13px; }
    .lp-passos { grid-template-columns: 1fr; }
}

/* ============ 8. Números ============ */

.lp-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}
.lp-numero {
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: 14px;
    padding: 16px 14px;
    text-align: center;
    /* Coluna centrada com altura mínima: um valor comprido ("Pix, cartão e
       boleto") quebrava em duas linhas e empurrava só aquele rótulo para
       baixo, deixando a fileira toda torta. */
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    min-height: 128px;
    transition: border-color 140ms, box-shadow 140ms;
}
.lp-numero:hover { border-color: rgba(var(--accent-rgb), .40); box-shadow: 0 6px 18px rgba(15, 40, 50, .06); }
/* O ícone dá o assunto antes da leitura: com cinco cartões só de número, o
   olho não sabe qual deles responde "vocês entregam onde?". */
.lp-numero .ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin-bottom: 9px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), .10);
    color: var(--accent);
}
.lp-numero .v {
    font-size: clamp(18px, 1.5vw + 8px, 25px);
    font-weight: 800; color: var(--lp-ink);
    letter-spacing: -.02em; line-height: 1.15;
    text-wrap: balance;
}
.lp-numero .r {
    font-size: 12px; color: var(--lp-muted); margin-top: 5px; line-height: 1.35;
    text-transform: uppercase; letter-spacing: .04em;
}

/* ============ 9. FAQ ============ */

/* Observação da resposta (o texto depois do "*"). Menor e mais apagada: é
   ressalva, não a resposta — mas fica no fluxo, não em tooltip. */
.lp-faq-nota {
    margin-top: 8px !important;
    padding-left: 12px;
    border-left: 2px solid var(--lp-line);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--lp-muted);
}
.lp-faq-nota span { color: var(--accent); font-weight: 700; }

.lp-faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.lp-faq details {
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: 12px;
    padding: 14px 16px;
}
.lp-faq details[open] { border-color: rgba(var(--accent-rgb), .35); }
.lp-faq summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--lp-ink);
    list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: '+'; color: var(--accent); font-size: 18px; font-weight: 700; }
.lp-faq details[open] summary::after { content: '−'; }
.lp-faq p { margin: 10px 0 0; font-size: 13.3px; line-height: 1.6; color: var(--lp-muted); }
@media (max-width: 800px) { .lp-faq { grid-template-columns: 1fr; } }

/* ============ 10. Newsletter ============ */

.lp-news { background: var(--lp-nav-bg); color: #fff; margin-top: 48px; }
.lp-news-inner {
    max-width: var(--shop-max, 1440px);
    margin: 0 auto;
    padding: 22px var(--shop-gutter, 24px);
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.lp-news .tx { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; }
.lp-news .tx svg { width: 26px; height: 26px; opacity: .9; }
.lp-news form { margin-left: auto; display: flex; gap: 10px; flex: 1; max-width: 520px; }
.lp-news input {
    flex: 1;
    height: 42px;
    border-radius: 8px;
    border: 0;
    padding: 0 14px;
    font-family: inherit;
    font-size: 14px;
    background: #fff;
    color: var(--lp-ink);
}
.lp-news button {
    height: 42px;
    padding: 0 24px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.7);
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.lp-news button:hover { background: #fff; color: var(--lp-nav-bg); }
.lp-news .ok { margin-left: auto; font-size: 14px; font-weight: 600; }
@media (max-width: 800px) {
    .lp-news-inner { padding: 18px var(--shop-gutter, 16px); }
    .lp-news .tx { font-size: 14px; }
    .lp-news form { margin-left: 0; max-width: 100%; width: 100%; }
    .lp-news button { padding: 0 16px; }
}

/* ============ 11. Rodapé — faixa de selos ============ */

.lp-selos { background: var(--lp-soft); border-top: 1px solid var(--lp-line); }
.lp-selos-inner {
    max-width: var(--shop-max, 1440px);
    margin: 0 auto;
    padding: 26px var(--shop-gutter, 24px);
    display: grid;
    /* auto-fit e não repeat(3, 1fr): o painel pode desligar uma das colunas, e
       com três fixas a faixa ficava com um buraco no lugar dela. */
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 26px;
}
.lp-selos h5 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
}
/* Coluna de grid nasce com min-width:auto, então a linha de bandeiras esticava
   a coluna além da tela em vez de quebrar — o Pix, que é o logo mais largo,
   saía cortado na direita no celular. */
.lp-selos-inner > div { min-width: 0; }
.lp-selos .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lp-selos .chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--lp-ink);
}
.lp-selos .chip svg { width: 16px; height: 16px; color: var(--lp-green); }
/* minmax(0,1fr) e não 1fr: a trilha `1fr` tem mínimo automático, então a linha
   de bandeiras empurrava a coluna além da tela em vez de quebrar. */
@media (max-width: 800px) { .lp-selos-inner { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

/* ============ 12. Página de produto ============ */

/* Quantidade em botões — o cliente entende o preço sem digitar nada */
.lp-qty-presets { margin: 14px 0 4px; }
.lp-qty-presets .lbl {
    font-size: 13px;
    color: var(--lp-muted);
    margin-bottom: 8px;
}
.lp-qty-presets .lbl b { color: var(--lp-ink); font-weight: 700; }
.lp-qty-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-qty-opt {
    min-width: 62px;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--lp-line);
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--lp-ink);
    cursor: pointer;
    text-align: center;
    line-height: 1.2;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.lp-qty-opt small { display: block; font-size: 10.5px; font-weight: 600; color: var(--lp-green); margin-top: 2px; }
.lp-qty-opt:hover { border-color: var(--accent); color: var(--accent); }
.lp-qty-opt.is-on {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), .08);
    color: var(--accent);
}
.lp-qty-opt.is-outro { min-width: 88px; }

/* Selo "no Pix" — anda colado em todo preço anunciado (Shop.seloPix).
   Verde e discreto: é uma garantia ao lado do número, não uma promoção. */
.selo-pix {
    display: inline-flex; align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--lp-green-soft, #eafaf0);
    color: var(--lp-green, #16a34a);
    border: 1px solid rgba(22, 163, 74, .22);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
    cursor: help;
}

/* O número é grande, o selo é pequeno: sem o respiro ele encosta no preço —
   "R$ 2,50no Pix" saía colado, como se fosse a mesma palavra. */
.lp-preco-pdp .valor .selo-pix { margin-left: 10px; position: relative; top: -3px; }
.qp-unit b .selo-pix { margin-left: 10px; position: relative; top: -3px; }
.price-block .total-linha { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

/* Bloco de preço no padrão da vitrine */
.lp-preco-pdp { margin: 16px 0 6px; }
.lp-preco-pdp .de { font-size: 13px; color: var(--lp-muted); }
.lp-preco-pdp .de s { text-decoration-color: #d94b4b; }
.lp-preco-pdp .valor {
    font-size: 34px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -.02em;
    line-height: 1.1;
}
.lp-preco-pdp .valor .un { font-size: 14px; font-weight: 600; color: var(--lp-muted); }
.lp-preco-pdp .parcela { font-size: 13.5px; color: var(--lp-muted); margin-top: 4px; }
.lp-preco-pdp .parcela b { color: var(--lp-ink); }
.lp-preco-pdp .avista {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 8px;
    color: var(--lp-green);
    font-size: 15px;
    font-weight: 700;
}
.lp-preco-pdp .avista svg { width: 18px; height: 18px; }
.lp-preco-pdp .avista small { color: var(--lp-muted); font-weight: 500; font-size: 12px; }

/* Botão de compra verde, cheio */
.lp-buy-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: 10px;
    background: var(--lp-green);
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}
.lp-buy-btn:hover:not(:disabled) { background: var(--lp-green-dark); }
.lp-buy-btn:disabled { opacity: .5; cursor: not-allowed; }
.lp-buy-btn svg { width: 20px; height: 20px; }

/* Barra fixa de compra (aparece ao rolar) */
.product-sticky-cta {
    box-shadow: 0 -6px 24px -12px rgba(16,35,43,.35);
    border-top: 1px solid var(--lp-line);
    background: #fff;
}
.product-sticky-cta .lp-sticky-price { color: var(--accent); font-weight: 800; }

/* ============ 13. Vitrine — encaixe com o layout antigo ============ */

.home-cats { padding-left: 0; padding-right: 0; }
.home-cats-grid { gap: 0; }
.lp-catbar {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    padding-bottom: 4px; margin-bottom: 18px;
}
/* Sem pílula nenhuma dentro, a barra continuava ocupando 22px entre o título da
   vitrine e o primeiro card — 4px de padding mais 18 de margem, um buraco que
   parecia erro de alinhamento e não tinha o que alinhar. Ela só é preenchida
   quando existem categorias para filtrar; vazia, sai da conta em vez de reservar
   lugar. */
.lp-catbar:empty { display: none; }
.lp-catbar::-webkit-scrollbar { display: none; }
.lp-catbar button {
    flex: 0 0 auto;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--lp-line);
    background: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--lp-ink);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
}
.lp-catbar button svg { width: 16px; height: 16px; opacity: .75; }
.lp-catbar button:hover { border-color: var(--accent); color: var(--accent); }
.lp-catbar button.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.lp-catbar button.is-on svg { opacity: 1; }

/* Calculadora de quantidade — deixou de bloquear a vitrine e virou um atalho */
.lp-qtybar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--lp-soft);
    border: 1px solid var(--lp-line);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
}
.lp-qtybar .tx { font-size: 13.5px; color: var(--lp-ink); font-weight: 600; }
.lp-qtybar .tx small { display: block; font-weight: 400; color: var(--lp-muted); font-size: 12px; }
.lp-qtybar form { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.lp-qtybar input {
    width: 120px; height: 40px;
    border: 1px solid var(--lp-line);
    border-radius: 8px;
    padding: 0 12px;
    font-family: inherit; font-size: 14px;
    background: #fff;
}
.lp-qtybar .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lp-qtybar .chips button {
    height: 40px; padding: 0 14px;
    border-radius: 8px; border: 1px solid var(--lp-line);
    background: #fff; font-family: inherit; font-size: 13.5px; font-weight: 600;
    color: var(--lp-ink); cursor: pointer;
}
.lp-qtybar .chips button:hover { border-color: var(--accent); color: var(--accent); }
.lp-qtybar .chips button.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.lp-qtybar .apply {
    height: 40px; padding: 0 18px;
    border-radius: 8px; border: 0;
    background: var(--lp-green); color: #fff;
    font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.lp-qtybar .apply:hover { background: var(--lp-green-dark); }
@media (max-width: 700px) {
    .lp-qtybar { padding: 12px; }
    .lp-qtybar form { margin-left: 0; width: 100%; }
    .lp-qtybar input { flex: 1; width: auto; }
}

/* O portão que escondia os produtos não existe mais nesta camada */
.qty-gate.is-locked #grid { filter: none; pointer-events: auto; user-select: auto; }
.qty-gate-overlay { display: none !important; }

/* ============ 14. Utilitários ============ */

.lp-hidden { display: none !important; }
.lp-center { text-align: center; }
.lp-mt { margin-top: 18px; }

/* ============ 15. Encaixes na página de produto ============ */

/* Ações de compra em verde — mesma cor do "à vista" e do selo de desconto,
   destacada da cor da marca que já pinta barra, títulos e preços. */
.buy-fechamento #add-cart,
.product-sticky-cta #sticky-add,
.pdp-next .mac-btn-primary,
.lp-cta-verde {
    background: var(--lp-green) !important;
    border-color: var(--lp-green) !important;
    color: #fff !important;
    font-weight: 700;
}
.buy-fechamento #add-cart:hover:not(:disabled),
.product-sticky-cta #sticky-add:hover:not(:disabled),
.pdp-next .mac-btn-primary:hover:not(:disabled),
.lp-cta-verde:hover:not(:disabled) {
    background: var(--lp-green-dark) !important;
    border-color: var(--lp-green-dark) !important;
}
.buy-fechamento #add-cart { height: 52px; font-size: 17px; border-radius: 10px; }

/* Pacotes de quantidade: mais compactos, para caberem numa olhada só */
.pacotes { grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: 8px; }
.pacote { padding: 11px 10px 10px; border-width: 1px; border-radius: 10px; }
.pacote .pc-qty { font-size: 11px; }
.pacote .pc-unit { font-size: 18px; }
.pacote .pc-total { font-size: 11.5px; }
.pacote .pc-save { font-size: 11px; }
.pacote .pc-badge { font-size: 10px; padding: 2px 6px; }
.pacotes-bloco.compacto .pacotes-sub { font-size: 12px; }

/* Prazo e avisos ganham o mesmo desenho de caixa da vitrine */
.prazo-box { border-radius: var(--lp-radius); }

/* Bloco de seções abaixo do produto respira igual à home */
#lp-passos .lp-section,
#lp-prova .lp-prova,
#lp-faq .lp-section { padding-left: var(--shop-gutter, 24px); padding-right: var(--shop-gutter, 24px); }

/* Carrossel de relacionados agora usa o card da vitrine */
.related-track .lp-card { scroll-snap-align: start; }
.related-section h2 {
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--accent);
}

/* ============ 16. Fluxo de compra ============ */

/* Trilha de compra.
   Os passos têm largura própria e a trilha inteira é centralizada: antes cada
   item era `flex: 1` e esticava até ocupar a largura toda, o que abria um vazio
   enorme antes do primeiro passo (que não tem conector) e afastava os rótulos
   uns dos outros. Quem estica agora é só o conector, e dentro de um limite. */
.lp-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 0 auto 20px;
    padding: 0;
    max-width: 100%;
    flex-wrap: nowrap;
}
.lp-steps li {
    display: flex; align-items: center; gap: 9px;
    flex: 0 0 auto;
    font-size: 12.5px;
    color: var(--lp-muted);
    font-weight: 600;
}
/* O rótulo nunca quebra: se faltar espaço, quem cede é o traço conector. */
.lp-steps li .t { white-space: nowrap; }
.lp-steps li + li::before {
    content: '';
    flex: 0 1 52px;
    min-width: 18px;
    height: 2px;
    margin: 0 14px;
    background: var(--lp-line);
    border-radius: 2px;
}
.lp-steps li.done + li::before { background: var(--lp-green); opacity: 0.45; }
.lp-steps .n {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--lp-line);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    flex: 0 0 auto;
}
.lp-steps li.on .n { background: var(--accent); }
.lp-steps li.on { color: var(--lp-ink); }
.lp-steps li.done .n { background: var(--lp-green); }
.lp-steps li.done { color: var(--lp-green-dark); }
@media (max-width: 860px) {
    /* Sem espaço pros quatro rótulos: fica o número de cada passo e o nome só do
       passo atual, que é a informação que o cliente precisa. */
    .lp-steps li .t { display: none; }
    .lp-steps li.on .t { display: inline; }
    .lp-steps li + li::before { flex-basis: 34px; margin: 0 10px; }
}

.lp-seguro {
    display: flex; align-items: center; gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--lp-green-soft);
    border: 1px solid rgba(22,163,74,.18);
    border-radius: 10px;
    color: var(--lp-green-dark);
}
.lp-seguro strong { display: block; font-size: 13px; }
.lp-seguro span { font-size: 11.5px; color: var(--lp-muted); }

/* Botões que fecham a compra também em verde */
#btn-checkout, #btn-confirm {
    background: var(--lp-green) !important;
    border-color: var(--lp-green) !important;
    color: #fff !important;
    font-weight: 700;
    height: 48px;
    border-radius: 10px;
}
#btn-checkout:hover:not(:disabled), #btn-confirm:hover:not(:disabled) {
    background: var(--lp-green-dark) !important;
    border-color: var(--lp-green-dark) !important;
}
/* width:100% é obrigatório: o wrap é filho flex do body e `margin: 0 auto` no
   eixo transversal cancela o stretch — sem isso a barra encolhia pro tamanho do
   conteúdo e a trilha nunca chegava na largura que o max-width dela permite. */
.lp-steps-wrap { max-width: var(--shop-max, 1440px); width: 100%; margin: 0 auto; padding: 22px var(--shop-gutter, 24px) 0; }

@media (max-width: 700px) {
    /* Números em 2 colunas: o quinto ficaria sozinho numa linha inteira */
    .lp-numeros { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .lp-numero { padding: 12px 8px; }
    .lp-numero .v { font-size: 19px; line-height: 1.2; }
    .lp-numero .r { font-size: 11px; }
    .lp-numeros > :nth-child(n+5) { display: none; }
}
#a-submit {
    background: var(--lp-green) !important;
    border-color: var(--lp-green) !important;
    color: #fff !important;
    border-radius: 10px;
}
#a-submit:hover:not(:disabled) { background: var(--lp-green-dark) !important; border-color: var(--lp-green-dark) !important; }

/* ============ 17. Telas muito estreitas (≤ 380px) ============ */

/* Item flex nasce com min-width:auto e não encolhe abaixo do tamanho do texto:
   num iPhone SE o campo de e-mail empurrava o botão pra fora da tela. */
.lp-news input { min-width: 0; }
.lp-news form { flex-wrap: wrap; }
.lp-news button { flex: 0 0 auto; }

@media (max-width: 420px) {
    .lp-news input { flex: 1 1 100%; }
    .lp-news button { flex: 1 1 100%; }
}

@media (max-width: 380px) {
    /* O balão do WhatsApp tinha largura fixa e vazava pela direita */
    .wa-bubble { max-width: calc(100vw - 84px); }
    /* Barra fixa de compra: o botão encolhe antes de empurrar o preço pra fora */
    .product-sticky-cta .mac-btn { flex: 1 1 auto; min-width: 0; padding-left: 12px; padding-right: 12px; font-size: 13.5px; }
    .product-sticky-cta .price-info { min-width: 0; }
    .lp-section, .lp-prova, .lp-steps-wrap { padding-left: 14px; padding-right: 14px; }
    .lp-prova-box, .lp-passos-box { padding-left: 12px; padding-right: 12px; }
    .lp-card .lp-body { padding: 9px; }
    .lp-card .lp-price { font-size: 16px; }
    .lp-card .lp-avista { font-size: 11px; padding: 3px 6px; }
    .lp-qty-opt { min-width: 54px; padding: 8px 9px; font-size: 13px; }
}

@media (max-width: 340px) {
    /* Abaixo disso, dois cards por linha deixam o preço ilegível */
    .lp-grid { grid-template-columns: 1fr; }
    .lp-trust-inner { grid-template-columns: 1fr; }
}

/* ============ 18. Versão para computador em celular/tablet ============ */

/* Ligado no painel (settings.catalog.forcarDesktop), o modo é aplicado por
   /js/viewport.js: a página é diagramada em 1280px e o navegador encolhe tudo
   para caber. O que segue devolve tamanho de dedo ao que é fixo na tela. */

/* A barra de cookies e o balão do WhatsApp são fixos na tela: em modo desktop
   eles seriam desenhados a 1280px e ficariam minúsculos junto com o resto. */
.view-desktop .cookie-text strong { font-size: 17px; }
.view-desktop .cookie-text p { font-size: 15px; }
.view-desktop .cookie-actions .mac-btn { font-size: 16px; padding: 12px 26px; }
.view-desktop .wa-float-btn { width: 76px; height: 76px; }
.view-desktop .wa-float-btn svg { width: 40px; height: 40px; }

/* Selos e meios de envio em arte, não em texto */
.lp-selos .row.selos, .lp-selos .row.envios { gap: 10px; }
/* Sem cartão branco atrás: as artes já vêm com o fundo que a marca pede
   (o selo de SSL é claro, os logotipos de envio são chapados) e a moldura
   branca só abria uma sobra irregular em volta de cada uma. */
.lp-selo-img {
    height: 52px;
    width: auto;
    display: block;
}
/* Logotipo de transportadora se mede pela largura, não pela altura: o SEDEX é
   uma tarja baixa e comprida, a Jadlog é quase quadrada — igualando a altura,
   um fica do dobro do tamanho do outro na mesma linha. */
.lp-selos .row.envios .lp-selo-img { width: 112px; height: auto; max-height: 46px; }
@media (max-width: 700px) {
    .lp-selo-img { height: 46px; }
    .lp-selos .row.envios .lp-selo-img { width: 96px; max-height: 40px; }
}

/* Coluna de atendimento do rodapé */
.footer-col .fc-contato { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col .fc-contato li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.footer-col .fc-contato svg { width: 15px; height: 15px; color: var(--accent); flex: 0 0 auto; }
.footer-col .fc-contato a { color: inherit; text-decoration: none; }
.footer-col .fc-contato a:hover { color: var(--accent); text-decoration: underline; }
/* Bandeiras de pagamento maiores na faixa de selos — na coluna do rodapé elas
   eram legenda; aqui são a informação principal. */
.lp-selos .pay-pill {
    height: auto;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--lp-line);
    background: #fff;
}
.lp-selos .pay-pill img, .lp-selos .pay-pill svg { height: 26px; }
/* No rodapé geral a bandeira é legenda e encolhe pra 16px; aqui ela é a
   informação da coluna, e a 16px o Pix e o boleto viram borrão. */
@media (max-width: 700px) {
    .lp-selos .pay-pill img, .lp-selos .pay-pill svg { height: 20px !important; }
}

/* ============ Gabarito no topo, colado no preço ============
   Saiu do bloco de arte lá embaixo (cartão com miniatura e dois parágrafos de
   instrução) e virou uma linha só: quem entende de gabarito baixa e vai
   desenhar, sem ler nada e sem rolar a página inteira até achar o arquivo. */
.gabarito-topo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 4px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-elevated, #fff);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.35;
    transition: border-color .15s, background .15s;
}
.gabarito-topo:hover { border-color: var(--accent, #2f6df6); background: var(--bg-hover, rgba(47,109,246,.05)); }
.gabarito-topo svg { flex: 0 0 auto; color: var(--accent, #2f6df6); }
.gabarito-topo b { display: block; font-size: 13.5px; font-weight: 650; }
.gabarito-topo span { color: var(--text-secondary); }

/* O botão de anexar é a ação principal do bloco de arte. As medidas são as
   MESMAS do convite do prompt logo abaixo (padding, gap, tamanho da fonte):
   os dois formam um par colado, e um par em que as metades têm alturas
   diferentes lê como duas coisas soltas, que era o defeito. */
.btn-anexar-arte {
    width: 100%;
    justify-content: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 14px;
    font-size: 13.5px;
    font-weight: 700;
}

/* ============ Quantidade + valor unitário (topo do produto) ============
   Substituiu a fileira de cartões de pacote. Um campo, um número grande — o
   unitário, que é o que muda com a quantidade — e o empurrão do próximo degrau
   logo abaixo. O total continua no preço acima e na caixa de fechamento. */
.qty-preco {
    margin: 14px 0 6px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-elevated, #fff);
}
.qp-linha {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.qp-campo { flex: 0 0 auto; }
.qp-campo.qp-so { flex: 1 1 auto; }
.qp-campo .bf-label { margin-bottom: 6px; }
.qp-campo .qty-hint { display: block; margin-top: 6px; font-size: 11.5px; color: var(--text-secondary); }

/* O campo de QUANTIDADE é o controle principal desta página (26/08/2026,
   pedido do Ramon), e vinha no tamanho do mesmo controle que aparece na linha
   de um item do carrinho — onde ele é um ajuste miúdo. Aqui ele é a escolha que
   define o preço, o degrau de desconto e o botão de comprar: quem digita "500"
   precisa ver os três dígitos com folga, e quem usa o + e o − no celular precisa
   de alvo de dedo. Escopado em `.qty-preco` de propósito — o do carrinho e o da
   conta continuam como estavam. */
.qty-preco .qty-control { border-width: 1.5px; }
.qty-preco .qty-control button { width: 52px; height: 52px; font-size: 24px; font-weight: 500; }
/* Altura explícita para o campo ocupar a barra inteira: sem ela o input tem 28px
   dentro de um controle de 54, e o toque entre o número e a borda de cima não
   põe o cursor no campo — no celular isso lê como "não dá pra digitar aqui",
   que é justamente o contrário do que o rótulo passou a prometer. */
.qty-preco .qty-control input { width: 118px; height: 52px; font-size: 22px; font-weight: 700; }
.qty-preco .qp-campo .bf-label { font-size: 13px; font-weight: 600; }
.qp-unit { flex: 1 1 auto; text-align: right; min-width: 130px; }
.qp-unit b {
    display: block;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
.qp-unit b s { font-size: 15px; font-weight: 500; color: var(--text-tertiary); margin-right: 5px; }
.qp-unit span { font-size: 12.5px; color: var(--text-secondary); }
/* Sem variação escolhida o preço não existe ainda — e a faixa "R$ 25 – R$ 32"
   era o número que ninguém pode pagar. O traço diz que falta uma escolha, e a
   linha embaixo diz qual; os dois preços já estão nas pílulas do seletor. */
.qp-unit.falta b { color: var(--text-tertiary); font-weight: 500; }
.qp-unit.falta span { color: var(--orange, #c47b12); }


/* O degrau é um botão: clicar já leva a quantidade para lá. Ele reaproveita o
   `data-pacote-qty` que os cartões usavam, então não há segundo caminho de
   aplicar quantidade — e portanto não há um que um dia deixe de medir o evento. */
.qp-degrau {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px dashed var(--accent, #2f6df6);
    border-radius: 11px;
    background: var(--bg-hover, rgba(47,109,246,.06));
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.qp-degrau:hover { background: var(--bg-hover-strong, rgba(47,109,246,.12)); border-style: solid; }
.qp-degrau svg { flex: 0 0 auto; color: var(--accent, #2f6df6); }
.qp-degrau span { flex: 1 1 auto; line-height: 1.35; }
.qp-degrau b { font-weight: 700; }
.qp-degrau em { flex: 0 0 auto; font-style: normal; font-size: 12px; font-weight: 650; color: var(--accent, #2f6df6); white-space: nowrap; }

@media (max-width: 480px) {
    .qp-unit { text-align: left; width: 100%; }
    .qp-unit b { font-size: 24px; }
    .qp-degrau em { display: none; }
}

/* ============ Cor com mínimo próprio ============
   A mesma peça pode sair por dois processos com lotes diferentes (o Eco Label
   branco em UV a partir de 30 un; as demais cores só em lote fechado de 1.000).
   A cor fora de alcance fica VISÍVEL e esmaecida, com o número em cima: cor
   escondida é cor que ninguém sabe que existe. */
.cor-sw.travada { opacity: .42; filter: grayscale(.55); }
.cor-sw.travada:hover { opacity: .72; filter: grayscale(.2); }
.cor-sw .lock {
    position: absolute;
    right: -3px;
    bottom: -3px;
    min-width: 17px;
    height: 15px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--text-primary, #111);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    letter-spacing: -0.02em;
}
/* O mesmo selo, do lado de quem PODE comprar: verde é permissão, escuro é
   limite. Sem essa diferença, o "30" da cor liberada leria como mais uma
   trava — e a bolinha branca é justamente a que está à venda hoje. */
.cor-sw .lock.ok {
    background: var(--lp-green, #0a8a4a);
    box-shadow: 0 0 0 1.5px var(--bg-elevated, #fff);
}
.var-pill.travada { opacity: .55; }
.var-pill.travada .vp-preco { font-weight: 600; }

/* O convite: quantas cores esperam do outro lado e a partir de quanto. Clicar
   leva a quantidade até lá — pelo mesmo `data-pacote-qty` do degrau de preço,
   que é o único caminho que aplica quantidade e mede o evento. */
.cor-trava-aviso {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 9px 12px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.cor-trava-aviso:hover { border-color: var(--accent, #2f6df6); color: var(--text-primary); }
.cor-trava-aviso span { flex: 1 1 auto; }
.cor-trava-aviso b { color: var(--text-primary); font-weight: 650; }
.cor-trava-aviso em { font-style: normal; font-size: 12px; font-weight: 650; color: var(--accent, #2f6df6); }

/* O "Adicionar ao carrinho" mora junto da quantidade, no topo: é ali que o
   cliente decide quanto comprar, e o botão a uma tela de distância obrigava a
   rolar de volta depois de já ter decidido. Os avisos de "por que está apagado"
   vieram junto — aviso longe do botão que ele explica não explica nada. */
.qp-add {
    width: 100%;
    justify-content: center;
    margin-top: 12px;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 650;
}
.qty-preco .bf-avisos { margin-top: 10px; }

/* O prazo por extenso fechando o termo de aceite do checkout. Fundo próprio
   porque ele NÃO é mais um item da lista jurídica — é a resposta a "quando
   chega?", que é a pergunta que sobra na última tela antes do pagamento. */
.pz-ciencia {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 12px;
    padding: 12px;
    border-radius: 8px;
    border: 0.5px solid var(--border);
    background: var(--bg-elevated);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-secondary);
}
.pz-ciencia svg { flex: 0 0 auto; margin-top: 2px; color: var(--accent, #2f6df6); }
.pz-ciencia b { color: var(--text-primary); font-weight: 650; }
.pz-ciencia small { color: var(--text-tertiary); font-size: 11.5px; }

/* O prazo em uma linha, no topo do produto: o número que decide se vale seguir,
   e ao lado a saída para quem não pode esperar. */
.prazo-topo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 10px 0 2px;
    font-size: 13px;
    color: var(--text-secondary);
}
.prazo-topo > svg { flex: 0 0 auto; color: var(--text-tertiary); }
.prazo-topo b { color: var(--text-primary); font-weight: 650; }
.prazo-topo .pt-whats {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 0.5px solid var(--border);
    background: var(--bg-elevated, #fff);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    transition: border-color .15s, color .15s;
}
.prazo-topo .pt-whats:hover { border-color: #25d366; color: var(--text-primary); }
.prazo-topo .pt-whats svg { flex: 0 0 auto; color: #25d366; }

/* "Precisa para antes?" — o atalho de WhatsApp colado no prazo de produção.
   Pequeno de propósito: é a saída para quem PRECISA dela (a festa é sábado),
   não um convite para sair da loja no meio da compra. */
.pz-whats {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 0.5px solid var(--border);
    background: var(--bg-elevated, #fff);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 11.5px;
    line-height: 1.2;
    transition: border-color .15s, color .15s;
}
.pz-whats:hover { border-color: #25d366; color: var(--text-primary); }
.pz-whats svg { flex: 0 0 auto; color: #25d366; }
.pz-whats b { font-weight: 650; color: var(--text-primary); }

/* O que sobrou do bloco de baixo: só o "Começar de novo", que é destrutivo e
   por isso não pode ficar encostado no botão de comprar. */
.buy-box.buy-box-fim { padding-top: 4px; }
.buy-box.buy-box-fim .bf-recomecar { margin-top: 0; }