/* Before / After Gallery — frontend styles */

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

.bag {
	display: block;
	width: 100%;
	color: inherit;
}

.bag--empty {
	padding: 24px;
	border: 1px dashed currentColor;
	opacity: 0.6;
	text-align: center;
}

/* Tab strip — sits above the slider when manual tabs are enabled.
   The `.bag` prefix bumps specificity past theme rules like
   `.entry-content ul, .entry-content ol` which inject a default
   padding-left on every list. */
.bag .bag__tabs,
.bag__tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 auto 24px;
	padding: 0;
	list-style: none;
}
.bag__tab,
.bag__tab:hover,
.bag__tab:focus,
.bag__tab:active,
.bag__tab:focus-visible {
	border: 0 !important;
	outline: none;
	cursor: pointer;
}
.bag__tab {
	padding: 10px 20px;
	border-radius: 999px;
	background: #f2efe8;
	color: #5a6b66;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.bag__tab:hover {
	transform: translateY(-1px);
}
.bag__tab.is-active {
	background: #1a3a2e;
	color: #ffffff;
}
.bag__tab:focus-visible {
	box-shadow: 0 0 0 3px rgba(26, 58, 46, 0.25);
}

/* Stage (centers the active pair) */
.bag__stage {
	position: relative;
	margin: 0 auto;
	max-width: 800px;
	width: 100%;
}

/* Carousel mode — stack every pair in the same grid cell so the stage
   sizes itself to the tallest pair and never jumps when the active pair
   changes. Hidden pairs stay in flow (taking grid space) but are
   visibility:hidden so they don't catch clicks or focus, and opacity:0
   so the active one crossfades in.
   Tab filter still uses inline `display:none` to hide pairs that don't
   belong to the current tab — those collapse out of layout entirely so
   the stage height matches only the visible-tab pairs. */
.bag:not(.bag--grid) .bag__stage {
	display: grid;
	grid-template-columns: 1fr;
}
.bag:not(.bag--grid) .bag__pair {
	grid-column: 1;
	grid-row: 1;
	display: block;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.bag:not(.bag--grid) .bag__pair.is-active {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

/* Grid view: lay out every pair in a CSS grid; each pair has its own slider.
   The actual `grid-template-columns` rule is written by Elementor at every
   configured breakpoint via the responsive `Columns` control's selectors map. */
.bag--grid .bag__stage {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--bag-grid-gap, 16px);
}
.bag--grid .bag__pair {
	display: block;
}
/* Inline display:none from the tab filter still wins over the grid default,
   so tab filtering inside grid view keeps working. */

/* Compare figure */
.bag__compare {
	--start: 50%;
	--bag-badge-offset: 20px;
	position: relative;
	margin: 0;
	width: 100%;
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
	background: #f2efe8;
	border-radius: 16px;
}

.bag__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	pointer-events: none;
	-webkit-user-drag: none;
}

.bag__before-wrap {
	position: absolute;
	inset: 0;
	width: var(--start);
	overflow: hidden;
	/* No border-radius here. The outer .bag__compare's rounded clip already
	   shapes the visible corners; keeping this square ensures the divider
	   line meets the image edge cleanly instead of curving inward. */
}
/* The before image must overlap the after image at full size and align flush left */
.bag__before-wrap .bag__img--before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-width: 100%;
	height: 100%;
	object-fit: cover;
}
/* But .bag__img--after defines the natural aspect ratio of the figure */
.bag__img--after {
	position: relative;
	z-index: 0;
}

/* Handle — aggressive reset to override theme button styles (Astra etc. add a
   blue hover/focus background which would overlay the divider). */
.bag__handle,
.bag__handle:hover,
.bag__handle:focus,
.bag__handle:active,
.bag__handle:focus-visible,
.bag__handle:focus-within {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	text-shadow: none !important;
	filter: none !important;
}
.bag__handle {
	--bag-handle-color: #c9a961;
	--bag-handle-line: 2px;
	--bag-handle-knob: 32px;
	--bag-knob-bg: #ffffff;

	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--start);
	width: var(--bag-handle-knob);
	transform: translateX(-50%);
	padding: 0;
	margin: 0;
	cursor: ew-resize;
	z-index: 3;
	touch-action: none;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.bag__handle-line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: var(--bag-handle-line);
	transform: translateX(-50%);
	background: var(--bag-handle-color);
}

.bag__handle-knob {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--bag-handle-knob);
	height: var(--bag-handle-knob);
	transform: translate(-50%, -50%);
	background: var(--bag-knob-bg);
	/* Border width and color are independent CSS vars now. The color falls
	   back to the main handle color when the user hasn't overridden it. */
	border: var(--bag-knob-border-width, 2px) solid var(--bag-knob-border-color, var(--bag-handle-color));
	border-radius: 50%;
	transition: box-shadow 0.15s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* User-selected icons inside the knob — one slot on each side. Knob stays
   empty when neither icon is picked (no default chevrons). */
.bag__handle-icon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bag-handle-icon-color, var(--bag-handle-color));
	font-size: var(--bag-handle-icon-size, 10px);
	line-height: 1;
	pointer-events: none;
}
.bag__handle-icon--left  { left: 18%; }
.bag__handle-icon--right { right: 18%; }
.bag__handle-icon i,
.bag__handle-icon svg {
	font-size: inherit;
	width: 1em;
	height: 1em;
	fill: currentColor;
	display: block;
}

/* Badges */
.bag__badge {
	position: absolute;
	top: var(--bag-badge-offset);
	z-index: 2;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 8px 18px;
	border-radius: 999px;
	/* Border defaults to invisible (0 width, transparent color). User can set
	   width and color from the Elementor controls. */
	border: var(--bag-badge-border-width, 0) solid var(--bag-badge-border-color, transparent);
	background: rgba(255, 255, 255, 0.95);
	color: #1a3a2e;
	pointer-events: none;
	transition: opacity 0.2s ease, border-color 0.15s ease;
}
.bag__badge--before {
	left: var(--bag-badge-offset);
}
.bag__badge--after {
	right: var(--bag-badge-offset);
}
/* The badge's `opacity` is set inline by JS as the divider moves, giving a
   smooth, continuous fade. The transition declared on .bag__badge above
   ensures non-drag opacity changes (e.g. on first init) also animate. */

/* Nav row */
.bag__nav {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 24px auto 0;
	max-width: 800px;
	width: 100%;
}

.bag__arrow {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Border width is shared between prev and next; color is set per-button via
	   the --bag-arrow-prev/next-border-color vars. Defaults give an invisible
	   transparent border at 0 width (no layout impact when disabled). */
	border: var(--bag-arrow-border-width, 0) solid transparent;
	border-radius: 50%;
	/* Reset padding/margin so theme button styles can't push the icon off-center. */
	padding: 0;
	margin: 0;
	cursor: pointer;
	color: inherit;
	transition: transform 0.15s ease, opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease;
	font-size: 18px;
	line-height: 1;
}
.bag__arrow--prev {
	border-color: var(--bag-arrow-prev-border-color, transparent);
}
.bag__arrow--next {
	border-color: var(--bag-arrow-next-border-color, transparent);
}
.bag__arrow svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	position: absolute;
}
.bag__arrow i {
	font-size: inherit;
	line-height: 1;
}
.bag__arrow--prev:hover {
	border-color: var(--bag-arrow-prev-border-hover-color, var(--bag-arrow-prev-border-color, transparent));
}
.bag__arrow--next:hover {
	border-color: var(--bag-arrow-next-border-hover-color, var(--bag-arrow-next-border-color, transparent));
}
.bag__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Thumbnails — `.bag` prefix raises specificity over theme rules like
   `.entry-content ul, .entry-content ol` that add list padding-left. */
.bag .bag__thumbs,
.bag__thumbs {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scroll-behavior: smooth;
	/* Hide the horizontal scrollbar — strip is navigated via arrows / active-thumb auto-scroll. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
/* Single-item mode (set by JS when only one thumb is visible — e.g. a tab
   with one pair). Center that lone thumb in the strip. We deliberately
   DON'T apply justify-content:center on the base rule, because when the
   strip overflows (multi-item carousel) it pushes flex content past the
   container's start edge — scrollIntoView({inline:'center'}) then can't
   actually reach the center, breaking the loop and leaving the active
   thumb left-aligned. */
.bag__thumbs.is-single {
	justify-content: center;
}
.bag__thumbs::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}
.bag__thumbs > li {
	/* Width = (visible-width − total-gaps) / thumbs-per-view.
	   `--bag-thumbs-per-view` and `--bag-thumb-gap` are written by Elementor
	   controls per breakpoint. The trailing `- 1px` absorbs sub-pixel rounding
	   so the last thumb never gets cut off. */
	box-sizing: border-box;
	flex: 0 0 calc(
		(100% - var(--bag-thumb-gap, 12px) * (var(--bag-thumbs-per-view, 4) - 1) - 1px)
		/ var(--bag-thumbs-per-view, 4)
	);
	max-width: calc(
		(100% - var(--bag-thumb-gap, 12px) * (var(--bag-thumbs-per-view, 4) - 1) - 1px)
		/ var(--bag-thumbs-per-view, 4)
	);
	min-width: 0;
	margin: 0;
	padding: 0;
}

.bag__thumb {
	display: flex;
	align-items: stretch;
	width: 100%;
	height: 80px;
	padding: 0;
	/* All three states (default / hover / active) share the same border WIDTH
	   so the layout never shifts. Only the COLOR changes per state. The user
	   controls each color independently from the Elementor panel; default and
	   hover both fall back to transparent (no visible border) when unset. */
	border: var(--bag-thumb-active-width, 3px) solid var(--bag-thumb-default-color, transparent);
	background: #f2efe8;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.15s ease, border-color 0.15s ease;
}
.bag__thumb:hover {
	border-color: var(--bag-thumb-hover-color, var(--bag-thumb-default-color, transparent));
}
/* Master "Enable thumbnail border" switch is OFF — force the border off in
   every state so even the layout-stabilizing transparent border is gone. */
.bag--no-thumb-border .bag__thumb,
.bag--no-thumb-border .bag__thumb:hover,
.bag--no-thumb-border .bag__thumb.is-active {
	border: 0 !important;
}
.bag__thumb img {
	display: block;
	width: 50%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}
.bag__thumb img + img {
	border-left: 1px solid rgba(255, 255, 255, 0.6);
}
.bag__thumb.is-active {
	/* Border (not outline) — colored only when active. The transparent border
	   on the base .bag__thumb keeps the size constant. */
	border-color: var(--bag-thumb-active-color, #1a3a2e);
}

/* Responsive */
@media (max-width: 600px) {
	.bag__nav {
		gap: 8px;
	}
	.bag__badge {
		font-size: 10px;
		padding: 6px 12px;
	}
	.bag__compare {
		--bag-badge-offset: 12px;
	}
}