/* ==========================================================================
   Coffeeness - Produkt-Karussell
   Scope root: .kva-slider-scope -- the band wrapper is the one exception, see
   below. Split out of css/category-hub.css so the carousel renders on every page
   with the ACF field display_product_slider, not just the Kategorie-Hub.

   Two rules about selectors in this file:

   1. Never use bare element selectors. The article body and ~24 ACF blocks style
      themselves via #main-content and would be caught.
   2. Keep #products_in_table in the selector wherever it is already there. It
      looks redundant next to .kva-slider-scope, but style.css styles the same ids
      (#products_in_table_wrap:8016, #left-button:8037, #right-button:8048,
      #products_in_table:8059, and display:none on both arrows at :14931/:14935
      below 600px). A class+id selector outweighs those; a class alone only ties
      them and would win on source order at best.
   ========================================================================== */

/* Declared on both roots on purpose: --cnc-creme is consumed by the band wrapper,
   which is the PARENT of .kva-slider-scope, and custom properties only inherit
   downward. On .kva-slider-scope alone that var() would never resolve.
   css/category-hub.css keeps its own copy on .cn-cat for the hub chrome, so the two
   files share no selectors and their load order does not matter. */
#products_in_table_wrap.cnc-carousel-band,
.kva-slider-scope {
	--cnc-white: #ffffff;
	--cnc-creme: #efecea;
	--cnc-blue: #285bb8;
	--cnc-blue-hover: #284985;
	--cnc-dark: #032936;
	--cnc-black: #001524;
	--cnc-light-grey: #9e9e9e;
	--cnc-yellow: #ffbb1e;
	--cnc-star-off: #d9d4d0;
	--cnc-hairline: #e6e1dd;
	--cnc-radius: 6px;
	--cnc-card-radius: 10px;
	--cnc-card-width: 300px;
	--cnc-card-gap: 24px;
	--cnc-card-shadow: 0 1px 3px rgba(0, 0, 0, .10), 0 1px 2px rgba(0, 0, 0, .06);

	/* Flo #3: the carousel is deliberately narrower than the stat cards above it,
	   so the band reads as its own section instead of continuing the hero grid. */
	--cnc-carousel-maxw: 1140px;
}

/* ========================== CAROUSEL BAND ========================== */

/* Flo #2a: the beige band stays full-bleed, the cards inside it are boxed to
   their own narrower container (see --cnc-carousel-maxw). Drop the theme's
   0 50px padding so the carousel alone controls the content box.
   .cnc-carousel-band keeps this off the filter tool in the Vergleich panel, which
   carries the same id; the id stays in the selector to outweigh style.css:8011. */
#products_in_table_wrap.cnc-carousel-band {
	padding: 0;
	background: var(--cnc-creme);
}

/* line-height 1.6 matches the mockup's body, which everything inside the card
   inherits from unless it sets its own. */
.kva-slider-scope {
	font-family: 'Public Sans', 'Helvetica Neue', Arial, sans-serif;
	line-height: 1.6;
	color: var(--cnc-black);
	-webkit-font-smoothing: antialiased;
	display: flow-root;
}

/* Vertical padding as the mockup (16px / 18px); the horizontal 40px is dropped so
   the carousel box alone sets the card line - the arrows live in the gutter that
   the narrower --cnc-carousel-maxw opens up against the 1250px hero box. */
.kva-slider-scope .carousel {
	width: var(--cnc-carousel-maxw);
	max-width: 100%;
	margin: 0 auto;
	padding: 16px 0 18px;
	position: relative;
}

/* #products_in_table is the carousel viewport - the id has to stay, js/main.js
   and js/scripts.js both read it. Every rule from here down is prefixed with
   .kva-slider-scope: the filter tool in the Vergleich panel reuses the same id and
   would otherwise be dragged into this horizontal flex layout. */
.kva-slider-scope #products_in_table {
	display: flex;
	gap: var(--cnc-card-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Mockup viewport padding is 28px 4px 20px. The 4px left padding plus the
	   negative margin keeps the card shadow visible without pushing the first card
	   off the carousel's left edge; the right padding is widened so the award badge
	   on the last card is not clipped by the scroll container. */
	padding: 28px 20px 20px 4px;
	margin-left: -4px;
	width: auto;
	box-sizing: border-box;
	user-select: none;
}

.kva-slider-scope #left-button,
.kva-slider-scope #right-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	margin-top: 0;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	/* Same beige as the band, so the arrow reads the same whether it happens to sit
	   in the gutter or on top of a white card. Rounded square at 5px to match
	   #back-to-top (style.css:6813), not the hub's own 6px --cnc-radius. */
	background: var(--cnc-creme);
	border-radius: 5px;
	color: var(--cnc-blue);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 4;
}

/* Stays at 28px while the chip shrank to 28px: the chevron only occupies the middle
   of its 24x24 viewBox, so it still sits well inside the background. */
.kva-slider-scope #left-button svg,
.kva-slider-scope #right-button svg {
	width: 28px;
	height: 28px;
	stroke: var(--cnc-blue);
	stroke-width: 2.8;
	fill: none;
}

.kva-slider-scope #left-button:hover svg,
.kva-slider-scope #right-button:hover svg {
	stroke: var(--cnc-blue-hover);
}

/* -32px clears the 28px button plus 4px, so it sits fully outside the card line. */
.kva-slider-scope #left-button {
	left: -32px;
	right: auto;
}

.kva-slider-scope #right-button {
	right: -32px;
	left: auto;
}

/* No room in the gutter any more - move the arrows over the cards. The beige chip
   keeps them legible there. 1140px box + 2x32px = 1204, so 1210 is the last width
   at which the gutter still fits them. The 8px inset keeps the chip off the screen
   edge on phones, where the carousel runs the full viewport width. */
@media (max-width: 1210px) {
	.kva-slider-scope #left-button {
		left: 8px;
	}

	.kva-slider-scope #right-button {
		right: 8px;
	}
}

/* The arrows used to be hidden below 640px. They now stay: on phones the scroller
   gets side gutters (see the 560px block further down) and they sit in those rather
   than on top of the card. */

/* ============================= PRODUCT CARD ============================= */

.kva-slider-scope .card {
	flex: 0 0 var(--cnc-card-width);
	width: var(--cnc-card-width);
	background: var(--cnc-white);
	border: 0;
	border-radius: var(--cnc-card-radius);
	box-shadow: var(--cnc-card-shadow);
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 12px;
	scroll-snap-align: start;
}

.kva-slider-scope #products_in_table .card__media {
	position: relative;
	aspect-ratio: 748 / 499;
	background: #f0efec;
	overflow: hidden;
	border-radius: 8px;
}

.kva-slider-scope #products_in_table .card__media .card__media-link,
.kva-slider-scope #products_in_table .card__media .product__info {
	display: block;
	height: 100%;
	padding: 0;
}

.kva-slider-scope #products_in_table .card__media img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
	border-radius: 0;
	margin: 0;
}

/* Flo #2b: compare control expands on hover/focus and reveals its label.
   .action--compare-add has to stay - js/main.js binds through it. */
.kva-slider-scope #products_in_table .cnc-compare {
	position: absolute;
	top: 8px;
	left: 8px;
	height: 26px;
	margin: 0;
	padding: 0 4px;
	border: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	color: var(--cnc-blue);
	cursor: pointer;
	display: flex;
	align-items: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
	overflow: hidden;
	white-space: nowrap;
	z-index: 2;
	transition: padding .28s cubic-bezier(.34, 1.4, .64, 1), background .15s ease, color .15s ease;
}

.kva-slider-scope #products_in_table .cnc-compare .plus {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kva-slider-scope #products_in_table .cnc-compare .plus svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	stroke-width: 3;
	fill: none;
}

.kva-slider-scope #products_in_table .cnc-compare .ico-check {
	display: none;
}

.kva-slider-scope #products_in_table .cnc-compare input:checked ~ .plus .ico-plus {
	display: none;
}

.kva-slider-scope #products_in_table .cnc-compare input:checked ~ .plus .ico-check {
	display: block;
}

.kva-slider-scope #products_in_table .cnc-compare .label {
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1px;
	transition: max-width .28s cubic-bezier(.34, 1.4, .64, 1), opacity .2s ease, margin-left .28s ease;
}

/* Expanded while hovered, while selected, and while keyboard-focused. Deliberately
   not :focus-within - the hidden checkbox holds focus after a mouse click, which
   would pin the pill open and stop it animating shut on the second click. */
.kva-slider-scope #products_in_table .cnc-compare:hover,
.kva-slider-scope #products_in_table .cnc-compare:has(input:checked),
.kva-slider-scope #products_in_table .cnc-compare:has(input:focus-visible) {
	background: #fff;
	color: var(--cnc-blue-hover);
	padding-right: 12px;
}

.kva-slider-scope #products_in_table .cnc-compare:hover .label,
.kva-slider-scope #products_in_table .cnc-compare:has(input:focus-visible) .label,
.kva-slider-scope #products_in_table .cnc-compare input:checked ~ .label {
	max-width: 140px;
	opacity: 1;
	margin-left: 5px;
}

/* Keyboard focus only, so clicking never leaves a ring behind. */
.kva-slider-scope #products_in_table .cnc-compare:has(input:focus-visible) {
	outline: 2px solid var(--cnc-dark) !important;
	outline-offset: 2px;
}

/* Testsieger / deal seal - sits outside the clipped media box */
.kva-slider-scope #products_in_table .badge-award {
	position: absolute;
	top: -14px;
	right: -12px;
	left: auto;
	bottom: auto;
	transform: rotate(12deg);
	z-index: 3;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 8px 18px;
	border: 3px solid #fff;
	border-radius: 999px;
	background: var(--cnc-dark);
	color: #fff;
	box-shadow: 0 0 0 2px var(--cnc-dark), 0 2px 6px rgba(0, 0, 0, .22);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.2px;
	white-space: nowrap;
	overflow: visible;
	text-overflow: clip;
}

.kva-slider-scope .card__inner {
	padding: 14px 0 4px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.kva-slider-scope .card__title {
	display: block;
	margin: 16px 0 8px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--cnc-black);
	text-align: left;
	text-decoration: none;
}

.kva-slider-scope .card__title:hover {
	color: var(--cnc-blue);
	text-decoration: none;
}

.kva-slider-scope .rating {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.kva-slider-scope .rating__label {
	font-size: 13px;
	font-weight: 700;
	color: var(--cnc-black);
}

.kva-slider-scope .stars {
	position: relative;
	display: inline-block;
	margin: 0;
	font-size: 17px;
	letter-spacing: 2px;
	line-height: 1;
}

.kva-slider-scope .stars::before {
	content: "\2605\2605\2605\2605\2605";
	color: var(--cnc-star-off);
}

.kva-slider-scope .stars__fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
	white-space: nowrap;
	color: var(--cnc-yellow);
	width: calc(var(--rating, 0) / 5 * 100%);
}

.kva-slider-scope .stars__fill::before {
	content: "\2605\2605\2605\2605\2605";
}

.kva-slider-scope #products_in_table .card__tagline {
	margin: 0 0 16px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--cnc-blue);
	text-align: left;
	width: auto;
	float: none;
}

/* pros / cons */
.kva-slider-scope #products_in_table .features {
	margin: 0 0 18px;
	padding: 0;
	background: none;
	float: none;
	width: auto;
}

.kva-slider-scope #products_in_table .features p {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 10px;
	padding: 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--cnc-black);
	text-align: left;
	float: none;
	width: auto;
}

.kva-slider-scope #products_in_table .ic {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin-top: 2px;
}

.kva-slider-scope #products_in_table .ic svg {
	width: 15px;
	height: 15px;
	display: block;
}

.kva-slider-scope #products_in_table .ic--check {
	color: var(--cnc-blue);
}

.kva-slider-scope #products_in_table .ic--minus {
	color: var(--cnc-light-grey);
}

/* "Zum Testbericht" */
.kva-slider-scope #products_in_table .product_buttons {
	padding: 0;
	background: none;
	float: none;
	width: auto;
}

/* .btn-test still carries blue-btn/small-btn/asin-button/gray-btn, and the rules
   behind those set margin and padding with !important (style.css
   "#products_in_table .blue-btn.small-btn.asin-button", component.css
   ".asin-button.gray-btn", ".blue-btn.small-btn"). Hence the !important here -
   without it the button keeps 10px of stray margin top and bottom. */
.kva-slider-scope #products_in_table .product_buttons a.btn-test {
	display: block;
	width: 100%;
	margin: 0 !important;
	padding: 13px 16px !important;
	border: 0;
	border-radius: var(--cnc-radius);
	background: var(--cnc-light-grey);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.6;
	text-align: center;
	text-decoration: none;
	transition: filter .15s ease;
}

.kva-slider-scope #products_in_table .product_buttons a.btn-test:hover {
	filter: brightness(.94);
	color: #fff;
	text-decoration: none;
}

/* "Zum Angebot" divider - the affiliate tooltip is a pure CSS :hover on
   .info-links (style.css), so only the metrics are touched here. */
.kva-slider-scope #products_in_table .info-links {
	margin: 16px 0 14px;
	float: none;
	background: none;
}

.kva-slider-scope #products_in_table .info-links::after {
	background-color: var(--cnc-hairline);
}

.kva-slider-scope #products_in_table .info-links p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--cnc-black);
	background: #fff;
	padding: 0 10px;
}

/* The mockup's .info dot: 15px, light grey, not the theme's 19px #888 */
.kva-slider-scope #products_in_table .info-links .show-hidden-content {
	width: 15px;
	height: 15px;
	line-height: 15px;
	margin-left: 6px;
	font-size: 10px;
	font-weight: 700;
	font-style: italic;
	background: var(--cnc-light-grey);
}

/* retailer offers */
.kva-slider-scope #products_in_table .buttons_with_images {
	padding: 0;
	background: none;
	float: none;
	width: auto;
	border-radius: 0;
}

/* .buttons_table carries margin:10px 0 from the old table layout - reset it, the
   surrounding gaps come from .info-links and the card padding. */
.kva-slider-scope #products_in_table .offers {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	width: auto;
}

.kva-slider-scope #products_in_table .offer {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

/* Max. 3 retailers per card. The old template caps the same way in style.css:10068
   (.buttons_with_images a:nth-child(4)...), but this card wraps every shop in its
   own .offer div, so that selector never matches here. n+4 instead of an explicit
   4/5/6 list so any number of extra retailers stays hidden. */
.kva-slider-scope #products_in_table .offers .offer:nth-child(n+4) {
	display: none;
}

.kva-slider-scope #products_in_table .offer__logo-link {
	flex: 0 0 80px;
	width: 80px;
	line-height: 0;
}

.kva-slider-scope #products_in_table .offer__logo {
	width: 80px;
	height: 24px;
	max-width: 80px;
	margin: 0;
	object-fit: contain;
	object-position: left center;
}

/* .blue-btn.small-btn sets padding:10px!important, so this needs !important too. */
.kva-slider-scope #products_in_table .offer a.btn-price {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 !important;
	padding: 11px 12px !important;
	border: 0;
	border-radius: var(--cnc-radius);
	background: var(--cnc-blue);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.6;
	text-align: center;
	text-decoration: none;
	transition: background .15s ease;
}

.kva-slider-scope #products_in_table .offer a.btn-price:hover {
	background: var(--cnc-blue-hover);
	color: #fff;
	text-decoration: none;
}

/* The old table layout drew the "featured" highlight as partial borders on each
   cell block - on a card that becomes one ring around the whole card. */
.kva-slider-scope #products_in_table .featured-td .image_holder_link_wrap,
.kva-slider-scope #products_in_table .featured-td .product_buttons,
.kva-slider-scope #products_in_table .featured-td .proscons_div,
.kva-slider-scope #products_in_table .featured-td .buttons_with_images {
	border: 0;
}

.kva-slider-scope .card.featured-td {
	border: 3px solid var(--cnc-blue);
	padding: 9px;
	box-shadow: var(--cnc-card-shadow);
}

.kva-slider-scope .btn-test:focus-visible,
.kva-slider-scope .btn-price:focus-visible,
.kva-slider-scope .card__title:focus-visible,
.kva-slider-scope .carousel__nav:focus-visible {
	outline: 2px solid var(--cnc-dark);
	outline-offset: 2px;
}

@media (max-width: 640px) {
	/* 74vw keeps a visible slice of the next card on narrow phones: at 270px fixed a
	   320px screen would leave only the 24px gap showing, which reads as a cut-off
	   card rather than "there is more to the right". Caps at the desktop 270px. */
	#products_in_table_wrap.cnc-carousel-band,
	.kva-slider-scope {
		--cnc-card-width: min(270px, 74vw);
	}

	.kva-slider-scope #products_in_table .features p {
		font-size: 14px;
	}
}

/* Flo #5: on phones the active card is centred with its neighbours peeking, instead
   of the desktop left-aligned 4px/20px pair. The gutters are what let the first and
   last card reach the centre at all - without them they can only scroll as far as
   the viewport edge. margin-left goes back to 0 or the desktop -4px would throw the
   symmetry off. Placed after the .card block above so scroll-snap-align wins on
   source order.
   560px is where the second card stops fitting (2x270 + 24 gap = 564); above it
   start-alignment shows two cards and centring would only add dead space. */
@media (max-width: 560px) {
	#products_in_table_wrap.cnc-carousel-band,
	.kva-slider-scope {
		--cnc-mobile-gutter: calc((100vw - var(--cnc-card-width)) / 2);
	}

	.kva-slider-scope #products_in_table {
		padding-left: var(--cnc-mobile-gutter);
		padding-right: 0;
		margin-left: 0;
	}

	/* The trailing gutter is a margin on the last card, not padding on the scroller:
	   padding-inline-end is dropped by several engines' flex scroll containers, and
	   without it the last card can never scroll far enough to reach the centre. */
	.kva-slider-scope #products_in_table .card:last-child {
		margin-right: var(--cnc-mobile-gutter);
	}

	.kva-slider-scope .card {
		scroll-snap-align: center;
	}
}