/*
 * Impact basket, checkout and order-confirmed screens.
 *
 * Everything is scoped under .impact-cc (plus the drawer root), so BeTheme's
 * own header and footer are untouched.
 *
 * The !important declarations are not laziness. This markup renders inside
 * BeTheme's #Content, and the theme's ID-prefixed and bare-element rules
 * (input width/margin, button padding/gap, a global h3 font-size, a:hover
 * colour) tie or beat plain class selectors. Without them the layout is right
 * in isolation and wrong on the live site.
 */

.impact-cc {
	--ic-red: #C00000;
	--ic-red2: #D20000;
	--ic-orange: #C84A1C;
	--ic-warm: #FFB020;
	--ic-teal: #2B6475;
	--ic-deep: #173642;
	--ic-night: #0B1A21;
	--ic-green: #2AA000;
	--ic-slate: #3D4752;
	--ic-bg: #FCFCFC;
	--ic-line: #EDE9E2;
	--ic-line2: #F2EEE8;
	--ic-field: #E4DED4;
	--ic-muted: #6B7480;
	--ic-faint: #8A8F97;
	--ic-sand: #F4F1EB;
	--ic-grad-product: linear-gradient(135deg, #C00000, #D20000 35%, #C84A1C 70%, #FFB020);
	--ic-grad-service: linear-gradient(135deg, #2B6475, #24596A 55%, #173642);

	/* The design is drawn on a 1440px frame, but the live site's own container
	   (BeTheme's .section_wrapper) is 1220px, so that is the width used here —
	   it lines the basket up with the header navigation and the footer instead
	   of overhanging them. Rather than a wrapper element per row, every padded
	   row grows its own side padding until the content is centred, which keeps
	   the dark promise strip full-bleed while its text still lines up with
	   everything else. */
	--ic-content: 1220px;
	--ic-gutter: 64px;
	--ic-pad: max(var(--ic-gutter), calc((100% - var(--ic-content)) / 2));

	font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--ic-slate);
	background: var(--ic-bg);
}

.impact-cc *,
.impact-cc *::before,
.impact-cc *::after {
	box-sizing: border-box;
}

.impact-cc .mono {
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.impact-cc a {
	color: var(--ic-teal);
	text-decoration: none;
}

.impact-cc a:hover {
	color: var(--ic-red) !important;
}

.impact-cc h1,
.impact-cc h2,
.impact-cc h3,
.impact-cc h4 {
	margin: 0;
	color: var(--ic-slate);
	letter-spacing: -0.015em;
}

.impact-cc p {
	margin: 0;
}

.impact-cc svg.i {
	stroke: currentColor;
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	display: block;
	width: 16px;
	height: 16px;
	overflow: visible;
	flex: 0 0 auto;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.impact-cc .btn,
.impact-drawer-root .btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px !important;
	font-family: inherit;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.2;
	border-radius: 6px;
	padding: 12px 22px !important;
	margin: 0 !important;
	cursor: pointer;
	border: none;
	box-shadow: none;
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
	transition: background .15s, color .15s, box-shadow .15s;
}

.impact-cc .btn svg.i,
.impact-drawer-root .btn svg.i {
	width: 15px;
	height: 15px;
}

.impact-cc .btn-red,
.impact-drawer-root .btn-red {
	background: var(--ic-red) !important;
	color: #fff !important;
}

.impact-cc .btn-red:hover,
.impact-drawer-root .btn-red:hover {
	background: var(--ic-red2) !important;
	color: #fff !important;
}

.impact-cc .btn-teal {
	background: transparent !important;
	color: var(--ic-deep) !important;
	box-shadow: inset 0 0 0 1.5px var(--ic-deep) !important;
}

.impact-cc .btn-teal:hover {
	background: var(--ic-deep) !important;
	color: #fff !important;
}

.impact-cc .btn-line,
.impact-drawer-root .btn-line {
	background: #fff !important;
	color: var(--ic-slate) !important;
	box-shadow: inset 0 0 0 1px var(--ic-field) !important;
}

.impact-cc .btn-line:hover,
.impact-drawer-root .btn-line:hover {
	background: #F7F5F1 !important;
	color: var(--ic-slate) !important;
}

.impact-cc .btn-white {
	background: #fff !important;
	color: var(--ic-slate) !important;
}

.impact-cc .btn-white:hover {
	background: var(--ic-sand) !important;
	color: var(--ic-slate) !important;
}

.impact-cc .btn.is-busy {
	opacity: .6;
	pointer-events: none;
}

.impact-cc .btn.is-done {
	background: var(--ic-green) !important;
	color: #fff !important;
	box-shadow: none !important;
}

/* ------------------------------------------------------------------ */
/* Small shared pieces                                                 */
/* ------------------------------------------------------------------ */

.impact-cc .tab {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 4px;
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.4;
}

.impact-cc .tab-shop { background: var(--ic-grad-product); }
.impact-cc .tab-deep { background: var(--ic-deep); }
.impact-cc .tab-green { background: var(--ic-green); }
.impact-cc .tab-ghost { background: rgba(255, 255, 255, .18); }

.impact-cc .rule {
	width: 26px;
	height: 2px;
	background: var(--ic-red);
}

/* Packshots: contained, never cropped — the whole product stays in frame. */
.impact-cc .impact-packshot,
.impact-drawer-root .impact-packshot {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	overflow: hidden;
	padding: 4px;
}

.impact-cc .impact-packshot__img,
.impact-drawer-root .impact-packshot__img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain !important;
	object-position: center;
	display: block;
	margin: 0 !important;
	border-radius: 0;
}

.impact-cc .impact-packshot__empty,
.impact-drawer-root .impact-packshot__empty {
	color: #C9C2B6;
}

.impact-cc .impact-packshot__empty svg.i {
	width: 40%;
	height: 40%;
}

/* ------------------------------------------------------------------ */
/* Page shell                                                          */
/* ------------------------------------------------------------------ */

.impact-cc .dstrip {
	background: var(--ic-deep);
	color: rgba(255, 255, 255, .9);
	display: flex;
	gap: 34px;
	padding: 12px var(--ic-pad);
	font-size: 13.5px;
	flex-wrap: wrap;
}

.impact-cc .dstrip span {
	display: flex;
	gap: 9px;
	align-items: center;
}

.impact-cc .dstrip svg.i {
	color: rgba(255, 255, 255, .6);
}

.impact-cc .crumbs {
	display: flex;
	gap: 9px;
	align-items: center;
	flex-wrap: wrap;
	font-size: 12.5px;
	color: var(--ic-faint);
	padding: 18px var(--ic-pad) 0;
}

.impact-cc .crumbs a {
	color: var(--ic-faint);
}

.impact-cc .phead {
	padding: 14px var(--ic-pad) 22px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
}

.impact-cc .phead h1 {
	font-size: 31px !important;
	font-weight: 600;
	line-height: 1.15;
}

.impact-cc .phead .lft {
	display: flex;
	flex-direction: column;
	gap: 9px;
	align-items: flex-start;
}

.impact-cc .phead .cnt {
	font-size: 14px;
	color: var(--ic-muted);
}

.impact-cc .impact-cc-notices:empty {
	display: none;
}

.impact-cc .impact-cc-notices {
	padding: 0 var(--ic-pad);
}

.impact-cc .wrap,
.impact-cc .cowrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 372px;
	gap: 26px;
	padding: 0 var(--ic-pad) 44px;
	align-items: start;
}

/* An empty basket has no summary column, so the grid must not keep reserving
   372px for it — that is what pulled the whole page off to the left. */
.impact-cc .wrap--single,
.impact-cc .wrap:not(:has(.impact-cc-aside)),
.impact-cc .cowrap:not(:has(.impact-cc-aside)) {
	grid-template-columns: minmax(0, 1fr);
}

.impact-cc .impact-cc-main,
.impact-cc .steps,
.impact-cc .impact-cc-aside {
	min-width: 0;
}

.impact-cc .card {
	background: #fff;
	border: 1px solid var(--ic-line);
	border-radius: 8px;
}

.impact-cc .impact-cc-feedback {
	font-size: 13.5px;
	color: var(--ic-muted);
	margin-top: 12px !important;
}

.impact-cc .impact-cc-feedback:empty {
	display: none;
}

.impact-cc .impact-cc-feedback.is-bad {
	color: var(--ic-red);
}

/* ------------------------------------------------------------------ */
/* Free-delivery bar                                                   */
/* ------------------------------------------------------------------ */

.impact-cc .freebar,
.impact-drawer-root .freebar {
	background: #fff;
	border: 1px solid var(--ic-line);
	border-radius: 8px;
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}

.impact-cc .freebar .t,
.impact-drawer-root .freebar .t {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-size: 13.5px;
	flex-wrap: wrap;
}

.impact-cc .freebar .t b {
	font-weight: 600;
	color: var(--ic-slate);
}

.impact-cc .freebar .t span {
	color: var(--ic-muted);
}

.impact-cc .track,
.impact-drawer-root .track {
	height: 6px;
	border-radius: 99px;
	background: #F0ECE5;
	overflow: hidden;
}

.impact-cc .track i,
.impact-drawer-root .track i {
	display: block;
	height: 100%;
	background: var(--ic-grad-product);
	transition: width .3s;
}

.impact-cc .freebar.done .track i,
.impact-drawer-root .freebar.done .track i {
	background: var(--ic-green);
}

/* ------------------------------------------------------------------ */
/* Basket lines                                                        */
/* ------------------------------------------------------------------ */

.impact-cc .lines {
	display: flex;
	flex-direction: column;
}

.impact-cc .lhead,
.impact-cc .line {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 128px 108px 36px;
	gap: 14px;
	align-items: center;
}

.impact-cc .lhead {
	padding: 14px 20px;
	border-bottom: 1px solid var(--ic-line);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ic-faint);
	font-weight: 500;
}

.impact-cc .lhead span:nth-child(2) { text-align: center; }
.impact-cc .lhead span:nth-child(3) { text-align: right; }

.impact-cc .line {
	padding: 18px 20px;
	border-bottom: 1px solid var(--ic-line2);
	position: relative;
}

.impact-cc .line:last-child {
	border-bottom: none;
}

.impact-cc .line.is-busy {
	opacity: .5;
	pointer-events: none;
}

.impact-cc .line .prod {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	min-width: 0;
}

.impact-cc .line .im {
	width: 72px;
	height: 72px;
	border-radius: 6px;
	overflow: hidden;
	flex: 0 0 auto;
	background: #fff;
	border: 1px solid var(--ic-line2);
	display: block;
}

.impact-cc .line .tx {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.impact-cc .line .sku,
.impact-cc .pcard .sku,
.impact-drawer-root .dline .sku {
	font-size: 10.5px;
	color: #9A9184;
	letter-spacing: .04em;
}

.impact-cc .line h3 {
	font-size: 15px !important;
	font-weight: 600;
	line-height: 1.3;
}

.impact-cc .line h3 a {
	color: var(--ic-slate);
}

.impact-cc .line .meta {
	font-size: 12.5px;
	color: var(--ic-muted);
}

.impact-cc .line .itemmeta,
.impact-cc .line .itemmeta p {
	font-size: 12px;
	color: var(--ic-faint);
}

.impact-cc .line .badges {
	display: flex;
	gap: 6px;
	margin-top: 4px;
}

.impact-cc .line .badges .tab {
	font-size: 9.5px;
	padding: 3px 8px;
}

.impact-cc .line .stock {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--ic-green);
	margin-top: 3px;
}

.impact-cc .line .stock i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	display: block;
	flex: 0 0 auto;
}

.impact-cc .line .stock--out {
	color: var(--ic-orange);
}

.impact-cc .qty,
.impact-drawer-root .qty {
	display: flex;
	align-items: center;
	justify-self: center;
	border: 1px solid var(--ic-field);
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	width: max-content;
}

.impact-cc .qty button,
.impact-drawer-root .qty button {
	width: 34px !important;
	height: 38px !important;
	min-width: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	background: #fff !important;
	color: var(--ic-slate) !important;
	font-family: inherit;
	font-size: 16px !important;
	line-height: 1 !important;
	cursor: pointer;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
}

.impact-cc .qty button:hover,
.impact-drawer-root .qty button:hover {
	background: var(--ic-sand) !important;
	color: var(--ic-red) !important;
}

.impact-cc .qty input,
.impact-drawer-root .qty input {
	width: 46px !important;
	height: 38px !important;
	border: none !important;
	border-left: 1px solid #F0ECE5 !important;
	border-right: 1px solid #F0ECE5 !important;
	border-radius: 0 !important;
	text-align: center;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 14.5px !important;
	line-height: normal !important;
	color: var(--ic-slate);
	outline: none;
	padding: 0 !important;
	margin: 0 !important;
	background: #fff !important;
	box-shadow: none !important;
	-moz-appearance: textfield;
	appearance: textfield;
}

.impact-cc .qty input::-webkit-outer-spin-button,
.impact-cc .qty input::-webkit-inner-spin-button,
.impact-drawer-root .qty input::-webkit-outer-spin-button,
.impact-drawer-root .qty input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.impact-cc .line .money {
	text-align: right;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.impact-cc .line .money b {
	font-size: 16px;
	font-weight: 600;
}

.impact-cc .line .money span {
	font-size: 11.5px;
	color: var(--ic-faint);
}

.impact-cc .rm {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	border: none;
	background: transparent;
	color: #B9B2A6;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	justify-self: end;
	padding: 0;
}

.impact-cc .rm:hover {
	background: #FBEFEF;
	color: var(--ic-red) !important;
}

.impact-cc .rm svg.i {
	width: 15px;
	height: 15px;
}

.impact-cc .lfoot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border-top: 1px solid var(--ic-line);
	background: #FBFAF8;
	border-radius: 0 0 8px 8px;
	flex-wrap: wrap;
}

.impact-cc .lfoot .acts {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.impact-cc .lfoot .btn {
	padding: 10px 15px !important;
	font-size: 13.5px;
}

.impact-cc .empty {
	padding: 40px 20px;
	text-align: center;
	color: var(--ic-muted);
	font-size: 14.5px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center;
}

.impact-cc .empty b {
	font-size: 17px;
	color: var(--ic-slate);
}

.impact-cc .empty p {
	max-width: 46ch;
	line-height: 1.6;
}

/* ------------------------------------------------------------------ */
/* Summary card                                                        */
/* ------------------------------------------------------------------ */

.impact-cc .sum {
	display: flex;
	flex-direction: column;
	gap: 0;
	overflow: hidden;
}

.impact-cc .sum .in {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	border-bottom: 1px solid var(--ic-line);
}

.impact-cc .sum .in:last-child {
	border-bottom: none;
}

.impact-cc .sum h3 {
	font-size: 17px !important;
	font-weight: 600;
}

.impact-cc .srow {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	color: #5D6570;
	align-items: baseline;
}

.impact-cc .srow b,
.impact-cc .srow .amount {
	font-weight: 500;
	color: var(--ic-slate);
	font-family: 'IBM Plex Mono', monospace;
	white-space: nowrap;
}

.impact-cc .srow.disc,
.impact-cc .srow.disc b {
	color: var(--ic-green);
}

.impact-cc .impact-coupon-remove {
	border: none;
	background: transparent;
	color: var(--ic-faint);
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	padding: 0 0 0 4px !important;
	margin: 0 !important;
	box-shadow: none !important;
}

.impact-cc .impact-coupon-remove:hover {
	color: var(--ic-red) !important;
	background: transparent !important;
}

.impact-cc .stot {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--ic-line);
}

.impact-cc .stot > span {
	font-size: 14.5px;
	font-weight: 600;
}

.impact-cc .stot b,
.impact-cc .stot .amount {
	font-size: 24px;
	font-weight: 600;
	font-family: 'IBM Plex Mono', monospace;
	letter-spacing: -.02em;
	white-space: nowrap;
}

.impact-cc .stot > div {
	text-align: right;
}

.impact-cc .stot em {
	display: block;
	font-size: 11.5px;
	color: var(--ic-faint);
	font-style: normal;
	text-align: right;
	font-weight: 400;
}

.impact-cc .selrow {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.impact-cc .selrow > label {
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ic-faint);
	margin: 0 !important;
}

.impact-cc .sel {
	border: 1px solid var(--ic-field);
	border-radius: 6px;
	padding: 3px 13px;
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
}

.impact-cc .sel select {
	flex: 1;
	min-width: 0;
	border: none !important;
	outline: none;
	font-family: inherit;
	font-size: 14px !important;
	color: var(--ic-slate);
	background: transparent !important;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	width: 100% !important;
	height: 42px !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	line-height: normal !important;
}

.impact-cc .sel svg.i {
	width: 14px;
	height: 14px;
	color: #A9A49B;
}

.impact-cc .sel--static {
	padding: 12px 13px;
	background: #FBFAF8;
	font-size: 14px;
}

.impact-cc .impact-ship-row + .impact-ship-row {
	margin-top: 10px;
}

.impact-cc .impact-ship-pkg {
	font-size: 11.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ic-faint);
	margin-bottom: 6px !important;
}

.impact-cc .impact-ship-none,
.impact-cc .impact-ship-items {
	font-size: 13px;
	color: var(--ic-muted);
	line-height: 1.55;
}

.impact-cc .promo {
	display: flex;
	gap: 8px;
}

.impact-cc .promo .fld {
	flex: 1;
	min-width: 0;
	border: 1px solid var(--ic-field);
	border-radius: 6px;
	padding: 0 13px;
	display: flex;
	align-items: center;
	background: #fff;
}

.impact-cc .promo input {
	border: none !important;
	outline: none;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 13.5px !important;
	width: 100% !important;
	height: 42px !important;
	text-transform: uppercase;
	color: var(--ic-slate);
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	line-height: normal !important;
}

.impact-cc .promo input::placeholder {
	color: #A9A49B;
	text-transform: none;
	font-family: 'IBM Plex Sans', sans-serif;
}

.impact-cc .promo .btn {
	padding: 11px 16px !important;
	font-size: 13.5px;
	white-space: nowrap;
}

.impact-cc .pmsg {
	font-size: 12.5px;
	color: var(--ic-green);
	display: none;
	align-items: center;
	gap: 6px;
}

.impact-cc .pmsg.is-bad {
	color: var(--ic-red);
}

.impact-cc .pmsg.is-shown {
	display: flex;
}

.impact-cc .impact-cc-cta {
	gap: 10px;
}

.impact-cc .impact-cc-cta .btn {
	width: 100%;
}

.impact-cc .impact-checkout-cta {
	padding: 14px 22px !important;
}

.impact-cc .paylogos {
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 14px 20px;
	flex-wrap: wrap;
	border-top: 1px solid var(--ic-line);
}

.impact-cc .paylogos span {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10.5px;
	color: var(--ic-faint);
	border: 1px solid var(--ic-line);
	border-radius: 4px;
	padding: 5px 8px;
}

.impact-cc .helpbox {
	background: var(--ic-sand);
	border-radius: 8px;
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 16px;
}

.impact-cc .helpbox b {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ic-slate);
}

.impact-cc .helpbox p {
	font-size: 13px;
	line-height: 1.55;
	color: var(--ic-muted);
}

.impact-cc .helpbox a {
	font-size: 13.5px;
	font-weight: 500;
}

/* ------------------------------------------------------------------ */
/* Cross-sell row                                                      */
/* ------------------------------------------------------------------ */

.impact-cc .xs {
	padding: 0 var(--ic-pad) 48px;
}

.impact-cc .xs .sec-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.impact-cc .xs h2 {
	font-size: 24px !important;
	font-weight: 600;
}

.impact-cc .xs .lft {
	display: flex;
	flex-direction: column;
	gap: 9px;
	align-items: flex-start;
}

.impact-cc .xs .grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.impact-cc .pcard {
	background: #fff;
	border: 1px solid var(--ic-line);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.impact-cc .pcard .im {
	height: 160px;
	display: block;
	background: #fff;
	border-bottom: 1px solid var(--ic-line2);
}

.impact-cc .pcard .im .impact-packshot {
	padding: 12px;
}

.impact-cc .pcard .info {
	padding: 12px 14px 14px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}

.impact-cc .pcard h3 {
	font-size: 14px !important;
	font-weight: 600;
	line-height: 1.3;
}

.impact-cc .pcard h3 a {
	color: var(--ic-slate);
}

.impact-cc .pcard .pr {
	font-size: 15.5px;
	font-weight: 600;
	margin-top: 2px;
	color: var(--ic-slate);
}

.impact-cc .pcard .pr .amount {
	font-weight: 600;
}

.impact-cc .pcard .pr em {
	font-size: 11.5px;
	color: var(--ic-faint);
	font-style: normal;
	font-weight: 400;
}

.impact-cc .pcard .add {
	margin-top: 10px !important;
	padding: 9px 12px !important;
	font-size: 13.5px;
	width: 100%;
}

.impact-cc .pcard .added_to_cart {
	font-size: 12.5px;
	margin-top: 6px;
}

/* ------------------------------------------------------------------ */
/* Mobile sticky checkout bar                                          */
/* ------------------------------------------------------------------ */

.impact-cc .stickybar {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Undoing BeTheme's own checkout layout                               */
/* ------------------------------------------------------------------ */

/*
 * BeTheme lays the classic checkout out itself:
 *
 *   .mfn-be-checkout .woocommerce:not(.mfn-cart-tmpl-builder) .woocommerce-checkout
 *       { display:flex; flex-wrap:wrap; margin-top:50px }
 *   … #customer_details { flex-basis:50%; max-width:50% }
 *   … #order_review     { flex-basis:calc(50% - 41px); max-width:calc(50% - 41px) }
 *
 * Turning the form into a flex container made this design's grid shrink-wrap to
 * its content, and the two 50% clamps squeezed the address fields and the order
 * summary into narrow columns — the summary ended up about 145px wide, which is
 * why every figure in it wrapped. All three have to be undone.
 */
.impact-cc form.woocommerce-checkout {
	display: block !important;
	flex-wrap: nowrap !important;
	margin-top: 0 !important;
	width: 100% !important;
	max-width: none !important;
}

.impact-cc #customer_details,
.impact-cc #order_review {
	flex-basis: 100% !important;
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	float: none !important;
}

.impact-cc #order_review_heading {
	text-align: left !important;
	margin: 0 !important;
}

.impact-cc .col2-set,
.impact-cc .col2-set .col-1,
.impact-cc .col2-set .col-2 {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/*
 * The checkout and the confirmation render inside BeTheme's 1220px
 * .section_wrapper, which already centres them, so on wide screens they need no
 * gutter of their own — that is what keeps them the same width as the basket
 * page, which renders outside that wrapper. Below this width the wrapper goes
 * full-bleed, so the normal gutters come back.
 */
@media (min-width: 1280px) {
	body.impact-checkout-page .impact-cc,
	body.impact-confirmation-page .impact-cc {
		--ic-gutter: 0px;
	}
}

/*
 * BeTheme's .section_wrapper is itself a flex container on these pages, which
 * makes this block a flex item — and a flex item sizes to its content, not to
 * its parent. That is what left the checkout as a narrow column hugging the
 * left edge instead of a centred full-width layout.
 */
body.impact-checkout-page .impact-cc--checkout,
body.impact-confirmation-page .impact-cc--confirmation {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
}

/*
 * WooCommerce prints its login and coupon toggles on
 * woocommerce_before_checkout_form — outside this module's wrapper, so they get
 * no styling from the .impact-cc rules above. They are real features, so they
 * are styled here off the body class instead of being removed.
 */
body.impact-checkout-page .woocommerce-form-coupon-toggle,
body.impact-checkout-page .woocommerce-form-login-toggle {
	max-width: 1220px;
	margin: 0 auto 18px;
	padding: 0 18px;
}

body.impact-checkout-page .woocommerce-form-coupon-toggle .woocommerce-info,
body.impact-checkout-page .woocommerce-form-login-toggle .woocommerce-info {
	background: #F4F1EB !important;
	border: 1px solid #EDE9E2 !important;
	border-radius: 8px;
	color: #5D6570 !important;
	font-size: 13.5px;
	padding: 14px 18px !important;
	margin: 0 !important;
}

body.impact-checkout-page .woocommerce-form-coupon-toggle .woocommerce-info::before,
body.impact-checkout-page .woocommerce-form-login-toggle .woocommerce-info::before {
	display: none !important;
}

body.impact-checkout-page form.checkout_coupon,
body.impact-checkout-page form.woocommerce-form-login {
	max-width: 1220px;
	margin: 0 auto 18px !important;
	padding: 18px !important;
	background: #fff;
	border: 1px solid #EDE9E2 !important;
	border-radius: 8px;
}

body.impact-checkout-page form.checkout_coupon input.input-text {
	border: 1px solid #E4DED4;
	border-radius: 6px;
	padding: 11px 13px !important;
	font-size: 14.5px !important;
	line-height: normal !important;
}

body.impact-checkout-page form.checkout_coupon button {
	background: #C00000 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 12px 22px !important;
	font-size: 15px !important;
	text-transform: none !important;
}

/* ------------------------------------------------------------------ */
/* Checkout accordion                                                  */
/* ------------------------------------------------------------------ */

.impact-cc .steps {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.impact-cc .step {
	background: #fff;
	border: 1px solid var(--ic-line);
	border-radius: 8px;
	overflow: hidden;
}

.impact-cc .step.on {
	border-color: var(--ic-red);
	box-shadow: 0 6px 22px rgba(11, 26, 33, .07);
}

.impact-cc .step .sh {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	cursor: pointer;
}

.impact-cc .step .sh .n {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ic-line);
	color: var(--ic-faint);
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12.5px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.impact-cc .step.on .sh .n {
	background: var(--ic-red);
	color: #fff;
}

.impact-cc .step.ok .sh .n {
	background: var(--ic-green);
	color: #fff;
}

.impact-cc .step .sh h3 {
	font-size: 16.5px !important;
	font-weight: 600;
	flex: 1;
	min-width: 0;
}

.impact-cc .step .sh .done {
	font-size: 13px;
	color: var(--ic-muted);
	text-align: right;
	max-width: 300px;
	line-height: 1.4;
}

.impact-cc .step .sh .ed {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ic-teal);
}

.impact-cc .step .sb {
	padding: 18px 20px 20px;
	display: none;
	flex-direction: column;
	gap: 16px;
	border-top: 1px solid var(--ic-line2);
}

.impact-cc .step.on .sb {
	display: flex;
}

.impact-cc .step.on .sh .done,
.impact-cc .step.on .sh .ed {
	display: none;
}

.impact-cc .step .sb > .btn {
	align-self: flex-start;
}

.impact-cc .impact-step-intro {
	font-size: 13.5px;
	color: var(--ic-muted);
	line-height: 1.6;
}

.impact-cc .impact-secure-note {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--ic-faint);
}

.impact-cc .impact-secure-note svg.i {
	color: var(--ic-green);
}

/* Option cards — sites, delivery methods, gateways. */

.impact-cc .opts {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.impact-cc .opt {
	border: 1px solid var(--ic-field);
	border-radius: 7px;
	padding: 14px 16px !important;
	display: flex;
	gap: 13px;
	align-items: flex-start;
	cursor: pointer;
	background: #fff !important;
	transition: border-color .15s, box-shadow .15s;
	width: 100%;
	text-align: left;
	font-family: inherit;
	color: var(--ic-slate) !important;
	margin: 0 !important;
	box-shadow: none;
	list-style: none;
	position: relative;
}

.impact-cc .opt > input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0 !important;
	pointer-events: none;
}

.impact-cc .opt .dot {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1.5px solid #D5CEC3;
	margin-top: 2px;
	background: #fff;
}

.impact-cc .opt.on {
	border-color: var(--ic-red);
	box-shadow: 0 0 0 2px rgba(192, 0, 0, .09);
}

.impact-cc .opt.on .dot {
	border-color: var(--ic-red);
	background: radial-gradient(circle, #C00000 0 44%, #fff 46%);
}

.impact-cc .opt .t {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.impact-cc .opt b {
	font-size: 14.5px;
	font-weight: 600;
}

.impact-cc .opt .t > span,
.impact-cc .opt .t p {
	font-size: 13px;
	color: var(--ic-muted);
	line-height: 1.5;
}

.impact-cc .opt .metaline {
	font-size: 12px;
	color: var(--ic-faint);
}

.impact-cc .opt .pr {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 14px;
	font-weight: 500;
	color: var(--ic-slate);
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 6px;
}

.impact-cc .opt .pr img {
	max-height: 22px;
	width: auto;
	margin: 0;
}

.impact-cc .impact-site-status {
	font-size: 12.5px;
	color: var(--ic-teal);
}

.impact-cc .impact-site-status:empty {
	display: none;
}

.impact-cc .acctbox {
	background: rgba(43, 100, 117, .07);
	border: 1px solid rgba(43, 100, 117, .18);
	border-radius: 7px;
	padding: 14px 16px;
	font-size: 13.5px;
	line-height: 1.55;
	color: #4A5560;
}

.impact-cc .acctbox b {
	font-weight: 600;
	color: var(--ic-slate);
}

.impact-cc .acctbox .f {
	margin-top: 10px;
}

/* ------------------------------------------------------------------ */
/* WooCommerce form fields, restyled                                   */
/* ------------------------------------------------------------------ */

.impact-cc .impact-fieldgrid,
.impact-cc .woocommerce-billing-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.impact-cc .impact-fieldgroup + .impact-fieldgroup {
	margin-top: 18px;
}

.impact-cc #customer_details h3 {
	font-size: 15px !important;
	font-weight: 600;
	margin: 0 0 12px !important;
}

.impact-cc .form-row,
.impact-cc .f {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	float: none !important;
}

.impact-cc .form-row-wide,
.impact-cc .form-row.notes,
.impact-cc .form-row.impact-span-2 {
	grid-column: 1 / -1;
}

.impact-cc .form-row > label,
.impact-cc .f > label {
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ic-faint);
	margin: 0 !important;
	padding: 0 !important;
	display: block;
	line-height: 1.4;
}

.impact-cc .form-row > label .required {
	color: var(--ic-red);
	text-decoration: none;
	border: none;
}

.impact-cc .form-row .optional {
	text-transform: none;
	letter-spacing: 0;
}

.impact-cc .f .inp {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--ic-field);
	border-radius: 6px;
	padding: 0 13px;
	background: #fff;
}

.impact-cc .f .inp:focus-within {
	border-color: var(--ic-teal);
	box-shadow: 0 0 0 3px rgba(43, 100, 117, .12);
}

.impact-cc .f .inp svg.i {
	width: 15px;
	height: 15px;
	color: #A9A49B;
}

.impact-cc .f .inp input,
.impact-cc .form-row input.input-text,
.impact-cc .form-row textarea,
.impact-cc .form-row select,
.impact-cc .payment_box input.input-text,
.impact-cc .payment_box select {
	width: 100% !important;
	border: 1px solid var(--ic-field);
	border-radius: 6px;
	padding: 11px 13px !important;
	margin: 0 !important;
	font-family: inherit;
	font-size: 14.5px !important;
	line-height: normal !important;
	color: var(--ic-slate);
	background: #fff !important;
	box-shadow: none !important;
	min-height: 0;
	height: auto !important;
}

.impact-cc .f .inp input {
	border: none !important;
	border-radius: 0 !important;
	padding: 11px 0 !important;
	background: transparent !important;
	flex: 1;
	min-width: 0;
	outline: none;
}

.impact-cc .form-row textarea {
	min-height: 88px;
	resize: vertical;
}

.impact-cc .form-row input.input-text:focus,
.impact-cc .form-row textarea:focus,
.impact-cc .form-row select:focus,
.impact-cc .payment_box input.input-text:focus {
	border-color: var(--ic-teal);
	box-shadow: 0 0 0 3px rgba(43, 100, 117, .12) !important;
	outline: none;
}

.impact-cc .form-row input::placeholder,
.impact-cc .form-row textarea::placeholder,
.impact-cc .f input::placeholder {
	color: #A9A49B;
}

.impact-cc .form-row.woocommerce-invalid input.input-text,
.impact-cc .form-row.woocommerce-invalid select,
.impact-cc .form-row.woocommerce-invalid textarea {
	border-color: var(--ic-red);
}

.impact-cc .form-row .description,
.impact-cc .f .hint {
	font-size: 12.5px;
	color: var(--ic-faint);
	line-height: 1.5;
}

/* select2, which WooCommerce uses for country and county. */
.impact-cc .select2-container .select2-selection--single {
	height: auto !important;
	border: 1px solid var(--ic-field) !important;
	border-radius: 6px !important;
	background: #fff !important;
	padding: 5px 4px !important;
}

.impact-cc .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 1.5 !important;
	color: var(--ic-slate) !important;
	padding-left: 9px !important;
	font-size: 14.5px;
}

.impact-cc .select2-container .select2-selection--single .select2-selection__arrow {
	top: 50% !important;
	transform: translateY(-50%);
}

/* Checkbox rows: WooCommerce's label markup, the design's look.
   `display:block` on WooCommerce's form-row labels breaks inline rows, hence
   the explicit flex here. */
.impact-cc .chk,
.impact-cc .woocommerce-form__label-for-checkbox {
	display: flex !important;
	gap: 10px;
	align-items: flex-start;
	font-size: 13.5px;
	line-height: 1.5;
	color: #5D6570;
	cursor: pointer;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-weight: 400 !important;
}

/* Only hide the native control where this design supplies a .box to stand in
   for it. WooCommerce's own checkbox labels — including the required terms
   checkbox — have no .box, so hiding theirs would leave an invisible,
   un-tickable box and no way to place an order. */
.impact-cc .chk input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0 !important;
}

.impact-cc .woocommerce-form__label-for-checkbox:not(.chk) input[type="checkbox"] {
	width: 18px !important;
	height: 18px !important;
	min-width: 18px;
	flex: 0 0 auto;
	margin: 2px 0 0 !important;
	padding: 0 !important;
	accent-color: var(--ic-red);
	cursor: pointer;
}

.impact-cc .chk .box {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 4px;
	border: 1px solid #D5CEC3;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
	color: #fff;
}

.impact-cc .chk .box svg.i {
	width: 11px;
	height: 11px;
	opacity: 0;
	stroke-width: 3;
}

.impact-cc .chk input:checked ~ .box {
	background: var(--ic-red);
	border-color: var(--ic-red);
}

.impact-cc .chk input:checked ~ .box svg.i {
	opacity: 1;
}

.impact-cc #ship-to-different-address {
	font-size: 13.5px !important;
	font-weight: 400 !important;
	margin: 0 0 12px !important;
}

/* ------------------------------------------------------------------ */
/* Payment block (core markup)                                         */
/* ------------------------------------------------------------------ */

.impact-cc #payment {
	background: transparent !important;
	border-radius: 0;
	padding: 0 !important;
}

.impact-cc #payment ul.payment_methods {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

.impact-cc #payment li.wc_payment_method {
	border: 1px solid var(--ic-field);
	border-radius: 7px;
	background: #fff;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none;
	display: block;
	transition: border-color .15s, box-shadow .15s;
}

.impact-cc #payment li.wc_payment_method.on {
	border-color: var(--ic-red);
	box-shadow: 0 0 0 2px rgba(192, 0, 0, .09);
}

.impact-cc #payment li.wc_payment_method > label {
	display: flex !important;
	gap: 13px;
	align-items: flex-start;
	padding: 14px 16px;
	margin: 0 !important;
	cursor: pointer;
	font-size: 14.5px;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-weight: 400 !important;
	color: var(--ic-slate) !important;
}

.impact-cc #payment li.wc_payment_method > input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0 !important;
}

.impact-cc #payment li.wc_payment_method .dot {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1.5px solid #D5CEC3;
	margin-top: 2px;
	background: #fff;
}

.impact-cc #payment li.wc_payment_method.on .dot {
	border-color: var(--ic-red);
	background: radial-gradient(circle, #C00000 0 44%, #fff 46%);
}

.impact-cc #payment .payment_box {
	background: #FBFAF8 !important;
	border: none;
	border-top: 1px solid var(--ic-line2);
	border-radius: 0 0 7px 7px;
	margin: 0 !important;
	padding: 16px !important;
	color: var(--ic-muted);
	font-size: 13.5px;
	line-height: 1.6;
}

.impact-cc #payment .payment_box::before {
	display: none !important;
}

.impact-cc #payment .payment_box p {
	margin: 0 0 10px !important;
}

.impact-cc #payment .payment_box p:last-child {
	margin-bottom: 0 !important;
}

.impact-cc #payment .wc-credit-card-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 !important;
	padding: 0 !important;
}

.impact-cc #payment .place-order {
	padding: 18px 0 0 !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
	border: none;
	background: transparent;
}

.impact-cc #payment .woocommerce-terms-and-conditions-wrapper {
	width: 100%;
}

.impact-cc #payment #place_order {
	background: var(--ic-red) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 6px !important;
	font-family: inherit;
	font-weight: 500;
	font-size: 15px !important;
	padding: 14px 22px !important;
	margin: 0 !important;
	width: auto !important;
	float: none !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer;
}

.impact-cc #payment #place_order:hover {
	background: var(--ic-red2) !important;
	color: #fff !important;
}

.impact-cc .woocommerce-privacy-policy-text p,
.impact-cc .woocommerce-terms-and-conditions-wrapper p {
	font-size: 13px;
	color: var(--ic-muted);
	line-height: 1.55;
}

/* ------------------------------------------------------------------ */
/* Checkout review aside                                               */
/* ------------------------------------------------------------------ */

.impact-cc .impact-review-head {
	padding-bottom: 6px !important;
	border-bottom: none !important;
}

.impact-cc .woocommerce-checkout-review-order-table {
	display: block;
	width: 100%;
	border: none;
	margin: 0;
}

.impact-cc .rev {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--ic-line);
}

.impact-cc .revline {
	display: flex;
	gap: 12px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--ic-line2);
	align-items: center;
}

.impact-cc .revline .im {
	width: 46px;
	height: 46px;
	border-radius: 5px;
	overflow: hidden;
	flex: 0 0 auto;
	background: #fff;
	border: 1px solid var(--ic-line2);
}

.impact-cc .revline .tx {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.impact-cc .revline b {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
}

.impact-cc .revline span,
.impact-cc .revline dl {
	font-size: 11.5px;
	color: var(--ic-faint);
	margin: 0;
}

.impact-cc .revline .pr {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ic-slate);
	white-space: nowrap;
}

.impact-cc .podtag {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--ic-muted);
	padding: 12px 20px;
	background: #FBFAF8;
	border-top: 1px solid var(--ic-line);
}

.impact-cc .podtag svg.i {
	width: 14px;
	height: 14px;
	color: var(--ic-teal);
}

/* ------------------------------------------------------------------ */
/* Order confirmed                                                     */
/* ------------------------------------------------------------------ */

.impact-cc--confirmation {
	padding: 0;
}

.impact-cc .conf {
	padding: 52px var(--ic-pad) 56px;
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 32px;
	align-items: start;
}

.impact-cc .conf--bare {
	grid-template-columns: 1fr;
}

.impact-cc .conf .ok {
	width: 46px;
	height: 46px;
	border-radius: 9px;
	background: rgba(42, 160, 0, .12);
	color: var(--ic-green);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}

.impact-cc .conf .ok svg.i {
	width: 22px;
	height: 22px;
	stroke-width: 2.4;
}

.impact-cc .conf .ok--bad {
	background: rgba(192, 0, 0, .1);
	color: var(--ic-red);
}

.impact-cc .conf h1 {
	font-size: 31px !important;
	font-weight: 600;
	margin-bottom: 12px !important;
}

.impact-cc .conf .lead {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--ic-muted);
	max-width: 56ch;
}

.impact-cc .conf .facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 24px;
}

.impact-cc .fact {
	background: #fff;
	border: 1px solid var(--ic-line);
	border-radius: 8px;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.impact-cc .fact > span {
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ic-faint);
}

.impact-cc .fact b {
	font-size: 15px;
	font-weight: 600;
	color: var(--ic-slate);
}

.impact-cc .fact em {
	font-size: 12.5px;
	color: var(--ic-muted);
	font-style: normal;
}

.impact-cc .conf .acts {
	display: flex;
	gap: 10px;
	margin-top: 24px;
	flex-wrap: wrap;
}

.impact-cc .nextbox {
	background: var(--ic-grad-service);
	color: rgba(255, 255, 255, .9);
	border-radius: 8px;
	padding: 26px 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
}

.impact-cc .nextbox h3 {
	font-size: 20px !important;
	font-weight: 600;
	color: #fff !important;
}

.impact-cc .nextbox ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
}

.impact-cc .nextbox li {
	display: flex;
	gap: 11px;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .9);
	margin: 0;
	padding: 0;
	list-style: none;
}

.impact-cc .nextbox li b {
	color: #fff;
	font-weight: 600;
}

.impact-cc .nextbox li i {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 5px;
	background: rgba(255, 255, 255, .15);
	display: flex;
	align-items: center;
	justify-content: center;
}

.impact-cc .nextbox li i svg.i {
	width: 12px;
	height: 12px;
	stroke-width: 2.6;
}

.impact-cc .impact-order-details {
	padding: 0 var(--ic-pad) 48px;
}

.impact-cc .impact-order-details h2 {
	font-size: 20px !important;
	font-weight: 600;
	margin-bottom: 12px !important;
}

/* ------------------------------------------------------------------ */
/* Basket drawer                                                       */
/* ------------------------------------------------------------------ */

/* Above BeTheme's sticky header, its own basket panel and its side login panel
   (which sits at 100001), so an open drawer really does sit on top of the page
   rather than beside it. */
.impact-drawer-root {
	position: fixed;
	inset: 0;
	z-index: 100010;

	/*
	 * Must stay transparent. This element also carries .impact-cc for its custom
	 * properties and font, and .impact-cc sets background: var(--ic-bg) — on a
	 * fixed, inset:0 box that paints an opaque near-white sheet over the entire
	 * page. That, not the scrim, is what hid everything beside the drawer; the
	 * old dark scrim was simply sitting on top of this sheet.
	 */
	background: transparent !important;
}

.impact-drawer-root[hidden] {
	display: none;
}

/*
 * No scroll lock, on purpose. Both ways of locking the page break it inside
 * BeTheme: overflow:hidden on <html> loses the scroll position (the page jumps
 * to the top), and pinning the body with position:fixed stops its content
 * painting altogether — the whole area beside the drawer went blank. The page
 * simply stays where it is and scrolls behind the drawer, which is what keeps
 * it visible.
 *
 * The reset below is defensive: it makes sure the body can never end up pinned
 * while the drawer is open, even if a cached older script is still setting an
 * inline offset on it.
 */
html.impact-drawer-open body {
	position: static !important;
	top: auto !important;
	left: auto !important;
	overflow: visible !important;
}

html.impact-drawer-open .mfn-cart-holder,
html.impact-drawer-open .mfn-cart-overlay,
html.impact-drawer-open .mfn-header-login,
html.impact-drawer-open #back_to_top {
	display: none !important;
}

/*
 * Floating widgets that would otherwise sit on top of the drawer. The JS sweep
 * in cart-checkout.js catches anything fixed to the viewport at or above the
 * drawer's z-index, but only among direct children of <body> — these are named
 * explicitly because chat widgets like Tawk.to are not always appended there,
 * and they stack at a z-index in the billions.
 */
html.impact-drawer-open #tawkchat-container,
html.impact-drawer-open #tawkchat-minified-wrapper,
html.impact-drawer-open .tawk-min-container,
html.impact-drawer-open div[class*="tawk-"],
html.impact-drawer-open iframe[title*="chat" i],
html.impact-drawer-open iframe[id*="tawk" i] {
	visibility: hidden !important;
}

/*
 * Deliberately transparent. The page to the left of the drawer must stay
 * readable — no dimming overlay over it. This element exists only to catch a
 * click outside the drawer and close it.
 */
.impact-drawer-root .scrim {
	position: absolute;
	inset: 0;
	background: transparent;
}

.impact-drawer-root .drawer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 100%);
	background: #fff;
	display: flex;
	flex-direction: column;
	box-shadow: -16px 0 40px rgba(11, 26, 33, .28);
	transform: translateX(100%);
	transition: transform .24s ease;
}

.impact-drawer-root.is-open .drawer {
	transform: translateX(0);
}

.impact-drawer-root .impact-drawer-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.impact-drawer-root .dh {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--ic-line);
	flex: 0 0 auto;
}

.impact-drawer-root .dh h3 {
	font-size: 17px !important;
	font-weight: 600;
	flex: 1;
	margin: 0 !important;
}

.impact-drawer-root .dh .x {
	width: 32px !important;
	height: 32px !important;
	border-radius: 6px;
	border: none !important;
	background: var(--ic-sand) !important;
	color: var(--ic-slate) !important;
	cursor: pointer;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
}

.impact-drawer-root .freebar {
	margin: 16px 22px 6px;
	flex: 0 0 auto;
}

.impact-drawer-root .dbody {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.impact-drawer-root .impact-drawer-empty {
	padding: 30px 22px;
	color: var(--ic-muted);
	font-size: 14px;
}

.impact-drawer-root .dline {
	display: flex;
	gap: 12px;
	padding: 16px 22px;
	border-bottom: 1px solid var(--ic-line2);
}

.impact-drawer-root .dline.is-busy {
	opacity: .5;
	pointer-events: none;
}

.impact-drawer-root .dline .im {
	width: 60px;
	height: 60px;
	border-radius: 6px;
	overflow: hidden;
	flex: 0 0 auto;
	background: #fff;
	border: 1px solid var(--ic-line2);
}

.impact-drawer-root .dline .tx {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.impact-drawer-root .dline b {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.impact-drawer-root .dline b a {
	color: var(--ic-slate);
	text-decoration: none;
}

.impact-drawer-root .dline .btm {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 4px;
}

.impact-drawer-root .dline .qty button {
	width: 28px !important;
	height: 30px !important;
	font-size: 14px !important;
}

.impact-drawer-root .dline .qty input {
	width: 36px !important;
	height: 30px !important;
	font-size: 13px !important;
}

.impact-drawer-root .dline .pr {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 14px;
	font-weight: 600;
	color: var(--ic-slate);
	white-space: nowrap;
}

.impact-drawer-root .dfoot {
	border-top: 1px solid var(--ic-line);
	padding: 18px 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: #FBFAF8;
	flex: 0 0 auto;
}

.impact-drawer-root .dfoot .btn {
	width: 100%;
}

.impact-drawer-root .dsum {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.impact-drawer-root .srow {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	color: #5D6570;
}

.impact-drawer-root .srow b,
.impact-drawer-root .srow .amount {
	font-weight: 500;
	color: var(--ic-slate);
	font-family: 'IBM Plex Mono', monospace;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 1240px) {
	.impact-cc {
		--ic-gutter: 32px;
	}

	.impact-cc .wrap,
	.impact-cc .cowrap {
		grid-template-columns: minmax(0, 1fr) 330px;
	}
}

@media (max-width: 1024px) {
	.impact-cc .wrap,
	.impact-cc .cowrap,
	.impact-cc .conf {
		grid-template-columns: minmax(0, 1fr);
	}

	.impact-cc .xs .grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.impact-cc {
		--ic-gutter: 18px;
	}

	.impact-cc .dstrip {
		flex-direction: column;
		gap: 8px;
		font-size: 12.5px;
	}

	.impact-cc .phead {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding-bottom: 16px;
	}

	.impact-cc .phead h1,
	.impact-cc .conf h1 {
		font-size: 23px !important;
	}

	.impact-cc .lhead {
		display: none;
	}

	.impact-cc .line {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "prod prod" "qty money";
		gap: 12px;
		padding: 16px;
	}

	.impact-cc .line .prod { grid-area: prod; }
	.impact-cc .line .qty { grid-area: qty; justify-self: start; }
	.impact-cc .line .money { grid-area: money; text-align: right; }

	.impact-cc .line .rm {
		position: absolute;
		right: 8px;
		top: 8px;
	}

	.impact-cc .line .im {
		width: 60px;
		height: 60px;
	}

	.impact-cc .lfoot {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.impact-cc .lfoot .acts {
		flex-direction: column;
	}

	.impact-cc .impact-fieldgrid,
	.impact-cc .woocommerce-billing-fields__field-wrapper,
	.impact-cc .conf .facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.impact-cc .step .sh {
		padding: 15px 16px;
		gap: 11px;
	}

	.impact-cc .step .sh h3 {
		font-size: 15px !important;
	}

	.impact-cc .step .sh .done {
		max-width: 130px;
		font-size: 12px;
	}

	.impact-cc .step .sb {
		padding: 16px 16px 18px;
	}

	.impact-cc .conf {
		padding-top: 32px;
		padding-bottom: 36px;
	}

	.impact-cc .xs h2 {
		font-size: 20px !important;
	}

	.impact-cc .xs .grid {
		gap: 10px;
	}

	/* Sticky checkout bar, mobile only. */
	.impact-cc--cart .stickybar {
		position: sticky;
		bottom: 0;
		z-index: 40;
		display: flex;
		align-items: center;
		gap: 14px;
		background: #fff;
		border-top: 1px solid var(--ic-line);
		padding: 12px 18px;
		box-shadow: 0 -6px 18px rgba(11, 26, 33, .07);
	}

	.impact-cc .stickybar .tt {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.impact-cc .stickybar .tt span {
		font-size: 11.5px;
		color: var(--ic-faint);
	}

	.impact-cc .stickybar .tt b {
		font-size: 18px;
		font-family: 'IBM Plex Mono', monospace;
		font-weight: 600;
	}
}

@media (prefers-reduced-motion: reduce) {
	.impact-drawer-root .drawer,
	.impact-cc .track i {
		transition: none;
	}
}