/* =========================================================================
   Lunettic — vitrine (widget Tenkla)
   =========================================================================
   O widget entrega marcacao quase sem estilo, de proposito. Todo o visual
   sai daqui, com os tokens da marca — as classes tk-* sao o contrato entre
   os dois lados.

   Referencia: o card de produto do mockup original. Foto quadrada, nome em
   regular, preco em bold, etiqueta de promocao em rosa italico. Sem borda,
   sem raio e sem sombra: o card nao tem fundo proprio, quem separa e o
   espaco em branco.

   IMPORTANTE: nao ha preco nem nome escrito aqui. Se um dia aparecer texto
   de produto neste arquivo, alguem errou o caminho.
   ========================================================================= */


/* =========================================================================
   GRADE
   Tres colunas no desktop, como no mockup. Uma no celular.
   ========================================================================= */

.tk-grade {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e-6) var(--e-5);
    padding-bottom: var(--e-secao);
}

@media (min-width: 640px) {
    .tk-grade { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
    .tk-grade { grid-template-columns: repeat(3, 1fr); }
}


/* =========================================================================
   CARD
   ========================================================================= */

.tk-produto {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    background: none;
    border: 0;
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}

.tk-foto {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;      /* o mockup usa foto quadrada */
    object-fit: cover;
    background: var(--rosa-palido);
}

/* Sem foto cadastrada: um campo chapado no lugar, nunca um icone de imagem
   quebrada. A grade continua alinhada. */
.tk-foto-vazia {
    background: var(--rosa-suave);
}

.tk-nome {
    font-family: var(--fonte-corpo);
    font-weight: var(--peso-normal);
    font-size: var(--t-base);
    line-height: 1.35;
    text-transform: none;      /* h3 do site e caixa alta; nome de produto nao */
    letter-spacing: 0;
    margin: 0;
    color: var(--texto);
}


/* =========================================================================
   PRECO
   O widget e a unica fonte do numero. Aqui so o tratamento visual.
   ========================================================================= */

.tk-precos {
    display: flex;
    align-items: baseline;
    gap: var(--e-2);
    flex-wrap: wrap;
}

.tk-preco {
    font-weight: var(--peso-forte);
    font-size: var(--t-base);
    font-variant-numeric: tabular-nums;
    color: var(--texto);
}

/* Só existe quando ha promocao. O rosa italico e o tratamento que o mockup
   dava a etiqueta SALE. */
.tk-preco-antigo {
    font-size: var(--t-sm);
    font-style: italic;
    color: var(--rosa);
    text-decoration: line-through;
    text-decoration-color: var(--rosa);
    font-variant-numeric: tabular-nums;
}


/* =========================================================================
   ACAO
   ========================================================================= */

.tk-comprar {
    align-self: flex-start;
    margin-top: var(--e-1);
    padding: var(--e-3) var(--e-5);
    background: var(--preto);
    color: var(--branco);
    border: 1px solid var(--preto);
    border-radius: var(--raio);
    font-family: var(--fonte-corpo);
    font-size: var(--t-xs);
    font-weight: var(--peso-forte);
    letter-spacing: var(--entre-letras-caps);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--transicao),
                border-color var(--transicao),
                color var(--transicao);
}

.tk-comprar:hover,
.tk-comprar:focus-visible {
    background: var(--rosa);
    border-color: var(--rosa);
    color: var(--preto);
}

.tk-comprar:focus-visible {
    outline: 2px solid var(--rosa);
    outline-offset: 2px;
}

/* Indisponivel nao e botao: e um aviso. Nao pode parecer clicavel. */
.tk-indisponivel {
    align-self: flex-start;
    margin-top: var(--e-1);
    padding: var(--e-3) 0;
    font-size: var(--t-xs);
    font-weight: var(--peso-forte);
    letter-spacing: var(--entre-letras-caps);
    text-transform: uppercase;
    color: var(--texto-fraco);
}

/* A foto esmaece, o texto NAO. O nome e o preco de uma peca esgotada
   continuam sendo informacao que a pessoa veio buscar. */
.tk-esgotado .tk-foto {
    opacity: 0.45;
}


/* =========================================================================
   ESTADOS
   Carregando, vazio e erro. Os tres precisam existir de verdade: a grade vem
   da rede, e rede falha.
   ========================================================================= */

.tk-carregando,
.tk-vazio,
.tk-erro {
    padding-block: var(--e-7);
    font-size: var(--t-md);
    color: var(--texto-fraco);
    max-width: var(--largura-texto);
}

.tk-erro {
    color: var(--texto-suave);
    padding-inline: var(--e-4);
    border-left: 3px solid var(--rosa);
}

@media (prefers-reduced-motion: no-preference) {
    .tk-carregando {
        animation: tk-pulsar 1.4s ease-in-out infinite;
    }

    @keyframes tk-pulsar {
        0%, 100% { opacity: 1; }
        50%      { opacity: .45; }
    }
}


/* =========================================================================
   PAGINA DE PRODUTO
   Renderizada no servidor. Fotos a esquerda, informacao a direita, coluna de
   leitura estreita para a descricao.
   ========================================================================= */

.produto {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e-6);
    padding-block: var(--e-secao);
}

.produto__midia {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
}

.produto__foto {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--rosa-palido);
}

.produto__foto--vazia { background: var(--rosa-suave); }

.produto__info {
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
    align-items: flex-start;
}

.produto__nome {
    font-family: var(--fonte-titulo);
    font-size: var(--t-xl);
    line-height: 1.05;
    text-transform: uppercase;
    margin: 0;
}

.produto__precos {
    display: flex;
    align-items: baseline;
    gap: var(--e-3);
    flex-wrap: wrap;
}

.produto__preco {
    font-size: var(--t-lg);
    font-weight: var(--peso-forte);
    font-variant-numeric: tabular-nums;
}

.produto__preco-antigo {
    font-size: var(--t-base);
    font-style: italic;
    color: var(--rosa);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

.produto__descricao {
    font-size: var(--t-base);
    color: var(--texto-suave);
    max-width: var(--largura-texto);
}

/* O widget injeta o botao aqui dentro; a classe .tk-comprar ja esta
   estilizada acima, entao so o espaco e desta regra. */
.produto__acao { margin-top: var(--e-2); }

.produto__esgotado {
    margin-top: var(--e-2);
    padding: var(--e-3) 0;
    font-size: var(--t-sm);
    font-weight: var(--peso-forte);
    letter-spacing: var(--entre-letras-caps);
    text-transform: uppercase;
    color: var(--texto-fraco);
}

.produto__nota {
    font-size: var(--t-xs);
    color: var(--texto-fraco);
    max-width: 46ch;
}

.produto__voltar {
    margin-top: var(--e-4);
    padding-top: var(--e-4);
    border-top: 1px solid var(--borda);
    font-size: var(--t-sm);
    width: 100%;
}

.produto__voltar a { transition: color var(--transicao); }
.produto__voltar a:hover,
.produto__voltar a:focus-visible { color: var(--rosa); }

@media (min-width: 900px) {
    .produto {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: var(--e-8);
        align-items: start;
    }
}


/* =========================================================================
   CARD RENDERIZADO NO SERVIDOR
   As classes tk-* sao as mesmas do widget de proposito: os dois caminhos
   precisam sair identicos na tela, e o estilo ja existe acima.
   ========================================================================= */

.tk-link {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    color: inherit;
}

.tk-link:hover .tk-foto,
.tk-link:focus-visible .tk-foto { opacity: .88; }

.tk-link .tk-foto { transition: opacity var(--transicao); }

/* O botao de escolher grade e um <a>, nao um <button>: precisa do mesmo
   desenho, mas com o alinhamento de bloco de link. */
a.tk-comprar {
    display: inline-block;
    text-decoration: none;
}

.tk-comprar[disabled] { opacity: .6; cursor: default; }


/* =========================================================================
   PAGINACAO
   ========================================================================= */

.paginacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    flex-wrap: wrap;
    padding-block: var(--e-6);
    border-top: 1px solid var(--borda);
    font-size: var(--t-sm);
}

.paginacao__ir {
    font-weight: var(--peso-forte);
    letter-spacing: var(--entre-letras-caps);
    text-transform: uppercase;
    font-size: var(--t-xs);
    transition: color var(--transicao);
}

a.paginacao__ir:hover,
a.paginacao__ir:focus-visible { color: var(--rosa); }

/* Extremo da lista: continua ocupando o lugar para a contagem nao pular de
   lado entre uma pagina e outra. */
.paginacao__ir.is-off {
    color: var(--borda);
    cursor: default;
}

.paginacao__conta {
    color: var(--texto-fraco);
    font-variant-numeric: tabular-nums;
}


/* =========================================================================
   GRADE NA PAGINA DE PRODUTO
   Hoje e informacao, nao selecao: responde "tem o meu tamanho?" sem
   prometer uma escolha que a API ainda nao deixa concluir.
   ========================================================================= */

.produto__grade {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    width: 100%;
}

.produto__grade-titulo {
    font-family: var(--fonte-corpo);
    font-size: var(--t-xs);
    font-weight: var(--peso-forte);
    letter-spacing: var(--entre-letras-caps);
    text-transform: uppercase;
    color: var(--texto-fraco);
    margin: 0;
}

.produto__tamanhos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
}

.produto__tamanho {
    display: inline-flex;
    align-items: baseline;
    gap: var(--e-1);
    min-width: 44px;          /* alvo de toque, e alinha numero de 1 e 2 digitos */
    padding: var(--e-2) var(--e-3);
    border: 1px solid var(--preto);
    border-radius: var(--raio);
    font-size: var(--t-sm);
    font-weight: var(--peso-medio);
    font-variant-numeric: tabular-nums;
    justify-content: center;
}

/* Esgotado continua legivel: quem usa 34 precisa saber que o 34 acabou,
   e nao adivinhar pela ausencia. */
.produto__tamanho.is-esgotado {
    border-color: var(--borda);
    color: var(--texto-fraco);
    text-decoration: line-through;
    text-decoration-color: var(--borda);
}

.produto__tamanho-nota {
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
}

.produto__grade-nota {
    font-size: var(--t-xs);
    color: var(--texto-fraco);
}


/* =========================================================================
   SELETOR DE TAMANHO
   O input fica escondido e o <label> vira o alvo: mantem o radiogroup nativo
   (teclado e leitor de tela ja sabem navegar) com a aparencia da marca.
   ========================================================================= */

.produto__tamanho {
    position: relative;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transicao), color var(--transicao);
}

.produto__tamanho input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.produto__tamanho:hover { border-color: var(--rosa); }

/* Selecionado: preto chapado, como o botao de comprar. */
.produto__tamanho:has(input:checked) {
    background: var(--preto);
    border-color: var(--preto);
    color: var(--branco);
}

/* O foco tem de aparecer no LABEL, porque o input e invisivel — sem isto,
   quem navega por teclado nao ve onde esta. */
.produto__tamanho:has(input:focus-visible) {
    outline: 2px solid var(--rosa);
    outline-offset: 2px;
}

.produto__tamanho.is-esgotado {
    cursor: not-allowed;
}

.produto__tamanho.is-esgotado input { cursor: not-allowed; }

.produto__grade-aviso {
    font-size: var(--t-sm);
    color: var(--rosa-escuro);
    font-weight: var(--peso-medio);
}

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