/*
    assets/css/produto-3d.css — "VER EM 3D" na página do produto (26/10/2026, projeto aprovado pelo CW)

    O botão fica dentro da foto principal; a modal é montada pelo produto-3d.js só no clique.
    Tudo com o prefixo p3d- para não esbarrar em nada do site. As cores vêm das variáveis da casa
    (--cor-marca etc.), com valor de reserva ao lado.
*/

/* ── o botão, no canto de baixo à esquerda da foto (o coração fica em cima) ── */
.p3d-btn {
    position: absolute; left: 12px; bottom: 12px; z-index: 5;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px 9px 11px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .55);
    background: var(--cor-marca, #008a20); color: #fff;
    font: 700 13.5px/1 var(--fonte, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    letter-spacing: .01em; cursor: pointer;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .28);
    transition: transform .12s, filter .12s;
}
.p3d-btn:hover { transform: translateY(-1px); filter: brightness(1.07); }
.p3d-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px var(--cor-marca, #008a20); }
.p3d-btn svg { flex: none; }
/* com o carrossel (layout rede social) o canto de baixo tem as bolinhas ao centro: o botão fica à esquerda, sem conflito */
/* na página do produto o contador "1/6" do carrossel (.cwpc-counter) mora no mesmo canto: o botão sobe acima dele (CW 26/10/2026) */
.cwpc-counter ~ .p3d-btn { bottom: 42px; }

/* ── a modal ── */
html.p3d-aberto { overflow: hidden; }
.p3d-fundo {
    position: fixed; inset: 0; z-index: 2147483000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .74);
    padding: 16px;
    animation: p3d-entra .18s ease-out;
}
@keyframes p3d-entra { from { opacity: 0; } to { opacity: 1; } }
.p3d-caixa {
    position: relative; display: flex; flex-direction: column;
    width: min(980px, 100%); height: min(86vh, 780px);
    background: var(--cor-fundo, #fff); color: var(--cor-texto, #0f172a);
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
    font: 400 14px/1.4 var(--fonte, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
.p3d-topo {
    flex: none; display: flex; align-items: center; gap: 10px;
    padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--cor-borda, #e2e8f0);
}
.p3d-titulo { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p3d-titulo small { font-weight: 500; color: var(--cor-texto-suave, #475569); margin-left: 6px; }
.p3d-bt {
    flex: none; display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 13px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--cor-marca, #008a20); background: var(--cor-marca, #008a20); color: #fff;
    font-family: inherit; font-weight: 700; font-size: 13px; line-height: 1;
}
.p3d-bt:hover { filter: brightness(1.07); }
.p3d-bt[disabled] { opacity: .55; cursor: progress; }
.p3d-bt--fino { background: #fff; color: var(--cor-texto, #0f172a); border-color: var(--cor-borda-forte, #cbd5e1); font-weight: 600; }
.p3d-bt svg { width: 17px; height: 17px; flex: none; }
.p3d-x {
    flex: none; width: 36px; height: 36px; border-radius: 10px; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--cor-borda, #e2e8f0); background: var(--cor-fundo-suave, #f8fafc); color: var(--cor-texto-suave, #475569);
}
.p3d-x:hover { border-color: var(--cor-alerta, #dc2626); color: var(--cor-alerta, #dc2626); }
.p3d-x svg { width: 18px; height: 18px; }

/* o palco: o iframe do visor, sem borda, sem rolagem */
.p3d-palco { position: relative; flex: 1; min-height: 0; background: linear-gradient(#f8fafc, #eef2f7); }
.p3d-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: transparent; }
.p3d-carrega {
    position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    background: linear-gradient(#f8fafc, #eef2f7); color: var(--cor-texto-suave, #475569); font-weight: 600;
    transition: opacity .25s;
}
.p3d-carrega.some { opacity: 0; pointer-events: none; }
.p3d-gira-icone { width: 38px; height: 38px; border-radius: 50%; border: 4px solid var(--cor-borda, #e2e8f0); border-top-color: var(--cor-marca, #008a20); animation: p3d-gira .9s linear infinite; }
@keyframes p3d-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .p3d-gira-icone { animation-duration: 2.4s; } .p3d-fundo { animation: none; } }

/* as vistas */
.p3d-vistas {
    flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    padding: 10px 12px; border-top: 1px solid var(--cor-borda, #e2e8f0);
}
.p3d-vista {
    padding: 8px 14px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--cor-borda-forte, #cbd5e1); background: #fff; color: var(--cor-texto, #0f172a);
    font-family: inherit; font-weight: 600; font-size: 13px; line-height: 1;
}
.p3d-vista:hover { border-color: var(--cor-marca, #008a20); }
.p3d-vista[aria-pressed="true"] { background: var(--cor-marca, #008a20); border-color: var(--cor-marca, #008a20); color: #fff; }
.p3d-vista[disabled] { opacity: .5; cursor: default; }
.p3d-vista--gira { display: inline-flex; align-items: center; gap: 6px; }

/* o painel de compartilhar: uma folha que sobe do pé da modal */
.p3d-painel {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; max-height: 78%; overflow: auto;
    background: var(--cor-fundo, #fff); border-top: 1px solid var(--cor-borda, #e2e8f0);
    box-shadow: 0 -14px 34px rgba(15, 23, 42, .22); padding: 14px 16px 16px;
    animation: p3d-sobe .18s ease-out;
}
.p3d-painel[hidden] { display: none; }
@keyframes p3d-sobe { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.p3d-painel h3 { margin: 0 0 10px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.p3d-painel h3 span { flex: 1; }
.p3d-redes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.p3d-rede {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 44px; height: 44px; padding: 0 12px; border-radius: 12px; cursor: pointer; text-decoration: none;
    border: 1px solid var(--cor-borda-forte, #cbd5e1); background: #fff; color: var(--cor-texto, #0f172a);
    font-family: inherit; font-weight: 600; font-size: 12.5px; line-height: 1;
}
.p3d-rede svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.p3d-rede:hover { border-color: var(--cor-marca, #008a20); color: var(--cor-marca, #008a20); }
.p3d-rede--whatsapp { color: #128c4a; } .p3d-rede--facebook { color: #1877f2; } .p3d-rede--telegram { color: #229ed9; }
.p3d-rede--pinterest { color: #e60023; } .p3d-rede--x { color: #111; }
.p3d-rede.is-ok { background: var(--cor-marca, #008a20); border-color: var(--cor-marca, #008a20); color: #fff; }
.p3d-link { display: flex; gap: 8px; margin: 0 0 12px; }
.p3d-link input {
    flex: 1; min-width: 0; padding: 9px 10px; border: 1px solid var(--cor-borda, #e2e8f0); border-radius: 10px;
    background: var(--cor-fundo-suave, #f8fafc); color: var(--cor-texto, #0f172a); font: 12.5px/1.2 ui-monospace, Menlo, Consolas, monospace;
}
.p3d-midia { display: flex; flex-wrap: wrap; gap: 8px; }
.p3d-midia .p3d-bt { flex: 1 1 180px; justify-content: center; }
.p3d-dica { margin: 10px 0 0; font-size: 12px; color: var(--cor-texto-suave, #475569); }
.p3d-dica.ruim { color: var(--cor-alerta, #dc2626); }

/* celular: a modal ocupa a tela quase toda */
@media (max-width: 640px) {
    .p3d-fundo { padding: 6px; }
    .p3d-caixa { width: 100%; height: calc(100vh - 12px); height: calc(100dvh - 12px); border-radius: 14px; }
    .p3d-topo { padding: 8px 8px 8px 12px; gap: 8px; }
    .p3d-bt { padding: 8px 10px; font-size: 12.5px; }
    .p3d-titulo small { display: none; }
    .p3d-vistas { gap: 6px; padding: 8px; }
    .p3d-vista { padding: 8px 11px; font-size: 12.5px; }
    .p3d-btn { left: 10px; bottom: 10px; padding: 8px 12px 8px 10px; }
}

/* ── o botão nos CARDS das listagens (26/10/2026, pedido do CW) ──
   Mesmo botão, menor, no canto de baixo à esquerda da FOTO do card. O card é um <a> com a foto quadrada em cima: a
   .p3d-moldura cobre só a área da foto (igual à máscara .cw-produto::after) e não recebe clique; o botão dentro dela
   recebe. O canto de cima à direita é do coração, os de cima à esquerda e de baixo à direita são da máscara. */
.p3d-moldura {
    position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1 / 1;
    z-index: 3; pointer-events: none;
}
.p3d-btn--card {
    left: 8px; bottom: 8px; z-index: 3; pointer-events: auto;
    padding: 6px 10px 6px 8px; gap: 5px; font-size: 12px; text-decoration: none;
    user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.p3d-btn--card svg { width: 15px; height: 15px; }
/* no layout "rede social" a mídia não é link: é um <button> de verdade dentro da .ls-media (o canto de baixo tem as bolinhas ao centro) */
.p3d-btn--post { left: 10px; bottom: 10px; }
@media (max-width: 480px) {
    .p3d-btn--card { left: 6px; bottom: 6px; padding: 5px 9px 5px 7px; font-size: 11.5px; }
}

/* 26/10/2026 (CW): o texto do botão sumia (o estilo dos posts pintava de verde): branco e negrito em TODOS os
   botões de 3D, com sombra leve para ler sobre qualquer foto; o ícone é a seta girando com "3D" no meio */
.p3d-btn, .p3d-btn span, .ls-media .p3d-btn, a .p3d-btn { color: #fff !important; font-weight: 800 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35); background: var(--cor-marca, #008a20) !important; }
.p3d-btn svg { stroke: #fff; color: #fff; }
.p3d-btn svg text { fill: #fff; }

/* 26/10/2026 (CW): a logo do site no canto de cima à esquerda do palco, por cima do 3D, sem pegar o clique */
.p3d-logo { position: absolute; top: 12px; left: 14px; z-index: 3; width: clamp(84px, 13%, 170px); height: auto;
    pointer-events: none; user-select: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
@media (max-width: 480px) { .p3d-logo { top: 8px; left: 10px; width: 78px; } }