/**
 * The 2026 price card (owner request 2026-07-27): the homepage design
 * applied to EVERY price render - catalog cards, shop loops, related
 * sliders, the product page summary and the AJAX live-price fragments
 * (identical markup by construction). Theme palette; the product-page
 * variant is deliberately larger (owner: "textul sa fie mai mare").
 */

.ng-pr {
	display: block;
	width: 100%;
	line-height: 1.35;
}
.ng-pr__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.8rem;
}
.ng-pr__label {
	color: #7a7468;
	font-weight: 600;
}
.ng-pr__value { white-space: nowrap; }
.ng-pr__value--sell,
.ng-pr__value--sell .woocommerce-Price-amount {
	color: #630606;
	font-weight: 800;
}
.ng-pr__value--buy,
.ng-pr__value--buy .woocommerce-Price-amount {
	color: #a5802f;
	font-weight: 700;
}
.ng-pr__gram,
.ng-pr__gram .woocommerce-Price-amount {
	display: block;
	color: #9a948a;
	font-weight: 400;
	margin-top: 1px;
	text-align: right; /* tucks under its row's value */
}
.ng-pr__gram .woocommerce-Price-amount { display: inline; }
/* per-gram inherits its row's color (owner 2026-07-27: the lone grey
   lei/gram read as the buy-back rate - now each row owns its own) */
.ng-pr__gram--sell,
.ng-pr__gram--sell .woocommerce-Price-amount { color: #630606; }
.ng-pr__gram--sell { margin-bottom: 0.4rem; }
.ng-pr__gram--buy,
.ng-pr__gram--buy .woocommerce-Price-amount { color: #a5802f; }

/* list variant: catalog cards, shop loops, related sliders.
   Owner calibration 2026-07-27: cap the block width so label and value
   sit CLOSE together (wide category cards stretched them apart - the
   homepage cards are the reference proportions), and bigger type. */
.ng-pr--list {
	max-width: 240px;
	margin-left: auto;
	margin-right: auto;
}
.ng-pr--list .ng-pr__label { font-size: 16px; }
.ng-pr--list .ng-pr__value--sell { font-size: 21px; }
.ng-pr--list .ng-pr__value--buy { font-size: 18px; }
.ng-pr--list .ng-pr__gram { font-size: 13px; }

/* product page summary: larger type; labels scaled to the price
   (owner 2026-07-27: 17px labels looked lost next to the 30px value) */
.ng-pr--product {
	/* Same cure as the list variant: the summary is wide, and
	   space-between pushed label and price far apart - cap the block
	   (left-aligned, matching the summary flow). */
	max-width: 400px;
}
.ng-pr--product .ng-pr__row { margin-bottom: 0.45rem; }
.ng-pr--product .ng-pr__label { font-size: 21px; font-weight: 700; color: #4a4438; }
.ng-pr--product .ng-pr__value--sell { font-size: 30px; }
.ng-pr--product .ng-pr__value--buy { font-size: 23px; }
.ng-pr--product .ng-pr__gram { font-size: 14px; margin-top: 4px; }

/* single-price variant (no buy-back): the price stands alone */
.ng-pr--single .ng-pr__value--sell { display: block; }
.ng-pr--single .ng-pr__gram { text-align: left; color: #630606; }
.ng-pr--single .ng-pr__gram .woocommerce-Price-amount { color: #630606; }
.ng-pr--single.ng-pr--list .ng-pr__value--sell { font-size: 17px; }
.ng-pr--single.ng-pr--product .ng-pr__value--sell { font-size: 30px; }

/* small screens: same markup, tighter type. The 2-column mobile grid
   leaves ~170px per card - values clipped at the edge (owner mobile
   screenshot 2026-07-29). Rows may WRAP: the value drops to its own
   line, still right-aligned, never truncated. */
@media (max-width: 640px) {
	.ng-pr { max-width: 100%; }
	.ng-pr__row { flex-wrap: wrap; }
	.ng-pr__row .ng-pr__value { margin-left: auto; }
	.ng-pr--list .ng-pr__value--sell { font-size: 17px; }
	.ng-pr--list .ng-pr__value--buy { font-size: 15px; }
	.ng-pr--list .ng-pr__label { font-size: 13px; }
	.ng-pr--list .ng-pr__gram { font-size: 11.5px; }
	.ng-pr--product .ng-pr__label { font-size: 17px; }
	.ng-pr--product .ng-pr__value--sell { font-size: 25px; }
	.ng-pr--product .ng-pr__value--buy { font-size: 19px; }
}