/* ==========================================================================
   Destaque do FRETE GRÁTIS — carrinho e checkout
   Arquivo proprio de proposito: emendar no fim de loja.css/checkout.css ja
   deu confusao antes. Registrado em lib/layout.js e lib/layout-checkout.js.
   ========================================================================== */

.faixa-frete {
  background: linear-gradient(135deg, #eaf7ef 0%, #f6fbf8 100%);
  border: 1px solid #b9e3c8;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.ff-topo { display: flex; align-items: center; gap: 10px; color: #0d7a3b; }
.ff-topo svg { flex: none; }
.ff-topo p { margin: 0; font-size: 13.5px; line-height: 1.45; color: #1c4a30; }
.ff-topo strong { color: #00a441; font-weight: 800; letter-spacing: .2px; }

.ff-trilho {
  position: relative;
  height: 7px;
  margin-top: 11px;
  background: #d9ece1;
  border-radius: 99px;
  overflow: hidden;
}
.ff-trilho span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #00a441, #35c96e);
  transition: width .45s cubic-bezier(.4, 0, .2, 1);
}

/* alcancou o valor: a faixa comemora */
.faixa-frete.conquistado {
  background: linear-gradient(135deg, #e3f7ea 0%, #eefaf2 100%);
  border-color: #7ed4a0;
}
.faixa-frete.conquistado .ff-trilho span { background: #00a441; }
.faixa-frete.conquistado .ff-topo { color: #00812f; }

/* no resumo lateral do checkout a faixa e mais compacta */
.op-resumo .faixa-frete { padding: 12px 13px; margin: 12px 0 14px; }
.op-resumo .ff-topo p { font-size: 12.5px; }

@media (max-width: 700px) {
  .faixa-frete { padding: 12px 13px; }
  .ff-topo p { font-size: 12.5px; }
}