/*
    assets/css/produto-carrossel.css — CARROSSEL DA IMAGEM PRINCIPAL NA PÁGINA DO PRODUTO (26/10/2026, pedido do CW)

    Só é carregado quando o layout "rede social" está ativo (shop/produto/index.php: ls_ativo()). Mesmo visual e comportamento do carrossel
    dos posts (feed-social.css: .ls-track/.ls-slide): scroll-snap nativo, sem biblioteca, sem autoplay. O JS é assets/js/componentes/produto-carrossel.js.
    Estrutura: <figure.cw-produto-pagina__principal.cwpc> > .cwpc-track > .cwpc-slide (a 1ª leva o <img id="cwProdutoImg"> de sempre)
    + contador, setas e bolinhas + o coração (fav_botao, fora do trilho: não rola).
*/
.cwpc .cwpc-track {
    display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
.cwpc .cwpc-track::-webkit-scrollbar { display: none; }
.cwpc .cwpc-track:focus-visible { outline-offset: -3px; border-radius: 0; }
.cwpc .cwpc-slide {
    position: relative; flex: 0 0 100%; width: 100%; height: 100%; overflow: hidden; background: #fff;
    scroll-snap-align: start; scroll-snap-stop: always; isolation: isolate;
}
.cwpc .cwpc-slide img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; -webkit-user-drag: none; user-select: none; }

/* imagens 2+ ainda sem src (chegam no 1º uso do carrossel): não mostram o texto alternativo */
.cwpc .cwpc-slide img:not([src]) { visibility: hidden; }

/* Máscara da capa: no produto.css ela cobre a <figure> inteira; no carrossel ela vai só na 1ª imagem (como hoje, a mesma --cw-mascara).
   Desligada no admin = sem a classe .cwpc--masc (e o header.php continua escondendo a ::after da figure). */
.cw-produto-pagina__principal.cwpc::after { content: none; }
.cwpc--masc .cwpc-slide--capa::after { content: ""; position: absolute; inset: 0; background: var(--cw-mascara); pointer-events: none; z-index: 2; }

/* contador 1/N: embaixo à esquerda (em cima à direita fica o coração; em cima à esquerda, a máscara) */
.cwpc .cwpc-counter {
    position: absolute; left: 10px; bottom: 10px; z-index: 3; padding: 3px 9px; border-radius: 99px;
    background: rgba(15, 23, 42, .62); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.3;
    pointer-events: none; font-variant-numeric: tabular-nums;
}
/* bolinhas */
.cwpc .cwpc-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.cwpc .cwpc-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .75); box-shadow: 0 0 0 1px rgba(15, 23, 42, .25); transition: background .2s, transform .2s; }
.cwpc .cwpc-dots i.is-on { background: var(--cor-marca, #008a20); transform: scale(1.25); box-shadow: 0 0 0 1.5px #fff; }
/* setas ‹ › : sempre visíveis no computador; somem no toque e no início/fim */
.cwpc .cwpc-arrow {
    position: absolute; top: 50%; z-index: 4; width: 40px; height: 40px; margin: -20px 0 0; padding: 0; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .94); color: #0f172a; cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 6px rgba(15, 23, 42, .3); transition: background .15s;
}
.cwpc .cwpc-arrow[hidden] { display: none; }
.cwpc .cwpc-arrow--prev { left: 10px; }
.cwpc .cwpc-arrow--next { right: 10px; }
.cwpc .cwpc-arrow:hover { background: #fff; }
@media (hover: none) { .cwpc .cwpc-arrow { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
    .cwpc .cwpc-track { scroll-behavior: auto; }
    .cwpc .cwpc-dots i, .cwpc .cwpc-arrow { transition: none; }
}