/**
 * Strictly Stereo — Native Gallery Skin styles
 *
 * Colours below are plain fallback values — swap them for your actual
 * design-token custom properties (rust-red accent, paper/near-black
 * neutrals) so this matches the rest of the site rather than guessing
 * at your variable names.
 */

.ss-gskin__dots {
	display: none; /* shown only on mobile, see media query below */
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	z-index: 2;
	justify-content: center; /* centers the pill within the full-width bar */
}

.ss-gskin__dots-inner {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 999px;
	background-color: rgba( 247, 247, 247, 0 ); /* 3% grey — opacity currently 0 (invisible); raise the last value (0–1) if you want the pill visible again */
}

.ss-gskin__dot {
	width: 6px;
	height: 6px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 3px;
	background-color: #c4c4c4; /* grey — swap for your actual grey token */
	transition: width 0.18s ease, background-color 0.18s ease;
}

.ss-gskin__dot.is-active {
	width: 22px; /* the "dash" */
	background-color: #000; /* black — swap for your actual near-black token */
}

@media ( max-width: 600px ) {
	/* WooCommerce's own thumbnail rail — replaced by the dot bar below */
	.wc-block-product-gallery-thumbnails {
		display: none !important;
	}

	.ss-gskin__dots {
		display: flex;
	}
}