/* ================================================================
   PROVADOR WISC — Fase 10.5.18

   Carregado em toda pagina de produto. O modal nasce com [hidden],
   entao nao ocupa espaco nem pinta nada ate' ser aberto.
================================================================ */

.provador[hidden]{
    display:none;
}

.provador{
    position:fixed;
    inset:0;
    z-index:120;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:28px;
}

/*
   Trava a rolagem do fundo enquanto o provador esta aberto. Sem isso,
   rolar dentro do modal "vaza" para a pagina atras assim que o
   conteudo do modal acaba.
*/
body.provador-aberto{
    overflow:hidden;
}

.provador-fundo{
    position:absolute;
    inset:0;
    background:rgba(5,5,5,.62);
    backdrop-filter:blur(3px);
}

.provador-caixa{
    position:relative;
    z-index:1;

    width:min(1040px, 100%);

    /*
       O modal e' item de um flex container (.provador). Item de flex
       nasce com min-width:auto, ou seja, se recusa a encolher abaixo
       da largura minima do proprio conteudo -- e a tabela de medidas
       tem 440px de minimo. Em 390px isso empurrava a caixa para fora
       da tela dos dois lados. min-width:0 devolve o direito de
       encolher; quem rola horizontalmente e' so' a tabela.
    */
    min-width:0;

    /* ------------------------------------------------------------
       ALTURA DINAMICA — 05/09/2026

       100vh no celular NAO e' a altura visivel. E' a altura da tela
       COM a barra de endereco recolhida -- uma altura que, no momento
       em que a pessoa abre o modal, ainda nao existe. O modal nasce
       maior que o buraco onde ele cabe, e o topo ("PROVADOR WISC")
       fica meio comido pela borda de cima.

       100dvh e' a mesma medida, mas VIVA: encolhe e cresce junto com
       a barra do navegador. O vh fica de sobrevivente para navegador
       antigo, porque quem nao entende dvh ignora a segunda linha e
       fica com a primeira.
    ------------------------------------------------------------ */
    max-height:calc(100vh - 56px);
    max-height:calc(100dvh - 56px);

    /* ------------------------------------------------------------
       SO' ROLA PARA BAIXO — 03/09/2026

       Em 390px o conteudo do modal aparecia cortado do lado
       ESQUERDO: o titulo comecava em "AL E' O SEU TAMANHO".

       Conteudo cortado a' esquerda e' assinatura de rolagem
       horizontal ja' deslocada para a direita, nao de vazamento. E a
       rolagem existia por um detalhe do CSS que quase ninguem
       lembra: declarar so' overflow-y:auto NAO deixa o x em
       "visible". Como as duas nao podem discordar, o navegador
       promove o x a "auto" sozinho. A caixa virou um rolador lateral
       sem ninguem pedir, e bastou o navegador trazer um campo com
       foco para a vista para ela deslizar.

       overflow-x:hidden encerra o assunto. Nada e' perdido: quem
       precisa de largura e' a tabela de medidas, e ela tem o proprio
       rolador (.provador-tabela-rolagem).
    ------------------------------------------------------------ */
    overflow-y:auto;
    overflow-x:hidden;

    padding:38px 40px 34px;

    border-radius:28px;
    background:#fff;
    box-shadow:0 40px 120px rgba(0,0,0,.34);
}

.provador-fechar{
    position:absolute;
    top:18px;
    right:18px;

    width:40px;
    height:40px;
    display:grid;
    place-items:center;

    border:1px solid rgba(0,0,0,.12);
    border-radius:999px;
    background:#fff;

    font-size:1.5rem;
    line-height:1;
    color:#111;
    cursor:pointer;

    transition:background .2s ease, border-color .2s ease;
}

.provador-fechar:hover{
    background:#f2f2ef;
    border-color:rgba(0,0,0,.28);
}

/* ---------------- topo ---------------- */

.provador-topo{
    max-width:560px;
    margin-bottom:30px;
}

.provador-topo p{
    font-family:var(--font-title);
    font-size:.66rem;
    font-weight:900;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:#8a8a84;
}

.provador-topo h2{
    margin:10px 0 12px;
    font-family:var(--font-title);
    font-size:clamp(1.7rem, 3.4vw, 2.5rem);
    font-weight:900;
    letter-spacing:.02em;
    line-height:1.05;
    text-transform:uppercase;
    color:#111;
}

.provador-topo span{
    display:block;
    color:#555;
    line-height:1.65;
}

/* ---------------- corpo ---------------- */

.provador-corpo{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:30px;
    align-items:stretch;
}

.provador-palco{
    position:relative;
    min-height:420px;

    border-radius:22px;
    background:
        radial-gradient(circle at 50% 22%, rgba(255,255,255,.96), transparent 46%),
        linear-gradient(180deg,#f6f6f3 0%,#e6e6e0 100%);

    overflow:hidden;
}

.provador-cena{
    position:absolute;
    inset:0;
    cursor:grab;

    /*
       pan-y deixa a pagina rolar com o dedo por cima do manequim; o
       proprio script segura o gesto so' quando esta girando.
    */
    touch-action:pan-y;
}

.provador-cena:active{
    cursor:grabbing;
}

.provador-cena canvas{
    display:block;
}

.provador-cena-aviso{
    position:absolute;
    inset:0;

    display:grid;
    place-content:center;
    gap:6px;
    padding:24px;
    text-align:center;
}

.provador-cena-aviso[hidden]{
    display:none;
}

.provador-cena-aviso strong{
    font-family:var(--font-title);
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#111;
}

.provador-cena-aviso span{
    font-size:.86rem;
    color:#666;
    line-height:1.5;
}

.provador-cena-dica{
    position:absolute;
    left:50%;

    /* Desceu de 14 para 10: a etiqueta pousava sobre os pes. A outra
       metade da correcao esta na camera (ver o comentario em
       aplicarPedido) -- so' baixar aqui nao bastava no palco de
       300px do celular. */
    bottom:10px;
    transform:translateX(-50%);

    padding:6px 13px;
    border-radius:999px;
    background:rgba(5,5,5,.62);
    color:#fff;

    font-family:var(--font-title);
    font-size:.58rem;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
    white-space:nowrap;

    pointer-events:none;
}

/* ---------------- controles ---------------- */

.provador-controles{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.provador-campo{
    display:grid;
    gap:10px;
}

.provador-campo label,
.provador-rotulo{
    font-family:var(--font-title);
    font-size:.66rem;
    font-weight:900;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#111;
}

.provador-campo-linha{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 108px;
    gap:14px;
    align-items:center;
}

.provador-campo-linha output{
    font-family:var(--font-title);
    font-size:.92rem;
    font-weight:900;
    text-align:right;
    color:#111;
}

/*
   A CAIXINHA DE DIGITAR

   Barra e caixinha sao dois rostos do mesmo valor. Quem esta'
   explorando arrasta; quem ja' sabe o proprio numero digita e pronto.

   As setinhas nativas do input[type=number] sao removidas de
   proposito: elas roubam largura util num campo estreito e ninguem
   ajusta altura de 1 em 1 clicando. A barra ao lado ja' faz esse
   papel muito melhor.
*/
.provador-numero{
    display:flex;
    align-items:center;
    gap:5px;
    min-width:0;
}

.provador-numero input{
    width:100%;
    min-width:0;

    padding:9px 6px;

    border:1px solid rgba(0,0,0,.16);
    border-radius:12px;
    background:#fff;

    font-family:var(--font-title);
    font-size:.92rem;
    font-weight:900;
    text-align:center;
    color:#111;

    -moz-appearance:textfield;
    appearance:textfield;

    transition:border-color .2s ease, box-shadow .2s ease;
}

.provador-numero input::-webkit-outer-spin-button,
.provador-numero input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}

.provador-numero input:focus{
    outline:none;
    border-color:#111;
    box-shadow:0 0 0 3px rgba(0,0,0,.09);
}

.provador-numero span{
    flex:0 0 auto;
    font-family:var(--font-title);
    font-size:.6rem;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:#8a8a84;
}

.provador-campo input[type="range"]{
    width:100%;
    min-width:0;
    accent-color:#111;
    cursor:pointer;
}

.provador-caimentos{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
}

.provador-caimento{
    padding:11px 6px;

    border:1px solid rgba(0,0,0,.14);
    border-radius:999px;
    background:#fff;
    color:#555;

    font-size:.78rem;
    cursor:pointer;

    transition:background .2s ease, color .2s ease, border-color .2s ease;
}

.provador-caimento:hover{
    border-color:rgba(0,0,0,.34);
}

.provador-caimento.ativo{
    background:#111;
    border-color:#111;
    color:#fff;
    font-weight:700;
}

.provador-resultado{
    margin-top:auto;
    padding:22px;

    display:grid;
    gap:6px;

    border-radius:22px;
    background:#f6f6f3;
    border:1px solid rgba(0,0,0,.08);
}

.provador-resultado p{
    font-family:var(--font-title);
    font-size:.62rem;
    font-weight:900;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#8a8a84;
}

.provador-resultado strong{
    font-family:var(--font-title);
    font-size:3rem;
    font-weight:900;
    line-height:1;
    color:#111;
}

.provador-resultado span{
    font-size:.86rem;
    color:#555;
    line-height:1.55;
}

.provador-usar{
    width:100%;
    min-height:56px;

    border:none;
    border-radius:999px;
    background:#111;
    color:#fff;

    font-family:var(--font-title);
    font-size:.76rem;
    font-weight:900;
    letter-spacing:.16em;
    text-transform:uppercase;
    cursor:pointer;

    transition:background .2s ease;
}

.provador-usar:hover{
    background:#000;
}

/* ---------------- tabela ---------------- */

.provador-tabela-bloco{
    margin-top:34px;
    padding-top:30px;
    border-top:1px solid rgba(0,0,0,.09);
}

.provador-tabela-bloco h3{
    margin-bottom:10px;
    font-family:var(--font-title);
    font-size:.78rem;
    font-weight:900;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#111;
}

/*
   Qual modelagem esta peca usa. Nao e' aviso de erro nem alerta: e'
   contexto. Por isso fica em cinza neutro, e nao no amarelo que o
   aviso de estimativa usa logo abaixo.
*/
.provador-modelagem{
    margin-bottom:16px;
    color:#555;
    font-size:.86rem;
    line-height:1.6;
}

.provador-modelagem strong{
    color:#111;
    font-weight:700;
}

/* O porque do travessao na coluna Manga (caso da Bossa). */
.provador-nota-manga{
    margin-top:12px;
    color:#666;
    font-size:.8rem;
    line-height:1.6;
}

.provador-aviso-medidas{
    margin-bottom:16px;
    padding:13px 16px;

    border-radius:16px;
    background:#fdf8ee;
    border:1px solid rgba(160,120,20,.2);
    color:#7a5c12;

    font-size:.84rem;
    line-height:1.55;
}

/*
   A tabela rola sozinha em vez de espremer as colunas. Cinco colunas
   de numero em 390px ficariam ilegiveis se tentassem caber todas.
*/
.provador-tabela-rolagem{
    overflow-x:auto;

    /* Item de grid/flex nasce com min-width:auto e se recusa a
       encolher abaixo do conteudo -- aqui, os 440px da tabela. Sem
       isto ela empurra a largura do modal inteiro em vez de rolar
       dentro de si. */
    min-width:0;
}

.provador-tabela{
    width:100%;
    min-width:440px;
    border-collapse:collapse;
}

.provador-tabela th,
.provador-tabela td{
    padding:13px 14px;
    text-align:left;
    border-bottom:1px solid rgba(0,0,0,.07);
    white-space:nowrap;
}

.provador-tabela thead th{
    font-family:var(--font-title);
    font-size:.62rem;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#8a8a84;
}

.provador-tabela tbody th{
    font-family:var(--font-title);
    font-weight:900;
    color:#111;
}

.provador-tabela tbody td{
    color:#555;
}

/* A linha do tamanho recomendado acompanha o que o provador calcula. */
.provador-tabela tbody tr.destacada{
    background:#f0f7f1;
}

.provador-tabela tbody tr.destacada th,
.provador-tabela tbody tr.destacada td{
    color:#1e6e3c;
}

.provador-como-medir{
    margin-top:26px;
}

.provador-como-medir h4{
    margin-bottom:10px;
    font-family:var(--font-title);
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#111;
}

.provador-como-medir p{
    margin-bottom:14px;
    color:#555;
    line-height:1.7;
}

.provador-como-medir ul{
    display:grid;
    gap:9px;
    padding-left:18px;
    color:#555;
    line-height:1.6;
}

.provador-como-medir strong{
    color:#111;
}

/* ---------------- telas menores ---------------- */

@media (max-width:900px){

    .provador{
        padding:0;
    }

    .provador-caixa{
        width:100%;
        max-height:100vh;
        max-height:100dvh;
        border-radius:0;
        padding:30px 22px 26px;
    }

    /*
       Reserva a faixa do botao de fechar. Sem isso o titulo passa por
       baixo do X assim que a tela fica estreita.
    */
    .provador-topo{
        padding-right:46px;
        margin-bottom:24px;
    }

    .provador-corpo{
        grid-template-columns:minmax(0, 1fr);
        gap:22px;
    }

    .provador-palco{
        min-height:340px;
    }

}

@media (max-width:430px){

    .provador-caixa{
        padding:24px 16px 22px;
    }

    .provador-topo{
        margin-bottom:20px;
    }

    /* ------------------------------------------------------------
       A ETIQUETA GANHA UMA FAIXA SO' DELA — 03/09/2026

       Recuar a camera resolveu no desktop e nao resolveu em 390px, e
       a conta explica: sobram 10% da moldura abaixo dos pes, que num
       palco de 285px sao 28 px -- e a etiqueta ocupa 34.

       Da' para continuar limando pixel (fonte menor, padding menor,
       bottom menor) ate' caber por um fio. Nao vale: qualquer mudanca
       futura de fonte ou de altura de palco reabre o problema, e o
       sintoma volta sem aviso.

       Entao a faixa vira LAYOUT. A cena para 36px antes do fim do
       palco, e a etiqueta mora nesse pedaco. Agora nao ha' negociacao
       de pixel: o canvas nao alcanca a etiqueta porque nao chega la'.

       Isto so' funciona porque o canvas segue a caixa (o
       ResizeObserver): a cena encolhe, o observador ve, a camera
       reenquadra. Antes seria preciso mexer na camera na mao.

       O palco cresce de 300 para 336 para devolver a altura que a
       faixa tomou -- a figura fica do mesmo tamanho de antes.
    ------------------------------------------------------------ */
    .provador-palco{
        min-height:336px;
    }

    .provador-cena{
        inset:0 0 36px 0;
    }

    .provador-cena-dica{
        bottom:9px;
        padding:5px 11px;
        font-size:.54rem;
    }

    /*
       Em tela estreita o espacamento de desktop deixa tudo boiando.
       Os blocos ficam mais juntos para o conteudo ler como uma coisa
       so', e nao como pedacos soltos.
    */
    .provador-controles{
        gap:17px;
    }

    .provador-campo{
        gap:8px;
    }

    .provador-campo-linha{
        grid-template-columns:minmax(0, 1fr) 96px;
        gap:10px;
    }

    .provador-campo-linha output{
        font-size:.84rem;
    }

    .provador-numero input{
        padding:8px 4px;
        font-size:.86rem;
    }

    .provador-numero span{
        font-size:.55rem;
    }

    /*
       Os tres caimentos continuam lado a lado: empilhados viravam tres
       pilulas gigantes e a comparacao entre eles se perdia. Em 390px
       sobram ~112px por botao, de sobra para "Folgado".
    */
    .provador-caimentos{
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:6px;
    }

    .provador-caimento{
        padding:10px 4px;
        font-size:.72rem;
    }

    .provador-resultado{
        margin-top:0;
        padding:17px 18px;
    }

    .provador-resultado strong{
        font-size:2.4rem;
    }

    .provador-usar{
        min-height:52px;
        font-size:.72rem;
    }

    .provador-tabela-bloco{
        margin-top:26px;
        padding-top:22px;
    }

    .provador-tabela{
        min-width:400px;
    }

    .provador-tabela th,
    .provador-tabela td{
        padding:11px 11px;
        font-size:.86rem;
    }

    .provador-como-medir{
        margin-top:22px;
    }

}



/* ================================================================
   O GATILHO NA PAGINA DO PRODUTO

   Era <a href="#">, estilizado por ".summary-block-header a". Virou
   <button>, entao precisa recuperar a aparencia de link -- e' o
   elemento certo para abrir painel, mas o visual continua sendo o de
   um link discreto ao lado de "Tamanho".
================================================================ */

.guia-de-medidas{
    padding:0;
    border:none;
    background:none;

    font-family:inherit;
    font-size:.85rem;
    color:#555;
    text-decoration:underline;
    text-underline-offset:3px;
    cursor:pointer;

    transition:color .2s ease;
}

.guia-de-medidas:hover{
    color:#111;
}