/* ==========================================================================
   Єдиний модуль підбору - Колесо-Центр
   Усе в просторі .kp - тема і Bootstrap не зачіпаються.
   Палітра взята з макетів замовника.
   ========================================================================== */

.kp {
	--kp-indigo: #33208c;
	--kp-indigo-d: #261768;
	--kp-indigo-60: #6e62ad;
	--kp-soft: #f3f1fb;
	--kp-soft-2: #e8e4f7;
	--kp-line: #d9d4ee;
	--kp-line-2: #b9b0de;
	--kp-green: #0b6b33;
	--kp-green-d: #075427;
	--kp-yellow: #f7b500;
	--kp-yellow-d: #e2a400;
	--kp-ink: #1a1733;
	--kp-muted: #6e6a86;
	--kp-disabled: #c9c6d6;
	--kp-font: 'Roboto', -apple-system, 'Segoe UI', Arial, sans-serif;
	--kp-cond: 'Roboto Condensed', 'Roboto', 'Arial Narrow', Arial, sans-serif;

	position: relative;
	margin: 0 0 24px;
	font-family: var(--kp-font);
	font-size: 15px;
	line-height: 1.3;
	color: var(--kp-ink);
	-webkit-font-smoothing: antialiased;
	text-align: left;
}

.kp *,
.kp *::before,
.kp *::after {
	box-sizing: border-box;
}

.kp [hidden] {
	display: none !important;
}

.kp button {
	font-family: inherit;
	margin: 0;
	-webkit-tap-highlight-color: transparent;
}

.kp button:focus {
	outline: none;
}

.kp button:focus-visible,
.kp a:focus-visible,
.kp summary:focus-visible {
	outline: 3px solid rgba(51, 32, 140, .35);
	outline-offset: 2px;
}

.kp-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ----- картка ----- */

.kp-card {
	background: #fff;
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 1px 2px rgba(26, 23, 51, .05), 0 10px 32px rgba(51, 32, 140, .09);
}

.kp-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 18px;
}

.kp-title {
	margin: 0;
	font-family: var(--kp-cond);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--kp-ink);
}

/* ----- підказка «Де знайти розмір?» ----- */

.kp-help {
	position: relative;
	flex: 0 0 auto;
}

.kp-help > summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: var(--kp-indigo);
	user-select: none;
}

.kp-help > summary::-webkit-details-marker {
	display: none;
}

.kp-help > summary:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kp-help__q {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--kp-soft);
	border: 1.5px solid var(--kp-line-2);
	font-size: 13px;
	font-weight: 700;
}

.kp-help__body {
	position: absolute;
	z-index: 20;
	top: calc(100% + 10px);
	right: 0;
	width: 440px;
	padding: 18px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 16px 40px rgba(26, 23, 51, .18);
	border: 1px solid var(--kp-line);
}

.kp-help__body p {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--kp-muted);
}

.kp-help__demo {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px 12px;
	padding: 14px 16px 12px;
	border-radius: 12px;
	background: linear-gradient(180deg, #2a2733, #16141d);
	color: #e9e7f2;
	font-family: var(--kp-cond);
}

.kp-tag {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
}

.kp-tag b {
	font-size: 22px;
	line-height: 1;
	letter-spacing: .02em;
	padding: 2px 4px;
	border-radius: 4px;
	background: rgba(255, 255, 255, .08);
}

.kp-tag i {
	margin-top: 6px;
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--kp-yellow);
	color: #1b1400;
	font: 700 10.5px/1.4 var(--kp-font);
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: .02em;
	white-space: nowrap;
}

.kp-sep,
.kp-dim {
	font-size: 22px;
	line-height: 1.2;
	opacity: .55;
	padding-top: 1px;
}

/* ----- розділи ----- */

.kp-cats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.kp-cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 138px;
	padding: 16px 10px 10px;
	border: 1.5px solid var(--kp-line);
	border-radius: 12px;
	background: #fff;
	color: var(--kp-indigo);
	text-align: center;
	cursor: pointer;
	transition: border-color .15s, background-color .15s, color .15s, box-shadow .15s, transform .15s;
}

.kp-cat:hover {
	border-color: var(--kp-indigo);
	box-shadow: 0 6px 18px rgba(51, 32, 140, .12);
	transform: translateY(-1px);
}

.kp-cat.is-on {
	background: var(--kp-indigo);
	border-color: var(--kp-indigo);
	color: #fff;
	box-shadow: 0 8px 22px rgba(51, 32, 140, .3);
	transform: none;
}

.kp-cat__ico .kp-ico {
	display: block;
	width: 56px;
	height: 56px;
}

.kp-cat__txt {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.kp-cat__txt b {
	font-family: var(--kp-cond);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.1;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.kp-cat__txt small {
	font-size: 12.5px;
	line-height: 1.25;
	color: var(--kp-muted);
}

.kp-cat.is-on .kp-cat__txt small {
	color: rgba(255, 255, 255, .78);
}

.kp-chev {
	width: 12px;
	height: 8px;
	margin-top: 2px;
	opacity: .8;
	transition: transform .2s;
}

.kp-cat.is-on .kp-chev {
	transform: rotate(180deg);
}

/* ----- перемикачі: нові / б/в, за параметрами / за авто ----- */

.kp-switch {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 14px 0 16px;
}

.kp-switch > :only-child {
	grid-column: 1 / -1;
}

.kp-seg {
	display: flex;
	gap: 10px;
}

.kp-seg__btn {
	flex: 1 1 0;
	min-width: 0;
	height: 50px;
	padding: 0 12px;
	border: 1.5px solid var(--kp-line-2);
	border-radius: 10px;
	background: #fff;
	color: var(--kp-indigo);
	font-family: var(--kp-cond);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .03em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}

.kp-seg__btn:hover {
	border-color: var(--kp-indigo);
	background: var(--kp-soft);
}

.kp-seg__btn.is-on {
	background: var(--kp-indigo);
	border-color: var(--kp-indigo);
	color: #fff;
	box-shadow: 0 4px 12px rgba(51, 32, 140, .25);
}

/* ----- поля ----- */

.kp-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.kp-f {
	position: relative;
	height: 58px;
	border: 1.5px solid var(--kp-line);
	border-radius: 10px;
	background: #fff;
	transition: border-color .15s, background-color .15s, box-shadow .15s;
}

.kp-f:hover {
	border-color: var(--kp-line-2);
}

.kp-f:focus-within {
	border-color: var(--kp-indigo);
	box-shadow: 0 0 0 3px rgba(51, 32, 140, .14);
}

.kp-f.is-set {
	border-color: var(--kp-indigo);
	background: #f8f7fe;
}

.kp-f__label {
	position: absolute;
	z-index: 1;
	top: 9px;
	left: 14px;
	right: 30px;
	margin: 0;
	font-family: var(--kp-cond);
	font-weight: 700;
	font-size: 11.5px;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--kp-indigo-60);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}

.kp-f.is-set .kp-f__label {
	color: var(--kp-indigo);
}

.kp-f__ctl {
	display: flex;
	align-items: stretch;
	height: 100%;
}

.kp .kp-f__sel {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: block;
	flex: 1 1 0;
	min-width: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 23px 32px 6px 14px;
	border: 0;
	border-radius: 10px;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2333208C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center / 12px 8px;
	box-shadow: none;
	font-family: var(--kp-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--kp-ink);
	text-overflow: ellipsis;
	cursor: pointer;
	outline: none;
}

.kp-f:not(.is-set) .kp-f__sel {
	color: #8e89a8;
	font-weight: 400;
}

.kp-f.is-set .kp-f__sel {
	font-weight: 700;
}

.kp .kp-f__sel:disabled {
	cursor: not-allowed;
	opacity: .55;
}

.kp .kp-f__sel option,
.kp .kp-f__sel optgroup {
	color: var(--kp-ink);
	font-weight: 400;
}

/* «від - до» в одній клітинці */
.kp-f--pair .kp-f__sel {
	padding-right: 24px;
	background-position: right 8px center;
}

.kp-f--pair .kp-f__sel + .kp-f__dash + .kp-f__sel {
	padding-left: 6px;
}

.kp-f__dash {
	align-self: flex-end;
	padding: 0 2px 9px;
	color: var(--kp-muted);
}

/* ----- кнопка ----- */

.kp-go {
	grid-column-end: -1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 58px;
	padding: 0 14px;
	border: 0;
	border-radius: 10px;
	background: var(--kp-green);
	color: #fff;
	font-family: var(--kp-cond);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 8px 18px rgba(11, 107, 51, .28);
	transition: background-color .15s, box-shadow .15s, transform .1s;
}

.kp-go:hover {
	background: var(--kp-green-d);
}

.kp-go:active {
	transform: translateY(1px);
	box-shadow: 0 3px 8px rgba(11, 107, 51, .3);
}

.kp-go__txt {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kp-go__n {
	position: relative;
	min-width: 2.4em;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .2);
	font: 700 14px/1 var(--kp-font);
	letter-spacing: 0;
	text-align: center;
	white-space: nowrap;
}

.kp-go__n:empty {
	display: none;
}

.kp-go:disabled {
	background: var(--kp-disabled);
	box-shadow: none;
	cursor: not-allowed;
	font-size: 15px;
}

.kp-go:disabled .kp-go__n {
	display: none;
}

/* лічильник рахується */
.kp-form.is-loading .kp-go__n,
.kp.is-loading .kp-mbar__total,
.kp.is-loading .kp-go--sheet .kp-go__n {
	color: transparent;
}

.kp-form.is-loading .kp-go__n::after,
.kp.is-loading .kp-go--sheet .kp-go__n::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	animation: kp-spin .7s linear infinite;
}

@keyframes kp-spin {
	to { transform: rotate(360deg); }
}

/* ----- під полями ----- */

.kp-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin-top: 12px;
}

.kp-foot:empty,
.kp-chips:empty {
	display: none;
}

.kp-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.kp-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 10px 0 12px;
	border: 1px solid #dcd6f2;
	border-radius: 999px;
	background: var(--kp-soft);
	color: var(--kp-indigo);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s, border-color .15s;
}

.kp-chip:hover {
	background: var(--kp-soft-2);
	border-color: var(--kp-line-2);
}

.kp-chip__k {
	color: var(--kp-indigo-60);
	font-weight: 400;
}

.kp-chip svg {
	width: 12px;
	height: 12px;
	opacity: .7;
}

.kp-reset {
	padding: 4px 2px;
	border: 0;
	background: none;
	color: var(--kp-muted);
	font-size: 14px;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: rgba(110, 106, 134, .4);
	text-underline-offset: 3px;
}

.kp-reset:hover {
	color: var(--kp-ink);
}

.kp-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	padding: 6px 2px;
	border: 0;
	background: none;
	color: var(--kp-indigo);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

.kp-more:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kp-more__plus {
	position: relative;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--kp-soft);
	border: 1.5px solid var(--kp-line-2);
}

.kp-more__plus::before,
.kp-more__plus::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 1.8px;
	margin: -.9px 0 0 -4px;
	background: currentColor;
	border-radius: 1px;
	transition: transform .2s;
}

.kp-more__plus::after {
	transform: rotate(90deg);
}

.kp-more[aria-expanded='true'] .kp-more__plus::after {
	transform: rotate(0);
}

.kp-empty {
	margin: 12px 0 0;
	padding: 10px 14px;
	border-radius: 10px;
	background: #fff7e0;
	color: #6b5200;
	font-size: 14px;
}

/* ----- за авто ----- */

.kp-grid--car {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kp-car__hint {
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--kp-muted);
}

.kp-sizes:empty {
	display: none;
}

.kp-sizes {
	display: grid;
	gap: 16px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--kp-line);
}

.kp-sizes__title {
	margin: 0 0 4px;
	font-family: var(--kp-cond);
	font-weight: 700;
	font-size: 18px;
	text-transform: uppercase;
	color: var(--kp-ink);
}

.kp-sizes__group h4 {
	margin: 0 0 8px;
	font-family: var(--kp-cond);
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--kp-indigo-60);
}

.kp-sizes__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.kp-size {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 14px;
	border: 1.5px solid var(--kp-indigo);
	border-radius: 10px;
	background: #fff;
	color: var(--kp-indigo);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .15s, color .15s;
}

.kp-size:hover,
.kp-size:focus-visible {
	background: var(--kp-indigo);
	color: #fff;
	text-decoration: none;
}

.kp-size small {
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--kp-soft-2);
	color: var(--kp-indigo);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.kp-size:hover small {
	background: rgba(255, 255, 255, .2);
	color: #fff;
}

/* скільки є в наявності */
.kp-size__n {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--kp-green);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.kp-size.is-empty {
	border-color: var(--kp-line-2);
	border-style: dashed;
	color: var(--kp-muted);
}

.kp-size.is-empty .kp-size__n {
	background: var(--kp-soft-2);
	color: var(--kp-muted);
}

.kp-size.is-empty:hover {
	background: var(--kp-soft);
	color: var(--kp-indigo);
}

.kp-sizes__none {
	margin: 0;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--kp-soft);
	color: var(--kp-muted);
	font-size: 14px;
	line-height: 1.5;
}

/* ----- послуги ----- */

.kp-svc {
	margin-top: 16px;
}

.kp-svc__row {
	display: grid;
	grid-template-columns: minmax(0, 2fr) auto minmax(0, 1fr);
	gap: 12px;
	align-items: stretch;
}

.kp-svc__f {
	height: 58px;
}

.kp-js .kp-svc__go {
	display: none;
}

.kp-js .kp-svc__row {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.kp-svc__call {
	justify-content: center;
	min-height: 58px;
}

.kp-svc__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}

.kp-svc__top-t {
	margin-right: 2px;
	font-size: 13px;
	color: var(--kp-muted);
}

.kp .kp-svc__chip {
	padding: 7px 12px;
	border: 1.5px solid var(--kp-line);
	border-radius: 999px;
	background: #fff;
	color: var(--kp-indigo);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color .15s, background-color .15s;
}

.kp .kp-svc__chip:hover {
	border-color: var(--kp-indigo);
	background: var(--kp-soft);
	text-decoration: none;
}

.kp .kp-svc__all {
	margin-left: auto;
	color: var(--kp-indigo);
	font-size: 14px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kp-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 8px 18px;
	border-radius: 10px;
	text-decoration: none;
	transition: background-color .15s, border-color .15s, color .15s;
}

.kp-btn:hover {
	text-decoration: none;
}

.kp-btn svg {
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
}

.kp-btn--yellow {
	background: var(--kp-yellow);
	color: #1b1400;
	box-shadow: 0 6px 16px rgba(247, 181, 0, .3);
}

.kp-btn--yellow:hover {
	background: var(--kp-yellow-d);
	color: #1b1400;
}

.kp-btn--yellow span {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.kp-btn--yellow b {
	font-family: var(--kp-cond);
	font-weight: 700;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.kp-btn--yellow small {
	font-size: 13px;
	font-weight: 500;
}

.kp-btn--ghost {
	border: 1.5px solid var(--kp-line-2);
	color: var(--kp-indigo);
	font-weight: 500;
}

.kp-btn--ghost:hover {
	border-color: var(--kp-indigo);
	background: var(--kp-soft);
	color: var(--kp-indigo);
}

/* ----- мобільна шторка (тільки колонка) ----- */

.kp-mbar,
.kp-sheet__head,
.kp-sheet__foot {
	display: none;
}

/* ==========================================================================
   Колонка (сторінка результатів, категорії)
   ========================================================================== */

.kp--column .kp-card {
	padding: 16px;
}

.kp--column .kp-head {
	margin-bottom: 12px;
}

.kp--column .kp-title {
	font-size: 20px;
}

.kp--column .kp-cats {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
}

.kp--column .kp-cat {
	flex-direction: row;
	justify-content: flex-start;
	min-height: 48px;
	padding: 6px 6px 6px 7px;
	gap: 6px;
	border-radius: 10px;
	text-align: left;
}

.kp--column .kp-cat__ico {
	flex: 0 0 auto;
}

.kp--column .kp-cat__ico .kp-ico {
	width: 22px;
	height: 22px;
}

.kp--column .kp-cat__txt {
	min-width: 0;
}

.kp--column .kp-cat__txt b {
	display: block;
	font-size: 12.5px;
	line-height: 1.1;
	letter-spacing: 0;
}

/* три кнопки в ряд (нові / б/в / докатки) - дрібніше */
.kp--column .kp-seg > :first-child:nth-last-child(3),
.kp--column .kp-seg > :first-child:nth-last-child(3) ~ * {
	font-size: 12px;
}

.kp--column .kp-cat__txt small,
.kp--column .kp-chev {
	display: none;
}

.kp--column .kp-switch {
	grid-template-columns: 1fr;
	gap: 8px;
	margin: 12px 0;
}

.kp--column .kp-seg {
	gap: 6px;
}

.kp--column .kp-seg__btn {
	height: 42px;
	font-size: 13.5px;
	line-height: 1.05;
	letter-spacing: 0;
	padding: 0 4px;
	white-space: normal;
}

.kp--column .kp-grid,
.kp--column .kp-grid--car {
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.kp--column .kp-f {
	height: 54px;
}

.kp--column .kp-f__label {
	left: 11px;
	right: 24px;
	top: 8px;
	font-size: 10.5px;
	letter-spacing: .02em;
}

.kp--column .kp-f__sel {
	padding: 22px 26px 6px 11px;
	font-size: 15px;
	background-position: right 9px center;
}

.kp--column .kp-f--brand,
.kp--column .kp-f--pair,
.kp--column [data-kp-form^='tires'] [data-kp-field='brand'],
.kp--column [data-kp-field='mcat'],
.kp--column [data-kp-field='disc_dia_from'],
.kp--column [data-kp-field='dia_from'],
.kp--column [data-kp-field='reinforced'],
.kp--column [data-kp-field='type'] {
	grid-column: 1 / -1;
}

.kp--column .kp-go {
	grid-column: 1 / -1;
	height: 54px;
	font-size: 18px;
}

.kp--column .kp-go[disabled] {
	font-size: 15px;
	letter-spacing: 0;
}

.kp--column .kp-foot {
	flex-direction: column;
	align-items: stretch;
}

.kp--column .kp-more {
	margin-left: 0;
}

.kp--column .kp-svc__row,
.kp-js .kp--column .kp-svc__row,
.kp--column.kp-js .kp-svc__row {
	grid-template-columns: 1fr;
}

.kp--column .kp-svc__all {
	margin-left: 0;
}

/* ==========================================================================
   Адаптив
   ========================================================================== */

@media (max-width: 991px) {
	.kp--wide .kp-grid,
	.kp--wide .kp-grid--car {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {

	/* --- широкий блок (головна) --- */

	.kp--wide .kp-card {
		padding: 16px;
		border-radius: 14px;
	}

	.kp--wide .kp-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		margin-bottom: 14px;
	}

	.kp--wide .kp-title {
		font-size: 20px;
	}

	.kp-help {
		width: 100%;
	}

	.kp-help__body {
		position: static;
		width: auto;
		margin-top: 10px;
		box-shadow: none;
	}

	.kp--wide .kp-cats {
		gap: 8px;
	}

	.kp--wide .kp-cat {
		min-height: 0;
		padding: 12px 4px 8px;
		gap: 6px;
	}

	.kp--wide .kp-cat__ico .kp-ico {
		width: 36px;
		height: 36px;
	}

	.kp--wide .kp-cat__txt b {
		font-size: 12.5px;
		letter-spacing: 0;
	}

	.kp--wide .kp-cat__txt small {
		display: none;
	}

	.kp--wide .kp-switch {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.kp--wide .kp-seg__btn {
		height: 46px;
		padding: 0 6px;
		font-size: 14px;
		letter-spacing: 0;
	}

	.kp--wide .kp-grid,
	.kp--wide .kp-grid--car {
		gap: 8px;
	}

	.kp--wide .kp-go {
		grid-column: 1 / -1;
	}

	.kp--wide .kp-svc__row,
	.kp--wide.kp-js .kp-svc__row {
		grid-template-columns: 1fr;
	}

	.kp--wide .kp-svc__all {
		flex-basis: 100%;
		margin: 4px 0 0;
	}

	.kp-help__demo .kp-tag b,
	.kp-help__demo .kp-sep,
	.kp-help__demo .kp-dim {
		font-size: 18px;
	}

	/* --- колонка: кнопка «Фільтр» + шторка на весь екран --- */

	.kp--column .kp-mbar {
		position: -webkit-sticky;
		position: sticky;
		top: 10px;
		z-index: 40;
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		height: 52px;
		padding: 0 16px;
		border: 0;
		border-radius: 12px;
		background: var(--kp-indigo);
		color: #fff;
		font-family: var(--kp-cond);
		font-weight: 700;
		font-size: 17px;
		letter-spacing: .03em;
		text-transform: uppercase;
		box-shadow: 0 8px 22px rgba(51, 32, 140, .3);
		cursor: pointer;
	}

	.kp-mbar__ico {
		width: 22px;
		height: 22px;
	}

	.kp-mbar__n {
		min-width: 22px;
		height: 22px;
		padding: 0 6px;
		border-radius: 999px;
		background: #fff;
		color: var(--kp-indigo);
		font: 700 12px/22px var(--kp-font);
		text-align: center;
	}

	.kp-mbar__total {
		margin-left: auto;
		font: 500 14px/1 var(--kp-font);
		text-transform: none;
		letter-spacing: 0;
		opacity: .85;
	}

	.kp--column .kp-sheet {
		position: fixed;
		inset: 0;
		z-index: 1050;
		display: flex;
		flex-direction: column;
		background: #f4f3f9;
		visibility: hidden;
		transform: translateY(100%);
		transition: transform .25s ease, visibility 0s linear .25s;
	}

	.kp--column.is-open .kp-sheet {
		visibility: visible;
		transform: none;
		transition: transform .25s ease;
	}

	.kp--column .kp-sheet__head {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: space-between;
		height: 56px;
		padding: 0 6px 0 16px;
		background: #fff;
		border-bottom: 1px solid var(--kp-line);
	}

	.kp-sheet__title {
		font-family: var(--kp-cond);
		font-weight: 700;
		font-size: 19px;
		text-transform: uppercase;
	}

	.kp-sheet__close {
		width: 44px;
		height: 44px;
		border: 0;
		background: none;
		color: var(--kp-ink);
		cursor: pointer;
	}

	.kp-sheet__close svg {
		width: 24px;
		height: 24px;
	}

	.kp--column .kp-card {
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		border-radius: 0;
		box-shadow: none;
		padding: 16px;
	}

	.kp--column .kp-head {
		display: none;
	}

	.kp--column .kp-form .kp-go {
		display: none;
	}

	.kp--column .kp-sheet__foot {
		display: block;
		flex: 0 0 auto;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border-top: 1px solid var(--kp-line);
	}

	.kp-go--sheet {
		width: 100%;
	}
}

@media (min-width: 768px) {
	.kp--column .kp-sheet {
		position: static;
	}
}

html.kp-lock,
html.kp-lock body {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.kp *,
	.kp *::before,
	.kp *::after {
		transition: none !important;
		animation-duration: .01ms !important;
	}
}

/* кнопка «Фільтр», що плаває під шапкою сайту при прокрутці (телефон) */
@media (max-width: 991px) {
	.kp--column .kp-mbar.kp-mbar--float {
		position: fixed;
		top: calc(var(--kc-sticky-h, 0px) + 8px);
		left: 12px;
		right: 12px;
		width: auto;
		z-index: 55;
	}
}

/* ==========================================================================
   Макет v2 (зауваження замовника): широкий модуль 1:1 з макетом -
   плитки розділів з фото, два рядки перемикачів, поля 4×2 з назвами.
   Розміри на ПК - від одиниці шапки --u (1 піксель макета головної 1672×941).
   ========================================================================== */

.kp--wide {
	--pu: var(--u, 1px);
	margin: 0;
}

.kp--wide .kp-card {
	padding: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

/* заголовок і підказка - лише для читачів екрана і пошуковиків */
.kp--wide .kp-head {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* --- плитки розділів --- */

.kp--wide .kp-cats {
	gap: calc(12 * var(--pu));
}

.kp--wide .kp-cat {
	position: relative;
	justify-content: flex-end;
	gap: calc(4 * var(--pu));
	height: calc(180 * var(--pu));
	min-height: 0;
	padding: calc(8 * var(--pu)) calc(4 * var(--pu)) calc(10 * var(--pu));
	overflow: hidden;
	border: 1.5px solid #e1e1e8;
	border-radius: calc(7 * var(--pu));
	box-shadow: none;
	color: #111;
}

.kp--wide .kp-cat:hover {
	border-color: var(--kp-indigo);
	box-shadow: 0 6px 16px rgba(51, 32, 140, .12);
}

.kp--wide .kp-cat.is-on {
	border-color: var(--kp-indigo);
	background: var(--kp-indigo);
	color: #fff;
	box-shadow: 0 8px 20px rgba(51, 32, 140, .28);
}

.kp--wide .kp-cat__img,
.kp--wide .kp-cat__ico {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 0;
}

.kp--wide .kp-cat__img img {
	display: block;
	max-width: 88%;
	max-height: 100%;
	object-fit: contain;
}

/* фото сервісу - на всю ширину плитки */
.kp--wide .kp-cat__img--services {
	width: calc(100% + 8 * var(--pu));
	margin: calc(-8 * var(--pu)) calc(-4 * var(--pu)) 0;
	overflow: hidden;
}

.kp--wide .kp-cat__img--services img {
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

.kp--wide .kp-cat__ico .kp-ico {
	width: calc(70 * var(--pu));
	height: calc(70 * var(--pu));
	color: var(--kp-indigo);
}

.kp--wide .kp-cat.is-on .kp-cat__ico .kp-ico {
	color: #fff;
}

.kp--wide .kp-cat__txt b {
	font-size: max(12px, calc(21 * var(--pu)));
	line-height: 1.05;
	letter-spacing: 0;
}

.kp--wide .kp-cat__txt small {
	display: none;
}

.kp--wide .kp-chev {
	width: calc(17 * var(--pu));
	height: calc(11 * var(--pu));
	min-width: 10px;
	min-height: 7px;
	margin: 0;
	color: var(--kp-indigo);
	opacity: 1;
}

.kp--wide .kp-cat.is-on .kp-chev {
	color: #fff;
	transform: none;
}

/* --- нові / б/в, за параметрами / за маркою авто: два рядки --- */

.kp--wide .kp-switch {
	grid-template-columns: 1fr;
	gap: calc(10 * var(--pu));
	margin: calc(12 * var(--pu)) 0 calc(10 * var(--pu));
}

.kp--wide .kp-seg {
	gap: calc(12 * var(--pu));
}

.kp--wide .kp-seg__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(52 * var(--pu));
	min-height: 34px;
	padding: 0 calc(40 * var(--pu));
	border-color: var(--kp-indigo);
	border-radius: calc(5 * var(--pu));
	font-size: max(13px, calc(23 * var(--pu)));
	letter-spacing: 0;
	box-shadow: none;
}

.kp--wide .kp-seg__btn > span {
	overflow: hidden;
	text-overflow: ellipsis;
}

.kp--wide .kp-seg__btn .kp-chev {
	position: absolute;
	top: 50%;
	right: calc(18 * var(--pu));
	margin-top: calc(-5.5 * var(--pu));
}

.kp--wide .kp-seg__btn.is-on .kp-chev {
	color: #fff;
}

/* --- поля: у порожньому - назва по центру, у заповненому - назва зверху --- */

.kp--wide .kp-grid,
.kp--wide .kp-grid--car {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: calc(9 * var(--pu)) calc(12 * var(--pu));
}

.kp--wide .kp-f {
	height: calc(56 * var(--pu));
	min-height: 34px;
	border-color: #6b5fc0;
	border-radius: calc(5 * var(--pu));
}

.kp--wide .kp-f__label {
	top: calc(5 * var(--pu));
	left: 6px;
	right: 6px;
	font-size: max(9px, calc(12 * var(--pu)));
	letter-spacing: .02em;
	text-align: center;
	visibility: hidden;
}

.kp--wide .kp-f.is-set .kp-f__label {
	visibility: visible;
}

.kp--wide .kp-f__sel {
	padding: 0 calc(30 * var(--pu)) 0 calc(8 * var(--pu));
	background-position: right calc(12 * var(--pu)) center;
	background-size: calc(15 * var(--pu)) calc(10 * var(--pu));
	font-family: var(--kp-cond);
	font-size: max(12px, calc(19 * var(--pu)));
	font-weight: 700;
	text-align: center;
	text-align-last: center;
}

.kp--wide .kp-f:not(.is-set) .kp-f__sel {
	color: var(--kp-indigo);
	font-weight: 700;
	text-transform: uppercase;
}

.kp--wide .kp-f.is-set .kp-f__sel {
	padding-top: calc(14 * var(--pu));
}

.kp--wide .kp-f--pair .kp-f__sel {
	padding-right: calc(22 * var(--pu));
}

.kp--wide .kp-f__dash {
	align-self: center;
	padding: 0;
}

.kp--wide .kp-go {
	height: calc(56 * var(--pu));
	min-height: 34px;
	gap: calc(8 * var(--pu));
	padding: 0 calc(8 * var(--pu));
	border-radius: calc(5 * var(--pu));
	font-size: max(13px, calc(23 * var(--pu)));
	letter-spacing: 0;
	box-shadow: none;
}

.kp--wide .kp-go {
	position: relative;
	overflow: visible;
}

/* лічильник - маленькою плашкою в куті кнопки, щоб влазив напис «Підібрати» */
.kp--wide .kp-go__n {
	position: absolute;
	top: -8px;
	right: -4px;
	min-width: 0;
	padding: 3px 6px;
	border: 2px solid #fff;
	background: var(--kp-yellow);
	color: #111;
	font-size: max(10px, calc(12 * var(--pu)));
}

.kp--wide .kp-go:disabled {
	font-size: max(11px, calc(15 * var(--pu)));
}

.kp--wide .kp-foot {
	gap: 6px 12px;
	margin-top: calc(8 * var(--pu));
}

.kp--wide .kp-chip {
	height: calc(28 * var(--pu));
	min-height: 24px;
	font-size: 13px;
}

.kp--wide .kp-more {
	padding: 2px;
	font-size: 13px;
}

.kp--wide .kp-empty {
	margin-top: 8px;
	padding: 6px 10px;
	font-size: 13px;
}

.kp--wide .kp-car__hint {
	margin-top: 8px;
	font-size: 13px;
}

/* --- послуги: нумеровані плитки 4 в ряд --- */

.kp--wide .kp-svc {
	margin-top: calc(12 * var(--pu));
}

.kp-sgrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: calc(9 * var(--pu, 1px)) calc(12 * var(--pu, 1px));
	margin: 0;
	padding: 0;
	list-style: none;
}

.kp .kp-sgrid__i {
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(58 * var(--pu, 1px));
	min-height: 40px;
	padding: 2px 6px;
	border: 1.5px solid #cfcbe6;
	border-radius: calc(6 * var(--pu, 1px));
	background: #fff;
	color: #1a1580;
	font-family: var(--kp-cond);
	font-weight: 700;
	font-size: max(11.5px, calc(17 * var(--pu, 1px)));
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	transition: border-color .15s, background-color .15s;
}

.kp .kp-sgrid__i:hover {
	border-color: var(--kp-indigo);
	background: var(--kp-soft);
	text-decoration: none;
}

.kp--wide .kp-svc__all {
	display: none;
}

/* --- телефон: той самий 4-колонковий макет, дрібніший --- */

@media (max-width: 767px) {
	.kp--wide {
		--pu: calc(var(--m, 1px) * .6);
	}

	.kp--wide .kp-cats {
		gap: 6px;
	}

	.kp--wide .kp-cat {
		height: calc(104 * var(--m, 1px));
		padding: 5px 2px 6px;
		gap: 2px;
	}

	.kp--wide .kp-cat__img--services {
		width: calc(100% + 4px);
		margin: -5px -2px 0;
	}

	.kp--wide .kp-cat__ico .kp-ico {
		width: 36px;
		height: 36px;
	}

	.kp--wide .kp-cat__txt b {
		font-size: calc(11.5 * var(--m, 1px));
	}

	.kp--wide .kp-switch {
		grid-template-columns: 1fr;
		gap: 6px;
		margin: 6px 0;
	}

	.kp--wide .kp-seg {
		gap: 6px;
	}

	.kp--wide .kp-seg__btn {
		height: calc(40 * var(--m, 1px));
		padding: 0 22px 0 8px;
		font-size: calc(14 * var(--m, 1px));
	}

	.kp--wide .kp-seg__btn .kp-chev {
		right: 9px;
		width: 11px;
		height: 7px;
		margin-top: -3.5px;
	}

	.kp--wide .kp-grid,
	.kp--wide .kp-grid--car {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 5px;
	}

	.kp--wide .kp-f,
	.kp--wide .kp-go {
		height: calc(44 * var(--m, 1px));
	}

	.kp--wide .kp-f__label {
		top: 3px;
		left: 2px;
		right: 2px;
		font-size: 8.5px;
	}

	.kp--wide .kp-f__sel {
		padding: 0 14px 0 3px;
		background-position: right 4px center;
		background-size: 9px 6px;
		font-size: calc(11 * var(--m, 1px));
	}

	.kp--wide .kp-f.is-set .kp-f__sel {
		padding-top: 10px;
	}

	.kp--wide .kp-go {
		grid-column: auto;
		padding: 0 4px;
		font-size: calc(12.5 * var(--m, 1px));
	}

	.kp--wide .kp-go__n {
		top: -7px;
		right: -3px;
		padding: 2px 4px;
		font-size: 9px;
	}

	.kp-sgrid {
		gap: 5px;
	}

	.kp .kp-sgrid__i {
		height: calc(50 * var(--m, 1px));
		min-height: 0;
		padding: 2px 3px;
		font-size: calc(11 * var(--m, 1px));
	}
}

/* широкий модуль: вибране видно в самих полях - фішки зайві; «Більше параметрів»
   - маленьким посиланням під сіткою, без окремого рядка (перший екран) */
.kp--wide .kp-form {
	position: relative;
}

.kp--wide .kp-chips,
.kp--wide .kp-empty {
	display: none !important;
}

.kp--wide .kp-foot {
	position: absolute;
	top: 100%;
	right: 0;
	margin: 1px 0 0;
}

.kp--wide .kp-more {
	gap: 5px;
	padding: 0;
	font-size: 12px;
	line-height: 18px;
}

.kp--wide .kp-more__plus {
	width: 14px;
	height: 14px;
}

/* ==========================================================================
   Макет v2: колонка (категорія, результати) - як на макеті «Категорії»:
   заголовок, «По параметрах / По авто», поля - сині кнопки на всю ширину,
   зелена «Підібрати». Розділ і стан (нові/б/в) задає сама сторінка.
   На телефоні - одразу на екрані, без кнопки «Фільтр» і шторки.
   ========================================================================== */

.kp--column {
	margin: 0 0 12px;
}

.kp--column .kp-card {
	padding: 12px 10px;
	border: 1px solid #ececf2;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.kp--column .kp-head {
	margin-bottom: 8px;
}

.kp--column .kp-title {
	font-size: 19px;
	letter-spacing: 0;
	text-transform: uppercase;
}

.kp--column .kp-cats,
.kp--column [data-kp-conds] {
	display: none !important;
}

.kp--column .kp-switch {
	margin: 0 0 8px;
}

.kp--column .kp-seg__btn {
	flex-direction: column;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 58px;
	padding: 4px;
	border-radius: 4px;
	font-size: 13.5px;
	line-height: 1.1;
	text-transform: uppercase;
	white-space: normal;
}

.kp--column .kp-seg__btn .kp-chev {
	display: block;
	width: 12px;
	height: 8px;
	margin: 0;
	opacity: 1;
}

.kp--column .kp-grid,
.kp--column .kp-grid--car {
	grid-template-columns: minmax(0, 1fr);
	gap: 7px;
}

.kp--column .kp-grid > *,
.kp--column .kp-grid--car > * {
	grid-column: 1 / -1 !important;
}

.kp--column .kp-f {
	height: 44px;
	border: 0;
	border-radius: 4px;
	background: #1a1580;
}

.kp--column .kp-f:hover,
.kp--column .kp-f:focus-within {
	background: #26209a;
	box-shadow: none;
}

.kp--column .kp-f.is-set {
	background: var(--kp-indigo);
	box-shadow: inset 0 0 0 2px #f7b500;
}

.kp--column .kp-f__label {
	top: 50%;
	left: 26px;
	right: 26px;
	margin-top: -.5em;
	color: #fff;
	font-size: 17px;
	letter-spacing: .01em;
	text-align: center;
}

.kp--column .kp-f.is-set .kp-f__label {
	top: 5px;
	margin-top: 0;
	color: rgba(255, 255, 255, .75);
	font-size: 10px;
}

.kp--column .kp-f__sel {
	padding: 0 26px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: right 10px center;
	color: transparent !important;
	font-size: 15px;
	text-align: center;
	text-align-last: center;
}

.kp--column .kp-f.is-set .kp-f__sel {
	padding-top: 12px;
	color: #fff !important;
}

.kp--column .kp-f__sel option,
.kp--column .kp-f__sel optgroup {
	color: var(--kp-ink);
}

.kp--column .kp-f__sel:disabled {
	opacity: 1;
}

.kp--column .kp-f:has(.kp-f__sel:disabled) {
	opacity: .55;
}

.kp--column .kp-f--pair .kp-f__dash {
	color: #fff;
}

.kp--column .kp-go {
	height: 44px;
	border-radius: 4px;
	font-size: 17px;
	box-shadow: none;
}

.kp--column .kp-foot {
	margin-top: 6px;
}

.kp--column .kp-chips {
	display: none;
}

.kp--column .kp-more {
	align-self: center;
	font-size: 13px;
}

@media (max-width: 767px) {
	.kp--column .kp-mbar,
	.kp--column .kp-sheet__head,
	.kp--column .kp-sheet__foot {
		display: none !important;
	}

	.kp--column .kp-sheet {
		position: static;
		display: block;
		visibility: visible;
		transform: none;
		background: transparent;
	}

	.kp--column .kp-card {
		overflow: visible;
		padding: 8px 6px;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
	}

	.kp--column .kp-head {
		display: block;
		margin-bottom: 6px;
	}

	.kp--column .kp-title {
		font-size: 16px;
	}

	.kp--column .kp-form .kp-go {
		display: flex;
	}

	.kp--column .kp-seg__btn {
		height: 50px;
		font-size: 11.5px;
	}

	.kp--column .kp-f,
	.kp--column .kp-go {
		height: 38px;
	}

	.kp--column .kp-f__label {
		left: 18px;
		right: 18px;
		font-size: 14.5px;
	}

	.kp--column .kp-f__sel {
		padding: 0 18px;
		background-position: right 6px center;
		font-size: 13px;
	}

	.kp--column .kp-go {
		gap: 4px;
		padding: 0 4px;
		font-size: 13px;
	}

	.kp--column .kp-go__n {
		display: none;
	}
}

/* невисокі екрани (ноутбук 1366×768, телефон 360×640): колонка підбору щільніше */
@media (min-width: 992px) and (max-height: 760px) {
	.kp--column .kp-card {
		padding: 8px;
	}

	.kp--column .kp-head {
		margin-bottom: 4px;
	}

	.kp--column .kp-title {
		font-size: 16px;
	}

	.kp--column .kp-seg__btn {
		height: 42px;
		gap: 2px;
	}

	.kp--column .kp-grid,
	.kp--column .kp-grid--car {
		gap: 5px;
	}

	.kp--column .kp-f,
	.kp--column .kp-go {
		height: 36px;
	}

	.kp--column .kp-f__label {
		font-size: 15px;
	}
}

@media (max-width: 767px) and (max-height: 620px) {
	.kp--column .kp-title {
		font-size: 14px;
	}

	.kp--column .kp-seg__btn {
		height: 40px;
		gap: 1px;
	}

	.kp--column .kp-grid,
	.kp--column .kp-grid--car {
		gap: 4px;
	}

	.kp--column .kp-f,
	.kp--column .kp-go {
		height: 30px;
	}

	.kp--column .kp-f__label {
		font-size: 13.5px;
	}
}

/* ==========================================================================
   Макет v3 (30.09): «Додатково», «Різноширокі», кріплення з кнопками,
   той самий модуль у колонці категорій (1/3 екрана)
   ========================================================================== */

.kp--wide .kp-switch {
	gap: calc(8 * var(--pu));
}

.kp--wide .kp-seg {
	display: flex;
}

.kp--wide .kp-seg > .kp-seg__btn {
	flex: 1 1 0;
	min-width: 0;
}

.kp--wide .kp-seg__btn > span {
	white-space: normal;
	line-height: 1.05;
	text-align: center;
}

.kp .kp-seg__btn--dark,
.kp .kp-seg__btn--dark:hover {
	border-color: #0b0b0f;
	background: #0b0b0f;
	color: #fff;
}

.kp .kp-seg__btn--dark .kp-chev {
	color: #fff !important;
	transition: transform .2s;
}

.kp .kp-seg__btn--dark.is-on {
	box-shadow: inset 0 0 0 2px var(--kp-yellow);
}

.kp .kp-seg__btn--dark.is-on .kp-chev {
	transform: rotate(180deg);
}

/* рядки, що відкриваються кнопками */
.kp [data-kp-extrarow],
.kp [data-kp-pairrow],
.kp [data-kp-pairlbl],
.kp [data-kp-pairtbl],
.kp .kp-hidden-f {
	display: none !important;
}

.kp.is-extra [data-kp-extrarow],
.kp.is-pairs [data-kp-pairrow] {
	display: grid !important;
}

.kp.is-pairs [data-kp-pairlbl] {
	display: block !important;
}

.kp.is-pairs [data-kp-pairtbl] {
	display: flex !important;
}

.kp.is-pairs .kp-go--single {
	display: none !important;
}

.kp--wide .kp-form > .kp-grid + .kp-grid,
.kp--wide .kp-form > .kp-grid--extra {
	margin-top: calc(9 * var(--pu));
}

.kp--wide .kp-size-lbl {
	margin: calc(6 * var(--pu)) 0 calc(3 * var(--pu)) calc(6 * var(--pu));
	color: #666;
	font-family: var(--kp-cond);
	font-size: max(12px, calc(17 * var(--pu)));
	font-style: italic;
	font-weight: 700;
	line-height: 1.1;
}

.kp--wide .kp-size-lbl + .kp-grid {
	margin-top: 0 !important;
}

/* поле з картинкою */
.kp--wide .kp-f--ico .kp-f__ico {
	position: absolute;
	top: 50%;
	left: calc(8 * var(--pu));
	z-index: 1;
	width: calc(46 * var(--pu));
	height: calc(40 * var(--pu));
	min-width: 22px;
	min-height: 20px;
	transform: translateY(-50%);
	pointer-events: none;
}

.kp--wide .kp-f--ico .kp-f__ico img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.kp--wide .kp-f--ico .kp-f__sel {
	padding-left: calc(60 * var(--pu));
	text-align: left;
	text-align-last: left;
	white-space: normal;
}

.kp--wide .kp-f--ico .kp-f__label {
	left: calc(60 * var(--pu));
	text-align: left;
}

.kp--wide .kp-grid--extra .kp-f,
.kp--wide .kp-grid--last .kp-f--ico,
.kp--wide [data-kp-form="krep"] .kp-f {
	height: calc(62 * var(--pu));
}

.kp--wide .kp-grid--extra .kp-f__sel,
.kp--wide [data-kp-form="krep"] .kp-f--ico .kp-f__sel {
	font-size: max(11px, calc(16 * var(--pu)));
	line-height: 1.05;
}

/* «Таблиця різноширокихшин» */
.kp .kp-tbl {
	align-items: center;
	justify-content: center;
	gap: calc(10 * var(--pu));
	min-height: 34px;
	padding: 0 calc(10 * var(--pu));
	border-radius: calc(5 * var(--pu));
	background: #0b0b0f;
	color: #fff;
	font-family: var(--kp-cond);
	font-size: max(11px, calc(16 * var(--pu)));
	font-weight: 700;
	line-height: 1.05;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.kp .kp-tbl:hover {
	background: #26262e;
	color: #fff;
	text-decoration: none;
}

.kp .kp-tbl svg {
	flex: 0 0 auto;
	width: calc(30 * var(--pu));
	height: calc(30 * var(--pu));
	min-width: 18px;
	min-height: 18px;
}

/* кріплення: 4 великі кнопки 2×2 */
.kp--wide .kp-krep {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(9 * var(--pu)) calc(12 * var(--pu));
	margin: calc(12 * var(--pu)) 0 calc(10 * var(--pu));
}

.kp--wide .kp-krep[hidden] {
	display: none;
}

.kp .kp-kbtn {
	position: relative;
	display: flex;
	align-items: center;
	gap: calc(14 * var(--pu));
	height: calc(84 * var(--pu));
	min-height: 48px;
	padding: 0 calc(40 * var(--pu)) 0 calc(12 * var(--pu));
	border: 1.5px solid #6b5fc0;
	border-radius: calc(5 * var(--pu));
	background: #fff;
	color: #1a1580;
	font-family: var(--kp-cond);
	font-size: max(13px, calc(24 * var(--pu)));
	font-weight: 700;
	line-height: 1.05;
	text-align: left;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .15s, border-color .15s;
}

.kp .kp-kbtn:hover {
	border-color: var(--kp-indigo);
	text-decoration: none;
}

.kp .kp-kbtn.is-on {
	border-color: #1a1580;
	background: #1a1580;
	color: #fff;
}

.kp-kbtn__img {
	flex: 0 0 auto;
	width: calc(110 * var(--pu));
	height: 86%;
}

.kp-kbtn__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.kp .kp-kbtn .kp-chev {
	position: absolute;
	top: 50%;
	right: calc(16 * var(--pu));
	width: calc(17 * var(--pu));
	height: calc(11 * var(--pu));
	min-width: 10px;
	min-height: 7px;
	margin: 0;
	transform: translateY(-50%);
	color: currentColor;
	opacity: 1;
}

.kp--wide .kp-go--krep {
	background: #1a1580;
}

.kp--wide .kp-go--krep:hover {
	background: var(--kp-indigo-d);
}

/* у «Різноширокі» лічильник на кнопці не показуємо (рахуються пари на наступній сторінці) */
.kp.is-pairs .kp-go__n {
	display: none;
}

/* ----- колонка категорій: той самий модуль, трохи дрібніший ----- */

@media (min-width: 992px) {
	.kp--side {
		--pu: calc(var(--u, 1px) * .86);
	}

	.kp--side .kp-kbtn__img {
		width: calc(80 * var(--pu));
	}
}

@media (max-width: 767px) {
	.kp--wide .kp-grid--extra {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.kp--wide .kp-grid--extra .kp-f,
	.kp--wide [data-kp-form="krep"] .kp-f {
		height: 46px;
	}

	.kp--wide .kp-f--ico .kp-f__ico {
		left: 4px;
		width: 26px;
		height: 24px;
	}

	.kp--wide .kp-f--ico .kp-f__sel {
		padding-left: 33px;
		padding-right: 14px;
		font-size: 11px;
	}

	.kp--wide .kp-f--ico .kp-f__label {
		left: 33px;
	}

	.kp--wide .kp-krep {
		gap: 6px;
		margin: 6px 0;
	}

	.kp .kp-kbtn {
		gap: 6px;
		height: 52px;
		min-height: 0;
		padding: 0 22px 0 6px;
		font-size: 13px;
	}

	.kp-kbtn__img {
		width: 52px;
	}

	.kp .kp-kbtn .kp-chev {
		right: 8px;
	}

	.kp--wide .kp-size-lbl {
		margin: 4px 0 2px 4px;
		font-size: 12px;
	}

	.kp .kp-tbl {
		gap: 4px;
		padding: 0 4px;
		font-size: 10px;
	}

	.kp .kp-tbl svg {
		display: none;
	}
}

/* кнопки-перемикачі по 3 в ряд: дрібніший шрифт, підпис у два рядки */
.kp--wide .kp-seg__btn {
	padding: 0 calc(30 * var(--pu)) 0 calc(8 * var(--pu));
	font-size: max(12px, calc(19 * var(--pu)));
}

.kp--wide .kp-seg__btn > span {
	overflow: visible;
	text-overflow: clip;
}

.kp--wide .kp-seg__btn .kp-chev {
	right: calc(10 * var(--pu));
}

/* поле з картинкою: підпис у два рядки поруч із картинкою (як на макеті) */
.kp--wide .kp-f--ico:not(.is-set) .kp-f__label {
	top: 50%;
	right: calc(26 * var(--pu));
	margin: 0;
	transform: translateY(-50%);
	visibility: visible;
	color: #1a1580;
	font-size: max(10.5px, calc(16 * var(--pu)));
	line-height: 1.05;
	letter-spacing: 0;
	white-space: normal;
	overflow: visible;
}

.kp--wide .kp-f--ico:not(.is-set) .kp-f__sel {
	color: transparent !important;
}

@media (max-width: 767px) {
	.kp--wide .kp-seg__btn {
		padding: 0 18px 0 4px;
		font-size: 11.5px;
	}

	.kp--wide .kp-seg__btn .kp-chev {
		right: 5px;
	}

	.kp--wide .kp-f--ico:not(.is-set) .kp-f__label {
		right: 14px;
		font-size: 10.5px;
	}
}

/* ==========================================================================
   Модуль у лівій колонці (категорії, кріплення search_1c, різноширокі) - 1/3 екрана.
   Правило тут, а не в kc_pages.css: на сторінці кріплення kc_pages.css не підключається.
   ========================================================================== */
@media (min-width: 992px) {
	.row > #column-left:has(.kp--side) {
		flex: 0 0 33.3333%;
		max-width: 33.3333%;
	}

	.row:has(> #column-left .kp--side) > #content,
	.row:has(> #column-left .kp--side) > .col-lg-9,
	.row:has(> #column-left .kp--side) > .col-sm-9 {
		flex: 0 0 66.6667%;
		max-width: 66.6667%;
	}
}

/* Модуль у колонці масштабується від ширини самої колонки, а не вікна:
   на ноутбуках колонка вужча за блок на головній - нічого не вилазить за межі */
#column-left:has(.kp--side) {
	container-type: inline-size;
}

@supports (width: 1cqi) {
	@media (min-width: 992px) {
		.kp--side {
			--pu: min(calc(var(--u, 1px) * .86), calc(100cqi / 640));
		}
	}
}

/* колонка: поля з картинкою компактніші - підпис не налазить на стрілку */
@media (min-width: 992px) {
	.kp--side .kp-f--ico .kp-f__ico {
		left: calc(5 * var(--pu));
		width: calc(32 * var(--pu));
		height: calc(30 * var(--pu));
	}

	.kp--side .kp-f--ico .kp-f__sel {
		padding-left: calc(42 * var(--pu));
		padding-right: calc(22 * var(--pu));
		background-position: right calc(7 * var(--pu)) center;
		background-size: max(9px, calc(12 * var(--pu))) max(6px, calc(8 * var(--pu)));
	}

	.kp--side .kp-f--ico .kp-f__label,
	.kp--side .kp-f--ico:not(.is-set) .kp-f__label {
		left: max(27px, calc(42 * var(--pu)));
		right: max(14px, calc(22 * var(--pu)));
		font-size: max(9.5px, calc(14 * var(--pu)));
	}

	.kp--side .kp-kbtn__img {
		width: calc(70 * var(--pu));
	}

	.kp--side .kp-kbtn {
		gap: calc(10 * var(--pu));
		padding-right: max(22px, calc(34 * var(--pu)));
	}

	.kp--side .kp-kbtn .kp-chev {
		right: max(8px, calc(12 * var(--pu)));
	}
}

/* лише ПК: на телефоні модуль має власні правила */
@media (min-width: 992px) {
	/* вузька колонка: у полях з картинкою лишаємо тільки підпис (картинки - на ширших екранах) */
	@container (max-width: 470px) {
		.kp--wide .kp-f--ico .kp-f__ico {
			display: none;
		}

		.kp--wide .kp-f--ico .kp-f__sel {
			padding-left: 7px;
		}

		.kp--wide .kp-f--ico .kp-f__label,
		.kp--wide .kp-f--ico:not(.is-set) .kp-f__label {
			left: 7px;
		}

		.kp .kp-tbl {
			padding: 0 4px;
		}

		.kp .kp-tbl svg {
			display: none;
		}
	}

	/* зовсім вузька колонка (планшет / 1024): великі кнопки кріплення - без картинки */
	@container (max-width: 360px) {
		.kp .kp-kbtn {
			padding-left: 8px;
			font-size: 12px;
		}

		.kp .kp-kbtn__img {
			display: none;
		}

		.kp--side .kp-f--ico .kp-f__sel {
			padding-right: 12px;
			background-position: right 4px center;
		}

		.kp--side .kp-f--ico .kp-f__label,
		.kp--side .kp-f--ico:not(.is-set) .kp-f__label {
			left: 5px;
			right: 12px;
			font-size: 9px;
			word-spacing: .1em;
		}
		.kp--wide .kp-seg__btn {
			padding: 0 15px 0 3px;
			font-size: 10.5px;
		}

		.kp--wide .kp-seg__btn .kp-chev {
			right: 4px;
		}

		.kp--wide .kp-f__sel {
			padding-right: 13px;
			padding-left: 3px;
			background-position: right 4px center;
			font-size: 11px;
		}

		.kp--wide .kp-go {
			font-size: 12px;
		}

		.kp .kp-tbl {
			font-size: 9px;
		}
	}
}

/* сторінка результатів: параметри вже вибрані - кнопка «Скинути» (поля в нуль, можна вибрати інший розмір) */
.kp .kp-go.is-reset {
	border: 2px solid #c62828;
	background: #fff;
	color: #c62828;
	box-shadow: none;
}

.kp .kp-go.is-reset:hover {
	background: #fdecea;
	color: #a61b1b;
}

.kp .kp-go.is-reset .kp-go__txt::before {
	content: "\2715";
	margin-right: .35em;
	font-weight: 700;
}

.kp .kp-go.is-reset .kp-go__n,
.kp .kp-go.is-reset [data-kp-total] {
	display: none;
}

/* телефон: «Додатково» - як на ПК, 4 поля в ряд тієї ж висоти, що й решта, без картинок (побажання замовника 02.10) */
@media (max-width: 767px) {
	.kp--wide .kp-grid--extra {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.kp--wide .kp-grid--extra .kp-f {
		height: calc(44 * var(--m, 1px));
		min-height: 34px;
	}

	.kp--wide .kp-grid--extra .kp-f--ico .kp-f__ico {
		display: none;
	}

	.kp--wide .kp-grid--extra .kp-f--ico .kp-f__sel {
		padding-left: 3px;
		padding-right: 12px;
		font-size: 10.5px;
		text-align: center;
		text-align-last: center;
	}

	.kp--wide .kp-grid--extra .kp-f--ico .kp-f__label {
		left: 3px;
		right: 12px;
		text-align: center;
	}

	.kp--wide .kp-grid--extra .kp-f--ico:not(.is-set) .kp-f__label {
		left: 3px;
		right: 13px;
		font-size: 9px;
		letter-spacing: -.01em;
	}
}

@media (max-width: 767px) {
	.kp .kp-go.is-reset {
		padding-left: 2px;
		padding-right: 2px;
	}

	.kp .kp-go.is-reset .kp-go__txt {
		overflow: visible;
		font-size: 12px;
		letter-spacing: 0;
		text-overflow: clip;
	}

	.kp .kp-go.is-reset .kp-go__txt::before {
		margin-right: .2em;
	}
}

/* «Додатково» з 1-2 полями (індекс швидкості, шипи) - кожне на півряду, підпис вміщується */
.kp--wide .kp-grid--extra > .kp-f:first-child:nth-last-child(-n+2),
.kp--wide .kp-grid--extra > .kp-f:first-child:nth-last-child(-n+2) ~ .kp-f {
	grid-column: span 2;
}