/* Carrinho da HostHunter: fundo cinza, itens em caixas brancas.
   O amarelo do botao esta em variavel: trocar aqui muda em todo lugar. */

.woocommerce-cart{--hh-cinza:#f2f3f5;--hh-borda:#e6e8eb;--hh-raio:15px;--hh-amarelo:#ffc107;--hh-amarelo-escuro:#e0a800;--hh-roxo:#6d4aff;--hh-amarelo-claro:#fff3cd;--hh-amarelo-texto:#8a6100;--hh-verde:#4ade80;--hh-escuro:#111827;--hh-texto:#1d1d1f;--hh-suave:#6b7280}

/* fundo cinza da pagina */
.woocommerce-cart #main,.woocommerce-cart .page-wrapper,.woocommerce-cart #content{background:var(--hh-cinza)}

.hh-cart-wrap{padding:1.5rem 0 3rem}
/* Titulo fora da grade: dentro da coluna esquerda ele empurrava so os boxes
   dela para baixo, e o resumo da direita comecava mais alto. */
.hh-cart{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:1.5rem;align-items:start}
/* Titulos escopados sob .hh-cart de proposito. O Elementor Kit define
   ".elementor-kit-147 h3{font-size:36px;color:var(--e-global-color-primary)}",
   especificidade (0,1,1), que ganha de uma classe sozinha. Com o ancestral a
   regra vira (0,2,0) e vence sem precisar de !important. */
.hh-cart-wrap .hh-cart__titulo{font-size:1.35rem;font-weight:600;margin:0 0 1rem;color:var(--hh-texto);line-height:1.3}
.hh-cart__coluna{min-width:0}
.hh-cart__coluna--resumo{position:sticky;top:1.5rem}

/* caixas brancas */
.hh-box{background:#fff;border:1px solid var(--hh-borda);border-radius:var(--hh-raio);padding:1.35rem 1.5rem;margin:0 0 1rem;color:var(--hh-texto)}
.hh-cart .hh-box__titulo{font-size:1rem;font-weight:600;margin:0 0 .35rem;color:var(--hh-texto);line-height:1.4}
.hh-box__ajuda{margin:0 0 .9rem;font-size:.875rem;line-height:1.5;color:var(--hh-suave)}

/* item */
.hh-item__topo{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.hh-cart .hh-item__nome{font-size:1.05rem;font-weight:600;margin:0;color:var(--hh-texto);line-height:1.4}
.hh-item__cat{margin:.15rem 0 0;font-size:.85rem;color:var(--hh-suave)}
.hh-item__cat:empty{display:none}
.hh-item__remover{font-size:1.5rem;line-height:1;color:var(--hh-suave);text-decoration:none;flex:none}
.hh-item__remover:hover{color:var(--hh-texto)}

.hh-item__linha{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-top:1.1rem}
.hh-item__periodo{display:grid;gap:.35rem;min-width:190px}
.hh-label{font-size:.85rem;font-weight:500;color:var(--hh-suave);margin:0}

/* dropdown proprio: <option> nao aceita marcacao, e o layout pede um selo
   dentro da lista. Papeis e teclado equivalem ao <select> nativo. */
.hh-drop{position:relative}
/* Escopado sob .hh-cart e com todos os estados escritos: o tema estiliza
   <button> como botao de acao - caixa alta, negrito e fundo escuro no foco -
   e sem declarar cada estado o seletor herdava aquilo ao ser clicado. */
.hh-cart .hh-drop__botao,
.hh-cart .hh-drop__botao:hover,
.hh-cart .hh-drop__botao:focus,
.hh-cart .hh-drop__botao:active{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  width:100%;padding:.7rem .85rem;border:1px solid var(--hh-borda);border-radius:.55rem;background:#fff;
  color:var(--hh-texto);font-size:.95rem;font-weight:500;line-height:1.2;letter-spacing:normal;
  text-transform:none;text-align:left;cursor:pointer;margin:0;box-shadow:none;min-height:0}
.hh-cart .hh-drop__botao:hover{border-color:#c9ccd1}
.hh-cart .hh-drop__botao[aria-expanded="true"]{border-color:var(--hh-roxo);box-shadow:0 0 0 3px rgba(109,74,255,.15)}
.hh-cart .hh-drop__botao:disabled{opacity:.6;cursor:default}
.hh-drop__seta{flex:none;width:.6rem;height:.6rem;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);opacity:.6;transition:transform .15s}
.hh-drop__botao[aria-expanded="true"] .hh-drop__seta{transform:rotate(-135deg) translate(-2px,-2px)}

.hh-drop__lista{position:absolute;z-index:20;left:0;right:0;top:calc(100% + .35rem);margin:0;padding:.35rem;
  list-style:none;background:#fff;border:1px solid var(--hh-borda);border-radius:.6rem;
  box-shadow:0 12px 28px rgba(15,23,42,.14);max-height:16rem;overflow:auto}
.hh-drop__lista:focus{outline:none}
.hh-drop__lista{min-width:15rem}
.hh-cart .hh-drop__opcao{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.6rem .7rem;margin:0;border-radius:.4rem;font-size:.95rem;font-weight:400;line-height:1.3;
  text-transform:none;cursor:pointer;list-style:none}
.hh-drop__rotulo{white-space:nowrap}
.hh-drop__opcao:hover,.hh-drop__opcao--foco{background:#f3f4f6}
.hh-drop__opcao[aria-selected="true"]{font-weight:600}
.hh-drop__selo{flex:none;padding:.15em .55em;border-radius:.3em;font-size:.72rem;font-weight:600;
  background:var(--hh-amarelo-claro);color:var(--hh-amarelo-texto)}

/* banner de oferta, no lugar da linha de renovacao */
.hh-item__oferta:empty{display:none}
/* Padding simetrico para o texto e o botao ficarem no meio do banner. O
   mascote sai do padding inferior por margem negativa propria, entao encosta
   na base sem desalinhar os vizinhos. overflow hidden apara o que passar. */
.hh-upsell{display:flex;align-items:center;gap:1rem;margin-top:1.1rem;padding:.85rem 1rem;
  border-radius:.7rem;background:var(--hh-escuro);color:#fff;overflow:hidden}
/* Colado na base. A margem negativa e so embaixo e o item usa align-self, entao
   ela avanca sobre o padding inferior sem mexer no eixo de centralizacao dos
   vizinhos - foi misturar as duas coisas que antes desalinhou o botao. */
.hh-upsell__mascote{flex:none;align-self:flex-end;display:block;width:auto;height:88px;
  margin:0 0 -.85rem;object-fit:contain}
.hh-upsell__texto{flex:1;align-self:center;margin:0;font-size:.875rem;line-height:1.45;color:#fff}
.hh-upsell__texto strong{font-weight:700}
/* Todos os estados declarados, escopado sob .hh-cart: o tema estiliza <button>
   como botao de acao e impunha caixa alta. */
.hh-cart .hh-upsell__botao,
.hh-cart .hh-upsell__botao:hover,
.hh-cart .hh-upsell__botao:focus,
.hh-cart .hh-upsell__botao:active{flex:none;align-self:center;margin:0;padding:.6rem 1.15rem;
  border:1px solid rgba(255,255,255,.5);border-radius:.5rem;background:transparent;color:#fff;
  font-size:.875rem;font-weight:600;line-height:1.3;letter-spacing:normal;text-transform:none;
  cursor:pointer;white-space:nowrap;box-shadow:none;min-height:0}
.hh-cart .hh-upsell__botao:hover{background:rgba(255,255,255,.12)}
.hh-cart .hh-upsell__botao:disabled{opacity:.6;cursor:default}

.hh-item__preco{display:flex;flex-direction:column;align-items:flex-end;gap:.1rem;margin-left:auto}

.hh-cart-preco{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem}
.hh-cart-economia{display:inline-block;margin-bottom:.3rem;padding:.25em .65em;border-radius:.35em;
  font-size:.7rem;font-weight:700;letter-spacing:.02em;background:#e7f6ec;color:#1c8b4f}
.hh-cart-preco__valor{font-size:1.45rem;font-weight:700;white-space:nowrap;color:var(--hh-texto)}
.hh-cart-preco__valor small{font-size:.55em;font-weight:400;color:var(--hh-suave)}
.hh-cart-preco__de{font-size:.9rem;color:var(--hh-suave);white-space:nowrap;text-decoration:line-through}

.hh-cart-item--carregando{opacity:.5;pointer-events:none;transition:opacity .12s}
.hh-oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* resumo do pedido */
.hh-box--resumo{padding:1.35rem 1.5rem}
.hh-cart .hh-resumo__titulo{font-size:1.1rem;font-weight:600;margin:0 0 1rem;color:var(--hh-texto);line-height:1.4}
.hh-resumo__plano{margin:0 0 .75rem;font-weight:600;font-size:.95rem}
.hh-resumo__linha{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin:0 0 .6rem;font-size:.9rem;color:var(--hh-suave)}
.hh-resumo__valor{text-align:right;white-space:nowrap}
.hh-resumo__valor del{margin-right:.4em;opacity:.6;font-size:.85em}
.hh-resumo__valor strong{color:var(--hh-texto);font-weight:600}
.hh-resumo__total{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-top:1rem;padding-top:1rem;border-top:1px solid var(--hh-borda);font-size:1rem}
.hh-resumo__total .hh-resumo__rotulo{font-weight:700;color:var(--hh-texto)}
.hh-resumo__total-valor{font-size:1.2rem;font-weight:700}
.hh-resumo__total-valor .amount{font-size:inherit}

.hh-botao-continuar{display:block;width:100%;margin-top:1.15rem;padding:.9rem 1rem;border-radius:.6rem;
  background:var(--hh-amarelo);color:#1d1d1f!important;font-weight:700;font-size:1rem;text-align:center;
  text-decoration:none;border:0;transition:background .15s}
.hh-botao-continuar:hover{background:var(--hh-amarelo-escuro);color:#1d1d1f!important}

@media (max-width:849px){
  .hh-cart-wrap{padding:1rem 0 2rem}
  .hh-cart{grid-template-columns:1fr}
  .hh-cart__coluna--resumo{position:static}
  .hh-item__linha{align-items:flex-start}
  .hh-item__preco{align-items:flex-start;margin-left:0}
  .hh-upsell{flex-wrap:wrap}
  .hh-upsell__botao{width:100%}
}

/* escolha do sistema operacional */
.hh-box--so .hh-box__titulo{display:flex;align-items:center;gap:.6rem}
.hh-so__opcional{padding:.15em .55em;border-radius:.3em;font-size:.7rem;font-weight:600;
  background:var(--hh-amarelo-claro);color:var(--hh-amarelo-texto)}
.hh-so{display:grid;gap:.9rem}
.hh-so__busca{width:100%;padding:.7rem .85rem;border:1px solid var(--hh-borda);border-radius:.55rem;
  background:#fff;color:var(--hh-texto);font-size:.95rem;margin:0}
.hh-so__busca:focus{outline:none;border-color:var(--hh-amarelo);box-shadow:0 0 0 3px rgba(255,193,7,.25)}
.hh-so__abas{display:flex;flex-wrap:wrap;gap:.4rem}
.hh-so__abas[hidden]{display:none}
.hh-cart .hh-so__aba,.hh-cart .hh-so__aba:hover,.hh-cart .hh-so__aba:focus{padding:.45rem .9rem;border:1px solid var(--hh-borda);
  border-radius:999px;background:#fff;color:var(--hh-suave);font-size:.85rem;font-weight:600;
  text-transform:none;letter-spacing:normal;cursor:pointer;margin:0;min-height:0;box-shadow:none;line-height:1.3}
.hh-cart .hh-so__aba.is-atual{background:var(--hh-escuro);border-color:var(--hh-escuro);color:#fff}
.hh-so__grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.hh-so__grade[hidden]{display:none}
.hh-cart .hh-so__item,.hh-cart .hh-so__item:hover,.hh-cart .hh-so__item:focus{display:flex;align-items:center;gap:.65rem;
  width:100%;padding:.65rem .8rem;border:1px solid var(--hh-borda);border-radius:.55rem;background:#fff;
  color:var(--hh-texto);font-size:.9rem;font-weight:500;text-align:left;text-transform:none;
  letter-spacing:normal;cursor:pointer;margin:0;min-height:0;box-shadow:none;line-height:1.3}
.hh-cart .hh-so__item:hover{border-color:#c9ccd1;background:#fafafa}
.hh-cart .hh-so__item.is-escolhido{border-color:var(--hh-amarelo);box-shadow:0 0 0 2px rgba(255,193,7,.35)}
.hh-so__item[hidden]{display:none}
.hh-so__logo{flex:none;width:22px;height:22px;object-fit:contain}
.hh-so__logo--vazio{border-radius:.3em;background:#eef0f2}
.hh-so__nome{display:grid;line-height:1.25}
.hh-so__nome small{font-size:.78em;font-weight:400;color:var(--hh-suave)}
.hh-so__estrela{margin-left:auto;color:var(--hh-amarelo-texto);font-size:.8rem}
.hh-so__vazio{margin:0;font-size:.875rem;color:var(--hh-suave)}
.hh-so__vazio[hidden]{display:none}
@media (max-width:640px){.hh-so__grade{grid-template-columns:1fr}}