/* =========================================================
   Catálogo — Página de produto (seleção múltipla de variações)
   Usa as classes já existentes: .comprar, .line, .line-variacao,
   .opcoes, .opcao, .check, .detalhes, .titulo, .campo-numero,
   .decrementar, .incrementar, .quantidade, .observacoes,
   .subtotal-adicionar, .subtotal, .sacola-adicionar, .botao-acao
   ========================================================= */

/* ---------- Lista de variações ---------- */
.comprar .line-variacao .thelabel {
    display: block;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    margin: 18px 0 12px;
}

.comprar .opcoes.opcoes-lista {
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
    background: #fff;
}

.comprar .opcoes.opcoes-lista .opcao {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    background: #fff;
    transition: background .2s ease, transform .2s ease;
    cursor: default;
}

.comprar .opcoes.opcoes-lista .opcao:last-child { border-bottom: 0; }
.comprar .opcoes.opcoes-lista .opcao.selecionado { background: rgba(0, 0, 0, .03); }

/* .check permanece no DOM (compatibilidade com o JS existente) */
.comprar .opcoes.opcoes-lista .opcao .check { display: none; }

.comprar .opcao .opcao-foto {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comprar .opcao .opcao-foto img {
    max-width: 100%;
    max-height: 52px;
    object-fit: contain;
}

.comprar .opcao .detalhes {
    flex: 1 1 auto;
    min-width: 0;
}

.comprar .opcao .detalhes .titulo {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: #1c1c1c;
}

.comprar .opcao .detalhes .preco {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    color: #6b6b6b;
}

/* ---------- Controles − qtd + por variação ---------- */
.comprar .campo-numero.campo-numero-variacao {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    float: none;
}

.comprar .campo-numero-variacao .decrementar,
.comprar .campo-numero-variacao .incrementar {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
    background: #fff;
    transition: background .15s ease, transform .1s ease, border-color .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.comprar .campo-numero-variacao .decrementar:active,
.comprar .campo-numero-variacao .incrementar:active { transform: scale(.9); }
.comprar .campo-numero-variacao .incrementar:hover { border-color: rgba(0, 0, 0, .4); }

.comprar .campo-numero-variacao input.quantidade-variacao {
    width: 34px;
    text-align: center;
    border: 0;
    background: transparent;
    font-weight: 700;
    font-size: 16px;
    padding: 0;
    box-shadow: none;
    -moz-appearance: textfield;
}

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

/* Feedback ao adicionar (classe .pulsando adicionada pelo JS) */
.comprar .opcao.pulsando { transform: scale(.99); background: rgba(0, 0, 0, .05); }

/* ---------- Campos ocultos quando há variações ----------
   .quantidade-oculta e .subtotal-adicionar-oculto: classes novas,
   apenas escondem os controles globais sem removê-los do DOM,
   preservando #quantidade e .sacola-adicionar para o JS existente. */
.comprar .line.quantidade-oculta,
.comprar .subtotal-adicionar.subtotal-adicionar-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    opacity: 0;
    pointer-events: none;
}

/* ---------- Observações ---------- */
.comprar .line.observacoes textarea#observacoes {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 12px;
    padding: 10px 12px;
    resize: vertical;
}

/* ---------- Sacola fixa no rodapé ---------- */
.comprar .sacola-fixa {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: #fff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .14);
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    transform: translateY(110%);
    transition: transform .28s ease;
}

.comprar .sacola-fixa.ativa { transform: translateY(0); }

.comprar .sacola-fixa-topo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.comprar .sacola-fixa-resumo { flex: 1 1 auto; line-height: 1.2; }
.comprar .sacola-fixa-resumo .sacola-itens { display: block; font-size: 16px; font-weight: 700; }
.comprar .sacola-fixa .subtotal.subtotal-fixo { display: block; font-size: 15px; color: #444; }

.comprar .sacola-fixa .sacola-toggle {
    flex: 0 0 auto;
    padding: 8px;
    cursor: pointer;
    color: #666;
    transition: transform .25s ease;
}

.comprar .sacola-fixa.recolhida .sacola-toggle { transform: rotate(180deg); }

.comprar .sacola-fixa .sacola-confirmar.botao-acao {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    text-align: center;
    gap: 8px;
    border: 0;
    border-radius: 12px;
    padding: 12px 18px;
    font-weight: 700;
    float: none;
}

.comprar .sacola-fixa .sacola-confirmar.enviando { opacity: .65; pointer-events: none; }

.comprar .sacola-fixa-lista {
    max-height: 168px;
    overflow-y: auto;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, .07);
    transition: max-height .25s ease, opacity .2s ease;
}

.comprar .sacola-fixa.recolhida .sacola-fixa-lista {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    overflow: hidden;
}

.comprar .sacola-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    animation: sacolaItemIn .22s ease;
}

.comprar .sacola-item img { width: 26px; height: 26px; object-fit: contain; }
.comprar .sacola-item .titulo { flex: 1 1 auto; font-size: 14px; color: #333; }
.comprar .sacola-item .preco { font-size: 14px; font-weight: 700; }

.comprar .sacola-item .decrementar {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
}

@keyframes sacolaItemIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Animação produto → sacola / sacola → produto ---------- */
.voando {
    position: fixed;
    width: 46px;
    height: 46px;
    object-fit: contain;
    z-index: 2000;
    pointer-events: none;
    transition: transform .42s cubic-bezier(.4, .0, .2, 1), opacity .42s ease;
}

/* ---------- Ajustes gerais ---------- */
.btn-whatsapp { color: #fff !important; }
.pagina-vazia { padding: 50px 0; }

/* espaço para a sacola fixa não cobrir o conteúdo */
.single-produto .padd-container-mobile { padding-bottom: 150px; }

/* ---------- Responsivo ---------- */
@media (max-width: 767px) {
    .comprar .opcoes.opcoes-lista { border-left: 0; border-right: 0; border-radius: 0; }
    .comprar .opcao .detalhes .titulo { font-size: 14.5px; }
    .comprar .sacola-fixa .sacola-confirmar.botao-acao { padding: 12px 16px; font-size: 14px; }
    .comprar .sacola-fixa-lista { max-height: 132px; }
}

@media (min-width: 992px) {
    .comprar .sacola-fixa {
        left: auto;
        right: 24px;
        bottom: 24px;
        width: 420px;
        border-radius: 16px;
    }
    .single-produto .padd-container-mobile { padding-bottom: 24px; }
}