.gd-cl-container {
	width: 100%;
	box-sizing: border-box;
}

.gd-cl-grid {
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}

.gd-cl-grid:active {
	cursor: grabbing;
}

.gd-cl-track {
	display: flex;
	width: 100%;
	transition: transform var(--gd-cl-transition-speed, 0.8s) cubic-bezier(0.65, 0, 0.35, 1);
	will-change: transform;
}

.gd-cl-page {
	display: grid;
	flex: 0 0 100%;
	width: 100%;
	box-sizing: border-box;
}

.gd-cl-box {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: var(--gd-cl-padding-top, 24px);
	padding-right: var(--gd-cl-padding-right, 24px);
	padding-bottom: var(--gd-cl-padding-bottom, 24px);
	padding-left: var(--gd-cl-padding-left, 24px);
}

.gd-cl-bordered .gd-cl-box {
	border-right: var(--gd-cl-border-width, 1px) solid var(--gd-cl-border-color, #e2e2e2);
	border-bottom: var(--gd-cl-border-width, 1px) solid var(--gd-cl-border-color, #e2e2e2);
}

.gd-cl-bordered .gd-cl-box.gd-cl-first-col {
	border-left: var(--gd-cl-border-width, 1px) solid var(--gd-cl-border-color, #e2e2e2);
}

.gd-cl-bordered .gd-cl-box.gd-cl-first-row {
	border-top: var(--gd-cl-border-width, 1px) solid var(--gd-cl-border-color, #e2e2e2);
}

.gd-cl-box {
	position: relative;
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.04));
	background-size: 200% 100%;
	animation: gd-cl-shimmer 1.4s ease-in-out infinite;
}

.gd-cl-box.gd-cl-loaded {
	background-image: none;
	animation: none;
}

.gd-cl-box img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.gd-cl-box.gd-cl-loaded img {
	opacity: 1;
}

@keyframes gd-cl-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Grid mode: mobile continuous scroll (multi-row, like Carousel) */
.gd-cl-continuous {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gd-cl-continuous-row {
	width: 100%;
	overflow: hidden;
}

.gd-cl-continuous-track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: var(--gd-cl-carousel-gap, 16px);
	animation: gd-cl-scroll-left var(--gd-cl-continuous-duration, 20s) linear infinite;
	will-change: transform;
}

.gd-cl-continuous-box {
	flex: 0 0 auto;
	width: var(--gd-cl-continuous-item-width, 140px);
	height: var(--gd-cl-continuous-item-height, 90px);
}

.gd-cl-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
}

.gd-cl-dot {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	/* Visible dot stays 8px, but the tappable area is enlarged for mobile thumbs. */
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	min-height: 28px !important;
	max-width: 28px !important;
	max-height: 28px !important;
	border-radius: 50% !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0 !important;
	font-size: 0 !important;
	background: none !important;
	cursor: pointer;
}

.gd-cl-dot::before {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--gd-cl-dot-color, #d0d0d0);
	transition: background 0.2s ease, transform 0.2s ease;
}

.gd-cl-dot.active::before {
	background-color: var(--gd-cl-dot-active-color, #333333);
	transform: scale(1.2);
}

.gd-cl-dot:hover,
.gd-cl-dot:focus {
	border: none !important;
	box-shadow: none !important;
}

.gd-cl-dot:focus-visible {
	outline: 2px solid var(--gd-cl-dot-active-color, #333333);
	outline-offset: 2px;
}

/* Carousel mode */
.gd-cl-carousel {
	width: 100%;
	overflow: hidden;
}

.gd-cl-carousel-track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: var(--gd-cl-carousel-gap, 20px);
	animation: gd-cl-scroll-left var(--gd-cl-carousel-duration, 25s) linear infinite;
	will-change: transform;
}

.gd-cl-carousel-track.gd-cl-direction-right {
	animation-name: gd-cl-scroll-right;
}

.gd-cl-pause-hover:hover .gd-cl-carousel-track {
	animation-play-state: paused;
}

.gd-cl-carousel-item {
	box-sizing: border-box;
	flex: 0 0 auto;
	width: var(--gd-cl-item-width, 160px);
	height: var(--gd-cl-item-height, 100px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: var(--gd-cl-padding-top, 24px);
	padding-right: var(--gd-cl-padding-right, 24px);
	padding-bottom: var(--gd-cl-padding-bottom, 24px);
	padding-left: var(--gd-cl-padding-left, 24px);
}

.gd-cl-carousel.gd-cl-bordered .gd-cl-carousel-item {
	border: var(--gd-cl-border-width, 1px) solid var(--gd-cl-border-color, #e2e2e2);
}

.gd-cl-carousel-item img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

@keyframes gd-cl-scroll-left {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@keyframes gd-cl-scroll-right {
	from { transform: translateX(-50%); }
	to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.gd-cl-carousel-track {
		animation: none;
	}

	.gd-cl-continuous-track {
		animation: none;
	}

	.gd-cl-track {
		transition: none;
	}

	.gd-cl-box {
		animation: none;
		background-image: none;
	}

	.gd-cl-box img {
		opacity: 1;
		transition: none;
	}
}