/*
 * Boga Jaya Commerce -- shared presentation layer.
 *
 * Covers two branded, hand-rolled templates that no longer restyle
 * WooCommerce's default markup: the product-detail page (.bjf-pdp,
 * templates/single-product-bjf.php) and the product-card component
 * shared with the catalog page (.bjf-product-card, catalog.css).
 * WooCommerce is used only as a data/commerce engine here -- product
 * fields, price, stock, and the add-to-cart form's own AJAX behavior.
 *
 * Palette: the site's own existing Blocksy theme palette (read live,
 * not invented), plus one deliberate restrained gold accent:
 *   --bjf-green        #55a630
 *   --bjf-green-dark   #438b22
 *   --bjf-green-deep   #213631
 *   --bjf-ink          #0f1a17
 *   --bjf-gold         #c6a15b  (badges/dividers/labels only, never a fill)
 */

:root {
	--bjf-gold: #c6a15b;
	--bjf-gold-soft: #f4ecdc;

	/*
	 * Shared commerce page-shell top clearance.
	 *
	 * This site's header runs in Blocksy's "transparent header" mode
	 * (body[data-header] carries --has-transparent-header:1), which
	 * takes the header out of normal document flow entirely --
	 * position:absolute before scroll, position:fixed once sticky (see
	 * wp-content/themes/blocksy/static/sass/frontend/5-modules/header/
	 * transparent-state.scss and sticky-state.scss). It never pushes
	 * page content down on its own, at any breakpoint or scroll state.
	 *
	 * Blocksy's own hero/page-title component already compensates for
	 * this, via the exact same formula reused here:
	 *   padding-top: calc(var(--has-transparent-header) * var(--header-height))
	 * (wp-content/themes/blocksy/static/sass/frontend/5-modules/
	 * page-title/type-2.scss). Every Boga Jaya commerce page
	 * intentionally disables that generic hero component (Phase 2),
	 * which also removed the only thing providing this compensation --
	 * this variable restores it in a shared, reusable place instead of
	 * a guessed pixel value on each page.
	 *
	 * --header-height/--has-transparent-header are set by Blocksy on
	 * <body>, so they're already inherited anywhere in this stylesheet;
	 * this only wraps them in the one formula every commerce page needs.
	 *
	 * UPDATE (Phase 3A visual fix): --has-transparent-header is actually
	 * a precompiled, site-wide constant (Blocksy emits it once for
	 * [data-header*="type-1"], matching every page that uses this
	 * header type) -- it reflects "this header has transparency
	 * configured," not "transparency is active on this specific page,"
	 * and it does NOT change on its own just because transparency is
	 * now disabled per-page for /cart/ and /e-commerce/ (via Blocksy's
	 * own 'blocksy:header:transparent:current-screen-allowed' filter,
	 * see boga-jaya-commerce-core.php). Left as-is, this variable would
	 * still resolve to the full header height and get double-counted on
	 * top of a header that now already, correctly, occupies that height
	 * in normal flow. It is explicitly zeroed for those two pages
	 * further down this file (body.bjf-header-normal-flow), so only the
	 * genuinely intentional breathing-room constant in
	 * .bjf-catalog/.bjf-cart remains. This variable stays correct and
	 * harmless as the general-purpose formula for any future page that
	 * doesn't disable transparency.
	 */
	--bjf-header-clearance: calc(var(--has-transparent-header, 0) * var(--header-height, 0px));
}

/*
 * Phase 3A visual fix -- sticky-header correction for /cart/ and
 * /e-commerce/. Blocksy's sticky mode has no equivalent per-screen
 * filter to transparency's, so its actual position is corrected here
 * directly (never compensated for): the sticky wrapper still renders
 * (the theme-wide sticky setting still exists), but on these two pages
 * it is forced back to normal in-flow positioning instead of the
 * position:fixed state that otherwise floats it over scrolled content.
 * Scoped to the stable "bjf-header-normal-flow" body class set
 * conditionally in boga-jaya-commerce-core.php -- every other page on
 * the site keeps its normal sticky header untouched.
 */
body.bjf-header-normal-flow [data-sticky] {
	position: static !important;
	top: auto !important;
}

/*
 * --has-transparent-header is a precompiled, site-wide CSS variable
 * (Blocksy emits it once for [data-header*="type-1"], which matches
 * every page using this header -- it reflects "this header type has
 * transparency configured," not "transparency is active on THIS
 * page"). It does NOT change just because the PHP-side
 * current-screen-allowed filter above disables the actual
 * data-transparent attribute/position:absolute for these two pages.
 * Left uncorrected, --bjf-header-clearance would still add the full
 * header height as padding on top of a header that now already,
 * correctly, occupies that height in normal flow -- doubling the gap.
 * Zeroed here, scoped to the same body class, so only the genuinely
 * intentional breathing-room constant in .bjf-catalog/.bjf-cart
 * remains.
 */
body.bjf-header-normal-flow {
	--bjf-header-clearance: 0px;
}

.bjf-pdp,
.bjf-catalog {
	--bjf-green: var(--theme-palette-color-1, #55a630);
	--bjf-green-dark: var(--theme-palette-color-2, #438b22);
	--bjf-green-deep: var(--theme-palette-color-3, #213631);
	--bjf-ink: var(--theme-palette-color-4, #0f1a17);
	--bjf-surface: var(--theme-palette-color-6, #F8FAFB);
}

/* ============================================================
   PRODUCT-DETAIL PAGE SHELL
   ============================================================ */

.bjf-pdp {
	max-width: 1240px;
	margin: 0 auto;
	padding: 28px 24px 72px;
}

.bjf-pdp__crumbs {
	font-size: 13px;
	color: var(--bjf-ink, #0f1a17);
	opacity: 0.7;
	margin-bottom: 22px;
}

.bjf-pdp__crumbs a {
	color: var(--bjf-green-deep, #213631);
	text-decoration: none;
	font-weight: 600;
	opacity: 1;
}

.bjf-pdp__crumbs a:hover {
	color: var(--bjf-green, #55a630);
}

.bjf-pdp__crumbs-sep {
	margin: 0 8px;
}

/* ============================================================
   HERO GRID
   ============================================================ */

.bjf-pdp__hero {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.72fr);
	gap: 36px;
	align-items: start;
}

@media (max-width: 1024px) {
	.bjf-pdp__hero {
		grid-template-columns: 1fr 1fr;
	}
	.bjf-pdp__panel {
		grid-column: 1 / -1;
	}
}

@media (max-width: 767px) {
	.bjf-pdp__hero {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.bjf-pdp__panel {
		display: none; /* decorative-only; dropped on mobile to keep focus on product info */
	}
}

/* ---------- Gallery ---------- */

.bjf-pdp__gallery .woocommerce-product-gallery,
.bjf-pdp__gallery .woocommerce-product-gallery img {
	border-radius: 18px;
	overflow: hidden;
}

/* ---------- Summary column ---------- */

.bjf-pdp__title {
	font-size: 30px;
	line-height: 1.2;
	margin: 0 0 10px;
	color: var(--bjf-ink, #0f1a17);
}

.bjf-pdp__price {
	font-size: 28px;
	font-weight: 700;
	color: var(--bjf-green-deep, #213631);
	margin: 0 0 12px;
}

.bjf-pdp__price .price {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.bjf-pdp__desc {
	font-size: 14px;
	line-height: 1.7;
	color: var(--bjf-ink, #0f1a17);
	opacity: 0.85;
	margin: 4px 0 18px;
}

.bjf-pdp__desc p {
	margin: 0 0 10px;
}

/* ---------- Decorative hero panel (3rd column) ---------- */

.bjf-pdp__panel {
	background: var(--bjf-green-deep, #213631);
	border-radius: 20px;
	min-height: 100%;
	display: flex;
	align-items: flex-end;
	padding: 28px 24px;
	position: relative;
	overflow: hidden;
}

.bjf-pdp__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(85, 166, 48, 0.35), transparent 60%);
}

.bjf-pdp__panel-inner {
	position: relative;
	z-index: 1;
}

.bjf-pdp__panel-quote {
	color: #ffffff;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 14px;
}

.bjf-pdp__panel-mark {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bjf-gold, #c6a15b);
	border-top: 1px solid rgba(198, 161, 91, 0.4);
	padding-top: 10px;
}

/* ============================================================
   BADGES / AVAILABILITY
   ============================================================ */

.bjf-product-badges {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.bjf-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
	line-height: 1;
}

.bjf-badge--retail {
	background: var(--bjf-green, #55a630);
	color: #ffffff;
}

.bjf-badge--inquiry {
	background: transparent;
	color: var(--bjf-green-deep, #213631);
	border: 1px solid var(--bjf-gold);
}

.bjf-badge--size {
	background: var(--theme-palette-color-5, #F0F2F3);
	color: var(--bjf-ink, #0f1a17);
	border: 1px solid rgba(15, 26, 23, 0.08);
}

.bjf-availability {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 18px;
}

.bjf-availability__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
}

.bjf-availability--in-stock {
	color: var(--bjf-green-dark, #438b22);
}
.bjf-availability--in-stock .bjf-availability__dot {
	background: var(--bjf-green, #55a630);
}

.bjf-availability--out-of-stock {
	color: #a33;
}
.bjf-availability--out-of-stock .bjf-availability__dot {
	background: #cc4444;
}

/* ============================================================
   USE-CASE CHIPS
   ============================================================ */

.bjf-use-cases {
	margin: 4px 0 18px;
}

.bjf-use-cases__label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bjf-green-deep, #213631);
	margin-bottom: 10px;
}

.bjf-use-cases__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bjf-use-cases__list li {
	font-size: 13px;
	background: var(--bjf-surface, #F8FAFB);
	border: 1px solid rgba(33, 54, 49, 0.1);
	color: var(--bjf-ink, #0f1a17);
	padding: 7px 14px;
	border-radius: 10px;
}

/* ============================================================
   CTA ROW (add to cart + buy now / inquiry buttons)
   ============================================================ */

.bjf-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	margin: 6px 0 20px;
}

.bjf-pdp .cart {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 !important;
}

/*
 * Themed through Blocksy's OWN supported CSS custom properties for its
 * "type-2" quantity stepper (wp-content/themes/blocksy/static/sass/
 * frontend/8-integrations/woocommerce/misc/quantity/{base,type-2}.scss),
 * not fought with a fixed width/height on the <input> alone.
 *
 * Root cause of the blank/broken PDP quantity control (same mechanism
 * previously found and fixed on the Cart page): that stepper positions
 * its +/- icons absolutely at percentage insets of the .quantity
 * WRAPPER, sized from --quantity-width/--quantity-height, and reserves
 * matching internal padding on the <input> from the same height value.
 * `width:64px` here was forced directly onto the <input> while the
 * wrapper was left at Blocksy's own 130px default -- the icons stayed
 * positioned against the unchanged 130px wrapper while the input's own
 * reserved padding (still calculated from the untouched
 * --quantity-height) consumed more than the shrunken input's actual
 * width, pushing the visible number out of the box and misaligning the
 * icons. Setting the same dimensions Blocksy expects via its own
 * variables keeps its icon-positioning math intact.
 */
.bjf-pdp .quantity {
	margin: 0 !important;
	--quantity-width: 128px;
	--quantity-height: 48px;
	--quantity-initial-color: var(--bjf-surface, #F8FAFB);
	--quantity-hover-color: var(--bjf-green, #55a630);
	--quantity-arrows-initial-color: var(--bjf-green-deep, #213631);
	--quantity-arrows-hover-color: #ffffff;
	--theme-form-field-border-radius: 10px;
	--theme-form-field-border-initial-color: rgba(15, 26, 23, 0.15);
}

.bjf-pdp .quantity .qty {
	font-weight: 700;
	color: var(--bjf-ink, #0f1a17);
}

.bjf-pdp .single_add_to_cart_button,
.bjf-buy-now,
.bjf-inquiry-cta.button {
	border-radius: 999px !important;
	padding: 14px 26px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	letter-spacing: 0.01em;
	line-height: 1 !important;
	border: none !important;
	white-space: nowrap;
	transition: background-color 0.2s ease, transform 0.15s ease, color 0.2s ease;
}

.bjf-pdp .single_add_to_cart_button {
	background: var(--bjf-green-deep, #213631) !important;
	color: #ffffff !important;
}

.bjf-pdp .single_add_to_cart_button:hover {
	background: var(--bjf-green, #55a630) !important;
	transform: translateY(-1px);
}

.bjf-buy-now {
	background: #ffffff !important;
	color: var(--bjf-green-deep, #213631) !important;
	border: 1.5px solid var(--bjf-green-deep, #213631) !important;
	display: inline-flex;
	align-items: center;
}

.bjf-buy-now:hover {
	background: var(--bjf-green-deep, #213631) !important;
	color: #ffffff !important;
}

.bjf-inquiry-cta--primary {
	background: var(--bjf-green-deep, #213631) !important;
	color: #ffffff !important;
}
.bjf-inquiry-cta--primary:hover {
	background: var(--bjf-green, #55a630) !important;
}

.bjf-inquiry-cta--secondary {
	background: #ffffff !important;
	color: var(--bjf-green-deep, #213631) !important;
	border: 1.5px solid rgba(33, 54, 49, 0.25) !important;
}
.bjf-inquiry-cta--secondary:hover {
	border-color: var(--bjf-green-deep, #213631) !important;
}

/* ============================================================
   TRUST ROW
   ============================================================ */

.bjf-trust-row {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 8px 0 4px;
	padding-top: 16px;
	border-top: 1px solid rgba(33, 54, 49, 0.08);
}

.bjf-trust-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--bjf-ink, #0f1a17);
}

.bjf-trust-item__icon {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--bjf-gold-soft);
	color: var(--bjf-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	line-height: 1;
}

/* ============================================================
   CUSTOM GRADE CONSULTATION BOX (inquiry products)
   ============================================================ */

.bjf-custom-grade-box {
	margin-top: 28px;
	padding: 18px 20px;
	border: 1px dashed var(--bjf-gold);
	border-radius: 14px;
	background: #ffffff;
}

.bjf-custom-grade-box__title {
	font-size: 15px;
	font-weight: 700;
	color: var(--bjf-green-deep, #213631);
	margin: 0 0 6px;
}

.bjf-custom-grade-box__text {
	font-size: 13px;
	color: var(--bjf-ink, #0f1a17);
	opacity: 0.85;
	margin: 0 0 14px;
}

.bjf-custom-grade-box a.bjf-inquiry-cta.button {
	background: transparent !important;
	color: var(--bjf-green-deep, #213631) !important;
	border: 1.5px solid var(--bjf-green-deep, #213631) !important;
	padding: 10px 22px !important;
}

.bjf-custom-grade-box a.bjf-inquiry-cta.button:hover {
	background: var(--bjf-green-deep, #213631) !important;
	color: #ffffff !important;
}

/* ============================================================
   FULL-WIDTH SUPPORTING SECTIONS (below hero)
   ============================================================ */

.bjf-sections {
	margin-top: 56px;
	padding-top: 44px;
	border-top: 1px solid rgba(33, 54, 49, 0.08);
}

.bjf-sections__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.bjf-section-card {
	background: var(--bjf-surface, #F8FAFB);
	border: 1px solid rgba(33, 54, 49, 0.07);
	border-radius: 18px;
	padding: 26px 24px;
}

.bjf-section-card__title {
	font-size: 17px;
	font-weight: 700;
	color: var(--bjf-green-deep, #213631);
	margin: 0 0 18px;
}

.bjf-section-card__text {
	font-size: 13px;
	color: var(--bjf-ink, #0f1a17);
	opacity: 0.85;
	line-height: 1.6;
	margin: 0 0 14px;
}

.bjf-usecase-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bjf-usecase-grid__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	color: var(--bjf-ink, #0f1a17);
	background: #ffffff;
	border-radius: 10px;
	padding: 10px 14px;
	border: 1px solid rgba(33, 54, 49, 0.06);
}

.bjf-usecase-grid__icon {
	color: var(--bjf-gold, #c6a15b);
	font-size: 8px;
}

.bjf-quality-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.bjf-quality-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: var(--bjf-ink, #0f1a17);
	line-height: 1.5;
}

.bjf-quality-list__icon {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--bjf-green, #55a630);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	margin-top: 1px;
}

.bjf-spec-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.bjf-spec-table th,
.bjf-spec-table td {
	text-align: left;
	padding: 9px 0;
	border-bottom: 1px solid rgba(33, 54, 49, 0.08);
}

.bjf-spec-table th {
	color: var(--bjf-ink, #0f1a17);
	opacity: 0.65;
	font-weight: 500;
	width: 55%;
}

.bjf-spec-table td {
	color: var(--bjf-green-deep, #213631);
	font-weight: 600;
	text-align: right;
}

.bjf-spec-mini {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bjf-spec-mini li {
	font-size: 13px;
	color: var(--bjf-ink, #0f1a17);
}

.bjf-spec-mini strong {
	color: var(--bjf-green-deep, #213631);
	margin-right: 6px;
}

@media (max-width: 1024px) {
	.bjf-sections__grid {
		grid-template-columns: 1fr 1fr;
	}
	.bjf-section-card:last-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 767px) {
	.bjf-sections__grid {
		grid-template-columns: 1fr;
	}
	.bjf-sections {
		margin-top: 36px;
		padding-top: 28px;
	}
}

/* ============================================================
   SHARED PRODUCT CARD (catalog grid + "Produk Lainnya")
   ============================================================ */

.bjf-product-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid rgba(33, 54, 49, 0.08);
	border-radius: 18px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.bjf-product-card:hover {
	box-shadow: 0 18px 34px -16px rgba(15, 26, 23, 0.28);
	transform: translateY(-2px);
	border-color: rgba(33, 54, 49, 0.16);
}

.bjf-product-card__image {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--bjf-surface, #F8FAFB);
}

.bjf-product-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bjf-product-card__body {
	display: flex;
	flex-direction: column;
	padding: 20px 20px 22px;
	gap: 6px;
}

.bjf-product-card__body .bjf-product-badges {
	margin-bottom: 6px;
}

.bjf-product-card__name {
	font-size: 16px;
	font-weight: 700;
	color: var(--bjf-ink, #0f1a17);
}

.bjf-product-card__price {
	font-size: 15px;
	font-weight: 700;
	color: var(--bjf-green-deep, #213631);
}

.bjf-product-card__blurb {
	font-size: 12.5px;
	color: var(--bjf-ink, #0f1a17);
	opacity: 0.65;
}

.bjf-product-card__cta {
	margin-top: 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--bjf-green, #55a630);
}

/* ============================================================
   "PRODUK LAINNYA" (product-detail page cross-links)
   ============================================================ */

.bjf-related {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid rgba(33, 54, 49, 0.08);
}

.bjf-related__title {
	font-size: 21px;
	color: var(--bjf-green-deep, #213631);
	margin: 0 0 22px;
}

.bjf-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

@media (max-width: 767px) {
	.bjf-related__grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 767px) {
	.bjf-pdp {
		padding: 20px 18px 56px;
	}
	.bjf-pdp__title {
		font-size: 24px;
	}
	.bjf-pdp__price {
		font-size: 22px;
	}
	.bjf-cta-row {
		flex-direction: column;
	}
	.bjf-pdp .cart {
		flex-wrap: wrap;
	}
	.bjf-trust-row {
		gap: 12px;
	}
}

/* ============================================================
   TECHNICAL COMPLETION TRACK -- shared TESTING banner + page shell
   (payment-test, tracking, thank-you). See
   docs/commerce/BJF_COMMERCE_V1_TECHNICAL_COMPLETION_MASTERPLAN.md
   section 7.2 -- every Test Mode surface must show this banner, never
   in fine print.
   ============================================================ */

.bjf-page-shell {
	--bjf-green: var(--theme-palette-color-1, #55a630);
	--bjf-green-dark: var(--theme-palette-color-2, #438b22);
	--bjf-green-deep: var(--theme-palette-color-3, #213631);
	--bjf-ink: var(--theme-palette-color-4, #0f1a17);
	--bjf-surface: var(--theme-palette-color-6, #F8FAFB);
	max-width: 900px;
	margin: 0 auto;
	padding: 28px 24px 72px;
	color: var(--bjf-ink, #0f1a17);
}

.bjf-test-banner {
	background: #fdecea;
	border: 2px solid #b3261e;
	color: #7a1712;
	padding: 12px 16px;
	font-weight: 600;
	border-radius: 6px;
	margin-bottom: 20px;
	font-size: 14px;
}

.bjf-thankyou {
	max-width: 640px;
	margin: 24px auto 0;
}

.bjf-thankyou__card {
	background: #fff;
	border: 1px solid rgba(33, 54, 49, 0.12);
	border-radius: 10px;
	padding: 28px 30px;
	box-shadow: 0 8px 24px rgba(15, 26, 23, 0.06);
}

.bjf-thankyou__title {
	font-size: 22px;
	margin: 0 0 4px;
	color: var(--bjf-green-deep, #213631);
}

.bjf-thankyou__order-number {
	font-size: 15px;
	font-weight: 700;
	color: var(--bjf-ink, #0f1a17);
	margin: 0 0 18px;
}

.bjf-thankyou__summary {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 16px;
	background: var(--bjf-surface, #F8FAFB);
	border-radius: 8px;
	padding: 18px 20px;
	margin: 0 0 20px;
}

.bjf-thankyou__summary dt {
	color: var(--bjf-green-deep, #213631);
	font-weight: 600;
}

.bjf-thankyou__summary dd {
	margin: 0;
}

.bjf-thankyou__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 14px;
}

.bjf-thankyou__testing-tag {
	background: #b3261e;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 3px;
	vertical-align: middle;
}

.bjf-thankyou__invoice-status {
	color: #6b6b6b;
	font-size: 13px;
}