/* Image Split – front-end slider styles */

.image-split {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

.image-split *,
.image-split *::before,
.image-split *::after {
	box-sizing: border-box;
}

.image-split__inner {
	position: relative;
	width: 100%;
}

/* Sizer image sets container height from the before image's natural aspect ratio (width: 100%, height: auto). */
.image-split__sizer {
	display: block;
	width: 100%;
	height: auto;
	vertical-align: middle;
	visibility: hidden;
	pointer-events: none;
}

.image-split__before,
.image-split__after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.image-split__before {
	z-index: 1;
}

.image-split__after {
	z-index: 2;
}

/* Clip the "after" image based on ruler position – JS sets --split-pos */
/* LTR: Before on the left, After on the right (show right part of "after" layer) */
.image-split--horizontal .image-split__after {
	clip-path: inset(0 0 0 calc(var(--split-pos, 50) * 1%));
	-webkit-clip-path: inset(0 0 0 calc(var(--split-pos, 50) * 1%));
}

/* RTL horizontal: Before on the right, After on the left (show left part of "after" layer) */
[dir="rtl"] .image-split--horizontal .image-split__after {
	clip-path: inset(0 calc(100% - (var(--split-pos, 50) * 1%)) 0 0);
	-webkit-clip-path: inset(0 calc(100% - (var(--split-pos, 50) * 1%)) 0 0);
}

/* LTR vertical: Before on top, After on bottom (show bottom part of "after" layer) */
.image-split--vertical .image-split__after {
	clip-path: inset(calc(var(--split-pos, 50) * 1%) 0 0 0);
	-webkit-clip-path: inset(calc(var(--split-pos, 50) * 1%) 0 0 0);
}

/* RTL vertical: Before on bottom, After on top (show top part of "after" layer) */
[dir="rtl"] .image-split--vertical .image-split__after {
	clip-path: inset(0 0 calc(100% - (var(--split-pos, 50) * 1%)) 0);
	-webkit-clip-path: inset(0 0 calc(100% - (var(--split-pos, 50) * 1%)) 0);
}

.image-split__img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* object-fit and object-position come from inline styles (widget/block/shortcode settings) */
	object-fit: cover;
	object-position: top left;
	display: block;
	pointer-events: none;
}

/* Labels */
.image-split__label {
	position: absolute;
	z-index: 3;
	padding: 6px 12px;
	border-radius: 2px;
	white-space: nowrap;
	pointer-events: none;
}

.image-split__label--top-left     { top: 10px;  left: 10px; }
.image-split__label--top-right    { top: 10px;  right: 10px; left: auto; }
.image-split__label--bottom-left   { bottom: 10px; left: 10px; top: auto; }
.image-split__label--bottom-right  { bottom: 10px; right: 10px; left: auto; top: auto; }
.image-split__label--center-left   { top: 50%; left: 10px;  transform: translateY(-50%); top: 50%; }
.image-split__label--center-right  { top: 50%; right: 10px; left: auto; transform: translateY(-50%); }

/* Ruler / handle */
.image-split__ruler {
	position: absolute;
	z-index: 4;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	margin-top: -12px;
	cursor: ew-resize;
	touch-action: none;
	user-select: none;
	transition: background 0.15s ease, border-color 0.15s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ruler-color, #fff);
}

.image-split--vertical .image-split__ruler {
	margin-left: -12px;
	margin-top: -12px;
	cursor: ns-resize;
	min-height: auto;
}

.image-split__ruler:hover,
.image-split__ruler:focus {
	outline: 2px solid var(--ruler-color, #fff);
	outline-offset: 2px;
}

/* Ruler styles (line itself is drawn using borders, except zigzag) */

/* Solid ruler: single solid line */
.image-split__ruler--solid {
	width: 0;
	height: 100%;
	min-height: 100%;
	left: 0;
	top: 0;
	margin-left: 0;
	margin-top: 0;
	border-left: var(--ruler-width, 4px) solid var(--ruler-color, #fff);
	background: transparent;
}

.image-split--vertical .image-split__ruler--solid {
	width: 100%;
	height: 0;
	border-left: 0;
	border-top: var(--ruler-width, 4px) solid var(--ruler-color, #fff);
	margin-left: 0;
	margin-top: 0;
}

/* Double ruler: double border */
.image-split__ruler--double {
	width: 0;
	height: 100%;
	min-height: 100%;
	left: 0;
	top: 0;
	margin-left: 0;
	margin-top: 0;
	border-left: var(--ruler-width, 4px) double var(--ruler-color, #fff);
	background: transparent;
}

.image-split--vertical .image-split__ruler--double {
	width: 100%;
	height: 0;
	border-left: 0;
	border-top: var(--ruler-width, 4px) double var(--ruler-color, #fff);
	margin-left: 0;
	margin-top: 0;
}

/* Dashed ruler */
.image-split__ruler--dashed {
	width: 0;
	height: 100%;
	min-height: 100%;
	left: 0;
	top: 0;
	margin-left: 0;
	margin-top: 0;
	border-left: var(--ruler-width, 4px) dashed var(--ruler-color, #fff);
	background: transparent;
}

.image-split--vertical .image-split__ruler--dashed {
	width: 100%;
	height: 0;
	border-left: 0;
	border-top: var(--ruler-width, 4px) dashed var(--ruler-color, #fff);
	margin-left: 0;
	margin-top: 0;
}

/* Zigzag ruler: use provided SVG as repeating background */
.image-split__ruler--zigzag {
	width: var(--ruler-width, 4px);
	height: 100%;
	min-height: 100%;
	left: 0;
	top: 0;
	margin-left: calc(-1 * var(--ruler-width, 4px) / 2);
	margin-top: 0;
	border: none;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M7 20.25V16.5c0 -0.2125 0.0719 -0.39065 0.21575 -0.5345 0.14365 -0.14365 0.32175 -0.2155 0.53425 -0.2155H11.5V12c0 -0.2125 0.0719 -0.39065 0.21575 -0.5345 0.14365 -0.14365 0.32175 -0.2155 0.53425 -0.2155H16V7.5c0 -0.2125 0.0719 -0.39065 0.21575 -0.5345 0.14365 -0.14365 0.32175 -0.2155 0.53425 -0.2155H20.5v-3c0 -0.2125 0.07235 -0.390665 0.217 -0.5345 0.1445 -0.143665 0.32365 -0.2155 0.5375 -0.2155 0.21365 0 0.39135 0.071835 0.533 0.2155 0.14165 0.143835 0.2125 0.322 0.2125 0.5345V7.5c0 0.2125 -0.07185 0.3906 -0.2155 0.53425 -0.14385 0.14385 -0.322 0.21575 -0.5345 0.21575H17.5V12c0 0.2125 -0.07185 0.3906 -0.2155 0.53425 -0.14385 0.14385 -0.322 0.21575 -0.5345 0.21575H13V16.5c0 0.2125 -0.07185 0.3906 -0.2155 0.53425 -0.14385 0.14385 -0.322 0.21575 -0.5345 0.21575H8.5V21c0 0.2125 -0.07185 0.3906 -0.2155 0.53425 -0.14385 0.14385 -0.322 0.21575 -0.5345 0.21575H4c-0.2125 0 -0.390585 -0.07235 -0.53425 -0.217 -0.143835 -0.1445 -0.21575 -0.32365 -0.21575 -0.5375 0 -0.21365 0.071915 -0.39135 0.21575 -0.533 0.143665 -0.14165 0.32175 -0.2125 0.53425 -0.2125h3Z' stroke-width='0.5'/%3E%3C/svg%3E");
	background-repeat: repeat-y;
	background-position: center;
	background-size: auto 24px;
}

.image-split--vertical .image-split__ruler--zigzag {
	width: 100%;
	height: var(--ruler-width, 4px);
	margin-left: 0;
	margin-top: calc(-1 * var(--ruler-width, 4px) / 2);
	background-repeat: repeat-x;
	background-size: 24px auto;
}

/* Center arrows at the ruler midpoint */
.image-split__ruler-arrows {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--ruler-width, 4px) + 2px);
	pointer-events: none;
	transform: translateX(calc(-1 * var(--ruler-width, 4px) / 2));
}

.image-split__ruler-arrow {
	display: inline-block;
	width: var(--ruler-arrow-size, 8px);
	height: var(--ruler-arrow-size, 8px);
	position: relative;
}

/* Vertical rulers: stack arrows above and below the center line */
.image-split--vertical .image-split__ruler-arrows {
	flex-direction: column;
	transform: translateX(0) translateY(calc(-1 * var(--ruler-width, 4px) / 2));
}

/* Triangle arrows (CSS borders) — scale with --ruler-arrow-size so shape stays triangular */
.image-split__ruler-arrows--triangle .image-split__ruler-arrow--primary::before,
.image-split__ruler-arrows--triangle .image-split__ruler-arrow--secondary::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
	transform: translate(-50%, -50%);
	border-style: solid;
	box-sizing: border-box;
}

/* Horizontal: left/right */
.image-split--horizontal .image-split__ruler-arrows--triangle .image-split__ruler-arrow--primary::before {
	border-width: calc(var(--ruler-arrow-size, 10px) / 2) calc(var(--ruler-arrow-size, 10px) * 0.55) calc(var(--ruler-arrow-size, 10px) / 2) 0;
	border-color: transparent currentColor transparent transparent;
}
.image-split--horizontal .image-split__ruler-arrows--triangle .image-split__ruler-arrow--secondary::before {
	border-width: calc(var(--ruler-arrow-size, 10px) / 2) 0 calc(var(--ruler-arrow-size, 10px) / 2) calc(var(--ruler-arrow-size, 10px) * 0.55);
	border-color: transparent transparent transparent currentColor;
}

/* Vertical: up/down */
.image-split--vertical .image-split__ruler-arrows--triangle .image-split__ruler-arrow--primary::before {
	border-width: 0 calc(var(--ruler-arrow-size, 10px) / 2) calc(var(--ruler-arrow-size, 10px) * 0.55) calc(var(--ruler-arrow-size, 10px) / 2);
	border-color: transparent transparent currentColor transparent;
}
.image-split--vertical .image-split__ruler-arrows--triangle .image-split__ruler-arrow--secondary::before {
	border-width: calc(var(--ruler-arrow-size, 10px) * 0.55) calc(var(--ruler-arrow-size, 10px) / 2) 0 calc(var(--ruler-arrow-size, 10px) / 2);
	border-color: currentColor transparent transparent transparent;
}

/* SVG-based arrows (fancy arrow) */
.image-split__ruler-arrows--arrow .image-split__ruler-arrow::before {
	content: '';
	position: absolute;
	inset: 0;
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.5247 6.69327H4.61527l4.30847 -4.29533c.2458 -.24587.38393 -.57933.38393 -.927s-.13813 -.68113 -.38393 -.92693c-.24587 -.24587 -.57933 -.384 -.927 -.384s-.68113.13813 -.92693.384l-6.528 6.52793c-.11887.12413 -.212.27067 -.27413.43087 -.1306.31787 -.1306.67433 0 .9922.06213.16033.15527.30667.27413.43087l6.528 6.52793c.1214.12233.2658.21947.4248.2858.15913.06633.3298.1004.50213.1004s.343 -.03407.50213 -.1004c.159 -.06633.3034 -.16347.42487 -.2858.12233 -.1214.21947 -.2658.2858 -.4248.06633 -.1592.1004 -.3298.1004 -.50213s-.03407 -.343 -.1004 -.50213c-.06633 -.15907 -.16347 -.30347 -.2858 -.42487l-4.30847 -4.2954h9.9094c.34627 0 .6784 -.1376.9232 -.3824.2448 -.2448.3824 -.57693.3824 -.9232 0 -.3462 -.1376 -.6784 -.3824 -.92313s-.57693 -.38247 -.9232 -.38247Z' fill='%23000' stroke-width='0.6667'/%3E%3C/svg%3E");
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	background-color: currentColor;
}

/* Horizontal: left/right rotations */
.image-split--horizontal .image-split__ruler-arrows--arrow .image-split__ruler-arrow--primary::before {
	transform: rotate(0deg);
}
.image-split--horizontal .image-split__ruler-arrows--arrow .image-split__ruler-arrow--secondary::before {
	transform: rotate(180deg);
}

/* Vertical: up/down rotations */
.image-split--vertical .image-split__ruler-arrows--arrow .image-split__ruler-arrow--primary::before {
	transform: rotate(90deg);
}
.image-split--vertical .image-split__ruler-arrows--arrow .image-split__ruler-arrow--secondary::before {
	transform: rotate(-90deg);
}

/* SVG-based chevrons */
.image-split__ruler-arrows--chevron .image-split__ruler-arrow::before {
	content: '';
	position: absolute;
	inset: 0;
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.94707 7.96707 5.2684 -5.2684c.27727 -.27887.4328 -.65607.4328 -1.0492s-.15553 -.7704 -.4328 -1.04927c-.1384 -.13947 -.303 -.2502 -.48427 -.32573C11.5498.19893 11.3553.16 11.1588.16s-.39093.03893 -.5724.11447c-.18127.07553 -.34587.18627 -.48427.32573l-6.3102 6.3102c-.13947.13847 -.2502.30307 -.32573.48433 -.0756.1814 -.11447.37593 -.11447.57233s.03887.391.11447.5724c.07553.18127.18627.34587.32573.48427l6.3102 6.38467c.139.13793.30407.24707.48533.32113.18127.074.37547.11167.57133.11047.19587.0012.39007 -.03647.57133 -.11047.18127 -.07407.34633 -.1832.48533 -.32113.27727 -.27893.4328 -.65607.4328 -1.04927 0 -.3932 -.15553 -.77027 -.4328 -1.0492l-5.2684 -5.34287Z' fill='%23000' stroke-width='0.6667'/%3E%3C/svg%3E");
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	background-color: currentColor;
}

/* Horizontal chevrons */
.image-split--horizontal .image-split__ruler-arrows--chevron .image-split__ruler-arrow--primary::before {
	transform: rotate(0deg);
}
.image-split--horizontal .image-split__ruler-arrows--chevron .image-split__ruler-arrow--secondary::before {
	transform: rotate(180deg);
}

/* Vertical chevrons */
.image-split--vertical .image-split__ruler-arrows--chevron .image-split__ruler-arrow--primary::before {
	transform: rotate(90deg);
}
.image-split--vertical .image-split__ruler-arrows--chevron .image-split__ruler-arrow--secondary::before {
	transform: rotate(-90deg);
}

/* WooCommerce product gallery: constrain slider to the gallery slide so layout and thumbnails work */
.woocommerce-product-gallery__image .image-split {
	width: 100%;
	max-width: 100%;
	min-width: 0; /* allow flex item to shrink */
}

.woocommerce-product-gallery__image .image-split__inner {
	max-width: 100%;
}

/* Keep gallery slide from stretching when it contains Image Split */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image.woocommerce-product-gallery__image--image-split {
	flex: 0 0 100%;
	max-width: 100%;
	overflow: hidden;
}

/* PhotoSwipe fullscreen: Image Split (classic .pswp and block #photoswipe-fullscreen-dialog) */
/* Fill the slide item; neutralize zoom-wrap pan/zoom transform so the slider aligns with the viewport */
.pswp .pswp__item .pswp__zoom-wrap.image-split-pswp-wrap,
#photoswipe-fullscreen-dialog .pswp__item .pswp__zoom-wrap.image-split-pswp-wrap {
	transform: translate3d(0, 0, 0) !important;
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.pswp .pswp__zoom-wrap.image-split-pswp-wrap .image-split,
#photoswipe-fullscreen-dialog .pswp__zoom-wrap.image-split-pswp-wrap .image-split {
	width: 100%;
	max-width: 100%;
	max-height: 100%;
	height: auto;
	margin: 0;
	box-sizing: border-box;
	overflow: hidden;
}

.pswp .pswp__zoom-wrap.image-split-pswp-wrap .image-split__inner,
#photoswipe-fullscreen-dialog .pswp__zoom-wrap.image-split-pswp-wrap .image-split__inner {
	width: 100%;
	max-width: 100%;
	max-height: 100%;
	padding-bottom: 0;
}

/* Placeholder when no images selected (e.g. block saved before choosing images) */
.image-split--placeholder {
	min-height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f0f0f0;
	border: 1px dashed #ccc;
}
.image-split__placeholder-msg {
	margin: 0;
	padding: 1em;
	color: #666;
	font-size: 0.9em;
}