/**
 * Same SKU Union – colour tumbler styles
 */

/* ── Container ─────────────────────────────────────────────────────────── */
ul.product-colors-container.color-tumbler-wrap,
li.product .color-tumbler-wrap,
ul.products li.product .color-tumbler-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px;
	list-style: none;
	padding: 10px 0;
	margin: 0;
}

/* Single product summary: align left */
.single-product .summary .color-tumbler-wrap,
.single-product .summary ul.product-colors-container.color-tumbler-wrap {
	justify-content: flex-start;
}

.product-slide-inner .color-tumbler-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
}

/* Checkout recommended products */
form.checkout .recommended-product ul.product-colors-container,
form.checkout .recommended-product li.product ul.product-colors-container {
	margin: 0;
	padding: 0;
}

/* ── Colour circle (the li IS the circle) ───────────────────────────────── */
.color-tumbler-wrap .color-attribute {
	display: block;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	margin: 0;
	cursor: pointer;
}

/* Active: ring outside the circle with 3px gap */
.color-tumbler-wrap .color-attribute.active,
.color-tumbler-wrap .color-attribute.current {
	outline: 1px solid #121212b0;
	outline-offset: 3px;
}

/* ── Plus button ────────────────────────────────────────────────────────── */
.color-tumbler-wrap li.plus-btn {
	display: none;
}

.color-tumbler-wrap .plus {
	display: none;
	height: 18px;
	width: 19px;
	cursor: pointer;
	line-height: 18px;
	color: #9E9E9E;
	font-size: .675rem;
	direction: ltr;
}

.color-tumbler-wrap.additional-colors li.plus-btn,
.color-tumbler-wrap.additional-colors .plus {
	display: block;
}

/* ── Hide colours beyond the first 4 when .additional-colors is active ─── */
.color-tumbler-wrap.additional-colors .color-attribute:nth-child(n + 5),
ul.products li.product .color-tumbler-wrap.additional-colors .color-attribute:nth-child(n + 5),
.archive.woocommerce ul.products li.product .color-tumbler-wrap.additional-colors .color-attribute:nth-child(n + 5) {
	display: none;
}

body:not(.home) .color-tumbler-wrap.bottom-marg:not(.additional-colors) .color-attribute:nth-child(n + 10) {
	margin-top: 8px;
}

/* Single product: same ul/li tumbler structure — tooltip hidden, used for JS/accessibility */
.custom-attributes-panel.color-attribute .color-tumbler-wrap .color-item .tooltip {
	position: absolute;
	width: 1px;
	height: 1px;
	clip: rect(0, 0, 0, 0);
	overflow: hidden;
}

/* ── Custom Attributes Panel (size & colour buttons on single product page) ── */

.custom-attributes-panel {
	position: relative;
}

.single-product.woocommerce div.product .summary .custom-attributes-panel.color-attribute {
	margin-bottom: 20px !important;
	padding-bottom: 5px !important;
	border-bottom: 1px solid #E9E9E9;
}

.custom-attributes-panel .attribute-title {
	font-size: 1rem;
	font-weight: 400;
	display: block;
	margin: 0;
}

.single-product.woocommerce div.product .summary .custom-attributes-panel .attribute-title {
	margin-bottom: 5px !important;
}

.custom-attributes-panel button.attribute-btn {
	background-color: transparent;
	border: 1px solid transparent;
	padding: 1px;
	border-radius: 50%;
	min-width: 30px;
	height: 30px;
	line-height: 28px;
	position: relative;
	text-align: center;
	margin: 0 0 17px 17px;
	display: inline-block;
	vertical-align: middle;
}

.custom-attributes-panel button.attribute-btn:last-child {
	margin: 0 0 17px;
}

.custom-attributes-panel.color-attribute button.attribute-btn.active,
.custom-attributes-panel.color-attribute button.attribute-btn:hover {
	border-color: var(--black);
	border-radius: 50% !important;
}

.custom-attributes-panel button.attribute-btn.big {
	border: 1px solid var(--yellow);
	padding: 0 10px;
	border-radius: 10px;
}

.custom-attributes-panel.size-attribute .clearfix {
	/* max-width: 240px; */
}

.custom-attributes-panel button.attribute-btn img {
	border-radius: 50%;
	width: 24px;
	height: 24px;
	border: 1px solid var(--yellow);
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.custom-attributes-panel.size-attribute button.attribute-btn {
	color: var(--black);
	position: relative;
}

.custom-attributes-panel.size-attribute button.attribute-btn.active,
.custom-attributes-panel.size-attribute button.attribute-btn:hover {
	background-color: var(--yellow);
}

.custom-attributes-panel button.attribute-btn.inactive:before {
	position: absolute;
	content: "";
	left: 0;
	top: 50%;
	right: 0;
	border-top: 3px solid var(--yellow);
	z-index: 2;
	-webkit-transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	-ms-transform: rotate(-135deg);
	-o-transform: rotate(-135deg);
	transform: rotate(-135deg);
}

.custom-attributes-panel.color-attribute button.attribute-btn span.tooltip {
	position: absolute;
	top: -25px;
	color: #000;
	right: -20px;
	opacity: 0;
	visibility: hidden;
	min-width: 80px;
	display: none;
}

/* ── Responsive: max-width 850px ─────────────────────────────────────────── */
@media only screen and (max-width: 850px) {
	.custom-attributes-panel.color-attribute {
		margin: 0 0 30px;
		padding: 0 0 30px;
		border-bottom: 1px solid #E9E9E9;
	}

	.custom-attributes-panel.size-attribute {
		margin: 0 0 60px;
	}

	.custom-attributes-panel.color-attribute button.attribute-btn span.tooltip {
		display: none;
	}
}

/* ── Responsive: max-width 600px ─────────────────────────────────────────── */
@media only screen and (max-width: 600px) {
	.custom-attributes-panel.color-attribute {
		margin: 0 0 40px;
		padding: 0 0 40px;
	}

	.custom-attributes-panel .attribute-title {
		display: block;
		margin: 0 0 20px;
		font-size: 1.4285rem;
	}

	.custom-attributes-panel.size-attribute {
		margin: 0 0 40px;
		padding: 0 0 40px;
		border-bottom: 1px solid #E9E9E9;
	}

	.custom-attributes-panel .clearfix {
		float: none;
	}
}