.hh-vps-options{margin:0 0 1.25rem;display:grid;gap:1rem}
.hh-vps-legend{display:block;font-weight:600;margin-bottom:.4rem}
.hh-vps-field{display:grid;gap:.4rem}
.hh-vps-choice{display:flex;align-items:center;gap:.6rem;padding:.65rem .85rem;border:1px solid currentColor;border-radius:.4rem;cursor:pointer;opacity:.55;transition:opacity .15s}
.hh-vps-choice:has(input:checked){opacity:1;border-width:2px;padding:calc(.65rem - 1px) calc(.85rem - 1px)}
.hh-vps-choice__price{margin-left:auto;font-weight:600;white-space:nowrap}
.hh-vps-choice__price small{font-weight:400;opacity:.7}
.hh-vps-summary:empty{display:none}
.hh-vps-summary{margin:0;font-size:.95em;opacity:.85}
.hh-vps-from small{opacity:.7}
.hh-vps-badge-desconto,.hh-vps-badge-economia{display:inline-block;padding:.25em .7em;border-radius:999px;font-size:.8em;font-weight:600;line-height:1.4;white-space:nowrap}
/* Preco "de": bloco proprio acima do preco em destaque.
   O font-size vai no <del> E na span interna. O navegador desenha o
   line-through na metrica do ELEMENTO: com tamanhos diferentes entre os dois,
   o traco sai posicionado para um texto maior do que o visivel. Com os dois
   iguais, o line-through nativo cai certo e dispensa traco desenhado a mao.
   A cor cinza vem com !important porque o widget do Elementor pinta o bloco de
   preco de branco com especificidade maior. */
.hh-vps-preco del{display:block;font-size:16px;font-weight:400;color:#838383!important;opacity:1;text-decoration:line-through;margin-bottom:15px}
.hh-vps-preco del .woocommerce-Price-amount,.hh-vps-preco del bdi,.hh-vps-preco del .woocommerce-Price-currencySymbol{font-size:inherit;color:inherit!important}
.hh-vps-preco ins{text-decoration:none}
.hh-vps-por-mes{font-weight:400;opacity:.7}
/* wc_format_sale_price() injeta texto para leitor de tela. O WooCommerce
   esconde .screen-reader-text no CSS dele, mas paginas montadas no Elementor
   nem sempre carregam esse CSS - sem esta regra o cliente leria "O preco
   original era: ..." na tela. */
.hh-vps-preco .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}

/* Selo de economia no canto superior direito do card.
   O widget de preco do Elementor e position:relative e seria a ancora do selo,
   prendendo ele no canto do preco em vez do card. Neutralizado aqui: os unicos
   elementos absolutos dentro dele sao os textos de leitor de tela, que ja sao
   invisiveis, entao a troca nao muda nada visualmente. */
.e-loop-item .precoproduto{position:static}
.hh-vps-selo-economia{display:inline-flex;align-items:center;padding:7px 14px;border-radius:10px;
  background:var(--hh-verde-selo,#86efac);color:var(--hh-verde-selo-texto,#064e3b);
  font-size:12px;font-weight:700;line-height:1.3;white-space:nowrap}
/* 20px do topo e da lateral: mesmos eixos do selo do plano no canto oposto,
   que fica a 20px, e do padding lateral do proprio card. Com o padding acima a
   altura fecha em 30px, contra os 31px daquele selo. */
.e-loop-item .hh-vps-selo-economia{position:absolute;top:20px;right:20px;z-index:2}