/* Колеровка: кнопка в карточке и попап выбора цвета RAL */

.kt-tint { margin: 0 0 15px; width: 100%; }
.kt-tint-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kt-tint-hint { margin: 6px 0 0; font-size: 12px; color: #999; }

.kt-tint-chosen { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.kt-tint-chosen b { font-weight: 600; }
.kt-tint-chosen em { font-style: normal; color: #777; }
.kt-tint-dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid #ccc; display: inline-block; flex: 0 0 auto; }
.kt-tint-clear { color: #bbb; font-size: 18px; line-height: 1; text-decoration: none; padding: 0 4px; }
.kt-tint-clear:hover { color: #e05; }

body.kt-tint-lock { overflow: hidden; }

.kt-tint-modal { position: fixed; inset: 0; z-index: 99999; display: none; }
.kt-tint-modal.is-open { display: block; }
.kt-tint-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.kt-tint-win {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
	width: min(860px, calc(100vw - 30px)); max-height: min(640px, calc(100vh - 40px));
	background: #fff; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
	display: flex; flex-direction: column; overflow: hidden;
}
.kt-tint-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #eee; }
.kt-tint-title { font-size: 16px; font-weight: 600; }
.kt-tint-x { background: none; border: none; font-size: 26px; line-height: 1; color: #999; cursor: pointer; padding: 0 4px; }
.kt-tint-x:hover { color: #333; }
.kt-tint-search { padding: 12px 18px; border-bottom: 1px solid #eee; }
.kt-tint-search input { width: 100%; border: 1px solid #ddd; border-radius: 4px; padding: 8px 12px; font-size: 14px; }
.kt-tint-body { overflow-y: auto; padding: 6px 18px 18px; }
.kt-tint-group { font-size: 13px; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: .04em; margin: 14px 0 8px; }
.kt-tint-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.kt-tint-sw {
	position: relative; border: 1px solid rgba(0,0,0,.12); border-radius: 4px;
	height: 44px; cursor: pointer; padding: 0;
}
.kt-tint-sw span {
	position: absolute; left: 4px; bottom: 3px; font-size: 10px; color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.kt-tint-sw.is-light span { color: #333; text-shadow: none; }
.kt-tint-sw:hover { outline: 2px solid #333; outline-offset: 1px; }

@media (max-width: 600px) {
	.kt-tint-win { width: calc(100vw - 16px); max-height: calc(100vh - 24px); }
	.kt-tint-grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
	.kt-tint-sw { height: 38px; }
}

/* липкая панель Woodmart: блок колеровки не дублируем */
.wd-sticky-btn .kt-tint { display: none; }