.shop-banners { margin-bottom: 32px; min-width: 0; }
.banner-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.banner-caption { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.banner-carousel { position: relative; min-width: 0; }
.banner-controls { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.banner-arrow { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 1px solid #00000008; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 3px 14px #272c271f; pointer-events: auto; }
.banner-arrow:hover:not(:disabled) { background: var(--surface); color: var(--wine); }
.banner-arrow:disabled { cursor: default; color: #aaa; box-shadow: 0 2px 8px #272c2714; opacity: 1; }
.banner-arrow span { width: 11px; height: 11px; border: solid currentColor; border-width: 2px 2px 0 0; }
.banner-prev { left: 12px; }
.banner-next { right: 12px; }
.banner-prev span { transform: translateX(2px) rotate(-135deg); }
.banner-next span { transform: translateX(-2px) rotate(45deg); }
.banner-viewport { overflow: hidden; overflow: clip; border-radius: 8px; min-width: 0; touch-action: pan-y pinch-zoom; }
.banner-track { display: grid; grid-template-columns: repeat(var(--banner-columns, 1), minmax(0, 1fr)); gap: 16px; min-width: 0; }
.banner-card { display: block; min-width: 0; width: 100%; max-width: 360px; aspect-ratio: 5 / 2; overflow: hidden; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.banner-card img { display: block; width: 100%; height: 100%; object-fit: contain; }
.banner-card:focus-visible { outline-offset: -4px; }
@media (max-width: 520px) {
    .shop-banners { margin-bottom: 26px; }
    .banner-track { gap: 12px; }
    .banner-arrow { width: 44px; height: 44px; }
    .banner-prev { left: 8px; }
    .banner-next { right: 8px; }
}
@media (max-width: 760px) {
    .mobile-banner-loop .banner-track { position: relative; display: flex; gap: 0; width: max-content; animation: mobile-banner-drift var(--mobile-banner-duration, 60s) linear infinite; will-change: transform; }
    .banner-mobile-set { display: flex; flex: 0 0 auto; gap: 12px; padding-right: 12px; }
    .banner-mobile-set .banner-card { flex: 0 0 var(--mobile-banner-width, 260px); width: var(--mobile-banner-width, 260px); }
    .mobile-banner-background .banner-track { animation-play-state: paused; }
    .mobile-banner-focused .banner-track { animation: none; transform: translateX(calc(-1 * var(--mobile-banner-focus, 0px))); }
    @keyframes mobile-banner-drift {
        from { transform: translateX(0); }
        to { transform: translateX(calc(-1 * var(--mobile-banner-distance, 0px))); }
    }
}