.wmss-size-subtitle-scope {
	position: relative;
	overflow: visible !important;
}

.wmss-size-subtitle {
	color: var(--wmss-text-color, #222);
	font-size: var(--wmss-font-size, 18px);
	font-weight: var(--wmss-font-weight, 500);
	line-height: 1.5;
	text-align: var(--wmss-text-align, center);
	direction: auto;
	transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.wmss-size-subtitle__text {
	position: relative;
	display: inline-block;
	min-width: 0;
	padding: var(--wmss-padding-y, 4px) var(--wmss-padding-x, 10px);
	border-radius: var(--wmss-radius, 6px);
	background: var(--wmss-background, transparent);
	white-space: normal;
	word-break: break-word;
}

/* Desktop / tablet floating style */
.wmss-size-subtitle--floating {
	position: absolute;
	inset-inline-start: 50%;
	bottom: calc(100% + var(--wmss-margin-bottom, 12px));
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(100%, var(--wmss-max-width, 230px));
	max-width: calc(100% - 10px);
	margin: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate(-50%, 6px);
	z-index: 50;
}

.wmss-size-subtitle--floating.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.wmss-size-subtitle--floating.wmss-has-lines::before,
.wmss-size-subtitle--floating.wmss-has-lines::after {
	content: "";
	flex: 1 1 30px;
	min-width: 20px;
	height: 1px;
	background: var(--wmss-line-color, #cfcfcf);
}

.wmss-size-subtitle--floating.wmss-has-lines::before {
	margin-inline-end: 1px;
}

.wmss-size-subtitle--floating.wmss-has-lines::after {
	margin-inline-start: 1px;
}

.wmss-size-subtitle--floating.wmss-has-lines .wmss-size-subtitle__text::after {
	content: "";
	position: absolute;
	inset-inline-start: 50%;
	bottom: -5px;
	width: 8px;
	height: 8px;
	border-inline-end: 1px solid var(--wmss-line-color, #cfcfcf);
	border-bottom: 1px solid var(--wmss-line-color, #cfcfcf);
	background: var(--wmss-background, #fff);
	transform: translateX(-50%) rotate(45deg);
}

/* Mobile inline badge next to the size label */
.wmss-size-subtitle--inline {
	display: none;
	vertical-align: middle;
	margin-inline-start: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-2px);
}

.wmss-size-subtitle--inline.is-visible {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.wmss-size-subtitle--inline .wmss-size-subtitle__text {
	padding: max(2px, var(--wmss-padding-y, 4px) - 1px) max(8px, var(--wmss-padding-x, 10px) - 2px);
	border: 1px solid var(--wmss-line-color, #cfcfcf);
	background: var(--wmss-background, #fff);
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
	max-width: min(60vw, 220px);
}

@media (min-width: 768px) {
	.wmss-size-subtitle--inline {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.wmss-size-subtitle--floating {
		display: none !important;
	}

	.variations .label .wmss-size-subtitle--inline,
	table.variations .label .wmss-size-subtitle--inline,
	tr .label .wmss-size-subtitle--inline {
		display: none;
	}

	.variations .label .wmss-size-subtitle--inline.is-visible,
	table.variations .label .wmss-size-subtitle--inline.is-visible,
	tr .label .wmss-size-subtitle--inline.is-visible {
		display: inline-flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wmss-size-subtitle {
		transition: none;
	}
}