/* Layout */
.vp-carousel{
	display:flex;
	align-items:center;
	gap: 28px;
	position:relative;
}

.vp-controls{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap: 12px;
	user-select:none;
}

.vp-arrow{
	all: unset;
	cursor:pointer;
	font-size: 18px;
	line-height: 1;
	padding: 8px 10px;
	border-radius: 999px;
	box-shadow: 0 1px 4px rgba(0,0,0,.08);
	background:#fff;
}
.vp-arrow:focus{ outline: 2px solid #222; outline-offset: 2px; }
.vp-arrow:hover{ transform: translateY(-1px); }

.vp-count{
	font-family: inherit;
	font-size: 14px;
	color: #333;
	opacity:.75;
}

.vp-stage{
	margin:0;
	width: 100%;
	max-width: 640px; /* adjust to your content width */
	position:relative;
}

.vp-img{
	display:block;
	width:100%;
	height:auto;
	border-radius: 12px;
	transition: opacity .18s ease;
	opacity: .35;
}
.vp-img.is-active{ opacity: 1; }

/* Mobile: put arrows under the image horizontally */
@media (max-width: 768px){
	.vp-carousel{ flex-direction: column; align-items: stretch; }
	.vp-controls{
		flex-direction: row;
		justify-content: center;
		order: 2;
	}
	.vp-stage{ order: 1; max-width: 100%; }
}

/* Keep previous desktop styles ... */

/* Mobile carousel */
@media (max-width: 768px){
	.vp-carousel{ flex-direction: column; }

	.vp-stage{
		position: relative;
		overflow: hidden;
	}

	.vp-track{ will-change: transform; }

	.vp-slide img{
		width: 100%;
		display: block;
		border-radius: 12px;
	}

	.vp-arrow.vp-left,
	.vp-arrow.vp-right{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background: rgba(255,255,255,.85);
		padding: 8px 12px;
		border-radius: 999px;
		font-size: 20px;
	}
	.vp-arrow.vp-left{ left: 10px; }
	.vp-arrow.vp-right{ right: 10px; }

	.vp-dots{
		display: flex;
		justify-content: center;
		gap: 6px;
		margin-top: 10px;
	}
	.vp-dot{
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #ccc;
		cursor:pointer;
	}
	.vp-dot.active{ background: #333; }
}

/* mobile should not see desktop controls */
@media (max-width: 768px){
	.vp-controls { display: none !important; }
	.vp-stage img{
		cursor: default !important;
		pointer-events: auto; /* just normal tap */
	}
}