/* Title Hover Effects of the Product Slider. The colour is free's `--wopb-title-animation-color`. */

/* Wave: drawn as a masked strip so it takes the animation colour. */
.wopb-title-style2 a,
.wopb-title-style3 a,
.wopb-title-style5 a {
	position: relative;
}
.wopb-title-style2 a:hover::after,
.wopb-title-style3 a::after,
.wopb-title-style5 a:hover::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 18px;
	background: var(--wopb-title-animation-color, black);
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cpath fill='none' stroke='black' stroke-width='1' d='M0,17.5 c 2.5,0,2.5,-1.5,5,-1.5 s 2.5,1.5,5,1.5 c 2.5,0,2.5,-1.5,5,-1.5 s 2.5,1.5,5,1.5'/%3E%3C/svg%3E") 0 100% / 10px 18px repeat-x;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cpath fill='none' stroke='black' stroke-width='1' d='M0,17.5 c 2.5,0,2.5,-1.5,5,-1.5 s 2.5,1.5,5,1.5 c 2.5,0,2.5,-1.5,5,-1.5 s 2.5,1.5,5,1.5'/%3E%3C/svg%3E") 0 100% / 10px 18px repeat-x;
	pointer-events: none;
}

/* On hover underline */
.wopb-title-style1 a {
	cursor: pointer;
	text-decoration: none;
	display: inline;
	padding-bottom: 2px;
	transition: all 0.35s linear !important;
	background: linear-gradient(to bottom, var(--wopb-title-animation-color, black) 0%, var(--wopb-title-animation-color, black) 98%);
	background-size: 0 2px;
	background-repeat: no-repeat;
	background-position: left 100%;
}
.wopb-title-style1 a:hover {
	background-size: 100% 2px !important;
}

/* Underline */
.wopb-title-style4 a {
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	display: inline;
	padding-bottom: 2px;
	transition: all 0.3s linear !important;
	background: linear-gradient(to bottom, var(--wopb-title-animation-color, black) 0%, var(--wopb-title-animation-color, black) 98%);
	background-size: 100% 2px;
	background-repeat: no-repeat;
	background-position: left 100%;
}
.wopb-title-style4 a:hover {
	background-size: 0 2px !important;
}

/* Underline and wave */
.wopb-title-style5 a {
	cursor: pointer;
	text-decoration: none;
	display: inline;
	padding-bottom: 2px;
	transition: all 0.3s linear !important;
	background: linear-gradient(to bottom, var(--wopb-title-animation-color, black) 0%, var(--wopb-title-animation-color, black) 98%);
	background-size: 100% 2px;
	background-repeat: no-repeat;
	background-position: left 100%;
}
.wopb-title-style5 a:hover {
	background-image: none;
	transition: all 0.35s ease-out;
}

/* Underline background */
.wopb-title-style6 a {
	background-image: linear-gradient(120deg, var(--wopb-title-animation-color, black) 0%, var(--wopb-title-animation-color, black) 100%);
	background-repeat: no-repeat;
	background-size: 100% 2px;
	background-position: 0 88%;
	transition: background-size 0.15s ease-in;
	padding: 5px 5px;
}
.wopb-title-style6 a:hover {
	background-size: 100% 88% !important;
}

/* Underline right to left */
.wopb-title-style7 a {
	cursor: pointer;
	text-decoration: none;
	display: inline;
	padding-bottom: 2px;
	transition: all 0.3s linear !important;
	background: linear-gradient(to bottom, var(--wopb-title-animation-color, black) 0%, var(--wopb-title-animation-color, black) 98%);
	background-size: 0 2px;
	background-repeat: no-repeat;
	background-position: right 100%;
}
.wopb-title-style7 a:hover {
	background-size: 100% 2px !important;
}

/* Underline center */
.wopb-title-style8 a {
	cursor: pointer;
	text-decoration: none;
	display: inline;
	padding-bottom: 2px;
	transition: all 0.3s linear !important;
	background: linear-gradient(to bottom, var(--wopb-title-animation-color, black) 0%, var(--wopb-title-animation-color, black) 98%);
	background-size: 0 2px;
	background-repeat: no-repeat;
	background-position: center 100%;
}
.wopb-title-style8 a:hover {
	background-size: 100% 2px !important;
}

/* Underline background 2 */
.wopb-title-style9 a {
	background-image: linear-gradient(120deg, var(--wopb-title-animation-color, black) 0%, var(--wopb-title-animation-color, black) 100%);
	background-repeat: no-repeat;
	background-size: 100% 10px;
	background-position: 0 88%;
	transition: 0.3s ease-in;
	padding: 3px 5px;
}
.wopb-title-style9 a:hover {
	background-size: 100% 88% !important;
}

/* Underline hover spacing */
.wopb-title-style10:hover {
	transition: all 0.35s;
}
.wopb-title-style10:hover a {
	letter-spacing: 0.4px !important;
	transition: all 0.35s;
}

/* Hover word spacing */
.wopb-title-style11 {
	word-spacing: 0;
	transition: all 0.35s;
}
.wopb-title-style11:hover {
	word-spacing: 3px;
}