/* ==========================================================================
   1) VARIÁVEIS GLOBAIS
   ========================================================================== */
:root{
  --primary-color:#2AC8D3;
  --secondary-color:#8882EE;
  --accent-color:#8B5BFA;
  --text-color:#000;
  --white:#FFF;
  --chat-bg:url('https://digitalyze.com.br/wp-content/uploads/2025/01/about-bg.webp');
  --input-bg:rgba(255,255,255,0.15);
  --button-bg:var(--primary-color);
  --button-hover-bg:var(--accent-color);
  --border-color:var(--primary-color);
  --border-radius:16px;
  --shadow-effect:0 10px 30px rgba(42,200,211,.5),0 0 15px rgba(136,130,238,.4);
}

/* ==========================================================================
   2) LAYOUT GERAL & TIPOGRAFIA
   ========================================================================== */
.section-form-chat {
  padding: 80px 20px;
  background: transparent;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* Título e subtítulo */
.section-form-chat .heading2 {
  font-size: 64px;
  font-weight: 600;
  line-height: 72px;
  text-transform: capitalize;
  text-align: center;
  color: var(--text-color);
  margin-bottom: 24px;
}
.section-form-chat .heading2 .mt_gradient{
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-form-chat .body2 {
  font-size: 20px;
  line-height: 30px;
  color: var(--text-color);
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px;
}

/* ==========================================================================
   3) CONTAINER DO CHAT / CONTEÚDO
   ========================================================================== */
.form-chat-block { width: 100%; }

.form-content {
  width: 100%;
  max-width: 900px;
  max-height: none;
  margin: 0 auto;
  box-shadow: var(--shadow-effect);
  background: var(--white);
  border-radius: var(--border-radius);
  border: 3px solid var(--border-color);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.form-content .content {
  background-image: var(--chat-bg);
  background-size: cover;
  background-position: center;
  padding: 30px;
  overflow-y: visible;
  height: auto;
  max-height: none;
}

/* Grid utilitário 2 colunas */
.gpv-two-cols{display:flex;gap:32px;flex-wrap:wrap}
.gpv-two-cols>div{flex:1 1 240px}

/* ==========================================================================
   4) COMPONENTES GENÉRICOS
   ========================================================================== */
/* Etapas do chat */
.step {
  background: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

/* Pergunta do bot */
.bot-question {
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-color);
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}

/* Container de opções (botões) */
.options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* Botões padrão interativos */
.option-btn {
  background: var(--primary-color);
  color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.3s;
  font-weight: 600;
  font-size: 14px;
  min-width: 180px;
  text-align: center;
}
.option-btn:hover { background: var(--button-hover-bg); }

/* Inputs / Textareas */
input[type="text"],
textarea {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  font-size: 14px;
  outline: none;
  margin-bottom: 12px;
  resize: vertical;
  background: #fff;
}

/* Campo inválido (WhatsApp) */
.wrapper-chaveiro input.is-invalid{
  border-color: #ff7a7a !important;
  box-shadow: 0 0 0 3px rgba(255,122,122,.25) !important;
}

/* ==========================================================================
   5) LISTAS / ITENS INTERATIVOS
   ========================================================================== */
/* Lista — Pedidos encontrados (genérico) */
#lista-pedidos-encontrados li {
  background: var(--white);
  border: 1px solid var(--border-color);
  padding: 12px;
  border-radius: 8px;
  margin: 6px;
  cursor: pointer;
  transition: all 0.3s;
  min-width: 240px;
  text-align: left;
  list-style: none;
}
#lista-pedidos-encontrados li:hover {
  background: var(--primary-color);
  color: #fff;
}

/* Lista — Consulta de pedidos (página específica) */
#consulta-lista-pedidos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}
#consulta-lista-pedidos li {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  min-width: 180px;
  text-align: center;
  list-style: none;
}
#consulta-lista-pedidos li:hover {
  background: var(--primary-color);
  color: var(--white);
}

/* ==========================================================================
   6) SCROLLBAR INTERNA DO CHAT
   ========================================================================== */
.content::-webkit-scrollbar { width: 6px; }
.content::-webkit-scrollbar-track { background: #f1f1f1; }
.content::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 3px;
}

/* ==========================================================================
   7) RESPONSIVO — BASE
   ========================================================================== */
@media (max-width: 768px) {
  .section-form-chat .heading2 {
    font-size: 36px;
    line-height: 44px;
  }
  .bot-question { font-size: 14px; }
  .option-btn { font-size: 12px; padding: 10px 14px; min-width: 140px; }
  input[type="text"], textarea { font-size: 14px; }
  .form-content { max-height: 90vh; }
}

/* ==========================================================================
   8) GPV — INTERACTIVE WRAPPER (alias da UI do chat)
   ========================================================================== */
/* Etapas GPV */
.gpv-step{
  background: rgba(255,255,255,0.8);
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  transition: all .3s ease;
}

/* Utilitários */
.gpv-hidden{display:none!important}

/* Status / feedback */
#gpv-status{
  margin-top:16px;
  font-weight:600;
  font-size:14px;
  text-align:center;
}
#gpv-status.info{color:var(--text-color)}
#gpv-status.success{color:var(--primary-color)}
#gpv-status.error{color:#e74c3c}

/* Mensagem de espera (“Gerando sua imagem…”) */
.gpv-waiting-feedback{
  text-align:center;
  font-size:18px;
  font-weight:600;
  color:var(--text-color);
}

/* Botões primários (começar / add to cart) */
#gpv-start-btn,
#gpv-add-to-cart-btn{
  background:var(--primary-color);
  color:#fff;
  border:1px solid var(--border-color);
  border-radius:8px;
  padding:12px 20px;
  margin-top: 24px;
  cursor:pointer;
  font-weight:600;
  font-size:14px;
  min-width:200px;
  transition:background .3s;
  display:inline-block;
  text-align:center;
}
#gpv-start-btn:hover,
#gpv-add-to-cart-btn:hover{ background:var(--button-hover-bg); }

/* destaque do botão de variação selecionado */
.gpv-var-btn.is-active{
  outline: 2px solid var(--accent-color);
  box-shadow: 0 0 0 3px rgba(139,91,250,.18);
}

/* Campo de upload nativo (input file) */
input[type=\"file\"]#gpv-user-image{
  display:block;
  width:100%;
  padding:10px;
  border:1px dashed var(--border-color);
  border-radius:8px;
  background:#fff;
  cursor:pointer;
}

/* Responsivo extra (botões / feedback) */
@media(max-width:768px){
  #gpv-start-btn,
  #gpv-add-to-cart-btn{
    min-width:160px;
    font-size:12px;
    padding:10px 16px;
  }
  .gpv-waiting-feedback{font-size:16px}
}

/* ==========================================================================
   9) GPV — UPLOAD ZONE (zona arrastar/soltar)
   ========================================================================== */
/* 1) Esconde o input nativo */
.gpv-upload-input { display: none; }

/* 2) Container estilizado */
.gpv-upload-zone {
  border: 2px dashed var(--border-color);
  border-radius: var(--border-radius);
  background: rgba(255,255,255,0.8);
  padding: 40px 20px;
  text-align: center;
  transition: border-color 0.3s, background 0.3s;
  cursor: pointer;
  max-width: 100%;
}

/* 3) Label como zona clicável / arraste */
.gpv-upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--text-color);
  font-size: 16px;
  line-height: 1.4;
}

/* 4) Ícone */
.gpv-upload-label svg { stroke: var(--border-color); transition: stroke 0.3s; }

/* 5) Botão interno */
.gpv-upload-button {
  display: inline-block;
  padding: 8px 16px;
  background: var(--button-bg);
  color: var(--white);
  border-radius: 8px;
  font-weight: 600;
  transition: background 0.3s;
}

/* 6) Hover / foco para convite ao drop */
.gpv-upload-zone:hover,
.gpv-upload-zone.dragover {
  background: var(--input-bg);
  border-color: var(--accent-color);
}
.gpv-upload-zone.dragover .gpv-upload-label svg { stroke: var(--accent-color); }
.gpv-upload-zone.dragover .gpv-upload-button { background: var(--accent-color); }

/* 7) Responsivo */
@media (max-width: 600px) {
  .gpv-upload-zone { padding: 32px 16px; }
  .gpv-upload-label p { font-size: 14px; }
  .gpv-upload-label svg { width: 40px; height: 40px; }
}

/* ==========================================================================
   10) GPV — MOCKUP AO VIVO / CANVAS / RESULTADO
   ========================================================================== */
.gpv-mockup{
  position:relative; width:100%; max-width: 100%; margin:0 auto; aspect-ratio:1/1;
}
.gpv-mockup .mock-layer{position:absolute; inset:0; background-repeat:no-repeat; background-size:cover; background-position:center;}
/* (Opcional) base/shading do chaveiro, se tiver mock fotográfico */
.gpv-mockup .base{ background-image:url('/wp-content/uploads/mockups/chaveiro_base.png'); }
.gpv-mockup .shading{ background-image:url('/wp-content/uploads/mockups/chaveiro_shading.png'); mix-blend-mode:multiply; opacity:.85; pointer-events:none; }

#gpv-mock-canvas{ width:100%; height:auto; display:block; }

/* Mesmo footprint do mock — imagem final */
#gpv-result-preview{
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0 auto;
}

/* ==========================================================================
   11) GPV — TÍTULO DINÂMICO E AÇÕES FORA DO WRAPPER
   ========================================================================== */
.is-hero-stage #header-chat-section .chat-header { display: none; } /* esconde título original */
#gpv-hero-header { text-align: center; }
#gpv-hero-title { font-size: clamp(28px, 4vw, 40px); line-height: 1.2; }
#gpv-hero-subtitle { font-size: clamp(14px, 2vw, 18px); opacity: .9; }

/* Botão fora do wrapper: espaçamento consistente */
#gpv-actions-outside #gpv-add-to-cart-btn { margin-top: 8px; }

/* ==========================================================================
   12) GPV — “PÁGINA DE PRODUTO” NO STEP 2
   ========================================================================== */
.gpv-product-summary{
  margin-top: 20px;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
}
.gpv-price { margin-top: 12px; margin-bottom: 8px; }
.gpv-price .price{ 
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.2;
  font-weight: 700;
}
.gpv-price .price del{ opacity:.7; font-weight: 400; margin-right: 8px; }
.gpv-price .price ins{ text-decoration: none; color: var(--accent-color); }

/* Tabs (Woo/Flatsome markup) */
.gpv-tabs{ margin-top: 16px; }
.gpv-tabs .woocommerce-tabs .tabs{ 
  display:flex; gap:8px; flex-wrap:wrap; padding:0; margin:0 0 8px; list-style:none; 
}
.gpv-tabs .woocommerce-tabs .tabs li{
  border:1px solid var(--border-color);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.gpv-tabs .woocommerce-tabs .tabs li.active{ background: var(--primary-color); color:#fff; }
.gpv-tabs .woocommerce-tabs .panel{ display:none; padding-top: 8px; }
.gpv-tabs .woocommerce-tabs .panel.active{ display:block; }

/* Quando dentro do Step 2 */
/* aplica inline-flex somente fora do Step 3 */
.wrapper-chaveiro .gpv-step:not([data-step="3"]) .gpv-upsell-pick,
.wrapper-puzzle   .gpv-step:not([data-step="3"]) .gpv-upsell-pick{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  cursor:pointer;
  user-select:none;
  transition:border-color .2s ease, box-shadow .2s ease, transform .1s ease;
}


/* (opcional) respiro */
#gpv-gallery-block { margin-top: 12px; }

#gpv-gallery.woocommerce-product-gallery { opacity: 1 !important; }
#gpv-gallery .woocommerce-product-gallery__wrapper { opacity: 1 !important; }
#gpv-gallery img { opacity: 1 !important; visibility: visible !important; }

/* Garante layout consistente */
#gpv-gallery .woocommerce-product-gallery__image { width: 100%; }

/* Mostra setas mesmo se o tema tentar ocultar */
#gpv-gallery .flickity-prev-next-button { display: block !important; opacity: 1; }

/* === FLICKITY: 1 slide por vez, sem cortes laterais (novo) === */
#gpv-gallery .woocommerce-product-gallery__wrapper { overflow: hidden !important; }
#gpv-gallery .woocommerce-product-gallery__image { 
  width: 100% !important; 
  margin: 0 !important;
}
#gpv-gallery .woocommerce-product-gallery__image a,
#gpv-gallery .woocommerce-product-gallery__image img{
  display:block; width:100% !important; height:auto !important; object-fit: contain;
}

/* Em alguns temas, o Flatsome define widths nas .slide – neutraliza: */
#gpv-gallery .flickity-slider > .woocommerce-product-gallery__image { width: 100% !important; }

/* === GPV gallery: célula ocupa 100% === */
#gpv-gallery .product-gallery-slider,
#gpv-gallery .woocommerce-product-gallery__wrapper{
  width: 100% !important;
}

#gpv-gallery .product-gallery-slider .slide{
  width: 100% !important;      /* chave para não sobrar espaço lateral */
  margin: 0 !important;
}

#gpv-gallery .product-gallery-slider .slide a{
  display:block;
}

#gpv-gallery .product-gallery-slider .slide img{
  display:block;
  width: 100% !important;       /* imagem acompanha a célula */
  height: auto !important;
  max-width: none !important;   /* ignora limites herdados do tema */
}

#gpv-gallery .product-gallery-slider .flickity-viewport{
  overflow: hidden;             /* garante nada “vaze” nas bordas */
}

#gpv-result-preview{display:block;width:100%;height:auto;object-fit:contain}
#gpv-gallery-main .slide{width:100% !important}
#gpv-gallery-main .slide a,
#gpv-gallery-main .slide img{display:block;width:100%}

/* ==========================================================================
   13) GPV — ESTADO LEAD-LOCKED (expande upload)
   ========================================================================== */
#gpv-wrapper.lead-locked .gpv-two-cols > :first-child { display: none !important; }
#gpv-wrapper.lead-locked .gpv-two-cols > :last-child {
  flex: 1 1 100% !important;
  max-width: 100% !important;
}
@media (max-width: 768px){
  #gpv-wrapper.lead-locked .gpv-two-cols > :last-child { flex-basis: 100% !important; }
}

/* ==========================================================================
   14) GPV — UPSELL (geral + inline)
   ========================================================================== */
.gpv-upsell { margin-top: 16px; }
.gpv-upsell-title { text-align:center; margin: 8px 0 12px; font-weight:700; }
/* === Upsell: título legível no fundo cósmico (novo) === */
.wrapper-chaveiro .gpv-upsell-title{
  color: rgba(235,240,255,.98) !important;
  text-shadow: 0 0 10px rgba(10,14,24,.45), 0 2px 30px rgba(0,0,0,.55);
  letter-spacing: .01em;
}

/* Grid cards */
.gpv-upsell-grid {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:12px;
}
.gpv-upsell-card{
  display:flex; flex-direction:column; gap:8px;
  border:1px solid var(--border-color); border-radius:12px; padding:12px;
  background: rgba(255,255,255,.9);
}
.gpv-upsell-card .thumb{
  width:100%; aspect-ratio:1/1; border-radius:8px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; background:#f7f7f7;
}
.gpv-upsell-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.gpv-upsell-card .thumb-skel{ font-size:13px; opacity:.7; }
.gpv-upsell-card .meta .title{ font-weight:700; font-size:14px; }
.gpv-upsell-card .meta .price{ font-size:14px; }
.gpv-upsell-card .pick{ display:flex; align-items:center; gap:8px; }
.gpv-upsell-card input[type="checkbox"]:disabled + span{ opacity:.6; }

.gpv-upsell-inline .thumb{
  width:100%; aspect-ratio:1/1; border-radius:12px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; background:#f7f7f7;
}
.gpv-upsell-inline .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
/* só faz linha quando NÃO é Step 3 */
.wrapper-chaveiro .gpv-step:not([data-step="3"]) #gpv-upsell-offer .gpv-upsell-inline .picks,
.wrapper-puzzle   .gpv-step:not([data-step="3"]) #gpv-upsell-offer .gpv-upsell-inline .picks{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:center;
}
.gpv-upsell-pick{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border:1px solid var(--border-color); border-radius:10px; background:#fff;
}
.gpv-upsell-pick .label{ font-weight:600; }
.gpv-upsell-pick .price{ margin-left:auto; font-weight:700; }
@media (max-width: 680px){
  .gpv-upsell-inline{ grid-template-columns: 1fr; }
}

/* === Upsell: picks em vidro escuro + texto claro (novo) === */
.wrapper-chaveiro .gpv-upsell-inline .picks{ gap: 10px; }

.wrapper-chaveiro .gpv-upsell-pick{
  background: rgba(12,16,28,.55) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(240,244,255,.96) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.wrapper-chaveiro .gpv-upsell-pick .label{ color: rgba(240,244,255,.96); }
.wrapper-chaveiro .gpv-upsell-pick .price{ color: rgba(175,235,255,.95); }

/* Checkbox harmonizado */
.wrapper-chaveiro .gpv-upsell-pick input[type="checkbox"]{
  accent-color: var(--primary-color);
  width: 18px; height: 18px;
}

/* Thumb do upsell também com vidro sutil */
.wrapper-chaveiro .gpv-upsell-inline .thumb{
  background: rgba(12,16,28,.35) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.wrapper-chaveiro .gpv-upsell-inline .thumb .thumb-skel{ color: rgba(235,240,255,.8); }

/* cards de upsell coesos com o cosmos */
.wrapper-chaveiro .gpv-upsell-card{
  background: rgba(12,16,28,.55) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(240,244,255,.96) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.wrapper-chaveiro .gpv-upsell-card .meta .title{ color: rgba(240,244,255,.98); }
.wrapper-chaveiro .gpv-upsell-card .meta .price{ color: rgba(175,235,255,.95); }

.wrapper-chaveiro select{
  width: 100%;
  background: rgba(12,16,28,.60);
  color: rgba(245,248,255,.98);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 12px 14px;
}
.wrapper-chaveiro select:focus{
  outline: none;
  border-color: rgba(146,224,255,.85);
  box-shadow: 0 0 0 3px rgba(146,224,255,.20), 0 0 0 6px rgba(139,91,250,.14);
}

/* ==========================================================================
   15) GPV — STEP 3 (layout base)
   ========================================================================== */
.gpv-step[data-step="3"] { display: grid; gap: 16px; }

.gpv-step[data-step="3"] .gpv-upsell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.gpv-step[data-step="3"] .gpv-upsell-title {
  margin: 0;
  line-height: 1.2;
  font-size: clamp(18px, 2.6vw, 24px);
  font-weight: 700;
}
.gpv-step[data-step="3"] .gpv-upsell-inline {
  width: 100%;
  display: grid;
  grid-template-rows: auto auto; /* imagem em cima, picks embaixo */
  gap: 16px;
}

/* Área da imagem do upsell — janela responsiva (altura manda) */
.gpv-step[data-step="3"] .gpv-upsell .thumb {
  height: clamp(260px, 45vh, 520px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  background: var(--gpv-surface, #f6f7f9);
}
.gpv-step[data-step="3"] .gpv-upsell .thumb img {
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
}
.gpv-step[data-step="3"] .gpv-upsell .thumb .thumb-skel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  opacity: .7;
}

/* Picks lado a lado (50/50) */
.gpv-step[data-step="3"] .gpv-upsell .picks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.gpv-step[data-step="3"] .gpv-upsell-pick {
  display: grid;
  grid-template-columns: auto 1fr; /* checkbox + textos */
  grid-auto-rows: min-content;
  gap: 6px 10px;
  align-items: start;
  padding: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  text-align: left;
}
.gpv-step[data-step="3"] .gpv-upsell-pick input[type="checkbox"] { margin-top: 2px; }
.gpv-step[data-step="3"] .gpv-upsell-pick .label { font-weight: 600; }
.gpv-step[data-step="3"] .gpv-upsell-pick .price {
  grid-column: 2;
  font-size: .95em;
  opacity: .9;
}

/* Botões no final */
.gpv-step[data-step="3"] .options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}
.gpv-step[data-step="3"] .option-btn { flex: 1 1 220px; }

/* Mobile: empilhar picks */
@media (max-width: 640px) {
  .gpv-step[data-step="3"] .gpv-upsell .picks { grid-template-columns: 1fr; }
}

/* ==========================================================================
   16) GPV — OVERRIDES & FIXES (Step 3 Upsell)
   --------------------------------------------------------------------------
   ATENÇÃO: Os blocos abaixo repetem regras de correção intencionalmente.
   Mantidos sem remoção para preservar possíveis prioridades/ordem original.
   ========================================================================== */

/* ===== FIX A – Step 3 Upsell layout (imagem em cima, picks embaixo) ===== */

/* reduz o espaço entre a confirmação e o upsell */
.gpv-step[data-step="3"] .gpv-waiting-feedback { margin: 0 0 8px; }
.gpv-step[data-step="3"] #gpv-status { margin: 6px 0 0; }

/* força o wrapper do inline a ter 1 coluna no Step 3 (sobrepõe a regra antiga) */
.gpv-step[data-step="3"] .gpv-upsell-inline{
  display: grid;
  grid-template-columns: 1fr !important;  /* <- chave para sair do 220px 1fr */
  grid-auto-flow: row;
  gap: 16px;
  min-width: 0; /* evita overflow no mobile */
}

/* imagem grande, centralizada, respeitando proporção (altura manda) */
.gpv-step[data-step="3"] .gpv-upsell .thumb{
  height: clamp(300px, 48vh, 560px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; border-radius:12px;
  background: var(--gpv-surface, #f6f7f9);
  min-width: 0;
}
.gpv-step[data-step="3"] .gpv-upsell .thumb img{
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
}

/* picks em 2 colunas (50/50) no desktop */
.gpv-step[data-step="3"] .gpv-upsell .picks{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  min-width: 0; /* garante que não “estoure” para fora no mobile */
}

/* cada pick ocupa 100% do seu grid, sem estourar o wrapper */
.gpv-step[data-step="3"] .gpv-upsell-pick{
  box-sizing: border-box;
  min-width: 0;
  display:grid;
  grid-template-columns: auto 1fr;
  grid-auto-rows: min-content;
  gap:6px 10px;
  align-items:start;
  padding:12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  text-align:left;
}
.gpv-step[data-step="3"] .gpv-upsell-pick .label{ font-weight:600; }
.gpv-step[data-step="3"] .gpv-upsell-pick .price{
  grid-column:2; font-size:.95em; opacity:.9; word-break: break-word;
}

/* CTAs logo abaixo dos picks, centralizados */
.gpv-step[data-step="3"] .options{
  margin-top: 8px;
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
}
.gpv-step[data-step="3"] .option-btn{ flex:1 1 220px; }

/* ===== Mobile tweaks ===== */
@media (max-width: 680px){
  /* picks empilhados (um por linha) */
  .gpv-step[data-step="3"] .gpv-upsell .picks{
    grid-template-columns: 1fr;
  }
  /* mais presença para a imagem no mobile */
  .gpv-step[data-step="3"] .gpv-upsell .thumb{
    height: min(72vh, 600px);
  }
}

/* ===== FIX B – Step 3 Upsell layout (duplicado propositalmente) ===== */

/* menos espaço entre a confirmação e o upsell */
.gpv-step[data-step="3"] .gpv-waiting-feedback { margin: 0 0 8px; }
.gpv-step[data-step="3"] #gpv-status { margin: 6px 0 0; }

/* força 1 coluna no wrapper inline (imagem em cima; picks embaixo) */
.gpv-step[data-step="3"] .gpv-upsell-inline{
  display: grid;
  grid-template-columns: 1fr !important; /* sobrepõe o 220px 1fr antigo */
  grid-auto-flow: row;
  gap: 16px;
  min-width: 0;              /* evita “estouro” lateral no mobile */
}

/* imagem grande e visível; a altura manda, largura proporcional */
.gpv-step[data-step="3"] .gpv-upsell .thumb{
  height: clamp(300px, 48vh, 560px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; border-radius:12px;
  background: var(--gpv-surface, #f6f7f9);
  min-width: 0;
}
.gpv-step[data-step="3"] .gpv-upsell .thumb img{
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
}

/* picks 50/50 no desktop */
.gpv-step[data-step="3"] .gpv-upsell .picks{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  min-width: 0;              /* garante que não “escape” do wrapper */
}

/* cada pick ocupa bem o grid e quebra texto de preço se precisar */
.gpv-step[data-step="3"] .gpv-upsell-pick{
  box-sizing: border-box;
  min-width: 0;
  display:grid;
  grid-template-columns: auto 1fr;
  grid-auto-rows: min-content;
  gap:6px 10px;
  align-items:start;
  padding:12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  text-align:left;
}
.gpv-step[data-step="3"] .gpv-upsell-pick .label{ font-weight:600; }
.gpv-step[data-step="3"] .gpv-upsell-pick .price{
  grid-column:2; font-size:.95em; opacity:.9; word-break: break-word;
}

/* CTAs logo abaixo dos picks, centralizados */
.gpv-step[data-step="3"] .options{
  margin-top: 8px;
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
}
.gpv-step[data-step="3"] .option-btn{ flex:1 1 220px; }

/* ---- Mobile tweaks: imagem ainda maior e picks empilhados ---- */
@media (max-width: 680px){
  .gpv-step[data-step="3"] .gpv-upsell .picks{
    grid-template-columns: 1fr;    /* um pick por linha */
  }
  .gpv-step[data-step="3"] .gpv-upsell .thumb{
    height: min(72vh, 640px);      /* dá mais presença à imagem */
  }
}

/* =========================================================
 * MOBILE BOOST — Wrapper full-bleed + imagem dominante
 * =======================================================*/
@media (max-width:680px){
  .wrapper-chaveiro .section-form-chat,
  .wrapper-puzzle   .section-form-chat{ padding: 8px; }
  .wrapper-chaveiro .form-content,
  .wrapper-puzzle   .form-content{ max-width:100%; width:100%; margin:0; border-width:2px; max-height:none; overflow:visible; }
  .wrapper-chaveiro .form-content .content,
  .wrapper-puzzle   .form-content .content{ padding:10px; }
}

  /* Respiro padrão das etapas mais curto no mobile */
  .gpv-step {
    padding: 10px;
    margin-bottom: 12px;
  }
}

/* =========================================================
 * Preview (Step 2) mais protagonista em is-hero-stage
 * =======================================================*/
@media (max-width: 680px) {

  /* Margem do bloco da galeria mais contida */
  .is-hero-stage #gpv-gallery-block { 
    margin-top: 6px; /* era 12px */ 
  }

  /* Sem margens “sobrando” ao redor do slide */
  .is-hero-stage #gpv-gallery .woocommerce-product-gallery__image {
    margin: 0 !important;
  }

  /* Summary compacto para a imagem dominar o viewport */
  .is-hero-stage .gpv-product-summary {
    padding: 12px;   /* era 16px */
    margin-top: 8px; /* era 20px */
  }
}

/* =========================================================
 * Upsell (Step 3) — altura flexível + imagem vertical grande
 * =======================================================*/
@media (max-width: 680px) {
  /* Gaps menores para a arte ganhar espaço */
  .gpv-step[data-step="3"] .gpv-upsell { gap: 10px; }

  /* Imagem do adesivo com presença (altura manda) */
  .gpv-step[data-step="3"] .gpv-upsell .thumb {
    height: min(82vh, 720px); /* +presença (antes 72vh/48vh/clamp) */
  }

  /* Lista de picks mais enxuta */
  .gpv-step[data-step="3"] .gpv-upsell .picks { gap: 10px; }
}

/* =========================================================
 * (Fail-safe) Remover quaisquer caps/cortes residuais no mobile
 * =======================================================*/
@media (max-width: 680px) {
  .form-content,
  .form-content .content {
    overflow: visible !important;
    max-height: none !important;
  }
}

/* =========================================================
   (17) WRAPPER CHAVEIRO — TEMA COSMOS (escopo local)
   Mantém compatibilidade com o fluxo/IDs/classes existentes
   ========================================================= */

/* ---------- 1) Variáveis base (recolore o chatbox para o espaço) ---------- */
.wrapper-chaveiro{
  --text-color: rgba(235,240,255,.96);
  --white: rgba(255,255,255,.96);
  --border-color: rgba(42,200,211,.55);
  --button-bg: var(--primary-color);
  --button-hover-bg: var(--accent-color);
  --input-bg: rgba(255,255,255,0.08);
  --chat-bg: none; /* desliga imagem de fundo interna do wrapper */
}

/* ---------- 2) Layout geral / respiro ---------- */
.wrapper-chaveiro .section-form-chat{
  min-height: 100svh;
  padding-block: clamp(16px, 6vh, 48px) !important;
}

/* ---------- 3) Cabeçalho (título/subtítulo) ---------- */
.wrapper-chaveiro .chat-header{ position: relative; }
.wrapper-chaveiro .chat-header > *{ position: relative; z-index: 1; }

.wrapper-chaveiro .chat-header .heading2{
  color: var(--white);
  text-shadow:
    0 0 10px rgba(10,14,24,.45),
    0 2px 30px rgba(0,0,0,.55);
}

/* Gradiente vivo no span (usa variáveis do tema) */
.wrapper-chaveiro .chat-header .heading2 .mt_gradient{
  background-size: 220% 220%;
  animation: gradient-pan 14s ease-in-out infinite alternate;
}

/* Glow base para usos gerais (quando não houver neon-boost) */
.wrapper-chaveiro .chat-header .heading2 .mt_gradient.mt_glow{
  text-shadow:
    0 0 18px rgba(42,200,211,.45),
    0 0 36px rgba(139,91,250,.28),
    0 1px 0 rgba(0,0,0,.35);
  -webkit-text-stroke: 1px rgba(255,255,255,0.06);
}

/* NEON final (com borda branca + glow contido) */
.wrapper-chaveiro .chat-header .heading2 .mt_gradient.mt_glow.neon-boost{
  -webkit-text-stroke: 1.25px #fff; /* borda branca nítida */
  text-shadow:
    0 0 1.5px rgba(255,255,255,.95),
    0 0 8px   rgba(175,235,255,.45),
    0 0 16px  rgba(90,200,255,.32),
    0 0 24px  rgba(139,91,250,.22);
  filter:
    drop-shadow(0 0 8px rgba(175,235,255,.22))
    drop-shadow(0 0 12px rgba(139,91,250,.18));
}

/* Feixe/halo atrás do título (clareia a área sem “lavar”) */
.wrapper-chaveiro .chat-header::before{
  content:"";
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  width: min(1000px, 90vw);
  height: clamp(220px, 38vw, 520px);
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(159,214,255,.26), rgba(42,200,211,.18) 45%, transparent 70%),
    radial-gradient(90% 70% at 50% 58%, rgba(139,91,250,.22), transparent 70%);
  filter: blur(18px);     /* final (reduzido) */
  opacity: .65;           /* final (reduzido) */
  mix-blend-mode: screen; /* clareia fundo escuro */
  pointer-events:none;
  z-index: 0;
}

/* Halo imediato do span (não requer alterar HTML) */
.wrapper-chaveiro .neon-boost::after{
  content:"";
  position:absolute;
  inset: -8px -10px;     /* final (menor) */
  background:
    radial-gradient(120% 100% at 50% 60%,
      rgba(159,214,255,.18),
      rgba(42,200,211,.14) 40%,
      transparent 70%);
  filter: blur(10px);    /* final (reduzido) */
  opacity: .75;
  z-index:-1;
  border-radius: 16px;
}

/* Subtítulo em tom claro */
.wrapper-chaveiro .text-placehover{
  color: rgba(235,240,255,.82) !important;
}

/* ---------- 4) Cartão/Container (glassmorphism leve) ---------- */
.wrapper-chaveiro .form-content{
  background: rgba(8,10,18,0.45) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.40),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.wrapper-chaveiro .form-content .content{
  background: transparent !important; /* remove imagem interna */
  padding: clamp(16px, 3vw, 40px);
}

/* ---------- 5) Steps/Status ---------- */
.wrapper-chaveiro .gpv-step{
  background: rgba(10,14,24,0.55) !important;
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--white);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.wrapper-chaveiro #gpv-status.info{ color: var(--white); }

/* ---------- 6) Grid inicial / Upload ---------- */
.wrapper-chaveiro .gpv-two-cols{
  gap: clamp(16px, 3.6vw, 32px);
}
.wrapper-chaveiro .gpv-two-cols > div:first-child{
  display: grid;
  gap: clamp(10px, 1.2vw, 14px);
}

.wrapper-chaveiro .gpv-upload-zone{
  background: rgba(10,14,24,.45);
  border-color: rgba(146,224,255,.45);
  border-radius: 16px;
}
.wrapper-chaveiro .gpv-upload-label{ color: var(--white); }
.wrapper-chaveiro .gpv-upload-label svg{ stroke: rgba(235,240,255,.9); }
.wrapper-chaveiro .gpv-upload-button{
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 10px 28px rgba(42,200,211,.35),
    0 0 18px rgba(136,130,238,.25);
}

/* ---------- 7) Inputs (premium, arredondados, foco neon) ---------- */
.wrapper-chaveiro label{
  color: rgba(235,240,255,.88);
  font-weight: 700;
  letter-spacing: .015em;
  margin: 10px 0 6px;
  display:block;
}
.wrapper-chaveiro input[type="text"],
.wrapper-chaveiro input[type="tel"],
.wrapper-chaveiro input[type="email"]{
  width: 100%;
  color: rgba(245,248,255,.98) !important;
  caret-color: #bfe9ff;
  background: rgba(12,16,28,.52) !important;
  border: 1px solid rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.16) !important;
  border-radius: 14px;
  padding: 14px 16px;
  line-height: 1.2;
  outline: none;
  transition:
    border-color .2s ease,
    box-shadow .25s ease,
    background-color .2s ease,
    transform .12s ease;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.25);
}
.wrapper-chaveiro input[type="text"]:hover,
.wrapper-chaveiro input[type="tel"]:hover,
.wrapper-chaveiro input[type="email"]:hover{
  background: rgba(12,16,28,.60) !important;
}
.wrapper-chaveiro input::placeholder{ color: rgba(235,240,255,.55) !important; }
.wrapper-chaveiro input:focus{
  border-color: rgba(146,224,255,.85) !important;
  background: rgba(12,16,28,.70) !important;
  transform: translateY(-1px);
  box-shadow:
    0 0 0 3px rgba(146,224,255,.20),
    0 0 0 6px rgba(139,91,250,.14),
    0 10px 26px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.15) !important;
}
/* Autofill claro em tema escuro */
.wrapper-chaveiro input:-webkit-autofill{
  -webkit-text-fill-color: rgba(245,248,255,.98) !important;
  box-shadow: 0 0 0 1000px rgba(12,16,28,.60) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* ---------- 8) Botões principais (start / add-to-cart) ---------- */
.wrapper-chaveiro #gpv-start-btn,
.wrapper-chaveiro #gpv-add-to-cart-btn{
  appearance: none; -webkit-appearance: none;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color)) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: clamp(12px, 1.6vh, 16px) clamp(22px, 3.2vw, 30px);
  min-width: clamp(180px, 26vw, 280px);
  background-size: 180% 180%;
  box-shadow:
    0 10px 30px rgba(42,200,211,.35),
    0 0 24px rgba(136,130,238,.25),
    inset 0 1px 0 rgba(255,255,255,.2);
  transition:
    transform .2s ease,
    box-shadow .25s ease,
    background-position .4s ease;
}
.wrapper-chaveiro #gpv-start-btn:hover,
.wrapper-chaveiro #gpv-add-to-cart-btn:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 18px 42px rgba(42,200,211,.40),
    0 0 36px rgba(139,91,250,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
  background-position: 30% 70%;
}

/* ---------- 9) Mockup / Preview ---------- */
.wrapper-chaveiro .gpv-mockup{
  max-width: min(980px, 92vw);
  margin-inline: auto;
  aspect-ratio: 1/1;
}
@media (max-width: 680px){
  .wrapper-chaveiro .gpv-mockup{ max-width: 96vw; }
}

/* ---------- 10) Sumário / Tabs (step 2) ---------- */
.wrapper-chaveiro .gpv-product-summary{
  background: rgba(10,14,24,0.55);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--white);
}
.wrapper-chaveiro .gpv-tabs .woocommerce-tabs .tabs li{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: var(--white);
}
.wrapper-chaveiro .gpv-tabs .woocommerce-tabs .tabs li.active{
  background: var(--primary-color);
  color: #fff;
}

/* ---------- 11) Galeria / visibilidade ---------- */
.wrapper-chaveiro #gpv-gallery img{
  opacity: 1 !important;
  visibility: visible !important;
}

/* ---------- 12) Step 3 / Opções ---------- */
.wrapper-chaveiro .gpv-waiting-feedback,
.wrapper-chaveiro .options .option-btn{
  color: var(--white);
}

/* ---------- 13) Animação de gradiente (compartilhada) ---------- */
@keyframes gradient-pan{
  0%{   background-position: 0% 40%; }
  100%{ background-position: 100% 60%; }
}

/* ---------- 14) Acessibilidade / Motion ---------- */
@media (prefers-reduced-motion: reduce){
  .wrapper-chaveiro .gpv-upload-button,
  .wrapper-chaveiro #gpv-start-btn,
  .wrapper-chaveiro #gpv-add-to-cart-btn{ transition: none; }
}

/* ---------- 15) Mobile — nitidez do neon e halo ---------- */
@media (max-width: 680px){
  .wrapper-chaveiro .chat-header .heading2 .mt_gradient.mt_glow.neon-boost{
    -webkit-text-stroke: 1px #fff;
    text-shadow:
      0 0 1px rgba(255,255,255,.95),
      0 0 6px rgba(175,235,255,.40),
      0 0 12px rgba(90,200,255,.30);
    filter: drop-shadow(0 0 6px rgba(175,235,255,.20));
  }
  .wrapper-chaveiro .chat-header::before{
    filter: blur(14px);
    opacity:.6;
  }
}

/* === Upsell: tipografia e CTAs padronizados (novo) === */
.wrapper-chaveiro .gpv-step[data-step="3"]{
  --fz-title: clamp(20px, 2.8vw, 26px);
  --fz-text: clamp(14px, 2vw, 16px);
  --fz-price: clamp(15px, 2.2vw, 17px);
}

.wrapper-chaveiro .gpv-step[data-step="3"] .gpv-upsell-title{
  font-size: var(--fz-title);
}
.wrapper-chaveiro .gpv-step[data-step="3"] .gpv-upsell-pick .label{
  font-size: var(--fz-text);
}
.wrapper-chaveiro .gpv-step[data-step="3"] .gpv-upsell-pick .price{
  font-size: var(--fz-price);
}

/* Botões finais do step 3 no mesmo visual dos principais */
.wrapper-chaveiro .gpv-step[data-step="3"] .option-btn{
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color)) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.15) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  padding: clamp(12px, 1.6vh, 16px) clamp(22px, 3.2vw, 30px) !important;
  min-width: clamp(180px, 26vw, 280px) !important;
  box-shadow:
    0 10px 30px rgba(42,200,211,.35),
    0 0 24px rgba(136,130,238,.25),
    inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.wrapper-chaveiro .gpv-step[data-step="3"] .option-btn:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 18px 42px rgba(42,200,211,.40),
    0 0 36px rgba(139,91,250,.35),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* ===========================
   UPSELL – PREÇOS PROMOCIONAIS (picks inline + cards)
   =========================== */
.wrapper-chaveiro{
  --promo-from: #ff5b8a;   /* rosa quente (chama atenção) */
  --promo-to:   #ffcc6f;   /* âmbar (sensação de oferta) */
  --promo-text: #1b0c10;   /* texto escuro dentro do pill */
}

/* Linha de preço: antigo + atual, com espaçamento e sem quebra esquisita */
.wrapper-chaveiro .gpv-upsell-pick .price,
.wrapper-chaveiro .gpv-upsell-card .meta .price{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Preço antigo (del) — menor, dessaturado, com risco colorido */
.wrapper-chaveiro .gpv-upsell-pick .price del,
.wrapper-chaveiro .gpv-upsell-card .meta .price del{
  color: rgba(235,240,255,.70);
  font-weight: 600;
  font-size: clamp(12px, 1.6vw, 14px);
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(255,120,145,.75); /* tom “promo” no risco */
  opacity: .9;
}
.wrapper-chaveiro .gpv-upsell-pick .price del .woocommerce-Price-currencySymbol,
.wrapper-chaveiro .gpv-upsell-card .meta .price del .woocommerce-Price-currencySymbol{
  opacity: .85;
}

/* Preço atual (ins) — pill com gradiente quente + glow leve */
.wrapper-chaveiro .gpv-upsell-pick .price ins,
.wrapper-chaveiro .gpv-upsell-card .meta .price ins{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--promo-from), var(--promo-to));
  color: var(--promo-text);
  font-weight: 900;
  letter-spacing: .02em;
  text-decoration: none; /* remove sublinhado do <ins> */
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    0 6px 18px rgba(255,91,138,.28),
    0 0 20px rgba(255,204,111,.20),
    inset 0 1px 0 rgba(255,255,255,.25);
  position: relative;
  overflow: hidden; /* para o brilho passar por dentro */
}
.wrapper-chaveiro .gpv-upsell-pick .price ins .woocommerce-Price-amount bdi,
.wrapper-chaveiro .gpv-upsell-card .meta .price ins .woocommerce-Price-amount bdi{
  display:inline-block;
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.1;
}

/* Brilho sutil “passando” no pill (sem exagero) */
.wrapper-chaveiro .gpv-upsell-pick .price ins::after,
.wrapper-chaveiro .gpv-upsell-card .meta .price ins::after{
  content:"";
  position:absolute; inset:-40% -20%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.25) 50%, transparent 60%);
  transform: translateX(-60%) rotate(8deg);
  animation: promoShine 3.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes promoShine{
  0%{ transform: translateX(-60%) rotate(8deg); opacity:.0; }
  35%{ opacity:.55; }
  60%{ transform: translateX(60%) rotate(8deg); opacity:.0; }
  100%{ transform: translateX(60%) rotate(8deg); opacity:.0; }
}

/* Quando o pick for marcado: reforça o destaque do preço atual */
.wrapper-chaveiro .gpv-upsell-pick:has(input[type="checkbox"]:checked){
  border-color: rgba(255,204,111,.55) !important;
  box-shadow:
    0 0 0 2px rgba(255,204,111,.25),
    0 10px 28px rgba(0,0,0,.25);
}
.wrapper-chaveiro .gpv-upsell-pick:has(input[type="checkbox"]:checked) .price ins{
  box-shadow:
    0 8px 24px rgba(255,91,138,.35),
    0 0 26px rgba(255,204,111,.28),
    inset 0 1px 0 rgba(255,255,255,.28);
}

/* Acessibilidade: manter “screen-reader-text” invisível mas disponível */
.wrapper-chaveiro .gpv-upsell-pick .price .screen-reader-text,
.wrapper-chaveiro .gpv-upsell-card .meta .price .screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Mobile: se faltar espaço, deixa o del acima do ins */
@media (max-width: 480px){
  .wrapper-chaveiro .gpv-upsell-pick .price,
  .wrapper-chaveiro .gpv-upsell-card .meta .price{
    flex-direction: column;
    align-items: flex-end;  /* mantém o alinhamento “de preço” */
    gap: 6px;
  }
}

/* ===== UPSELL: preço antigo (del) com contraste no cosmos ===== */
.wrapper-chaveiro .gpv-upsell-pick .price del,
.wrapper-chaveiro .gpv-upsell-card .meta .price del{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  /* texto claro + chip translúcido para separar do fundo */
  color: rgba(246,248,255,.96) !important;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  line-height: 1;
  /* risco visível com tom “promo” */
  text-decoration-line: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(255,140,160,.85);
  /* remove qualquer opacidade herdada */
  opacity: 1 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
.wrapper-chaveiro .gpv-upsell-pick .price del .woocommerce-Price-amount,
.wrapper-chaveiro .gpv-upsell-card .meta .price del .woocommerce-Price-amount{
  color: inherit !important; /* garante que o valor herde o contraste */
}

/* ================================================ */

/* 0) PREÇO – base (funciona mesmo sem .price no HTML) */
#gpv-price {
  margin: 0 auto 12px;
  text-align: center;
  font-size: clamp(18px, 2.5vw, 22px);
}
#gpv-price del { opacity: .7; margin-right: 8px; font-weight: 400; }
#gpv-price ins { text-decoration: none; color: var(--accent-color); font-weight: 700; }

/* 0.1) PREÇO – contraste específico do /puzzle */
.wrapper-puzzle #gpv-price,
.wrapper-puzzle #gpv-price .price,
.wrapper-puzzle #gpv-price .woocommerce-Price-amount,
.wrapper-puzzle #gpv-price ins bdi {
  color: #111 !important;
}
.wrapper-puzzle #gpv-price del .woocommerce-Price-amount { color: #666 !important; }
.wrapper-puzzle #gpv-price del { opacity: .6; }

/* 1) UPSELL – layout dos “rádios” (desktop lado a lado, mobile empilhado) */
.wrapper-chaveiro #gpv-upsell-offer .gpv-upsell-inline .picks,
.wrapper-puzzle   #gpv-upsell-offer .gpv-upsell-inline .picks {
  display: flex !important;           /* vence possíveis overrides do plugin */
  flex-direction: row !important;     /* corrige empilhamento indevido */
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

/* Mobile */
@media (max-width: 680px) {
  .wrapper-chaveiro #gpv-upsell-offer .gpv-upsell-inline .picks,
  .wrapper-puzzle   #gpv-upsell-offer .gpv-upsell-inline .picks {
    flex-direction: column !important;
    align-items: stretch;
  }
}

/* 1.1) UPSELL – cartão/label dos “rádios” (+ estado selecionado) */
.wrapper-chaveiro .gpv-upsell-pick,
.wrapper-puzzle   .gpv-upsell-pick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  cursor: pointer;
  user-select: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .1s ease;
}
.wrapper-chaveiro .gpv-upsell-pick:hover,
.wrapper-puzzle   .gpv-upsell-pick:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  transform: translateY(-1px);
}
.wrapper-chaveiro .gpv-upsell-pick:has(input:checked),
.wrapper-puzzle   .gpv-upsell-pick:has(input:checked),
.wrapper-chaveiro .gpv-upsell-pick.is-selected,  /* fallback JS */
.wrapper-puzzle   .gpv-upsell-pick.is-selected { /* fallback JS */
  border-color: var(--accent-color, #5b8cff);
  box-shadow:
    0 0 0 3px rgba(91,140,255,.15),
    0 10px 24px rgba(0,0,0,.18);
}
.wrapper-chaveiro .gpv-upsell-check,
.wrapper-puzzle   .gpv-upsell-check {
  accent-color: var(--accent-color, #5b8cff);
}
.wrapper-chaveiro .gpv-upsell-pick .label,
.wrapper-puzzle   .gpv-upsell-pick .label { font-weight: 600; }
.wrapper-chaveiro .gpv-upsell-pick .price,
.wrapper-puzzle   .gpv-upsell-pick .price { opacity: .9; font-size: .95em; }

/* 2) MÁSCARAS – escopos separados (garantir que puzzle NUNCA herde a máscara) */
.wrapper-puzzle #gpv-sticker-live{
  -webkit-mask-image:none !important;
  mask-image:none !important;
}
.wrapper-chaveiro #gpv-sticker-live{
  -webkit-mask-image:url('/wp-content/uploads/mockups/mask-alpha.png?v=1') !important;
  mask-image:url('/wp-content/uploads/mockups/mask-alpha.png?v=1') !important;
  -webkit-mask-size:cover; mask-size:cover;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}

/* 3) TEMA “COSMOS” – tokens compartilhados + layout base */
.wrapper-chaveiro,
.wrapper-puzzle {
  /* corrigido: rgba com alpha decimal válido */
  --text-color: rgba(235,240,255,0.96);
  --white: rgba(255,255,255,0.96);
  --border-color: rgba(42,200,211,0.55);
  --button-bg: var(--primary-color);
  --button-hover-bg: var(--accent-color);
  --input-bg: rgba(255,255,255,0.08);
  --chat-bg: none;
}

/* Respiro geral da seção */
.wrapper-chaveiro .section-form-chat,
.wrapper-puzzle   .section-form-chat {
  min-height: 100svh;
  padding-block: clamp(16px, 6vh, 48px) !important;
}

/* Cabeçalho */
.wrapper-chaveiro .chat-header .heading2,
.wrapper-puzzle   .chat-header .heading2 {
  color: var(--white);
  text-shadow:
    0 0 10px rgba(10,14,24,.45),
    0 2px 30px rgba(0,0,0,.55);
}
.wrapper-chaveiro .chat-header .heading2 .mt_gradient,
.wrapper-puzzle   .chat-header .heading2 .mt_gradient {
  background-size: 220% 220%;
  animation: gradient-pan 14s ease-in-out infinite alternate;
}

/* Cartão principal (vidro) */
.wrapper-chaveiro .form-content,
.wrapper-puzzle   .form-content {
  background:
    radial-gradient(120% 120% at 50% 0%,
      rgba(14,19,32,.92) 0%,
      rgba(10,12,22,.88) 55%,
      rgba(7,10,18,.86) 100%);
  border: 1px solid var(--border-color);
  box-shadow:
    0 0 0 2px rgba(28,169,250,.10),
    0 12px 42px rgba(0,0,0,.45),
    0 0 140px rgba(28,169,250,.20);
  backdrop-filter: blur(6px);
}

/* Steps */
.wrapper-chaveiro .gpv-step,
.wrapper-puzzle   .gpv-step {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
}

/* Botões do fluxo */
.wrapper-chaveiro .option-btn,
.wrapper-puzzle   .option-btn {
  background: var(--button-bg);
}
.wrapper-chaveiro .option-btn:hover,
.wrapper-puzzle   .option-btn:hover {
  background: var(--button-hover-bg);
}

/* ============================================================================
   WRAPPER PUZZLE — inputs, upload, CTAs + STEP 2 (preview) alinhado ao Chaveiro
   - Organização por seções
   - Especificidade mínima e !important só onde precisa vencer tema/plugin
   ========================================================================== */

/* ========== 1) GRID INICIAL & INPUTS (visual premium igual ao Chaveiro) ========= */

.wrapper-puzzle .gpv-two-cols{
  gap: clamp(16px, 3.6vw, 32px);
}
.wrapper-puzzle .gpv-two-cols > div:first-child{
  display: grid;
  gap: clamp(10px, 1.2vw, 14px);
}

/* Labels */
.wrapper-puzzle label{
  color: rgba(235,240,255,.88);
  font-weight: 700;
  letter-spacing: .015em;
  margin: 10px 0 6px;
  display: block;
}

/* Inputs base */
.wrapper-puzzle input[type="text"],
.wrapper-puzzle input[type="tel"],
.wrapper-puzzle input[type="email"]{
  width: 100%;
  color: rgba(245,248,255,.98) !important;
  caret-color: #bfe9ff;
  background: rgba(12,16,28,.52) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 14px;
  padding: 14px 16px;
  line-height: 1.2;
  outline: none;
  transition:
    border-color .2s ease,
    box-shadow .25s ease,
    background-color .2s ease,
    transform .12s ease;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.25);
}
.wrapper-puzzle input[type="text"]:hover,
.wrapper-puzzle input[type="tel"]:hover,
.wrapper-puzzle input[type="email"]:hover{
  background: rgba(12,16,28,.60) !important;
}
.wrapper-puzzle input::placeholder{ color: rgba(235,240,255,.55) !important; }
.wrapper-puzzle input:focus{
  border-color: rgba(146,224,255,.85) !important;
  background: rgba(12,16,28,.70) !important;
  transform: translateY(-1px);
  box-shadow:
    0 0 0 3px rgba(146,224,255,.20),
    0 0 0 6px rgba(139,91,250,.14),
    0 10px 26px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.15) !important;
}
/* Autofill claro em tema escuro */
.wrapper-puzzle input:-webkit-autofill{
  -webkit-text-fill-color: rgba(245,248,255,.98) !important;
  box-shadow: 0 0 0 1000px rgba(12,16,28,.60) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}
/* Estado inválido */
.wrapper-puzzle input.is-invalid{
  border-color: #ff7a7a !important;
  box-shadow: 0 0 0 3px rgba(255,122,122,.25) !important;
}

/* Selects */
.wrapper-puzzle select{
  width: 100%;
  background: rgba(12,16,28,.60);
  color: rgba(245,248,255,.98);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 12px 14px;
}
.wrapper-puzzle select:focus{
  outline: none;
  border-color: rgba(146,224,255,.85);
  box-shadow: 0 0 0 3px rgba(146,224,255,.20), 0 0 0 6px rgba(139,91,250,.14);
}

/* Upload zone */
.wrapper-puzzle .gpv-upload-zone{
  background: rgba(10,14,24,.45);
  border-color: rgba(146,224,255,.45);
  border-radius: 16px;
}
.wrapper-puzzle .gpv-upload-label{ color: var(--white); }
.wrapper-puzzle .gpv-upload-label svg{ stroke: rgba(235,240,255,.9); }
.wrapper-puzzle .gpv-upload-button{
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 10px 28px rgba(42,200,211,.35),
    0 0 18px rgba(136,130,238,.25);
}

/* CTAs principais */
.wrapper-puzzle #gpv-start-btn,
.wrapper-puzzle #gpv-add-to-cart-btn{
  appearance: none; -webkit-appearance: none;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color)) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: clamp(12px, 1.6vh, 16px) clamp(22px, 3.2vw, 30px);
  min-width: clamp(180px, 26vw, 280px);
  background-size: 180% 180%;
  box-shadow:
    0 10px 30px rgba(42,200,211,.35),
    0 0 24px rgba(136,130,238,.25),
    inset 0 1px 0 rgba(255,255,255,.2);
  transition:
    transform .2s ease,
    box-shadow .25s ease,
    background-position .4s ease;
}
.wrapper-puzzle #gpv-start-btn:hover,
.wrapper-puzzle #gpv-add-to-cart-btn:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 18px 42px rgba(42,200,211,.40),
    0 0 36px rgba(139,91,250,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
  background-position: 30% 70%;
}

/* ===================== 2) STEP 2 (preview) — preço, picks e tabs ===================== */

/* 2.1 Preço com contraste sobre fundo escuro */
.wrapper-puzzle .gpv-step[data-step="2"] #gpv-price,
.wrapper-puzzle .gpv-step[data-step="2"] #gpv-price .price,
.wrapper-puzzle .gpv-step[data-step="2"] #gpv-price .woocommerce-Price-amount,
.wrapper-puzzle .gpv-step[data-step="2"] #gpv-price ins bdi{
  color: rgba(245,248,255,.98) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.wrapper-puzzle .gpv-step[data-step="2"] #gpv-price del .woocommerce-Price-amount{
  color: rgba(235,240,255,.78) !important;
}
.wrapper-puzzle .gpv-step[data-step="2"] #gpv-price del{ opacity:.9; }

/* 2.2 Upsell – neutraliza grid 220px/1fr e usa flex */
.wrapper-puzzle .gpv-step[data-step="2"] #gpv-upsell-offer .gpv-upsell-inline{
  display: block !important;                  /* impede o GRID feito para Step 3 */
}
.wrapper-puzzle .gpv-step[data-step="2"] #gpv-upsell-offer .gpv-upsell-inline .picks{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  justify-content: center;
  width: 100%;
}

/* Cartões (rádios) */
.wrapper-puzzle .gpv-step[data-step="2"] .gpv-upsell-pick{
  display: inline-flex;
  max-width: 100%;
}
.wrapper-puzzle .gpv-step[data-step="2"] .gpv-upsell-check{
  accent-color: var(--accent-color);
}

/* Distribuição responsiva — 3 colunas no desktop, 2 no tablet, 1 no mobile */
@media (min-width: 900px){
  .wrapper-puzzle .gpv-step[data-step="2"] .gpv-upsell-pick{
    flex: 0 1 calc((100% - 24px) / 3);       /* 3 colunas (gap total 24px) */
  }
}
@media (min-width: 680px) and (max-width: 899px){
  .wrapper-puzzle .gpv-step[data-step="2"] .gpv-upsell-pick{
    flex: 0 1 calc((100% - 12px) / 2);       /* 2 colunas */
  }
}
@media (max-width: 679.98px){
  .wrapper-puzzle .gpv-step[data-step="2"] #gpv-upsell-offer .gpv-upsell-inline .picks{
    flex-direction: column !important;        /* 1 coluna */
    align-items: stretch;
  }
}

/* Suporte opcional por classe de markup (quando sem thumb) */
.wrapper-puzzle .gpv-step[data-step="2"] .gpv-upsell-inline.gpv-inline-no-thumb{
  display: block !important;
}

/* 2.3 Tabs + summary (tema “cosmos” igual ao Chaveiro) */
.wrapper-puzzle .gpv-product-summary{
  background: rgba(10,14,24,0.55);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--white);
}
.wrapper-puzzle #gpv-product-tabs .woocommerce-tabs .tabs{
  display:flex; gap:8px; margin:0 0 8px; padding:0; list-style:none;
}
.wrapper-puzzle #gpv-product-tabs .woocommerce-tabs .tabs li{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px; padding:6px 10px;
  color: var(--white);
  cursor: pointer;
}
.wrapper-puzzle #gpv-product-tabs .woocommerce-tabs .tabs li.active{
  background: var(--primary-color);
  color:#fff;
}
.wrapper-puzzle .gpv-tabs .woocommerce-tabs .panel{ display:none; padding-top:8px; }
.wrapper-puzzle .gpv-tabs .woocommerce-tabs .panel.active{ display:block; }