/* =========================================================
   Your Hausly - Attribute Swatches
   ========================================================= */

/* IMPORTANTE: NO se usa display:none acá. WooCommerce decide qué
   atributos procesar (para deshabilitar combinaciones inválidas)
   mirando si el <select> está "visible" para jQuery — con
   display:none deja de considerarlo y la validación de disponibilidad
   se rompe. Esta técnica lo saca de la vista sin sacarlo de ese
   chequeo (mismo truco que usan los plugins de swatches reales). */
.yh-sw-swatch-group select{
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
.yh-sw-swatch-group{
	position: relative;
}

/* Achica el espacio que WooCommerce deja por defecto entre el
   título del atributo (Color/Talla) y la fila de swatches, y entre
   una fila de atributo y la siguiente. */
.variations tr{
	display: block;
	margin-bottom: 6px !important;
}
.variations td, .variations th{
	padding: 2px 0 !important;
	display: block;
}
.variations th.label{
	padding-bottom: 4px !important;
}

.yh-sw-swatch-list{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.yh-sw-swatch{
	cursor: pointer;
	transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}
.yh-sw-swatch:hover{
	transform: translateY(-1px);
}

/* ---------- Tipo Color: círculos con aro separado (como Kirach) ---------- */
.yh-sw-type-color .yh-sw-swatch{
	width: 50px !important;
	height: 50px !important;
	border-radius: 50% !important;
	padding: 5px !important;
	border: 2.5px solid transparent !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box !important;
}
.yh-sw-type-color .yh-sw-swatch:hover{
	border-color: rgba(46,194,232,0.25) !important; /* más tenue que el seleccionado, para no confundirse */
}
.yh-sw-type-color .yh-sw-swatch.selected{
	border-color: #2ec2e8 !important;
}
.yh-sw-color-dot{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	display: block;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}

/* ---------- Tipo Botón: talles/letras/números ---------- */
.yh-sw-type-button .yh-sw-swatch{
	min-width: 48px !important;
	height: 48px !important;
	padding: 0 16px !important;
	border-radius: 8px !important;
	border: 1.5px solid rgba(255,255,255,0.18) !important;
	background: rgba(255,255,255,0.02);
	display: flex !important;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.85);
	font-size: 14px;
	font-weight: 500;
}
.yh-sw-type-button .yh-sw-swatch:hover{
	border-color: rgba(46,194,232,0.55) !important;
}
.yh-sw-type-button .yh-sw-swatch.selected{
	border-color: #2ec2e8 !important;
	background: rgba(46,194,232,0.1) !important;
	color: #2ec2e8 !important;
}

/* Deshabilitado: se sincroniza desde JS con el estado real de la
   <option> correspondiente dentro del <select> (que WooCommerce
   marca disabled cuando esa combinación no tiene variación válida). */
.yh-sw-swatch.disabled{
	opacity: 0.3 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

/* Link nativo de WooCommerce para limpiar la selección ("Limpiar" /
   "Clear"). Por defecto viene sin estilo — lo dejamos como un link
   chico pero visible, con su propio espacio arriba. */
a.reset_variations{
	display: inline-block !important;
	margin-top: 10px !important;
	font-size: 12.5px !important;
	color: #2ec2e8 !important;
	text-decoration: underline !important;
	text-transform: none !important;
	cursor: pointer;
}
a.reset_variations:hover{
	opacity: 0.8;
}