/* Faixas contínuas inspiradas na referência: duas direções, ciclo de 32 s. */
.pastel-marquee{width:100%;padding-top:2px;touch-action:pan-y}
.pastel-marquee-row{width:100%;overflow:hidden;padding:8px 0 14px;mask-image:linear-gradient(to right,transparent,#000 14px,#000 calc(100% - 14px),transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
.pastel-marquee-track{display:flex;width:max-content;gap:0;animation:pastel-recipe-loop 32s linear infinite;will-change:transform}
.pastel-marquee-right .pastel-marquee-track{animation-direction:reverse}
.pastel-marquee-group{display:flex;flex:none;gap:14px;padding-right:14px;align-items:flex-start}
.streusel-page .pastel-marquee-card{display:block;position:relative;flex:0 0 178px;width:178px;padding:4px;background:#fff9db;border:1px solid #e5cb83;border-radius:12px;overflow:hidden;box-shadow:0 6px 15px #c6282812;cursor:zoom-in}
.streusel-page .pastel-marquee-card img{display:block;width:100%;height:auto;aspect-ratio:1055/1491;object-fit:contain;border-radius:8px;user-select:none;-webkit-user-drag:none}
.streusel-page .pastel-marquee-card .lc-gallery-zoom{position:absolute;bottom:10px;left:6px;right:6px;font-size:8px;padding:5px 6px}
.pastel-marquee-card:focus-visible{outline:3px solid #a91f1f;outline-offset:2px}
.pastel-marquee[data-paused=true] .pastel-marquee-track{animation-play-state:paused}
.pastel-marquee-hint{color:#a91f1f;text-align:center;font-size:10px;line-height:1.6;font-weight:600;margin:6px 14px 0}
@media(hover:hover){.pastel-marquee:hover .pastel-marquee-track{animation-play-state:paused}}
@media(max-width:380px){.streusel-page .pastel-marquee-card{flex-basis:156px;width:156px}}
@keyframes pastel-recipe-loop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Movimento automático desde a abertura, com pausa por mouse ou toque. */
.streusel-page .pastel-marquee[data-motion=enabled] .pastel-marquee-track{animation:pastel-recipe-loop 32s linear infinite!important}
.streusel-page .pastel-marquee[data-motion=enabled] .pastel-marquee-right .pastel-marquee-track{animation-direction:reverse!important}
.streusel-page .pastel-marquee[data-motion=enabled][data-paused=true] .pastel-marquee-track{animation-play-state:paused!important}
@media(hover:hover){.streusel-page .pastel-marquee[data-motion=enabled]:hover .pastel-marquee-track{animation-play-state:paused!important}}
