/*
 * Tmax Color Swatches - front-end labels.
 * Adds the Hebrew colour name under each YOOtheme colour swatch,
 * revealed on hover (desktop) or tap (mobile). Added by js/frontend.js,
 * which sets the class "tmx-color" on each swatch container.
 */

.tmx-color {
	position: relative;
}

.tmx-color .tmx-color-label {
	display: block;
	margin-top: .4rem;
	text-align: center;
	font-size: .9rem;
	line-height: 1.2;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease;
}

/* Desktop: reveal on hover (devices with a real pointer) */
@media (hover: hover) and (pointer: fine) {
	.tmx-color:hover .tmx-color-label {
		opacity: 1;
		visibility: visible;
	}
}

/* Mobile / touch: reveal on tap (class toggled by js/frontend.js) + keyboard focus */
.tmx-color.is-active .tmx-color-label,
.tmx-color:focus-visible .tmx-color-label {
	opacity: 1;
	visibility: visible;
}

/* Mobile / touch: always show the colour name (no tap needed) */
@media (hover: none), (max-width: 640px) {
	.tmx-color .tmx-color-label {
		opacity: 1;
		visibility: visible;
	}
}