/* Кольори у виборі варіацій: тонка обводка, щоб білий не зливався з фоном; вибраний — кільце. */
.color-variable-item .variable-item-span-color,
.loop-colors .color-swatch {
	box-shadow: inset 0 0 0 1px rgba(7, 7, 7, .22) !important;
}
li.variable-item.color-variable-item {
	border-radius: 50% !important;
	box-shadow: 0 0 0 1px transparent !important;
	transition: box-shadow .15s ease;
}
li.variable-item.color-variable-item:hover {
	box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba(7, 7, 7, .35) !important;
}
li.variable-item.color-variable-item.selected {
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px #070707 !important;
}
.selected.color-variable-item .variable-item-contents {
	background: transparent;
}

/* Позначка «Фото створено ШІ» на галереї товару. */
.dst-gallery-wrap {
	position: relative;
}
.dst-ai-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	background: rgba(7, 7, 7, .78);
	color: #fff;
	font-size: 12px;
	line-height: 1;
	letter-spacing: .02em;
	border-radius: 999px;
	pointer-events: auto;
	cursor: pointer;
	outline: none;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.dst-ai-badge svg {
	flex: 0 0 auto;
}
.dst-ai-badge:focus-visible {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #070707;
}
.dst-ai-tip {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	width: max-content;
	max-width: min(280px, 80vw);
	padding: 10px 12px;
	background: #fff;
	color: #070707;
	font-size: 12px;
	line-height: 1.45;
	letter-spacing: 0;
	white-space: normal;
	border-radius: 8px;
	box-shadow: 0 6px 24px rgba(7, 7, 7, .18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
	pointer-events: none;
}
.dst-ai-badge:hover .dst-ai-tip,
.dst-ai-badge:focus .dst-ai-tip {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}
.dst-ai-note {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: #6b6560;
}
/* У каталозі — поруч із NEW / %. */
.product-badge.dst-ai-loop {
	margin-top: 4px;
	background: rgba(7, 7, 7, .78);
	color: #fff;
}
@media (max-width: 767px) {
	.dst-ai-badge { top: 8px; left: 8px; padding: 5px 8px; font-size: 11px; }
}

/* Кружечки кольорів у картках каталогу: перенос, щоб багато кольорів не розпирали картку. */
.loop-colors {
	flex-wrap: wrap;
	max-width: 100%;
}
.loop-colors .color-swatch {
	flex: 0 0 auto;
}