/* (v129) Faixa que rola de lado (js/faixa-lado.js): as categorias com foto da capa, as abas do cardápio, os dias da
   agenda. No computador, setas redondas nas pontas — só do lado em que há mais para ver — e o esmaecido na beirada;
   arrastar com o mouse também anda. No celular as setas somem: o dedo rola. As cores vêm do site (com reserva). */
.faixa-lado { position: relative; }
.faixa-lado > [data-faixa-trilho] { scrollbar-width: none; }
.faixa-lado > [data-faixa-trilho]::-webkit-scrollbar { display: none; }
.faixa-lado > [data-faixa-trilho] img { -webkit-user-drag: none; user-select: none; }

.faixa-lado[data-dir] > [data-faixa-trilho] {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 88px), transparent calc(100% - 8px));
  mask-image: linear-gradient(90deg, #000 calc(100% - 88px), transparent calc(100% - 8px));
}
.faixa-lado[data-esq] > [data-faixa-trilho] {
  -webkit-mask-image: linear-gradient(90deg, transparent 8px, #000 88px);
  mask-image: linear-gradient(90deg, transparent 8px, #000 88px);
}
.faixa-lado[data-esq][data-dir] > [data-faixa-trilho] {
  -webkit-mask-image: linear-gradient(90deg, transparent 8px, #000 88px, #000 calc(100% - 88px), transparent calc(100% - 8px));
  mask-image: linear-gradient(90deg, transparent 8px, #000 88px, #000 calc(100% - 88px), transparent calc(100% - 8px));
}
.faixa-lado[data-arrastando] > [data-faixa-trilho] { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.faixa-lado[data-arrastando] > [data-faixa-trilho] * { cursor: grabbing; }

.faixa-lado-seta {
  position: absolute; top: 50%; z-index: 3; display: grid; place-items: center;
  width: 44px; height: 44px; margin-top: -22px; padding: 0;
  border-radius: 999px; border: 1px solid var(--i-linha-forte, rgba(27, 31, 39, .14));
  background: var(--i-papel, #FFFFFF); color: var(--i-tinta, var(--texto, #1B1F27));
  box-shadow: 0 8px 22px rgba(20, 24, 31, .16); cursor: pointer;
  transition: opacity .2s ease, transform .2s ease, border-color .2s ease;
}
.faixa-lado-seta:hover { transform: scale(1.06); border-color: var(--i-tinta, var(--texto, #1B1F27)); }
.faixa-lado-seta:focus-visible { outline: 3px solid var(--i-marca, var(--cor-marca, #1E6BE1)); outline-offset: 2px; }
.faixa-lado-seta svg { display: block; }
.faixa-lado-seta-esq { left: -14px; }
.faixa-lado-seta-esq svg { transform: scaleX(-1); }
.faixa-lado-seta-dir { right: -14px; }
.faixa-lado:not([data-esq]) > .faixa-lado-seta-esq,
.faixa-lado:not([data-dir]) > .faixa-lado-seta-dir { opacity: 0; visibility: hidden; pointer-events: none; }

/* Só com o dedo (celular, tablet): sem setas e sem esmaecido, como antes. */
@media (hover: none) and (pointer: coarse) {
  .faixa-lado-seta { display: none; }
  .faixa-lado[data-esq] > [data-faixa-trilho], .faixa-lado[data-dir] > [data-faixa-trilho],
  .faixa-lado[data-esq][data-dir] > [data-faixa-trilho] { -webkit-mask-image: none; mask-image: none; }
}
@media (prefers-reduced-motion: reduce) {
  .faixa-lado-seta { transition: none; }
  .faixa-lado-seta:hover { transform: none; }
}

/* As abas do cardápio grudam no topo: quem gruda agora é a faixa (com as setas), e a barra fica inteira, sem
   esmaecido (o fundo dela precisa continuar cobrindo a lista que passa por baixo). */
.abas-faixa.faixa-lado { position: sticky; top: 0; z-index: 20; }
.abas-faixa > .abas { position: static; }
.abas-faixa[data-esq] > .abas, .abas-faixa[data-dir] > .abas,
.abas-faixa[data-esq][data-dir] > .abas { -webkit-mask-image: none; mask-image: none; }
.abas-faixa > .faixa-lado-seta { width: 38px; height: 38px; margin-top: -19px; }
.abas-faixa > .faixa-lado-seta-esq { left: 10px; }
.abas-faixa > .faixa-lado-seta-dir { right: 10px; }