/* ============================================================
   LOJA PÚBLICA — PedFood
   Redesign 2026-08-22. MOBILE-FIRST de propósito: a loja é acessada
   majoritariamente pelo celular, então o padrão são os estilos de tela
   pequena e as media queries CRESCEM a partir daí (min-width), em vez de
   remendar o desktop para baixo.

   Alvos de toque: mínimo 44x44px (recomendação de acessibilidade Apple/WCAG)
   em tudo que se clica com o dedo.
   ============================================================ */

/* ---------- Tokens locais da loja ---------- */
.pf-loja-body {
  /* Derivados da cor da empresa (definida inline no layout-topo.php).
     color-mix mantém o tom da marca em fundos suaves sem precisar de uma
     segunda cor cadastrada por empresa. */
  --loja-primaria-suave: color-mix(in srgb, var(--pf-primary) 12%, var(--pf-surface));
  --loja-primaria-borda: color-mix(in srgb, var(--pf-primary) 28%, var(--pf-surface));
  --loja-sombra-card: 0 1px 3px rgba(36, 28, 20, .06), 0 4px 16px rgba(36, 28, 20, .05);
  --loja-sombra-flutuante: 0 6px 24px rgba(36, 28, 20, .16);
  --loja-transicao: .18s cubic-bezier(.4, 0, .2, 1);

  background: var(--pf-bg);
  color: var(--pf-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Evita o "pulo" horizontal quando um elemento anima para fora da tela */
  overflow-x: hidden;
}

/* ---------- Topo ---------- */
.pf-loja-topo {
  background: var(--pf-surface);
  border-bottom: 1px solid var(--pf-border);
  position: sticky;
  top: 0;
  z-index: 1020;
  transition: box-shadow var(--loja-transicao);
}
/* Sombra só aparece quando a página rolou — dá profundidade sem poluir o topo */
.pf-loja-topo.pf-loja-topo-rolado { box-shadow: 0 2px 12px rgba(36, 28, 20, .08); }

.pf-loja-topo-conteudo {
  max-width: 1100px;
  margin: 0 auto;
  padding: .7rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.pf-loja-marca {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--pf-text);
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  min-width: 0;
}
.pf-loja-marca:hover { color: var(--pf-text); }
.pf-loja-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Com o botão de tema (Fase 22-E) o topo ficou mais cheio: "Entrar" não quebra em
   duas linhas — quem cede espaço é o nome da loja, que já corta com reticências. */
.pf-loja-topo .btn { white-space: nowrap; flex-shrink: 0; }
.pf-loja-logo, .pf-loja-logo-placeholder {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  background: var(--pf-primary-light);
  font-size: 1.15rem;
}

.pf-loja-btn-carrinho {
  position: relative;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--pf-border);
  border-radius: 50%;
  color: var(--pf-text);
  background: var(--pf-surface);
  font-size: 1.15rem;
  text-decoration: none;
  transition: all var(--loja-transicao);
}
.pf-loja-btn-carrinho:hover { color: var(--pf-primary); border-color: var(--pf-primary); }
/* Fase 22-E: botão lua/sol (mesmo desenho do carrinho, um pouco menor) */
.pf-loja-btn-tema {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--pf-border);
  border-radius: 50%;
  color: var(--pf-text-muted);
  background: var(--pf-surface);
  font-size: 1rem;
  padding: 0;
  transition: all var(--loja-transicao);
}
.pf-loja-btn-tema:hover { color: var(--pf-primary); border-color: var(--pf-primary); }
.pf-loja-btn-tema:focus-visible { outline: 2px solid var(--pf-primary); outline-offset: 2px; }
/* Tema escuro: --pf-primary fica clareada (texto/ícone legível no fundo escuro);
   o que é CHEIO com texto branco usa a cor original da marca (--pf-primary-dark,
   igual à primary no tema claro) — senão o texto branco sumia num botão claro. */
[data-tema="escuro"] .pf-loja-body .btn-primary {
  background: var(--pf-primary-dark);
  border-color: var(--pf-primary-dark);
  color: #fff;
}
[data-tema="escuro"] .pf-loja-body .btn-primary:hover,
[data-tema="escuro"] .pf-loja-body .btn-primary:focus { filter: brightness(1.12); color: #fff; }
[data-tema="escuro"] .pf-loja-body .btn-primary:disabled { background: var(--pf-primary-dark); opacity: .55; }
.pf-loja-carrinho-contagem {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--pf-danger);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--pf-surface);
}
/* Pulso ao adicionar item — feedback de que a ação funcionou */
.pf-loja-carrinho-contagem.pf-pulsa { animation: pfPulsaBadge .45s ease; }
@keyframes pfPulsaBadge {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.pf-loja-main {
  flex: 1;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
}

.pf-loja-rodape {
  border-top: 1px solid var(--pf-border);
  padding: 1.25rem;
  text-align: center;
  color: var(--pf-text-muted);
  font-size: .85rem;
}
.pf-loja-rodape a { color: var(--pf-primary); }

/* ---------- Hero (capa da loja) ---------- */
.pf-loja-hero {
  position: relative;
  border-radius: var(--pf-radius-lg);
  overflow: hidden;
  margin-bottom: 1rem;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--pf-primary-dark) 92%, #000) 0%,
    var(--pf-primary-dark) 55%,
    color-mix(in srgb, var(--pf-primary-dark) 75%, #fff) 100%);
  color: #fff;
  box-shadow: var(--loja-sombra-card);
}
/* Textura sutil para o gradiente não parecer "chapado" */
.pf-loja-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 85% 15%, rgba(255,255,255,.18) 0%, transparent 45%),
                    radial-gradient(circle at 15% 90%, rgba(0,0,0,.12) 0%, transparent 40%);
  pointer-events: none;
}
.pf-loja-hero-info {
  position: relative;
  z-index: 1;
  padding: 1.25rem 1.15rem;
}
.pf-loja-hero-titulo {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 .2rem;
  line-height: 1.15;
  color: #fff;
}
.pf-loja-hero-local {
  font-size: .85rem;
  opacity: .92;
  margin: 0;
  display: flex; align-items: center; gap: .35rem;
}

/* Status aberto/fechado — informação mais importante do hero */
.pf-loja-status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  margin-bottom: .6rem;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.25);
}
.pf-loja-status-ponto {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, .7);
  animation: pfPontoVivo 2s infinite;
}
.pf-loja-status-fechada .pf-loja-status-ponto { background: #f87171; animation: none; }
@keyframes pfPontoVivo {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .7); }
  70%  { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* Badges do hero (tempo, frete, mínimo) — em linha rolável no mobile para
   não empilhar e empurrar o cardápio para baixo da dobra */
.pf-loja-hero-badges {
  display: flex;
  gap: .4rem;
  margin-top: .75rem;
  overflow-x: auto;
  padding-bottom: .2rem;
  scrollbar-width: none;
  /* Sangra até a borda do hero e devolve o respiro por padding: a badge
     seguinte fica "espiando" no limite da tela, sinalizando que há mais
     conteúdo para o lado — em vez de parecer cortada por engano. */
  margin-left: -1.15rem;
  margin-right: -1.15rem;
  padding-left: 1.15rem;
  padding-right: 1.15rem;
  scroll-snap-type: x proximity;
}
.pf-loja-hero-badges::-webkit-scrollbar { display: none; }
.pf-loja-hero-badge { scroll-snap-align: start; }
.pf-loja-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  font-size: .76rem;
  font-weight: 600;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}
.pf-loja-hero-badge i { font-size: .85rem; }
/* Fase 22-A: frase de apresentação, status (link para "Sobre") e badge "Sobre a loja" */
.pf-loja-hero-frase { margin: .1rem 0 .35rem; font-size: .92rem; opacity: .95; line-height: 1.35; max-width: 38rem; }
a.pf-loja-status { color: #fff; text-decoration: none; }
a.pf-loja-status:hover { background: rgba(255,255,255,.3); }
a.pf-loja-hero-badge-link { color: #fff; text-decoration: none; }
a.pf-loja-hero-badge-link:hover { background: rgba(255,255,255,.3); }
/* Fase 22-C: "Compartilhar" é botão (não link) com a mesma cara do selo */
button.pf-loja-hero-badge-link { color: #fff; font-family: inherit; line-height: inherit; cursor: pointer; }
button.pf-loja-hero-badge-link:hover { background: rgba(255,255,255,.3); }
button.pf-loja-hero-badge-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Banners da capa (Fase 22-A) ---------- */
.pf-loja-banners {
  border-radius: var(--pf-radius-lg);
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: var(--loja-sombra-card);
  background: var(--pf-surface-alt);
}
.pf-loja-banners .carousel-item { position: relative; aspect-ratio: 12 / 5; color: #fff; }
/* No tablet/computador a proporção 12:5 passaria de 400 px de altura e
   empurraria o cardápio para fora da primeira tela: limita e recorta. */
@media (min-width: 768px) {
  .pf-loja-banners .carousel-item { max-height: 300px; }
  .pf-loja-banner-texto { padding: 2.5rem 1.5rem 1.1rem; }
  .pf-loja-banner-texto strong { font-size: 1.35rem; }
}
.pf-loja-banners .carousel-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-loja-banner-texto {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.2rem 1rem .9rem;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.pf-loja-banner-texto strong { font-size: 1.05rem; font-weight: 800; line-height: 1.2; }
.pf-loja-banner-texto span { font-size: .82rem; opacity: .95; }
.pf-loja-banners .carousel-indicators { margin-bottom: .35rem; }
.pf-loja-banners .carousel-indicators [data-bs-target] { width: 7px; height: 7px; border-radius: 50%; border: 0; margin: 0 3px; }
.pf-loja-banners .carousel-control-prev,
.pf-loja-banners .carousel-control-next { width: 12%; }

/* ---------- Aviso de loja fechada (Fase 22-A) ---------- */
.pf-loja-aviso-fechada {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .75rem .9rem;
  margin-bottom: 1rem;
  border-radius: var(--pf-radius-md);
  background: color-mix(in srgb, var(--pf-warning) 14%, var(--pf-surface));
  border: 1px solid color-mix(in srgb, var(--pf-warning) 40%, transparent);
  font-size: .88rem;
  line-height: 1.4;
}
.pf-loja-aviso-fechada > i { color: var(--pf-warning); font-size: 1.1rem; flex-shrink: 0; }

/* ---------- Página "Sobre" (Fase 22-A) ---------- */
.pf-loja-sobre { display: flex; flex-direction: column; gap: .8rem; max-width: 720px; }
.pf-loja-sobre-titulo { font-size: 1rem; font-weight: 800; margin: 0 0 .6rem; display: flex; align-items: center; gap: .45rem; }
.pf-loja-sobre-titulo i { color: var(--pf-primary); }
.pf-loja-sobre-texto { color: var(--pf-text); line-height: 1.55; }
.pf-loja-sobre-status { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .88rem; padding: .3rem .7rem; border-radius: 999px; }
.pf-loja-sobre-status.pf-aberta { background: color-mix(in srgb, var(--pf-success) 14%, transparent); color: var(--pf-success); }
.pf-loja-sobre-status.pf-fechada { background: color-mix(in srgb, var(--pf-warning) 16%, transparent); color: color-mix(in srgb, var(--pf-warning) 70%, var(--pf-text)); }
.pf-loja-horarios > div { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px dashed var(--pf-border); }
.pf-loja-horarios > div:last-child { border-bottom: 0; }
.pf-loja-horarios dt { font-weight: 600; }
.pf-loja-horarios dd { margin: 0; text-align: right; }
.pf-loja-horarios .pf-hoje dt, .pf-loja-horarios .pf-hoje dd { color: var(--pf-primary); font-weight: 700; }
.pf-loja-sobre-lista { margin: 0; padding-left: 1.1rem; line-height: 1.7; }
.pf-loja-pagamentos { display: flex; flex-wrap: wrap; gap: .45rem; }
.pf-loja-pagamentos span { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 999px; background: var(--loja-primaria-suave); font-size: .85rem; font-weight: 600; }
.pf-loja-pagamentos i { color: var(--pf-primary); }

/* ---------- Faixas da página inicial (Fase 22-A) — rolam de lado ---------- */
.pf-loja-faixa-trilho {
  display: flex;
  gap: .7rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin: 0 -1rem;
  padding: .15rem 1rem .6rem;
}
.pf-loja-faixa-trilho::-webkit-scrollbar { display: none; }
.pf-loja-faixa-trilho > .pf-loja-card-produto {
  flex: 0 0 15rem;
  flex-direction: column;
  scroll-snap-align: start;
}
.pf-loja-faixa-trilho .pf-loja-card-produto-imagem { width: 100%; aspect-ratio: 16 / 10; min-height: 0; }
.pf-loja-faixa-trilho .pf-loja-card-produto-descricao { display: none; }

/* ---------- Aviso de progresso para frete grátis ---------- */
.pf-loja-aviso-frete {
  background: var(--pf-surface);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-md);
  padding: .8rem .9rem;
  margin-bottom: 1rem;
  box-shadow: var(--loja-sombra-card);
}
.pf-loja-aviso-frete-texto {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: .5rem;
}
.pf-loja-aviso-frete-texto i { color: var(--pf-primary); font-size: 1.05rem; }
.pf-loja-aviso-frete-barra {
  height: 7px;
  border-radius: 999px;
  background: var(--pf-border);
  overflow: hidden;
}
.pf-loja-aviso-frete-progresso {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pf-primary), color-mix(in srgb, var(--pf-primary) 60%, #4ade80));
  transition: width .4s ease;
}
.pf-loja-aviso-frete.pf-conquistado .pf-loja-aviso-frete-texto i { color: var(--pf-success); }
.pf-loja-aviso-frete.pf-conquistado .pf-loja-aviso-frete-progresso { background: var(--pf-success); }

/* ---------- Busca ---------- */
.pf-loja-busca {
  position: relative;
  margin-bottom: .85rem;
}
.pf-loja-busca i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pf-text-muted);
  pointer-events: none;
  font-size: 1rem;
}
.pf-loja-busca input {
  width: 100%;
  height: 48px;
  padding: 0 2.6rem 0 2.6rem;
  border-radius: 999px;
  border: 1px solid var(--pf-border);
  background: var(--pf-surface);
  font-size: .95rem;
  transition: all var(--loja-transicao);
}
.pf-loja-busca input:focus {
  outline: none;
  border-color: var(--pf-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-primary) 18%, transparent);
}
.pf-loja-busca-limpar {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border: none;
  background: transparent;
  color: var(--pf-text-muted);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
}
.pf-loja-busca-limpar.pf-visivel { display: flex; }
.pf-loja-busca-limpar:hover { background: var(--pf-bg); color: var(--pf-text); }

/* ---------- Barra de filtros e ordenação ---------- */
.pf-loja-ferramentas {
  display: flex;
  gap: .5rem;
  margin-bottom: .85rem;
  align-items: center;
}
.pf-loja-chip-filtro {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  height: 40px;
  padding: 0 .85rem;
  border-radius: 999px;
  border: 1px solid var(--pf-border);
  background: var(--pf-surface);
  color: var(--pf-text);
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--loja-transicao);
}
.pf-loja-chip-filtro:hover { border-color: var(--pf-primary); }
.pf-loja-chip-filtro.active {
  background: var(--pf-primary-dark);
  border-color: var(--pf-primary);
  color: #fff;
}
.pf-loja-select-ordem {
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--pf-border);
  background: var(--pf-surface);
  padding: 0 2rem 0 .85rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--pf-text);
  cursor: pointer;
  flex: 1;
  min-width: 0;
  max-width: 190px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237a6f61'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 12px;
}
.pf-loja-select-ordem:focus { outline: none; border-color: var(--pf-primary); }

/* ---------- Categorias (chips roláveis) ---------- */
.pf-loja-categorias {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding: .15rem .15rem .6rem;
  margin-bottom: .35rem;
  scrollbar-width: none;
  /* Encaixa o chip na posição ao rolar — sensação de app nativo */
  scroll-snap-type: x proximity;
}
.pf-loja-categorias::-webkit-scrollbar { display: none; }
.pf-loja-categoria-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: 40px;
  padding: 0 .9rem;
  border-radius: 999px;
  border: 1px solid var(--pf-border);
  background: var(--pf-surface);
  color: var(--pf-text);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  scroll-snap-align: start;
  flex-shrink: 0;      /* não encolhe: os chips rolam, nunca se espremem */
  cursor: pointer;
  font-family: inherit; /* <button> não herda a fonte do body por padrão */
  transition: all var(--loja-transicao);
}
.pf-loja-categoria-chip.active,
.pf-loja-categoria-chip:hover {
  background: var(--pf-primary-dark);
  color: #fff;
  border-color: var(--pf-primary);
}
.pf-loja-categoria-chip-imagem {
  width: 24px; height: 24px;
  border-radius: 50%;
  object-fit: cover;
}
.pf-loja-categoria-contagem {
  font-size: .72rem;
  opacity: .7;
  font-weight: 700;
}

/* ---------- Aviso de busca global ---------- */
.pf-loja-aviso-busca {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .8rem;
  margin-bottom: .75rem;
  border-radius: var(--pf-radius-sm);
  background: var(--loja-primaria-suave);
  border: 1px solid var(--loja-primaria-borda);
  font-size: .82rem;
  color: var(--pf-text);
}
.pf-loja-aviso-busca i { color: var(--pf-primary); font-size: 1rem; flex-shrink: 0; }

/* ---------- Título de seção ---------- */
.pf-loja-secao-titulo {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1rem;
  font-weight: 800;
  margin: 1.35rem 0 .75rem;
  color: var(--pf-text);
}
.pf-loja-secao-titulo i { color: var(--pf-primary); }
.pf-loja-secao-titulo small {
  font-weight: 500;
  color: var(--pf-text-muted);
  font-size: .78rem;
}

/* ---------- Grade de produtos ----------
   MOBILE = lista horizontal (imagem à esquerda, dados à direita): o cliente
   lê nome/descrição/preço sem precisar de duas colunas apertadas.
   DESKTOP = grade de cards verticais (min-width abaixo). */
.pf-loja-grade-produtos {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.pf-loja-card-produto {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--pf-surface);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-md);
  overflow: hidden;
  box-shadow: var(--loja-sombra-card);
  transition: transform var(--loja-transicao), box-shadow var(--loja-transicao);
}
.pf-loja-card-produto:active { transform: scale(.985); }

.pf-loja-card-produto-imagem {
  position: relative;
  width: 104px;
  flex-shrink: 0;
  /* Altura mínima garante proporção agradável mesmo em card curto (produto
     sem descrição), evitando a imagem virar uma faixa estreita. */
  min-height: 104px;
  background: var(--pf-primary-light);
  display: block;
  text-decoration: none;
}
.pf-loja-card-produto-imagem img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.pf-loja-card-produto-corpo {
  padding: .75rem .85rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  flex: 1;
  min-width: 0;
}
.pf-loja-card-produto-nome {
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.25;
  color: inherit;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pf-loja-card-produto-descricao {
  font-size: .78rem;
  color: var(--pf-text-muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.pf-loja-card-produto-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: auto;
  padding-top: .5rem;
  /* min-width:0 permite o bloco de preço encolher em vez de empurrar o
     botão para fora do card quando o nome/preço é longo. */
  min-width: 0;
}
.pf-loja-card-produto-rodape > span:first-child { min-width: 0; }
.pf-loja-card-produto-preco {
  font-weight: 800;
  color: var(--pf-text);
  font-size: 1.08rem;
  line-height: 1.1;
}
.pf-loja-card-produto-preco-antigo {
  display: block;
  font-size: .76rem;
  color: var(--pf-text-muted);
  text-decoration: line-through;
  line-height: 1;
}
.pf-loja-card-produto-unidade {
  font-size: .72rem;
  color: var(--pf-text-muted);
  font-weight: 500;
}

/* Selo de promoção sobre a imagem */
.pf-loja-selo {
  position: absolute;
  top: 6px; left: 6px;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .22rem .45rem;
  border-radius: 7px;
  background: var(--pf-danger);
  color: #fff;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.pf-loja-selo-economia {
  background: var(--pf-success);
}

/* Botão favoritar (coração) */
.pf-loja-btn-favorito {
  position: absolute;
  top: 6px; right: 6px;
  width: 32px; height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--pf-text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  transition: all var(--loja-transicao);
  z-index: 2;
}
.pf-loja-btn-favorito:hover { transform: scale(1.1); }
.pf-loja-btn-favorito.pf-favoritado { color: var(--pf-danger); }
.pf-loja-btn-favorito.pf-favoritado i::before { content: "\f415"; } /* bi-heart-fill */

/* Botão adicionar — no mobile vira circular só com o ícone */
.btn-loja-adicionar-carrinho,
.btn-loja-montar {
  min-width: 44px;
  height: 44px;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  font-weight: 700;
  font-size: 1.05rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--pf-primary) 35%, transparent);
  transition: transform var(--loja-transicao);
}
.btn-loja-adicionar-carrinho:active,
.btn-loja-montar:active { transform: scale(.9); }
.pf-loja-btn-adicionar-texto { display: none; }

/* ---------- Fase 22-D: cupom no checkout ---------- */
.pf-checkout-cupom-aplicado {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .65rem;
  border-radius: var(--pf-radius-sm);
  border: 1px dashed color-mix(in srgb, var(--pf-success) 50%, transparent);
  background: color-mix(in srgb, var(--pf-success) 9%, transparent);
  color: var(--pf-success);
}
.pf-checkout-cupom-aplicado strong { letter-spacing: .04em; }
.pf-checkout-cupom-aplicado .small { color: var(--pf-text); }
.pf-checkout-cupom-invalido {
  border-color: color-mix(in srgb, var(--pf-danger) 50%, transparent);
  background: color-mix(in srgb, var(--pf-danger) 8%, transparent);
  color: var(--pf-danger);
}
.pf-checkout-cupom-invalido strong { text-decoration: line-through; }

/* ---------- Fase 22-B: selos, esgotado e galeria ---------- */
.pf-loja-card-produto-corpo .pf-selos { margin: .05rem 0 .1rem; }
.pf-loja-card-produto-corpo .pf-selo { font-size: .66rem; padding: 0 .45rem; }
.pf-loja-card-esgotado .pf-loja-card-produto-imagem img { opacity: .45; }
.pf-loja-card-esgotado .pf-loja-card-produto-preco { color: var(--pf-text-muted); }
.pf-loja-faixa-esgotado {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  padding: .2rem .65rem;
  border-radius: 6px;
  background: var(--pf-danger);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  pointer-events: none;
  z-index: 1;
}
.pf-loja-btn-esgotado {
  min-width: 44px;
  height: 44px;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: not-allowed;
  color: var(--pf-danger);
  border: 1px dashed color-mix(in srgb, var(--pf-danger) 50%, transparent);
  background: color-mix(in srgb, var(--pf-danger) 8%, transparent);
}
.pf-loja-btn-esgotado:hover { color: var(--pf-danger); background: color-mix(in srgb, var(--pf-danger) 8%, transparent); }
.pf-loja-aviso-esgotado {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .8rem .9rem;
  border-radius: var(--pf-radius-md);
  border: 1px solid color-mix(in srgb, var(--pf-danger) 30%, transparent);
  background: color-mix(in srgb, var(--pf-danger) 9%, transparent);
}
.pf-loja-aviso-esgotado i { color: var(--pf-danger); font-size: 1.2rem; line-height: 1.2; }
/* "Me avise quando voltar" (Fase 25-B) */
.pf-loja-avise-me-ativo {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .2rem .6rem;
  padding: .7rem .9rem; border-radius: var(--pf-radius-md);
  border: 1px solid color-mix(in srgb, var(--pf-success) 35%, transparent);
  background: color-mix(in srgb, var(--pf-success) 10%, transparent);
}
.pf-loja-avise-me-ativo > i { color: var(--pf-success); font-size: 1.1rem; line-height: 1.3; }
.pf-loja-avise-me-ativo > .btn { grid-column: 2; justify-self: start; }

.pf-galeria { position: relative; border-radius: var(--pf-radius-lg); overflow: hidden; background: var(--pf-primary-light); }
.pf-galeria-trilho {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.pf-galeria-trilho::-webkit-scrollbar { display: none; }
.pf-galeria-slide {
  flex: 0 0 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  background: transparent;
  scroll-snap-align: start;
  cursor: zoom-in;
}
.pf-galeria-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-galeria-slide:focus { outline: none; }
.pf-galeria-slide:focus-visible { outline: 3px solid var(--pf-primary); outline-offset: -3px; }
.pf-galeria .pf-loja-faixa-esgotado { font-size: 1rem; padding: .35rem 1rem; }
.pf-galeria-ampliar,
.pf-galeria-contador {
  position: absolute;
  bottom: .6rem;
  background: rgba(0,0,0,.5);
  color: #fff;
  pointer-events: none;
}
.pf-galeria-ampliar { right: .6rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.pf-galeria-contador { left: .6rem; padding: .1rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.pf-galeria-seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem; height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: #241c14;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  z-index: 2;
}
.pf-galeria-seta-anterior { left: .6rem; }
.pf-galeria-seta-proxima { right: .6rem; }
@media (hover: hover) and (min-width: 768px) {
  .pf-galeria .pf-galeria-seta { display: flex; }
}
.pf-galeria-miniaturas { display: flex; gap: .45rem; margin-top: .55rem; overflow-x: auto; padding-bottom: .15rem; }
.pf-galeria-miniatura {
  flex: 0 0 3.75rem;
  height: 3.75rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--pf-radius-sm);
  overflow: hidden;
  background: var(--pf-primary-light);
  opacity: .7;
}
.pf-galeria-miniatura.pf-ativa { border-color: var(--pf-primary); opacity: 1; }
.pf-galeria-miniatura img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Foto em tela cheia: fundo escuro nos dois temas (é um visualizador de foto) */
.pf-galeria-zoom { position: fixed; inset: 0; z-index: 1090; background: rgba(10,8,6,.94); display: flex; align-items: center; justify-content: center; }
.pf-galeria-zoom-area { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pf-galeria-zoom-area img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; transition: transform .2s ease; user-select: none; -webkit-user-drag: none; }
.pf-galeria-zoom-area.pf-aproximado { touch-action: none; }
.pf-galeria-zoom-area.pf-aproximado img { transform: scale(2.5); cursor: zoom-out; }
.pf-galeria-zoom .pf-galeria-seta { display: flex; }
.pf-galeria-zoom-fechar {
  position: absolute;
  top: .75rem; right: .75rem;
  width: 2.75rem; height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.pf-galeria-zoom-dica { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); max-width: 90%; color: rgba(255,255,255,.75); font-size: .8rem; text-align: center; pointer-events: none; }
body.pf-galeria-aberta { overflow: hidden; }

/* Página do produto montável: passos numerados + barra de ação fixa no rodapé
   (no lugar da barra "Ver carrinho", que some nesta tela). Opções usam os
   estilos .pf-montagem-* do app.css, os mesmos do PDV. */
.pf-loja-montagem { padding-bottom: 5.5rem; }
.pf-loja-montagem .pf-montagem-opcao { min-height: 3.75rem; }
/* Fundo da opção marcada no tom da cor da EMPRESA (o --pf-primary-light do tema é fixo). */
.pf-loja-montagem .pf-montagem-opcao-ativa { background: var(--loja-primaria-suave); }
.pf-loja-passo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: .35rem;
  border-radius: 50%;
  background: var(--loja-primaria-suave);
  color: var(--pf-primary);
  font-size: .8rem;
  font-weight: 800;
}
.pf-loja-montagem-barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: var(--pf-surface);
  border-top: 1px solid var(--pf-border);
  box-shadow: var(--loja-sombra-flutuante);
}
.pf-loja-montagem-barra .btn { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 768px) {
  .pf-loja-montagem-barra {
    left: 50%;
    right: auto;
    bottom: 1.25rem;
    transform: translateX(-50%);
    width: min(560px, calc(100% - 2rem));
    border: 1px solid var(--pf-border);
    border-radius: 999px;
    padding: .55rem .6rem .55rem 1rem;
  }
  .pf-loja-montagem-barra .btn { border-radius: 999px; }
}

.pf-loja-carrinho-montagem {
  font-size: .76rem;
  color: var(--pf-text-muted);
  line-height: 1.3;
  margin-top: .1rem;
}

/* Produto montável (Fase 21): preço "a partir de" e botão que leva à montagem */
.pf-loja-card-produto-a-partir {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  color: var(--pf-text-muted);
  line-height: 1.1;
}

/* Controle de quantidade dentro do card (aparece após adicionar) */
.pf-loja-card-qtd {
  display: none;
  align-items: center;
  gap: .1rem;
  background: var(--pf-primary-dark);
  border-radius: 999px;
  padding: 2px;
  flex-shrink: 0;
}
.pf-loja-card-qtd.pf-ativo { display: inline-flex; }
.pf-loja-card-qtd button {
  width: 34px; height: 40px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  cursor: pointer;
}
.pf-loja-card-qtd button:active { background: rgba(0,0,0,.12); }
.pf-loja-card-qtd-valor {
  min-width: 26px;
  text-align: center;
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
}

/* Botão de observação do item */
.pf-loja-btn-observacao {
  border: 1px dashed var(--pf-border);
  background: transparent;
  color: var(--pf-text-muted);
  border-radius: 8px;
  padding: .25rem .5rem;
  font-size: .72rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  cursor: pointer;
  transition: all var(--loja-transicao);
  align-self: flex-start;
}
.pf-loja-btn-observacao:hover { border-color: var(--pf-primary); color: var(--pf-primary); }
.pf-loja-btn-observacao.pf-preenchida {
  border-style: solid;
  border-color: var(--pf-primary);
  color: var(--pf-primary);
  background: var(--loja-primaria-suave);
}

/* ---------- Barra flutuante do carrinho ---------- */
.pf-loja-barra-carrinho {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1rem;
  width: calc(100% - 2rem);
  max-width: 480px;
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .8rem 1.1rem;
  border-radius: 999px;
  background: var(--pf-primary-dark);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--loja-sombra-flutuante);
  animation: pfSobeBarra .28s cubic-bezier(.4, 0, .2, 1);
}
@keyframes pfSobeBarra {
  from { opacity: 0; transform: translate(-50%, 100%); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.pf-loja-barra-carrinho:hover { color: #fff; filter: brightness(1.05); }
.pf-loja-barra-carrinho-info {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 600;
  font-size: .9rem;
  min-width: 0;
}
.pf-loja-barra-carrinho-acao {
  font-weight: 800;
  font-size: .87rem;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.pf-loja-main-com-barra { padding-bottom: 6rem; }

/* ---------- Estados vazios ---------- */
.pf-loja-vazio {
  text-align: center;
  padding: 2.5rem 1.25rem;
  background: var(--pf-surface);
  border: 1px dashed var(--pf-border);
  border-radius: var(--pf-radius-lg);
}
.pf-loja-vazio-icone {
  width: 68px; height: 68px;
  margin: 0 auto .9rem;
  border-radius: 50%;
  background: var(--loja-primaria-suave);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem;
  color: var(--pf-primary);
}
.pf-loja-vazio h3 {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: .35rem;
}
.pf-loja-vazio p {
  color: var(--pf-text-muted);
  font-size: .88rem;
  margin: 0 auto .9rem;
  max-width: 340px;
  line-height: 1.5;
}

/* ---------- Linhas do carrinho ---------- */
.pf-loja-carrinho-linha {
  display: flex;
  gap: .75rem;
  padding: .85rem;
  background: var(--pf-surface);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-md);
  margin-bottom: .6rem;
  box-shadow: var(--loja-sombra-card);
}
.pf-loja-carrinho-linha-imagem {
  width: 64px; height: 64px;
  border-radius: var(--pf-radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--pf-primary-light);
}
.pf-loja-carrinho-linha-info { flex: 1; min-width: 0; }
.pf-loja-carrinho-qtd {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  border: 1px solid var(--pf-border);
  border-radius: 999px;
  padding: 2px;
}
.pf-loja-carrinho-qtd input {
  width: 44px;
  text-align: center;
  padding: .25rem;
  border: none;
  background: transparent;
  font-weight: 700;
}
.pf-loja-carrinho-qtd input:focus { outline: none; }
.pf-loja-btn-qtd {
  width: 34px; height: 34px;
  border: none;
  background: var(--pf-bg);
  border-radius: 50%;
  color: var(--pf-text);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--loja-transicao);
}
.pf-loja-btn-qtd:hover { background: var(--pf-primary-dark); color: #fff; }

/* Observação exibida na linha do carrinho */
.pf-loja-carrinho-obs {
  font-size: .74rem;
  color: var(--pf-text-muted);
  background: var(--pf-bg);
  border-radius: 6px;
  padding: .2rem .45rem;
  margin-top: .3rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

/* ---------- Opções de pagamento (checkout) ---------- */
.pf-loja-body .pf-checkout-opcao {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .85rem;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-md);
  margin-bottom: .55rem;
  cursor: pointer;
  background: var(--pf-surface);
  transition: all var(--loja-transicao);
}
.pf-loja-body .pf-checkout-opcao:last-child { margin-bottom: 0; }
.pf-loja-body .pf-checkout-opcao:hover { border-color: var(--pf-primary); }
.pf-loja-body .pf-checkout-opcao input[type="radio"] {
  margin-top: .18rem;
  width: 20px; height: 20px;
  flex-shrink: 0;
  accent-color: var(--pf-primary);
}
/* Opção marcada ganha a cor da loja — feedback imediato no toque */
.pf-loja-body .pf-checkout-opcao:has(input:checked) {
  border-color: var(--pf-primary);
  background: var(--loja-primaria-suave);
  box-shadow: 0 0 0 1px var(--pf-primary) inset;
}
.pf-checkout-opcao-corpo { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.pf-checkout-opcao-titulo {
  font-weight: 700;
  font-size: .93rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.pf-checkout-opcao-titulo i { color: var(--pf-primary); }
.pf-checkout-opcao-texto {
  font-size: .79rem;
  color: var(--pf-text-muted);
  line-height: 1.4;
}
.pf-checkout-selo {
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: .15rem .4rem;
  border-radius: 5px;
  background: var(--pf-success);
  color: #fff;
}
.pf-checkout-opcao-destaque { border-width: 2px; }

/* Separador "ou pague na entrega" */
.pf-checkout-divisor {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .9rem 0 .7rem;
  color: var(--pf-text-muted);
  font-size: .76rem;
}
.pf-checkout-divisor::before,
.pf-checkout-divisor::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--pf-border);
}

/* ---------- Troco (checkout, pagamento em dinheiro) ---------- */
.pf-troco {
  margin-top: .6rem;
  padding: .85rem;
  border-radius: var(--pf-radius-md);
  background: var(--loja-primaria-suave);
  border: 1px solid var(--loja-primaria-borda);
}
.pf-troco-pergunta {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: .6rem;
}
.pf-troco-pergunta i { color: var(--pf-primary); font-size: 1.05rem; }

.pf-troco-opcao {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .6rem .7rem;
  background: var(--pf-surface);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-sm);
  margin-bottom: .45rem;
  cursor: pointer;
  transition: all var(--loja-transicao);
}
.pf-troco-opcao:last-of-type { margin-bottom: 0; }
.pf-troco-opcao input[type="radio"] {
  margin-top: .15rem;
  width: 18px; height: 18px;
  flex-shrink: 0;
  accent-color: var(--pf-primary);
}
.pf-troco-opcao:has(input:checked) { border-color: var(--pf-primary); }
.pf-troco-opcao span { display: flex; flex-direction: column; gap: .1rem; }
.pf-troco-opcao strong { font-size: .87rem; }
.pf-troco-opcao small { font-size: .76rem; color: var(--pf-text-muted); line-height: 1.35; }

.pf-troco-campo { margin-top: .7rem; }
.pf-troco-campo .form-label { font-size: .85rem; font-weight: 600; }
.pf-troco-campo .input-group-text { background: var(--pf-surface); font-weight: 700; }
.pf-troco-campo .form-control { height: 46px; font-size: 1rem; font-weight: 600; }

.pf-troco-resultado {
  margin-top: .5rem;
  font-size: .84rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.pf-troco-resultado:empty { display: none; }
.pf-troco-resultado.pf-ok { color: var(--pf-success); }
.pf-troco-resultado.pf-erro { color: var(--pf-danger); }

/* Aviso do prazo do PIX */
.pf-pix-alerta {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  text-align: left;
  margin-top: .85rem;
  padding: .7rem .8rem;
  border-radius: var(--pf-radius-sm);
  background: color-mix(in srgb, var(--pf-warning) 14%, var(--pf-surface));
  border: 1px solid color-mix(in srgb, var(--pf-warning) 35%, var(--pf-surface));
  font-size: .8rem;
  line-height: 1.45;
}
.pf-pix-alerta i { color: var(--pf-warning); font-size: 1rem; flex-shrink: 0; margin-top: .05rem; }

/* ---------- Tela de pagamento PIX ---------- */
.pf-pix-card {
  background: var(--pf-surface);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  padding: 1.25rem 1rem;
  box-shadow: var(--loja-sombra-card);
  text-align: center;
  margin-bottom: 1rem;
}
.pf-pix-titulo {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: .25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
}
.pf-pix-valor {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--pf-primary);
  line-height: 1.1;
  margin: .5rem 0 .1rem;
}
.pf-pix-instrucao { font-size: .84rem; color: var(--pf-text-muted); margin-bottom: 1rem; }

/* Abas QR Code / chave copia-e-cola */
.pf-pix-abas {
  display: flex;
  gap: .3rem;
  background: var(--pf-bg);
  border-radius: 999px;
  padding: 4px;
  margin: 0 auto 1rem;
  max-width: 320px;
}
.pf-pix-aba {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: .5rem .7rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--pf-text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--loja-transicao);
}
.pf-pix-aba.pf-ativa {
  background: var(--pf-surface);
  color: var(--pf-primary);
  box-shadow: var(--pf-shadow-sm);
}
.pf-pix-painel { display: none; }
.pf-pix-painel.pf-ativo { display: block; }

.pf-pix-qr {
  width: 230px;
  max-width: 78vw;
  height: auto;
  border-radius: var(--pf-radius-md);
  border: 1px solid var(--pf-border);
  padding: 8px;
  background: #fff;
}

.pf-pix-chave {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  line-height: 1.45;
  padding: .7rem;
  border: 1px dashed var(--pf-border);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-bg);
  color: var(--pf-text);
  resize: none;
  word-break: break-all;
}
.pf-pix-btn-copiar {
  width: 100%;
  margin-top: .6rem;
  font-weight: 700;
  height: 48px;
}

/* Passo a passo didático */
.pf-pix-passos {
  text-align: left;
  margin: 1rem 0 0;
  padding: .85rem;
  background: var(--pf-bg);
  border-radius: var(--pf-radius-sm);
}
.pf-pix-passos-titulo { font-size: .78rem; font-weight: 800; margin-bottom: .5rem; }
.pf-pix-passos ol { margin: 0; padding-left: 1.1rem; }
.pf-pix-passos li { font-size: .79rem; color: var(--pf-text-muted); margin-bottom: .3rem; line-height: 1.45; }

/* Estado de espera / confirmação */
.pf-pix-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 1rem;
  padding: .7rem;
  border-radius: var(--pf-radius-sm);
  background: var(--pf-bg);
  font-size: .84rem;
  font-weight: 600;
}
.pf-pix-status.pf-pago {
  background: color-mix(in srgb, var(--pf-success) 12%, var(--pf-surface));
  color: var(--pf-success);
}
.pf-pix-contador { font-variant-numeric: tabular-nums; font-weight: 800; }

.pf-pix-confirmado-icone {
  width: 72px; height: 72px;
  margin: 0 auto .8rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pf-success) 15%, var(--pf-surface));
  color: var(--pf-success);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
  animation: pfConfirma .4s cubic-bezier(.4, 0, .2, 1);
}
@keyframes pfConfirma {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Nota: .text-primary e .btn-outline-primary (azuis fixos do Bootstrap) são
   realinhados à cor do tema no app.css, que a loja também carrega — a
   correção vale para loja e painel de uma vez. */

/* ---------- Card de autenticação ---------- */
.pf-loja-auth-card {
  max-width: 420px;
  margin: 1.5rem auto;
  background: var(--pf-surface);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--loja-sombra-card);
}

/* ---------- Acompanhamento do pedido (linha do tempo) ---------- */
.pf-loja-timeline {
  position: relative;
  padding-left: 2rem;
}
.pf-loja-timeline-etapa {
  position: relative;
  padding-bottom: 1.4rem;
}
.pf-loja-timeline-etapa:last-child { padding-bottom: 0; }
/* Linha vertical ligando as etapas */
.pf-loja-timeline-etapa:not(:last-child)::before {
  content: '';
  position: absolute;
  left: -1.27rem;
  top: 1.5rem;
  bottom: .1rem;
  width: 2px;
  background: var(--pf-border);
}
.pf-loja-timeline-etapa.pf-concluida:not(:last-child)::before { background: var(--pf-success); }
.pf-loja-timeline-marcador {
  position: absolute;
  left: -2rem;
  top: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--pf-surface);
  border: 2px solid var(--pf-border);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem;
  color: var(--pf-text-muted);
}
.pf-loja-timeline-etapa.pf-concluida .pf-loja-timeline-marcador {
  background: var(--pf-success);
  border-color: var(--pf-success);
  color: #fff;
}
.pf-loja-timeline-etapa.pf-atual .pf-loja-timeline-marcador {
  background: var(--pf-primary-dark);
  border-color: var(--pf-primary);
  color: #fff;
  animation: pfPulsaMarcador 1.8s infinite;
}
@keyframes pfPulsaMarcador {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pf-primary) 60%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.pf-loja-timeline-titulo {
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.3;
}
.pf-loja-timeline-etapa:not(.pf-concluida):not(.pf-atual) .pf-loja-timeline-titulo { color: var(--pf-text-muted); }
.pf-loja-timeline-hora {
  font-size: .76rem;
  color: var(--pf-text-muted);
}

/* ---------- Tour da primeira visita ---------- */
.pf-loja-tour-fundo {
  position: fixed;
  inset: 0;
  background: rgba(20, 15, 10, .72);
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem;
  animation: pfSurge .2s ease;
}
@keyframes pfSurge { from { opacity: 0; } to { opacity: 1; } }
.pf-loja-tour-card {
  background: var(--pf-surface);
  border-radius: var(--pf-radius-lg);
  padding: 1.5rem 1.25rem 1.25rem;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: var(--loja-sombra-flutuante);
  animation: pfSobeCard .3s cubic-bezier(.4, 0, .2, 1);
}
@keyframes pfSobeCard {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pf-loja-tour-icone {
  width: 62px; height: 62px;
  margin: 0 auto .85rem;
  border-radius: 50%;
  background: var(--loja-primaria-suave);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem;
  color: var(--pf-primary);
}
.pf-loja-tour-titulo { font-size: 1.15rem; font-weight: 800; margin-bottom: .4rem; }
.pf-loja-tour-texto { color: var(--pf-text-muted); font-size: .9rem; line-height: 1.5; margin-bottom: 1.1rem; }
.pf-loja-tour-pontos { display: flex; gap: .35rem; justify-content: center; margin-bottom: 1rem; }
.pf-loja-tour-ponto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pf-border);
  transition: all var(--loja-transicao);
}
.pf-loja-tour-ponto.pf-ativo { background: var(--pf-primary-dark); width: 22px; border-radius: 999px; }

/* ---------- Modal de observação ---------- */
.pf-loja-obs-textarea {
  width: 100%;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-sm);
  padding: .65rem;
  font-size: .9rem;
  resize: vertical;
  min-height: 80px;
}
.pf-loja-obs-textarea:focus {
  outline: none;
  border-color: var(--pf-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-primary) 15%, transparent);
}
.pf-loja-obs-sugestoes { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.pf-loja-obs-sugestao {
  border: 1px solid var(--pf-border);
  background: var(--pf-surface);
  border-radius: 999px;
  padding: .25rem .6rem;
  font-size: .76rem;
  cursor: pointer;
  transition: all var(--loja-transicao);
}
.pf-loja-obs-sugestao:hover { border-color: var(--pf-primary); color: var(--pf-primary); }

/* ============================================================
   TABLET (>= 640px) — a lista vira grade de 2 colunas
   ============================================================ */
@media (min-width: 640px) {
  .pf-loja-main { padding: 1.5rem 1.25rem 2.5rem; }
  .pf-loja-faixa-trilho { margin: 0 -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; }
  .pf-loja-faixa-trilho > .pf-loja-card-produto { flex-basis: 16rem; }

  .pf-loja-hero-info { padding: 1.75rem 1.5rem; }
  .pf-loja-hero-titulo { font-size: 1.9rem; }

  .pf-loja-grade-produtos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  /* Card vertical: imagem em cima, dados embaixo */
  .pf-loja-card-produto { flex-direction: column; }
  .pf-loja-card-produto:hover {
    transform: translateY(-3px);
    box-shadow: var(--loja-sombra-flutuante);
  }
  .pf-loja-card-produto-imagem {
    width: 100%;
    /* 16/10 em vez de 4/3: card mais compacto, cabem mais produtos na
       primeira tela sem a foto perder presença. */
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
  .pf-loja-card-produto-corpo { padding: .9rem; }
  .pf-loja-card-produto-descricao { -webkit-line-clamp: 2; min-height: 2.1rem; }

  /* Com espaço sobrando, o botão volta a ter texto */
  .btn-loja-adicionar-carrinho,
  .btn-loja-montar,
  .pf-loja-btn-esgotado {
    border-radius: 999px;
    padding: 0 1rem;
    font-size: .85rem;
  }
  .pf-loja-btn-adicionar-texto { display: inline; }

  .pf-loja-barra-carrinho { bottom: 1.5rem; }
}

/* ============================================================
   DESKTOP (>= 992px) — 3 colunas e hero mais generoso
   ============================================================ */
@media (min-width: 992px) {
  .pf-loja-grade-produtos { grid-template-columns: repeat(3, 1fr); }
  .pf-loja-hero-titulo { font-size: 2.1rem; }
  .pf-loja-hero-info { padding: 2rem 1.75rem; }
  .pf-loja-topo-conteudo { padding: .85rem 1.25rem; }
  .pf-loja-marca { font-size: 1.1rem; }
  .pf-loja-ferramentas { max-width: 520px; }
}

/* ============================================================
   Acessibilidade — respeita quem pediu menos animação no sistema
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pf-loja-body *,
  .pf-loja-body *::before,
  .pf-loja-body *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}