/* Pa los detalles — barra de compartir.
   Hereda tipografía del tema (Manrope) y usa los presets del tema con
   fallback al contraste del sitio, así sobrevive cambios de paleta.
   --pld-accent: color elegido en Ajustes (inline); si no, contraste del tema. */
.pld-share {
	--pld-c: var(--pld-accent, var(--wp--preset--color--contrast, #111));
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0;
}

/* Texto centrado arriba, íconos debajo. */
.pld-share-label {
	flex-basis: 100%;
	text-align: center;
	font-size: 0.9em;
	font-weight: 700;
	color: var(--pld-c);
	margin: 0 0 6px;
}

/* En el meta del producto (SKU / categorías / tags) la barra rompe a su
   propia fila, debajo del SKU y alineada a la izquierda. */
.product_meta .pld-share {
	flex-basis: 100%;
	width: 100%;
	justify-content: flex-start;
	margin: 14px 0 0;
}

.product_meta .pld-share-label {
	text-align: left;
}

.pld-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1.5px solid var(--pld-c);
	background: transparent;
	color: var(--pld-c);
	cursor: pointer;
	padding: 0;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
	text-decoration: none;
	box-shadow: none;
}

.pld-btn:hover,
.pld-btn:focus-visible {
	background: var(--pld-c);
	border-color: var(--pld-c);
	color: var(--wp--preset--color--base, #fff);
	transform: translateY(-2px);
}

.pld-btn:focus-visible {
	outline: 2px solid var(--pld-c);
	outline-offset: 2px;
}

/* Hover con el color de marca de cada red (desactivable en Ajustes:
   el PHP inyecta un override inline si la opción está apagada). */
.pld-whatsapp:hover, .pld-whatsapp:focus-visible { background: #25d366; border-color: #25d366; color: #fff; }
.pld-facebook:hover, .pld-facebook:focus-visible { background: #1877f2; border-color: #1877f2; color: #fff; }
.pld-x:hover,        .pld-x:focus-visible        { background: #000;    border-color: #000;    color: #fff; }
.pld-pinterest:hover, .pld-pinterest:focus-visible { background: #e60023; border-color: #e60023; color: #fff; }

/* El botón nativo se muestra solo si share.js detecta navigator.share. */
.pld-native {
	display: none;
}

.pld-share.pld-has-native .pld-native {
	display: inline-flex;
}

/* Feedback de "copiado": el botón se rellena y muestra un check. */
.pld-copy.pld-copied {
	background: var(--wp--preset--color--vivid-green-cyan, #00d084);
	border-color: var(--wp--preset--color--vivid-green-cyan, #00d084);
	color: #fff;
}

.pld-copy .pld-check {
	display: none;
}

.pld-copy.pld-copied .pld-check {
	display: block;
}

.pld-copy.pld-copied svg:not(.pld-check) {
	display: none;
}