/*
 * Atomware Toolkit – Hoeksfontein: tape loop (opt-in: CSS class "atk-tape" on the container).
 * Port of Therioderm's ba-loop-styles-inline-css (@keyframes baTapeGlide, nowrap flex row,
 * width:max-content, linear infinite, pause on hover, grab/grabbing, 16px gap, fixed slots).
 * tape-loop.js adds the classes below; without the script nothing here matches except the
 * "no arrows, no dots" rule.
 *
 * Settings (CSS custom properties on the .atk-tape container):
 *   --atk-tape-duration  whole loop, e.g. 40s (default: JS, max(30s, cards x 4.5s), or data-atk-tape-speed)
 *   --atk-tape-slot      card width (default 260px desktop, 220px <=1024px, 78vw <=767px)
 *   --atk-tape-gap       gap between cards (default 16px)
 *   --atk-tape-fade      edge fade while looping (default 48px, 24px on phones; 0px = off)
 *   --atk-tape-justify   alignment of a static row that fits (default flex-start)
 */

/* No arrows and no dots inside an atk-tape container, ever (CSS only, so they never flash). */
.atk-tape .elementor-swiper-button,
.atk-tape .swiper-button-prev,
.atk-tape .swiper-button-next,
.atk-tape .swiper-pagination,
.atk-tape .swiper-scrollbar {
	display: none !important;
}

@keyframes atkTapeGlide {
	0% { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(var(--atk-tape-offset, -50%), 0, 0); }
}

/* Track = the old .swiper element (or a wrapper around a loop grid / ul.products). Only the
   track clips, so the page never scrolls sideways. */
.atk-tape__track {
	--atk-tape-slot-auto: 260px;
	--atk-tape-gap-auto: 16px;
	--atk-tape-fade-auto: 48px;
	position: relative;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	box-sizing: border-box;
}

@media (max-width: 1024px) {
	.atk-tape__track { --atk-tape-slot-auto: 220px; }
}

@media (max-width: 767px) {
	.atk-tape__track { --atk-tape-slot-auto: 78vw; --atk-tape-fade-auto: 24px; }
}

.atk-tape__row {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch;
	gap: var(--atk-tape-gap, var(--atk-tape-gap-auto)) !important;
	width: max-content !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	box-sizing: border-box;
}

.atk-tape__row::before,
.atk-tape__row::after {
	content: none !important;
	display: none !important;
}

/* Fixed pixel slots, as on Therioderm (% widths are unreliable in a nowrap max-content row). */
.atk-tape__row > .atk-tape__slide {
	flex: 0 0 var(--atk-tape-slot, var(--atk-tape-slot-auto)) !important;
	width: var(--atk-tape-slot, var(--atk-tape-slot-auto)) !important;
	min-width: var(--atk-tape-slot, var(--atk-tape-slot-auto)) !important;
	max-width: var(--atk-tape-slot, var(--atk-tape-slot-auto)) !important;
	height: auto;
	margin-left: 0 !important;
	margin-right: 0 !important;
	float: none !important;
	box-sizing: border-box !important;
}

.atk-tape__slide img {
	max-width: 100%;
	-webkit-user-drag: none;
	user-select: none;
}

/* Loop (more cards than fit): glide, pause on hover / hold / keyboard focus, drag. */
.atk-tape__track.atk-tape--loop {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--atk-tape-fade, var(--atk-tape-fade-auto)), #000 calc(100% - var(--atk-tape-fade, var(--atk-tape-fade-auto))), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--atk-tape-fade, var(--atk-tape-fade-auto)), #000 calc(100% - var(--atk-tape-fade, var(--atk-tape-fade-auto))), transparent 100%);
}

.atk-tape--loop > .atk-tape__row {
	animation: atkTapeGlide var(--atk-tape-duration, var(--atk-tape-duration-auto, 30s)) linear infinite;
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
	touch-action: pan-y;
	will-change: transform;
}

/* --hover (mouse only) and --hold (finger/pen down) are set by tape-loop.js. */
.atk-tape--loop.atk-tape--hover > .atk-tape__row,
.atk-tape--loop.atk-tape--hold > .atk-tape__row { animation-play-state: paused; }

/* Embedded players cannot be dragged or played on a moving strip; the card link still works. */
.atk-tape--loop iframe,
.atk-tape--loop video { pointer-events: none; }

.atk-tape--loop > .atk-tape__row:has(:focus-visible) { animation-play-state: paused; }

.atk-tape--loop.atk-tape--dragging > .atk-tape__row,
.atk-tape--loop.atk-tape--dragging > .atk-tape__row * { cursor: grabbing !important; }

/* Static (every card fits): no clones, no motion. */
.atk-tape--static > .atk-tape__row { justify-content: var(--atk-tape-justify, flex-start) !important; }

/* Swipe (prefers-reduced-motion): plain horizontal scroll row with scroll-snap. */
.atk-tape__track.atk-tape--swipe {
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.atk-tape--swipe > .atk-tape__row > .atk-tape__slide { scroll-snap-align: start; }

.atk-tape--static .atk-tape__clone,
.atk-tape--swipe .atk-tape__clone { display: none !important; }

/* Safety net if the setting flips before the script re-mounts. */
@media (prefers-reduced-motion: reduce) {
	.atk-tape--loop > .atk-tape__row { animation: none !important; }
	.atk-tape__track.atk-tape--loop {
		overflow-x: auto !important;
		scroll-snap-type: x mandatory;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.atk-tape--loop > .atk-tape__row > .atk-tape__slide { scroll-snap-align: start; }
	.atk-tape--loop .atk-tape__clone { display: none !important; }
}