/*
 * KDLX related posts.
 *
 * Loaded on single posts only (see inc/blog-features/related-posts.php).
 * Classes prefixed kdlx-; reuses theme .post-image / .entry-title styles.
 */

.kdlx-related-posts {
	margin-top: 2em;
	padding-top: 1.5em;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.kdlx-related-posts-title {
	margin-bottom: 1em;
	font-size: 1.25rem;
}

.kdlx-related-posts-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.kdlx-related-post {
	display: flex;
	flex-direction: column;
	min-width: 0; /* allow long titles to wrap inside grid cells */
}

.kdlx-related-post-image {
	margin-bottom: 0.75em;
}

.kdlx-related-post-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.kdlx-related-post-title {
	margin-bottom: 0.35em;
	font-size: 1rem;
	line-height: 1.35;
}

.kdlx-related-post-meta {
	font-size: 0.8rem;
	opacity: 0.75;
}

.kdlx-related-post-excerpt {
	margin-top: 0.5em;
	font-size: 0.9em;
	opacity: 0.8;
	line-height: 1.5;
}

@media (max-width: 992px) {
	.kdlx-related-posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 576px) {
	.kdlx-related-posts-grid {
		grid-template-columns: 1fr;
	}
}

/*
 * "More from this category" block — sits below related posts.
 * .kdlx-more-posts-titles = plain linked-title list (no thumbnails).
 * .kdlx-more-posts-cards  = same card grid as the home sections.
 */

.kdlx-more-posts {
	margin-top: 2em;
	padding-top: 1.5em;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.kdlx-more-posts-title {
	margin-bottom: 1em;
	font-size: 1.25rem;
}

.kdlx-more-posts-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kdlx-more-posts-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25em 1em;
	padding: 0.6em 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.kdlx-more-posts-list li:last-child {
	border-bottom: 0;
}

.kdlx-more-posts .kdlx-more-posts-list a {
	flex: 1 1 auto;
	font-weight: 600;
	line-height: 1.4;
	color: inherit;
	text-decoration: none;
}

.kdlx-more-posts .kdlx-more-posts-list a:hover {
	color: var(--accent);
	text-decoration: none;
}

.kdlx-more-posts-date {
	font-size: 0.8rem;
	opacity: 0.65;
	white-space: nowrap;
}

/* Skip rendering until scrolled into view (cheap layout wins on long pages). */
.kdlx-related-posts,
.kdlx-more-posts {
	content-visibility: auto;
	contain-intrinsic-size: auto 400px;
}

/*
 * Post carousel — horizontal scroll-snap track with edge arrows.
 * Card look: full-bleed portrait thumbnail, rounded corners, title
 * overlaid at the bottom on a dark gradient scrim (reference style).
 * Slide width is driven by --kdlx-cpv (slides per view), image crop
 * by --kdlx-cr (aspect ratio, "auto" = natural).
 */

.kdlx-carousel {
	position: relative;
}

.kdlx-carousel-track {
	display: flex;
	gap: var(--kdlx-cgap, 10px);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 4px 2px;
	margin: -4px -2px;
}

.kdlx-carousel-track::-webkit-scrollbar {
	display: none;
}

.kdlx-carousel-slide {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 0 calc((100% - (var(--kdlx-cgap, 10px) * (var(--kdlx-cpv, 4) - 1))) / var(--kdlx-cpv, 4));
	scroll-snap-align: start;
	min-width: 0;
	border-radius: var(--kdlx-cbr, 12px);
	overflow: hidden;
	background: #14161a;
	/* Pin the slide's own height to the ratio so WebKit's multi-row
	   grid never re-derives it from content on :hover invalidation —
	   that bug let rows grow and pushed the footer down in Safari. */
	aspect-ratio: var(--kdlx-cr, 9 / 16);
}

/* The aspect ratio lives on the media wrapper, not the img: WebKit
   re-resolves aspect-ratio replaced elements inside a column flexbox
   on every style invalidation (e.g. :hover), which grew slides and
   pushed the footer down in Safari. A block-level ratio box is stable. */
.kdlx-carousel-slide-media {
	display: block;
	flex: none;
	min-height: 0;
	aspect-ratio: var(--kdlx-cr, 9 / 16);
	overflow: hidden;
}

.kdlx-carousel-slide-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.kdlx-carousel-slide:hover .kdlx-carousel-slide-media img {
	transform: scale(1.05);
}

.kdlx-carousel-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 3em .9em .85em;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .85) 100%);
}

.kdlx-carousel-title {
	margin: 0;
	font-size: .92rem;
	font-weight: var(--kdlx-ctw, 500);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: var(--kdlx-ctl, none);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Hovering a clamped title expands it in full */
.kdlx-carousel-title:hover {
	-webkit-line-clamp: none;
}

.kdlx-carousel-title a {
	color: #fff;
	text-decoration: none;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

.kdlx-carousel-title a:hover {
	color: #fff;
	text-decoration: none;
}

.kdlx-carousel-meta {
	margin-top: .35em;
	font-size: .72rem;
	color: rgba(255, 255, 255, .82);
}

.kdlx-carousel-meta a {
	color: #fff;
}

.kdlx-carousel-excerpt {
	margin-top: .4em;
	font-size: .78rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, .8);
}

/* Slide without a thumbnail keeps the same shape + muted fill */
.kdlx-carousel-slide-noimg {
	aspect-ratio: var(--kdlx-cr, 9 / 16);
	background: #2a2d33;
	align-items: flex-end;
}

.kdlx-carousel-slide-noimg .kdlx-carousel-caption {
	padding: 1em;
	background: none;
}

.kdlx-carousel-arrow {
	position: absolute;
	top: 38%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: #333;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
	cursor: pointer;
	font-size: 13px;
	transition: background .15s ease, color .15s ease, opacity .15s ease, transform .15s ease;
}

.kdlx-carousel-prev {
	left: 8px;
}

.kdlx-carousel-next {
	right: 8px;
}

.kdlx-carousel-arrow:hover:not(:disabled) {
	background: var(--accent, #1e73be);
	color: #fff;
	transform: scale(1.08);
}

.kdlx-carousel-arrow:disabled {
	opacity: .35;
	cursor: default;
}

/* Partial peek of the next slide hints at horizontal scrolling. Slides
   per view at each breakpoint come from --kdlx-cpv-t / --kdlx-cpv-m and
   may be fractional (2.5 shows a half-slide peek). */
@media (max-width: 992px) {
	.kdlx-carousel-slide {
		flex-basis: calc((100% - (var(--kdlx-cgap, 10px) * (var(--kdlx-cpv-t, 2.35) - 1))) / var(--kdlx-cpv-t, 2.35));
	}

	.kdlx-carousel-title {
		font-size: .85rem;
	}
}

@media (max-width: 576px) {
	.kdlx-carousel-slide {
		flex-basis: calc((100% - (var(--kdlx-cgap, 10px) * (var(--kdlx-cpv-m, var(--kdlx-cpv-t, 1.35)) - 1))) / var(--kdlx-cpv-m, var(--kdlx-cpv-t, 1.35)));
	}

	.kdlx-carousel-caption {
		padding: 2.5em .7em .7em;
	}

	.kdlx-carousel-title {
		font-size: .78rem;
	}

	.kdlx-carousel-meta {
		font-size: .68rem;
	}

	.kdlx-carousel-arrow {
		width: 34px;
		height: 34px;
		font-size: 14px;
	}
}

/* View-count badge floating at the slide's top-right */
.kdlx-carousel-views {
	position: absolute;
	top: .6em;
	right: .6em;
	z-index: 2;
	display: inline-flex;
	padding: .25em .6em;
	border-radius: 999px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-size: .68rem;
	font-weight: 600;
	line-height: 1.4;
	backdrop-filter: blur(4px);
}

.kdlx-carousel-views .kdlx-post-views {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	color: inherit;
}

.kdlx-carousel-views .kdlx-post-views svg {
	width: .95em;
	height: .95em;
}

/* Multi-row mode (rows>1): the track becomes a column-flow grid that still
   scrolls horizontally; arrows are not rendered in this mode. Row count
   and slides per view are overridable per breakpoint via --kdlx-crows-t/-m
   and --kdlx-cpv-t/-m (emitted inline by the renderer). */
.kdlx-carousel-rows .kdlx-carousel-track {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--kdlx-crows, 2), auto);
	grid-auto-columns: calc((100% - (var(--kdlx-cgap, 10px) * (var(--kdlx-cpv, 4) - 1))) / var(--kdlx-cpv, 4));
	/* Keep items at their aspect-ratio height even if a row ever
	   computes taller — prevents stretch amplification in WebKit. */
	align-items: start;
}

.kdlx-carousel-rows .kdlx-carousel-slide {
	flex: none;
	width: 100%;
}

/* Swipe grids never show arrows, whichever breakpoint enables them. */
.kdlx-carousel-rows .kdlx-carousel-arrow {
	display: none;
}

@media (max-width: 992px) {
	.kdlx-carousel-rows .kdlx-carousel-track,
	.kdlx-carousel-rows-t .kdlx-carousel-track {
		display: grid;
		grid-auto-flow: column;
		grid-template-rows: repeat(var(--kdlx-crows-t, var(--kdlx-crows, 2)), auto);
		grid-auto-columns: calc((100% - (var(--kdlx-cgap, 10px) * (var(--kdlx-cpv-t, 2.35) - 1))) / var(--kdlx-cpv-t, 2.35));
		align-items: start;
	}

	.kdlx-carousel-rows .kdlx-carousel-slide,
	.kdlx-carousel-rows-t .kdlx-carousel-slide {
		flex: none;
		width: 100%;
	}

	/* Row overrides can also flatten a desktop multi-row back to one row. */
	.kdlx-carousel-flat-t .kdlx-carousel-track {
		display: flex;
	}

	.kdlx-carousel-flat-t .kdlx-carousel-slide {
		flex: 0 0 calc((100% - (var(--kdlx-cgap, 10px) * (var(--kdlx-cpv-t, 2.35) - 1))) / var(--kdlx-cpv-t, 2.35));
		width: auto;
	}

	.kdlx-carousel-rows .kdlx-carousel-arrow,
	.kdlx-carousel-rows-t .kdlx-carousel-arrow {
		display: none;
	}
}

@media (max-width: 576px) {
	.kdlx-carousel-rows .kdlx-carousel-track,
	.kdlx-carousel-rows-m .kdlx-carousel-track {
		display: grid;
		grid-auto-flow: column;
		grid-template-rows: repeat(var(--kdlx-crows-m, var(--kdlx-crows-t, var(--kdlx-crows, 2))), auto);
		grid-auto-columns: calc((100% - (var(--kdlx-cgap, 10px) * (var(--kdlx-cpv-m, var(--kdlx-cpv-t, 1.35)) - 1))) / var(--kdlx-cpv-m, var(--kdlx-cpv-t, 1.35)));
		align-items: start;
	}

	.kdlx-carousel-rows .kdlx-carousel-slide,
	.kdlx-carousel-rows-m .kdlx-carousel-slide {
		flex: none;
		width: 100%;
	}

	.kdlx-carousel-flat-m .kdlx-carousel-track {
		display: flex;
	}

	.kdlx-carousel-flat-m .kdlx-carousel-slide {
		flex: 0 0 calc((100% - (var(--kdlx-cgap, 10px) * (var(--kdlx-cpv-m, var(--kdlx-cpv-t, 1.35)) - 1))) / var(--kdlx-cpv-m, var(--kdlx-cpv-t, 1.35)));
		width: auto;
	}

	.kdlx-carousel-rows .kdlx-carousel-arrow,
	.kdlx-carousel-rows-m .kdlx-carousel-arrow {
		display: none;
	}
}

/* Archive cards grid — the carousel card look as a vertical list,
   used on archive/index/search when the Archive Cards option is on.
   Column count comes from --kdlx-acols (inline, per Customizer).
   The .inside-article canvas wrapper carries the theme's content
   padding + card background so the grid keeps a gutter like posts. */
.separate-containers .site-main > .kdlx-archive-canvas,
.kdlx-archive-canvas.inside-article {
	margin-bottom: 20px;
}

/* Card/carousel pages should keep a real gap before the footer even
   when the Content Layout separating space is set very low. */
.page-template-kdlx-home-sections .site-main,
.site-main:has(.kdlx-carousel),
.site-main:has(.kdlx-archive-canvas) {
	margin-bottom: 20px;
}

.kdlx-archive-cards {
	display: grid;
	grid-template-columns: repeat(var(--kdlx-acols, 3), minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 1.5em;
}

.kdlx-archive-cards .kdlx-carousel-slide {
	/* Slides size purely from --kdlx-cr aspect-ratio; a percentage
	   min-height here created a stretch feedback loop in WebKit
	   (row grows -> item min-height grows -> row grows). */
	align-self: start;
}

/* Per-device layout variants — a block renders both its desktop and
   mobile markup when the Customizer picks different layouts; CSS shows
   only the matching one. */
.kdlx-layout-mobile-only,
.kdlx-layout-tablet-only {
	display: none;
}

/* Tablet band: the tablet variant replaces the desktop markup when
   one exists; "Same as desktop" keeps the desktop markup visible. */
@media (min-width: 577px) and (max-width: 992px) {
	.kdlx-has-tvar > .kdlx-layout-desktop-only {
		display: none;
	}

	.kdlx-layout-tablet-only {
		display: block;
	}
}

/* Mobile band: the mobile variant replaces the desktop markup when
   one exists; "Same as desktop" keeps the desktop markup visible. */
@media (max-width: 576px) {
	.kdlx-has-mvar > .kdlx-layout-desktop-only {
		display: none;
	}

	.kdlx-layout-mobile-only {
		display: block;
	}
}

/* Archive card grid presented as a horizontal swipe carousel on
   mobile — same slide markup, just re-flowed (no JS needed). The
   tablet variant uses the middle band only so a plain-grid mobile
   override still wins below 577px. */
@media (min-width: 577px) and (max-width: 992px) {
	.kdlx-archive-cards.kdlx-ac-tablet-carousel {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 12px;
		padding-bottom: 6px;
		scrollbar-width: none;
	}

	.kdlx-archive-cards.kdlx-ac-tablet-carousel::-webkit-scrollbar {
		display: none;
	}

	.kdlx-archive-cards.kdlx-ac-tablet-carousel .kdlx-carousel-slide {
		flex: 0 0 32%;
		scroll-snap-align: start;
	}
}

@media (max-width: 576px) {
	.kdlx-archive-cards.kdlx-ac-mobile-carousel {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 10px;
		padding-bottom: 6px;
		scrollbar-width: none;
	}

	.kdlx-archive-cards.kdlx-ac-mobile-carousel::-webkit-scrollbar {
		display: none;
	}

	.kdlx-archive-cards.kdlx-ac-mobile-carousel .kdlx-carousel-slide {
		flex: 0 0 62%;
		scroll-snap-align: start;
	}
}

@media (max-width: 992px) {
	.kdlx-archive-cards {
		grid-template-columns: repeat(min(3, var(--kdlx-acols, 3)), minmax(0, 1fr));
	}
}

@media (max-width: 576px) {
	.kdlx-archive-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
}

.kdlx-load-more-wrap {
	margin: 1.25em 0 1.5em;
	text-align: center;
}

.kdlx-load-more {
	display: inline-block;
	padding: .7em 2.2em;
	border: 1px solid var(--accent, #1e73be);
	border-radius: 999px;
	background: transparent;
	color: var(--accent, #1e73be);
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, opacity .15s ease;
}

.kdlx-load-more:hover:not(:disabled) {
	background: var(--accent, #1e73be);
	color: #fff;
}

.kdlx-load-more:disabled {
	opacity: .55;
	cursor: default;
}

/* Sponsored slide: full-bleed ad image + "Sponsored" chip above the label */
.kdlx-carousel-ad {
	border: 1px solid rgba(0, 0, 0, .1);
	background: #fff;
}

.kdlx-carousel-ad .kdlx-carousel-slide-media img {
	object-fit: cover;
}

.kdlx-carousel-ad-label {
	display: inline-block;
	margin-bottom: .45em;
	padding: .18em .65em;
	border-radius: 999px;
	background: rgba(0, 0, 0, .5);
	border: 1px solid rgba(255, 255, 255, .4);
	color: #fff;
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Per-device grid overrides — Customizer "columns/posts on tablet|mobile"
   emit these classes; '' (Same as desktop) emits nothing. The related
   selector carries the parent class so it outranks the dynamic
   cols-N CSS printed inline after this file. */
@media (max-width: 992px) {
	.kdlx-related-posts.kdlx-cols-t-1 .kdlx-related-posts-grid { grid-template-columns: 1fr; }
	.kdlx-related-posts.kdlx-cols-t-2 .kdlx-related-posts-grid { grid-template-columns: repeat(2, 1fr); }
	.kdlx-related-posts.kdlx-cols-t-3 .kdlx-related-posts-grid { grid-template-columns: repeat(3, 1fr); }
	.kdlx-related-posts.kdlx-cols-t-4 .kdlx-related-posts-grid { grid-template-columns: repeat(4, 1fr); }
	.kdlx-related-posts.kdlx-cols-t-5 .kdlx-related-posts-grid { grid-template-columns: repeat(5, 1fr); }
	.kdlx-related-posts.kdlx-cols-t-6 .kdlx-related-posts-grid { grid-template-columns: repeat(6, 1fr); }

	.kdlx-archive-cards.kdlx-cols-t-1 { grid-template-columns: 1fr; }
	.kdlx-archive-cards.kdlx-cols-t-2 { grid-template-columns: repeat(2, 1fr); }
	.kdlx-archive-cards.kdlx-cols-t-3 { grid-template-columns: repeat(3, 1fr); }
	.kdlx-archive-cards.kdlx-cols-t-4 { grid-template-columns: repeat(4, 1fr); }
	.kdlx-archive-cards.kdlx-cols-t-5 { grid-template-columns: repeat(5, 1fr); }
	.kdlx-archive-cards.kdlx-cols-t-6 { grid-template-columns: repeat(6, 1fr); }

	.kdlx-hide-t { display: none !important; }
}

@media (max-width: 576px) {
	.kdlx-related-posts.kdlx-cols-m-1 .kdlx-related-posts-grid { grid-template-columns: 1fr; }
	.kdlx-related-posts.kdlx-cols-m-2 .kdlx-related-posts-grid { grid-template-columns: repeat(2, 1fr); }
	.kdlx-related-posts.kdlx-cols-m-3 .kdlx-related-posts-grid { grid-template-columns: repeat(3, 1fr); }
	.kdlx-related-posts.kdlx-cols-m-4 .kdlx-related-posts-grid { grid-template-columns: repeat(4, 1fr); }
	.kdlx-related-posts.kdlx-cols-m-5 .kdlx-related-posts-grid { grid-template-columns: repeat(5, 1fr); }
	.kdlx-related-posts.kdlx-cols-m-6 .kdlx-related-posts-grid { grid-template-columns: repeat(6, 1fr); }

	.kdlx-archive-cards.kdlx-cols-m-1 { grid-template-columns: 1fr; }
	.kdlx-archive-cards.kdlx-cols-m-2 { grid-template-columns: repeat(2, 1fr); }
	.kdlx-archive-cards.kdlx-cols-m-3 { grid-template-columns: repeat(3, 1fr); }
	.kdlx-archive-cards.kdlx-cols-m-4 { grid-template-columns: repeat(4, 1fr); }
	.kdlx-archive-cards.kdlx-cols-m-5 { grid-template-columns: repeat(5, 1fr); }
	.kdlx-archive-cards.kdlx-cols-m-6 { grid-template-columns: repeat(6, 1fr); }

	.kdlx-hide-m { display: none !important; }
}

/* Mobile/tablet card-look overrides for the related grid and archive
   cards — scoped vars/classes on the wrapper; [style*=] + descendant
   selectors outrank the dynamic inline CSS. */
@media (max-width: 576px) {
	.kdlx-related-posts[style*="--kdlx-cr-m"] .kdlx-related-post-image img {
		aspect-ratio: var(--kdlx-cr-m);
		object-fit: cover;
		width: 100%;
		display: block;
	}

	.kdlx-related-posts[style*="--kdlx-ctl-m"] .kdlx-related-post-title {
		display: -webkit-box;
		-webkit-line-clamp: var(--kdlx-ctl-m);
		-webkit-box-orient: vertical;
		overflow: hidden;
		min-height: calc(var(--kdlx-ctl-m) * 1.3em);
		min-height: calc(var(--kdlx-ctl-m) * 1lh);
	}

	.kdlx-related-posts.kdlx-nodate-m .kdlx-related-post-meta { display: none; }

	.kdlx-archive-cards[style*="--kdlx-cr-m"] { --kdlx-cr: var(--kdlx-cr-m) !important; }
	.kdlx-archive-cards[style*="--kdlx-ctl-m"] { --kdlx-ctl: var(--kdlx-ctl-m) !important; }
	.kdlx-archive-cards[style*="--kdlx-ctw-m"] { --kdlx-ctw: var(--kdlx-ctw-m) !important; }
	.kdlx-archive-cards[style*="--kdlx-cbr-m"] { --kdlx-cbr: var(--kdlx-cbr-m) !important; }
	.kdlx-archive-cards.kdlx-nodate-m .kdlx-carousel-date { display: none; }
}

@media (max-width: 992px) {
	.kdlx-related-posts[style*="--kdlx-cr-t"] .kdlx-related-post-image img {
		aspect-ratio: var(--kdlx-cr-t);
		object-fit: cover;
		width: 100%;
		display: block;
	}

	.kdlx-related-posts[style*="--kdlx-ctl-t"] .kdlx-related-post-title {
		display: -webkit-box;
		-webkit-line-clamp: var(--kdlx-ctl-t);
		-webkit-box-orient: vertical;
		overflow: hidden;
		min-height: calc(var(--kdlx-ctl-t) * 1.3em);
		min-height: calc(var(--kdlx-ctl-t) * 1lh);
	}

	.kdlx-related-posts.kdlx-nodate-t .kdlx-related-post-meta { display: none; }

	.kdlx-archive-cards[style*="--kdlx-cr-t"] { --kdlx-cr: var(--kdlx-cr-t) !important; }
	.kdlx-archive-cards[style*="--kdlx-ctl-t"] { --kdlx-ctl: var(--kdlx-ctl-t) !important; }
	.kdlx-archive-cards[style*="--kdlx-ctw-t"] { --kdlx-ctw: var(--kdlx-ctw-t) !important; }
	.kdlx-archive-cards[style*="--kdlx-cbr-t"] { --kdlx-cbr: var(--kdlx-cbr-t) !important; }
	.kdlx-archive-cards.kdlx-nodate-t .kdlx-carousel-date { display: none; }
}