/*
 * ATT-Sugestões: "Leve junto" e "Falta para o frete grátis".
 *
 * Usa as variáveis do tema americatt quando existirem (--marca, --tinta...), com valor de reserva para o caso
 * de o tema mudar. Nada aqui depende de biblioteca.
 */

.att-sug, .att-sug-modal {
  --sug-marca: var(--marca, #ed036e);
  --sug-marca-botao: var(--marca-botao, #d6036a);
  --sug-marca-forte: var(--marca-forte, #c40258);
  --sug-tinta: var(--tinta, #16161d);
  --sug-tinta-2: var(--tinta-2, #5b5e6b);
  --sug-linha: var(--linha, #e6e6ec);
  --sug-contorno: var(--contorno, #d4d4dd);
  --sug-superficie: var(--superficie, #f4f4f7);
  --sug-imediato: var(--imediato, #2f8a12);
  --sug-imediato-fundo: var(--imediato-fundo, #eaf6e3);
  margin: 18px 0;
  font-family: inherit;
}
.att-sug:empty { display: none; margin: 0; }

.att-sug-tit { margin: 0 0 4px; color: var(--sug-tinta); font-size: 16px; font-weight: 700; line-height: 1.3; }
.att-sug-sub { margin: 0 0 10px; color: var(--sug-tinta-2); font-size: 13px; }
.att-sug-tit .amount, .att-sug-tit strong { color: var(--sug-marca-forte); }

/* Frete grátis conquistado */
.att-sug-ok { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--sug-imediato-fundo); color: var(--sug-imediato); font-size: 14px; }
.att-sug-ok-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sug-imediato); color: #fff; font-size: 13px; font-weight: 700; }

/* Barra de progresso */
.att-sug-barra { height: 8px; margin: 0 0 12px; border-radius: 999px; background: var(--sug-linha); overflow: hidden; }
.att-sug-barra > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--sug-marca), var(--sug-marca-forte)); transition: width .3s ease-out; }

/* A caixa que rola de lado, com as setas por cima */
.att-sug-rolagem { position: relative; }
.att-sug-seta { position: absolute; top: calc(50% - 10px); z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; padding: 0 0 2px; border: 1px solid var(--sug-linha); border-radius: 50%; background: #fff; color: var(--sug-tinta); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(22, 22, 29, .14); transform: translateY(-50%); }
.att-sug-seta:hover { border-color: var(--sug-marca); color: var(--sug-marca-forte); }
.att-sug-seta[hidden] { display: none; }
.att-sug-seta-esq { left: -8px; }
.att-sug-seta-dir { right: -8px; }
@media (hover: none) { .att-sug-seta { display: none !important; } }

/* O trilho de itens: rola de lado no celular, vira grade no computador */
.att-sug-trilho { display: flex; gap: 10px; margin: 0; padding: 0 2px 4px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.att-sug-trilho::-webkit-scrollbar { height: 6px; }
.att-sug-trilho::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--sug-contorno); }
.att-sug-item { display: flex; flex-direction: column; flex: 0 0 158px; scroll-snap-align: start; padding: 10px; border: 1px solid var(--sug-linha); border-radius: 14px; background: #fff; }
.att-sug-foto { display: block; aspect-ratio: 1; margin-bottom: 8px; border-radius: 10px; background: var(--sug-superficie); overflow: hidden; }
.att-sug-foto img { width: 100%; height: 100%; object-fit: contain; }
.att-sug-nome { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-bottom: 4px; color: var(--sug-tinta); font-size: 12.5px; font-weight: 600; line-height: 1.3; text-decoration: none; overflow: hidden; overflow-wrap: anywhere; }
.att-sug-nome:hover { color: var(--sug-marca-forte); }
.att-sug-preco { margin-bottom: 8px; color: var(--sug-tinta); font-size: 15px; font-weight: 700; }
.att-sug-preco del { margin-right: 4px; color: var(--sug-tinta-2); font-size: 12px; font-weight: 500; }
.att-sug-preco ins { text-decoration: none; }
.att-sug-acao { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }

.att-sug-qtd { display: flex; align-items: center; justify-content: space-between; height: 34px; border: 1px solid var(--sug-contorno); border-radius: 999px; overflow: hidden; }
.att-sug-qtd button { width: 34px; height: 100%; border: 0; background: none; color: var(--sug-tinta); font-size: 17px; line-height: 1; cursor: pointer; }
.att-sug-qtd button:hover { background: var(--sug-superficie); }
.att-sug-num { width: 40px; height: 100%; border: 0; background: none; color: var(--sug-tinta); font-size: 14px; font-weight: 700; text-align: center; -moz-appearance: textfield; }
.att-sug-num::-webkit-outer-spin-button, .att-sug-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.att-sug-add { height: 38px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--sug-marca-botao); color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background-color .16s, transform .12s; }
.att-sug-add:hover { background: var(--sug-marca-forte); }
.att-sug-add:active { transform: scale(.97); }
.att-sug-add.ocupado { opacity: .75; cursor: default; }
.att-sug-add.pronto { background: var(--sug-imediato); }

/* Produto com opções: a lista abre dentro do cartão (flutuar seria cortado pelo trilho que rola) */
.att-sug-unica { margin: -2px 0 8px; color: var(--sug-tinta-2); font-size: 11.5px; line-height: 1.3; }
.att-sug-unica strong { color: var(--sug-tinta); }
.att-sug-de { color: var(--sug-tinta-2); font-size: 11px; font-weight: 500; }
/* ⚠️ `display` VENCE o atributo `hidden`: sem a linha de baixo a lista nasce ABERTA, estica todos os cartões
   (a caixa do carrinho foi a 1173 px) e o carrinho fica horrível. Foi o que aconteceu em 21/09. */
.att-sug [hidden], .att-sug-opcoes[hidden] { display: none !important; }
.att-sug-opcoes { display: flex; flex-direction: column; gap: 5px; margin: 6px 0 0; padding: 0; list-style: none; }
.att-sug-opcao { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; padding: 8px 10px; border: 1px solid var(--sug-contorno); border-radius: 10px; background: #fff; color: var(--sug-tinta); font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; }
.att-sug-opcao:hover { border-color: var(--sug-marca); background: var(--sug-superficie); color: var(--sug-marca-forte); }
.att-sug-opcao .amount { white-space: nowrap; }

/* A janelinha das opções: presa ao corpo da página, longe do trilho que rola */
.att-sug-modal { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 16px; background: rgba(22, 22, 29, .55); }
.att-sug-folha { position: relative; width: 100%; max-width: 340px; max-height: 80vh; padding: 16px 14px 14px; border-radius: 16px; background: #fff; box-shadow: 0 18px 48px rgba(22, 22, 29, .3); overflow-y: auto; animation: att-sug-entra .18s cubic-bezier(.23, 1, .32, 1) both; }
@keyframes att-sug-entra { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.att-sug-fecha { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--sug-superficie); color: var(--sug-tinta); font-size: 17px; line-height: 1; cursor: pointer; }
.att-sug-fecha:hover { background: var(--sug-linha); }
.att-sug-modal-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding-right: 30px; }
.att-sug-modal-topo img { width: 44px; height: 44px; border-radius: 8px; background: var(--sug-superficie); object-fit: contain; }
.att-sug-modal-topo b { color: var(--sug-tinta); font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.att-sug-modal-sub { margin: 0 0 10px; color: var(--sug-tinta-2); font-size: 12.5px; }
.att-sug-modal .att-sug-opcao { padding: 12px; font-size: 13.5px; }
.att-sug-modal .att-sug-opcao:focus-visible { outline: 2px solid var(--sug-marca); outline-offset: 1px; }

/* O aviso verde e o "leve junto" moram na mesma caixa: o título do segundo respira */
.att-sug-tit-junto { margin-top: 14px; }

/* Gaveta lateral e checkout: cartão pequeno, para caber mais e rolar mais de lado (dono, 21/09) */
.att-sug-gaveta, .att-sug-checkout { margin: 12px 0; }
.att-sug-gaveta .att-sug-tit, .att-sug-checkout .att-sug-tit { font-size: 14px; }
.att-sug-gaveta .att-sug-sub, .att-sug-checkout .att-sug-sub { font-size: 12px; margin-bottom: 8px; }
.att-sug-gaveta .att-sug-trilho, .att-sug-checkout .att-sug-trilho { gap: 8px; }
.att-sug-gaveta .att-sug-item, .att-sug-checkout .att-sug-item { flex: 0 0 114px; padding: 7px; border-radius: 12px; }
.att-sug-gaveta .att-sug-foto, .att-sug-checkout .att-sug-foto { margin-bottom: 6px; border-radius: 8px; }
.att-sug-gaveta .att-sug-nome, .att-sug-checkout .att-sug-nome { margin-bottom: 2px; font-size: 11px; }
.att-sug-gaveta .att-sug-preco, .att-sug-checkout .att-sug-preco { margin-bottom: 6px; font-size: 12.5px; }
.att-sug-gaveta .att-sug-preco del, .att-sug-checkout .att-sug-preco del { font-size: 10.5px; }
.att-sug-gaveta .att-sug-unica, .att-sug-checkout .att-sug-unica { margin-bottom: 6px; font-size: 10.5px; }
.att-sug-gaveta .att-sug-acao, .att-sug-checkout .att-sug-acao { gap: 4px; }
.att-sug-gaveta .att-sug-qtd, .att-sug-checkout .att-sug-qtd { height: 28px; }
.att-sug-gaveta .att-sug-qtd button, .att-sug-checkout .att-sug-qtd button { width: 28px; font-size: 15px; }
.att-sug-gaveta .att-sug-num, .att-sug-checkout .att-sug-num { width: 32px; font-size: 12.5px; }
.att-sug-gaveta .att-sug-add, .att-sug-checkout .att-sug-add { height: 30px; padding: 0 6px; font-size: 11.5px; }
.att-sug-gaveta .att-sug-seta, .att-sug-checkout .att-sug-seta { width: 28px; height: 28px; font-size: 17px; }
.att-sug-gaveta .att-sug-seta-esq, .att-sug-checkout .att-sug-seta-esq { left: -4px; }
.att-sug-gaveta .att-sug-seta-dir, .att-sug-checkout .att-sug-seta-dir { right: -4px; }

/* No computador, o "leve junto" vira GRADE de 6 por fileira; o resto continua rolando de lado. */
@media (min-width: 768px) {
  .att-sug-grade { display: grid; grid-template-columns: repeat(6, 1fr); overflow: visible; }
  .att-sug-grade .att-sug-item { flex: initial; }
}

@media (prefers-reduced-motion: reduce) {
  .att-sug-barra > span, .att-sug-add { transition: none; }
}