.bx3-surecart-surface {
	--bx3-gold: #c9a120;
	--bx3-gold-light: #f0d36a;
	--bx3-cream: #f8f3e7;
	--bx3-charcoal: #121210;
	--bx3-black: #060606;
	min-height: 100vh;
	color: var( --bx3-cream );
	background-color: var( --bx3-black ) !important;
	background-image:
		radial-gradient( circle at 80% 8%, rgba( 201, 161, 32, 0.13 ), transparent 27rem ),
		radial-gradient( circle at 12% 88%, rgba( 102, 20, 26, 0.16 ), transparent 32rem ),
		repeating-linear-gradient( 92deg, rgba( 255, 255, 255, 0.012 ) 0, rgba( 255, 255, 255, 0.012 ) 1px, transparent 1px, transparent 5px ) !important;
	background-attachment: fixed !important;
	--sc-card-background-color: #11110f;
	--sc-card-border-color: #4d4227;
	--sc-choice-background-color: #141411;
	--sc-choice-text-color: #f8f3e7;
	--sc-input-color: #f8f3e7;
	--sc-input-label-color: #f8f3e7;
	--sc-menu-item-color: #eee7d7;
	--sc-tab-active-background: #282419;
	--sc-tab-active-color: #f3d778;
}

/* Keep WordPress's outer checkout canvas aligned with the dark component. */
html:has( body.bx3-surecart-checkout ) {
	background: #060606 !important;
}

/*
 * SureCart may sit inside an Elementor/page-template wrapper with its own white
 * background. JavaScript marks the complete ancestor chain from the checkout
 * host to the body so that wrapper cannot leave a white canvas around the dark
 * form. Keep the texture subtle so the payment controls remain easy to read.
 */
body.bx3-surecart-checkout {
	background-color: #060606 !important;
	background-image:
		radial-gradient( circle at 82% 10%, rgba( 201, 161, 32, 0.09 ), transparent 28rem ),
		radial-gradient( circle at 10% 86%, rgba( 102, 20, 26, 0.12 ), transparent 32rem ),
		repeating-linear-gradient( 92deg, rgba( 255, 255, 255, 0.01 ) 0, rgba( 255, 255, 255, 0.01 ) 1px, transparent 1px, transparent 5px ) !important;
}

/* SureCart adds 60px of top padding to the customer/payment column in its
 * desktop two-column checkout. Remove that padding so both columns begin on
 * the same line. The script applies this class only to the detected left
 * column, so stacked mobile checkout spacing remains native. */
@media ( min-width: 900px ) {
	body.bx3-surecart-checkout .wp-block-surecart-column.is-horizontally-aligned-right {
		padding-top: 0 !important;
	}

	body.bx3-surecart-checkout .bx3-checkout-left-column {
		padding-top: 0 !important;
	}
}

body.bx3-surecart-checkout .bx3-checkout-canvas {
	background-color: #060606 !important;
}

.bx3-checkout-brand {
	position: relative;
	z-index: 2;
	display: flex;
	grid-column: 1 / -1;
	width: min( 100% - 36px, 1306px );
	margin: 34px auto 18px;
	box-sizing: border-box;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.bx3-checkout-brand::after {
	width: min( 420px, 70vw );
	height: 1px;
	margin-top: 13px;
	background: linear-gradient( 90deg, transparent, rgba( 201, 161, 32, 0.78 ), transparent );
	content: '';
}

.bx3-checkout-brand__logo {
	display: block;
	width: clamp( 150px, 12vw, 200px );
	height: auto;
	filter: drop-shadow( 0 8px 18px rgba( 0, 0, 0, 0.72 ) );
}

.bx3-checkout-brand__title {
	margin: 9px 0 0 !important;
	color: #d8bd60 !important;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/* Large white checkout layers are identified at runtime, including layers
 * rendered inside SureCart's protected checkout component. */
body.bx3-surecart-checkout .bx3-checkout-light-layer {
	background-color: #060606 !important;
	background-image:
		radial-gradient( circle at 82% 10%, rgba( 201, 161, 32, 0.09 ), transparent 28rem ),
		radial-gradient( circle at 10% 86%, rgba( 102, 20, 26, 0.12 ), transparent 32rem ) !important;
}

body.bx3-surecart-checkout,
body.bx3-surecart-checkout :where( .wp-site-blocks, main, article, .entry-content, .site-content, .content-area ) {
	background-color: transparent !important;
}

body.bx3-surecart-checkout :where( .wp-block-surecart-checkout, sc-checkout, sc-checkout-form, [data-sc-checkout] ) {
	display: block;
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	color: #f8f3e7;
	background: transparent !important;
}

body.bx3-surecart-checkout {
	--sc-input-label-color: #f8f3e7;
	--sc-input-help-text-color: #d5cdbd;
	--sc-input-control-color: #f8f3e7;
	--sc-line-item-title-color: #f8f3e7;
	--sc-order-summary-color: #f8f3e7;
	--sc-order-confirmation-color: #f8f3e7;
	--sc-stacked-list-row-text-color: #f8f3e7;
}

.bx3-surecart-surface :where( h1, h2, h3, h4, h5, h6, p, label, legend ) {
	color: inherit;
}

.bx3-surecart-surface :where( sc-checkout, sc-checkout-form, sc-customer-dashboard ) {
	--sc-color-primary-500: #c9a120;
	--sc-color-primary-600: #aa8212;
	--sc-color-gray-50: #f8f3e7;
	--sc-color-gray-100: #e8e0cc;
	--sc-color-gray-700: #302f2b;
	--sc-color-gray-800: #1d1c1a;
	--sc-color-gray-900: #0d0d0c;
	--sc-input-background-color: #11110f;
	--sc-input-color: #f8f3e7;
	--sc-input-border-color: #5c5238;
	--sc-input-border-color-focus: #c9a120;
}

.bx3-surecart-dashboard :where( main, aside, nav, section, article, header, footer, [class*="dashboard"], [class*="sidebar"] ) {
	border-color: rgba( 201, 161, 32, 0.22 );
}

.bx3-surecart-dashboard :where( aside, [class*="sidebar"] ) {
	color: #eee7d7 !important;
	background: #090909 !important;
}

/*
 * SureCart can render the dashboard menu inside a component whose generated
 * class name does not include "sidebar". The script identifies that menu by
 * its five stable account labels and applies this class to the smallest shared
 * wrapper. This keeps the contrast fix scoped to the left navigation only.
 */
.bx3-surecart-dashboard .bx3-sidebar-shell {
	color: #f8f3e7 !important;
	background: linear-gradient( 180deg, #11110f 0%, #080808 100% ) !important;
	border-right: 1px solid rgba( 201, 161, 32, 0.38 ) !important;
	box-shadow: 12px 0 34px rgba( 0, 0, 0, 0.34 ) !important;
}

.bx3-surecart-dashboard .bx3-sidebar-shell :where( a, button, span, p, div, small, strong, svg ) {
	color: #f8f3e7 !important;
}

.bx3-surecart-dashboard .bx3-sidebar-shell :where( svg, path ) {
	stroke: currentColor !important;
}

.bx3-surecart-dashboard .bx3-sidebar-item {
	color: #f8f3e7 !important;
	background: transparent !important;
	border: 1px solid transparent !important;
}

.bx3-surecart-dashboard .bx3-sidebar-item:hover,
.bx3-surecart-dashboard .bx3-sidebar-item:focus-visible {
	color: #f3d778 !important;
	background: #211d12 !important;
	border-color: rgba( 201, 161, 32, 0.48 ) !important;
}

.bx3-surecart-dashboard .bx3-sidebar-item[aria-current="page"],
.bx3-surecart-dashboard .bx3-sidebar-item[aria-selected="true"],
.bx3-surecart-dashboard .bx3-sidebar-item--active {
	color: #f6d85f !important;
	background: linear-gradient( 90deg, #332a0f, #1c190f ) !important;
	border-color: #9e7d18 !important;
	box-shadow: inset 4px 0 0 #d4aa20 !important;
}

.bx3-surecart-dashboard .bx3-sidebar-item :where( span, div, svg ) {
	color: inherit !important;
}

.bx3-surecart-dashboard .bx3-status--active {
	color: #edfff1 !important;
	background: #176b31 !important;
	border-color: #46c76b !important;
	box-shadow: 0 0 0 1px rgba( 70, 199, 107, 0.18 ), 0 0 12px rgba( 70, 199, 107, 0.22 ) !important;
}

.bx3-surecart-dashboard .bx3-status--inactive {
	color: #fff2f2 !important;
	background: #8b1f28 !important;
	border-color: #ef6570 !important;
	box-shadow: 0 0 0 1px rgba( 239, 101, 112, 0.16 ), 0 0 12px rgba( 239, 101, 112, 0.2 ) !important;
}

/* Subscription rows may render in the document rather than SureCart's shadow
 * component. Keep the BX3 hover treatment identical in either location. */
.bx3-surecart-dashboard .bx3-plan-row {
	position: relative !important;
	transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}

.bx3-surecart-dashboard .bx3-plan-row:hover,
.bx3-surecart-dashboard .bx3-plan-row:focus-within {
	color: #fff4c7 !important;
	background: linear-gradient( 90deg, #5a4510 0%, #33290f 54%, #1b190f 100% ) !important;
	border-color: #d2aa22 !important;
	box-shadow: inset 4px 0 0 #e0b72d, 0 0 18px rgba( 201, 161, 32, 0.18 ) !important;
}

.bx3-surecart-dashboard .bx3-plan-row:hover :where( h1, h2, h3, h4, h5, h6, p, small, strong ),
.bx3-surecart-dashboard .bx3-plan-row:focus-within :where( h1, h2, h3, h4, h5, h6, p, small, strong ) {
	color: #fff4c7 !important;
}

.bx3-surecart-dashboard .bx3-plan-row:hover .bx3-plan-row__action,
.bx3-surecart-dashboard .bx3-plan-row:focus-within .bx3-plan-row__action,
.bx3-surecart-dashboard .bx3-plan-row--active:hover::after,
.bx3-surecart-dashboard .bx3-plan-row--active:focus-within::after {
	color: #ffe178 !important;
}

.bx3-surecart-dashboard .bx3-order-row {
	transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}

.bx3-surecart-dashboard .bx3-order-row:hover,
.bx3-surecart-dashboard .bx3-order-row:focus-within {
	color: #fff4c7 !important;
	background: linear-gradient( 90deg, #5a4510 0%, #33290f 54%, #1b190f 100% ) !important;
	border-color: #d2aa22 !important;
	box-shadow: inset 4px 0 0 #e0b72d, 0 0 18px rgba( 201, 161, 32, 0.18 ) !important;
}

@media ( max-width: 600px ) {
	.bx3-surecart-dashboard .bx3-plan-row {
		padding-right: 108px !important;
	}

	.bx3-surecart-dashboard .bx3-plan-row__action {
		right: 36px;
		font-size: 10px;
	}

	.bx3-surecart-dashboard .bx3-plan-row--active::after {
		right: 36px;
		font-size: 10px;
	}
}

.bx3-surecart-dashboard :where( [class*="content"], [class*="main"] ) {
	color: #eee7d7;
	background-color: transparent !important;
}

.bx3-surecart-dashboard :where( input, select, textarea ) {
	color-scheme: dark;
}

.bx3-surecart-dashboard .bx3-dashboard-navigation {
	border-color: rgba( 240, 211, 106, 0.48 );
	box-shadow: 0 13px 38px rgba( 0, 0, 0, 0.5 ), 0 0 20px rgba( 201, 161, 32, 0.1 );
}

.bx3-dashboard-navigation {
	position: fixed;
	top: 18px;
	right: 24px;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border: 1px solid rgba( 201, 161, 32, 0.38 );
	border-radius: 12px;
	background: rgba( 12, 12, 12, 0.94 );
	box-shadow: 0 10px 28px rgba( 0, 0, 0, 0.24 );
	backdrop-filter: blur( 8px );
}

.bx3-dashboard-navigation__button {
	display: inline-flex;
	min-height: 42px;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 10px 17px;
	border: 1px solid #c9a120;
	border-radius: 7px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.bx3-dashboard-navigation__button--primary {
	color: #101010 !important;
	background: #c9a120;
}

.bx3-dashboard-navigation__button--secondary {
	color: #f3d778 !important;
	background: #161616;
}

.bx3-dashboard-navigation__button:hover,
.bx3-dashboard-navigation__button:focus-visible {
	color: #ffffff !important;
	background: #000000;
	box-shadow: 0 0 0 2px rgba( 201, 161, 32, 0.22 ), 0 0 16px rgba( 201, 161, 32, 0.36 );
	transform: translateY( -1px );
}

.bx3-dashboard-navigation__button:focus-visible {
	outline: 2px solid #f3d778;
	outline-offset: 2px;
}

.bx3-empty-pack-link {
	display: block;
	width: fit-content;
	margin-top: 12px;
	color: #d2aa22 !important;
	font-weight: 800;
	line-height: 1.35;
	text-decoration: underline !important;
	text-decoration-thickness: 1px !important;
	text-underline-offset: 4px;
	transition: color 160ms ease, text-shadow 160ms ease;
}

.bx3-empty-pack-link:hover,
.bx3-empty-pack-link:focus-visible {
	color: #ffffff !important;
	text-shadow: 0 0 12px rgba( 201, 161, 32, 0.55 );
}

.bx3-empty-pack-link:focus-visible {
	outline: 2px solid #d2aa22;
	outline-offset: 4px;
}

.bx3-membership-button--hidden {
	display: none !important;
}

.bx3-membership-button--current {
	cursor: default !important;
	pointer-events: none !important;
	filter: saturate( 0.65 );
	opacity: 0.78;
}

@media ( max-width: 760px ) {
	.bx3-checkout-brand {
		width: calc( 100% - 28px );
		margin-top: 22px;
		margin-bottom: 12px;
	}

	.bx3-checkout-brand__logo {
		width: 150px;
	}

	.bx3-checkout-brand__title {
		font-size: 10px;
		letter-spacing: 0.16em;
	}

	.bx3-surecart-surface {
		background-image:
			radial-gradient( circle at 88% 4%, rgba( 201, 161, 32, 0.12 ), transparent 20rem ),
			repeating-linear-gradient( 92deg, rgba( 255, 255, 255, 0.012 ) 0, rgba( 255, 255, 255, 0.012 ) 1px, transparent 1px, transparent 5px ) !important;
	}

	.bx3-dashboard-navigation {
		top: 10px;
		left: 10px;
		right: 10px;
		gap: 7px;
		padding: 7px;
	}

	.bx3-dashboard-navigation__button {
		flex: 1 1 50%;
		min-width: 0;
		padding: 9px 8px;
		font-size: 12px;
	}
}

@media ( max-width: 1100px ) {
	body.bx3-surecart-checkout :where( .wp-block-surecart-checkout, sc-checkout, sc-checkout-form, [data-sc-checkout] ) {
		max-width: 920px;
		padding-inline: 18px;
		box-sizing: border-box;
	}
}