/* Pinterest Save Button , front-end styles */

.pip-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
}

.pip-wrap img {
	max-width: 100%;
	height: auto;
}

.pip-scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.18);
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
	z-index: calc(var(--pip-z, 9999) - 1);
}

.pip-wrap:hover .pip-scrim,
.pip-wrap.pip-always .pip-scrim {
	opacity: 1;
}

.pip-btn {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pip-gap, 7px);
	padding: var(--pip-padding, 9px 16px);
	font-size: var(--pip-font-size, 14px);
	line-height: 1.2;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 600;
	white-space: nowrap;
	background-color: var(--pip-bg, #e60023);
	color: var(--pip-color, #ffffff);
	border: none;
	border-radius: var(--pip-radius, 999px);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease, filter 0.15s ease;
	z-index: var(--pip-z, 9999);
	margin: 0;
}

.pip-btn:hover {
	filter: brightness(0.92);
}

.pip-btn:focus-visible {
	outline: 2px solid var(--pip-color, #ffffff);
	outline-offset: 2px;
}

.pip-wrap:hover .pip-btn,
.pip-wrap.pip-always .pip-btn {
	opacity: 1;
	transform: translateY(0);
}

.pip-icon {
	width: var(--pip-icon-size, 16px);
	height: var(--pip-icon-size, 16px);
	flex: none;
}

.pip-label:empty {
	display: none;
}

/* Positions */
.pip-pos-top-left .pip-btn { top: 12px; left: 12px; }
.pip-pos-top-right .pip-btn { top: 12px; right: 12px; }
.pip-pos-bottom-left .pip-btn { bottom: 12px; left: 12px; }
.pip-pos-bottom-right .pip-btn { bottom: 12px; right: 12px; }
.pip-pos-center .pip-btn {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.92);
}
.pip-pos-center:hover .pip-btn,
.pip-pos-center.pip-always .pip-btn {
	transform: translate(-50%, -50%) scale(1);
}

/* Always show on touch devices since hover can't be relied on */
@media (hover: none) {
	.pip-btn {
		opacity: 1;
		transform: none;
	}
	.pip-pos-center .pip-btn {
		transform: translate(-50%, -50%);
	}
	.pip-scrim {
		opacity: 0;
	}
}