/* Smart Swatches – frontend. Clases compatibles con Variation Swatches. */

.woo-variation-raw-select,
.woo-variation-raw-select + .select2 {
	display: none !important;
}

.variable-items-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.variable-items-wrapper .variable-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--wvs-width, 35px);
	height: var(--wvs-height, 35px);
	margin: 4px;
	padding: 2px;
	list-style: none;
	border: 0;
	background-color: var(--wvs-bg, #fff);
	color: var(--wvs-text, #000);
	box-shadow: 0 0 0 var(--wvs-border-size, 2px) var(--wvs-border-color, #a8a8a8);
	cursor: pointer;
	user-select: none;
	transition: box-shadow .2s ease, opacity .2s ease;
}

.variable-items-wrapper .variable-item:hover {
	color: var(--wvs-hover-text, #000);
	background-color: var(--wvs-hover-bg, #fff);
	box-shadow: 0 0 0 var(--wvs-hover-border-size, 2px) var(--wvs-hover-border-color, #000);
}

.variable-items-wrapper .variable-item.selected,
.variable-items-wrapper .variable-item.selected:hover {
	color: var(--wvs-selected-text, #000);
	background-color: var(--wvs-selected-bg, #fff);
	box-shadow: 0 0 0 var(--wvs-selected-border-size, 2px) var(--wvs-selected-border-color, #000);
}

.variable-items-wrapper .variable-item:focus-visible {
	outline: 2px solid #111;
	outline-offset: 3px;
}

.variable-item .variable-item-contents {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: inherit;
}

.variable-item .variable-item-span-color,
.variable-item .variable-item-image {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: inherit;
	object-fit: cover;
}

.variable-item .variable-item-span-color {
	box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, .3);
}

/* Formas */
.wvs-style-rounded .color-variable-item,
.wvs-style-rounded .image-variable-item {
	border-radius: 100%;
}

.wvs-style-rounded .button-variable-item {
	border-radius: 4px;
}

.wvs-style-squared .variable-item {
	border-radius: 2px;
}

/* Botones */
.variable-items-wrapper .button-variable-item {
	width: auto;
	min-width: var(--wvs-width, 35px);
	font-size: var(--wvs-font-size, 10px);
	line-height: 1;
	text-align: center;
}

.button-variable-item .variable-item-span-button {
	padding: 0 5px;
	white-space: nowrap;
}

/* No disponibles / agotados */
.wvs-behavior-hide .variable-items-wrapper .variable-item.disabled {
	display: none !important;
}

.wvs-behavior-blur .variable-items-wrapper .variable-item.disabled,
.wvs-behavior-blur-no-cross .variable-items-wrapper .variable-item.disabled {
	opacity: .4;
	cursor: not-allowed;
	pointer-events: none;
}

.wvs-behavior-blur .variable-items-wrapper .variable-item.disabled::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background: #ff0000;
	transform: rotate(-45deg);
	pointer-events: none;
}

.variable-items-wrapper .variable-item.no-stock:not(.disabled) {
	opacity: .55;
}

/* Nombre seleccionado */
.woo-selected-variation-item-name {
	margin: 0 2px;
	font-weight: 600;
}

/* Tooltip propio (solo si está activado; si no, se usa el title nativo) */
.wvs-tooltip .variable-item[data-wvstooltip]::before {
	content: attr(data-wvstooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	z-index: 999;
	padding: 4px 8px;
	border-radius: 2px;
	background: var(--wvs-tooltip-bg, #333);
	color: var(--wvs-tooltip-text, #fff);
	font-size: 12px;
	line-height: 1.2;
	white-space: nowrap;
	transform: translateX(-50%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .15s;
}

.wvs-tooltip .variable-item[data-wvstooltip]:hover::before {
	opacity: 1;
	visibility: visible;
}

/* Tienda / categorías */
.wvs-archive-variations-wrapper {
	position: static;
}

.wvs-archive-variations-wrapper ul.variations {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: var(--wvs-archive-text-align, center);
}

.wvs-archive-variations-wrapper .woo-variation-items-wrapper {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wvs-archive-variations-wrapper .archive-variable-items {
	justify-content: var(--wvs-archive-align, center);
	margin: 0 0 .5em;
}

.wvs-archive-variations-wrapper .archive-variable-items .variable-item {
	width: var(--wvs-archive-width, 20px);
	height: var(--wvs-archive-height, 20px);
}

.wvs-archive-variations-wrapper .archive-variable-items .button-variable-item {
	width: auto;
	min-width: var(--wvs-archive-width, 20px);
	font-size: var(--wvs-archive-font-size, 16px);
}

/* Visto en el swatch seleccionado (color e imagen), en ficha y catálogo. Blanco con contorno oscuro para verse sobre cualquier color. */
ul.variable-items-wrapper li.variable-item.color-variable-item.selected::after,
ul.variable-items-wrapper li.variable-item.image-variable-item.selected::after {
	content: "" !important;
	display: block !important;
	z-index: 5;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60%;
	height: 60%;
	transform: translate(-50%, -50%);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' stroke='%23000' stroke-opacity='.45' stroke-width='5'/%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}