/**
 * 5forests Slider Block
 *
 * Layout, CLS skeleton, editor preview, and chrome positions.
 * Theme can restyle .swiper-button-prev / .swiper-button-next.
 */

.fiveforests-slider {
	position: relative;
	display: block !important;
	--swiper-scrollbar-bottom: -2rem;
}

.fiveforests-slider .swiper-slide {
	visibility: visible;
	opacity: 1;
}

.fiveforests-slider .fiveforests-block-link {
	-webkit-user-drag: none;
	user-select: none;
}

.fiveforests-slider .swiper-slide:not(.swiper-slide-visible, .swiper-slide-active, .swiper-slide-next, .swiper-slide-prev) {
	visibility: hidden;
	opacity: 0;
}

/*
 * CLS guard: before Swiper wraps children, paint a clipped flex row sized to
 * slides-per-view (--fiveforests-slider-spv*). Classic themes nest slides in
 * .wp-block-group__inner-container; block themes use direct children. Stop as
 * soon as .swiper-initialized appears. :has() is required — older browsers
 * keep the stacked layout until JS runs.
 */
[data-fiveforests-slider]:not(:has(.swiper-initialized)) {
	overflow: hidden;
}

/*
 * Block theme / no inner wrapper: the group itself is the track.
 * Keep the outer wrapper as display:block when an inner-container exists so
 * that wrapper is not sized as a single slide.
 */
[data-fiveforests-slider].fiveforests-slider--group:not(:has(.swiper-initialized)):not(.fiveforests-slider--editor-preview):not(:has(> .wp-block-group__inner-container)):not(:has(> .fiveforests-slider__viewport)) {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--fiveforests-slider-gap-active, var(--fiveforests-slider-gap, 16px));
}

[data-fiveforests-slider].fiveforests-slider--group:not(:has(.swiper-initialized)):not(.fiveforests-slider--editor-preview):not(:has(> .wp-block-group__inner-container)):not(:has(> .fiveforests-slider__viewport)) > *:not(.fiveforests-slider__viewport):not(.fiveforests-slider__chrome) {
	box-sizing: border-box;
	flex: 0 0 var(--fiveforests-slider-slide-size, 100%) !important;
	width: var(--fiveforests-slider-slide-size, 100%) !important;
	max-width: var(--fiveforests-slider-slide-size, 100%) !important;
	min-width: var(--fiveforests-slider-slide-size, 100%) !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/*
 * Classic theme: the inner-container wrapper is the track.
 * Do not treat child Groups as the track — they also carry is-layout-* /
 * *-is-layout-* classes for their own flow/constrained layout.
 */
[data-fiveforests-slider]:not(:has(.swiper-initialized)):not(.fiveforests-slider--editor-preview) > .wp-block-group__inner-container {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: flex-start;
	gap: var(--fiveforests-slider-gap-active, var(--fiveforests-slider-gap, 16px));
	flex: 1 1 auto;
	max-width: none !important;
	min-width: 0;
	width: 100% !important;
	overflow: hidden;
}

[data-fiveforests-slider]:not(:has(.swiper-initialized)):not(.fiveforests-slider--editor-preview) > .wp-block-group__inner-container > * {
	box-sizing: border-box;
	flex: 0 0 var(--fiveforests-slider-slide-size, 100%) !important;
	width: var(--fiveforests-slider-slide-size, 100%) !important;
	max-width: var(--fiveforests-slider-slide-size, 100%) !important;
	min-width: var(--fiveforests-slider-slide-size, 100%) !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.fiveforests-slider--group:not(:has(.swiper-initialized)):not(.fiveforests-slider--editor-preview):has(> .fiveforests-slider__viewport) {
	display: block !important;
}

.fiveforests-slider--group:not(:has(.swiper-initialized)):not(.fiveforests-slider--editor-preview) .fiveforests-slider__viewport .swiper-wrapper {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--fiveforests-slider-gap-active, var(--fiveforests-slider-gap, 16px));
	overflow: hidden;
}

.fiveforests-slider--group:not(:has(.swiper-initialized)):not(.fiveforests-slider--editor-preview) .fiveforests-slider__viewport .swiper-slide {
	box-sizing: border-box;
	flex: 0 0 var(--fiveforests-slider-slide-size, 100%);
	width: var(--fiveforests-slider-slide-size, 100%);
	max-width: var(--fiveforests-slider-slide-size, 100%);
	min-width: var(--fiveforests-slider-slide-size, 100%);
	margin-right: 0 !important;
	visibility: visible;
	opacity: 1;
}

.fiveforests-slider--stretch-slides.fiveforests-slider--group:not(:has(.swiper-initialized)):not(.fiveforests-slider--editor-preview),
.fiveforests-slider--stretch-slides[data-fiveforests-slider]:not(:has(.swiper-initialized)):not(.fiveforests-slider--editor-preview) > .wp-block-group__inner-container {
	align-items: stretch !important;
}

.fiveforests-slider--stretch-slides.fiveforests-slider--group:not(:has(.swiper-initialized)):not(.fiveforests-slider--editor-preview) .fiveforests-slider__viewport .swiper-slide,
.fiveforests-slider--stretch-slides.fiveforests-slider--group:not(:has(.swiper-initialized)):not(.fiveforests-slider--editor-preview) > *:not(.fiveforests-slider__viewport):not(.fiveforests-slider__chrome),
.fiveforests-slider--stretch-slides[data-fiveforests-slider]:not(:has(.swiper-initialized)):not(.fiveforests-slider--editor-preview) > .wp-block-group__inner-container > * {
	align-self: stretch;
	height: auto;
}

.fiveforests-slider--query:not(:has(.swiper-initialized)):not(.fiveforests-slider--editor-preview) .wp-block-post-template {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--fiveforests-slider-gap-active, var(--fiveforests-slider-gap, 16px));
	overflow: hidden;
}

.fiveforests-slider--query:not(:has(.swiper-initialized)):not(.fiveforests-slider--editor-preview) .wp-block-post-template > * {
	box-sizing: border-box;
	flex: 0 0 var(--fiveforests-slider-slide-size, 100%);
	max-width: var(--fiveforests-slider-slide-size, 100%);
	min-width: var(--fiveforests-slider-slide-size, 100%);
}

.fiveforests-slider--collection .swiper-wrapper {
	gap: 0;
	display: flex;
}

.fiveforests-slider--collection:not(:has(.swiper-initialized)):not(.fiveforests-slider--editor-preview):not(.c7-collection-slider--has-pagination) .c7-product-collection__products,
.fiveforests-slider--collection:not(:has(.swiper-initialized)):not(.fiveforests-slider--editor-preview):not(.c7-collection-slider--has-pagination) .c7-product-collection__product-list {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: var(--fiveforests-slider-gap-active, var(--fiveforests-slider-gap, 16px));
	overflow: hidden;
}

.fiveforests-slider--collection:not(:has(.swiper-initialized)):not(.fiveforests-slider--editor-preview):not(.c7-collection-slider--has-pagination) .c7-product-collection__product-list > .c7-product {
	box-sizing: border-box;
	flex: 0 0 var(--fiveforests-slider-slide-size, 100%);
	max-width: var(--fiveforests-slider-slide-size, 100%);
	min-width: var(--fiveforests-slider-slide-size, 100%);
	margin-bottom: 0;
}

/*
 * Editor canvas: horizontal track sized to slides-per-view.
 * On current WP the Group block IS .block-editor-block-list__layout, and each
 * child Group is too. Only flex the slider root (or a legacy anonymous inner
 * canvas) — never a child .wp-block, or heading/paragraph go into a row.
 */
.editor-styles-wrapper .fiveforests-slider--editor-preview.fiveforests-slider--group.block-editor-block-list__layout,
.editor-styles-wrapper .fiveforests-slider--editor-preview.fiveforests-slider--group > .block-editor-block-list__layout:not(.wp-block):not([data-type]) {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: flex-start;
	gap: var(--fiveforests-slider-gap-active, var(--fiveforests-slider-gap, 16px));
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: 10px;
}

.editor-styles-wrapper .fiveforests-slider--editor-preview.fiveforests-slider--group.block-editor-block-list__layout > .block-editor-block-list__block,
.editor-styles-wrapper .fiveforests-slider--editor-preview.fiveforests-slider--group > .block-editor-block-list__layout:not(.wp-block):not([data-type]) > .block-editor-block-list__block {
	box-sizing: border-box;
	flex: 0 0 var(--fiveforests-slider-slide-size, 100%) !important;
	width: var(--fiveforests-slider-slide-size, 100%) !important;
	max-width: var(--fiveforests-slider-slide-size, 100%) !important;
	min-width: var(--fiveforests-slider-slide-size, 100%) !important;
	margin-inline: 0 !important;
	scroll-snap-align: start;
}

.editor-styles-wrapper .fiveforests-slider--editor-preview.fiveforests-slider--group.block-editor-block-list__layout > .block-list-appender,
.editor-styles-wrapper .fiveforests-slider--editor-preview.fiveforests-slider--group > .block-editor-block-list__layout:not(.wp-block):not([data-type]) > .block-list-appender {
	flex: 0 0 auto;
	align-self: stretch;
	min-width: 2.75rem;
	scroll-snap-align: end;
}

.editor-styles-wrapper .fiveforests-slider--stretch-slides.fiveforests-slider--editor-preview.fiveforests-slider--group.block-editor-block-list__layout > .block-editor-block-list__block,
.editor-styles-wrapper .fiveforests-slider--stretch-slides.fiveforests-slider--editor-preview.fiveforests-slider--group > .block-editor-block-list__layout:not(.wp-block):not([data-type]) > .block-editor-block-list__block {
	align-self: stretch;
	height: auto;
}

.editor-styles-wrapper .fiveforests-slider--editor-preview.fiveforests-slider--query {
	overflow: hidden;
}

.editor-styles-wrapper .fiveforests-slider--editor-preview.fiveforests-slider--query ul.wp-block-post-template {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: flex-start;
	gap: var(--fiveforests-slider-gap-active, var(--fiveforests-slider-gap, 16px));
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: 10px;
}

.editor-styles-wrapper .fiveforests-slider--editor-preview.fiveforests-slider--query ul.wp-block-post-template > li {
	box-sizing: border-box;
	flex: 0 0 var(--fiveforests-slider-slide-size, 100%) !important;
	width: var(--fiveforests-slider-slide-size, 100%) !important;
	max-width: var(--fiveforests-slider-slide-size, 100%) !important;
	min-width: var(--fiveforests-slider-slide-size, 100%) !important;
	scroll-snap-align: start;
}

.editor-styles-wrapper .fiveforests-slider--editor-preview.fiveforests-slider--collection {
	overflow: hidden;
}

.editor-styles-wrapper .fiveforests-slider--editor-preview.fiveforests-slider--collection .c7-product-collection__product-list {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: flex-start;
	gap: var(--fiveforests-slider-gap-active, var(--fiveforests-slider-gap, 16px));
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: 10px;
}

.editor-styles-wrapper .fiveforests-slider--editor-preview.fiveforests-slider--collection .c7-product-collection__product-list > .c7-product {
	box-sizing: border-box;
	flex: 0 0 var(--fiveforests-slider-slide-size, 100%) !important;
	width: var(--fiveforests-slider-slide-size, 100%) !important;
	max-width: var(--fiveforests-slider-slide-size, 100%) !important;
	min-width: var(--fiveforests-slider-slide-size, 100%) !important;
	scroll-snap-align: start;
}

.fiveforests-slider .fiveforests-slider__chrome .fiveforests-slider__nav-icon {
	display: block;
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	fill: none;
}

.fiveforests-slider--nav-above .fiveforests-slider__viewport {
	margin-top: 1rem;
}

.fiveforests-slider--nav-above .fiveforests-slider__chrome.swiper-button-prev,
.fiveforests-slider--nav-above .fiveforests-slider__chrome.swiper-button-next,
.fiveforests-slider--nav-below .fiveforests-slider__chrome.swiper-button-prev,
.fiveforests-slider--nav-below .fiveforests-slider__chrome.swiper-button-next {
	position: static;
	transform: none;
	display: inline-flex;
}

.fiveforests-slider--nav-above .fiveforests-slider__chrome.swiper-button-next,
.fiveforests-slider--nav-below .fiveforests-slider__chrome.swiper-button-next {
	margin-left: 0.5em;
}

.fiveforests-slider--nav-below .fiveforests-slider__viewport {
	margin-bottom: 1rem;
}

.fiveforests-slider .fiveforests-slider__chrome.swiper-pagination,
.fiveforests-slider .fiveforests-slider__chrome.swiper-scrollbar {
	position: static;
	transform: none;
	width: 100%;
	margin-top: 1rem;
}

.fiveforests-slider .fiveforests-slider__chrome.swiper-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.35rem;
}

.fiveforests-slider--nav-sides {
	padding-inline: 2.75rem;
}

.fiveforests-slider--nav-sides .fiveforests-slider__chrome.swiper-button-prev {
	inset-inline-start: 0;
}

.fiveforests-slider--nav-sides .fiveforests-slider__chrome.swiper-button-next {
	inset-inline-end: 0;
}

.fiveforests-slider__viewport {
	width: 100%;
}

.fiveforests-slider--stretch-slides .swiper-wrapper {
	align-items: stretch;
}

.fiveforests-slider--stretch-slides .swiper-slide {
	height: auto;
}

.fiveforests-slider--stretch-slides .swiper-slide > .wp-block-group {
	height: 100%;
}