:root{
	--hg-price-color: #1b1b1b;
	--hg-price-size:  clamp(24px, 3.4vw, 24px);
}

/* ---- Contenedor del precio dentro de la tarjeta ---- */
.product-grid-item .price,
.product-list-item .price,
.wd-product-wrapper .price{
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 10px;
    line-height: 1;
    justify-content: flex-end;
}

/* ---- Precio protagonista: precio normal + precio de oferta (<ins>) ---- */
.product-grid-item .price > .woocommerce-Price-amount.amount,
.product-list-item  .price > .woocommerce-Price-amount.amount,
.wd-product-wrapper .price > .woocommerce-Price-amount.amount,
.product-grid-item .price ins .woocommerce-Price-amount.amount,
.product-list-item  .price ins .woocommerce-Price-amount.amount,
.wd-product-wrapper .price ins .woocommerce-Price-amount.amount{
	display:inline-block;
	font-size:var(--hg-price-size) !important;
	font-weight:800 !important;
	line-height:1 !important;
	letter-spacing:-.02em;
	color:var(--hg-price-color);
}

/* <ins> = oferta: sin subrayado ni fondo que a veces pone el tema */
.product-grid-item .price ins,
.product-list-item  .price ins,
.wd-product-wrapper .price ins{
	text-decoration:none;
	background:transparent;
}

/* ---- Simbolo de moneda "S/" pequeno y elevado (como el $ de la imagen) ---- */
.product-grid-item .price > .amount .woocommerce-Price-currencySymbol,
.product-list-item  .price > .amount .woocommerce-Price-currencySymbol,
.wd-product-wrapper .price > .amount .woocommerce-Price-currencySymbol,
.product-grid-item .price ins .amount .woocommerce-Price-currencySymbol,
.product-list-item  .price ins .amount .woocommerce-Price-currencySymbol,
.wd-product-wrapper .price ins .amount .woocommerce-Price-currencySymbol{
	font-size:.42em;
	font-weight:700;
	vertical-align:.95em;
	margin-right:1px;
}

/* ---- Decimales en superindice (los envuelve el PHP con .wd-amount-decimals) ---- */
.product-grid-item .price > .amount .wd-amount-decimals,
.product-list-item  .price > .amount .wd-amount-decimals,
.wd-product-wrapper .price > .amount .wd-amount-decimals,
.product-grid-item .price ins .amount .wd-amount-decimals,
.product-list-item  .price ins .amount .wd-amount-decimals,
.wd-product-wrapper .price ins .amount .wd-amount-decimals{
	font-size:.42em;
	font-weight:700;
	vertical-align:.95em;
	margin-left:1px;
}

/* ---- Precio anterior tachado (<del>) pequeno y discreto ---- */
.product-grid-item .price del,
.product-list-item  .price del,
.wd-product-wrapper .price del{
	order:2;
	align-self:center;
	opacity:.6;
	font-weight:400;
}
.product-grid-item .price del .woocommerce-Price-amount.amount,
.product-list-item  .price del .woocommerce-Price-amount.amount,
.wd-product-wrapper .price del .woocommerce-Price-amount.amount{
	font-size:14px !important;
	font-weight:400 !important;
	color:inherit;
	letter-spacing:normal;
}
.product-grid-item .price del .woocommerce-Price-currencySymbol,
.product-list-item  .price del .woocommerce-Price-currencySymbol,
.wd-product-wrapper .price del .woocommerce-Price-currencySymbol,
.product-grid-item .price del .wd-amount-decimals,
.product-list-item  .price del .wd-amount-decimals,
.wd-product-wrapper .price del .wd-amount-decimals{
	font-size:.8em;
	vertical-align:baseline;
	font-weight:400;
}