/**
 * Estilos só do editor. O resto vem de painel.css.
 *
 * Layout do mockup da Claude Designer: controles à esquerda, prévia fixa de 452px à
 * direita. Abaixo de 1180px a prévia vai pra baixo em vez de espremer os controles —
 * o desenho dela pedia min-width:1320px, que numa tela menor viraria rolagem
 * horizontal em vez de layout.
 */

.ed-topo { padding: 22px 30px 0; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 10 }
.ed-topo-linha { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap }
.ed-migalha { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--t4); margin-bottom: 9px }
.ed-migalha a { color: var(--t4) }
.ed-migalha a:hover { color: var(--t1) }
.ed-migalha span { color: var(--t2) }
.ed-titulo-linha { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.ed-titulo-linha h1 { font-size: 22px; font-weight: 700; letter-spacing: -.025em; margin: 0 }

.ed-abas { display: flex; align-items: center; gap: 26px; margin-top: 20px }
.ed-aba {
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 0 0 13px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--t4); cursor: pointer;
}
.ed-aba:hover { color: var(--t2) }
.ed-aba.on { color: var(--t1); border-bottom-color: var(--t1) }

.ed-corpo { display: grid; grid-template-columns: 1fr 452px; gap: 26px; padding: 24px 30px 60px; align-items: start }
.ed-controles { min-width: 0; display: flex; flex-direction: column; gap: 16px }

.ed-secoes { display: flex; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 5px; flex-wrap: wrap }
.ed-secao {
  flex: 1; min-width: 90px; padding: 9px 12px; border-radius: 7px; border: 0; background: transparent;
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--t3); cursor: pointer; transition: .14s;
}
.ed-secao:hover { background: var(--tile); color: var(--t1) }
.ed-secao.on { background: var(--seg); color: var(--t1); font-weight: 600 }

.ed-bloco { padding: 20px 22px 22px }
.ed-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
@media (max-width: 560px) { .ed-duas { grid-template-columns: 1fr } }
.ed-dica { font-size: 12.5px; color: var(--t4); line-height: 1.6; margin: 6px 0 0 }
.ed-dica b { color: var(--t2) }
.campo > span i { color: var(--t5); font-style: normal; font-weight: 400 }

.ed-check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--t2); cursor: pointer; margin-top: 4px }
.ed-check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer }

.ed-cor { display: flex; gap: 8px; align-items: center }
.ed-cor input[type=color] {
  width: 40px; height: 40px; padding: 2px; flex: none; cursor: pointer;
  background: var(--tile); border: 1px solid var(--line3); border-radius: 7px;
}

/* linhas repetíveis: cores, campos, blocos, ofertas */
.ed-linhas { display: flex; flex-direction: column; gap: 8px }
.ed-linha {
  background: var(--tile2); border: 1px solid var(--line3); border-radius: 9px;
  padding: 12px 13px; display: flex; flex-direction: column; gap: 10px;
}
.ed-linha-topo { display: flex; align-items: center; gap: 10px }
/* Contraste um degrau acima: era o sinal mais discreto da tela, justamente o que
   precisa ser notado sem ninguem explicar. */
.ed-linha-topo .arrasta { color: var(--t4); cursor: grab; flex: none; touch-action: none; transition: color .12s }
.ed-linha:hover .arrasta { color: var(--t2) }
.ed-linha-topo .nome { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600 }
.ed-linha.arrastando { opacity: .45 }
.ed-x {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px;
  border: 1px solid var(--line3); background: transparent; color: var(--t4); cursor: pointer;
}
.ed-x:hover { color: var(--danger-t); border-color: var(--danger-line) }
.ed-linha .entrada { padding: 9px 11px; font-size: 13px }
.ed-linha .campo { margin: 0 }
.ed-linha .campo > span { font-size: 11.5px; margin-bottom: 5px }

/* prévia */
.ed-previa { position: sticky; top: 118px; display: flex; flex-direction: column; gap: 10px }
.ed-previa-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.ed-idioma { font-size: 10.5px; color: var(--t5); letter-spacing: .06em }
.ed-previa-moldura {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff;
  height: calc(100vh - 190px); min-height: 480px;
}
.ed-previa-moldura iframe { width: 100%; height: 100%; border: 0; display: block }

@media (max-width: 1180px) {
  .ed-corpo { grid-template-columns: 1fr }
  .ed-previa { position: static }
  .ed-previa-moldura { height: 620px }
  .ed-topo, .ed-corpo { padding-left: 18px; padding-right: 18px }
}

/* aba Pixels */
.ed-eventos { display: flex; flex-direction: column; border: 1px solid var(--line3); border-radius: 10px; overflow: hidden }
.ed-eventos > div { display: grid; grid-template-columns: 186px 1fr; gap: 16px; padding: 13px 15px; align-items: start }
.ed-eventos > div + div { border-top: 1px solid var(--line2) }
.ed-eventos .mono { font-size: 12px; color: var(--t1) }
.ed-eventos small { display: block; font-size: 11px; color: var(--t4); margin-top: 4px }
.ed-eventos p { grid-column: 2; margin: 0; font-size: 12.5px; color: var(--t2); line-height: 1.6 }
@media (max-width: 620px) {
  .ed-eventos > div { grid-template-columns: 1fr; gap: 6px }
  .ed-eventos p { grid-column: 1 }
}
.ed-sigla {
  flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--tile);
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--t3);
}

/* chips de gatilho: ligam e desligam, e mostram o que está ligado */
.ed-chip {
  display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12.5px;
  font-weight: 500; border-radius: 7px; padding: 9px 15px; cursor: pointer; white-space: nowrap;
  transition: .14s; background: transparent; color: var(--t2); border: 1px solid var(--line3);
}
.ed-chip:hover { border-color: var(--line4); color: var(--t1) }
.ed-chip .tick { display: none }
.ed-chip.on { background: var(--inv-bg); color: var(--inv-fg); border-color: var(--inv-bg) }
.ed-chip.on .tick { display: inline-flex }

.btn.fantasma.ed-add { display: inline-flex; align-items: center; gap: 7px }

/* Aviso de peso jurídico. Risco de conta suspensa não é legenda cinza. */
.ed-alerta {
  display: flex; align-items: flex-start; gap: 11px; border-radius: 9px; padding: 13px 15px;
  font-size: 12.5px; line-height: 1.6; color: var(--t2);
  background: var(--warn-weak); border: 1px solid var(--warn-line);
}
.ed-alerta svg { flex: none; margin-top: 1px; color: var(--warn) }
.ed-alerta b { font-weight: 600; color: var(--t1) }

/* A aba Pixels não tem prévia: uma coluna só, com largura de leitura. */
.ed-corpo-simples { grid-template-columns: minmax(0, 860px) }
.ed-tracejado { width: 100%; justify-content: center; border-style: dashed }

/* o campo de colar mora DENTRO do cartão da conta, acima do que ele preenche */
.ed-colar {
  background: var(--well); border: 1px dashed var(--line3); border-radius: 9px;
  padding: 13px 14px; margin-top: 4px;
}
.ed-colar > b { display: block; font-size: 12px; font-weight: 600; color: var(--t2) }
.ed-colar > small { display: block; font-size: 11.5px; color: var(--t4); line-height: 1.55; margin-top: 4px }
.ed-colar textarea {
  width: 100%; margin-top: 10px; background: var(--card); border: 1px dashed var(--line3);
  border-radius: 7px; padding: 10px 12px; font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11.5px; line-height: 1.5; color: var(--t1); outline: none; resize: vertical;
}
.ed-colar textarea:focus { border-style: solid; border-color: var(--accent-line) }
.ed-colar .resposta { font-size: 11.5px; line-height: 1.55; margin-top: 8px }
.ed-colar .resposta.ok { color: var(--accent) }
.ed-colar .resposta.ruim { color: var(--danger-t) }

.ed-linha .aviso-campo { font-size: 11.5px; line-height: 1.55; margin-top: 7px; color: var(--warn) }
.ed-linha .entrada.pendente { border-color: var(--warn-line) }
.ed-acao {
  background: none; border: 0; font: inherit; font-size: 11.5px; color: var(--t4);
  cursor: pointer; padding: 0;
}
.ed-acao:hover { color: var(--t1) }

/* área de soltar imagem */
.ed-solta {
  display: block; border: 1px dashed var(--line3); border-radius: 9px; padding: 18px 14px;
  text-align: center; cursor: pointer; transition: .14s; background: var(--well);
}
.ed-solta:hover, .ed-solta.sobre { border-color: var(--accent-line); background: var(--accent-weak) }
.ed-solta b { display: block; font-size: 12.5px; font-weight: 600; color: var(--t2) }
.ed-solta small { display: block; font-size: 11.5px; color: var(--t4); margin-top: 4px }
.ed-solta input[type=file] { display: none }
.ed-solta.enviando { opacity: .6; pointer-events: none }
.ed-miniatura {
  display: flex; align-items: center; gap: 11px; background: var(--well);
  border: 1px solid var(--line3); border-radius: 9px; padding: 10px 12px;
}
.ed-miniatura img { width: 46px; height: 46px; object-fit: cover; border-radius: 6px; flex: none; background: var(--tile) }
.ed-miniatura .url { flex: 1; min-width: 0; font-size: 11px; color: var(--t4); word-break: break-all; line-height: 1.45 }

/* seletor de ícone do botão */
.ed-icones { display: flex; flex-wrap: wrap; gap: 7px }
.ed-icone {
  width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line3); border-radius: 8px; background: transparent;
  color: var(--t3); transition: .14s; padding: 0;
}
.ed-icone:hover { border-color: var(--line4); color: var(--t1) }
.ed-icone.on { background: var(--inv-bg); color: var(--inv-fg); border-color: var(--inv-bg) }

/* Controle de deslizar. Número digitado obriga a imaginar o resultado; aqui o
   valor muda enquanto a prévia acompanha, que é como se escolhe tamanho. */
.ed-faixa {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px;
  background: transparent; cursor: pointer; padding: 0; margin: 0;
}
.ed-faixa::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: var(--line3);
}
.ed-faixa::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line3) }
.ed-faixa::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--t1); border: 0; margin-top: -6px; transition: transform .12s;
}
.ed-faixa::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--t1); border: 0 }
.ed-faixa:hover::-webkit-slider-thumb { transform: scale(1.15) }
.ed-faixa:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-weak) }
.campo > span b[data-mostra] { float: right; font-weight: 600; color: var(--t3); font-size: 11.5px }

/* pixel dobrado: uma linha por conta, abre ao clicar */
.ed-pixel { gap: 0; padding: 0; overflow: hidden }
.ed-pixel .ed-linha-topo { padding: 12px 13px; cursor: pointer; transition: background .14s }
.ed-pixel .ed-linha-topo:hover { background: var(--tile) }
.ed-pixel .ed-id {
  flex: none; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11.5px; color: var(--t4);
}
.ed-pixel .nome { flex: 1 }
.ed-dobra {
  display: flex; flex-direction: column; gap: 10px;
  padding: 4px 13px 13px; border-top: 1px solid var(--line2);
}
@media (max-width: 620px) { .ed-pixel .ed-id { display: none } }

/* sugestões rápidas de rótulo */
.ed-sugestoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: -6px }
.ed-sugestoes button {
  border: 1px solid var(--line3); background: transparent; border-radius: 99px;
  padding: 5px 12px; font: inherit; font-size: 11.5px; color: var(--t3); cursor: pointer;
  transition: .14s;
}
.ed-sugestoes button:hover { border-color: var(--line4); color: var(--t1) }
.ed-sugestoes button.on { background: var(--inv-bg); color: var(--inv-fg); border-color: var(--inv-bg) }

/* cartão de variação: miniatura, nome, id e URL numa linha só */
.vcard {
  display: flex; align-items: flex-start; gap: 11px; border: 1px solid var(--line3);
  border-radius: 10px; padding: 12px 13px; background: var(--tile2);
}
.vcard.ruim { border-color: var(--danger-line) }
.vthumb {
  flex: none; width: 46px; height: 46px; border-radius: 7px; overflow: hidden;
  display: grid; place-items: center; background: var(--tile); border: 1px solid var(--line3);
  color: var(--t5);
}
.vcard.ruim .vthumb { border-color: var(--danger-line); color: var(--danger-t); background: rgba(229,72,77,.06) }
.vthumb img { width: 100%; height: 100%; object-fit: cover; display: block }
.vtop { display: flex; align-items: center; gap: 9px }
.vtop .entrada { padding: 7px 10px; font-size: 12.5px }
.vtop .vnome { flex: 1; min-width: 0; font-weight: 600 }
.vtop .vid { flex: none; width: 104px; font-size: 11.5px }
.vurl { margin-top: 8px; padding: 7px 10px; font-size: 11.5px }
.vcard.ruim .vurl { border-color: var(--danger-line); color: var(--danger-t) }
.vmotivo { font-size: 11.5px; color: var(--danger-t); line-height: 1.55; margin-top: 6px }
@media (max-width: 560px) { .vtop { flex-wrap: wrap } .vtop .vid { width: 100% } }

/* Ofertas virou duas caixas na mesma seção: o cartão externo saiu para as duas
   respirarem como blocos irmãos, em vez de um cartão dentro de outro. */
.ed-bloco-solto { display: contents }

/* seletor de tela da prévia */
#previa-telas { align-self: stretch }
#previa-telas button { flex: 1 }

/* ─────────────── prévia expandida ─────────────── */
/* Ver o formulário inteiro de uma vez, e ter área de sobra para arrastar os blocos.
   Na coluna estreita a prévia rola, e arrastar até um campo que está fora da tela é
   o tipo de gesto que ninguém completa. */
#expandir { display: inline-flex; align-items: center; gap: 6px }
.ed-fundo {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 40;
  animation: ed-aparece .14s ease-out;
}
@keyframes ed-aparece { from { opacity: 0 } to { opacity: 1 } }

/* Largura de um formulário de 460px mais a moldura. Ampliar além disso mostraria o
   comprador vendo algo que ele não vê: no desktop dele o modal tem esses 460px, e
   uma prévia esticada faz o lojista escolher tamanho de fonte e foto pelo tamanho
   errado. O ganho do expandir é altura e foco, não largura. */
.ed-previa.expandida {
  position: fixed; z-index: 41; top: 20px; bottom: 20px; left: 50%;
  transform: translateX(-50%); width: min(508px, calc(100vw - 32px));
  margin: 0; background: var(--bg); border-radius: 14px; padding: 14px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
}
.ed-previa.expandida .ed-previa-moldura { flex: 1; height: auto; min-height: 0 }
@media (prefers-reduced-motion: reduce) { .ed-fundo { animation: none } }

/* ─────────────── medida das imagens ─────────────── */
/* O tamanho que a imagem vai ocupar no formulário do comprador. Fica na caixa de
   soltar porque é ali que a decisão é tomada — depois de enviada, saber que era
   para ter 840 px não ajuda mais. */
.ed-solta .medida { margin-top: 6px; opacity: .75; line-height: 1.5 }
/* `.ed-solta b` é bloco (é assim que o "Arraste a imagem aqui" fica na própria
   linha). Aqui os negritos estão DENTRO de uma frase, então voltam a ser inline —
   senão cada "416 px" quebra sozinho e a frase vira uma lista. */
.ed-solta .medida b { display: inline; font-size: inherit; color: inherit; font-weight: 600 }

/* Imagem pequena demais é conselho, não erro: o lojista pode ter escolhido aquela
   foto de propósito e nada está impedido. Por isso âmbar e sem caixa.
   NÃO chamar isto de `aviso`: no painel.css essa classe já é a caixa VERMELHA de
   erro, e reusar o nome pintava um conselho com a cara de falha. */
.resposta.medida-baixa {
  margin-top: 8px; color: var(--warn); font-size: 12px; line-height: 1.55;
}

/* ─────────────── envio de imagem nos outros lugares ─────────────── */
/* Versão baixa da caixa de soltar, para onde o campo de URL já existe logo acima:
   ali ela é a segunda opção, não a principal, e ocupar a mesma altura da do bloco
   de imagem faria o formulário parecer mais longo do que é. */
.ed-solta.rasa { margin-top: 8px; padding: 12px 14px }
.ed-solta.rasa b { font-size: 12px }
.ed-solta.rasa .medida { margin-top: 3px }

/* A miniatura da variação É o botão de enviar: clicar na foto para trocar a foto é
   onde a mão vai primeiro. A palavra só aparece no hover para não competir com a
   imagem quando já existe uma. */
.vthumb { position: relative; cursor: pointer; transition: border-color .14s }
.vthumb:hover, .vthumb.sobre { border-color: var(--accent-line) }
.vthumb input[type=file] { display: none }
.vthumb-capa {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: rgba(0, 0, 0, .58); opacity: 0; transition: opacity .14s;
}
.vthumb:hover .vthumb-capa, .vthumb.sobre .vthumb-capa { opacity: 1 }
.vthumb.enviando { opacity: .6; pointer-events: none }
@media (prefers-reduced-motion: reduce) { .vthumb, .vthumb-capa { transition: none } }

/* ─────────────── oferta que depende de outra ─────────────── */
/* O downsell só chega à tela de quem recusou o upsell. Com o upsell desligado ele
   continua editável — o lojista pode estar preparando os dois — mas apagado, para
   não parecer que já está no ar. */
.ed-bloco.adormecido { opacity: .62 }
.ed-dependente {
  margin: 12px 0 0; padding: 9px 12px; border-radius: 8px;
  background: var(--warn-weak); border: 1px solid var(--warn-line);
  color: var(--warn); font-size: 12.5px; line-height: 1.55;
}

/* ─────────────── acordeão das ofertas ─────────────── */
/* As três ofertas abertas de uma vez davam uma rolagem que ninguém percorria até o
   fim. Fechadas, cada uma diz numa linha o que está valendo, e só a que está sendo
   mexida ocupa altura. */
.ed-acordeao { padding: 0; overflow: hidden }
.ed-sec + .ed-sec { border-top: 1px solid var(--line3) }

.ed-sec-topo {
  display: flex; align-items: center; gap: 12px; padding: 15px 18px;
  cursor: pointer; transition: background .12s; user-select: none;
}
.ed-sec-topo:hover { background: var(--well) }
.ed-sec-topo.travado { cursor: default }
.ed-sec-topo.travado:hover { background: none }

.ed-seta { flex: none; display: grid; place-items: center; transition: transform .16s; color: var(--t4) }
.ed-sec.aberta .ed-seta { transform: rotate(90deg) }
.ed-sec-topo.travado .ed-seta { visibility: hidden }

.ed-sec-txt { flex: 1; min-width: 0 }
.ed-sec-txt .t { font-size: 14px; font-weight: 600; letter-spacing: -.01em }
.ed-sec-topo.travado .ed-sec-txt .t { color: var(--t3) }
.ed-sec-txt .r { font-size: 11.5px; color: var(--t3); margin-top: 3px; line-height: 1.5 }

/* Interruptor. Substitui a caixa "Ligada": no cabeçalho fechado ele precisa dizer o
   estado de longe, e uma caixinha com rótulo não faz isso. */
.ed-pill {
  flex: none; width: 36px; height: 21px; border-radius: 99px; padding: 2px;
  display: flex; cursor: pointer; border: 0; background: var(--seg);
  transition: background .14s;
}
.ed-pill > span {
  width: 17px; height: 17px; border-radius: 50%; background: #fff;
  transition: margin .14s;
}
.ed-pill[aria-checked="true"] { background: var(--accent) }
.ed-pill[aria-checked="true"] > span { margin-left: auto }
.ed-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

.ed-sec-corpo { padding: 0 18px 18px }

/* ─────────────── cartões de oferta por quantidade ─────────────── */
/* O cartão mostra a CONTA, não só o desconto: "2 × $149.900 − 40%" com o total ao
   lado. Antes o lojista digitava 40 e só descobria o preço final abrindo a prévia. */
.ed-oferta {
  border: 1px solid var(--line3); border-radius: 9px; padding: 13px 14px;
  cursor: pointer; transition: border-color .14s, background .14s;
}
.ed-oferta + .ed-oferta { margin-top: 9px }
.ed-oferta:hover { border-color: var(--line4) }
.ed-oferta.on { border-color: var(--t1); background: var(--well) }
.ed-oferta .linha { display: flex; align-items: center; gap: 11px }
.ed-oferta .meio { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap }
.ed-oferta .entrada { padding: 7px 9px; font-size: 12.5px; text-align: center }
.ed-oferta .qtd { flex: none; width: 54px }
.ed-oferta .pct { flex: none; width: 62px }
.ed-oferta .rot { font-size: 12.5px; color: var(--t3) }
.ed-oferta .conta {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line3);
}
/* O total virou campo: o lojista digita o numero do anuncio ("2 por 199.900")
   em vez de procurar a porcentagem que chega la. Continua com cara de valor, e
   nao de formulario — e o que ele le primeiro no cartao. */
.ed-oferta .conta .tot {
  font-size: 14px; font-weight: 700; width: 108px; flex: none;
  padding: 5px 8px; text-align: left;
}
.ed-oferta .conta .rot { font-size: 12.5px; color: var(--t3) }
.ed-oferta .conta .antes { font-size: 12px; color: var(--t4); text-decoration: line-through }
.ed-oferta .conta .expl { font-size: 11.5px; color: var(--t3) }

.ed-radio {
  flex: none; width: 16px; height: 16px; border-radius: 50%; display: grid;
  place-items: center; border: 1px solid var(--line4); background: var(--bg);
  transition: .14s;
}
.ed-oferta.on .ed-radio { border-color: var(--t1); background: var(--t1) }
.ed-radio > i { width: 6px; height: 6px; border-radius: 50%; background: var(--bg); display: none }
.ed-oferta.on .ed-radio > i { display: block }

.ed-selo-linha {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 12px;
}
.ed-selo-linha .entrada { flex: none; width: 150px; padding: 7px 10px; font-size: 12.5px }

/* Variação sem identificador: é o que trava a instalação, e o cartão diz isso no
   lugar onde o número falta, em vez de só na lista de pendências lá em cima. */
.vcard.faltando { border-color: var(--warn-line) }
.vcard.faltando .vid { border-color: var(--warn-line); color: var(--warn) }
.vfalta { font-size: 11.5px; color: var(--warn); line-height: 1.55; margin-top: 7px }

/* grade de três, para preço / preço antes / identificador caberem numa linha */
.ed-tres { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px }
@media (max-width: 900px) { .ed-tres { grid-template-columns: 1fr } }

.rot-secao { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; color: var(--t4) }

/* o produto que o resgate herda do upsell: mostrado, não pedido de novo */
.ed-herdado {
  border: 1px solid var(--line3); border-radius: 9px; padding: 12px 14px; margin-top: 12px;
}
.ed-herdado-linha { display: flex; align-items: center; gap: 11px }
.ed-herdado-linha b { display: block; font-size: 13px; font-weight: 600 }
.ed-herdado-linha span { display: block; font-size: 11.5px; color: var(--t3); margin-top: 3px }

/* Oferta ligada que não consegue virar pedido. Âmbar e não vermelho: nada quebrou,
   ela só não vai aparecer — e o lojista precisa ver isso sem abrir a seção. */
.ed-sec-txt .r.ruim { color: var(--warn) }

/* Interruptor de recurso que o plano não cobre: apagado e sem cursor de clique.
   Esconder a seção inteira seria pior — o lojista precisa SABER que o recurso
   existe, senão ele nunca vira motivo para trocar de plano. */
.ed-pill.bloqueado { opacity: .38; cursor: not-allowed }
.ed-pill.bloqueado:hover { opacity: .38 }

/* ═════════════ segunda escolha: opções e grade de identificadores ═════════════ */
.ed-chave { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; color: var(--t2) }
.ed-chave input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer }

.eixo2-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; min-height: 30px; align-items: center }
.eixo2-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px 5px 11px;
  border-radius: 7px; background: var(--tile); border: 1px solid var(--line3);
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12.5px; color: var(--t1);
}
.eixo2-chip button {
  border: 0; background: none; padding: 0; width: 16px; height: 16px; border-radius: 4px;
  color: var(--t4); cursor: pointer; font-size: 15px; line-height: 1; display: grid; place-items: center;
}
.eixo2-chip button:hover { background: var(--danger-weak); color: var(--danger-t) }
.eixo2-vazio { font-size: 12.5px; color: var(--t4) }

/* A grade rola sozinha na horizontal: com dez números ela passa da coluna do
   editor, e a página inteira andando de lado leva o resto do formulário junto. */
.eixo2-grade-cx { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--card) }
table.eixo2-grade { border-collapse: collapse; width: 100%; font-size: 12.5px }
table.eixo2-grade th, table.eixo2-grade td { border-bottom: 1px solid var(--line2); padding: 0 }
table.eixo2-grade thead th {
  position: sticky; top: 0; background: var(--well); color: var(--t3);
  font-weight: 600; font-size: 11.5px; padding: 9px 8px; white-space: nowrap;
  font-family: 'Geist Mono', ui-monospace, monospace;
}
table.eixo2-grade th.canto { background: var(--well) }
table.eixo2-grade th.cor {
  position: sticky; left: 0; z-index: 2; background: var(--card); text-align: left;
  font-weight: 600; color: var(--t1); padding: 8px 12px; white-space: nowrap;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis;
  border-right: 1px solid var(--line2);
}
table.eixo2-grade input.cel {
  width: 92px; border: 0; border-radius: 0; background: transparent;
  padding: 10px 8px; text-align: center; font-size: 12.5px;
}
table.eixo2-grade input.cel:focus {
  box-shadow: inset 0 0 0 2px var(--accent-line); background: var(--accent-weak);
}
table.eixo2-grade input.cel::placeholder { color: var(--t5) }
/* Cor que não vende NENHUM tamanho não vai para a página — some do formulário do
   comprador. A linha marcada é o único aviso de que ela existe e não vende. */
table.eixo2-grade tr.muda th.cor { color: var(--warn) }
table.eixo2-grade tr.muda th.cor::after { content: ' · não vende'; font-weight: 500; opacity: .8 }
.eixo2-aviso { padding: 18px; font-size: 12.5px; color: var(--t4) }

/* Some o esporte do input number: seta em célula de grade é ruído e atrapalha o
   clique na célula ao lado. */
table.eixo2-grade input[type=number]::-webkit-outer-spin-button,
table.eixo2-grade input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
table.eixo2-grade input[type=number] { -moz-appearance: textfield; appearance: textfield }

/* A alça do cartão de variação. Alinhada com o nome, e não com o topo do cartão:
   o cartão cresce quando tem URL de foto embaixo, e a alça descia junto. */
.vcard .arrasta {
  flex: none; color: var(--t5); cursor: grab; touch-action: none;
  margin-top: 15px; transition: color .12s;
}
.vcard:hover .arrasta { color: var(--t3) }
.vcard .arrasta:active { cursor: grabbing }
.vcard.arrastando { opacity: .45 }

/* ── colar a lista do Mastershop ── */
.colar-cx {
  border: 1px dashed var(--line3); border-radius: 10px; padding: 13px 14px;
  background: var(--tile2); margin-bottom: 12px;
}
.colar-topo { margin-bottom: 9px }
.colar-topo b { display: block; font-size: 12.5px; font-weight: 600; color: var(--t1) }
.colar-topo span { display: block; font-size: 11.5px; color: var(--t4); line-height: 1.55; margin-top: 3px }
#grade-colar { width: 100%; resize: vertical; font-size: 11.5px; line-height: 1.6; padding: 9px 11px }
.colar-pe { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 9px }
.colar-pe .btn { padding: 8px 14px; font-size: 12.5px }
#grade-colar-res { font-size: 11.5px; line-height: 1.55 }
#grade-colar-res.bom { color: var(--accent) }
#grade-colar-res.ruim { color: var(--warn) }

/* ─────────────── campos que o comprador nunca vê ─────────────── */
/*
 * Custo e frete moram na mesma aba que preço e nome do produto — e são de outra
 * natureza: tudo em volta deles vai para a página de venda, e eles não.
 *
 * A borda tracejada e o cadeado existem só para dizer isso. Sem alguma marca
 * visual, a única coisa separando "o que o cliente lê" de "quanto eu pago pelo
 * produto" seria o rótulo do campo — e é assim que alguém publica o próprio
 * custo achando que está preenchendo um preço.
 */
.ed-privado {
  border: 1px dashed var(--line4); border-radius: 11px;
  padding: 15px 15px 2px; background: var(--tile2); margin: 2px 0 18px;
}
.ed-privado-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; color: var(--t4) }
.ed-privado-cab span { font-size: 10.5px; font-weight: 600; letter-spacing: .09em }
.ed-privado .ed-dica { margin-bottom: 13px }