.ybsb-catslider-wrapper {
	position: relative;
	width: 100%;
}

.ybsb-catslider-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.ybsb-catslider-crumb {
	background: none;
	border: none;
	border-radius: 4px;
	padding: 3px 8px;
	cursor: pointer;
	font: inherit;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.ybsb-catslider-crumb-active {
	font-weight: 600;
}

/* ---- Main row: nav column (optional) + viewport ----
   flex-direction is set entirely by the Navigation Position control
   (Content tab), which is itself responsive - no static override
   needed here, and one here would fight the per-device value. */

.ybsb-catslider-main-row {
	display: flex;
	align-items: stretch;
	width: 100%;
}

.ybsb-catslider-track-viewport {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	overflow: hidden;
	/* Generous padding, cancelled by an equal negative margin, so
	   the clip box has real room for box-shadow and the hover-lift
	   transform to render fully before overflow:hidden crops them -
	   without pushing the widget's actual outer size any bigger than
	   before (padding and margin cancel out; net effect on layout is
	   zero, only the internal paint area grows). Vertically, 60px
	   covers the built-in shadow preset (offset 20px + blur 30px =
	   50px below, blur - offset = 10px above) plus the strongest
	   hover lift (-10px) with margin to spare. Horizontally, 40px
	   covers the same preset's sideways spread (offsetX 5 + blur 30
	   = 35px on the trailing side, blur 30 - offsetX 5 = 25px on the
	   leading side) - this is what lets the very first/last card in
	   the whole list show its outward-facing shadow uncropped, not
	   just the partially-scrolled-past cards the Edge Fade handles.
	   A custom Box Shadow the user dials in far beyond either of
	   these could still clip, same trade-off the Grid widget doesn't
	   have to make since it has no clipping viewport at all. JS
	   deliberately excludes this padding from its own width math
	   (items-per-row, scroll distance), so it stays purely decorative
	   shadow headroom and never changes how many cards are visible. */
	padding: 60px 40px;
	margin: -60px -40px;
	flex: 1 1 auto;
	min-width: 0;
	--ybsb-catslider-fade-left-width: 0px;
	--ybsb-catslider-fade-right-width: 0px;
}

/* Edge Fade - softens the hard line where a card is sliced by this
   viewport's (necessary, intentional) horizontal overflow:hidden into
   a smooth fade instead, the way a marquee fades at its edges.
   mask-image reveals whatever's actually behind the widget rather
   than painting a color over it, so it's correct on any background
   without the user having to match a color by hand. The two
   *-fade-*-width custom properties stay 0px (no fade, i.e. the exact
   previous hard-cut look) unless JS adds .ybsb-catslider-fade-left/
   -right - which it only does when there's genuinely more content to
   reveal in that direction, the same condition that disables the
   Prev/Next arrows, so a fully-visible edge is never faded for no
   reason. */
.ybsb-catslider-edgefade .ybsb-catslider-track-viewport {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		black var(--ybsb-catslider-fade-left-width),
		black calc(100% - var(--ybsb-catslider-fade-right-width)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		black var(--ybsb-catslider-fade-left-width),
		black calc(100% - var(--ybsb-catslider-fade-right-width)),
		transparent 100%
	);
}

.ybsb-catslider-edgefade.ybsb-catslider-fade-left .ybsb-catslider-track-viewport {
	--ybsb-catslider-fade-left-width: var(--ybsb-catslider-edge-fade-width, 50px);
}

.ybsb-catslider-edgefade.ybsb-catslider-fade-right .ybsb-catslider-track-viewport {
	--ybsb-catslider-fade-right-width: var(--ybsb-catslider-edge-fade-width, 50px);
}

.ybsb-catslider-track {
	display: flex;
	align-items: flex-start;
	transition-property: transform;
	transition-timing-function: ease;
	transition-duration: 350ms;
	will-change: transform;
	touch-action: pan-y;
}

.ybsb-catslider-dragging {
	cursor: grabbing;
	user-select: none;
}

.ybsb-catslider-dragging .ybsb-catslider-track {
	transition: none;
}

/* ---- Card ---- */

.ybsb-catslider-card {
	flex: 0 0 auto;
	width: var(--ybsb-catslider-card-width, 200px);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	position: relative;
	transition: transform var(--ybsb-catslider-hover-duration, 300ms) ease,
		box-shadow var(--ybsb-catslider-hover-duration, 300ms) ease,
		border-color var(--ybsb-catslider-hover-duration, 300ms) ease,
		border-radius var(--ybsb-catslider-hover-duration, 300ms) ease,
		background-color var(--ybsb-catslider-hover-duration, 300ms) ease;
}

.ybsb-catslider-card:focus-visible {
	outline: 2px solid #f5a623;
	outline-offset: 2px;
}

/* Shadow "Quick Preset" - no shadow at rest, soft lifted shadow on
   hover. Same look/values as YB Product Grid's card shadow preset,
   kept consistent across the plugin. Only applies when Shadow Style
   is set to Preset in the Style tab; Custom uses the Box Shadow group
   control's own selectors instead. */
.ybsb-catslider-shadow-preset .ybsb-catslider-card {
	box-shadow: none;
}
.ybsb-catslider-shadow-preset .ybsb-catslider-card:hover {
	box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}

/* Hover effect intensities - card lifts, image zooms. Same class
   names/values as YB Product Grid's Hover Effect control, applied on
   the wrapper so it's easy to scope and easy to turn off (none). */
.ybsb-catslider-hover-subtle .ybsb-catslider-card:hover {
	transform: translateZ(0) translateY(-3px);
}
.ybsb-catslider-hover-subtle .ybsb-catslider-card:hover .ybsb-catslider-card-image img {
	transform: scale(1.04);
}

.ybsb-catslider-hover-normal .ybsb-catslider-card:hover {
	transform: translateZ(0) translateY(-6px);
}
.ybsb-catslider-hover-normal .ybsb-catslider-card:hover .ybsb-catslider-card-image img {
	transform: scale(1.08);
}

.ybsb-catslider-hover-strong .ybsb-catslider-card:hover {
	transform: translateZ(0) translateY(-10px);
}
.ybsb-catslider-hover-strong .ybsb-catslider-card:hover .ybsb-catslider-card-image img {
	transform: scale(1.12);
}

.ybsb-catslider-active {
	position: relative;
}

/* ---- Image ----
   flex: 1 1 auto + min-height: 0 lets the image shrink to fit
   whatever room is left once Maximum Card Height and the text content
   below have taken their share, instead of overflowing and getting
   clipped. */

.ybsb-catslider-card-image {
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
	transform: translateZ(0);
	backface-visibility: hidden;
	transition: border-radius var(--ybsb-catslider-hover-duration, 300ms) ease;
}

.ybsb-catslider-card-image img {
	width: 100%;
	height: 100%;
	border-radius: inherit;
	-webkit-user-drag: none;
	user-select: none;
	transition: transform var(--ybsb-catslider-hover-duration, 300ms) ease;
}

/* ---- Text ---- */

.ybsb-catslider-card-content {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
}

.ybsb-catslider-card-name,
.ybsb-catslider-card-count {
	display: block;
}

/* ---- Navigation buttons (prev / next / back) ----
   Full reset so no browser/theme default button chrome (background,
   border, hover shading) can show through underneath the controls
   below - this was the source of an "unremovable" hover background
   that wasn't coming from this plugin's own CSS at all. */

.ybsb-catslider-nav-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 auto;
	height: 100%;
}

.ybsb-catslider-nav-buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 auto;
}

.ybsb-catslider-nav-arrows {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ybsb-catslider-arrow {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.ybsb-catslider-arrow svg {
	fill: currentColor;
}

.ybsb-catslider-arrow-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* ---- Progress bar ----
   Vertical by default (Left/Right position): width is the fixed
   Thickness value, height flex-grows to fill whatever room is left
   in the group with Minimum Length as a floor. Below Cards swaps
   which physical property reads which control (see render() for the
   real per-breakpoint media queries that do that swap - not a
   runtime JS class, so there's no flash on load waiting for JS to
   decide the orientation). The --ybsb-catslider-progress-* custom
   properties are set by the Thickness/Length controls themselves via
   Elementor's own native responsive selectors, so per-device numeric
   values still Just Work with zero custom code - only the axis they
   apply to is handled manually. */

.ybsb-catslider-progress-track {
	position: relative;
	overflow: hidden;
	flex: 1 1 auto;
	width: var(--ybsb-catslider-progress-thickness, 4px);
	min-height: var(--ybsb-catslider-progress-length, 20px);
}

.ybsb-catslider-progress-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0%;
	transition: height 0.2s ease;
}