/**
 * SLZ7 - Itens com variações (V46.88)
 * ------------------------------------------------------------------
 * Estilo do seletor de opções dentro do cartão de compra. Usa apenas as
 * variáveis do tema; nenhuma regra existente é sobrescrita e o layout do
 * cartão (.buy-card) continua igual.
 */

.slz7-variations {
    margin: 0 0 14px;
}

.slz7-variations .variations,
.slz7-var-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 12px;
}

.slz7-var-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.slz7-var-label {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .01em;
    opacity: .85;
}

.slz7-var-field select {
    width: 100%;
    min-height: 46px;
    padding: 10px 38px 10px 14px;
    border: 1px solid var(--slz7-border, #e9ecf5);
    border-radius: var(--slz7-radius, 12px);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    font: inherit;
    font-size: .95rem;
    color: inherit;
    line-height: 1.2;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.slz7-var-field select:focus {
    outline: none;
    border-color: var(--slz7-primary, #12305c);
    box-shadow: 0 0 0 3px rgba(18, 48, 92, .12);
}

.slz7-var-reset {
    align-self: flex-start;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: underline;
    opacity: .7;
}

.slz7-var-reset:hover { opacity: 1; }

/* Resumo da variação escolhida (preço, estoque, descrição) */
.slz7-var-summary {
    margin: 0 0 10px;
}

/* Preço da variação aparece só no preço do cartão (.buy-price), atualizado
   pelo item-variations.js — o resumo de baixo fica escondido para não duplicar. */
.slz7-var-summary .woocommerce-variation-price {
    display: none !important;
}

.slz7-var-summary .woocommerce-variation-description p {
    margin: 6px 0 0;
    font-size: .88rem;
    opacity: .8;
}

.slz7-var-summary .woocommerce-variation-availability p {
    margin: 6px 0 0;
    font-size: .85rem;
    font-weight: 600;
}

/* Botões: mesma pilha vertical já usada no cartão */
.slz7-var-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.slz7-var-actions .btn { width: 100%; }

.slz7-var-actions [data-slz7-qty] { align-self: stretch; }

/* Estado desabilitado enquanto nenhuma combinação válida foi escolhida */
.woocommerce-variation-add-to-cart-disabled .slz7-var-buy,
.woocommerce-variation-add-to-cart-disabled .slz7-var-cart {
    opacity: .55;
    pointer-events: none;
}

/* Destaque quando a barra do celular rola até o seletor */
.slz7-variations.is-highlight {
    animation: slz7-var-pulse 1.2s ease-out 1;
    border-radius: var(--slz7-radius, 12px);
}

@keyframes slz7-var-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(18, 48, 92, .28); }
    100% { box-shadow: 0 0 0 14px rgba(18, 48, 92, 0); }
}

/* Celular: alvos maiores e sem corte lateral */
@media (max-width: 782px) {
    .slz7-var-field select { min-height: 50px; font-size: 1rem; }
    .slz7-var-actions .btn { min-height: 50px; }
}

/* ==========================================================================
   V46.89 - Preço único + botões iguais aos do item simples
   --------------------------------------------------------------------------
   1) O WooCommerce injeta o preço da variação dentro de .single_variation
      como <p class="price"> (nem sempre com o wrapper
      .woocommerce-variation-price). Ele fica escondido: o valor vive só em
      cima, no .buy-price do cartão, atualizado pelo item-variations.js.
   2) O botão principal do item variável também é .single_add_to_cart_button,
      então a regra antiga do tema (.buy-card .single_add_to_cart_button, com
      !important) pintava ele com o gradiente padrão em vez das variáveis
      configuradas no Personalizar (--cbtn1-*). Aqui ele volta a usar
      exatamente os mesmos tokens do botão principal do item simples.
   ========================================================================== */
.slz7-var-summary .woocommerce-variation-price,
.slz7-var-summary .price,
.slz7-var-summary p.price,
.slz7-var-summary ins,
.slz7-var-summary del {
    display: none !important;
}

.buy-card .slz7-var-actions .btn-primary,
.buy-card .slz7-var-actions button.btn-primary.single_add_to_cart_button {
    width: 100%;
    background: var(--cbtn1-bg, var(--grad-btn, var(--grad-hero))) !important;
    color: var(--cbtn1-color, #fff) !important;
    border: var(--cbtn1-border, 0) !important;
    border-radius: var(--cbtn1-radius, 999px) !important;
    font-size: var(--cbtn1-size, .9rem) !important;
    padding: var(--cbtn1-py, .9rem) 1.2rem !important;
    font-weight: 800 !important;
}

.buy-card .slz7-var-actions .btn-primary:hover,
.buy-card .slz7-var-actions button.btn-primary.single_add_to_cart_button:hover {
    filter: brightness(1.05);
    color: var(--cbtn1-color, #fff) !important;
}

/* Botão secundário: mesmos tokens (--cbtn2-*) do item simples. */
.buy-card .slz7-var-actions .slz7-var-cart {
    width: 100%;
    background: var(--cbtn2-bg, transparent) !important;
    color: var(--cbtn2-color, var(--c-primary)) !important;
    border: var(--cbtn2-border, 2px solid var(--c-primary)) !important;
    border-radius: var(--cbtn2-radius, 999px) !important;
    font-size: var(--cbtn2-size, .9rem) !important;
    padding: var(--cbtn2-py, .9rem) 1.2rem !important;
    font-weight: 800 !important;
}