.palette-woo-banner-slider {
	--palette-woo-banner-height: var(--palette-woo-banner-height-desktop, 540px);
	--palette-woo-banner-slide-width: var(--palette-woo-banner-slide-width-desktop, 100%);
	--palette-woo-banner-arrow-size: var(--palette-woo-banner-arrow-size-desktop, 50px);
	--palette-woo-banner-arrow-offset: var(--palette-woo-banner-arrow-offset-desktop, 18px);
	--palette-woo-banner-arrow-icon-size: var(--palette-woo-banner-arrow-icon-size-desktop, 32px);
	--palette-woo-banner-arrow-motion: var(--palette-woo-banner-arrow-motion-desktop, 18px);
	--palette-woo-banner-arrow-negative-motion: calc(var(--palette-woo-banner-arrow-motion) * -1);
	--palette-woo-banner-dot-size: var(--palette-woo-banner-dot-size-desktop, 10px);
	--palette-woo-banner-dot-gap: var(--palette-woo-banner-dot-gap-desktop, 10px);
	--palette-woo-banner-dot-margin: var(--palette-woo-banner-dot-margin-desktop, 16px);
	--palette-woo-banner-arrow-color: var(--palette-woo-banner-arrow-color-desktop, #3a3a3a);
	--palette-woo-banner-arrow-background: var(--palette-woo-banner-arrow-background-desktop, transparent);
	--palette-woo-banner-arrow-hover-background: var(--palette-woo-banner-arrow-hover-background-desktop, #ffffff);
	--palette-woo-banner-arrow-hover-color: var(--palette-woo-banner-arrow-hover-color-desktop, #3a3a3a);
	--palette-woo-banner-dot-color: var(--palette-woo-banner-dot-color-desktop, #b7b7b7);
	--palette-woo-banner-dot-active-color: var(--palette-woo-banner-dot-active-color-desktop, #3a3a3a);
	--palette-woo-banner-content-color: var(--palette-woo-banner-content-color-desktop, #ffffff);
	--palette-woo-banner-button-background: var(--palette-woo-banner-button-background-desktop, #ffffff);
	--palette-woo-banner-button-color: var(--palette-woo-banner-button-color-desktop, #202020);
	--palette-woo-banner-button-hover-background: var(--palette-woo-banner-button-hover-background-desktop, #f2f3f5);
	--palette-woo-banner-button-hover-color: var(--palette-woo-banner-button-hover-color-desktop, #202020);
	--palette-woo-banner-radius: 12px;
	position: relative;
	width: 100%;
	direction: rtl;
}

/* The script adds these only when the widget's «تمام‌عرض واقعی» control is enabled. */
#main-content.palette-woo-banner-slider-page {
	max-width: none !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
}

.e-con.palette-woo-banner-slider-container > .e-con-inner {
	max-width: none !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
}

.e-con.palette-woo-banner-slider-container {
	--padding-right: 0px !important;
	--padding-left: 0px !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
}

.palette-woo-banner-slider--full-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}

.palette-woo-banner-slider__track {
	display: flex;
	gap: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	border-radius: var(--palette-woo-banner-radius);
	outline: none;
}

.palette-woo-banner-slider__track::-webkit-scrollbar { display: none; }

.palette-woo-banner-slider__slide {
	position: relative;
	flex: 0 0 var(--palette-woo-banner-slide-width);
	height: var(--palette-woo-banner-height);
	overflow: hidden;
	scroll-snap-align: start;
	border-radius: var(--palette-woo-banner-radius);
	background: #f2f3f5;
}

.palette-woo-banner-slider__media,
.palette-woo-banner-slider__media picture,
.palette-woo-banner-slider__media img {
	display: block;
	width: 100%;
	height: 100%;
}

.palette-woo-banner-slider__media img { object-fit: cover; }

.palette-woo-banner-slider__content {
	position: absolute;
	top: 50%;
	max-width: min(35%, 420px);
	padding: 24px;
	transform: translateY(-50%);
	color: var(--palette-woo-banner-content-color);
	text-align: right;
	text-shadow: 0 1px 12px rgb(0 0 0 / 25%);
}

.palette-woo-banner-slider__content--right { right: 7%; }
.palette-woo-banner-slider__content--left { left: 7%; text-align: left; }
.palette-woo-banner-slider__content--center { right: 50%; max-width: min(60%, 640px); transform: translate(50%, -50%); text-align: center; }
.palette-woo-banner-slider__content h3 { margin: 0 0 10px; color: inherit; font-size: clamp(22px, 2vw, 42px); line-height: 1.25; }
.palette-woo-banner-slider__content p { margin: 0 0 18px; font-size: clamp(15px, 1.2vw, 22px); line-height: 1.75; }

.palette-woo-banner-slider__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 8px 22px;
	border-radius: 999px;
	background: var(--palette-woo-banner-button-background) !important;
	color: var(--palette-woo-banner-button-color) !important;
	font-weight: 700;
	text-decoration: none;
	text-shadow: none;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.palette-woo-banner-slider__button:hover,
.palette-woo-banner-slider__button:focus-visible { background: var(--palette-woo-banner-button-hover-background) !important; color: var(--palette-woo-banner-button-hover-color) !important; }

.palette-woo-banner-slider__arrows {
	position: absolute;
	top: 50%;
	right: var(--palette-woo-banner-arrow-offset);
	left: var(--palette-woo-banner-arrow-offset);
	display: flex;
	align-items: center;
	justify-content: space-between;
	direction: rtl;
	pointer-events: none;
	transform: translateY(-50%);
	z-index: 3;
}

.palette-woo-banner-slider__arrow {
	display: inline-grid;
	width: var(--palette-woo-banner-arrow-size);
	height: var(--palette-woo-banner-arrow-size);
	min-width: var(--palette-woo-banner-arrow-size) !important;
	min-height: var(--palette-woo-banner-arrow-size) !important;
	padding: 0;
	border: 0 !important;
	border-radius: 50%;
	place-items: center;
	background: var(--palette-woo-banner-arrow-background) !important;
	box-shadow: none;
	color: var(--palette-woo-banner-arrow-color) !important;
	cursor: pointer;
	font-size: var(--palette-woo-banner-arrow-icon-size);
	line-height: 1;
	opacity: 0;
	pointer-events: auto;
	transition: opacity .25s ease, transform .25s ease, background-color .25s ease;
}

.palette-woo-banner-slider:hover .palette-woo-banner-slider__arrow,
.palette-woo-banner-slider:focus-within .palette-woo-banner-slider__arrow { opacity: 1; }
.palette-woo-banner-slider__arrow--prev { transform: translateX(var(--palette-woo-banner-arrow-motion)); }
.palette-woo-banner-slider__arrow--next { transform: translateX(var(--palette-woo-banner-arrow-negative-motion)); }
.palette-woo-banner-slider:hover .palette-woo-banner-slider__arrow--prev,
.palette-woo-banner-slider:focus-within .palette-woo-banner-slider__arrow--prev { transform: translateX(0); }
.palette-woo-banner-slider:hover .palette-woo-banner-slider__arrow--next,
.palette-woo-banner-slider:focus-within .palette-woo-banner-slider__arrow--next { transform: translateX(0); }
.palette-woo-banner-slider__arrow:hover,
.palette-woo-banner-slider__arrow:focus-visible { background: var(--palette-woo-banner-arrow-hover-background) !important; color: var(--palette-woo-banner-arrow-hover-color) !important; outline: 2px solid currentColor; outline-offset: 2px; }

.palette-woo-banner-slider__dots {
	display: flex;
	justify-content: center;
	gap: var(--palette-woo-banner-dot-gap);
	margin: var(--palette-woo-banner-dot-margin) 0 0;
	direction: ltr;
	z-index: 3;
}

.palette-woo-banner-slider__dots button {
	width: var(--palette-woo-banner-dot-size);
	height: var(--palette-woo-banner-dot-size);
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--palette-woo-banner-dot-color) !important;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

.palette-woo-banner-slider__dots button[aria-selected="true"] { width: var(--palette-woo-banner-dot-size); background: var(--palette-woo-banner-dot-active-color) !important; transform: scale(1.15); }
.palette-woo-banner-slider__empty { padding: 24px; border: 1px dashed #b9bec5; border-radius: 8px; color: #5b6470; text-align: center; }

@media (min-width: 768px) and (max-width: 1024px) {
	.palette-woo-banner-slider {
		--palette-woo-banner-height: var(--palette-woo-banner-height-tablet, 400px);
		--palette-woo-banner-slide-width: var(--palette-woo-banner-slide-width-tablet, 100%);
		--palette-woo-banner-arrow-size: var(--palette-woo-banner-arrow-size-tablet, 50px);
		--palette-woo-banner-arrow-offset: var(--palette-woo-banner-arrow-offset-tablet, 18px);
		--palette-woo-banner-arrow-icon-size: var(--palette-woo-banner-arrow-icon-size-tablet, 32px);
		--palette-woo-banner-arrow-motion: var(--palette-woo-banner-arrow-motion-tablet, 18px);
		--palette-woo-banner-dot-size: var(--palette-woo-banner-dot-size-tablet, 10px);
		--palette-woo-banner-dot-gap: var(--palette-woo-banner-dot-gap-tablet, 10px);
		--palette-woo-banner-dot-margin: var(--palette-woo-banner-dot-margin-tablet, 16px);
		--palette-woo-banner-arrow-color: var(--palette-woo-banner-arrow-color-tablet, #3a3a3a);
		--palette-woo-banner-arrow-background: var(--palette-woo-banner-arrow-background-tablet, transparent);
		--palette-woo-banner-arrow-hover-background: var(--palette-woo-banner-arrow-hover-background-tablet, #ffffff);
		--palette-woo-banner-arrow-hover-color: var(--palette-woo-banner-arrow-hover-color-tablet, #3a3a3a);
		--palette-woo-banner-dot-color: var(--palette-woo-banner-dot-color-tablet, #b7b7b7);
		--palette-woo-banner-dot-active-color: var(--palette-woo-banner-dot-active-color-tablet, #3a3a3a);
		--palette-woo-banner-content-color: var(--palette-woo-banner-content-color-tablet, #ffffff);
		--palette-woo-banner-button-background: var(--palette-woo-banner-button-background-tablet, #ffffff);
		--palette-woo-banner-button-color: var(--palette-woo-banner-button-color-tablet, #202020);
		--palette-woo-banner-button-hover-background: var(--palette-woo-banner-button-hover-background-tablet, #f2f3f5);
		--palette-woo-banner-button-hover-color: var(--palette-woo-banner-button-hover-color-tablet, #202020);
	}
}

@media (max-width: 767px) {
	.palette-woo-banner-slider {
		--palette-woo-banner-height: var(--palette-woo-banner-height-mobile, 320px);
		--palette-woo-banner-slide-width: var(--palette-woo-banner-slide-width-mobile, 88%);
		--palette-woo-banner-arrow-size: var(--palette-woo-banner-arrow-size-mobile, 42px);
		--palette-woo-banner-arrow-offset: var(--palette-woo-banner-arrow-offset-mobile, 12px);
		--palette-woo-banner-arrow-icon-size: var(--palette-woo-banner-arrow-icon-size-mobile, 26px);
		--palette-woo-banner-arrow-motion: var(--palette-woo-banner-arrow-motion-mobile, 12px);
		--palette-woo-banner-dot-size: var(--palette-woo-banner-dot-size-mobile, 7px);
		--palette-woo-banner-dot-gap: var(--palette-woo-banner-dot-gap-mobile, 8px);
		--palette-woo-banner-dot-margin: var(--palette-woo-banner-dot-margin-mobile, 12px);
		--palette-woo-banner-arrow-color: var(--palette-woo-banner-arrow-color-mobile, #3a3a3a);
		--palette-woo-banner-arrow-background: var(--palette-woo-banner-arrow-background-mobile, transparent);
		--palette-woo-banner-arrow-hover-background: var(--palette-woo-banner-arrow-hover-background-mobile, #ffffff);
		--palette-woo-banner-arrow-hover-color: var(--palette-woo-banner-arrow-hover-color-mobile, #3a3a3a);
		--palette-woo-banner-dot-color: var(--palette-woo-banner-dot-color-mobile, #b7b7b7);
		--palette-woo-banner-dot-active-color: var(--palette-woo-banner-dot-active-color-mobile, #3a3a3a);
		--palette-woo-banner-content-color: var(--palette-woo-banner-content-color-mobile, #ffffff);
		--palette-woo-banner-button-background: var(--palette-woo-banner-button-background-mobile, #ffffff);
		--palette-woo-banner-button-color: var(--palette-woo-banner-button-color-mobile, #202020);
		--palette-woo-banner-button-hover-background: var(--palette-woo-banner-button-hover-background-mobile, #f2f3f5);
		--palette-woo-banner-button-hover-color: var(--palette-woo-banner-button-hover-color-mobile, #202020);
		overflow: visible;
	}

	.palette-woo-banner-slider__track { gap: 12px; padding-inline: 18px; border-radius: 0; scroll-padding-inline: 18px; }
	.palette-woo-banner-slider--mobile-full .palette-woo-banner-slider__track { gap: 0; padding-inline: 0; scroll-padding-inline: 0; }
	.palette-woo-banner-slider--mobile-full .palette-woo-banner-slider__slide { flex-basis: 100%; }
	.palette-woo-banner-slider__content { max-width: 72%; padding: 15px; }
	.palette-woo-banner-slider__content--right { right: 3%; }
	.palette-woo-banner-slider__content--left { left: 3%; }
	.palette-woo-banner-slider__content--center { max-width: 86%; }
	.palette-woo-banner-slider__content h3 { margin-bottom: 6px; font-size: clamp(17px, 5vw, 24px); }
	.palette-woo-banner-slider__content p { margin-bottom: 10px; font-size: 13px; line-height: 1.55; }
	.palette-woo-banner-slider__button { min-height: 34px; padding: 6px 15px; font-size: 13px; }
	.palette-woo-banner-slider__arrows { display: none; }
	.palette-woo-banner-slider--mobile-arrows .palette-woo-banner-slider__arrows { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
	.palette-woo-banner-slider__track { scroll-behavior: auto; }
}