/* ===== Left / right slide buttons for the home-page rows (category strip + Trending now) ===== */

.sa-wrap { position: relative; }

.sa-btn {
    position: absolute;
    top: var(--sa-top, 36%);
    z-index: 5;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    padding: 0;
    border: 1px solid rgba(122, 46, 58, .18);
    border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    color: #7a2e3a;
    box-shadow: 0 6px 18px rgba(43, 30, 34, .16);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background .2s ease, color .2s ease, transform .2s ease, opacity .2s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.sa-btn svg { width: 20px; height: 20px; }
.sa-btn:hover { background: #7a2e3a; color: #fff; box-shadow: 0 8px 22px rgba(122, 46, 58, .32); }
.sa-btn:active { transform: translateY(-50%) scale(.92); }
.sa-btn:focus-visible { outline: 2px solid #7a2e3a; outline-offset: 3px; }
.sa-prev { left: 6px; }
.sa-next { right: 6px; }
.sa-wrap.sa-no-overflow .sa-btn { opacity: 0; pointer-events: none; }

/* Category strip: buttons sit across the middle of the pictures. */
.sa-wrap.sa-cat { --sa-top: 34%; }
.sa-wrap.sa-cat .sa-prev { left: -8px; }
.sa-wrap.sa-cat .sa-next { right: -8px; }

/* Trending row: it is now moved by script, so it can also be dragged / swiped. */
.marquee.sa-live {
    overflow-x: auto;
    scrollbar-width: none;
}
.marquee.sa-live::-webkit-scrollbar { display: none; }
.marquee.sa-live .marquee-track { animation: none !important; transform: none !important; }
.sa-wrap.sa-marquee .sa-prev { left: 14px; }
.sa-wrap.sa-marquee .sa-next { right: 14px; }

@media (max-width: 640px) {
    .sa-btn { width: 36px; height: 36px; }
    .sa-btn svg { width: 16px; height: 16px; }
    .sa-wrap.sa-cat .sa-prev { left: -4px; }
    .sa-wrap.sa-cat .sa-next { right: -4px; }
    .sa-wrap.sa-marquee .sa-prev { left: 8px; }
    .sa-wrap.sa-marquee .sa-next { right: 8px; }
}