/* Simple Size Swatches
 * Colours, sizes and fonts come from WooCommerce > Size Swatches as CSS variables.
 * The !important flags and :not(#_) (a specificity boost) stop theme and Elementor button styles overriding the boxes.
 */

/* Hide the native dropdown, its "Size" label and the "Clear" link once the boxes are built */
.variations_form.sss-ready select.sss-native,
.variations_form.sss-ready .sss-row .label,
.variations_form.sss-ready .reset_variations {
	display: none !important;
}

/* Let the boxes use the full width instead of a table cell */
.variations_form.sss-ready table.variations,
.variations_form.sss-ready table.variations tbody,
.variations_form.sss-ready tr.sss-row,
.variations_form.sss-ready tr.sss-row td.value {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.variations_form.sss-ready table.variations {
	margin-bottom: 16px;
}

.variations_form .sss .sss__title {
	margin: 0 0 10px !important;
	font-family: var(--sss-font, Inter, sans-serif) !important;
	font-size: var(--sss-heading-size, 14px) !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--sss-heading-color, #000) !important;
}

.variations_form .sss .sss__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--sss-box-width, 64px), 1fr));
	gap: var(--sss-gap, 8px);
}

/* The size box */
.variations_form .sss button.sss__btn:not(#_):not(#_),
.variations_form .sss button.sss__btn:not(#_):not(#_):hover,
.variations_form .sss button.sss__btn:not(#_):not(#_):focus,
.variations_form .sss button.sss__btn:not(#_):not(#_):active {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: var(--sss-box-height, 44px) !important;
	margin: 0 !important;
	padding: 4px 8px !important;
	border: 1px solid var(--sss-border, #c9c9c9) !important;
	border-radius: var(--sss-radius, 0) !important;
	background: var(--sss-bg, #fff) !important;
	color: var(--sss-color, #000) !important;
	font-family: var(--sss-font, Inter, sans-serif) !important;
	font-size: var(--sss-font-size, 13px) !important;
	font-weight: var(--sss-font-weight, 500) !important;
	font-style: normal !important;
	line-height: 1.2 !important;
	text-transform: var(--sss-transform, none) !important;
	text-decoration: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	opacity: 1 !important;
	outline: none;
	cursor: pointer;
	transition: background-color .15s, color .15s, border-color .15s;
}

.variations_form .sss button.sss__btn:not(#_):not(#_):focus-visible {
	outline: 2px solid var(--sss-hover-border, #000);
	outline-offset: 2px;
}

@media (hover: hover) {
	.variations_form .sss button.sss__btn:not(#_):not(#_):hover {
		border-color: var(--sss-hover-border, #000) !important;
	}
}

/* Selected: inverted colours */
.variations_form .sss button.sss__btn:not(#_):not(#_).is-selected,
.variations_form .sss button.sss__btn:not(#_):not(#_).is-selected:hover,
.variations_form .sss button.sss__btn:not(#_):not(#_).is-selected:focus,
.variations_form .sss button.sss__btn:not(#_):not(#_).is-selected:active {
	background: var(--sss-sel-bg, #000) !important;
	border-color: var(--sss-sel-bg, #000) !important;
	color: var(--sss-sel-color, #fff) !important;
}

/* Out of stock: looks normal, plus a small outline bell in the corner */
.variations_form .sss button.sss__btn:not(#_):not(#_).is-out::after {
	content: '';
	position: absolute;
	top: 3px;
	right: 3px;
	width: var(--sss-bell-size, 13px);
	height: var(--sss-bell-size, 13px);
	background-color: var(--sss-bell-color, #d0021b);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Size guide link */
.sizing-help-link a.open-sizing-popup {
	display: inline-block;
	color: var(--sss-guide-color, #90191c) !important;
	font-style: var(--sss-guide-style, italic);
	font-size: var(--sss-guide-size, 16px);
	text-decoration: none;
}