/**
 * Pure Query — Slider Styles
 * Custom styles on top of Swiper for navigation, pagination, colors and transparency.
 */

/* Outer Slider Wrapper */
.pq-swiper-outer-wrap {
	position: relative;
	background: var(--pq-slider-bg, transparent);
	padding: var(--pq-slider-padding, 0px);
	border-radius: var(--pq-slider-radius, 0px);
	box-sizing: border-box;
}

/* Base Swiper Container */
.pq-swiper {
	position: relative;
	overflow: hidden;
	padding-bottom: 24px;
}

.pq-swiper-outer-wrap.pq-pag-pos-none .pq-swiper,
.pq-swiper-outer-wrap.pq-pag-pos-top-center .pq-swiper,
.pq-swiper-outer-wrap.pq-pag-pos-top-left .pq-swiper,
.pq-swiper-outer-wrap.pq-pag-pos-top-right .pq-swiper {
	padding-bottom: 0;
}

/* Padding fix for pure-attributes buy panel shadow */
.pq-swiper:has(.pure-loop-buy-wrapper) {
	padding-left: 10px !important;
	padding-right: 10px !important;
}

.pq-swiper .swiper-slide {
	height: auto;
	box-sizing: border-box;
}

.pq-swiper .swiper-slide .product,
.pq-swiper .swiper-slide li.product,
.pq-swiper .swiper-slide .pq-card-item {
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	box-sizing: border-box !important;
}

/* Top bar controls (for top-right / top-left arrows & pagination) */
.pq-slider-top-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
	gap: 15px;
}

.pq-nav-arrows-group {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	position: relative;
}

.pq-nav-arrows-group .swiper-button-next,
.pq-nav-arrows-group .swiper-button-prev {
	position: static !important;
	margin: 0 !important;
}

/* ==========================================================================
   NAVIGATION ARROWS STYLING
   ========================================================================== */
.pq-swiper-outer-wrap .swiper-button-next,
.pq-swiper-outer-wrap .swiper-button-prev {
	color: var(--pq-arrow-color, #1d2327);
	background: var(--pq-arrow-bg, rgba(255, 255, 255, 0.9));
	width: 38px;
	height: 38px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	transition: all 0.2s ease;
	margin-top: -19px;
	z-index: 10;
}

.pq-swiper-outer-wrap .swiper-button-next:hover,
.pq-swiper-outer-wrap .swiper-button-prev:hover {
	color: var(--pq-arrow-hover-color, #ffffff);
	background: var(--pq-arrow-hover-bg, #1d2327);
}

.pq-swiper-outer-wrap .swiper-button-next::after,
.pq-swiper-outer-wrap .swiper-button-prev::after {
	font-size: 14px;
	font-weight: 700;
}

.pq-swiper-outer-wrap .swiper-button-disabled {
	opacity: 0.35 !important;
	cursor: not-allowed;
}

/* Arrow Shapes / Styles */
.pq-swiper-outer-wrap.pq-nav-style-clean .swiper-button-next,
.pq-swiper-outer-wrap.pq-nav-style-clean .swiper-button-prev {
	background: transparent !important;
	box-shadow: none !important;
}

.pq-swiper-outer-wrap.pq-nav-style-circle .swiper-button-next,
.pq-swiper-outer-wrap.pq-nav-style-circle .swiper-button-prev {
	border-radius: 50% !important;
}

.pq-swiper-outer-wrap.pq-nav-style-rounded .swiper-button-next,
.pq-swiper-outer-wrap.pq-nav-style-rounded .swiper-button-prev {
	border-radius: 8px !important;
}

.pq-swiper-outer-wrap.pq-nav-style-square .swiper-button-next,
.pq-swiper-outer-wrap.pq-nav-style-square .swiper-button-prev {
	border-radius: 0px !important;
}

.pq-swiper-outer-wrap.pq-nav-style-outline .swiper-button-next,
.pq-swiper-outer-wrap.pq-nav-style-outline .swiper-button-prev {
	background: transparent !important;
	border: 2px solid var(--pq-arrow-color, #1d2327) !important;
	box-shadow: none !important;
}

/* Arrow Positions — sides-outside: arrows are rendered outside .pq-swiper, inside .pq-swiper-outer-wrap */
.pq-swiper-outer-wrap.pq-nav-pos-sides-outside {
	padding-left: 48px;
	padding-right: 48px;
}

.pq-swiper-outer-wrap.pq-nav-pos-sides-outside>.swiper-button-prev,
.pq-swiper-outer-wrap.pq-nav-pos-sides-outside>.swiper-button-next {
	position: absolute;
	top: 50%;
	margin-top: -19px;
}

.pq-swiper-outer-wrap.pq-nav-pos-sides-outside>.swiper-button-prev {
	left: 0;
}

.pq-swiper-outer-wrap.pq-nav-pos-sides-outside>.swiper-button-next {
	right: 0;
}

.pq-nav-bottom-group {
	display: flex;
	justify-content: center;
	margin-top: 15px;
	z-index: 0;
}

.pq-swiper-outer-wrap.pq-nav-pos-bottom-left .pq-nav-bottom-group {
	justify-content: flex-start;
}

.pq-swiper-outer-wrap.pq-nav-pos-bottom-right .pq-nav-bottom-group {
	justify-content: flex-end;
}

/* ==========================================================================
   PAGINATION STYLING (BULLETS, FRACTION, PROGRESSBAR)
   ========================================================================== */
.pq-swiper-outer-wrap .swiper-pagination {
	position: absolute;
	transition: all 0.2s;
}

/* Bullets */
.pq-swiper-outer-wrap .swiper-pagination-bullet {
	background: var(--pq-bullet-color, rgba(195, 196, 199, 0.8));
	opacity: 1;
	transition: all 0.25s ease;
	margin: 0 4px !important;
}

.pq-swiper-outer-wrap .swiper-pagination-bullet-active {
	background: var(--pq-bullet-active-color, #1d2327);
}

/* Bullet Shapes */
.pq-swiper-outer-wrap.pq-bullet-style-dots .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.pq-swiper-outer-wrap.pq-bullet-style-dots .swiper-pagination-bullet-active {
	width: 22px;
	border-radius: 10px;
}

.pq-swiper-outer-wrap.pq-bullet-style-pills .swiper-pagination-bullet {
	width: 14px;
	height: 4px;
	border-radius: 4px;
}

.pq-swiper-outer-wrap.pq-bullet-style-pills .swiper-pagination-bullet-active {
	width: 28px;
}

.pq-swiper-outer-wrap.pq-bullet-style-squares .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	border-radius: 0;
}

.pq-swiper-outer-wrap.pq-bullet-style-squares .swiper-pagination-bullet-active {
	width: 20px;
}

/* Fraction */
.pq-swiper-outer-wrap .swiper-pagination-fraction {
	font-size: 13px;
	font-weight: 600;
	color: var(--pq-bullet-active-color, #1d2327);
}

/* Progressbar */
.pq-swiper-outer-wrap .swiper-pagination-progressbar {
	background: var(--pq-bullet-color, rgba(195, 196, 199, 0.5));
	height: 4px;
	border-radius: 2px;
	overflow: hidden;
	position: relative;
}

.pq-swiper-outer-wrap .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	background: var(--pq-bullet-active-color, #1d2327);
}

/* Pagination Positions — override Swiper defaults */

/* Base overrides for inside swiper pagination */
.pq-swiper-outer-wrap .pq-swiper .swiper-pagination {
	bottom: 0 !important;
}

/* Bottom-center */
.pq-swiper-outer-wrap.pq-pag-pos-bottom-center .pq-swiper .swiper-pagination {
	text-align: center;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
}

.pq-swiper-outer-wrap.pq-pag-pos-bottom-center .pq-swiper .swiper-pagination.swiper-pagination-bullets-dynamic {
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%);
}

/* Bottom-left */
.pq-swiper-outer-wrap.pq-pag-pos-bottom-left .pq-swiper .swiper-pagination {
	text-align: left !important;
	left: 10px !important;
	right: auto !important;
	width: auto !important;
}

.pq-swiper-outer-wrap.pq-pag-pos-bottom-left .pq-swiper .swiper-pagination.swiper-pagination-bullets-dynamic {
	left: 10px !important;
	transform: none !important;
}

/* Bottom-right */
.pq-swiper-outer-wrap.pq-pag-pos-bottom-right .pq-swiper .swiper-pagination {
	text-align: right !important;
	right: 10px !important;
	left: auto !important;
	width: auto !important;
}

.pq-swiper-outer-wrap.pq-pag-pos-bottom-right .pq-swiper .swiper-pagination.swiper-pagination-bullets-dynamic {
	right: 10px !important;
	left: auto !important;
	transform: none !important;
}

/* Top positions — static inside flex top-bar */
.pq-swiper-outer-wrap.pq-pag-pos-top-center .pq-slider-top-bar .swiper-pagination,
.pq-swiper-outer-wrap.pq-pag-pos-top-left .pq-slider-top-bar .swiper-pagination,
.pq-swiper-outer-wrap.pq-pag-pos-top-right .pq-slider-top-bar .swiper-pagination {
	position: relative !important;
	display: inline-block;
	top: auto !important;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	vertical-align: middle;
}

.pq-swiper-outer-wrap.pq-pag-pos-top-center .pq-slider-top-bar .swiper-pagination:not(.swiper-pagination-bullets-dynamic),
.pq-swiper-outer-wrap.pq-pag-pos-top-left .pq-slider-top-bar .swiper-pagination:not(.swiper-pagination-bullets-dynamic),
.pq-swiper-outer-wrap.pq-pag-pos-top-right .pq-slider-top-bar .swiper-pagination:not(.swiper-pagination-bullets-dynamic) {
	width: auto !important;
}

.pq-swiper-outer-wrap.pq-pag-pos-top-left .pq-slider-top-bar {
	justify-content: flex-start;
}

.pq-swiper-outer-wrap.pq-pag-pos-top-center .pq-slider-top-bar {
	justify-content: center;
}

.pq-swiper-outer-wrap.pq-pag-pos-top-right .pq-slider-top-bar {
	justify-content: flex-end;
}

/* Responsive adjustments */
@media (max-width: 768px) {

	.pq-swiper-outer-wrap .swiper-button-next,
	.pq-swiper-outer-wrap .swiper-button-prev {
		width: 32px;
		height: 32px;
		margin-top: -16px;
	}

	.pq-swiper-outer-wrap .swiper-button-next::after,
	.pq-swiper-outer-wrap .swiper-button-prev::after {
		font-size: 12px;
	}

	.pq-swiper-outer-wrap.pq-nav-pos-sides-outside {
		padding-left: 0;
		padding-right: 0;
	}

	.pq-swiper-outer-wrap.pq-nav-pos-sides-outside>.swiper-button-prev {
		left: 5px;
	}

	.pq-swiper-outer-wrap.pq-nav-pos-sides-outside>.swiper-button-next {
		right: 5px;
	}
}