/*
 * Single Product Page (ULTRA PREMIUM).
 * Extraído do <style> inline do snippet-4-single-product.php.
 * Bug corrigido: o @import original tinha & em vez de & nas URLs do Google Fonts,
 * fazendo Rajdhani e Inter NÃO carregarem. Agora as fontes vêm enfileiradas em hooks.php.
 */

/* === BASE === */
.blz-single-pro {
    background: var(--blz-bg-deep);                                              /* Fundo escuro principal */
    font-family: var(--blz-font-main);                                           /* Inter */
    color: var(--blz-text);
    padding: 0;
    margin: 0;
}
.blz-single-pro * { box-sizing: border-box; }                                    /* Reset interno */
.sp-container {                                                                  /* Wrapper de largura limitada */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* === BREADCRUMB === */
.sp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 0 16px;
    font-size: 13px;
    color: var(--blz-text-dim);
}
.sp-breadcrumb a {
    color: var(--blz-text-dim);
    text-decoration: none;
    transition: color 0.2s;
}
.sp-breadcrumb a:hover { color: var(--blz-cyan); }
.sp-breadcrumb span:last-child {                                                 /* Item atual (não-link) */
    color: var(--blz-cyan);
    font-weight: 500;
}

/* === HERO (título do produto + meta) === */
/* Bloco do título + badges acima da galeria. Compactado pra não empurrar o purchase card pra baixo. */
.sp-hero {
    padding: 12px 0 20px;                                                        /* Padding vertical reduzido (era 16/32 — agora 12/20 pra compactar) */
    position: relative;                                                          /* Necessário pra futuros pseudo-elements absolutos */
}
.hero-content {
    max-width: 100%;                                                             /* Antes era 900px: o título quebrava cedo e ocupava 3 linhas. Agora usa toda a largura do container, cabe em 1-2 linhas */
}
.hero-title {
    font-family: var(--blz-font-heading);                                        /* Rajdhani (display da loja) */
    font-size: clamp(22px, 3.5vw, 38px);                                         /* Fonte FLUIDA reduzida: era 28-54px, agora 22-38px (~30% menor — mais compacto) */
    font-weight: 700;                                                            /* Bold */
    color: var(--blz-text-white);                                                /* Branco puro */
    margin: 0 0 12px 0;                                                          /* Margem inferior reduzida (era 20px — agora 12px pra aproximar das badges) */
    letter-spacing: 2px;                                                         /* Espaçamento entre letras (era 3px — apertei pra caber mais texto por linha) */
    line-height: 1.15;                                                           /* Altura de linha levemente folgada (em títulos longos com quebra de linha) */
    text-shadow: 0 0 24px rgba(34, 211, 238, 0.25);                              /* Glow ciano sutil atrás do título (reduzido de 30px/0.3 pra não ofuscar) */
}
.hero-meta {                                                                     /* Linha: UNDETECTED badge + estrelas + customers */
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.hero-badge {                                                                    /* Badge "UNDETECTED" */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(6, 182, 212, 0.1));
    border: 1px solid rgba(34, 211, 238, 0.4);
    border-radius: 6px;
    color: var(--blz-cyan);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.2);
}
.hero-rating { display: flex; align-items: center; gap: 8px; }                   /* Estrelas + texto "4.5 (12 reviews)" */
.hero-rating .stars { display: flex; gap: 2px; }
.hero-rating .star {
    color: #334155;                                                              /* Cor padrão (estrela vazia) */
    font-size: 16px;
}
.hero-rating .star.filled {
    color: var(--blz-warning);                                                   /* Amarelo (estrela cheia) */
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);                               /* Glow amarelo */
}
.hero-rating .rating-text { font-size: 13px; color: var(--blz-text-muted); }
.hero-sales {                                                                    /* "1,234+ Customers" */
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--blz-text-dim);
    font-size: 13px;
}
.hero-sales svg { opacity: 0.7; }

/* === MAIN GRID (gallery | purchase card) === */
.sp-main { padding: 0 0 60px; }
.sp-grid {
    display: grid;
    grid-template-columns: 1fr 480px;                                            /* Gallery flex, card fixo 480px */
    gap: 50px;
    align-items: start;                                                          /* Topo alinhado (não estica) */
}

/* === GALLERY === */
.sp-gallery { position: relative; }
.gallery-main-wrapper {                                                          /* Container da imagem principal */
    position: relative;
    margin-bottom: 20px;
}
.gallery-badge-top {                                                             /* "PREMIUM" badge no canto superior */
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
}
.badge-premium {
    display: inline-block;
    padding: 8px 16px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);                       /* Gradient roxo→indigo */
    color: var(--blz-text-white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
    text-transform: uppercase;
}
/* ─── CAIXA DA IMAGEM PRINCIPAL DA GALERIA ─── */
/* Container da foto principal do produto. Apenas exibição (sem clique/zoom). */
.gallery-main {
    position: relative;                                                          /* Necessário pra elementos absolutos internos (badge SALE, etc.) */
    aspect-ratio: 16/10;                                                         /* Proporção fixa (não distorce com qualquer imagem) */
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.6)); /* Fundo gradient escuro (aparece se a imagem tem letterbox) */
    border: 1px solid var(--blz-border-cyan);                                    /* Borda ciano sutil */
    border-radius: 20px;                                                         /* Cantos bem arredondados (premium) */
    overflow: hidden;                                                            /* Recorta a imagem nos cantos arredondados */
    box-shadow:
        0 0 0 1px rgba(34, 211, 238, 0.1),                                       /* Borda extra interna ciano */
        0 20px 60px rgba(0, 0, 0, 0.5),                                          /* Sombra escura embaixo */
        0 0 80px rgba(34, 211, 238, 0.15);                                       /* Glow ciano difuso ao redor */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);                           /* Transição suave entre estados */
}

/* HOVER do container (sutil — borda ganha mais intensidade) */
.gallery-main:hover {
    border-color: var(--blz-border-cyan-strong);                                 /* Borda ciano mais forte */
    box-shadow:
        0 0 0 1px rgba(34, 211, 238, 0.3),
        0 25px 70px rgba(0, 0, 0, 0.6),
        0 0 100px rgba(34, 211, 238, 0.25);                                      /* Glow ciano mais intenso */
    transform: translateY(-4px);                                                 /* Eleva 4px (sensação de levantar) */
}

/* ─── IMAGEM EM SI ─── */
.main-img {
    width: 100%;                                                                 /* Largura total do container */
    height: 100%;                                                                /* Altura total do container */
    object-fit: contain;                                                         /* Mostra a imagem INTEIRA (não corta — letterbox se necessário) */
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.4), rgba(2, 8, 23, 0.6)); /* Preenche letterbox com gradient dark */
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease; /* Transições suaves (usadas no JS pra fade quando troca variação) */
}

/* === GALLERY THUMBS (miniaturas embaixo) === */
.gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));                /* Mínimo 100px, fill automático */
    gap: 12px;
}
.thumb-item {
    position: relative;
    aspect-ratio: 1;                                                             /* Quadrado */
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s;
}
.thumb-item img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.thumb-overlay {                                                                 /* Overlay escuro nos thumbs não-ativos */
    position: absolute;
    inset: 0;                                                                    /* top:0 + right:0 + bottom:0 + left:0 */
    background: rgba(0, 0, 0, 0.5);
    opacity: 1;
    transition: opacity 0.3s;
}
.thumb-item:hover .thumb-overlay,
.thumb-item.active .thumb-overlay { opacity: 0; }                                /* Some no hover ou no thumb ativo */
.thumb-item.active {
    border-color: var(--blz-cyan);
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.4);
}

/* === TRUST BADGES (3 selos abaixo da galeria) === */
.trust-badges-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 30px;
}
.trust-badge {
    display: flex;
    flex-direction: column;                                                      /* Ícone em cima, texto embaixo */
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 24px 16px;
    background: var(--blz-bg-card);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    transition: var(--blz-transition);
}
.trust-badge:hover {
    background: rgba(15, 23, 42, 0.8);
    border-color: var(--blz-border-cyan);
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.badge-icon {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(6, 182, 212, 0.1));
    border-radius: 12px;
    color: var(--blz-cyan);
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.2);
}
.badge-icon.electric {                                                           /* Variante amarela pro "Instant Delivery" */
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.1));
    color: var(--blz-warning);
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.2);
}
.badge-title { font-size: 15px; font-weight: 700; color: var(--blz-text-white); }
.badge-desc { font-size: 12px; color: var(--blz-text-dim); }

/* === PURCHASE CARD (lado direito sticky) === */
.sp-right {
    position: sticky;                                                            /* Acompanha scroll, mas para no top:24px */
    top: 24px;
}
.purchase-card {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.7));
    backdrop-filter: blur(20px);
    border: 1px solid var(--blz-border-cyan);
    border-radius: 24px;
    padding: 26px;                                                               /* Reduzido de 32 → 26 (card mais compacto, harmoniza com stepper menor) */
    box-shadow:
        0 0 0 1px rgba(34, 211, 238, 0.1),
        0 20px 60px rgba(0, 0, 0, 0.4),
        0 0 100px rgba(34, 211, 238, 0.1);
}

/* Price */
.price-section { margin-bottom: 20px; }                                          /* Reduzido de 24 → 20 (mais compacto) */
.price-label {
    font-size: 11px;                                                             /* Reduzido de 12 → 11 (proporcional ao novo TOTAL label) */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--blz-text-dim);
    margin-bottom: 6px;                                                          /* Reduzido de 8 → 6 */
    font-weight: 600;
}
.price-display {
    font-family: var(--blz-font-heading);                                        /* Rajdhani — fonte de display */
    font-size: 32px;                                                             /* Reduzido de 36 → 32 (proporcional ao card mais compacto) */
    font-weight: 700;
    color: var(--blz-cyan) !important;                                           /* !important porque WC injeta <span> com cor própria */
    text-shadow: 0 0 28px rgba(34, 211, 238, 0.45);
    line-height: 1;
    margin-bottom: 10px;                                                         /* Reduzido de 12 → 10 */
}
.price-display * { color: var(--blz-cyan) !important; }                          /* Força ciano em filhos do WC */

/* ─── PREÇO CHEIO RISCADO (del) + DESCONTADO (ins) no .price-display ─── */
/* Espelho do que faz o .woocommerce-variation-price (variable product) — agora aplicado também
   no preço grande do TOPO do card pra produtos SIMPLES (sem variação).
   Quando o JS detecta tier ativo da qty, sobrescreve o .price-display com <del>cheio</del> <ins>desconto</ins>. */
.price-section .price-display {
    display: inline-flex;                                                        /* Flex permite alinhar del + ins verticalmente */
    align-items: center;
    gap: 12px;                                                                   /* Espaço entre o preço riscado e o novo */
    flex-wrap: wrap;
}
/* DEL = preço cheio riscado.
   Tudo dentro do <del> com MESMO font-size pra strikethrough ficar UMA linha contínua centralizada. */
.price-section .price-display del,
.price-section .price-display del *,
.price-section .price-display del bdi,
.price-section .price-display del span {
    color: var(--blz-text-dim) !important;                                       /* Cinza apagado (perdeu protagonismo) */
    font-size: 20px !important;                                                  /* Menor que o novo preço (32px), mas legível */
    font-weight: 600 !important;
    line-height: 1 !important;
    text-shadow: none !important;                                                /* Sem glow no preço riscado */
    text-transform: none !important;
    letter-spacing: 0.3px !important;
    opacity: 0.65 !important;                                                    /* Bem apagado pra enfatizar o ins */
    vertical-align: middle !important;
}
.price-section .price-display del {
    text-decoration: line-through !important;
    text-decoration-color: var(--blz-text-dim) !important;
    text-decoration-thickness: 2px !important;                                   /* Mais grosso (proporcional ao tamanho maior do preço) */
    text-decoration-skip-ink: none !important;                                   /* Linha não pula letras */
    display: inline-block !important;
}
/* INS = novo preço com desconto — mantém o tamanho/cor/glow originais do .price-display */
.price-section .price-display ins {
    background: transparent !important;                                          /* Reseta background amarelo padrão do browser */
    text-decoration: none !important;                                            /* Reseta underline padrão do browser */
    display: inline-block !important;
    vertical-align: middle !important;
}
.price-section .price-display ins,
.price-section .price-display ins * {
    color: var(--blz-cyan) !important;
    text-shadow: 0 0 28px rgba(34, 211, 238, 0.5) !important;                    /* Glow mais forte (proporcional ao tamanho 32px) */
    font-weight: 700 !important;
}
.stock-status {                                                                  /* "In Stock (5 available)" */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}
.stock-status.in-stock { color: var(--blz-success); }
.stock-status.in-stock svg {
    fill: var(--blz-success);
    filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.5));
}
.stock-status.out-stock { color: var(--blz-danger); }
.stock-status.out-stock svg { fill: var(--blz-danger); }

.divider {                                                                       /* Linha horizontal entre seções do card */
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    margin: 18px 0;                                                              /* Reduzido de 24 → 18 (tightening geral pra harmonia) */
}

/* Cart Form — sobrescrita do markup nativo do WC */
.cart-form-wrapper .cart { margin: 0; }
.cart-form-wrapper table.variations {
    width: 100%;
    margin-bottom: 20px;
    background: transparent !important;                                          /* WC adiciona background — zera */
}
.cart-form-wrapper table.variations td {
    padding: 10px 0;
    border: none;
    background: transparent !important;
}
.cart-form-wrapper table.variations tr { background: transparent !important; }
.cart-form-wrapper table.variations th,
.cart-form-wrapper table.variations th.label {
    padding: 10px 0 !important;
    border: none !important;
    background: transparent !important;
    text-align: left !important;
}
/* ─── LABEL do atributo (ex: "BOT - VERSION") ─── */
/* Texto que descreve a categoria da variação. Em CIANO (combina com o nome
   da variação selecionada e com o preço — toda a linha "BOT - VERSION : BRONZE - 30D"
   fica uniformemente ciano, como um header coeso). */
.cart-form-wrapper label {
    display: block;                                                              /* Block pra ocupar linha inteira */
    font-family: var(--blz-font-main);                                           /* Inter (UI font) */
    font-size: 13px;                                                             /* Tamanho compacto */
    text-transform: uppercase;                                                   /* "BOT - VERSION" sempre em caixa alta */
    letter-spacing: 1.8px;                                                       /* Espaçamento maior (visual premium) */
    color: var(--blz-cyan) !important;                                           /* CIANO (era branco → agora ciano, mesma cor da variação e do preço) */
    font-weight: 700;                                                            /* Bold */
    margin-bottom: 10px;                                                         /* Espaço abaixo (antes dos swatches) */
    background: transparent !important;                                          /* Sem fundo */
    padding: 0 !important;                                                       /* Sem padding interno */
    text-shadow: 0 0 12px rgba(34, 211, 238, 0.35);                              /* Glow ciano sutil atrás do texto (reforça a cor) */
}

/* ─── NOME DA VARIAÇÃO SELECIONADA (ex: "BOT - VERSION : BRONZE - 30D" → a parte após ":") ─── */
/* Aparece DENTRO do label quando o usuário escolhe um swatch. */
.cart-form-wrapper .woo-selected-variation-item-name {
    font-family: var(--blz-font-main);                                           /* Inter */
    font-size: 13px;                                                             /* Mesmo tamanho do label */
    font-weight: 700;                                                            /* Bold */
    color: var(--blz-cyan) !important;                                           /* CIANO (acento — combina com o preço destacado) */
    letter-spacing: 1.4px;                                                       /* Espaçamento (alinhado com o label) */
    text-transform: uppercase;                                                   /* Caixa alta */
    text-shadow: 0 0 10px rgba(34, 211, 238, 0.4);                               /* Glow ciano sutil pra reforçar a cor */
}

/* ============================================================
 * VARIATION SWATCHES — "dual neon" chip style.
 * Direção: identidade do site = duo CIANO + ROXO (Products Archive.json).
 *   - normal: chip dark com outline fininho cinza
 *   - hover: outline ganha tom ciano + lift sutil
 *   - selected: borda com gradient ANIMADO ciano↔roxo (shimmer 4s),
 *               texto Rajdhani uppercase com text-shadow dual-color,
 *               LED dot ciano com halo roxo (não-monocromático),
 *               glow interno sutil.
 * Reset agressivo dos wrappers internos do plugin pra eliminar
 * as barras brancas/swatch placeholders esquisitas.
 * ============================================================ */

/* ─── TOOLTIPS do plugin Variation Swatches: ESCONDIDOS ─── */
/* O plugin renderiza um tooltip flutuante repetindo o nome do swatch ao passar o mouse.
   Como o nome JÁ está visível dentro do próprio botão, esse tooltip é redundante e polui visualmente.
   Cobrimos as classes que diferentes versões do plugin (free e pro) usam pro tooltip. */
.variable-items-wrapper .variable-item-tooltip,
.variable-items-wrapper .variable-item .tooltip,
.variable-items-wrapper .wvs-tooltip,
.variable-items-wrapper .wvs-pro-tooltip,
.variable-items-wrapper [data-tooltip],
body > .variable-item-tooltip,
body > .wvs-tooltip,
body > .wvs-pro-tooltip {
    display: none !important;                                          /* Remove o tooltip do layout — não aparece */
    visibility: hidden !important;                                     /* Reforço: invisível mesmo se algum CSS reativar display */
    opacity: 0 !important;                                             /* Reforço final: opacity zerada */
    pointer-events: none !important;                                   /* Não bloqueia clique se ainda existir no DOM */
}

/* ─── ANCESTRAIS da lista (table > tbody > tr > td) ─── */
/* O plugin Variation Swatches envolve a UL numa <table class="variations">.
   Forçamos as células a 100% pra grid ocupar toda a largura disponível. */
.cart-form-wrapper table.variations,
.cart-form-wrapper table.variations tbody,
.cart-form-wrapper table.variations tr,
.cart-form-wrapper table.variations td {
    width: 100% !important;                                            /* Cada nível ocupa largura total → UL recebe largura total */
    display: block !important;                                         /* Vira block (em vez de table-cell) — facilita controle de largura */
}

/* ─── CONTAINER UL: lista dos botões de variação ─── */
/* GRID em colunas iguais que se ajustam pelo container.
   `auto-fit` faz os botões ESTICAREM pra preencher o espaço (sem slots vazios).
   `minmax(120px, 1fr)` permite quebrar linha em telas estreitas. */
.cart-form-wrapper ul.variable-items-wrapper,
.cart-form-wrapper .variable-items-wrapper {
    display: grid !important;                                          /* Grid (não flex) — controle preciso de larguras iguais */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important; /* auto-FIT (não fill): botões esticam pra preencher, sem espaços vazios */
    grid-auto-rows: 1fr !important;                                    /* Todas as linhas com mesma altura — uniformiza cards */
    align-items: stretch !important;                                   /* Botões esticam até a altura da linha do grid */
    gap: 12px !important;                                              /* Espaço uniforme entre botões (horizontal e vertical) */
    padding: 0 !important;                                             /* Remove padding default da <ul> */
    margin: 0 !important;                                              /* Remove margin default da <ul> */
    list-style: none !important;                                       /* Remove bolinhas/marcadores da lista */
    background: transparent !important;                                /* Sem fundo no container */
    border: none !important;                                           /* Sem borda no container */
    box-shadow: none !important;                                       /* Sem sombra no container */
    width: 100% !important;                                            /* Ocupa toda a largura do parent */
    box-sizing: border-box !important;                                 /* Padding/border contam dentro da largura (previne overflow) */
}

/* ─── <li> CONTAINER de cada botão: reset TOTAL + força virar grid item de 100% ─── */
/* O plugin Variation Swatches embrulha cada botão num <li> que tem estilos próprios
   (display: inline-block, width: auto). Zeramos TUDO e forçamos block + width 100%
   pra cada <li> ser um grid item uniforme. */
.cart-form-wrapper ul.variable-items-wrapper > li,
.cart-form-wrapper .variable-items-wrapper > li,
.cart-form-wrapper li.variable-item,
.cart-form-wrapper li.button-variable-item,
.cart-form-wrapper .variable-item.button-variable-item {
    display: block !important;             /* Block (não inline-block do plugin) — vira grid item previsível */
    width: 100% !important;                /* Ocupa toda a coluna do grid (uniformiza larguras) */
    height: 100% !important;               /* Ocupa toda a altura da linha (uniformiza alturas) */
    list-style: none !important;           /* Sem marcador */
    margin: 0 !important;                  /* Sem espaçamento externo */
    padding: 0 !important;                 /* Sem espaçamento interno */
    background: transparent !important;    /* Sem fundo */
    background-color: transparent !important; /* (reforço — algumas regras do plugin usam background-color separado) */
    background-image: none !important;     /* Sem gradiente/imagem de fundo */
    border: 0 !important;                  /* Sem borda → elimina a "caixa externa" */
    border-radius: 0 !important;           /* Sem cantos arredondados no <li> */
    box-shadow: none !important;           /* Sem sombra */
    outline: 0 !important;                 /* Sem outline (que também aparecia como caixa) */
    min-width: 0 !important;               /* Plugin força largura mínima — zera */
    min-height: 0 !important;              /* Plugin força altura mínima — zera (deixa o flex do button gerenciar) */
    box-sizing: border-box !important;     /* Padding/border contam dentro da largura */
    float: none !important;                /* Defensivo: plugin antigo usava float, quebra grid */
}

/* ─── WRAPPERS INTERNOS do plugin: <span class="variable-item-contents"> etc. ─── */
/* São spans intermediários entre o <li> e o button real. Zera tudo + força largura
   100% pra que o botão dentro preencha a coluna do grid uniformemente. */
.cart-form-wrapper .variable-item-contents,
.cart-form-wrapper .button-variable-item .variable-item-contents,
.cart-form-wrapper .variable-item-image,
.cart-form-wrapper .variable-item-image-button,
.cart-form-wrapper .variable-item-button-image {
    display: block !important;                /* Block (não inline) — preenche largura/altura do parent */
    width: 100% !important;                   /* Ocupa toda a largura do <li> */
    height: 100% !important;                  /* Ocupa toda a altura do <li> */
    background: transparent !important;       /* Sem fundo herdado */
    background-color: transparent !important; /* (reforço) */
    background-image: none !important;        /* Sem imagem de fundo */
    border: 0 !important;                     /* Sem borda */
    border-radius: 0 !important;              /* Sem cantos arredondados */
    padding: 0 !important;                    /* Sem padding interno */
    margin: 0 !important;                     /* Sem margin externa */
    box-shadow: none !important;              /* Sem sombra */
    outline: 0 !important;                    /* Sem outline */
    box-sizing: border-box !important;        /* Padding/border contam dentro */
}
/* ESCONDE o placeholder de "swatch image" quando vazio — causava a barra branca */
.cart-form-wrapper .variable-item-image:empty,
.cart-form-wrapper .variable-item-button-image:empty,
.cart-form-wrapper .variable-item-image-button:empty {
    display: none !important;              /* Removido do layout */
}

/* ─── BOTÃO BASE (não selecionado) ─── */
/* O botão real onde o usuário clica. Visual: chip dark sólido com outline fininho.
   Preenche 100% do container <.variable-item-contents> pra que todos os cards do grid
   tenham EXATAMENTE a mesma largura e altura, mesmo com textos de tamanhos diferentes. */
.cart-form-wrapper .variable-item-span,
.cart-form-wrapper .variable-item-span-button {
    position: relative !important;                                       /* Necessário pro ::before (LED) ser absoluto dentro */
    display: flex !important;                                            /* Flex pra centralizar texto vertical+horizontal */
    align-items: center !important;                                      /* Centraliza vertical */
    justify-content: center !important;                                  /* Centraliza horizontal */
    width: 100% !important;                                              /* Ocupa toda a largura do parent (.variable-item-contents) */
    height: 100% !important;                                             /* Ocupa toda a altura da row do grid (uniformidade vertical) */
    box-sizing: border-box !important;                                   /* Padding/border contam dentro da largura — previne overflow */
    font-family: var(--blz-font-main), 'Inter', sans-serif !important;   /* Inter (legibilidade) em vez de Rajdhani (estava apertada nos cards) */
    font-size: 13.5px !important;                                        /* Tamanho um pouco maior (era 13px) */
    font-weight: 700 !important;                                         /* Texto bold */
    letter-spacing: 1.1px !important;                                    /* Espaçamento moderado (era 1.8px — apertava demais) */
    text-transform: uppercase !important;                                /* "1 ACCOUNT VERSION" sempre em caixa alta */
    padding: 13px 14px !important;                                       /* Padding (lateral menor pra cabermos em colunas mais estreitas) */
    margin: 0 !important;                                                /* Sem margem externa (gap do container cuida) */
    min-height: 54px !important;                                         /* Altura mínima de 54px — todos os cards têm pelo menos essa altura */
    text-align: center !important;                                       /* Garante centralização de fallback */
    background: rgba(15, 23, 42, 0.95) !important;                       /* Fundo OPACO (era 0.55 transparente — agora 0.95 pra contraste forte) */
    border: 1px solid rgba(255, 255, 255, 0.14) !important;              /* Borda branca um pouco mais forte (14% — antes 8%) pra delimitar o card */
    border-radius: 6px !important;                                       /* Cantos suavemente arredondados */
    color: var(--blz-text) !important;                                   /* Texto cinza CLARO (era --blz-text-muted, mais escuro) — melhor leitura */
    cursor: pointer !important;                                          /* Cursor de mãozinha */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;                /* Sombra leve embaixo (eleva sutil, ajuda a destacar o card do fundo) */
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important; /* Transições suaves entre estados */
    background-clip: border-box !important;                              /* Garante background colado na borda (não interfere com o trick do selected) */
    word-break: break-word !important;                                   /* Quebra textos longos (ex: "GOLD • LIFETIME") sem estourar o card */
    line-height: 1.25 !important;                                        /* Altura de linha confortável pra texto multi-linha */
    white-space: normal !important;                                      /* Permite quebra de linha (default de span é nowrap em alguns themes) */
}

/* ─── HOVER (mouse passa por cima, ainda não selecionou) ─── */
.cart-form-wrapper .variable-item-span:hover,
.cart-form-wrapper .variable-item-span-button:hover {
    color: var(--blz-text-white) !important;                          /* Texto fica branco puro */
    border-color: rgba(168, 85, 247, 0.35) !important;                /* Borda ganha tom ROXO sutil (preview do estado selected) */
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.06), rgba(168, 85, 247, 0.05)) !important; /* Fundo gradient ciano→roxo MUITO sutil */
    transform: translateY(-1px) !important;                           /* Elevação de 1px (sensação de "flutuar") */
}

/* ─── SELECTED (botão clicado, ativo) ─── */
/* Visual: borda com gradient ciano↔roxo ANIMADO, glow dual-color, LED dot pulsante.
   COBRE 2 CENÁRIOS:
   (a) Clique manual: nosso JS marca .selected NO <span> interno (variable-item-span)
   (b) Restauração pós add-to-cart / page reload: o plugin Variation Swatches restaura
       a seleção via localStorage/cookies/URL e marca .selected APENAS no <li> pai
       (variable-item / button-variable-item), sem propagar pro <span> interno.
   Por isso miramos AMBOS: <span>.selected (cenário a) E <li>.selected > <span> (cenário b). */
.cart-form-wrapper .variable-item-span.selected,                                                   /* (a) clique: span direto */
.cart-form-wrapper .variable-item-span-button.selected,                                            /* (a) clique: variante -button */
.cart-form-wrapper span.variable-item-span.selected,                                               /* (a) reforço de especificidade */
.cart-form-wrapper span.variable-item-span-button.selected,                                        /* (a) reforço -button */
.cart-form-wrapper .variable-items-wrapper > li.selected .variable-item-span,                      /* (b) reload: <li>.selected propaga visual pro span filho */
.cart-form-wrapper .variable-items-wrapper > li.selected .variable-item-span-button,               /* (b) reload: idem variante -button */
.cart-form-wrapper ul.variable-items-wrapper > li.selected .variable-item-span,                    /* (b) reforço ul> (algumas versões do plugin renderizam com seletor diferente) */
.cart-form-wrapper ul.variable-items-wrapper > li.selected .variable-item-span-button {            /* (b) idem -button */
    color: var(--blz-text-white) !important;            /* Texto branco puro */
    /* TRUQUE DUAL-BACKGROUND (chave do efeito da borda neon):
       - Camada 1 (padding-box) = fundo dark sólido SÓ na área interna do padding
       - Camada 2 (border-box)  = gradient ciano→roxo visível APENAS na borda (porque border:transparent abre janela pra ele) */
    background:
        linear-gradient(rgba(15, 23, 42, 0.90), rgba(15, 23, 42, 0.90)) padding-box,         /* Camada 1: dark sólido (área interna) */
        linear-gradient(90deg, #22d3ee, #a855f7, #22d3ee, #a855f7) border-box !important;    /* Camada 2: gradient ciano↔roxo↔ciano↔roxo (borda) */
    background-size: auto, 200% 100% !important;        /* Camada 2 com largura 200% pra animation deslizar */
    border: 1.5px solid transparent !important;         /* Borda 1.5px transparente — vira "janela" pro gradient da camada 2 */
    border-radius: 6px !important;                      /* Mesmo arredondamento do normal */
    animation: spSwatchShimmer 4s linear infinite !important; /* Animação contínua: gradient da borda desliza horizontalmente */
    /* GLOW DUAL-COLOR (sombras em 3 camadas, ciano + roxo) */
    box-shadow:
        inset 0 0 18px rgba(34, 211, 238, 0.10),        /* Glow ciano INTERNO (luz dentro do botão) */
        0 0 22px rgba(34, 211, 238, 0.18),              /* Halo ciano EXTERNO (próximo) */
        0 0 38px rgba(168, 85, 247, 0.12) !important;   /* Halo ROXO EXTERNO (mais distante, segunda cor da assinatura) */
    /* TEXT-SHADOW DUAL: texto com glow ciano + halo roxo sutil */
    text-shadow:
        0 0 6px rgba(34, 211, 238, 0.5),                /* Glow ciano próximo no texto */
        0 0 14px rgba(168, 85, 247, 0.25) !important;   /* Halo roxo mais espalhado */
    transform: translateY(-1px) !important;             /* Mantém o lift de 1px do hover */
    padding-left: 24px !important;                      /* Espaço sutil à esquerda pro LED dot caber (era 30px, agora 24px porque texto está centralizado via flex) */
}

/* ─── ANIMAÇÃO: borda gradient desliza ciano→roxo→ciano→roxo (4s loop) ─── */
@keyframes spSwatchShimmer {
    0%   { background-position: 0 0, 0% 50%;   }       /* Início: gradient na posição 0% */
    100% { background-position: 0 0, 200% 50%; }       /* Fim: gradient deslocou 200% (uma volta completa, loop sem corte porque a cor repete) */
}

/* ─── LED DOT (bolinha à esquerda do texto, indica "selecionado") ─── */
/* Bolinha 6x6px ciano com halo triplo (ciano + ciano + roxo). Pulsa devagar. */
.cart-form-wrapper .variable-item-span.selected::before,                                            /* (a) clique: span direto */
.cart-form-wrapper .variable-item-span-button.selected::before,                                     /* (a) clique: variante -button */
.cart-form-wrapper span.variable-item-span.selected::before,                                        /* (a) reforço de especificidade */
.cart-form-wrapper span.variable-item-span-button.selected::before,                                 /* (a) reforço -button */
.cart-form-wrapper .variable-items-wrapper > li.selected .variable-item-span::before,               /* (b) reload: LED dot quando seleção foi restaurada via <li>.selected */
.cart-form-wrapper .variable-items-wrapper > li.selected .variable-item-span-button::before,        /* (b) reload: idem variante -button */
.cart-form-wrapper ul.variable-items-wrapper > li.selected .variable-item-span::before,             /* (b) reforço ul> */
.cart-form-wrapper ul.variable-items-wrapper > li.selected .variable-item-span-button::before {     /* (b) idem -button */
    content: '' !important;                       /* Pseudo-elemento vazio (só visual) */
    position: absolute !important;                /* Posicionado em relação ao .variable-item-span (que tem position:relative) */
    left: 10px !important;                        /* 10px da borda esquerda (era 13px — alinhado com novo padding-left:24px) */
    top: 50% !important;                          /* Meio vertical */
    transform: translateY(-50%) !important;       /* Trick pra centralizar vertical exato */
    width: 6px !important;                        /* Diâmetro do LED */
    height: 6px !important;                       /* (mesma altura, vira círculo) */
    background: var(--blz-cyan) !important;       /* Cor sólida ciano */
    border-radius: 50% !important;                /* 50% = círculo perfeito */
    /* HALO TRIPLO: 3 sombras concêntricas, dual-color ciano→roxo */
    box-shadow:
        0 0 3px var(--blz-cyan),                  /* Halo interno tight (3px ciano) */
        0 0 8px rgba(34, 211, 238, 0.8),          /* Halo médio (8px ciano transparente) */
        0 0 16px rgba(168, 85, 247, 0.5) !important; /* Halo externo ROXO (16px) — toque dual-color */
    animation: spSwatchLed 1.6s ease-in-out infinite !important; /* Pulse infinito (opacity e scale) */
    margin: 0 !important;                         /* Sem margin (alguns plugins injetam ::before com margin) */
    color: transparent !important;                /* Defensivo: se o plugin tentar injetar texto no ::before, fica invisível */
    font-size: 0 !important;                      /* (idem — qualquer texto não ocupa espaço) */
}

/* ─── ANIMAÇÃO LED: pulse (1 → 0.55 → 1 opacity, 1 → 0.75 → 1 scale) ─── */
@keyframes spSwatchLed {
    0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }       /* Estado normal: brilho cheio, tamanho 100% */
    50%      { opacity: 0.55; transform: translateY(-50%) scale(0.75); } /* Meio do pulse: brilho 55%, encolhe pra 75% */
}

/* ─── SEM bracket no canto direito (removi pra não confundir com markup do plugin) ─── */
.cart-form-wrapper .variable-item-span.selected::after,                                             /* (a) clique: span direto */
.cart-form-wrapper .variable-item-span-button.selected::after,                                      /* (a) clique: variante -button */
.cart-form-wrapper span.variable-item-span.selected::after,                                         /* (a) reforço de especificidade */
.cart-form-wrapper span.variable-item-span-button.selected::after,                                  /* (a) reforço -button */
.cart-form-wrapper .variable-items-wrapper > li.selected .variable-item-span::after,                /* (b) reload: desliga ::after também no cenário <li>.selected */
.cart-form-wrapper .variable-items-wrapper > li.selected .variable-item-span-button::after,         /* (b) reload: idem variante -button */
.cart-form-wrapper ul.variable-items-wrapper > li.selected .variable-item-span::after,              /* (b) reforço ul> */
.cart-form-wrapper ul.variable-items-wrapper > li.selected .variable-item-span-button::after {      /* (b) idem -button */
    content: none !important;                  /* Pseudo ::after explicitamente desligado */
}

/* ─── ACESSIBILIDADE: foco visível quando navega por TAB (teclado) ─── */
.cart-form-wrapper .variable-item-span:focus-visible,
.cart-form-wrapper .variable-item-span-button:focus-visible {
    outline: 2px solid var(--blz-cyan) !important; /* Ring ciano de 2px ao redor */
    outline-offset: 2px !important;                /* Afastamento de 2px da borda do botão */
}

/* ─── REDUCED MOTION: desliga animações pra quem prefere menos movimento (a11y) ─── */
@media (prefers-reduced-motion: reduce) {
    .cart-form-wrapper .variable-item-span.selected,                                                /* (a) clique: span direto */
    .cart-form-wrapper .variable-item-span-button.selected,                                         /* (a) clique: variante -button */
    .cart-form-wrapper .variable-item-span.selected::before,                                        /* (a) LED dot do clique */
    .cart-form-wrapper .variable-item-span-button.selected::before,                                 /* (a) LED dot variante -button */
    .cart-form-wrapper .variable-items-wrapper > li.selected .variable-item-span,                   /* (b) reload: pausa shimmer no cenário <li>.selected */
    .cart-form-wrapper .variable-items-wrapper > li.selected .variable-item-span-button,            /* (b) reload: idem -button */
    .cart-form-wrapper .variable-items-wrapper > li.selected .variable-item-span::before,           /* (b) reload: pausa pulse do LED */
    .cart-form-wrapper .variable-items-wrapper > li.selected .variable-item-span-button::before {   /* (b) reload: idem -button */
        animation: none !important;            /* Shimmer da borda e pulse do LED são pausados */
    }
}
.cart-form-wrapper select {                                                      /* Select fallback (sem plugin de swatches) */
    width: 100%;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--blz-radius-md);
    color: var(--blz-text-white);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--blz-transition);
}
.cart-form-wrapper select:hover,
.cart-form-wrapper select:focus {
    border-color: rgba(34, 211, 238, 0.4);
    background: rgba(0, 0, 0, 0.6);
    outline: none;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1);
}

/* ─── CONTAINERS do WC pra info da variação selecionada (preço, descrição, estoque) ─── */
/* Reset visual: sem fundo, sem padding, com pouca margem inferior pra agrupar visualmente. */
.cart-form-wrapper .woocommerce-variation,
.cart-form-wrapper .single_variation_wrap,
.cart-form-wrapper .woocommerce-variation-description,
.cart-form-wrapper .woocommerce-variation-price,
.cart-form-wrapper .woocommerce-variation-availability {
    background: transparent !important;                                          /* Sem fundo (deixa o purchase card aparecer) */
    padding: 0 !important;                                                       /* Sem padding interno */
    margin: 0 0 16px 0 !important;                                               /* Margem só embaixo (separa do próximo elemento) */
}

/* ─── DESCRIPTION e AVAILABILITY (textos secundários da variação) ─── */
.cart-form-wrapper .woocommerce-variation-description p,
.cart-form-wrapper .woocommerce-variation-availability span {
    color: var(--blz-text-muted) !important;                                     /* Cinza médio (info secundária — não destaca) */
    font-size: 12px !important;                                                  /* Compacto */
    text-transform: uppercase !important;                                        /* Caixa alta */
    letter-spacing: 1px !important;                                              /* Espaçamento sutil */
    font-weight: 600 !important;                                                 /* Semi-bold */
}

/* ─── PREÇO da variação selecionada (ex: "~ US$ 12.73") ─── */
/* É o preço ATUAL do tier escolhido — precisa de destaque visual igual ao preço range no topo. */
.cart-form-wrapper .woocommerce-variation-price,
.cart-form-wrapper .woocommerce-variation-price .price,
.cart-form-wrapper .woocommerce-variation-price .price span,
.cart-form-wrapper .woocommerce-variation-price .price bdi,
.cart-form-wrapper .woocommerce-variation-price .price .woocommerce-Price-amount,
.cart-form-wrapper .woocommerce-variation-price .price .woocommerce-Price-currencySymbol {
    color: var(--blz-cyan) !important;                                           /* CIANO (era cinza muted — agora destaque máximo) */
    font-family: var(--blz-font-heading), 'Rajdhani', sans-serif !important;     /* Rajdhani (fonte de display da loja) */
    font-size: 22px !important;                                                  /* Tamanho generoso (era 12px — agora chama atenção) */
    font-weight: 700 !important;                                                 /* Bold */
    letter-spacing: 0.5px !important;                                            /* Espaçamento leve */
    text-transform: none !important;                                             /* Não força uppercase no preço (mantém "~ US$" como é) */
    text-shadow: 0 0 18px rgba(34, 211, 238, 0.4);                               /* Glow ciano (igual ao preço range do topo, mantém consistência) */
    line-height: 1.2 !important;                                                 /* Altura de linha compacta */
}
.cart-form-wrapper .woocommerce-variation-price .price small {
    font-size: 14px !important;                                                  /* "~ US$" um pouco menor que o número (hierarquia visual) */
    font-weight: 600 !important;                                                 /* Semi-bold (em vez do bold do número) */
    opacity: 0.85 !important;                                                    /* Sutilmente apagado pra dar destaque ao número */
}
/* ─── PREÇO RISCADO (cheio) + PREÇO COM DESCONTO (ins) ─── */
/* Quando o JS detecta tier ativo, sobrescreve o preço da variação com:
   <del>preço cheio</del> <ins>preço com desconto</ins> (padrão de "sale price" do e-commerce).
   Wrapper .price vira flex pra alinhar o <del> e o <ins> verticalmente no centro. */
.cart-form-wrapper .woocommerce-variation-price .price {
    display: inline-flex !important;                                             /* Flex inline alinha as duas pills horizontalmente */
    align-items: center !important;                                              /* CENTRA verticalmente del e ins (resolve o desalinhamento da foto) */
    gap: 10px !important;                                                        /* Espaço entre o preço riscado e o novo (sem depender de " " no markup) */
    flex-wrap: wrap;                                                             /* Quebra em mobile estreito */
}

/* DEL = preço cheio riscado.
   Crítico: TUDO dentro do <del> com MESMO font-size + line-height — assim o text-decoration: line-through
   do navegador desenha UMA LINHA contínua centralizada (em vez de subir/descer por causa de <small> e mudanças de tamanho). */
.cart-form-wrapper .woocommerce-variation-price del,
.cart-form-wrapper .woocommerce-variation-price del *,
.cart-form-wrapper .woocommerce-variation-price del bdi,
.cart-form-wrapper .woocommerce-variation-price del span {
    color: var(--blz-text-dim) !important;                                       /* Cinza apagado pro preço cheio (perdeu protagonismo) */
    font-size: 15px !important;                                                  /* UNIFORME — sem <small> aqui (markup do JS já não tem) */
    font-weight: 600 !important;
    line-height: 1 !important;                                                   /* line-height 1 mantém todo o conteúdo no mesmo eixo vertical */
    text-shadow: none !important;                                                /* Sem glow no preço riscado */
    text-transform: none !important;
    letter-spacing: 0.3px !important;
    opacity: 0.7 !important;                                                     /* Ainda mais apagado pra ENFATIZAR o ins */
    vertical-align: middle !important;                                           /* Alinha verticalmente com o ins */
}
.cart-form-wrapper .woocommerce-variation-price del {
    text-decoration: line-through !important;                                    /* Strikethrough no elemento PAI — desenha 1 linha só (não em cada child) */
    text-decoration-color: var(--blz-text-dim) !important;                       /* Cor da linha */
    text-decoration-thickness: 1.5px !important;                                 /* Espessura da linha (mais visível) */
    text-decoration-skip-ink: none !important;                                   /* Garante que a linha passa por cima das letras sem "pular" */
    display: inline-block !important;                                            /* inline-block dá controle sobre vertical-align */
}

/* INS = novo preço com desconto.
   Mantém o <small> dentro do símbolo pra hierarquia visual ("~ US$" menor que o número),
   igual ao formato padrão do WC (consistência com o resto do site). */
.cart-form-wrapper .woocommerce-variation-price ins {
    background: transparent !important;                                          /* Browser default põe background amarelo no <ins> — reseta */
    text-decoration: none !important;                                            /* Browser default põe underline no <ins> — reseta */
    display: inline-block !important;
    vertical-align: middle !important;                                           /* Alinha com o del */
}
.cart-form-wrapper .woocommerce-variation-price ins,
.cart-form-wrapper .woocommerce-variation-price ins * {
    color: var(--blz-cyan) !important;                                           /* Ciano destacado */
    text-shadow: 0 0 18px rgba(34, 211, 238, 0.5) !important;                    /* Glow ciano forte pra ENFATIZAR o novo preço */
    font-weight: 700 !important;
}
/* Garante que o <small> dentro do <ins> mantém o mesmo padrão do markup original do WC */
.cart-form-wrapper .woocommerce-variation-price ins small {
    font-size: 14px !important;
    font-weight: 600 !important;
    opacity: 0.85 !important;
}
/* ─── WRAPPER do input de QUANTIDADE (caixa com o número "1") ─── */
.cart-form-wrapper .quantity {
    margin-top: 22px !important;       /* Espaço EM CIMA: respira em relação ao botão "CLEAR" / swatch selecionado */
    margin-bottom: 28px !important;    /* Espaço EMBAIXO: respira em relação ao "ADD TO CART" (antes era 20px, ficava colado) */
}

/* ─── INPUT NUMÉRICO de quantidade (caixa preta com o número) ─── */
.cart-form-wrapper .quantity input {
    width: 100%;                                                  /* Ocupa toda a largura do purchase card */
    padding: 14px;                                                /* Espaço interno generoso (clicável fácil) */
    background: rgba(0, 0, 0, 0.4);                               /* Fundo preto semi-transparente */
    border: 1px solid rgba(255, 255, 255, 0.1);                   /* Borda branca quase invisível */
    border-radius: var(--blz-radius-md);                          /* Cantos arredondados (token do design system) */
    color: var(--blz-text-white);                                 /* Texto branco puro (legível no fundo escuro) */
    font-size: 16px;                                              /* Tamanho legível */
    text-align: center;                                           /* Número centralizado */
    font-weight: 600;                                             /* Semi-bold */
}

/* ─── BOTÃO "ADD TO CART" (principal, ciano, full-width) ─── */
.cart-form-wrapper .single_add_to_cart_button {
    flex: 1 1 100% !important;                                    /* Quebra pra próxima linha do flex parent + ocupa 100% (alinhado com qty+total acima) */
    width: 100% !important;                                       /* Ocupa toda a largura do purchase card */
    margin-top: 12px !important;                                  /* Folga acima — separa do bloco qty+total (era 8, agora 12 pra compensar o gap menor) */
    padding: 16px 28px !important;                                /* Padding reduzido (era 18/32) — mais alinhado com card compacto */
    background: var(--blz-gradient-cyan) !important;              /* Gradient ciano (token do design system) */
    color: #000 !important;                                       /* Texto PRETO sobre fundo ciano (contraste alto, legibilidade máxima) */
    font-family: var(--blz-font-heading) !important;              /* Fonte Rajdhani (display) */
    font-size: 16px !important;                                   /* Reduzido (era 17) — proporcional ao card menor */
    font-weight: 700 !important;                                  /* Bold */
    letter-spacing: 2px !important;                               /* Espaçamento agressivo entre letras (look tactical) */
    text-transform: uppercase !important;                         /* "ADD TO CART" sempre em caixa alta */
    border: none !important;                                      /* Sem borda */
    border-radius: 12px !important;                               /* Cantos bem arredondados (CTA suave) */
    cursor: pointer !important;                                   /* Cursor de mãozinha */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Transição ease-out customizada (sensação de "deslizar") */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;         /* Sombra escura embaixo (eleva o botão) */
    position: relative;                                           /* Necessário pro overflow:hidden + futuros pseudo-elements */
    overflow: hidden;                                             /* Recorta efeitos visuais ao retângulo do botão */
}

/* ─── HOVER do ADD TO CART ─── */
.cart-form-wrapper .single_add_to_cart_button:hover {
    transform: translateY(-2px) !important;                       /* Eleva 2px (sensação de "levantar") */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;         /* Sombra maior e mais escura (reforça elevação) */
}

/* ─── ACTIVE (clicando) do ADD TO CART ─── */
.cart-form-wrapper .single_add_to_cart_button:active {
    transform: translateY(0) !important;                          /* Volta pro zero — sensação tátil de "pressionado" */
}

/* ─── BOTÃO "CLEAR" do WC: ESCONDIDO ─── */
/* O WooCommerce injeta o link "Clear" automaticamente quando uma variação é selecionada.
   Não precisamos dele porque o JS já faz toggle ao clicar de novo no mesmo swatch
   (clicar novamente em "1 ACCOUNT VERSION" desfaz a seleção sozinho). */
.cart-form-wrapper .reset_variations {
    display: none !important;                                     /* Remove do layout — sem ocupar espaço, sem aparecer visualmente */
}

/* ============================================================
 * TOAST — notificação flutuante (canto inferior direito).
 * Substitui o alert() nativo do WC quando falta selecionar variação.
 * Variantes: --error (vermelho), --success (verde), --info (ciano).
 * ============================================================ */
.sp-toast {
    position: fixed !important;                                   /* Fica fixo na tela mesmo com scroll */
    bottom: 24px !important;                                      /* 24px da borda inferior */
    right: 24px !important;                                       /* 24px da borda direita */
    z-index: 999999 !important;                                   /* Acima de tudo (modais, header, etc.) */
    display: inline-flex !important;                              /* Flex pra alinhar ícone + texto numa linha */
    align-items: center !important;                               /* Centraliza vertical o SVG com o texto */
    gap: 12px !important;                                         /* Espaço entre o ícone e o texto */
    padding: 14px 20px !important;                                /* Padding interno generoso (clicável e legível) */
    min-width: 280px !important;                                  /* Largura mínima pra textos curtos não ficarem espremidos */
    max-width: 420px !important;                                  /* Largura máxima — textos longos quebram dentro */
    color: #fff !important;                                       /* Texto sempre branco (contraste alto em fundos coloridos) */
    font-family: var(--blz-font-main), 'Inter', sans-serif !important; /* Fonte UI (Inter) */
    font-size: 14px !important;                                   /* Tamanho legível */
    font-weight: 600 !important;                                  /* Semi-bold */
    line-height: 1.4 !important;                                  /* Altura de linha confortável */
    border-radius: 10px !important;                               /* Cantos arredondados */
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45) !important;       /* Sombra grande embaixo (eleva da página, parece flutuante) */
    transform: translateY(20px) !important;                       /* Estado inicial: 20px abaixo da posição final */
    opacity: 0 !important;                                        /* Invisível por padrão */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease !important; /* Slide + fade suaves */
    pointer-events: none !important;                              /* Não bloqueia clique em elementos atrás (a menos que .is-visible) */
}

/* ─── Toast VISÍVEL (estado ativo após JS adicionar .is-visible) ─── */
.sp-toast.is-visible {
    transform: translateY(0) !important;                          /* Sobe pra posição final (slide-in) */
    opacity: 1 !important;                                        /* Fica visível */
    pointer-events: auto !important;                              /* Permite clique (caso queira fechar manualmente) */
}

/* ─── Variantes de cor (definidas pelo segundo argumento de spShowToast()) ─── */
.sp-toast--error {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important; /* Gradient vermelho (erro/alerta) */
    border: 1px solid rgba(239, 68, 68, 0.5) !important;              /* Borda vermelha mais forte */
}
.sp-toast--success {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important; /* Gradient verde (sucesso) */
    border: 1px solid rgba(34, 197, 94, 0.5) !important;              /* Borda verde */
}
.sp-toast--info {
    background: linear-gradient(135deg, #22d3ee, #06b6d4) !important; /* Gradient ciano (informação neutra) */
    color: #000 !important;                                           /* Texto PRETO sobre ciano (legibilidade) */
    border: 1px solid rgba(34, 211, 238, 0.5) !important;             /* Borda ciano */
}

/* ─── Ícone SVG dentro do toast ─── */
.sp-toast svg {
    flex-shrink: 0 !important;                                    /* Não encolhe quando o texto cresce */
}

/* ─── Mensagem de texto dentro do toast ─── */
.sp-toast .sp-toast-msg {
    flex: 1 !important;                                           /* Ocupa espaço restante depois do ícone */
}

/* ─── Toast em telas pequenas (full-width na base) ─── */
@media (max-width: 768px) {
    .sp-toast {
        left: 16px !important;                                    /* Espaço da borda esquerda */
        right: 16px !important;                                   /* Espaço da borda direita */
        bottom: 16px !important;                                  /* Espaço da borda inferior */
        min-width: 0 !important;                                  /* Remove largura mínima (deixa o full-width acontecer) */
        max-width: none !important;                               /* Remove largura máxima */
    }
}

/* ============================================================
 * SHAKE — animação aplicada nos cards de variação não selecionados
 * quando o usuário clica ADD TO CART sem ter escolhido versão.
 * Oscila horizontalmente por 500ms — chama atenção visual.
 * ============================================================ */
/* ─── ANIMAÇÃO 1: TREMOR HORIZONTAL (translateX) ─── */
/* Anima apenas `transform` porque essa propriedade não tem !important
   no estado base do botão (animação consegue sobrescrever sem conflito). */
@keyframes spShake {
    0%, 100% { transform: translateX(0); }                        /* Posição neutra (início e fim do ciclo) */
    10%      { transform: translateX(-5px); }                     /* Salto pra esquerda */
    25%      { transform: translateX(5px); }                      /* Salto pra direita */
    40%      { transform: translateX(-4px); }                     /* Oscilação intermediária */
    55%      { transform: translateX(4px); }                      /* Oscilação intermediária */
    70%      { transform: translateX(-2px); }                     /* Quase parado */
    85%      { transform: translateX(2px); }                      /* Última oscilação suave */
}

/* ─── ANIMAÇÃO 2: PISCA-PISCA via opacity do overlay ::after ─── */
/* Trabalhamos no opacity de um pseudo-elemento (overlay vermelho) porque:
   - Border-color e box-shadow do botão têm !important no estado base → CSS animation NÃO sobrescreve
   - Pseudo-elementos (::after) são camadas separadas → ignoram o !important do parent
   - Animar opacity é GPU-accelerated, performático
   Resultado: overlay vermelho aparece (1) e some (0) a cada 0.5s — piscar BEM visível. */
@keyframes spShakeBlink {
    0%, 100% { opacity: 1; }                                      /* Estado "LIGADO": overlay vermelho totalmente visível */
    50%      { opacity: 0; }                                      /* Estado "DESLIGADO": overlay totalmente invisível */
}

/* ─── CLASSE .sp-shake aplicada pelo JS quando o usuário clica ADD TO CART sem variação ─── */
/* Aplica: tremor (transform) + borda vermelha estática (sobrescreve !important do base). */
.cart-form-wrapper .variable-item-span.sp-shake,
.cart-form-wrapper .variable-item-span-button.sp-shake {
    animation: spShake 0.5s ease-in-out infinite !important;      /* Tremor horizontal contínuo (até JS remover a classe em 5s) */
    border-color: rgba(239, 68, 68, 0.85) !important;             /* Borda vermelha permanente enquanto .sp-shake ativa */
    box-shadow:
        0 0 0 1.5px rgba(239, 68, 68, 0.4),                       /* Outline interno colado na borda */
        0 0 18px rgba(239, 68, 68, 0.35) !important;              /* Halo difuso ao redor */
    position: relative !important;                                /* Necessário pro ::after absoluto ficar contido dentro do card */
    overflow: visible !important;                                 /* Não corta o halo do box-shadow */
}

/* ─── ::after = OVERLAY VERMELHO QUE PISCA (responsável pelo "piscar" visível) ─── */
/* Camada vermelha sobreposta ao card inteiro, alternando opacity 1↔0 a cada 0.5s. */
.cart-form-wrapper .variable-item-span.sp-shake::after,
.cart-form-wrapper .variable-item-span-button.sp-shake::after {
    content: '' !important;                                       /* Pseudo-elemento vazio (só visual) */
    position: absolute !important;                                /* Posicionado em relação ao botão */
    inset: 0 !important;                                          /* Cobre todo o card (top:0, right:0, bottom:0, left:0) */
    background: rgba(239, 68, 68, 0.35) !important;               /* Vermelho semi-transparente (35% — visível mas não esconde o texto) */
    border-radius: 6px !important;                                /* Mesmo arredondamento do card pra não ultrapassar borda */
    pointer-events: none !important;                              /* Não bloqueia clique no botão abaixo */
    animation: spShakeBlink 0.5s ease-in-out infinite !important; /* Pisca: opacity 1↔0 a cada 0.5s, loop infinito */
    z-index: 1 !important;                                        /* Acima do background do card, abaixo de elementos absolute como o LED */
}

/* ─── Respeita preferência de reduzir movimento (acessibilidade) ─── */
@media (prefers-reduced-motion: reduce) {
    .sp-toast {
        transition: opacity 0.2s ease !important;                 /* Sem slide, só fade */
        transform: none !important;                               /* Já entra na posição final */
    }
    .cart-form-wrapper .variable-item-span.sp-shake,
    .cart-form-wrapper .variable-item-span-button.sp-shake {
        animation: none !important;                               /* Sem shake — só a borda vermelha sinaliza */
    }
}

/* === TABS (Description / Tutorials / etc.) === */
.sp-tabs-section { padding: 40px 0 80px; }
.sp-tabs {
    background: var(--blz-bg-card);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    overflow: hidden;                                                            /* Recorta os cantos dos botões */
}
.tabs-nav {
    display: flex;
    gap: 0;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.tab-btn {
    flex: 1;                                                                     /* Cada botão divide largura igual */
    padding: 18px 24px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;                                        /* Sublinhado vazio (preenche no .active) */
    color: var(--blz-text-dim);
    font-family: var(--blz-font-heading);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--blz-transition);
}
.tab-btn:hover {
    color: var(--blz-text-muted);
    background: rgba(255, 255, 255, 0.02);
}
.tab-btn.active {
    color: var(--blz-cyan);
    border-bottom-color: var(--blz-cyan);                                        /* Sublinhado ciano */
    background: rgba(34, 211, 238, 0.05);
}
.tabs-panels { padding: 40px; }
.tab-panel { display: none; }                                                    /* Esconde painéis inativos */
.tab-panel.active {
    display: block;
    animation: fadeIn 0.4s;                                                      /* Fade in quando ativa */
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.tab-panel h2 {
    font-family: var(--blz-font-heading);
    font-size: 28px;
    font-weight: 700;
    color: var(--blz-text-white);
    margin: 0 0 20px 0;
}
.tab-panel p,
.tab-panel li {
    color: var(--blz-text);
    line-height: 1.8;
    margin-bottom: 16px;
}
.tab-panel ul,
.tab-panel ol { padding-left: 24px; }

/* === RESPONSIVE === */
@media (max-width: 1024px) {                                                     /* Tablet — purchase card desce */
    .sp-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .sp-right { position: static; }                                              /* Sem sticky em telas pequenas */
    .trust-badges-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {                                                      /* Mobile */
    .hero-title { font-size: 26px; letter-spacing: 1.3px; }                      /* Tablet: 26px (era 32px) — proporcional ao novo desktop reduzido */
    .hero-meta { gap: 16px; }
    .trust-badges-grid {
        grid-template-columns: 1fr;                                              /* 3 badges → 1 coluna */
        gap: 12px;
    }
    .trust-badge {
        flex-direction: row;                                                     /* Layout horizontal em mobile (ícone esq, texto dir) */
        text-align: left;
        padding: 16px;
    }
    .badge-icon { width: 40px; height: 40px; }
    .gallery-thumbs {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        gap: 8px;
    }
    .purchase-card { padding: 24px; }
    .price-display { font-size: 36px; }
    .tabs-nav { flex-direction: column; }                                        /* Tabs empilham verticalmente */
    .tab-btn {
        border-bottom: none;
        border-left: 3px solid transparent;                                      /* Sublinhado vira borda esquerda */
    }
    .tab-btn.active { border-left-color: var(--blz-cyan); }
    .tabs-panels { padding: 24px; }
}
@media (max-width: 480px) {                                                      /* Smartphones pequenos */
    .sp-container { padding: 0 16px; }                                           /* Padding lateral menor pra economizar espaço */
    .sp-breadcrumb { font-size: 11px; gap: 6px; }                                /* Breadcrumb compacto */
    .hero-title { font-size: 22px; letter-spacing: 1px; }                        /* Mobile pequeno: 22px (era 24px) + letter-spacing reduzido pra caber */
    .purchase-card { padding: 20px; }                                            /* Card com padding menor */
}

/* ===================================================================== */
/* === VOLUME PRICING (data-driven via blazerd-discount-rules plugin) === */
/* ===================================================================== */
/* Bloco que aparece entre o cart-form e os trust-badges quando o plugin tem regras configuradas pro produto.
   Sobrescreve TODO o markup default do plugin (.awdr-bulk-customizable-table → tabela branca feia)
   pro tema dark+neon do site. Inspirado em JetBrains, 1Password Teams e Notion (volume pricing tables). */

.volume-pricing {
    margin: 20px 0 4px;                                                          /* Pequeno respiro acima — divider acima já dá separação */
}
.vp-header { margin-bottom: 14px; }                                              /* Header agrupa label + headline + sub */
.vp-label {                                                                      /* "VOLUME PRICING" — mesmo padrão visual da hero-badge */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(126, 34, 206, 0.1));  /* Gradient roxo translúcido — diferencia da UNDETECTED (ciano) */
    border: 1px solid var(--blz-border-purple);                                  /* Borda roxa sutil */
    border-radius: var(--blz-radius-sm);
    color: var(--blz-purple);                                                    /* Texto roxo */
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.vp-label svg { stroke: var(--blz-purple); }                                     /* Ícone check do mesmo tom do label */
.vp-headline {                                                                   /* Frase "profissional" principal — Rajdhani pra match com hero-title e price-display */
    font-family: var(--blz-font-heading);                                        /* Rajdhani */
    font-size: 18px;
    font-weight: 700;
    color: var(--blz-text-white);
    line-height: 1.25;
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}
.vp-sub {                                                                        /* Subline explicando o benefício — Inter regular, cor muted */
    font-size: 12px;
    color: var(--blz-text-muted);
    line-height: 1.5;
}

/* === Wrapper da tabela vinda do plugin === */
/* O plugin gera <div class="awdr-bulk-customizable-table"><table class="wdr_bulk_table_msg sar-table">...
   Aqui resetamos TUDO e reaplicamos o nosso estilo dark. Usa !important em alguns lugares porque o
   plugin enfileira CSS inline com prioridade alta. */
.vp-table-wrapper {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.05), rgba(34, 211, 238, 0.04));  /* Gradient ultra-sutil pra dar profundidade ao card interno */
    border: 1px solid var(--blz-border);
    border-radius: var(--blz-radius-md);
    padding: 4px;                                                                /* Padding pequeno — a tabela já tem padding interno nas células */
    overflow: hidden;                                                            /* Garante que border-radius corta as bordas da tabela */
}
.vp-table-wrapper .awdr-bulk-customizable-table {                                /* Container do plugin — neutraliza qualquer estilo herdado */
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}
.vp-table-wrapper table.wdr_bulk_table_msg,
.vp-table-wrapper table.sar-table {                                              /* Tabela em si */
    width: 100% !important;
    background: transparent !important;
    border-collapse: separate !important;                                        /* separate permite border-radius nas <tr> */
    border-spacing: 0 6px !important;                                            /* Gap vertical entre rows — efeito "cards empilhados" */
    margin: 0 !important;
    color: var(--blz-text) !important;
    font-family: var(--blz-font-main) !important;                                /* Força Inter (plugin usa font padrão do tema) */
}
.vp-table-wrapper table.wdr_bulk_table_msg th,
.vp-table-wrapper table.sar-table th,
.vp-table-wrapper .wdr_bulk_table_thead,
.vp-table-wrapper .wdr_bulk_table_thead .wdr_bulk_table_td {                     /* Cabeçalho da tabela */
    background: transparent !important;
    color: var(--blz-text-dim) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 10px 14px !important;
    border: none !important;
    text-align: left !important;
}

/* === Rows do tier (cada faixa de desconto) === */
.vp-table-wrapper tr.wdr_bulk_table_tr.bulk_table_row {                          /* Cada linha = 1 tier configurado no admin */
    background: rgba(15, 23, 42, 0.6) !important;                                /* Card escuro translúcido */
    border-radius: var(--blz-radius-md);
    transition: var(--blz-transition);                                           /* Smooth pro hover */
    position: relative;                                                          /* Necessário pro ::after do badge POPULAR */
}
.vp-table-wrapper tr.wdr_bulk_table_tr.bulk_table_row:hover {                    /* Hover de tier — destaque ciano */
    background: rgba(34, 211, 238, 0.08) !important;
    transform: translateX(2px);                                                  /* Micro-shift pra dar feedback tátil */
    box-shadow: -2px 0 0 0 var(--blz-cyan);                                      /* Barra ciano lateral no hover */
}
.vp-table-wrapper tr.wdr_bulk_table_tr.bulk_table_row td.wdr_bulk_table_td {     /* Células das rows */
    background: transparent !important;
    color: var(--blz-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 14px !important;
    border: none !important;
    border-top: 1px solid var(--blz-border) !important;                          /* Separador top — invisível na primeira row via :first-child abaixo */
    border-bottom: 1px solid var(--blz-border) !important;
    vertical-align: middle !important;
}
.vp-table-wrapper tr.wdr_bulk_table_tr.bulk_table_row td.wdr_bulk_table_td:first-child {
    border-left: 1px solid var(--blz-border) !important;                         /* Borda esquerda só na primeira célula da row */
    border-top-left-radius: var(--blz-radius-md);
    border-bottom-left-radius: var(--blz-radius-md);
}
.vp-table-wrapper tr.wdr_bulk_table_tr.bulk_table_row td.wdr_bulk_table_td:last-child {
    border-right: 1px solid var(--blz-border) !important;                        /* Borda direita só na última célula da row */
    border-top-right-radius: var(--blz-radius-md);
    border-bottom-right-radius: var(--blz-radius-md);
    text-align: right !important;                                                /* Última coluna geralmente é o valor — alinha à direita pra ficar "preço-style" */
}

/* === Coluna "Range" (ex: "3 - 4" ou "10 +") === */
.vp-table-wrapper td.wdr_bulk_range {
    font-family: var(--blz-font-heading) !important;                             /* Rajdhani — visual de preço/número */
    color: var(--blz-text-white) !important;
    font-size: 15px !important;
    letter-spacing: 0.5px;
}

/* === Coluna "Discount" (valor com desconto OU % de off) === */
.vp-table-wrapper .wdr_table_discounted_value,                                   /* Mostra "20%" ou "$5.00 flat" */
.vp-table-wrapper .wdr_table_discounted_price {                                  /* Mostra preço já com desconto aplicado */
    color: var(--blz-cyan) !important;                                           /* Ciano = preço (consistente com .price-display do card principal) */
    font-family: var(--blz-font-heading) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-shadow: 0 0 12px rgba(34, 211, 238, 0.35);                              /* Glow ciano sutil — mais discreto que o do hero (0.5) */
}

/* === Coluna "Title" (nome da rule — se admin habilitou) === */
.vp-table-wrapper td.wdr_bulk_title {
    color: var(--blz-text-muted) !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* === Badge "BEST VALUE" no penúltimo tier === */
/* Estratégia: nth-last-child(2) pega o penúltimo tier (não o maior — psicologia de ancoragem JetBrains/Notion).
   Se você só tiver 2 tiers configurados (ex: 1 + 5), ainda funciona porque pega o índice [1]. */
.vp-table-wrapper tr.wdr_bulk_table_tr.bulk_table_row:nth-last-child(2):not(:first-child) {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(34, 211, 238, 0.08)) !important;  /* Background gradient pra destacar */
    box-shadow:
        0 0 0 1px rgba(168, 85, 247, 0.4),                                       /* Outline roxo no destaque */
        0 4px 20px rgba(168, 85, 247, 0.15);                                     /* Glow externo */
}
.vp-table-wrapper tr.wdr_bulk_table_tr.bulk_table_row:nth-last-child(2):not(:first-child) td:first-child {
    border-left-color: transparent !important;                                   /* Tira a borda padrão e deixa o box-shadow ser o "highlight" */
}
.vp-table-wrapper tr.wdr_bulk_table_tr.bulk_table_row:nth-last-child(2):not(:first-child) td:last-child::after {
    content: 'BEST VALUE';                                                       /* Badge gerado via ::after — não precisa tocar PHP do plugin */
    position: absolute;
    top: -8px;
    right: 12px;
    background: var(--blz-gradient-purple);
    color: var(--blz-text-white);
    font-family: var(--blz-font-main);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 3px 10px;
    border-radius: var(--blz-radius-pill);
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
    text-shadow: none;                                                           /* Cancela o text-shadow herdado da coluna preço */
}

/* === Footnote abaixo da tabela === */
.vp-footnote {                                                                   /* Tip estilo "info bar" */
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(34, 211, 238, 0.05);                                        /* Background ciano ultra-sutil */
    border-left: 2px solid var(--blz-border-cyan);                               /* Borda ciano só à esquerda — estilo "callout" */
    border-radius: var(--blz-radius-sm);
    font-size: 11px;
    color: var(--blz-text-muted);
    line-height: 1.5;
}
.vp-footnote svg {
    color: var(--blz-cyan);
    flex-shrink: 0;                                                              /* Impede o ícone de encolher quando o texto quebra em linhas */
    margin-top: 2px;                                                             /* Alinha visualmente com a primeira linha do texto */
}

/* === Responsividade pra mobile === */
@media (max-width: 480px) {
    .vp-headline { font-size: 16px; }                                            /* Headline um pouco menor pra caber */
    .vp-table-wrapper tr.wdr_bulk_table_tr.bulk_table_row td.wdr_bulk_table_td { padding: 12px 10px !important; }  /* Padding interno menor */
    .vp-table-wrapper td.wdr_bulk_range { font-size: 14px !important; }
    .vp-table-wrapper .wdr_table_discounted_value,
    .vp-table-wrapper .wdr_table_discounted_price { font-size: 15px !important; }
    .vp-footnote { font-size: 10.5px; }
}

/* ===================================================================== */
/* === QUANTITY STEPPER (botões − e + customizados via JS) === */
/* ===================================================================== */
/* Substitui o input quadrado feio + setinhas nativas do browser por uma "pill" horizontal
   com botões − e + nos lados (estilo Amazon / Shopify / WordPress block). */

/* === Layout do conjunto "qty stepper + TOTAL" === */
/* Container do WC que envolve .quantity + .single_add_to_cart_button.
   Forçamos flex-wrap pra qty+total ficarem na 1ª linha e o botão Add to Cart embaixo full-width. */
.cart-form-wrapper .woocommerce-variation-add-to-cart,
.cart-form-wrapper .single_variation_wrap form .cart {                           /* Cobre produtos variáveis E simples */
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;                                              /* Centra verticalmente qty e total */
    gap: 10px !important;                                                        /* Gap consistente entre os itens */
    margin: 0 !important;
}

.cart-form-wrapper .vp-qty-wrapper {                                             /* Container .quantity (com classe extra adicionada pelo JS) */
    display: inline-flex !important;
    align-items: stretch;                                                        /* Botões e input com mesma altura */
    background: rgba(15, 23, 42, 0.8);                                           /* Fundo escuro consistente com o purchase-card */
    border: 1px solid var(--blz-border-cyan);                                    /* Borda ciano sutil */
    border-radius: var(--blz-radius-pill);                                       /* Pill (super arredondado) — mesmo estilo do botão "5,000+ Happy Customers" */
    overflow: hidden;                                                            /* Garante que filhos respeitem o border-radius */
    height: 38px;                                                                /* Reduzido de 44 → 38 pra ficar mais compacto e harmônico com o card */
    flex: 0 0 auto !important;                                                   /* Não cresce nem encolhe — mantém tamanho intrínseco */
    transition: var(--blz-transition);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);                                    /* Sombra mais discreta (era 4px) */
}
.cart-form-wrapper .vp-qty-wrapper:hover,
.cart-form-wrapper .vp-qty-wrapper:focus-within {                                /* Highlight quando o user passa mouse OU foca o input */
    border-color: var(--blz-border-cyan-strong);
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.3),
        0 0 0 2px rgba(34, 211, 238, 0.1);                                       /* Glow ciano ao redor (mais sutil agora) */
}
.cart-form-wrapper .vp-qty-btn {                                                 /* Botões − e + */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;                                                                 /* Reduzido de 42 → 32 (botão menor) */
    background: transparent;                                                     /* Herda o fundo escuro do wrapper */
    border: none;
    color: var(--blz-cyan);                                                      /* Ícones em ciano */
    cursor: pointer;
    padding: 0;
    margin: 0;
    transition: var(--blz-transition);
    -webkit-tap-highlight-color: transparent;                                    /* Remove highlight azul do iOS no tap */
}
.cart-form-wrapper .vp-qty-btn svg {                                             /* Ícones menores (12px) — antes eram 14 */
    width: 12px;
    height: 12px;
}
.cart-form-wrapper .vp-qty-btn:hover {
    background: rgba(34, 211, 238, 0.12);                                        /* Hover ciano translúcido */
    color: var(--blz-text-white);                                                /* Ícone branco no hover pra contraste */
}
.cart-form-wrapper .vp-qty-btn:active {
    background: rgba(34, 211, 238, 0.2);                                         /* Estado pressionado mais escuro */
    transform: scale(0.92);                                                      /* Micro-shrink pra feedback tátil */
}
.cart-form-wrapper .vp-qty-btn:focus-visible {                                   /* Outline ciano só pra navegação por teclado (não atrapalha mouse) */
    outline: 2px solid var(--blz-cyan);
    outline-offset: -2px;
}
.cart-form-wrapper .vp-qty-wrapper input.qty {                                   /* Input do meio — number sem spinners */
    width: 38px;                                                                 /* Reduzido de 56 → 38 (input mais estreito) */
    height: 100%;
    background: transparent !important;                                          /* Sobrescreve qualquer background herdado do WC */
    border: none !important;
    border-left: 1px solid var(--blz-border) !important;                         /* Separadores verticais entre input e botões */
    border-right: 1px solid var(--blz-border) !important;
    color: var(--blz-text-white) !important;
    font-family: var(--blz-font-mono);                                           /* Fonte mono — números alinhados */
    font-size: 13px !important;                                                  /* Reduzido de 15 → 13 (proporcional ao novo tamanho) */
    font-weight: 700;
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;                                                 /* Anula radius — o wrapper que arredonda */
    box-shadow: none !important;
    appearance: textfield;                                                       /* Esconde as setinhas nativas no Firefox */
    -moz-appearance: textfield;
}
.cart-form-wrapper .vp-qty-wrapper input.qty::-webkit-outer-spin-button,
.cart-form-wrapper .vp-qty-wrapper input.qty::-webkit-inner-spin-button {        /* Esconde as setinhas nativas no Chrome/Safari/Edge */
    -webkit-appearance: none;
    margin: 0;
}
.cart-form-wrapper .vp-qty-wrapper input.qty:focus {
    outline: none;                                                               /* O wrapper já mostra o focus-within — input não precisa de outline duplo */
}

/* === Estado DISABLED — produto variável sem variação selecionada === */
/* Aplicado pelo JS quando variation_id é 0/vazio. Visual esmaecido + cursor not-allowed
   pra deixar claro que o stepper só funciona depois de escolher uma versão. */
.cart-form-wrapper .vp-qty-wrapper.is-disabled {
    opacity: 0.4;                                                                /* Esmaece o stepper inteiro pra sinalizar inativo */
    cursor: not-allowed;
    border-color: var(--blz-border) !important;                                  /* Borda neutra (sem highlight ciano) */
    box-shadow: none !important;                                                 /* Remove glow/shadow do estado ativo */
    pointer-events: none;                                                        /* Bloqueia TODOS os cliques no wrapper (defesa extra além do disabled nos botões) */
}
.cart-form-wrapper .vp-qty-wrapper.is-disabled:hover,
.cart-form-wrapper .vp-qty-wrapper.is-disabled:focus-within {                    /* Cancela hover/focus highlight quando disabled */
    border-color: var(--blz-border) !important;
    box-shadow: none !important;
}
.cart-form-wrapper .vp-qty-btn[disabled],
.cart-form-wrapper .vp-qty-btn:disabled {                                        /* Botões individuais desabilitados */
    cursor: not-allowed;
    color: var(--blz-text-faded);                                                /* Ícone mais apagado */
}
.cart-form-wrapper .vp-qty-btn[disabled]:hover,
.cart-form-wrapper .vp-qty-btn:disabled:hover {                                  /* Sem efeito hover quando disabled */
    background: transparent;
    color: var(--blz-text-faded);
}
.cart-form-wrapper .vp-qty-wrapper input.qty:disabled {
    cursor: not-allowed;
    color: var(--blz-text-faded) !important;
}

/* ===================================================================== */
/* === VOLUME PRICING — LIVE TOTAL (injetado por JS após .quantity) === */
/* ===================================================================== */
/* Mostra dinâmicamente: Unit price (com desconto do tier ativo) × Qty = Total + economia.
   Aparece colado abaixo do input de quantity, dentro do .purchase-card. */

.vp-live-total {
    flex: 1 1 0% !important;                                                     /* Toma o restante da linha ao lado do .vp-qty-wrapper (flex sibling) */
    min-width: 160px;                                                            /* Quebra pra próxima linha em telas muito estreitas em vez de espremer */
    display: none;                                                               /* Escondido até o JS preencher conteúdo válido */
}
.vp-live-total.is-active {
    display: block;                                                              /* JS adiciona .is-active quando tem unit price válido */
    animation: vpLtFadeIn 0.25s ease;                                            /* Fade-in suave ao aparecer (não pisca) */
}
@keyframes vpLtFadeIn {                                                          /* Animação simples — entrada do bloco */
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.vp-lt-row {                                                                     /* Cada linha (main = total na pill, sub = unit + economia) */
    display: flex;
    justify-content: space-between;
    align-items: center;                                                         /* center em vez de baseline pra alinhar com a altura da pill do qty */
    gap: 10px;
    flex-wrap: wrap;
}
.vp-lt-main {                                                                    /* Linha principal: label "Total" + valor — alinhada com o stepper qty */
    height: 38px;                                                                /* Mesma altura do .vp-qty-wrapper (38px) — harmonia visual perfeita */
    padding: 0 14px;                                                             /* Padding lateral apenas — altura controlada pelo height */
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(168, 85, 247, 0.05));  /* Gradient ciano→roxo sutil — combina com o tema */
    border: 1px solid var(--blz-border-cyan);
    border-radius: var(--blz-radius-pill);                                       /* Pill — combina com o vp-qty-wrapper */
    margin-bottom: 6px;                                                          /* Reduzido (era 8) */
    flex-wrap: nowrap;                                                           /* Label e valor NÃO quebram dentro da pill */
}
.vp-lt-label {                                                                   /* "Total" — label discreto */
    font-size: 10px;                                                             /* Reduzido (era 11) — proporcional à pill menor */
    font-weight: 700;
    color: var(--blz-text-dim);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.vp-lt-total {                                                                   /* Valor total — em ciano com glow */
    font-family: var(--blz-font-heading);                                        /* Rajdhani */
    font-size: 18px;                                                             /* Reduzido (era 24) — cabe na pill de 38px sem espremer */
    font-weight: 700;
    color: var(--blz-cyan);
    text-shadow: 0 0 14px rgba(34, 211, 238, 0.4);                               /* Glow mais sutil */
    line-height: 1;
    white-space: nowrap;                                                         /* Garante que o preço não quebra em 2 linhas */
}
.vp-lt-sub {                                                                     /* Linha secundária: unit price + economia (ou hint) */
    padding: 0 4px;
    font-size: 12px;
    justify-content: flex-end;                                                   /* Alinha à direita (debaixo da pill TOTAL) — mantém eixo vertical limpo */
}
.vp-lt-unit {                                                                    /* "US$ 13.53 × 4 keys" ou "<s>US$ 13.53</s> US$ 11.50 × 4 keys" */
    color: var(--blz-text-muted);
    font-weight: 500;
}
.vp-lt-unit s {                                                                  /* Preço cheio riscado (quando tem tier ativo) */
    color: var(--blz-text-faded);
    margin-right: 4px;
}
.vp-lt-savings {                                                                 /* "You save US$ 4.06 (15% OFF)" — verde pra reforçar economia (estilo Amazon/Adobe) */
    color: var(--blz-success);
    font-weight: 700;
    font-size: 11px;
}
.vp-lt-hint {                                                                    /* "Add 1 more to unlock 8% OFF" — incentivo de upsell quando qty < min do 1º tier */
    color: var(--blz-purple);
    font-weight: 600;
    font-size: 11px;
    font-style: italic;
}

/* === Highlight da row do tier ativo no bulk table === */
/* Quando o usuário muda qty, a linha do tier que casa ganha esta classe via JS. */
.vp-table-wrapper tr.wdr_bulk_table_tr.bulk_table_row.vp-tier-active {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(6, 182, 212, 0.08)) !important;  /* Background ciano destacado */
    box-shadow:
        0 0 0 1px var(--blz-cyan),                                               /* Outline ciano forte */
        0 4px 24px rgba(34, 211, 238, 0.25);                                     /* Glow externo ciano */
    transform: translateX(0) !important;                                         /* Anula o translateX do :hover pra não competir */
}
.vp-table-wrapper tr.wdr_bulk_table_tr.bulk_table_row.vp-tier-active td:first-child {
    border-left-color: transparent !important;                                   /* Box-shadow já faz o destaque — anula borda */
}
.vp-table-wrapper tr.wdr_bulk_table_tr.bulk_table_row.vp-tier-active td:last-child::before {
    content: 'ACTIVE';                                                           /* Badge "ACTIVE" indicando o tier escolhido pela qty atual */
    position: absolute;
    top: -8px;
    right: 12px;
    background: var(--blz-gradient-cyan);
    color: var(--blz-bg-deep);                                                   /* Texto escuro sobre ciano — alto contraste */
    font-family: var(--blz-font-main);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 3px 10px;
    border-radius: var(--blz-radius-pill);
    box-shadow: 0 4px 12px rgba(34, 211, 238, 0.4);
    text-shadow: none;
}
/* Conflito BEST VALUE + ACTIVE: se a row ativa for a mesma do BEST VALUE,
   o ACTIVE prevalece (mais útil pro usuário no momento). O BEST VALUE só aparece
   no penúltimo via ::after (last-child) e o ACTIVE via ::before — não se sobrepõem visualmente,
   mas se ficarem no mesmo canto fica feio. Esconde o BEST VALUE quando esse tier também é ACTIVE: */
.vp-table-wrapper tr.wdr_bulk_table_tr.bulk_table_row.vp-tier-active:nth-last-child(2):not(:first-child) td:last-child::after {
    display: none;
}

/* === Responsividade mobile do live total === */
@media (max-width: 480px) {
    .vp-lt-total { font-size: 20px; }
    .vp-lt-sub { flex-direction: column; gap: 4px; align-items: flex-start; }    /* Stack vertical no mobile pra não cortar texto */
}