/* Loja — setinhas nas imagens dos cards. Ver inc/loja-card-carousel.php
   Mesmo visual do carrossel do portfólio (assets/css/portfolio.css). */

.loja-cc { position: relative; }

/* Thumb em modo carrossel: a trilha ocupa a área 16:9 inteira. */
.loja-product__thumb--carousel { padding: 0; }
.loja-cc__track {
	position: absolute;
	inset: 0;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}
.loja-cc__track::-webkit-scrollbar { display: none; }
.loja-cc__slide {
	position: relative;
	flex: 0 0 100%;
	height: 100%;
	overflow: hidden;
	scroll-snap-align: start;
}
/* As regras do tema (img absoluta, cover, zoom no hover) seguem valendo dentro do slide. */
.loja-cc__slide img:not([src]) { visibility: hidden; }

.loja-cc__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	transform: translateY(-50%);
	width: 32px; height: 32px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0;
	border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--rp-ink-900, #111827);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s ease;
}
.loja-cc__arrow:hover { background: #fff; }
.loja-cc__arrow--prev { left: 8px; }
.loja-cc__arrow--next { right: 8px; }
/* Desktop: aparecem ao passar o mouse sobre o card. */
.loja-product:hover .loja-cc__arrow,
.loja-cc__arrow:focus-visible { opacity: 1; }
.loja-cc__arrow[disabled] { opacity: 0 !important; pointer-events: none; }
/* Celular/touch: sempre visíveis (e swipe com o dedo). */
@media (hover: none) { .loja-cc__arrow { opacity: 1; } }

.loja-cc__dots {
	position: absolute;
	left: 0; right: 0; bottom: 2px;
	z-index: 3;
	display: flex; justify-content: center;
	pointer-events: none;
}
/* Área de toque 24×24 (WCAG 2.5.8); o ponto visível é o ::before */
.loja-cc__dot {
	pointer-events: auto;
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 20px; height: 24px; padding: 0 3px;
	border: 0; background: transparent;
	cursor: pointer;
}
.loja-cc__dot::before {
	content: "";
	display: block;
	width: 7px; height: 7px;
	border-radius: 99px;
	background: rgba(255, 255, 255, .6);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
	transition: width .2s ease, background .2s ease;
}
.loja-cc__dot.is-active::before { width: 18px; background: #fff; }
.loja-cc__dot:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
	.loja-cc__track { scroll-behavior: auto; }
}