/* ==========================================================================
   Loja web de consumidor (/loja). Compra sem login (Firebase Anonymous Auth
   nos bastidores). Mesma linguagem visual do app iOS: top bar branca, titulos
   Literata, CTA #56BFED com texto preto, cards cinza #f6f6f6, inputs em pill.
   Reaproveita tokens e .btn de css/styles.css.
   ========================================================================== */

body { background: #fff; }

.loja-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fff;
  border-bottom: 1px solid var(--cor-borda);
}
.loja-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.25rem;
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.loja-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--cor-texto);
  font-family: "Literata", Georgia, serif;
  font-weight: 600;
  font-size: 1.05rem;
}
.loja-brand img { width: 32px; height: 32px; border-radius: 8px; }
.loja-header-actions { display: flex; align-items: center; gap: 0.4rem; }

.loja-linkbtn {
  border: none;
  background: transparent;
  color: var(--cor-texto);
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
}
.loja-linkbtn:hover { background: var(--cor-superficie-alt); }

.loja-cart-btn { position: relative; }
.loja-cart-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--cor-acento);
  color: var(--cor-acento-texto);
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loja-cart-badge[hidden] { display: none; }

/* --- Main --- */
.loja-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 4rem;
}
.loja-main h1 {
  font-family: "Literata", Georgia, serif;
  font-weight: 600;
  font-size: 1.75rem;
  margin: 0 0 1.25rem;
}
.loja-back {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--cor-texto-suave);
  text-decoration: none;
  font-size: 0.9rem;
}
.loja-muted { color: var(--cor-texto-suave); }
.loja-erro { color: var(--cor-erro); font-size: 0.9rem; }

/* --- Catalogo --- */
.loja-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.loja-chip {
  border: 1.5px solid var(--cor-borda);
  background: var(--cor-superficie);
  color: var(--cor-texto-suave);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.95rem;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}
.loja-chip.ativo { background: var(--cor-texto); color: #fff; border-color: var(--cor-texto); }

.loja-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.1rem;
}
.loja-card {
  display: flex;
  flex-direction: column;
  background: var(--cor-superficie-alt);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.loja-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-card); }
.loja-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--cor-neutro-bg);
  display: block;
}
.loja-card-body { padding: 0.85rem 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.loja-card-body h3 { font-family: "Inter", sans-serif; font-size: 1rem; font-weight: 600; margin: 0; }
.loja-badge {
  align-self: flex-start;
  background: var(--cor-neutro-bg);
  color: var(--cor-texto-suave);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
}
.loja-preco { font-weight: 700; font-size: 1.05rem; margin-top: auto; }
.loja-preco s { color: var(--cor-texto-fraco); font-weight: 500; font-size: 0.85rem; margin-right: 0.35rem; }

/* --- Detalhe do produto --- */
.loja-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.loja-detail-img { width: 100%; border-radius: var(--radius-lg); object-fit: cover; aspect-ratio: 1 / 1; background: var(--cor-neutro-bg); }
.loja-detail h1 { margin-bottom: 0.4rem; }
.loja-detail .loja-preco { font-size: 1.4rem; margin: 0.6rem 0 1rem; }
.loja-detail p.desc { color: var(--cor-texto-suave); line-height: 1.55; }

.loja-qty { display: inline-flex; align-items: center; gap: 0.75rem; margin: 1rem 0; }
.loja-qty button {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--cor-borda); background: var(--cor-superficie);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.loja-qty span { min-width: 2ch; text-align: center; font-weight: 700; font-size: 1.05rem; }

.loja-moagem { display: flex; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.loja-moagem button {
  border: 1.5px solid var(--cor-borda); background: var(--cor-superficie);
  border-radius: var(--radius-pill); padding: 0.45rem 1rem; font: inherit; font-size: 0.85rem;
  font-weight: 600; cursor: pointer; color: var(--cor-texto-suave);
}
.loja-moagem button.ativo { background: var(--cor-texto); color: #fff; border-color: var(--cor-texto); }

/* --- Carrinho --- */
.loja-cart-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 0.9rem;
  align-items: center;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--cor-borda);
}
.loja-cart-row img { width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: cover; background: var(--cor-neutro-bg); }
.loja-cart-row .nome { font-weight: 600; }
.loja-cart-row .sub { color: var(--cor-texto-suave); font-size: 0.82rem; }
.loja-cart-row .linha-preco { font-weight: 700; white-space: nowrap; }
.loja-remove { background: none; border: none; color: var(--cor-erro); cursor: pointer; font-size: 0.8rem; }

.loja-resumo {
  margin-top: 1.5rem;
  background: var(--cor-superficie-alt);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
}
.loja-resumo .r-linha { display: flex; justify-content: space-between; padding: 0.3rem 0; font-size: 0.92rem; }
.loja-resumo .r-total { font-weight: 700; font-size: 1.1rem; border-top: 1px solid var(--cor-borda); margin-top: 0.4rem; padding-top: 0.6rem; }

/* --- Formularios (checkout / wannabox) --- */
.loja-form { max-width: 640px; }
.loja-form fieldset { border: none; padding: 0; margin: 0 0 1.75rem; }
.loja-form legend {
  font-family: "Literata", Georgia, serif;
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 0.9rem;
  padding: 0;
}
.loja-form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.loja-form .campo { margin-bottom: 1rem; }
.loja-form .campo-full { grid-column: 1 / -1; }
.loja-form label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--cor-texto-suave); margin-bottom: 0.3rem; }
.loja-form input, .loja-form textarea, .loja-form select {
  width: 100%;
  border: 1.5px solid var(--cor-borda);
  border-radius: var(--radius-pill);
  background: var(--cor-superficie-alt);
  padding: 0.7rem 1.1rem;
  font: inherit;
  font-size: 0.95rem;
}
.loja-form textarea { border-radius: var(--radius-md); }
.loja-form input:focus, .loja-form textarea:focus, .loja-form select:focus {
  outline: none; border-color: var(--cor-marca-clara); background: #fff;
}

.loja-btn-full { width: 100%; margin-top: 0.5rem; }

/* --- Opcoes de frete --- */
.loja-frete-grupo { margin: 0.75rem 0 1.25rem; }
.loja-frete-grupo h4 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.loja-frete-opcoes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.loja-frete-opcao {
  border: 1.5px solid var(--cor-borda);
  background: var(--cor-superficie);
  border-radius: var(--radius-md);
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  font-size: 0.82rem;
  min-width: 130px;
}
.loja-frete-opcao.ativo { border-color: var(--cor-texto); background: var(--cor-texto); color: #fff; }
.loja-frete-opcao .destaque { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; }
.loja-frete-opcao .valor { font-weight: 700; }

/* --- PIX --- */
.loja-pix {
  background: var(--cor-superficie-alt);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-top: 1.25rem;
}
.loja-pix code {
  display: block;
  word-break: break-all;
  background: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  font-size: 0.78rem;
  margin: 0.6rem 0;
}
.loja-pix .status { font-size: 0.9rem; font-weight: 600; }
.loja-pix .status.ok { color: var(--cor-sucesso); }
.loja-pix .status.aguardando { color: var(--cor-aviso); }

/* --- Estado de pedido / mensagens --- */
.loja-centro {
  max-width: 440px;
  margin: 3rem auto;
  text-align: center;
}
.loja-centro .icone {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem; font-size: 1.8rem;
  background: var(--cor-sucesso-bg); color: var(--cor-sucesso);
}

/* --- Modal login (wanna box) --- */
.loja-modal-bg {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(20, 30, 45, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
}
.loja-modal {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--sombra-flutuante);
}
.loja-modal h3 { margin: 0 0 0.35rem; }
.loja-modal p { margin: 0 0 1.1rem; color: var(--cor-texto-suave); font-size: 0.9rem; }

.loja-toast {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  background: var(--cor-marca-escura); color: #fff;
  padding: 0.7rem 1.15rem; border-radius: var(--radius-pill);
  font-size: 0.88rem; z-index: 120; box-shadow: var(--sombra-flutuante);
}
.loja-toast.erro { background: var(--cor-erro); }

@media (max-width: 720px) {
  .loja-detail { grid-template-columns: 1fr; }
  .loja-form .grid2 { grid-template-columns: 1fr; }
  .loja-main h1 { font-size: 1.5rem; }
}

/* --- Busca e ordenação do catálogo --- */
.loja-busca {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.loja-busca input {
  flex: 1 1 260px;
  border: 1.5px solid var(--cor-borda);
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.1rem;
  font-size: 0.92rem;
  background: var(--cor-superficie);
  font-family: inherit;
  color: var(--cor-texto);
}
.loja-busca select {
  flex: 0 0 auto;
  width: auto;
  border: 1.5px solid var(--cor-borda);
  border-radius: var(--radius-pill);
  padding: 0.6rem 1rem;
  font-size: 0.88rem;
  background: var(--cor-superficie);
  font-family: inherit;
  color: var(--cor-texto);
}
.loja-busca input:focus, .loja-busca select:focus {
  outline: none;
  border-color: var(--cor-marca-clara);
}

/* --- Aviso de bloqueio no checkout (itens sem envio) --- */
.loja-aviso {
  background: var(--cor-aviso-bg);
  border: 1px solid #f0dba9;
  color: #6b4c0e;
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  font-size: 0.88rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}
.loja-aviso ul { margin: 0.4rem 0; padding-left: 1.2rem; }

.loja-centro-acoes {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.loja-linkbtn-discreto { color: var(--cor-texto-suave); }

@media (max-width: 520px) {
  .loja-linkbtn-discreto { display: none; }
}

/* ==========================================================================
   Gaveta lateral: produto, carrinho, entrega e PIX acontecem aqui dentro, por
   cima do catalogo. z-index 100 fica acima do header sticky (30) e do modal de
   login da wanna box (50); o toast subiu para 120 porque e usado de dentro da
   gaveta.
   ========================================================================== */
.loja-gaveta-bg {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  background: rgba(20, 30, 45, 0);
  transition: background 0.28s ease;
}
.loja-gaveta-bg.visivel { background: rgba(20, 30, 45, 0.45); }

.loja-gaveta {
  position: relative;
  width: min(460px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -18px 0 48px rgba(29, 58, 120, 0.18);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}
.loja-gaveta-bg.visivel .loja-gaveta { transform: translateX(0); }

.loja-gaveta-topo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--cor-borda);
}
.loja-gaveta-titulos { flex: 1; min-width: 0; }
.loja-gaveta-etapa {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
}
.loja-gaveta-etapa[hidden] { display: none; }
.loja-gaveta-topo h2 {
  font-family: "Literata", Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.loja-gaveta-voltar,
.loja-gaveta-fechar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--cor-superficie-alt);
  color: var(--cor-texto);
  font-size: 0.95rem;
  line-height: 1;
}
.loja-gaveta-voltar:hover,
.loja-gaveta-fechar:hover { background: var(--cor-neutro-bg); }
.loja-gaveta-voltar[hidden] { display: none; }

.loja-gaveta-corpo {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1.1rem;
}

.loja-gaveta-rodape {
  flex: 0 0 auto;
  border-top: 1px solid var(--cor-borda);
  background: #fff;
  padding: 0.85rem 1.1rem calc(0.85rem + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 20px rgba(44, 62, 80, 0.06);
}
.loja-gaveta-rodape[hidden] { display: none; }
.loja-gaveta-rodape .btn + .btn { margin-top: 0.5rem; }
.loja-gaveta-linhas .r-linha {
  display: flex;
  justify-content: space-between;
  font-size: 0.86rem;
  color: var(--cor-texto-suave);
  padding: 0.12rem 0;
}
.loja-gaveta-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0.35rem 0 0.6rem;
  font-size: 0.95rem;
}
.loja-gaveta-total strong { font-size: 1.25rem; font-family: "Literata", Georgia, serif; }
.loja-gaveta-nota {
  margin: -0.3rem 0 0.6rem;
  font-size: 0.78rem;
  color: var(--cor-texto-fraco);
}

/* Formulario dentro da gaveta: sem a largura maxima da versao em pagina e com
   menos respiro entre blocos, porque a coluna e estreita. */
.loja-form-gaveta { max-width: none; }
.loja-form-gaveta fieldset { margin-bottom: 1.25rem; }
.loja-form-gaveta legend { font-size: 1rem; margin-bottom: 0.7rem; }
.loja-form-gaveta .campo { margin-bottom: 0.75rem; }
.loja-opcional { font-family: "Inter", sans-serif; font-size: 0.78rem; font-weight: 500; color: var(--cor-texto-fraco); }

.loja-rotulo {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
  margin: 1.1rem 0 0.4rem;
}

/* --- Produto na gaveta --- */
.loja-gaveta-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--cor-neutro-bg);
  display: block;
}
.loja-gaveta-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.8rem 0 0.2rem; }
.loja-gaveta-produto .loja-preco { font-size: 1.35rem; margin: 0.5rem 0 0.6rem; }
.loja-gaveta-produto .desc { color: var(--cor-texto-suave); line-height: 1.55; font-size: 0.9rem; margin: 0; }
.loja-gaveta-produto .loja-qty { margin: 0.2rem 0; }
.loja-gaveta-produto .loja-moagem { margin: 0.2rem 0; }

.loja-cep-linha input {
  width: 100%;
  border: 1.5px solid var(--cor-borda);
  border-radius: var(--radius-pill);
  background: var(--cor-superficie-alt);
  padding: 0.65rem 1.1rem;
  font: inherit;
  font-size: 0.95rem;
}
.loja-cep-linha input:focus { outline: none; border-color: var(--cor-marca-clara); background: #fff; }

.loja-frete-inline { margin-top: 0.6rem; font-size: 0.88rem; }
.loja-frete-inline p { margin: 0; }
.loja-frete-resultado {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  background: var(--cor-superficie-alt);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
}
.loja-frete-resultado strong { font-size: 1.05rem; }
.loja-frete-resultado span { font-size: 0.83rem; color: var(--cor-texto-suave); }

/* --- Frete no checkout da gaveta: lista vertical, nao chips lado a lado.
   Escopado em .loja-gaveta para nao mexer nos planos da wanna box, que
   reaproveitam .loja-frete-opcao numa pagina normal. --- */
.loja-frete-box { margin-top: 0.9rem; }
.loja-frete-carregando,
.loja-frete-vazio { font-size: 0.86rem; margin: 0; }
.loja-gaveta .loja-frete-grupo { margin: 0 0 0.9rem; }
.loja-gaveta .loja-frete-opcoes { flex-direction: column; gap: 0.45rem; }
.loja-gaveta .loja-frete-opcao {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  width: 100%;
  min-width: 0;
  text-align: left;
  padding: 0.65rem 0.9rem;
}
.loja-gaveta .loja-frete-opcao .destaque {
  grid-column: 1 / -1;
  color: var(--cor-marca);
  margin-bottom: 0.1rem;
}
.loja-gaveta .loja-frete-opcao.ativo .destaque { color: #bfe6f8; }
.loja-gaveta .loja-frete-opcao .transp { font-weight: 600; }
.loja-gaveta .loja-frete-opcao .valor { text-align: right; font-size: 0.95rem; }
.loja-gaveta .loja-frete-opcao .prazo { grid-column: 1 / -1; font-size: 0.78rem; opacity: 0.75; }

/* --- Carrinho e estados dentro da gaveta --- */
.loja-gaveta .loja-cart-row { grid-template-columns: 56px 1fr auto; gap: 0.7rem; }
.loja-gaveta .loja-cart-row img { width: 56px; height: 56px; }
.loja-gaveta .loja-cart-row:first-child { padding-top: 0; }
.loja-qty-mini { margin: 0.35rem 0 0; gap: 0.5rem; }
.loja-qty-mini button { width: 28px; height: 28px; font-size: 0.95rem; }
.loja-qty-mini span { font-size: 0.92rem; }

.loja-gaveta-vazio,
.loja-gaveta-sucesso { text-align: center; padding: 2rem 0.5rem; }
.loja-gaveta-vazio .icone { font-size: 2.2rem; margin-bottom: 0.6rem; }
.loja-gaveta-vazio p { color: var(--cor-texto-suave); margin-bottom: 1.1rem; }
.loja-gaveta-sucesso .icone {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem; font-size: 1.7rem;
  background: var(--cor-sucesso-bg); color: var(--cor-sucesso);
}
.loja-gaveta-sucesso h3 { margin: 0 0 0.5rem; }
.loja-gaveta-sucesso p { font-size: 0.9rem; line-height: 1.55; }
.loja-codigo {
  margin-top: 1.2rem;
  background: var(--cor-superficie-alt);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  font-size: 0.78rem;
  color: var(--cor-texto-suave);
}
.loja-codigo strong { font-size: 0.9rem; color: var(--cor-texto); word-break: break-all; }

.loja-gaveta .loja-pix { margin-top: 0; padding: 1rem; }
.loja-pix-instrucao { margin: 0 0 0.5rem; font-size: 0.88rem; line-height: 1.5; }
.loja-pix-contador { font-size: 0.82rem; margin: 0.2rem 0 0; }
.loja-pix-aviso { font-size: 0.78rem; margin: 0.6rem 0 0; }

/* --- Nota do especialista (pontuacao) --- */
/* Mesmo azul solido do app iOS (details_screen/home_screen/visitors usam
   #2F80ED com texto branco em pilula). Repetir o tratamento faz o cliente
   reconhecer a nota do app para o site sem precisar de legenda. */
:root { --cor-nota: #2f80ed; }

.loja-nota {
  background: var(--cor-nota);
  color: #fff;
  border-radius: var(--radius-pill);
  font-weight: 700;
  line-height: 1.15;
}

/* No card a nota ocupa o canto inferior direito da FOTO, lugar antes usado
   pelo botao de adicionar. Sombra porque ela pousa sobre imagem: sem isso some
   em foto clara. */
.loja-card-media { position: relative; }
.loja-card-media .loja-nota {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  min-width: 28px;
  padding: 0.2rem 0.5rem;
  font-size: 0.82rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(16, 32, 45, 0.3);
}

/* Na gaveta do produto a nota vem por extenso, como na tela de detalhe do app. */
.loja-nota-rotulo {
  align-self: flex-start;
  padding: 0.25rem 0.7rem;
  font-size: 0.76rem;
}

/* --- Escala de torra em graos de cafe --- */
/* Marrom tirado da paleta de torra do app (CafeColors.porTorra), tom
   "Media Escura" #935A2B: e o degrau que mantem contraste tanto no branco da
   gaveta quanto no cinza do card — o #4B3018 fica quase preto e o #F7DEC6
   (Clara) sumiria no fundo claro. */
:root { --cor-grao: #935a2b; }

.loja-torra {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  align-self: flex-start;
}
.loja-grao { color: var(--cor-grao); line-height: 0; display: block; }
.loja-grao svg { width: 11px; height: 11px; display: block; }
.loja-torra-txt {
  margin-left: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
}

/* No chip o texto acompanha os graos e precisa seguir a cor do proprio chip,
   que inverte para branco quando esta ativo. */
.loja-chip .loja-torra { vertical-align: middle; }
.loja-chip .loja-torra-txt { color: inherit; }
.loja-chip.ativo .loja-grao { color: #e8c39e; }

/* Na gaveta o grao cresce junto com o resto da tela de detalhe. */
.loja-gaveta-tags .loja-grao svg { width: 13px; height: 13px; }
.loja-gaveta-tags .loja-torra-txt { color: var(--cor-texto); }

/* --- Preco + adicionar rapido, no rodape do card --- */
.loja-preco-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto; /* empurra a linha para o fim do card, como o preco fazia */
}
.loja-preco-linha .loja-preco { margin-top: 0; }

.loja-card-add {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--cor-acento);
  color: var(--cor-acento-texto);
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(44, 62, 80, 0.18);
  transition: background 0.15s ease, transform 0.12s ease;
}
.loja-card-add:hover { background: #3fb0e6; transform: translateY(-1px); }
.loja-card-add:active { transform: none; }

@media (max-width: 560px) {
  .loja-gaveta { width: 100%; }
  .loja-gaveta-corpo { padding: 1rem; }
  .loja-form-gaveta .grid2 { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .loja-gaveta,
  .loja-gaveta-bg,
  .loja-card-add { transition: none; }
  .loja-gaveta { transform: none; }
  .loja-gaveta-bg { background: rgba(20, 30, 45, 0.45); }
}