.wpl-category-slider {
	position: relative;
}

/* Centered "boxed label on a horizontal line" heading shared by both reference layouts. */
.wpl-category-slider__heading {
	position: relative;
	text-align: center;
	margin: 0 0 2rem;
}

.wpl-category-slider__heading::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	border-top: 1px solid var(--wp--preset--color--line, #ddd);
}

.wpl-category-slider__heading-text {
	position: relative;
	display: inline-block;
	background: var(--wp--preset--color--bg-page, #fff);
	padding: 0.75em 2em;
	border: 1px solid var(--wp--preset--color--line, #ddd);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: var(--wp--preset--font-size--medium, 1rem);
}

.wpl-category-slider__body {
	position: relative;
}

.wpl-category-slider__track {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
	scrollbar-width: none;
}

.wpl-category-slider__track::-webkit-scrollbar {
	display: none;
}

.wpl-category-slider__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

/* --wpl-cs-cols is set inline from the "Sichtbare Kacheln" attribute; the
 * !important overrides below are needed to beat that inline value at
 * narrower breakpoints (a plain rule can't win against an inline style on
 * the same element/property, but a custom property can be forced with
 * !important). */
@media (max-width: 782px) {
	.wpl-category-slider { --wpl-cs-cols: 2 !important; }
}
@media (max-width: 480px) {
	.wpl-category-slider { --wpl-cs-cols: 1 !important; }
}

.wpl-category-slider__slide {
	flex: 0 0 calc((100% - (var(--wpl-cs-cols, 4) - 1) * 1.5rem) / var(--wpl-cs-cols, 4));
	scroll-snap-align: start;
	position: relative;
	display: block;
	text-decoration: none;
	color: inherit;
}

.wpl-category-slider__media {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--wp--preset--color--bg-secondary, #e5e7eb);
}

.wpl-category-slider__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.wpl-category-slider__slide:hover .wpl-category-slider__image {
	transform: scale(1.05);
}

.wpl-category-slider__image-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.wpl-category-slider__caption {
	display: block;
}

.wpl-category-slider__label {
	display: block;
	margin: 0;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.wpl-category-slider__subtitle {
	display: block;
}

.wpl-category-slider__nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--line, rgba(0, 0, 0, 0.15));
	background: rgba(255, 255, 255, 0.9);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, opacity 0.2s ease;
	color: var(--wp--preset--color--text, #1d1d1f);
}

.wpl-category-slider__nav-btn:hover {
	background: #fff;
}

.wpl-category-slider__nav-btn:disabled {
	opacity: 0.3;
	cursor: default;
}

.wpl-category-slider__nav-btn--prev { left: 0.5rem; }
.wpl-category-slider__nav-btn--next { right: 0.5rem; }

.wpl-category-slider__editor-slide-actions {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

/*
 * Style: Overlay (default) — label/subtitle sit directly on the image behind
 * a dark gradient, no separate caption box. Matches category-slider1.png.
 *
 * WordPress never writes an "is-style-overlay" class for the style marked
 * isDefault in block.json (a freshly inserted block's className attribute is
 * simply empty) — so this rule is scoped as "not one of the other three
 * styles" rather than to a class of its own, and by construction it can't be
 * fought over with the other variants the way overriding a shared base
 * selector property-by-property can (a bug caught twice while building this).
 */
.wpl-category-slider:not(.is-style-card):not(.is-style-outline):not(.is-style-rounded) .wpl-category-slider__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 2.5rem 1rem 1rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0));
	text-align: center;
}

.wpl-category-slider:not(.is-style-card):not(.is-style-outline):not(.is-style-rounded) .wpl-category-slider__label {
	color: #fff;
	font-size: 1rem;
}

.wpl-category-slider:not(.is-style-card):not(.is-style-outline):not(.is-style-rounded) .wpl-category-slider__subtitle {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.75rem;
	margin-top: 0.2rem;
}

/*
 * Style: Karte — a light, translucent caption card overlapping the bottom of
 * the image, with a colored product-count subtitle. Matches category-slider.png.
 */
.is-style-card .wpl-category-slider__caption {
	position: relative;
	margin: -1.75rem 0 0;
	padding: 0.85rem 1rem 1rem;
	background: rgba(255, 255, 255, 0.92);
	text-align: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.is-style-card .wpl-category-slider__label {
	color: var(--wp--preset--color--text, #1d1d1f);
	font-size: 0.95rem;
}

.is-style-card .wpl-category-slider__subtitle {
	color: var(--wp--preset--color--cta, #3b6ef6);
	font-size: 0.75rem;
	font-weight: 600;
	margin-top: 0.2rem;
}

/*
 * Style: Rahmen — no overlay at all, plain caption below the image separated
 * by a thin accent rule. Minimal, matches the library's outline-button family.
 */
.is-style-outline .wpl-category-slider__media {
	border: 1px solid var(--wp--preset--color--line, #e2e2e2);
}

.is-style-outline .wpl-category-slider__caption {
	position: relative;
	margin-top: 0.85rem;
	padding: 0.85rem 0 0;
	border-top: 2px solid var(--wp--preset--color--cta, #1d1d1f);
	text-align: center;
}

.is-style-outline .wpl-category-slider__label {
	color: var(--wp--preset--color--text, #1d1d1f);
	font-size: 0.95rem;
}

.is-style-outline .wpl-category-slider__subtitle {
	color: var(--wp--preset--color--text-secondary, #6b7280);
	font-size: 0.8rem;
	margin-top: 0.2rem;
}

/*
 * Style: Rund — fully rounded, elevated image (reuses the theme's shared
 * card-radius token so it matches whichever global style preset is active),
 * plain centered caption below.
 */
.is-style-rounded .wpl-category-slider__media {
	border-radius: var(--wp--custom--aconi-radius--card, 16px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.is-style-rounded .wpl-category-slider__caption {
	position: relative;
	margin-top: 1rem;
	text-align: center;
}

.is-style-rounded .wpl-category-slider__label {
	color: var(--wp--preset--color--text, #1d1d1f);
	font-size: 0.95rem;
}

.is-style-rounded .wpl-category-slider__subtitle {
	color: var(--wp--preset--color--text-secondary, #6b7280);
	font-size: 0.8rem;
	margin-top: 0.15rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}