/* Banners promocionais — exibidos antes do campo de busca (index.php)
 * Computador: 3:1 (recomendado 1200×400). Celular (até 699px): 16:9 (recomendado 800×450) quando
 * algum banner tem imagem própria de celular (variável --pb-m definida no HTML); senão continua 3:1.
 * A troca de imagem é feita pelo <picture>. Carrossel com scroll-snap nativo:
 * deslizar no celular funciona sem JavaScript; o JS só adiciona setas, pontos e troca automática. */

.promo-banners {
    background: var(--bg-primary, #fff);
    padding: 14px 0 6px;
}
.promo-banners .page-inner { max-width: 960px; }

.pb {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #ececec;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}

.pb-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.pb-track::-webkit-scrollbar { display: none; }
.pb-track:focus-visible { outline: 3px solid var(--brand, #FF5722); outline-offset: -3px; }

.pb-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    aspect-ratio: 3 / 1;
    position: relative;
}
.pb-slide a, .pb-slide picture, .pb-slide img { display: block; width: 100%; height: 100%; }
@media (max-width: 699px) {
    .pb-slide { aspect-ratio: var(--pb-m, 3 / 1); }
}
.pb-slide img { object-fit: cover; -webkit-user-drag: none; user-select: none; }

/* Setas: só onde há mouse (no celular o cliente desliza) */
.pb-nav {
    display: none;
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border-radius: 50%; border: 0;
    background: rgba(255, 255, 255, .92); color: #222;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    align-items: center; justify-content: center;
    cursor: pointer; z-index: 2; font-size: 1rem; padding: 0;
    transition: transform .15s, background .15s;
}
.pb-nav:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.pb-nav:focus-visible { outline: 3px solid var(--brand, #FF5722); outline-offset: 2px; }
.pb-prev { left: 10px; } .pb-next { right: 10px; }
@media (hover: hover) and (min-width: 700px) { .pb-nav { display: flex; } }

.pb-dots {
    position: absolute; left: 0; right: 0; bottom: 8px;
    display: flex; justify-content: center; gap: 6px; z-index: 2; pointer-events: none;
}
.pb-dot {
    pointer-events: auto;
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px;
    background: rgba(255, 255, 255, .65);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .28);
    cursor: pointer; transition: width .25s, background .25s;
}
.pb-dot[aria-current="true"] { width: 20px; background: #fff; }
.pb-dot:focus-visible { outline: 2px solid var(--brand, #FF5722); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .pb-dot, .pb-nav { transition: none; }
}