.ptas-swatches {
	--ptas-swatch-size: 28px;
	--ptas-bubble-bg: #f6f3ee;
	--ptas-bubble-color: #1f2937;
	margin-block-start: 8px;
	text-align: center;
	inline-size: 100%;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

.ptas-swatches-inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	max-inline-size: 100%;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

.ptas-swatches .ptas-swatch {
	position: relative;
	width: var(--ptas-swatch-size);
	height: var(--ptas-swatch-size);
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border: var(--ptas-border-width, 1px) solid var(--ptas-border-color, rgba(20, 20, 20, 0.45));
	background-color: #fff;
	border-radius: 999px;
	cursor: pointer;
	padding: 0;
	transition: transform 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
	line-height: 1;
	appearance: none;
	min-inline-size: var(--ptas-swatch-size);
	min-block-size: var(--ptas-swatch-size);
	opacity: 1 !important;
	visibility: visible !important;
	border-color: var(--ptas-border-color, rgba(20, 20, 20, 0.45)) !important;
	background-color: #fff !important;
	overflow: visible !important;
	margin: 0 !important;
	float: none !important;
	flex: 0 0 auto !important;
}

.ptas-swatch:hover,
.ptas-swatch:focus-visible {
	transform: translateY(-1px) scale(1.05);
	border-color: var(--ptas-border-hover-color, rgba(20, 20, 20, 0.7));
	box-shadow: 0 2px 9px rgba(0, 0, 0, 0.17);
	outline: none;
}

.ptas-swatches .ptas-swatch-fill {
	display: block;
	flex: 0 0 auto;
	inline-size: calc(var(--ptas-swatch-size) - 6px);
	block-size: calc(var(--ptas-swatch-size) - 6px);
	background-color: var(--ptas-swatch-color, #ccc);
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
	-webkit-mask-image: var(--ptas-mask);
	mask-image: var(--ptas-mask);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	opacity: 1 !important;
	visibility: visible !important;
}

/* Hard fallback when theme CSS affects internal spans. */
.ptas-swatches .ptas-swatch::before {
	content: "";
	position: absolute;
	inset: 3px;
	background: var(--ptas-swatch-color, #ccc);
	border-radius: 999px;
	-webkit-mask-image: var(--ptas-mask);
	mask-image: var(--ptas-mask);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	z-index: 1;
}

.ptas-swatches .ptas-swatch > * {
	position: relative;
	z-index: 2;
}

.ptas-swatch.is-out-of-stock {
	opacity: 0.4;
}

.ptas-swatch.is-out-of-stock::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, transparent 46%, rgba(206, 26, 26, 0.95) 49%, rgba(206, 26, 26, 0.95) 51%, transparent 54%);
	pointer-events: none;
	z-index: 3;
}

.ptas-swatch[data-tooltip]:hover::before,
.ptas-swatch[data-tooltip]:focus-visible::before,
.ptas-swatch[data-tooltip].is-bubble-visible::before {
	content: attr(data-tooltip);
	position: absolute;
	inset-inline-start: 50%;
	inset-block-end: calc(100% + 10px);
	transform: translateX(-50%);
	background: var(--ptas-bubble-bg);
	color: var(--ptas-bubble-color);
	font-size: 11px;
	line-height: 1.35;
	padding-block: 4px;
	padding-inline: 8px;
	border-radius: 999px;
	border: 1px solid rgba(31, 41, 55, 0.17);
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 8;
}

.ptas-swatch[data-tooltip]:hover::after,
.ptas-swatch[data-tooltip]:focus-visible::after,
.ptas-swatch[data-tooltip].is-bubble-visible::after {
	content: "";
	position: absolute;
	inset-inline-start: 50%;
	inset-block-end: calc(100% + 2px);
	inline-size: 8px;
	block-size: 8px;
	background: var(--ptas-bubble-bg);
	border-inline-end: 1px solid rgba(31, 41, 55, 0.17);
	border-block-end: 1px solid rgba(31, 41, 55, 0.17);
	transform: translateX(-50%) rotate(45deg);
	z-index: 7;
}

.ptas-swatch.shape-circle {
	--ptas-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='48' fill='black'/></svg>");
}

.ptas-swatch.shape-teddy {
	--ptas-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><path fill='black' fill-rule='evenodd' d='M28 26a16 16 0 1 1 0 32 16 16 0 0 1 0-32Zm64 0a16 16 0 1 1 0 32 16 16 0 0 1 0-32ZM60 20c25.405 0 46 20.595 46 46S85.405 112 60 112 14 91.405 14 66 34.595 20 60 20Zm-13 37a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Zm26 0a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM60 72c-8.5 0-15.5 5.8-17.4 13.7a2.5 2.5 0 0 0 2.4 3.3h30a2.5 2.5 0 0 0 2.4-3.3C75.5 77.8 68.5 72 60 72Z' clip-rule='evenodd'/><circle cx='47' cy='62.5' r='5.5' fill='white'/><circle cx='73' cy='62.5' r='5.5' fill='white'/><path d='M45 86c3.7-7.2 8.6-10.8 15-10.8s11.3 3.6 15 10.8H45Z' fill='white'/></svg>");
}

.ptas-swatch.shape-pillow {
	--ptas-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><path fill='black' d='M25 18c14.5 0 26 11.5 26 26v12h18V44c0-14.5 11.5-26 26-26 14.2 0 25 10.8 25 25 0 9.5-4.9 17.8-12.4 22.2 7.5 4.4 12.4 12.7 12.4 22.2 0 14.2-10.8 25-25 25-14.5 0-26-11.5-26-26V74H51v12.6c0 14.5-11.5 26-26 26-14.2 0-25-10.8-25-25 0-9.5 4.9-17.8 12.4-22.2C4.9 60.9 0 52.6 0 43.1 0 28.8 10.8 18 25 18Z'/></svg>");
}

.ptas-swatch.shape-beanbag {
	--ptas-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><path fill='black' d='M62 8c22 0 40 15 40 35 0 9-3.5 17.3-9.8 24.5C102.7 74 110 84.7 110 97c0 8.3-6.7 15-15 15-9.2 0-16.9-8.4-17.8-17.4C72.3 105.2 62.6 112 50.8 112 30.4 112 14 95.6 14 75.2c0-15.9 10-29.7 24.1-35.1C35.4 22.2 47 8 62 8Z'/></svg>");
}

.ptas-context-single .ptas-swatches-inner {
	justify-content: flex-start;
	gap: 10px;
}

.ptas-context-archive-flatsome-grid .ptas-swatches-inner {
	display: flex;
	justify-content: center;
}

.ptas-context-archive .ptas-swatches-inner,
.ptas-context-archive-flatsome-grid .ptas-swatches-inner {
	min-block-size: 32px;
}

@media (max-width: 767px) {
	.ptas-context-archive,
	.ptas-context-archive-flatsome-grid {
		/* Keep archive swatches compact and always visible on mobile cards */
		--ptas-swatch-size: min(var(--ptas-swatch-size), 28px);
	}

	.ptas-context-archive .ptas-swatches-inner,
	.ptas-context-archive-flatsome-grid .ptas-swatches-inner {
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: center !important;
		gap: 6px;
	}

	.ptas-context-archive .ptas-swatch,
	.ptas-context-archive-flatsome-grid .ptas-swatch {
		inline-size: min(var(--ptas-swatch-size), 28px) !important;
		block-size: min(var(--ptas-swatch-size), 28px) !important;
	}

	.ptas-context-archive .ptas-swatch-fill,
	.ptas-context-archive-flatsome-grid .ptas-swatch-fill {
		inline-size: calc(min(var(--ptas-swatch-size), 28px) - 6px);
		block-size: calc(min(var(--ptas-swatch-size), 28px) - 6px);
	}
}

@supports not (mask-image: url("")) {
	.ptas-swatch-fill {
		-webkit-mask-image: none;
		mask-image: none;
		border-radius: 50%;
	}
}