/**
 * Companion CSS for the Smooth Dimensions mobile category slider
 * (assets/js/mobile-category-slider.js), enqueued site-wide but only
 * doing anything on the three rows the JS targets. The JS adds/removes
 * the .is-mobile-slider-active / .mobile-slider-track / .mobile-slider-slide
 * classes itself, only inside the ≤767px breakpoint.
 *
 * If a targeted row's columns appear stacked instead of sliding, it's
 * almost always because Kadence's own "Mobile Layout" setting on that Row
 * block (Layout tab) is forcing flex-direction: column with higher
 * specificity. Either set that row's Mobile Layout back to "Row", or
 * uncomment the !important below.
 */

.is-mobile-slider-active {
	overflow: hidden;
}

.mobile-slider-track {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	/* flex-direction: row !important; */
	will-change: transform;
}

.mobile-slider-slide {
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
}

/* Stop the browser's own image drag-ghost / long-press callout from
   hijacking a swipe that starts on a card's photo — GSAP Draggable
   already sets user-select:none on the track itself, but not on these. */
.mobile-slider-track img,
.mobile-slider-track a {
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
	user-select: none;
}

.mobile-slider-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
}

.mobile-slider-dot {
	appearance: none;
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #dddbda; /* palette6 — border */
	cursor: pointer;
}

.mobile-slider-dot.is-active {
	background: #b18f73; /* palette1 — brand tan */
}

@media (min-width: 768px) {
	.mobile-slider-dots {
		display: none;
	}
}