/* ---------- Carrinho e favoritos ----------
   Mesmas regras do style.css: espaços só na escala (4, 8, 12, 16, 24, 32, 48, 64),
   cantos de 12px (--radius) ou pílula, sombra suave, coral só no botão de ação. */

.carrinho-wrap{max-width:900px; margin:0 auto; padding:32px 24px 64px;}
.carrinho-wrap h1{font-size:clamp(26px, 2.6vw, 34px); color:var(--navy); margin-bottom:8px;}
.explicacao{font-size:14px; opacity:0.7; margin-bottom:24px; line-height:1.6;}

.carregando{padding:48px; text-align:center; opacity:0.55; font-size:14px;}

/* ---------- Vazio ---------- */
.vazio-caixa{
  background:var(--white); box-shadow:var(--sombra); border-radius:var(--radius);
  padding:48px 32px; text-align:center;
}
.vazio-caixa .icone{font-size:44px; margin-bottom:16px; opacity:0.35;}
.vazio-caixa h2{font-size:20px; color:var(--navy); margin-bottom:8px;}
.vazio-caixa p{font-size:14px; opacity:0.65; margin-bottom:24px;}

/* ---------- Grupo de loja ---------- */
.grupo-loja{
  background:var(--white); box-shadow:var(--sombra);
  border-radius:var(--radius); margin-bottom:16px; overflow:hidden;
}
.grupo-loja.enviado{box-shadow:var(--sombra), inset 0 0 0 1.5px var(--teal);}

.grupo-topo{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px; background:var(--sand); gap:12px; flex-wrap:wrap;
}
.loja-info{display:flex; align-items:center; gap:12px;}
.loja-inicial{
  width:32px; height:32px; border-radius:50%; background:var(--navy);
  color:var(--sand); display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-weight:600; font-size:13px; flex-shrink:0;
}
.loja-nome{font-family:'Fraunces',serif; font-size:16px; color:var(--navy); font-weight:600; letter-spacing:-0.01em;}
.loja-sub{font-size:12px; opacity:0.6;}
.selo-enviado{
  background:var(--teal); color:var(--white); font-size:10px; font-weight:600;
  padding:4px 12px; border-radius:999px; text-transform:uppercase; letter-spacing:0.04em;
}

/* ---------- Item ---------- */
.item-linha{
  display:flex; gap:16px; padding:16px;
  border-top:1px solid var(--line); align-items:center;
}
.item-foto{
  width:64px; height:64px; border-radius:var(--radius); background:var(--white);
  box-shadow:inset 0 0 0 1px var(--line);
  display:flex; align-items:center; justify-content:center; font-size:26px;
  overflow:hidden; flex-shrink:0;
}
.item-foto img{width:100%; height:100%; object-fit:contain; padding:4px;}
.item-dados{flex:1; min-width:0;}
.item-nome{font-size:14px; font-weight:400; margin-bottom:4px; line-height:1.4;}
.item-nome a{color:var(--ink);}
.item-nome a:hover{text-decoration:underline; text-underline-offset:4px;}
.item-variacao{font-size:12px; opacity:0.65;}
.item-preco{font-size:13px; opacity:0.7; margin-top:4px; font-variant-numeric:tabular-nums;}
.item-aviso{font-size:12px; color:var(--navy); font-weight:600; margin-top:4px;}

.item-controles{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.qtd-mini{display:flex; align-items:center; box-shadow:inset 0 0 0 1px var(--line); border-radius:999px; overflow:hidden;}
.qtd-mini button{
  background:var(--sand); border:none; width:32px; height:32px;
  font-size:16px; cursor:pointer; color:var(--navy); line-height:1;
}
.qtd-mini button:hover{background:var(--sand-deep);}
.qtd-mini span{
  width:32px; text-align:center; font-variant-numeric:tabular-nums;
  font-size:14px; font-weight:600; color:var(--navy);
}
.item-subtotal{
  font-variant-numeric:tabular-nums; font-weight:600; font-size:15px;
  color:var(--navy); min-width:84px; text-align:right;
}
.btn-remover{
  background:none; border:none; font-size:18px; cursor:pointer;
  opacity:0.35; line-height:1; padding:4px; color:var(--navy);
}
.btn-remover:hover{opacity:1;}

/* ---------- Rodapé do grupo ---------- */
.grupo-rodape{
  padding:16px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.grupo-total{font-size:14px;}
.grupo-total strong{font-variant-numeric:tabular-nums; font-size:18px; color:var(--navy);}
/* "Enviar pedido" é o botão de ação da página: coral, com a altura padrão */
.btn-enviar-loja{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--altura-botao); background:var(--coral); color:var(--white); border:none; padding:0 24px;
  border-radius:999px; font-weight:600; font-size:15px; cursor:pointer;
  text-decoration:none; font-family:inherit;
}
.btn-enviar-loja:hover{box-shadow:inset 0 0 0 100vmax rgba(8,44,56,0.1);}
.btn-enviar-loja.reenviar{background:transparent; color:var(--navy); box-shadow:inset 0 0 0 1.5px var(--navy);}
.btn-enviar-loja.reenviar:hover{background:var(--navy); color:var(--sand);}
.sem-zap{font-size:12px; color:var(--navy); font-weight:600;}

/* ---------- Resumo ---------- */
.resumo-geral{
  background:var(--navy); color:var(--sand); border-radius:var(--radius);
  padding:24px; margin-top:24px;
}
.resumo-linha{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:14px;}
.resumo-linha.total{
  margin:12px 0 0; padding-top:12px; border-top:1px solid rgba(241,231,208,0.2);
  font-size:15px;
}
.resumo-linha.total strong{font-variant-numeric:tabular-nums; font-size:22px;}
.resumo-nota{font-size:12px; opacity:0.72; margin-top:12px; line-height:1.6;}

.acoes-carrinho{display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; align-items:center;}
.btn-continuar{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--altura-botao); padding:0 24px;
  border:1.5px solid var(--navy); color:var(--navy); background:transparent;
  border-radius:999px; font-size:14px; font-weight:600;
  text-decoration:none; cursor:pointer; font-family:inherit;
}
.btn-continuar:hover{background:var(--navy); color:var(--sand);}
.btn-continuar:disabled{opacity:0.5; cursor:not-allowed; background:transparent; color:var(--navy);}
.btn-limpar{
  background:none; border:none; color:var(--navy); opacity:0.7; font-size:13px;
  cursor:pointer; text-decoration:underline; text-underline-offset:4px; font-family:inherit; padding:8px 0;
}
.btn-limpar:hover{opacity:1;}

/* ---------- Avisos de itens removidos ---------- */
.removidos{
  background:var(--white); box-shadow:var(--sombra), inset 4px 0 0 var(--navy); color:var(--navy);
  border-radius:var(--radius); padding:16px 16px 16px 24px; margin-bottom:16px; font-size:13px;
}
.removidos strong{display:block; margin-bottom:8px;}
.removidos ul{margin:0; padding-left:16px;}
.removidos li{margin-bottom:4px;}

/* ---------- Aviso flutuante ---------- */
#aviso-flutuante{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(16px);
  background:var(--navy); color:var(--sand); padding:12px 24px;
  border-radius:999px; font-size:14px; z-index:500;
  box-shadow:var(--sombra-alta);
  display:flex; align-items:center; gap:16px;
  opacity:0; pointer-events:none; transition:opacity 200ms, transform 200ms;
}
#aviso-flutuante.visivel{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;}
#aviso-flutuante a{color:var(--sand); font-weight:600; white-space:nowrap; text-decoration:underline; text-underline-offset:4px;}

/* ---------- Contadores do topo: ver .cart-count, .fav-count no style.css ---------- */
.header-actions .item.ativo{opacity:1; color:var(--navy); font-weight:600;}

/* ---------- Botão de favoritar (coração) ---------- */
.btn-favoritar{
  background:var(--white); border:1.5px solid var(--line); color:var(--navy);
  width:var(--altura-botao); height:var(--altura-botao); border-radius:50%; cursor:pointer;
  font-size:20px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.btn-favoritar:hover{border-color:var(--navy);}
.btn-favoritar.ativo{border-color:var(--coral); color:var(--coral);}
.btn-favoritar svg{width:22px; height:22px;}
.btn-favoritar.ativo svg, .btn-coracao.ativo svg{fill:currentColor;}

/* Coração dos cartões de produto: no canto da foto. Contorno = não favoritado; coral preenchido = favoritado */
.btn-coracao{
  position:absolute; top:8px; right:8px; z-index:2;
  width:32px; height:32px; border-radius:50%; border:none; padding:0;
  background:rgba(255,255,255,0.92); box-shadow:var(--sombra); color:var(--navy);
  display:grid; place-items:center; cursor:pointer;
}
.btn-coracao::after{content:''; position:absolute; inset:-6px;}   /* área de toque de 44px */
.btn-coracao:hover{box-shadow:var(--sombra-alta);}
.btn-coracao.ativo{color:var(--coral);}
.btn-coracao svg{width:18px; height:18px;}

/* ---------- Cartão de favorito ---------- */
.card h3 a{color:inherit;}
.fav-acao{margin-top:12px;}
.fav-acao .btn-continuar{width:100%; min-height:40px; padding:0 12px; font-size:13px;}

@media (max-width:700px){
  .item-linha{flex-wrap:wrap;}
  .item-controles{width:100%; justify-content:space-between; padding-left:calc(64px + 16px);}
  .grupo-rodape{flex-direction:column; align-items:stretch;}
  .btn-enviar-loja{width:100%;}
}