/**

 * Czytelność dopisku recolor (.hoker-recolor-note) — tło szklane per urządzenie.

 * Wzorzec PASS: #14 (KREATOR-GOTOWE). Ławka / siedzisko / krzesło — ten sam CSS, bez JS.

 */



.woocommerce-product-gallery .hoker-recolor-note {

	box-sizing: border-box;

	color: #8a8a8a;

	-webkit-font-smoothing: antialiased;

}



/* MOBILE — do 767px */

@media (max-width: 767px) {

	.woocommerce-product-gallery .hoker-recolor-note {

		left: 50%;

		right: auto;

		width: max-content;

		max-width: calc(100% - 20px);

		margin: 0;

		transform: translateX(-50%);

		background: rgba(255, 255, 255, 0.75);

		-webkit-backdrop-filter: blur(4px);

		backdrop-filter: blur(4px);

		padding: 4px 10px;

		border-radius: 4px;

		text-align: center;

	}

}



/* TABLET + LAPTOP — od 768px: stabilna „powłoka” (bez dynamicznego JS) */

@media (min-width: 768px) {

	.woocommerce-product-gallery .hoker-recolor-note {

		left: 50%;

		right: auto;

		width: max-content;

		max-width: calc(100% - 32px);

		margin: 0;

		transform: translateX(-50%);

		background: rgba(255, 255, 255, 0.5);

		-webkit-backdrop-filter: blur(3px);

		backdrop-filter: blur(3px);

		padding: 4px 12px;

		border-radius: 4px;

		text-align: center;

	}

}



@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

	@media (max-width: 767px) {

		.woocommerce-product-gallery .hoker-recolor-note {

			background: rgba(255, 255, 255, 0.92);

		}

	}



	@media (min-width: 768px) {

		.woocommerce-product-gallery .hoker-recolor-note {

			background: rgba(255, 255, 255, 0.82);

		}

	}

}



/* #14 seria — dopisek recolor nad galerią (tylko widoczność, bez silnika recoloru) */

body.hoker-bench14-dimension-badges-scope .woocommerce-product-gallery .flex-viewport,

body.hoker-bench14-dimension-badges-native .woocommerce-product-gallery .flex-viewport,

body.hoker-bench14-usc-mount-active .woocommerce-product-gallery .flex-viewport {

	position: relative !important;

	overflow: visible !important;

}



body.hoker-bench14-dimension-badges-scope .woocommerce-product-gallery,

body.hoker-bench14-dimension-badges-native .woocommerce-product-gallery,

body.hoker-bench14-dimension-badges-scope div.product > div.images,

body.hoker-bench14-dimension-badges-native div.product > div.images,

body.hoker-bench14-usc-mount-active .woocommerce-product-gallery,

body.hoker-bench14-usc-mount-active div.product > div.images,

body.hoker-bench14-usc-mount-active .hoker-usc-mixed-left-column > div.images {

	overflow: visible !important;

}



body.hoker-bench14-dimension-badges-scope .woocommerce-product-gallery .hoker-recolor-note,

body.hoker-bench14-dimension-badges-native .woocommerce-product-gallery .hoker-recolor-note,

body.hoker-bench14-usc-mount-active .woocommerce-product-gallery .hoker-recolor-note {

	z-index: 30 !important;

	visibility: visible !important;

	opacity: 1 !important;

	pointer-events: none !important;

}