/* ==========================================================================
   DriveKaro — base styles (loaded on every page)
   Tokens · font · reset · layout · header · nav · search · buttons · cards ·
   chips · breadcrumbs · sidebar · pagination · newsletter · footer · utilities
   ========================================================================== */

@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-var-latin.woff2") format("woff2");
	font-weight: 400 800;
	font-stretch: 100% 125%;
	font-style: normal;
	font-display: swap;
}

:root {
	--dk-ink: #17212b;
	--dk-ink-2: #3d4a57;
	--dk-muted: #5a6672;
	--dk-paper: #ffffff;
	--dk-surface: #f2f5f7;
	--dk-surface-2: #e6ebef;
	--dk-line: #d5dce2;
	--dk-line-strong: #b9c3cc;
	--dk-primary: #0d5c6b;
	--dk-on-primary: #ffffff;
	--dk-cta: #f2a900;
	--dk-on-cta: #17212b;
	--dk-good: #1b6b3a;
	--dk-bad: #a3352a;
	--dk-primary-tint: color-mix(in srgb, var(--dk-primary) 9%, #fff);
	--dk-cta-tint: color-mix(in srgb, var(--dk-cta) 16%, #fff);

	--dk-font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--dk-font-system: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--dk-wide: 118%;
	--dk-wider: 125%;

	--dk-radius-s: 6px;
	--dk-radius: 8px;
	--dk-radius-l: 12px;
	--dk-shadow: 0 1px 2px rgba(23, 33, 43, 0.06);
	--dk-shadow-hover: 0 8px 22px rgba(23, 33, 43, 0.09);

	--dk-gutter: 16px;
	--dk-max: 1200px;
	--dk-header-h: 60px;
	--dk-article-size: 18px;
	--dk-focus: 0 0 0 3px var(--dk-paper), 0 0 0 5px var(--dk-primary);
}

@media (min-width: 640px) {
	:root { --dk-gutter: 24px; }
}

@media (min-width: 1024px) {
	:root { --dk-gutter: 32px; --dk-header-h: 68px; }
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--dk-header-h) + 16px);
}

body {
	margin: 0;
	background: var(--dk-paper);
	color: var(--dk-ink);
	font-family: var(--dk-font);
	font-size: 1rem;
	line-height: 1.6;
	font-kerning: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.dk-font-system { --dk-font: var(--dk-font-system); }

img,
svg,
video,
iframe { max-width: 100%; }

img,
video { height: auto; }

img { vertical-align: middle; }

a {
	color: var(--dk-primary);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

a:hover { text-decoration-thickness: 2px; }

:focus-visible {
	outline: none;
	box-shadow: var(--dk-focus);
	border-radius: 3px;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	line-height: 1.2;
	font-weight: 700;
	color: var(--dk-ink);
	text-wrap: balance;
}

p { margin: 0 0 1em; }

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="password"],
select,
textarea {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	background: var(--dk-paper);
	border: 1px solid var(--dk-line-strong);
	border-radius: var(--dk-radius-s);
	font-size: 1rem;
}

textarea { min-height: 140px; }

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	border-color: var(--dk-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dk-primary) 25%, transparent);
	border-radius: var(--dk-radius-s);
}

label { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* --------------------------------------------------------------------------
   Accessibility helpers
   -------------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.dk-skip-link:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 12px 18px;
	margin: 0;
	clip: auto;
	clip-path: none;
	background: var(--dk-paper);
	color: var(--dk-ink);
	font-weight: 700;
	border-radius: var(--dk-radius-s);
	box-shadow: var(--dk-shadow-hover), var(--dk-focus);
	white-space: normal;
}

.dk-icon { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.dk-container {
	width: 100%;
	max-width: calc(var(--dk-max) + 2 * var(--dk-gutter));
	margin-inline: auto;
	padding-inline: var(--dk-gutter);
}

.dk-main { display: block; padding-bottom: 64px; }

.dk-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
	.dk-grid--2,
	.dk-grid--3,
	.dk-grid--archive { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.dk-grid--3,
	.dk-grid--archive { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.dk-header {
	position: relative;
	z-index: 50;
	background: var(--dk-paper);
	border-bottom: 1px solid var(--dk-line);
}

.dk-sticky-header .dk-header {
	position: sticky;
	top: 0;
}

.admin-bar.dk-sticky-header .dk-header { top: 46px; }

@media (min-width: 783px) {
	.admin-bar.dk-sticky-header .dk-header { top: 32px; }
}

@media (max-width: 600px) {
	.admin-bar.dk-sticky-header .dk-header { top: 0; }
}

.dk-header__inner {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: var(--dk-header-h);
}

.dk-brand {
	display: flex;
	align-items: center;
	min-width: 0;
	margin-right: auto;
}

.dk-brand .custom-logo-link { display: inline-flex; }

.dk-brand .custom-logo {
	width: auto;
	max-height: 40px;
}

.dk-brand__name {
	color: var(--dk-ink);
	font-size: 1.3rem;
	font-weight: 800;
	font-stretch: var(--dk-wider);
	letter-spacing: -0.01em;
	text-decoration: none;
	white-space: nowrap;
}

.dk-brand__name:hover { color: var(--dk-primary); }

.dk-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--dk-ink);
	background: transparent;
	border: 0;
	border-radius: var(--dk-radius-s);
	cursor: pointer;
	text-decoration: none;
}

.dk-icon-btn:hover { background: var(--dk-surface); }

/* Mobile: logo · search · menu */
.dk-nav { order: 3; }
.dk-search-toggle { order: 2; }

.dk-nav__icon-close { display: none; }
.dk-nav__toggle[aria-expanded="true"] .dk-nav__icon-open { display: none; }
.dk-nav__toggle[aria-expanded="true"] .dk-nav__icon-close { display: block; }

.dk-menu,
.dk-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dk-menu a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 10px 4px;
	color: var(--dk-ink);
	font-weight: 600;
	text-decoration: none;
}

.dk-menu a:hover,
.dk-menu .current-menu-item > a,
.dk-menu .current-menu-ancestor > a,
.dk-menu .current-category-ancestor > a { color: var(--dk-primary); }

.dk-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--dk-radius-s);
	color: var(--dk-ink);
	cursor: pointer;
}

.dk-submenu-toggle .dk-icon { transition: transform 0.15s ease; }
.dk-submenu-toggle[aria-expanded="true"] .dk-icon { transform: rotate(180deg); }

@media (max-width: 1199px) {
	.js .dk-nav__panel {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		max-height: calc(100vh - var(--dk-header-h));
		max-height: calc(100dvh - var(--dk-header-h));
		overflow-y: auto;
		padding: 8px var(--dk-gutter) 24px;
		background: var(--dk-paper);
		border-bottom: 1px solid var(--dk-line);
		box-shadow: 0 16px 24px rgba(23, 33, 43, 0.08);
	}

	.js .dk-nav__panel.is-open { display: block; }

	.dk-menu > li { border-bottom: 1px solid var(--dk-line); }

	.dk-menu li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	.dk-menu li > a { flex: 1 1 auto; }

	.dk-menu .sub-menu {
		flex-basis: 100%;
		padding: 0 0 8px 12px;
		border-left: 2px solid var(--dk-surface-2);
		margin-left: 4px;
	}

	.js .dk-menu .sub-menu { display: none; }
	.js .dk-menu .sub-menu.is-open { display: block; }

	.dk-menu .sub-menu a {
		min-height: 44px;
		font-weight: 500;
		color: var(--dk-ink-2);
	}

	/* Without JavaScript: the menu is a scrollable row under the header. */
	.no-js .dk-nav__toggle { display: none; }

	.no-js .dk-nav {
		order: 10;
		flex-basis: 100%;
		overflow-x: auto;
	}

	.no-js .dk-menu {
		display: flex;
		gap: 16px;
	}

	.no-js .dk-menu > li { border: 0; }
	.no-js .dk-menu .sub-menu { display: none; }
}

@media (min-width: 1200px) {
	.dk-header__inner { gap: 20px; }
	.dk-brand { margin-right: 0; }
	.dk-nav { order: 2; flex: 1 1 auto; }
	.dk-search-toggle { order: 3; }
	.dk-nav__toggle { display: none; }

	.dk-menu {
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.dk-menu > li { position: relative; display: flex; align-items: center; }

	.dk-menu > li > a {
		min-height: var(--dk-header-h);
		padding: 0 9px;
		font-size: 0.93rem;
		white-space: nowrap;
		border-bottom: 3px solid transparent;
		margin-bottom: -1px;
	}

	.dk-menu > li > a:hover,
	.dk-menu > .current-menu-item > a,
	.dk-menu > .current-menu-ancestor > a,
	.dk-menu > .current-category-ancestor > a {
		border-bottom-color: var(--dk-primary);
	}

	.dk-menu .dk-submenu-toggle {
		width: 28px;
		height: 28px;
		margin-left: -6px;
	}

	.dk-menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 60;
		display: none;
		min-width: 240px;
		padding: 8px;
		background: var(--dk-paper);
		border: 1px solid var(--dk-line);
		border-radius: var(--dk-radius);
		box-shadow: var(--dk-shadow-hover);
	}

	.dk-menu li:hover > .sub-menu,
	.dk-menu li:focus-within > .sub-menu,
	.dk-menu .sub-menu.is-open { display: block; }

	.dk-menu .sub-menu a {
		min-height: 40px;
		padding: 8px 12px;
		font-size: 0.95rem;
		font-weight: 500;
		border-radius: var(--dk-radius-s);
	}

	.dk-menu .sub-menu a:hover { background: var(--dk-surface); }
}

/* Header search panel: opens via JS, or via #dk-search anchor without JS. */
.dk-search-panel {
	display: none;
	padding: 16px 0 20px;
	background: var(--dk-surface);
	border-top: 1px solid var(--dk-line);
}

.dk-search-panel:target,
.dk-search-panel.is-open { display: block; }

/* --------------------------------------------------------------------------
   Search form
   -------------------------------------------------------------------------- */
.dk-searchform {
	position: relative;
	display: flex;
	gap: 8px;
	max-width: 720px;
}

.dk-searchform__icon {
	position: absolute;
	left: 14px;
	top: 14px;
	color: var(--dk-muted);
	pointer-events: none;
}

.dk-searchform__input.dk-searchform__input { padding-left: 44px; }

.dk-searchform__submit { flex-shrink: 0; }

@media (max-width: 420px) {
	.dk-searchform__submit { padding-inline: 14px; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.dk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 10px 20px;
	border: 1px solid transparent;
	border-radius: var(--dk-radius-s);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dk-btn--lg { min-height: 52px; padding: 12px 24px; font-size: 1.05rem; }

.dk-btn--primary {
	background: var(--dk-primary);
	color: var(--dk-on-primary);
}

.dk-btn--primary:hover { background: color-mix(in srgb, var(--dk-primary) 85%, #000); color: var(--dk-on-primary); }

.dk-btn--outline {
	background: transparent;
	color: var(--dk-ink);
	border-color: var(--dk-ink);
}

.dk-btn--outline:hover { background: var(--dk-ink); color: var(--dk-paper); }

.dk-btn--ghost {
	background: var(--dk-surface);
	color: var(--dk-ink);
	border-color: var(--dk-line);
}

.dk-btn--ghost:hover { background: var(--dk-surface-2); color: var(--dk-ink); }

/* Shopping buttons: the only place the amber "indicator" color is used. */
.dk-btn--cta {
	background: var(--dk-cta);
	color: var(--dk-on-cta);
	border-color: color-mix(in srgb, var(--dk-cta) 70%, #000);
}

.dk-btn--cta:hover {
	background: color-mix(in srgb, var(--dk-cta) 88%, #000);
	color: var(--dk-on-cta);
}

.dk-btn__icon { opacity: 0.8; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.dk-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--dk-paper);
}

.dk-card__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--dk-surface);
	border-radius: var(--dk-radius);
}

.dk-card__media img,
.dk-product__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dk-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--dk-line-strong);
	background:
		linear-gradient(var(--dk-surface-2) 1px, transparent 1px) 0 0 / 20px 20px,
		linear-gradient(90deg, var(--dk-surface-2) 1px, transparent 1px) 0 0 / 20px 20px,
		var(--dk-surface);
}

.dk-card__body { padding-top: 14px; }

.dk-card__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-bottom: 6px;
}

.dk-card__cat {
	position: relative;
	z-index: 2;
	color: var(--dk-primary);
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
}

.dk-card__cat:hover { text-decoration: underline; }

.dk-card__title {
	margin: 0 0 8px;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
}

.dk-card__title a {
	color: var(--dk-ink);
	text-decoration: none;
}

/* Whole card is clickable via the title link (one link per card for screen readers). */
.dk-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.dk-card:hover .dk-card__title a { color: var(--dk-primary); }
.dk-card:focus-within { outline: none; }
.dk-card__title a:focus-visible { box-shadow: none; text-decoration: underline; }
.dk-card__title a:focus-visible::after { box-shadow: var(--dk-focus); border-radius: var(--dk-radius); }

.dk-card__excerpt {
	margin: 0 0 8px;
	color: var(--dk-ink-2);
	font-size: 0.95rem;
	line-height: 1.55;
}

.dk-card__meta {
	margin: 0;
	color: var(--dk-muted);
	font-size: 0.85rem;
}

.dk-card--feature .dk-card__title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); font-stretch: var(--dk-wide); }

@media (min-width: 1024px) {
	.dk-grid--archive .dk-card--feature {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: 1.4fr 1fr;
		gap: 32px;
		align-items: center;
	}

	.dk-grid--archive .dk-card--feature .dk-card__body { padding-top: 0; }
}

.dk-card--compact {
	flex-direction: row;
	gap: 14px;
	align-items: flex-start;
}

.dk-card--compact .dk-card__media {
	flex: 0 0 104px;
	aspect-ratio: 1;
}

.dk-card--compact .dk-card__body { padding-top: 0; }
.dk-card--compact .dk-card__title { font-size: 1rem; }

.dk-card--row {
	flex-direction: column;
	gap: 12px;
	padding: 16px 0;
	border-bottom: 1px solid var(--dk-line);
}

@media (min-width: 640px) {
	.dk-card--row {
		flex-direction: row;
		gap: 24px;
	}

	.dk-card--row .dk-card__media { flex: 0 0 220px; }
	.dk-card--row .dk-card__body { padding-top: 0; }
}

/* Product cards */
.dk-product {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--dk-paper);
	border: 1px solid var(--dk-line);
	border-radius: var(--dk-radius-l);
	overflow: hidden;
}

.dk-product__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--dk-surface);
	border-bottom: 1px solid var(--dk-line);
}

.dk-product__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 18px 18px 20px;
}

.dk-product__title {
	margin: 2px 0 12px;
	font-size: 1.2rem;
	line-height: 1.25;
	font-stretch: var(--dk-wide);
}

.dk-product__title a { color: var(--dk-ink); text-decoration: none; }
.dk-product__title a:hover { color: var(--dk-primary); text-decoration: underline; }

.dk-product__desc {
	margin: 0 0 16px;
	color: var(--dk-ink-2);
	font-size: 0.95rem;
}

.dk-product__rating { margin: 0 0 10px; }

.dk-product__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
}

.dk-product__actions .dk-btn { flex: 1 1 auto; white-space: nowrap; padding-inline: 16px; }

/* "Data plate" — engraved label/value strip used for "Best for". */
.dk-plate {
	display: flex;
	align-items: stretch;
	margin: 0 0 12px;
	font-size: 0.9rem;
	border: 1px solid var(--dk-line-strong);
	border-radius: var(--dk-radius-s);
	overflow: hidden;
}

.dk-plate__label {
	padding: 6px 10px;
	background: var(--dk-ink);
	color: var(--dk-paper);
	font-weight: 700;
	font-stretch: var(--dk-wide);
	white-space: nowrap;
}

.dk-plate__value {
	padding: 6px 10px;
	font-weight: 600;
	min-width: 0;
}

/* Badges & rating */
.dk-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; }

.dk-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px 3px 7px;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.4;
	border-radius: 999px;
	border: 1px solid transparent;
}

.dk-badge--choice {
	background: var(--dk-cta-tint);
	border-color: color-mix(in srgb, var(--dk-cta) 55%, #fff);
	color: var(--dk-ink);
}

.dk-badge--tested {
	background: var(--dk-primary-tint);
	border-color: color-mix(in srgb, var(--dk-primary) 30%, #fff);
	color: var(--dk-primary);
}

.dk-badge--sm { position: relative; z-index: 2; font-size: 0.75rem; }

.dk-rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 0.95rem;
}

.dk-rating__stars {
	--dk-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.2 6.6.7-5 4.5 1.4 6.6L12 17.2l-5.9 3.3 1.4-6.6-5-4.5 6.6-.7z'/%3E%3C/svg%3E");
	position: relative;
	display: inline-block;
	width: 90px;
	height: 18px;
	background: var(--dk-surface-2);
	-webkit-mask: var(--dk-star) 0 0 / 18px 18px repeat-x;
	mask: var(--dk-star) 0 0 / 18px 18px repeat-x;
}

.dk-rating__stars::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--dk-rating, 0%);
	background: #b77f00;
}

/* --------------------------------------------------------------------------
   Chips
   -------------------------------------------------------------------------- */
.dk-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dk-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 8px 14px;
	color: var(--dk-ink);
	background: var(--dk-paper);
	border: 1px solid var(--dk-line-strong);
	border-radius: 999px;
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
}

.dk-chip:hover { border-color: var(--dk-primary); color: var(--dk-primary); }

.dk-chip__count {
	color: var(--dk-muted);
	font-weight: 500;
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
}

.dk-chips--lg .dk-chip { min-height: 46px; padding-inline: 18px; font-size: 1rem; }

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */
.dk-breadcrumbs {
	padding: 16px 0 4px;
	font-size: 0.875rem;
	color: var(--dk-muted);
}

.dk-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dk-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}

.dk-breadcrumbs li + li::before {
	content: "";
	width: 6px;
	height: 6px;
	margin: 0 10px;
	border-top: 1.5px solid var(--dk-line-strong);
	border-right: 1.5px solid var(--dk-line-strong);
	transform: rotate(45deg);
}

.dk-breadcrumbs a {
	color: var(--dk-ink-2);
	text-decoration: none;
	padding: 6px 0;
}

.dk-breadcrumbs a:hover { color: var(--dk-primary); text-decoration: underline; }

.dk-breadcrumbs [aria-current="page"] {
	color: var(--dk-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 60vw;
}

.dk-breadcrumbs--plugin p { margin: 0; }

/* --------------------------------------------------------------------------
   Sections (shared by home, category, hubs)
   -------------------------------------------------------------------------- */
.dk-section { padding: 48px 0; }
.dk-section--tight { padding: 28px 0; }

@media (min-width: 1024px) {
	.dk-section { padding: 64px 0; }
}

.dk-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: 24px;
}

.dk-section__title {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
	font-weight: 800;
	font-stretch: var(--dk-wide);
	letter-spacing: -0.01em;
	line-height: 1.1;
}

/* A title used on its own (no section head wrapper) still needs breathing room. */
.dk-section > .dk-section__title:not(:has(+ .dk-section__intro)) { margin-bottom: 16px; }

.dk-section__intro {
	max-width: 60ch;
	margin: 8px 0 0;
	color: var(--dk-ink-2);
}

.dk-section__more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	font-weight: 700;
	text-decoration: none;
}

.dk-section__more:hover { text-decoration: underline; }

/* Lists used for popular/ranked content */
.dk-ranked {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: dk-rank;
}

.dk-ranked li {
	position: relative;
	padding: 12px 0 12px 40px;
	border-bottom: 1px solid var(--dk-line);
	counter-increment: dk-rank;
}

.dk-ranked li::before {
	content: counter(dk-rank);
	position: absolute;
	left: 0;
	top: 10px;
	width: 28px;
	color: var(--dk-primary);
	font-weight: 800;
	font-stretch: var(--dk-wider);
	font-size: 1.25rem;
	font-variant-numeric: tabular-nums;
}

.dk-ranked a {
	color: var(--dk-ink);
	font-weight: 600;
	text-decoration: none;
	line-height: 1.4;
}

.dk-ranked a:hover { color: var(--dk-primary); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Page headers (archives, hubs, tools)
   -------------------------------------------------------------------------- */
.dk-archive__header {
	padding: 16px 0 24px;
}

.dk-archive__title {
	margin: 0 0 8px;
	font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem);
	font-weight: 800;
	font-stretch: var(--dk-wide);
	letter-spacing: -0.015em;
	line-height: 1.08;
}

.dk-archive__intro {
	max-width: 70ch;
	color: var(--dk-ink-2);
	font-size: 1.08rem;
}

.dk-hubpage__header {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.dk-archive__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 56px;
	height: 56px;
	color: var(--dk-primary);
	background: var(--dk-primary-tint);
	border-radius: var(--dk-radius);
}

.dk-subcats { margin: 0 0 24px; }

.dk-subcats__label {
	margin: 0 0 10px;
	color: var(--dk-ink-2);
	font-weight: 700;
	font-size: 0.95rem;
}


/* --------------------------------------------------------------------------
   Tool cards (homepage + Car Tools Directory)
   -------------------------------------------------------------------------- */
.dk-tools {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.dk-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.dk-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}

.dk-toolcard {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 14px;
	height: 100%;
	padding: 18px;
	color: var(--dk-ink);
	background: var(--dk-paper);
	border: 1px solid var(--dk-line);
	border-radius: var(--dk-radius);
	text-decoration: none;
}

.dk-toolcard:hover { border-color: var(--dk-primary); }
.dk-toolcard:hover .dk-toolcard__title { color: var(--dk-primary); text-decoration: underline; }

.dk-toolcard__icon {
	grid-row: span 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--dk-ink);
	background: var(--dk-cta-tint);
	border-radius: var(--dk-radius-s);
}

.dk-toolcard__title { font-weight: 700; line-height: 1.3; }
.dk-toolcard__desc { color: var(--dk-ink-2); font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   Sidebar & widgets
   -------------------------------------------------------------------------- */
.dk-sidebar {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
}

.dk-widget { min-width: 0; }

.dk-widget__title {
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--dk-ink);
	font-size: 1.05rem;
	font-weight: 800;
	font-stretch: var(--dk-wide);
}

.dk-widget ul:not(.dk-chips) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dk-widget ul:not(.dk-chips) li {
	padding: 8px 0;
	border-bottom: 1px solid var(--dk-line);
}

/* --------------------------------------------------------------------------
   Newsletter
   -------------------------------------------------------------------------- */
.dk-newsletter {
	display: grid;
	gap: 16px;
	padding: 28px;
	background: var(--dk-primary);
	color: var(--dk-on-primary);
	border-radius: var(--dk-radius-l);
}

.dk-newsletter__title {
	margin: 0 0 8px;
	color: inherit;
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
	font-weight: 800;
	font-stretch: var(--dk-wide);
	line-height: 1.15;
}

.dk-newsletter p { margin: 0; }
.dk-newsletter a { color: inherit; }

.dk-subscribe {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.dk-subscribe input { flex: 1 1 220px; color: var(--dk-ink); border-color: transparent; }

.dk-subscribe .dk-btn {
	background: var(--dk-ink);
	color: #fff;
	border-color: transparent;
}

.dk-subscribe .dk-btn:hover { background: #000; color: #fff; }

.dk-newsletter__note { margin-top: 8px !important; font-size: 0.85rem; opacity: 0.85; }

@media (min-width: 900px) {
	.dk-newsletter--home {
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: 48px;
		padding: 48px;
	}
}

.dk-newsletter--sidebar { padding: 22px; }
.dk-newsletter--sidebar .dk-newsletter__title { font-size: 1.25rem; }

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.pagination { margin-top: 40px; }

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 8px 14px;
	color: var(--dk-ink);
	border: 1px solid var(--dk-line-strong);
	border-radius: var(--dk-radius-s);
	font-weight: 600;
	text-decoration: none;
}

.pagination .page-numbers:hover { border-color: var(--dk-primary); color: var(--dk-primary); }

.pagination .page-numbers.current {
	background: var(--dk-ink);
	border-color: var(--dk-ink);
	color: var(--dk-paper);
}

.pagination .page-numbers.dots { border: 0; min-width: auto; }

/* --------------------------------------------------------------------------
   Ads
   -------------------------------------------------------------------------- */
.dk-ad {
	margin: 32px auto;
	text-align: center;
	min-height: 120px;
}

.dk-ad--header { margin: 16px auto; min-height: 90px; max-width: var(--dk-max); padding-inline: var(--dk-gutter); }
.dk-ad--sidebar { min-height: 250px; margin: 0; }

.dk-ad__label {
	display: block;
	margin-bottom: 6px;
	color: var(--dk-muted);
	font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   Admin-only hints (never visible to visitors)
   -------------------------------------------------------------------------- */
.dk-admin-hint {
	margin: 16px 0;
	padding: 12px 16px;
	background: #fff8e1;
	border: 1px dashed #c58f00;
	border-radius: var(--dk-radius-s);
	color: #4a3700;
	font-size: 0.9rem;
}

.dk-admin-hint__note { color: #7a5c00; font-size: 0.85em; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.dk-footer {
	margin-top: 0;
	background: var(--dk-ink);
	color: #c9d2da;
	font-size: 0.95rem;
}

.dk-footer a { color: #e9eef2; text-decoration: none; }
.dk-footer a:hover { color: #fff; text-decoration: underline; }

.dk-footer__grid {
	display: grid;
	gap: 32px;
	padding-top: 48px;
	padding-bottom: 40px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dk-footer__about { grid-column: 1 / -1; }

@media (min-width: 900px) {
	.dk-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-top: 64px; }
	.dk-footer__about { grid-column: auto; max-width: 380px; }
}

.dk-footer__brand {
	margin: 0 0 6px;
	font-size: 1.4rem;
	font-weight: 800;
	font-stretch: var(--dk-wider);
}

.dk-footer__brand a { color: #fff; }

.dk-footer__tagline { margin: 0 0 12px; color: #fff; font-weight: 600; }
.dk-footer__text { margin: 0 0 16px; }

.dk-footer__title {
	margin: 0 0 12px;
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
}

.dk-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dk-footer__links a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
}

.dk-social {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dk-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 50%;
}

.dk-social a:hover { background: rgba(255, 255, 255, 0.1); text-decoration: none; }

.dk-footer :focus-visible { box-shadow: 0 0 0 2px var(--dk-ink), 0 0 0 4px #fff; }

.dk-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.85rem;
}

.dk-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 32px;
	padding-top: 20px;
	padding-bottom: 24px;
}

.dk-footer__bottom p { margin: 0; }
.dk-footer__disclosure { max-width: 640px; }

/* --------------------------------------------------------------------------
   Core block alignment helpers used site-wide
   -------------------------------------------------------------------------- */
.alignleft { float: left; margin: 0.3em 1.5em 1em 0; }
.alignright { float: right; margin: 0.3em 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; }

.wp-caption,
figure { max-width: 100%; }

.sticky .dk-card__title::before { content: none; }
.bypostauthor { display: block; }

/* --------------------------------------------------------------------------
   Core block widgets (kept from a previous theme's widget areas)
   -------------------------------------------------------------------------- */
.dk-sidebar .wp-block-heading,
.dk-sidebar .wp-block-search__label {
	display: block;
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--dk-ink);
	font-size: 1.05rem;
	font-weight: 800;
	font-stretch: var(--dk-wide);
}

.wp-block-search__inside-wrapper { display: flex; gap: 8px; }

.wp-block-search__button {
	min-height: 48px;
	padding: 0 16px;
	background: var(--dk-primary);
	color: var(--dk-on-primary);
	border: 0;
	border-radius: var(--dk-radius-s);
	font-weight: 700;
	cursor: pointer;
}

.dk-sidebar .wp-block-latest-posts,
.dk-sidebar .wp-block-categories,
.dk-sidebar .wp-block-archives {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dk-sidebar .wp-block-latest-posts li,
.dk-sidebar .wp-block-categories li,
.dk-sidebar .wp-block-archives li {
	padding: 8px 0;
	border-bottom: 1px solid var(--dk-line);
}

.dk-sidebar .wp-block-latest-posts a,
.dk-sidebar .wp-block-categories a,
.dk-sidebar .wp-block-archives a { color: var(--dk-ink); font-weight: 600; text-decoration: none; }

.dk-sidebar .wp-block-latest-posts a:hover,
.dk-sidebar .wp-block-categories a:hover,
.dk-sidebar .wp-block-archives a:hover { color: var(--dk-primary); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Affiliate disclosure (articles, product, vehicle, problem, gear pages)
   -------------------------------------------------------------------------- */
.dk-disclosure {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 16px 0;
	padding: 12px 14px;
	background: var(--dk-surface);
	border-radius: var(--dk-radius-s);
	color: var(--dk-ink-2);
	font-size: 0.875rem;
	line-height: 1.5;
}

.dk-disclosure .dk-icon { margin-top: 1px; color: var(--dk-muted); }
.dk-disclosure p { margin: 0; }
.dk-social__name { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }

.dk-social--labelled { flex-direction: column; gap: 2px; }
.dk-social--labelled a { width: auto; height: auto; min-height: 40px; gap: 10px; border: 0; border-radius: 0; justify-content: flex-start; }
.dk-social--labelled a:hover { background: none; text-decoration: underline; }
.dk-social--labelled .dk-social__name { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; }

@media (min-width: 900px) {
	.dk-footer__grid:has(> :nth-child(5)) { grid-template-columns: 1.5fr 1fr 1fr 1fr 0.8fr; gap: 32px; }
}

.dk-subhead { margin: 32px 0 14px; font-size: 1.15rem; font-weight: 800; font-stretch: var(--dk-wide); }
.dk-author__expertise { margin: 0 0 10px; color: var(--dk-ink-2); font-size: 0.95rem; }
.dk-author__expertise span { font-weight: 700; color: var(--dk-ink); }