/* Prateleiras do catálogo — cada categoria corre de lado, com a foto do item.
 *
 * Mora na página /catalogo/ da loja. Reaproveita a mesma marcação de item do
 * shared/catalogo.css (.ct-item com data-id/data-nome/data-preco), então o
 * carrinho e o botão de enviar do shared/catalogo.js funcionam sem mudança —
 * o que muda aqui é só o desenho: em vez de lista vertical, prateleira.
 *
 * Sem JavaScript continua sendo um catálogo com foto e preço, só sem contador.
 */

/* ---- atalhos de categoria, grudados no topo ---- */
.pr-chips {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  gap: 7px;
  margin: 0 -16px;
  padding: 10px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--pr-barra, rgba(12,12,14,.86));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ct-borda);
}
.pr-chips::-webkit-scrollbar { display: none; }

.pr-chip {
  flex: 0 0 auto;
  padding: 7px 13px;
  border: 1px solid var(--ct-borda);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}
.pr-chip:focus-visible { outline: 2px solid var(--ct-acento); outline-offset: 2px; }

/* ---- a prateleira ---- */
.pr-cat {
  margin-top: 26px;
  /* o scroll-margin evita que o chip grudado cubra o título ao pular */
  scroll-margin-top: 62px;
}
.pr-cat > h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.pr-cat > .pr-sub {
  margin: 3px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ct-suave);
}

.pr-fila {
  display: flex;
  gap: 11px;
  margin: 13px -16px 0;
  padding: 2px 16px 14px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pr-fila::-webkit-scrollbar { display: none; }

/* O item vira card vertical. Reescreve o .ct-item (linha) do catalogo.css. */
.pr-fila .ct-item {
  flex: 0 0 158px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
}

.pr-foto {
  width: 100%;
  /* height:auto é obrigatório: o atributo height do <img> vira altura usada e
     passa por cima do aspect-ratio, deixando a foto esticada. */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--ct-fundo);
  flex: 0 0 auto;
}

/* Item sem foto: faixa de cor com a inicial, em vez de buraco cinza. */
.pr-vazio {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--ct-acento) 22%, transparent),
    color-mix(in srgb, currentColor 7%, transparent));
  font-size: 34px;
  font-weight: 900;
  opacity: .5;
}

.pr-fila .ct-txt {
  flex: 1 1 auto;
  padding: 9px 10px 0;
}
.pr-fila .ct-nome { font-size: 13px; line-height: 1.3; }
.pr-fila .ct-un { font-size: 11px; }
.pr-fila .ct-preco { font-size: 14px; margin-top: 3px; }

.pr-fila .ct-qtd {
  justify-content: space-between;
  padding: 8px 10px 10px;
}
.pr-fila .ct-btn { width: 32px; height: 32px; }

/* Dica de que a fila corre: só na primeira, e só até a pessoa rolar. */
.pr-dica {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--ct-suave);
}
.pr-dica svg { width: 14px; height: 14px; }

@media (min-width: 560px) {
  .pr-fila .ct-item { flex-basis: 184px; }
}

@media (prefers-reduced-motion: no-preference) {
  .pr-fila { scroll-behavior: smooth; }
  .pr-fila .ct-item { transition: border-color .2s ease; }
}

/* Placeholder com o desenho da categoria, em vez da inicial. */
.pr-vazio.tem-icone { font-size:0; }
.pr-vazio.tem-icone svg { width:40%; height:40%; opacity:.62; }

/* Item com sabores (combo de rosh): card largo, quantidade à esquerda e os
   sabores para assinalar à direita. */
.pr-fila .ct-item.com-sabores {
  flex: 1 0 100%;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  grid-template-areas: "txt sab" "qtd sab";
  align-items: start;
}
.com-sabores .ct-txt { grid-area: txt; padding: 12px 12px 0; }
.com-sabores .ct-qtd { grid-area: qtd; align-self: end; }
.com-sabores .ct-nome { font-size: 15px; font-weight: 800; }
.com-sabores .ct-preco { font-size: 17px; }
.ct-sabores {
  grid-area: sab;
  margin: 0;
  padding: 11px 12px 12px;
  border: 0;
  border-left: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  display: grid;
  gap: 4px;
}
.ct-sabores legend {
  float: left;
  width: 100%;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ct-acento);
}
.ct-sabores label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 0 9px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  font-size: 13px;
  cursor: pointer;
}
.ct-sabores input { width: 17px; height: 17px; margin: 0; accent-color: var(--ct-acento); }
.ct-sabores label:has(input:checked) { border-color: var(--ct-acento); }
.ct-sabores label:has(input:disabled) { opacity: .45; cursor: default; }