/* Reference pricing composition with the existing black/silver UI tokens. */
body.product-checkout-page .custom-single-product {
	--product-panel-border: rgba(var(--ui-text-silver-rgb), .2);
	--product-panel-depth: var(--ui-panel-inset-shadow);
	--product-panel-surface: var(--ui-panel-surface);
}

/* Override the standalone checkout's important flat fill only in this layout. */
body.single-product.product-checkout-page .custom-single-product .product-extra-accordion-item,
body.single-product.product-checkout-page .custom-single-product .product-inline-checkout .custom-checkout-panel,
body.single-product.product-checkout-page .custom-single-product .related-products-section .product-card {
	border: 1px solid var(--product-panel-border) !important;
	border-radius: 24px;
	background: var(--product-panel-surface) !important;
	box-shadow: var(--product-panel-depth), var(--ui-panel-shadow);
	transition: none;
}

body.product-checkout-page .single-product-main-layout .product-extra-accordion-item .product-extra-accordion-trigger {
	background: transparent !important;
}

body.product-checkout-page .product-pricing-grid {
	--product-pricing-gap: 25px;
	grid-template-columns: repeat(var(--plan-count), minmax(0, calc((100% - var(--product-pricing-gap) * 2) / 3)));
	align-items: stretch;
	justify-content: center;
	gap: var(--product-pricing-gap);
	padding-top: 0;
}

body.product-checkout-page .product-pricing-grid:has(.has-offer) {
	padding-top: 28px;
}

body.product-checkout-page .product-pricing-card {
	position: relative;
	padding: 36px 36px 37px;
	border: 1px solid var(--product-panel-border);
	border-radius: 24px;
	background: var(--product-panel-surface);
	box-shadow: var(--product-panel-depth);
	transition: border-color .35s, box-shadow .35s, transform .35s;
}

body.product-checkout-page .product-pricing-card > * {
	position: relative;
	z-index: 1;
}

body.product-checkout-page .product-pricing-card::before {
	position: absolute;
	z-index: 0;
	inset: 0;
	border-radius: inherit;
	background: url('../images/product-reference/pricing-glow.webp') center / cover no-repeat;
	filter: grayscale(1);
	content: '';
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s;
}

body.product-checkout-page .product-pricing-card:hover,
body.product-checkout-page .product-pricing-card:focus-within,
body.product-checkout-page .product-pricing-card.is-featured,
body.product-checkout-page .product-pricing-card.is-selected {
	border-color: rgba(var(--ui-text-silver-rgb), .5);
	box-shadow: var(--product-panel-depth);
	transform: translateY(-3px);
}

body.product-checkout-page .product-pricing-card.has-offer {
	border-color: rgba(var(--ui-text-silver-rgb), .45);
}

body.product-checkout-page .product-pricing-card:hover::before,
body.product-checkout-page .product-pricing-card:focus-within::before,
body.product-checkout-page .product-pricing-card.is-featured::before,
body.product-checkout-page .product-pricing-card.is-selected::before {
	opacity: 1;
}

body.product-checkout-page .product-pricing-card.is-selected::after {
	position: absolute;
	top: 0;
	left: 50%;
	width: 166px;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--ui-text-silver), transparent);
	content: '';
	filter: blur(2px);
	pointer-events: none;
	transform: translateX(-50%);
}

.product-plan-topline {
	display: flex;
	min-height: 61px;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.product-plan-emblem {
	display: flex;
	width: 61px;
	height: 61px;
	flex: 0 0 61px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(143deg, #ededed .53%, #858585 46.01%, #b5b5b5 85.29%);
	box-shadow: inset -3.6px -5.4px 1.8px -1.8px rgba(230, 238, 246, .3), 0 2px 5px rgba(0, 0, 0, .2), inset 1.8px 1.8px 3.6px rgba(255, 255, 255, .43), inset -2.7px -4.5px 1.8px rgba(70, 70, 70, .3);
	color: #171717;
	filter: drop-shadow(8px 9px 16px rgba(0, 0, 0, .45));
}

.product-plan-emblem svg {
	width: 36px;
	height: 36px;
}

body.product-checkout-page .product-pricing-badge {
	display: inline-flex;
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: max-content;
	max-width: calc(100% - 24px);
	min-height: 30px;
	padding: 7px 12px;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 999px;
	background: linear-gradient(135deg, var(--ui-white, #f2f2f2), var(--ui-text-silver, #b8b8b8));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 5px 14px rgba(0, 0, 0, .26);
	color: #151515;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	transform: translate(-50%, -50%);
}

.product-pricing-badge-icon {
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
}

.product-pricing-badge-text {
	min-width: 0;
	overflow-wrap: anywhere;
	white-space: normal;
}

.product-plan-summary {
	margin-top: 44px;
	margin-bottom: 32px;
}

body.product-checkout-page .product-pricing-card h3 {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
}

.product-plan-price-block {
	display: flex;
	align-items: last baseline;
	gap: 8px;
	margin-top: auto;
}

body.product-checkout-page .product-pricing-amount {
	min-width: 0;
	min-height: 0;
	margin: 0;
	font-size: clamp(30px, 2.8vw, 36px);
	line-height: 1.15;
}

body.product-checkout-page .product-pricing-amount .woocommerce-Price-currencySymbol {
	font-size: 1em;
}

body.product-checkout-page .product-pricing-term {
	margin: 0;
	font-size: 14px;
	white-space: nowrap;
}

/* Important surface rules also replace the legacy More details state overrides. */
body.product-checkout-page .product-purchase .product-plan-select,
body.product-checkout-page .product-purchase .product-change-plan,
body.single-product.product-checkout-page .custom-single-product .product-description-toggle {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 32px 0 0;
	padding: 18px 24px;
	border: 1px solid rgba(var(--ui-text-silver-rgb), .28);
	border-color: rgba(var(--ui-text-silver-rgb), .28) !important;
	border-radius: 40px;
	background: linear-gradient(115deg, #1c1c1c .33%, #101010 45.94%, #1c1c1c 99%) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
	color: var(--ui-white, #f2f2f2) !important;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.4;
	transition: background .35s, border-color .35s, color .35s, box-shadow .35s;
}

body.product-checkout-page .product-purchase .product-plan-select:hover,
body.product-checkout-page .product-purchase .product-change-plan:hover,
body.product-checkout-page .product-pricing-card.is-selected .product-plan-select,
body.single-product.product-checkout-page .custom-single-product .product-description-toggle:hover {
	border-color: #f2f2f2 !important;
	background: linear-gradient(246deg, #f2f2f2, #c9c9c9 50.1%) !important;
	box-shadow: inset 0 6px 18px rgba(255, 255, 255, .24) !important;
	color: #090909 !important;
}

body.product-checkout-page .product-pricing-card.is-selected .product-plan-select:hover {
	background: #fff !important;
}

body.product-checkout-page .product-purchase .product-plan-select:focus-visible,
body.product-checkout-page .product-purchase .product-change-plan:focus-visible,
body.single-product.product-checkout-page .custom-single-product .product-description-toggle:focus-visible {
	outline: 2px solid var(--ui-text-silver, #e6eef6) !important;
	outline-offset: 4px;
}

body.product-checkout-page .product-purchase-heading--checkout .product-change-plan {
	margin: 0;
	white-space: nowrap;
}

body.product-checkout-page .product-plan-select.is-loading svg {
	border-color: rgba(230, 238, 246, .2);
	border-top-color: #f2f2f2;
}

body.product-checkout-page .is-selected .product-plan-select.is-loading svg,
body.product-checkout-page .product-plan-select.is-loading:hover svg {
	border-color: rgba(0, 0, 0, .2);
	border-top-color: #090909;
}

body.single-product.product-checkout-page .custom-single-product .product-description-toggle-label {
	color: inherit !important;
}

body.product-checkout-page .product-description-toggle-icon::before,
body.product-checkout-page .product-description-toggle-icon::after {
	background: currentColor;
}

body.product-checkout-page .product-purchase .product-refund-inline {
	justify-content: center;
	margin-top: 40px;
	padding-top: 0;
	border-top: 0;
	text-align: center;
}

body.product-checkout-page .product-purchase .product-refund-inline-content {
	max-width: 780px;
}

.product-pricing-card .product-plan-attribute {
	margin-top: 20px;
	margin-bottom: 0;
}

@media (max-width: 1100px) and (min-width: 768px) {
	body.product-checkout-page .product-pricing-card { padding: 28px 20px; }
	body.product-checkout-page .product-pricing-grid { --product-pricing-gap: 16px; }
	body.product-checkout-page .product-pricing-card h3 { font-size: 22px; }
}

@media (max-width: 767px) {
	body.product-checkout-page .product-pricing-grid {
		max-width: 560px;
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
		margin: 0 auto;
	}

	body.product-checkout-page .product-pricing-card { padding: 32px; }
	.product-plan-summary { margin-top: 30px; margin-bottom: 30px; }
}

@media (max-width: 479px) {
	body.product-checkout-page .product-pricing-card { padding: 32px 20px; }
	.product-plan-emblem { width: 58px; height: 58px; flex-basis: 58px; }
	.product-plan-emblem svg { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
	body.product-checkout-page .product-pricing-card,
	body.product-checkout-page .product-pricing-card::before,
	body.product-checkout-page .product-purchase .product-plan-select,
	body.product-checkout-page .product-purchase .product-change-plan,
	body.single-product.product-checkout-page .custom-single-product .product-description-toggle {
		transition: none;
		transform: none;
	}
}