/* SPIKE In-Store Collection – styled to match the "Spike In-Store Pickup Flow" mockup */
.spike-isc-hidden { display: none !important; }

/* ---------- Shipping options as cards ---------- */
ul.woocommerce-shipping-methods.spike-isc-cards {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left;
}
ul.spike-isc-cards > li.spike-isc-group {
	margin: 6px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 2px;
	line-height: 1.4;
	color: #575757;
	text-transform: uppercase;
}
ul.spike-isc-cards > li.spike-isc-opt {
	display: flex !important;
	align-items: flex-start;
	gap: 14px;
	margin: 0 !important;
	padding: 18px !important;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, .16);
	border-radius: 10px;
	cursor: pointer;
}
ul.spike-isc-cards > li.spike-isc-opt:hover { border-color: #000000; }
ul.spike-isc-cards > li.spike-isc-opt.is-selected {
	border: 1.5px solid #000000;
	padding: 17.5px !important;
}
ul.spike-isc-cards > li.spike-isc-opt input.shipping_method {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 2px 0 0 !important;
	accent-color: #000000;
}
ul.spike-isc-cards > li.spike-isc-opt label.spike-isc-done {
	display: flex !important;
	flex-direction: column;
	gap: 4px;
	flex-grow: 1;
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer;
	color: #000000;
	font-weight: 400;
	text-align: left;
}
.spike-isc-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: 1.35;
}
.spike-isc-price { flex-shrink: 0; white-space: nowrap; }
.spike-isc-price .woocommerce-Price-amount { font-weight: 500; }
.spike-isc-hours {
	font-size: 14px;
	font-weight: 300;
	letter-spacing: -0.3px;
	line-height: 1.5;
	color: #575757;
}
.spike-isc-ready {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.3px;
	line-height: 1.5;
}

/* ---------- Notices ---------- */
.spike-isc-notice,
.spike-isc-payment-note {
	margin: 12px 0 0;
	padding: 16px 18px;
	background: #f3f3f3;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 300;
	letter-spacing: -0.5px;
	line-height: 1.55;
	color: #000000;
	text-align: left;
}
.spike-isc-payment-note {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 12px 0;
}
.spike-isc-payment-note svg { flex-shrink: 0; margin-top: 2px; }

/* ---------- Thank-you page ---------- */
.spike-isc-thankyou {
	display: flex;
	flex-direction: column;
	gap: 26px;
	margin: 0 0 40px;
	color: #000000;
}
.spike-isc-thankyou p { margin: 0; }
.spike-isc-panel {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px 24px;
	background: #f3f3f3;
	border-radius: 8px;
}
.spike-isc-eyebrow {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #575757;
}
.spike-isc-store {
	font-size: 24px;
	line-height: 28px;
	font-weight: 500;
	letter-spacing: -1.5px;
}
.spike-isc-panel .spike-isc-hours { font-size: 16px; letter-spacing: -0.8px; }
.spike-isc-next { display: flex; flex-direction: column; gap: 16px; }
.spike-isc-thankyou h2 {
	margin: 0;
	font-size: 24px;
	line-height: 26px;
	font-weight: 500;
	letter-spacing: -1.5px;
}
.spike-isc-step {
	display: flex;
	gap: 14px;
	font-size: 18px;
	font-weight: 300;
	letter-spacing: -0.8px;
	line-height: 1.4;
}
.spike-isc-num {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid rgba(0, 0, 0, .16);
	border-radius: 14px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
}
.spike-isc-small {
	font-size: 15px;
	font-weight: 300;
	letter-spacing: -0.5px;
	line-height: 1.5;
	color: #575757;
}

/* ---------- CartFlows overrides (its checkout styles centre and row-align labels) ---------- */
html body ul.woocommerce-shipping-methods.spike-isc-cards {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
html body ul.woocommerce-shipping-methods.spike-isc-cards > li.spike-isc-opt {
	align-items: flex-start !important;
	justify-content: flex-start !important;
	text-align: left !important;
}
html body ul.woocommerce-shipping-methods.spike-isc-cards > li.spike-isc-opt > label.spike-isc-done {
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	text-align: left !important;
	width: auto !important;
}
html body ul.woocommerce-shipping-methods.spike-isc-cards .spike-isc-row {
	width: 100% !important;
	justify-content: space-between !important;
}
html body ul.woocommerce-shipping-methods.spike-isc-cards .spike-isc-hours,
html body ul.woocommerce-shipping-methods.spike-isc-cards .spike-isc-ready {
	text-align: left !important;
}
html body ul.woocommerce-shipping-methods.spike-isc-cards > li.spike-isc-opt {
	border-top: 1px solid rgba(0, 0, 0, .16) !important;
	border-right: 1px solid rgba(0, 0, 0, .16) !important;
	border-bottom: 1px solid rgba(0, 0, 0, .16) !important;
	border-left: 1px solid rgba(0, 0, 0, .16) !important;
	border-radius: 10px !important;
	padding: 18px !important;
	margin: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
	overflow: visible !important;
}
html body ul.woocommerce-shipping-methods.spike-isc-cards > li.spike-isc-opt:hover {
	border-color: #000000 !important;
}
html body ul.woocommerce-shipping-methods.spike-isc-cards > li.spike-isc-opt.is-selected {
	border-top: 1.5px solid #000000 !important;
	border-right: 1.5px solid #000000 !important;
	border-bottom: 1.5px solid #000000 !important;
	border-left: 1.5px solid #000000 !important;
	padding: 17.5px !important;
}

/* ---------- Checkout layout (CartFlows) ---------- */
html body .spike-isc-section {
	margin: 28px 0 4px !important;
	width: 100% !important;
	float: none !important;
	clear: both;
}
html body.spike-isc-layout #billing_fields_heading,
html body .spike-isc-section h3 {
	margin: 0 0 6px !important;
	font-size: 24px !important;
	line-height: 26px !important;
	font-weight: 500 !important;
	letter-spacing: -1.5px;
	color: #000000;
}
html body .spike-isc-section p {
	margin: 0 !important;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: -0.8px;
	line-height: 1.4;
	color: #575757;
}
html body .spike-isc-shipwrap {
	width: 100% !important;
	float: none !important;
	clear: both;
	margin: 0 0 8px !important;
}
html body .spike-isc-shipwrap .wcf-customer-shipping,
html body .spike-isc-shipwrap .wcf-shipping-methods-wrapper {
	margin: 0 !important;
	padding: 0 !important;
}

/* Order summary as a grey card */
html body.spike-isc-layout .wcf-order-wrap {
	background: #f3f3f3 !important;
	border-radius: 10px !important;
	padding: 28px !important;
	box-sizing: border-box;
}
html body.spike-isc-layout .wcf-order-wrap #order_review_heading {
	margin-top: 0 !important;
	font-size: 24px !important;
	font-weight: 500 !important;
	letter-spacing: -1.5px;
}
html body.spike-isc-layout .wcf-order-wrap #order_review,
html body.spike-isc-layout .wcf-order-wrap .shop_table,
html body.spike-isc-layout .wcf-order-wrap .shop_table th,
html body.spike-isc-layout .wcf-order-wrap .shop_table td {
	background: transparent !important;
	border-color: rgba(0, 0, 0, .12) !important;
}
html body.spike-isc-layout .wcf-order-wrap .shop_table {
	border: 0 !important;
	box-shadow: none !important;
}
html body .spike-isc-ship-row th,
html body .spike-isc-ship-row td {
	font-weight: 300 !important;
	color: #575757;
}
html body .spike-isc-ship-row td { text-align: right; color: #000000; }
html body.spike-isc-layout #billing_fields_heading { margin: 28px 0 12px !important; }

/* ---------- Step header (1. Delivery / 2. Payment / 3. Confirmation) ---------- */
.spike-isc-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 32px;
	margin: 0 0 36px;
	padding: 28px 38px 32px;
	background: #f3f3f3;
	border-radius: 8px;
	color: #000000;
	box-sizing: border-box;
	width: 100%;
}
.spike-isc-crumbs {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: -0.5px;
}
.spike-isc-crumbs a { color: #000000 !important; text-decoration: none !important; }
.spike-isc-crumbs a:hover { color: #575757 !important; }
html body .spike-isc-pagetitle {
	margin: 0 !important;
	font-size: 44px !important;
	line-height: 1.1 !important;
	font-weight: 500 !important;
	letter-spacing: -2.1px !important;
	color: #000000 !important;
}
ol.spike-isc-steps-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	font-size: 16px;
	letter-spacing: -0.5px;
}
ol.spike-isc-steps-nav li { margin: 0 !important; color: #8a8a8a; font-weight: 300; }
ol.spike-isc-steps-nav li.sep { color: #c3c4c7; }
ol.spike-isc-steps-nav li.is-done { color: #000000; font-weight: 300; }
ol.spike-isc-steps-nav li.is-current { color: #000000; font-weight: 500; }

/* ---------- Step visibility ---------- */
.spike-isc-method, .spike-isc-back { display: none; }
body.spike-steps.spike-step-1 .wcf-payment-option-heading,
body.spike-steps.spike-step-1 #payment { display: none !important; }
body.spike-steps.spike-step-2 #customer_details,
body.spike-steps.spike-step-2 .spike-isc-continue-wrap { display: none !important; }
body.spike-steps.spike-step-2 .spike-isc-method { display: flex; }
body.spike-steps.spike-step-2 .spike-isc-back { display: inline-block; }

/* Continue button */
.spike-isc-continue-wrap { margin: 24px 0 8px; clear: both; }
html body button.spike-isc-continue {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 56px;
	padding: 0 24px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: #000000 !important;
	color: #ffffff !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	letter-spacing: -0.8px;
	cursor: pointer;
}
html body button.spike-isc-continue:hover,
html body button.spike-isc-continue:focus-visible { background: #ff0000 !important; }
.spike-isc-continue__msg { margin: 10px 0 0; font-size: 14px; font-weight: 300; color: #575757; min-height: 1em; }

/* Chosen method card on step 2 */
.spike-isc-method {
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 28px;
	padding: 18px 20px;
	border: 1px solid rgba(0, 0, 0, .16);
	border-radius: 10px;
	background: #ffffff;
}
.spike-isc-method p { margin: 0 !important; }
.spike-isc-method__heading { font-size: 16px; font-weight: 500; letter-spacing: -0.5px; color: #000000; }
.spike-isc-method__detail { margin-top: 4px !important; font-size: 14px; font-weight: 300; color: #575757; }
html body button.spike-isc-method__change,
html body button.spike-isc-back {
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: #000000 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	text-decoration: underline;
	cursor: pointer;
	box-shadow: none !important;
}
html body button.spike-isc-back { margin: 16px 0 0; }

@media (max-width: 767px) {
	.spike-isc-header { padding: 22px 20px; }
	html body .spike-isc-pagetitle { font-size: 34px !important; }
}

/* ---------- Confirmation (thank-you) ---------- */
.spike-isc-header--done { margin-bottom: 40px; }
.spike-isc-hero { display: flex; flex-direction: column; gap: 10px; margin: 0 0 32px; color: #000000; }
.spike-isc-hero__icon {
	display: flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; margin-bottom: 14px;
	border-radius: 28px; background: #000000;
}
html body .spike-isc-hero__title {
	margin: 0 !important;
	font-size: 40px !important; line-height: 48px !important;
	font-weight: 500 !important; letter-spacing: -2.1px !important; color: #000000 !important;
}
.spike-isc-hero__line { margin: 0 !important; font-size: 18px; line-height: 22px; font-weight: 300; letter-spacing: -0.8px; color: #575757; }
.spike-isc-address { line-height: 1.5; }
/* Hide WooCommerce's default "Thank you. Your order has been received." + overview when our hero is shown */
body.spike-isc-hero-on .woocommerce-thankyou-order-received,
body.spike-isc-hero-on ul.woocommerce-order-overview,
body.spike-isc-hero-on .woocommerce-order-overview { display: none !important; }
@media (max-width: 767px) { html body .spike-isc-hero__title { font-size: 32px !important; line-height: 38px !important; } }

/* Line the header text up with the form below (panel bleeds into the page gutter on desktop) */
@media (min-width: 1025px) {
	html body .spike-isc-header {
		width: calc(100% + 76px);
		margin-left: -38px;
		margin-right: -38px;
	}
}

/* CartFlows' floating-label rule (.form-row label {position:absolute}) also hits a single shipping option's label */
html body #customer_details ul.spike-isc-cards > li.spike-isc-opt > label.spike-isc-done,
html body ul.spike-isc-cards > li.spike-isc-opt > label.spike-isc-done {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	height: auto !important;
	max-width: none !important;
	pointer-events: auto !important;
	background: transparent !important;
}

/* Breathing room around order notes and the Continue button */
html body .spike-isc-continue-wrap { margin: 0 !important; padding: 32px 0 8px !important; }
html body.spike-isc-layout .woocommerce-additional-fields { margin-top: 24px !important; }
html body .spike-isc-notice { margin-bottom: 8px !important; }

/* Softer loading state while totals refresh */
html body.spike-isc-layout .wcf-order-wrap .blockUI.blockOverlay { background: #f3f3f3 !important; opacity: .4 !important; }
html body.spike-isc-layout .blockUI.blockOverlay::before { display: none !important; }

/* ---------- "Prefer in-store collection?" card that opens the stores ---------- */
html body ul.spike-isc-cards > li.spike-isc-store { display: none !important; }
html body ul.spike-isc-cards.spike-isc-open > li.spike-isc-store { display: flex !important; margin-left: 32px !important; }
html body ul.spike-isc-cards > li.spike-isc-toggle {
	display: block !important;
	margin: 8px 0 0 !important;
	padding: 18px !important;
	border: 1px solid rgba(0, 0, 0, .16) !important;
	border-radius: 10px !important;
	background: #ffffff !important;
	list-style: none !important;
	cursor: pointer;
}
html body ul.spike-isc-cards > li.spike-isc-toggle:hover { border-color: #000000 !important; }
html body ul.spike-isc-cards > li.spike-isc-toggle.is-selected { border: 1.5px solid #000000 !important; padding: 17.5px !important; }
html body button.spike-isc-toggle__btn {
	display: flex !important;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #000000 !important;
	font: inherit !important;
	font-size: 13px !important;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer;
}
html body button.spike-isc-toggle__btn:focus-visible { outline: 2px solid #000000; outline-offset: 6px; }
.spike-isc-toggle__text { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; }
.spike-isc-toggle .spike-isc-price { display: inline-flex; align-items: center; gap: 8px; }
.spike-isc-chevron { flex-shrink: 0; transition: transform .15s; }
li.spike-isc-toggle.is-open .spike-isc-chevron { transform: rotate(180deg); }
.spike-isc-radio {
	flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px;
	border: 1px solid rgba(0, 0, 0, .35); border-radius: 50%;
	background: #ffffff; box-sizing: border-box;
}

li.spike-isc-toggle.is-selected .spike-isc-radio { border-color: #000000; background: #000000; box-shadow: inset 0 0 0 4px #ffffff; }

/* "Ship to a different address?" sits under the address, above the options */
html body.spike-isc-layout .woocommerce-billing-fields + .woocommerce-shipping-fields { margin: 4px 0 20px !important; padding: 0 !important; }
html body.spike-isc-layout .woocommerce-shipping-fields #ship-to-different-address { margin: 0 0 8px !important; font-size: 16px !important; font-weight: 400 !important; }
/* CartFlows floats the options wrapper; contain it so order notes don't overlap */
html body #spike-isc-shipwrap { display: flow-root !important; }
html body #spike-isc-shipwrap .wcf-shipping-methods-wrapper { float: none !important; width: 100% !important; }

/* ---------- v1.6: no radio circles; selected card = black border + tick; store dropdown ---------- */
html body ul.spike-isc-cards > li.spike-isc-opt input.shipping_method,
html body ul.spike-isc-cards > li.spike-isc-opt input.shipping_method[type="radio"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
	opacity: 0 !important;
	appearance: none !important;
}
html body ul.spike-isc-cards > li.spike-isc-opt { position: relative !important; }
html body ul.spike-isc-cards > li.spike-isc-opt:focus-within { outline: 2px solid #000000; outline-offset: 2px; }
.spike-isc-radio { display: none !important; }
html body ul.spike-isc-cards li.is-selected .spike-isc-title::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 0 8px -2px 0;
	background: no-repeat center / 16px 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
}
/* Store cards stay in the page (for the form) but are replaced by the dropdown */
html body ul.spike-isc-cards > li.spike-isc-store,
html body ul.spike-isc-cards.spike-isc-open > li.spike-isc-store { display: none !important; }
html body ul.spike-isc-cards > li.spike-isc-toggle { position: relative !important; }

.spike-isc-storepick { position: relative; margin: 16px 0 0; }
html body .spike-isc-storepick__label {
	position: absolute !important;
	top: 7px !important;
	left: 15px !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 12px !important;
	font-weight: 300 !important;
	letter-spacing: -0.8px;
	line-height: 1.2 !important;
	color: #000000 !important;
	pointer-events: none;
	background: transparent !important;
	transform: none !important;
}
html body select.spike-isc-storepick__select {
	display: block !important;
	width: 100% !important;
	height: 62px !important;
	margin: 0 !important;
	padding: 26px 44px 8px 14px !important;
	border: 1px solid rgb(209, 213, 219) !important;
	border-radius: 4px !important;
	background: #ffffff no-repeat right 16px center / 14px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	font-family: inherit !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	letter-spacing: -0.8px;
	color: rgb(22, 17, 14) !important;
	box-shadow: none !important;
	cursor: pointer;
}
html body select.spike-isc-storepick__select:focus { outline: 1.5px solid #000000 !important; outline-offset: -1px; border-color: #000000 !important; }
.spike-isc-storepick .spike-isc-hours,
.spike-isc-storepick .spike-isc-ready { display: block; margin-top: 8px; }
.spike-isc-storepick .spike-isc-ready { margin-top: 2px; }
html body select.spike-isc-storepick__select { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

/* ---------- Smooth open/close of the address when switching delivery <-> collection ---------- */
html body #customer_details .spike-isc-collapsible {
	max-height: 130px;
	overflow: hidden;
	transition: max-height .28s ease, opacity .2s ease, margin .28s ease, padding .28s ease, visibility 0s linear 0s;
}
html body #customer_details .woocommerce-shipping-fields.spike-isc-collapsible { max-height: 1200px; }
html body #customer_details .spike-isc-collapsible.spike-isc-collapsed {
	max-height: 0 !important;
	opacity: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	visibility: hidden;
	pointer-events: none;
	transition: max-height .28s ease, opacity .15s ease, margin .28s ease, padding .28s ease, visibility 0s linear .28s;
}
@media (prefers-reduced-motion: reduce) {
	html body #customer_details .spike-isc-collapsible,
	html body #customer_details .spike-isc-collapsible.spike-isc-collapsed { transition: none !important; }
}

/* Country change: show that options are updating (the rates come from the server) */
#spike-isc-shipwrap { transition: opacity .15s ease; }
body.spike-isc-updating #spike-isc-shipwrap { opacity: .45; pointer-events: none; }
.spike-isc-updating-msg { display: none; margin: 0 0 10px; font-size: 14px; font-weight: 300; color: #575757; }
body.spike-isc-updating .spike-isc-updating-msg { display: block; }

/* Continue button uses the same type as the site's other buttons (Place Order / Apply) */
html body button.spike-isc-continue,
html body button.spike-isc-continue span {
	font-family: Inter, sans-serif !important;
	font-size: 18px !important;
	font-weight: 300 !important;
	letter-spacing: -0.8px !important;
	text-transform: none !important;
}

/* Order summary dividers: CartFlows draws some in white, which disappears on the grey card */
html body.spike-isc-layout .wcf-order-wrap .shop_table thead,
html body.spike-isc-layout .wcf-order-wrap .shop_table tbody,
html body.spike-isc-layout .wcf-order-wrap .shop_table tfoot,
html body.spike-isc-layout .wcf-order-wrap .shop_table tr { border-color: rgba(0, 0, 0, .12) !important; }
/* We keep the options steady ourselves; stop the browser's own scroll anchoring fighting it */
body.spike-isc-layout, body.spike-isc-layout * { overflow-anchor: none; }

/* Header panel = full-width grey band across the top of the white checkout card (desktop) */
@media (min-width: 1025px) {
	html body .spike-isc-header {
		width: calc(100% + 80px) !important;
		margin: -60px -40px 44px !important;
		padding: 36px 40px 34px !important;
		border-radius: 0 !important;
	}
}

/* Bento layout (as the mockup): header is its own rounded box, same width as the content,
   matching the rounded "Your order" card. Overrides the earlier full-bleed rules. */
@media (min-width: 1025px) {
	html body .spike-isc-header {
		width: 100% !important;
		margin: 0 0 32px !important;
		padding: 30px 36px 32px !important;
		border-radius: 10px !important;
	}
}

/* Order summary: the grey box stays as a column; its contents follow the scroll with room at the top */
html body.spike-isc-layout .wcf-order-wrap #order_review_heading { position: sticky !important; top: 28px !important; z-index: 2; }
html body.spike-isc-layout .wcf-order-wrap #order_review { position: sticky !important; top: 72px !important; }
html body.admin-bar.spike-isc-layout .wcf-order-wrap #order_review_heading { top: 60px !important; }
html body.admin-bar.spike-isc-layout .wcf-order-wrap #order_review { top: 104px !important; }

/* Apply coupon: same red hover as the other buttons */
html body.spike-isc-layout .wcf-custom-coupon-field button,
html body.spike-isc-layout .wcf-custom-coupon-field .wcf-submit-coupon { transition: background-color .15s, border-color .15s, color .15s; }
html body.spike-isc-layout .wcf-custom-coupon-field button:hover,
html body.spike-isc-layout .wcf-custom-coupon-field button:focus-visible,
html body.spike-isc-layout .wcf-custom-coupon-field .wcf-submit-coupon:hover {
	background: #ff0000 !important;
	border-color: #ff0000 !important;
	color: #ffffff !important;
}

/* 1.7.7: bento header, white card and columns share the SPIKE logo's edges */
@media (min-width: 1025px) {
  html body.spike-isc-layout [data-id="6832620"] { padding-left: 0 !important; padding-right: 0 !important; padding-top: 40px !important; }
}

/* 1.7.8: match the shop pages (e.g. Footwear): all-white page, soft grey bento boxes on the logo's edges */
@media (min-width: 1025px) {
  html body.spike-isc-layout,
  html body.spike-isc-layout [data-id="40650e2"],
  html body.spike-isc-layout [data-id="b9fe25e"] { background: #ffffff !important; }
  html body.spike-isc-layout [data-id="6832620"] { padding: 24px 0 0 !important; border: 0 !important; box-shadow: none !important; }
  html body .spike-isc-header { background: #f6f6f6 !important; border-radius: 7px !important; padding: 43px !important; }
  html body.spike-isc-layout .wcf-order-wrap { background: #f6f6f6 !important; border-radius: 7px !important; }
  html body.spike-isc-layout [data-id="b9fe25e"] > .e-con-inner { max-width: none !important; }
}

/* 1.7.9: left-column content lines up with the text inside the grey Checkout box */
@media (min-width: 1025px) {
  html body.spike-isc-layout .wcf-customer-info-main-wrapper { padding-left: 43px !important; box-sizing: border-box !important; }
}

/* 1.8.0: tablet + phone, matching the desktop look (white page, soft grey boxes, logo gutter) */
html body.spike-isc-layout [data-id="40650e2"], html body.spike-isc-layout [data-id="b9fe25e"] { transition: none !important; }
@media (max-width: 1024px) {
  html body.spike-isc-layout, html body.spike-isc-layout [data-id="40650e2"], html body.spike-isc-layout [data-id="b9fe25e"] { background: #ffffff !important; }
  html body.spike-isc-layout [data-id="6832620"] { border: 0 !important; box-shadow: none !important; padding: 16px 0 0 !important; }
  html body.spike-isc-layout [data-id="bc35857"] > .elementor-widget-container { padding: 0 !important; }
  html body.spike-isc-layout .wcf-embed-checkout-form .woocommerce { padding-left: 0 !important; padding-right: 0 !important; }
  html body .spike-isc-header { background: #f6f6f6 !important; border-radius: 7px !important; }
  html body.spike-isc-layout .wcf-order-wrap { background: transparent !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  html body.spike-isc-layout .wcf-order-wrap #order_review_heading,
  html body.spike-isc-layout .wcf-order-wrap #order_review { position: static !important; }
  /* Order summary: a clear tappable bar with the total on the right */
  html body.spike-isc-layout .wcf-collapsed-order-review-section { margin: 0 0 20px !important; border: 1px solid #e5e5e5 !important; border-radius: 7px !important; overflow: hidden !important; }
  html body.spike-isc-layout .wcf-collapsed-order-review-section .wcf-order-review-toggle { display: flex !important; justify-content: space-between !important; align-items: center !important; margin: 0 !important; background: #f6f6f6 !important; border: 0 !important; padding: 18px 20px !important; cursor: pointer; }
  html body.spike-isc-layout .wcf-collapsed-order-review-section .wcf-cartflows-review-order-wrapper { padding: 4px 20px 16px !important; margin: 0 !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  html body.spike-isc-layout [data-id="40650e2"] { padding-left: 24px !important; padding-right: 24px !important; }
  html body .spike-isc-header { padding: 32px 38px !important; margin-bottom: 24px !important; }
  /* single column: form full width, sidebar summary replaced by the tappable summary bar */
  html body.spike-isc-layout form.checkout { flex-direction: column !important; }
  html body.spike-isc-layout form.checkout > .wcf-customer-info-main-wrapper { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 38px !important; box-sizing: border-box !important; }
  html body.spike-isc-layout form.checkout > .wcf-order-wrap { display: none !important; }
  html body.spike-isc-layout .wcf-collapsed-order-review-section { display: block !important; margin: 0 38px 24px !important; }
}
@media (max-width: 767px) {
  html body.spike-isc-layout [data-id="40650e2"] { padding-left: 16px !important; padding-right: 16px !important; }
  html body .spike-isc-header { padding: 20px !important; margin-bottom: 16px !important; }
  html body .spike-isc-header .spike-isc-pagetitle { font-size: 30px !important; line-height: 36px !important; }
}
@media (max-width: 767px) {
  /* 1. Delivery / 2. Payment / 3. Confirmation always on one line */
  html body .spike-isc-steps-nav { flex-wrap: nowrap !important; white-space: nowrap !important; gap: 6px !important; font-size: 14px !important; }
  html body .spike-isc-steps-nav * { white-space: nowrap !important; }
}
@media (max-width: 359px) { html body .spike-isc-steps-nav { font-size: 12px !important; gap: 4px !important; } }
@media (min-width: 768px) and (max-width: 1024px) {
  /* iPad: product image, then name, then quantity / Remove stacked */
  html body.spike-isc-layout .wcf-collapsed-order-review-section td.product-name { display: grid !important; grid-template-columns: 1fr !important; grid-template-areas: none !important; row-gap: 10px !important; }
  html body.spike-isc-layout .wcf-collapsed-order-review-section td.product-name > *,
  html body.spike-isc-layout .wcf-collapsed-order-review-section td.product-name .wcf-product-image > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
}

/* 1.8.1: cleaner order summary on tablet + phone */
@media (max-width: 1024px) {
  html body.spike-isc-layout .wcf-collapsed-order-review-section .wcf-cartflows-review-order-wrapper { padding: 0 20px 20px !important; }
  html body.spike-isc-layout .wcf-collapsed-order-review-section table.woocommerce-checkout-review-order-table { border: 0 !important; box-shadow: none !important; background: transparent !important; margin: 0 !important; padding: 0 !important; }
  html body.spike-isc-layout .wcf-collapsed-order-review-section table.woocommerce-checkout-review-order-table thead { display: none !important; }
  html body.spike-isc-layout .wcf-collapsed-order-review-section table.woocommerce-checkout-review-order-table tr > *:first-child { padding-left: 0 !important; }
  html body.spike-isc-layout .wcf-collapsed-order-review-section table.woocommerce-checkout-review-order-table tr > *:last-child { padding-right: 0 !important; text-align: right !important; }
  html body.spike-isc-layout .wcf-collapsed-order-review-section table.woocommerce-checkout-review-order-table td,
  html body.spike-isc-layout .wcf-collapsed-order-review-section table.woocommerce-checkout-review-order-table th { padding-top: 16px !important; padding-bottom: 16px !important; border-color: rgba(0,0,0,.12) !important; }
  /* coupon: one row, input + Apply */
  html body.spike-isc-layout .wcf-collapsed-order-review-section .wcf-custom-coupon-field { background: transparent !important; padding: 16px 0 0 !important; margin: 0 !important; display: flex !important; flex-wrap: nowrap !important; gap: 10px !important; align-items: stretch !important; }
  html body.spike-isc-layout .wcf-collapsed-order-review-section .wcf-custom-coupon-field .wcf-coupon-col-1 { flex: 1 1 auto !important; width: auto !important; margin: 0 !important; }
  html body.spike-isc-layout .wcf-collapsed-order-review-section .wcf-custom-coupon-field .wcf-coupon-col-2 { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; }
  html body.spike-isc-layout .wcf-collapsed-order-review-section .wcf-custom-coupon-field input { width: 100% !important; height: 48px !important; font-size: 16px !important; margin: 0 !important; }
  html body.spike-isc-layout .wcf-collapsed-order-review-section .wcf-custom-coupon-field button { width: auto !important; height: 48px !important; padding: 0 22px !important; font-size: 16px !important; margin: 0 !important; }
}
@media (max-width: 767px) {
  /* phone: first + last name side by side */
  html body.spike-isc-layout .woocommerce-billing-fields__field-wrapper > #billing_first_name_field,
  html body.spike-isc-layout .woocommerce-billing-fields__field-wrapper > #billing_last_name_field { width: calc(50% - 6px) !important; flex: 0 0 calc(50% - 6px) !important; float: none !important; }
  html body.spike-isc-layout .woocommerce-billing-fields__field-wrapper > #billing_first_name_field { margin-right: 12px !important; }
  html body.spike-isc-layout .wcf-collapsed-order-review-section td.product-name { grid-template-rows: auto !important; align-content: start !important; }
}

/* 1.8.2: phone: town + postcode side by side, Continue button always in reach */
@media (max-width: 767px) {
  html body.spike-isc-layout .woocommerce-billing-fields__field-wrapper > #billing_city_field,
  html body.spike-isc-layout .woocommerce-billing-fields__field-wrapper > #billing_postcode_field { width: calc(50% - 6px) !important; flex: 0 0 calc(50% - 6px) !important; float: none !important; }
  html body.spike-isc-layout .woocommerce-billing-fields__field-wrapper > #billing_city_field { margin-right: 12px !important; }
  html body.spike-isc-layout .woocommerce-billing-fields__field-wrapper > #billing_state_field:not([style*="none"]) ~ #billing_postcode_field { width: 100% !important; flex-basis: 100% !important; }

  html body.spike-isc-layout .spike-isc-continue-wrap { position: sticky !important; bottom: 0 !important; z-index: 60 !important; background: #ffffff !important; margin: 16px -16px 0 !important; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important; box-shadow: 0 -1px 0 rgba(0,0,0,.08), 0 -8px 24px rgba(0,0,0,.06) !important; }
  html body.spike-isc-layout .spike-isc-continue-wrap .spike-isc-continue__msg:empty { display: none !important; }
  html body.spike-isc-layout .spike-isc-continue-wrap .spike-isc-continue__msg { margin: 8px 0 0 !important; }
  /* keep the cookie-settings badge clear of the Continue bar */
  html body.spike-isc-layout .cky-btn-revisit-wrapper { bottom: 96px !important; }
}

/* 1.9.0: step 2 (Payment) to match the mockup */
/* Delivery / collection recap: small grey label, bold detail, outlined Change button */
html body.spike-steps .spike-isc-method { border: 1px solid rgba(0,0,0,.16) !important; border-radius: 10px !important; padding: 18px 20px !important; gap: 16px !important; align-items: center !important; justify-content: space-between !important; background: #ffffff !important; }
html body.spike-steps .spike-isc-method__heading { font-size: 14px !important; font-weight: 300 !important; letter-spacing: -0.3px !important; color: #575757 !important; line-height: 1.4 !important; }
html body.spike-steps .spike-isc-method__detail { margin-top: 4px !important; font-size: 16px !important; font-weight: 500 !important; letter-spacing: -0.5px !important; color: #000000 !important; line-height: 1.35 !important; }
html body.spike-steps button.spike-isc-method__change { flex: none !important; height: 40px !important; padding: 0 16px !important; background: #ffffff !important; color: #000000 !important; border: 1px solid rgba(0,0,0,.16) !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: -0.8px !important; text-decoration: none !important; cursor: pointer; }
html body.spike-steps button.spike-isc-method__change:hover { border-color: #000000 !important; }

/* "Payment" heading like "Contact" */
html body.spike-steps .spike-isc-payhead h3,
html body.spike-steps .spike-isc-payhead { font-size: 24px !important; line-height: 26px !important; font-weight: 500 !important; letter-spacing: -1.5px !important; color: #000000 !important; }
html body.spike-steps .spike-isc-payhead h3 { margin: 32px 0 16px !important; }

/* Payment method: one selected card-style row, then the card fields */
html body.spike-steps #payment { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; }
html body.spike-steps #payment ul.wc_payment_methods { border: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
html body.spike-steps #payment ul.wc_payment_methods > li.wc_payment_method { display: block !important; width: 100% !important; box-sizing: border-box !important; border: 1px solid rgba(0,0,0,.16) !important; border-radius: 10px !important; background: #ffffff !important; padding: 0 !important; margin: 0 !important; overflow: hidden; }
html body.spike-steps #payment ul.wc_payment_methods > li.wc_payment_method > label { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 17px 20px !important; font-size: 16px !important; font-weight: 500 !important; letter-spacing: -0.5px !important; color: #000000 !important; background: #ffffff !important; border: 0 !important; }
html body.spike-steps #payment ul.wc_payment_methods > li.wc_payment_method > label::before,
html body.spike-steps #payment ul.wc_payment_methods > li.wc_payment_method > label::after { display: none !important; }
html body.spike-steps #payment.spike-isc-single-method ul.wc_payment_methods > li.wc_payment_method,
html body.spike-steps #payment ul.wc_payment_methods > li.wc_payment_method:has(> input:checked) { border: 1.5px solid #000000 !important; }
html body.spike-steps #payment ul.wc_payment_methods > li.wc_payment_method > .payment_box { background: #ffffff !important; margin: 0 !important; padding: 4px 20px 20px !important; border: 0 !important; border-radius: 0 !important; }
html body.spike-steps #payment ul.wc_payment_methods > li.wc_payment_method > .payment_box::before { display: none !important; }
html body.spike-steps #payment .spike-isc-cardicon { flex: none; color: #000000; }
html body.spike-steps #payment .spike-isc-secure { margin: 0 !important; padding: 0 20px 18px !important; font-size: 13px !important; font-weight: 300 !important; letter-spacing: -0.3px !important; color: #575757 !important; }
html body.spike-steps #payment .spike-isc-payment-note { margin: 16px 0 0 !important; }

/* Back + Pay now on one row, same button style as "Continue to payment" */
html body.spike-steps #payment .form-row.place-order { padding: 0 !important; margin: 24px 0 0 !important; background: transparent !important; }
html body.spike-steps .spike-isc-paybar { display: flex !important; gap: 12px !important; align-items: stretch !important; }
html body.spike-steps .spike-isc-paybar button.spike-isc-back { width: auto !important; min-width: 0 !important; max-width: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: none !important; margin: 0 !important; height: 56px !important; padding: 0 26px !important; background: #ffffff !important; color: #000000 !important; border: 1px solid rgba(0,0,0,.16) !important; border-radius: 8px !important; font-size: 18px !important; font-weight: 300 !important; letter-spacing: -0.8px !important; text-decoration: none !important; cursor: pointer; }
html body.spike-steps .spike-isc-paybar button.spike-isc-back:hover { border-color: #000000 !important; }
html body.spike-steps .spike-isc-paybar #place_order.spike-isc-pay { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 56px !important; margin: 0 !important; padding: 0 24px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 12px !important; background: #000000 !important; color: #ffffff !important; border: 0 !important; border-radius: 8px !important; font-family: Inter, sans-serif !important; font-size: 18px !important; font-weight: 300 !important; letter-spacing: -0.8px !important; text-transform: none !important; }
html body.spike-steps .spike-isc-paybar #place_order.spike-isc-pay::before,
html body.spike-steps .spike-isc-paybar #place_order.spike-isc-pay::after { display: none !important; content: none !important; }
html body.spike-steps .spike-isc-paybar #place_order.spike-isc-pay:hover, html body.spike-steps .spike-isc-paybar #place_order.spike-isc-pay:focus-visible { background: #ff0000 !important; color: #ffffff !important; }
html body.spike-steps #payment .woocommerce-privacy-policy-text { margin: 0 0 16px !important; font-size: 13px !important; font-weight: 300 !important; color: #575757 !important; }

@media (max-width: 767px) {
  html body.spike-steps .spike-isc-method { padding: 16px !important; }
  html body.spike-steps .spike-isc-payhead h3 { margin-top: 24px !important; }
  /* Pay now always in reach, like Continue to payment */
  html body.spike-steps .spike-isc-paybar { position: sticky !important; bottom: 0 !important; z-index: 60 !important; background: #ffffff !important; margin: 0 -16px !important; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important; box-shadow: 0 -1px 0 rgba(0,0,0,.08), 0 -8px 24px rgba(0,0,0,.06) !important; }
  html body.spike-steps .spike-isc-paybar button.spike-isc-back { padding: 0 18px !important; }
}
/* 1.9.2: black buttons go red on hover, like Apply */
html body.spike-isc-layout button.spike-isc-continue:hover,
html body.spike-isc-layout button.spike-isc-continue:focus-visible { background: #ff0000 !important; border-color: #ff0000 !important; color: #ffffff !important; }
html body.spike-isc-layout button.spike-isc-continue,
html body.spike-steps .spike-isc-paybar #place_order.spike-isc-pay { transition: background-color .15s ease !important; }

/* ---------- 2.0.0: Confirmation page (3. Confirmation), delivery + in-store ---------- */
body.spike-isc-hero-on [data-id="235a458"],
body.spike-isc-hero-on [data-id="2e4d381"],
body.spike-isc-hero-on .woocommerce-order > *:not(.spike-isc-confirm),
body.spike-isc-hero-on .woocommerce-order-details,
body.spike-isc-hero-on .woocommerce-customer-details { display: none !important; }
body.spike-isc-hero-on, body.spike-isc-hero-on .elementor-4867 > .e-con, body.spike-isc-hero-on [data-id="e4c8193"] { background: #ffffff !important; }

.spike-isc-confirm { color: #000000; font-family: Inter, sans-serif; text-align: left; }
.spike-isc-confirm p { margin: 0; }
.spike-isc-confirm .spike-isc-header { background: #f6f6f6 !important; border-radius: 7px !important; margin: 0 0 32px !important; }
.spike-isc-confirm__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 541px); gap: 45px; align-items: start; }
.spike-isc-confirm__main { display: flex; flex-direction: column; gap: 28px; padding-left: 43px; min-width: 0; }
.spike-isc-confirm .spike-isc-hero { flex-direction: row; align-items: flex-start; gap: 20px; margin: 0; }
.spike-isc-confirm .spike-isc-hero__icon { flex: none; margin: 0; width: 52px; height: 52px; }
.spike-isc-confirm .spike-isc-hero__title { font-size: 36px !important; line-height: 42px !important; margin: 0 0 8px !important; text-wrap: balance; }
.spike-isc-confirm .spike-isc-hero__line { font-size: 17px; line-height: 1.45; }
.spike-isc-confirm .spike-isc-panel { background: #ffffff; border: 1px solid rgba(0,0,0,.16); border-radius: 10px; padding: 20px 22px; gap: 6px; }
.spike-isc-confirm .spike-isc-eyebrow { font-size: 14px; font-weight: 300; letter-spacing: -0.3px; text-transform: none; color: #575757; }
.spike-isc-confirm .spike-isc-store { font-size: 20px; line-height: 1.3; letter-spacing: -0.8px; }
.spike-isc-confirm .spike-isc-hours { font-size: 15px; font-weight: 300; letter-spacing: -0.3px; color: #575757; }
.spike-isc-confirm h2 { margin: 0 !important; font-size: 24px !important; line-height: 26px !important; font-weight: 500 !important; letter-spacing: -1.5px !important; color: #000000 !important; }
.spike-isc-confirm .spike-isc-next { gap: 14px; }
.spike-isc-confirm .spike-isc-step { font-size: 17px; }
.spike-isc-confirm .spike-isc-num { border: 1px solid rgba(0,0,0,.16); border-radius: 14px; font-size: 13px; font-weight: 500; letter-spacing: 0; }
.spike-isc-confirm .spike-isc-small { font-size: 14px; font-weight: 300; line-height: 1.5; color: #575757; letter-spacing: -0.3px; }
.spike-isc-details { display: flex; flex-direction: column; gap: 14px; }
.spike-isc-details dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.spike-isc-details dt { font-size: 14px; font-weight: 300; color: #575757; margin: 0 0 4px; letter-spacing: -0.3px; }
.spike-isc-details dd { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: -0.5px; overflow-wrap: anywhere; }
a.spike-isc-shop { display: inline-flex; align-self: flex-start; align-items: center; height: 56px; padding: 0 28px; background: #000000; color: #ffffff !important; border-radius: 8px; font-size: 18px; font-weight: 300; letter-spacing: -0.8px; text-decoration: none !important; transition: background-color .15s ease; }
a.spike-isc-shop:hover, a.spike-isc-shop:focus-visible { background: #ff0000; color: #ffffff !important; }

.spike-isc-order { background: #f6f6f6; border-radius: 7px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.spike-isc-order__item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.spike-isc-order__img { position: relative; width: 64px; height: 64px; border-radius: 8px; background: #ebebeb; }
.spike-isc-order__img img { width: 64px !important; height: 64px !important; object-fit: cover; border-radius: 8px; display: block; }
.spike-isc-order__qty { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 11px; background: #000000; color: #ffffff; font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; }
.spike-isc-order__name { font-size: 16px; font-weight: 500; letter-spacing: -0.6px; line-height: 1.3; }
.spike-isc-order__name small { display: block; font-size: 14px; font-weight: 300; color: #575757; letter-spacing: -0.3px; margin-top: 2px; }
.spike-isc-order__price { font-size: 16px; font-weight: 400; letter-spacing: -0.6px; font-variant-numeric: tabular-nums; }
.spike-isc-order__rows { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid rgba(0,0,0,.12); padding-top: 18px; }
.spike-isc-order__rows > div, .spike-isc-order__total { display: flex; justify-content: space-between; gap: 16px; font-size: 16px; font-weight: 300; letter-spacing: -0.6px; font-variant-numeric: tabular-nums; }
.spike-isc-order__rows > div > span:first-child { color: #575757; }
.spike-isc-order__total { border-top: 1px solid rgba(0,0,0,.12); padding-top: 18px; font-size: 20px; font-weight: 500; letter-spacing: -1px; }
.spike-isc-order__paid { align-self: flex-start; font-size: 13px; font-weight: 500; letter-spacing: 0.2px; padding: 4px 10px; border-radius: 12px; background: #000000; color: #ffffff; }

@media (max-width: 1024px) {
  .spike-isc-confirm__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .spike-isc-confirm__main { padding-left: 0; }
  .spike-isc-order { order: 2; }
}
@media (min-width: 768px) and (max-width: 1024px) { .spike-isc-confirm .spike-isc-header { padding: 32px 38px !important; } }
@media (max-width: 767px) {
  .spike-isc-confirm .spike-isc-header { padding: 20px !important; margin-bottom: 20px !important; }
  .spike-isc-confirm .spike-isc-hero { gap: 14px; }
  .spike-isc-confirm .spike-isc-hero__icon { width: 40px; height: 40px; }
  .spike-isc-confirm .spike-isc-hero__icon svg { width: 20px; height: 20px; }
  .spike-isc-confirm .spike-isc-hero__title { font-size: 28px !important; line-height: 34px !important; }
  .spike-isc-details dl { grid-template-columns: minmax(0, 1fr); }
  a.spike-isc-shop { align-self: stretch; justify-content: center; }
  .spike-isc-order { padding: 20px; }
}
@media (max-width: 1024px) {
  .spike-isc-confirm__main { display: contents; }
  .spike-isc-confirm__main > .spike-isc-hero { order: 1; }
  .spike-isc-confirm__main > .spike-isc-panel { order: 2; }
  .spike-isc-confirm__grid > .spike-isc-order { order: 3; }
  .spike-isc-confirm__main > .spike-isc-next { order: 4; }
  .spike-isc-confirm__main > .spike-isc-details { order: 5; }
  .spike-isc-confirm__main > a.spike-isc-shop { order: 6; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .spike-isc-confirm__grid > * { margin-left: 38px !important; margin-right: 38px !important; }
}
/* Confirmation page frame: full width, edges on the logo (3vw), no boxed card */
html body.spike-isc-hero-on [data-id="e4c8193"] { padding-left: 3vw !important; padding-right: 3vw !important; }
html body.spike-isc-hero-on [data-id="e4c8193"] > .e-con-inner { max-width: none !important; width: 100% !important; padding: 24px 0 80px !important; }
html body.spike-isc-hero-on [data-id="28f6cfd"] { border: 0 !important; box-shadow: none !important; padding: 0 !important; width: 100% !important; max-width: none !important; background: #ffffff !important; }
html body.spike-isc-hero-on [data-id="5fc6173"], html body.spike-isc-hero-on [data-id="eac3153"], html body.spike-isc-hero-on .wcf-thankyou-wrap { width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
html body.spike-isc-hero-on [data-id="e4c8193"] > .e-con-inner { padding-top: 56px !important; }
.spike-isc-confirm h1, .spike-isc-confirm h2, .spike-isc-confirm p, .spike-isc-confirm .spike-isc-pagetitle { text-transform: none !important; }
.spike-isc-confirm .spike-isc-store.spike-isc-address { font-size: 17px; line-height: 1.5; font-weight: 400; letter-spacing: -0.5px; }
@media (max-width: 1024px) {
  html body.spike-isc-hero-on [data-id="e4c8193"] { padding-left: 5vw !important; padding-right: 5vw !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  html body.spike-isc-hero-on [data-id="e4c8193"] > .e-con-inner { padding-top: 130px !important; }
  .spike-isc-confirm__main > * { margin-left: 38px !important; margin-right: 38px !important; }
}
@media (max-width: 767px) {
  html body.spike-isc-hero-on [data-id="e4c8193"] > .e-con-inner { padding-top: 96px !important; }
}

/* 2.0.4: more breathing room on the confirmation page */
.spike-isc-confirm .spike-isc-header { margin-bottom: 56px !important; }
.spike-isc-confirm__grid { gap: 64px; }
.spike-isc-confirm__main { gap: 48px; }
.spike-isc-confirm .spike-isc-hero { gap: 24px; }
.spike-isc-confirm .spike-isc-hero__title { margin-bottom: 12px !important; }
.spike-isc-confirm .spike-isc-hero__line + .spike-isc-hero__line { margin-top: 4px !important; }
.spike-isc-confirm .spike-isc-panel { padding: 26px 28px; gap: 10px; }
.spike-isc-confirm .spike-isc-next { gap: 20px; }
.spike-isc-confirm .spike-isc-next h2, .spike-isc-details h2 { margin-bottom: 4px !important; }
.spike-isc-confirm .spike-isc-small { margin-top: 4px !important; }
.spike-isc-details { gap: 20px; }
.spike-isc-details dl { gap: 24px; }
.spike-isc-details dt { margin-bottom: 6px; }
.spike-isc-order { padding: 36px; gap: 24px; }
.spike-isc-order__item { gap: 18px; }
.spike-isc-order__rows { gap: 14px; padding-top: 24px; }
.spike-isc-order__total { padding-top: 24px; }
.spike-isc-order__paid { margin-top: 4px; }
@media (max-width: 1024px) {
  .spike-isc-confirm__grid { gap: 40px; }
}
@media (max-width: 767px) {
  .spike-isc-confirm .spike-isc-header { margin-bottom: 36px !important; }
  .spike-isc-confirm__grid { gap: 36px; }
  .spike-isc-confirm .spike-isc-hero { gap: 16px; }
  .spike-isc-confirm .spike-isc-panel { padding: 22px; }
  .spike-isc-order { padding: 24px; gap: 20px; }
  .spike-isc-details dl { gap: 20px; }
}
/* Admin-only click-through link on the Payment step (preview) */
html body .spike-isc-demolink { display: block; margin: 16px 0 0; padding: 12px 14px; border: 1px dashed rgba(0,0,0,.3); border-radius: 8px; font-size: 14px; font-weight: 400; color: #000000 !important; text-decoration: underline; text-align: center; background: #fffbe6; }
@media (max-width: 767px) { html body .spike-isc-demolink { margin-bottom: 8px; } }
/* 2.1.1: the SPIKE logo file has ~2px of empty space on its left; pull it back so the letters sit on the box edge */
@media (min-width: 768px) {
  html body.spike-isc-layout [data-id="7d65fb5"] img { position: relative; left: -2px; }
}

/* 2.1.3: "What happens next" in a soft grey box; order number in "Your order" */
.spike-isc-confirm .spike-isc-next { background: #f6f6f6; border-radius: 7px; padding: 32px 36px; gap: 20px; }
.spike-isc-confirm .spike-isc-next .spike-isc-num { background: #ffffff; border-color: rgba(0,0,0,.12); }
.spike-isc-confirm .spike-isc-next .spike-isc-small { border-top: 1px solid rgba(0,0,0,.12); padding-top: 18px; margin-top: 6px !important; }
.spike-isc-order__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.spike-isc-order__number { font-size: 16px; font-weight: 400; letter-spacing: -0.5px; color: #575757; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .spike-isc-confirm .spike-isc-next { padding: 24px 22px; } }

/* 2.1.4: SPIKE body type everywhere we add text: Inter 300, black, -0.8px (as on the shop pages) */
.spike-isc-confirm, .spike-isc-confirm *,
.spike-isc-header, .spike-isc-header *,
#spike-isc-shipwrap, #spike-isc-shipwrap *,
.spike-isc-section, .spike-isc-section *,
.spike-isc-method, .spike-isc-method *,
.spike-isc-paybar, .spike-isc-paybar *,
.spike-isc-continue-wrap, .spike-isc-continue-wrap *,
.spike-isc-payment-note, .spike-isc-secure, .spike-isc-payhead, .spike-isc-payhead *,
.spike-isc-updating-msg, .spike-isc-demolink,
body.spike-steps #payment .woocommerce-privacy-policy-text,
body.spike-steps #payment ul.wc_payment_methods > li > label { font-family: Inter, sans-serif !important; }

/* secondary text: black, light weight (no greys) */
html body .spike-isc-hero__line,
html body .spike-isc-confirm .spike-isc-eyebrow,
html body .spike-isc-confirm .spike-isc-hours,
html body .spike-isc-confirm .spike-isc-small,
html body .spike-isc-details dt,
html body .spike-isc-order__name small,
html body .spike-isc-order__rows > div > span:first-child,
html body .spike-isc-order__number,
html body .spike-isc-hours,
html body .spike-isc-ready,
html body .spike-isc-eyebrow,
html body .spike-isc-small,
html body .spike-isc-section p,
html body .spike-isc-ship-row td,
html body .spike-isc-continue__msg,
html body .spike-isc-updating-msg,
html body.spike-steps .spike-isc-method__heading,
html body.spike-steps .spike-isc-method__detail,
html body.spike-steps #payment .spike-isc-secure,
html body.spike-steps #payment .woocommerce-privacy-policy-text,
html body.spike-steps #payment .woocommerce-privacy-policy-text a,
html body .spike-isc-payment-note,
html body ul.spike-isc-cards > li.spike-isc-group { color: #000000 !important; }

/* weights: 300 for text, 500 only for headings/titles/totals */
html body .spike-isc-details dd,
html body .spike-isc-order__price,
html body .spike-isc-order__number,
html body .spike-isc-order__name,
html body .spike-isc-confirm .spike-isc-store.spike-isc-address,
html body.spike-isc-layout .woocommerce-shipping-fields #ship-to-different-address,
html body.spike-isc-layout .woocommerce-shipping-fields #ship-to-different-address *,
html body select.spike-isc-storepick__select,
html body .spike-isc-order__paid,
html body .spike-isc-demolink { font-weight: 300 !important; }

/* sizes: body 18px, small print 16px */
html body .spike-isc-hero__line,
html body .spike-isc-confirm .spike-isc-hours,
html body .spike-isc-confirm .spike-isc-eyebrow,
html body .spike-isc-confirm .spike-isc-step,
html body .spike-isc-details dd,
html body .spike-isc-order__name,
html body .spike-isc-order__price,
html body .spike-isc-order__rows > div,
html body .spike-isc-order__number,
html body .spike-isc-confirm .spike-isc-store.spike-isc-address { font-size: 18px !important; letter-spacing: -0.8px !important; }
html body .spike-isc-confirm .spike-isc-small,
html body .spike-isc-details dt,
html body .spike-isc-order__name small,
html body.spike-steps .spike-isc-method__heading,
html body.spike-steps #payment .spike-isc-secure,
html body.spike-steps #payment .woocommerce-privacy-policy-text,
html body .spike-isc-order__paid { font-size: 16px !important; letter-spacing: -0.8px !important; }
html body.spike-steps .spike-isc-method__detail { font-size: 18px !important; letter-spacing: -0.8px !important; }
html body ol.spike-isc-steps-nav li:not(.sep) { color: #000000 !important; }
html body.spike-isc-layout .wcf-order-review-toggle, html body.spike-isc-layout .wcf-order-review-toggle * { color: #000000 !important; font-family: Inter, sans-serif !important; }
html body.spike-isc-layout form.checkout input:not([type=radio]):not([type=checkbox]),
html body.spike-isc-layout form.checkout select,
html body.spike-isc-layout form.checkout textarea,
html body.spike-isc-layout form.checkout .select2-selection__rendered,
html body.spike-isc-layout #spike-isc-shipwrap .spike-isc-title,
html body.spike-isc-layout #spike-isc-shipwrap .spike-isc-price,
html body.spike-isc-layout #spike-isc-shipwrap span { color: #000000 !important; }
html body.spike-isc-layout form.checkout .select2-selection__rendered { font-weight: 300 !important; font-family: Inter, sans-serif !important; }
html body.spike-steps button.spike-isc-method__change { font-size: 16px !important; font-weight: 300 !important; }
@media (max-width: 1024px) { html body a.spike-isc-shop { justify-content: center !important; } }

/* 2.2.1: heading + order summary stick together (no overlap at the end of the page) */
html body.spike-isc-layout .wcf-order-wrap .spike-isc-stick #order_review_heading,
html body.spike-isc-layout .wcf-order-wrap .spike-isc-stick #order_review { position: static !important; top: auto !important; }
@media (min-width: 1025px) {
  html body.spike-isc-layout .wcf-order-wrap .spike-isc-stick { position: sticky; top: 28px; z-index: 2; }
  html body.admin-bar.spike-isc-layout .wcf-order-wrap .spike-isc-stick { top: 60px; }
}
/* keep CartFlows' chevron icon font on the order summary toggle */
html body.spike-isc-layout .wcf-order-review-toggle .cartflows-icon { font-family: 'cartflows-icon' !important; }
/* 2.2.3: town + postcode fill the row when there's no county/state field */
@media (min-width: 768px) {
  html body.spike-isc-layout .woocommerce-billing-fields__field-wrapper.spike-isc-nostate > #billing_city_field,
  html body.spike-isc-layout .woocommerce-billing-fields__field-wrapper.spike-isc-nostate > #billing_postcode_field { width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; }
}

/* 2.3.0+: Continue waits for the totals to refresh (a click during an update goes through when it finishes) */
html body .spike-isc-continue.is-waiting { opacity: .7 !important; cursor: progress !important; }

/* 2.3.3: the card box fits inside its border (CartFlows makes it 24px wider, which cut off its right edge) */
html body.spike-steps #payment ul.wc_payment_methods > li.wc_payment_method > .payment_box { width: auto !important; max-width: 100% !important; }
@media (max-width: 767px) {
  /* The floating cookie-settings button covered Back / Continue in the bottom bar on phones */
  html body.spike-isc-layout .cky-btn-revisit-wrapper { display: none !important; }
}
/* 2.3.3: while totals refresh, dim the summary / payment box instead of swapping in CartFlows' grey skeleton (no flash) */
html body.spike-isc-layout .wcf-embed-checkout-form table.shop_table .blockUI.blockOverlay,
html body.spike-isc-layout .wcf-embed-checkout-form .woocommerce-checkout-payment .blockUI.blockOverlay { background: #ffffff !important; opacity: .55 !important; }
html body.spike-isc-layout .wcf-embed-checkout-form table.shop_table .blockUI.blockOverlay::before,
html body.spike-isc-layout .wcf-embed-checkout-form .woocommerce-checkout-payment .blockUI.blockOverlay::before { display: none !important; }
/* 2.3.6: the phone / iPad summary shows our delivery line only (CartFlows' own first-load "Shipping" row doubled it) */
html body.spike-isc-layout .wcf-collapsed-order-review-section tr.cart-shipping { display: none !important; }
/* 2.3.7: tappable email address / phone number in "What happens next" */
html body .spike-isc-next .spike-isc-step a { color: inherit !important; text-decoration: underline !important; text-underline-offset: 3px; white-space: nowrap; }

/* 2.5.0: payment step with the Stripe plugin's plain card form (Card Element) and its Apple Pay / Google Pay row */
html body.spike-steps .spike-isc-payintro { display: flex !important; align-items: center; gap: 6px; margin: -6px 0 16px !important; font-size: 14px !important; font-weight: 300 !important; letter-spacing: -0.3px !important; color: #575757 !important; line-height: 1.4 !important; }
html body.spike-steps .spike-isc-payintro .spike-isc-lock { flex: none; color: #000000; }
body.spike-steps.spike-step-1 .spike-isc-payintro { display: none !important; }
html body.spike-steps #payment .spike-isc-brands { display: flex !important; gap: 5px; flex: none; margin-left: auto; }
html body.spike-steps #payment .spike-isc-brand { font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.2px !important; line-height: 1 !important; color: #000000 !important; border: 1px solid #d5d5d5 !important; border-radius: 4px !important; padding: 4px 6px !important; background: #ffffff !important; }
html body.spike-steps #payment li.payment_method_cpsw_stripe .cpsw-stripe-info { display: none !important; }
html body.spike-steps #payment .spike-isc-cardform { display: flex !important; flex-wrap: wrap !important; gap: 0 10px !important; margin: 0 !important; padding: 0 !important; }
html body.spike-steps #payment .spike-isc-cardform > strong,
html body.spike-steps #payment .spike-isc-cardform .cpsw-expiry-wrapper > strong,
html body.spike-steps #payment .spike-isc-cardform .cpsw-cvc-wrapper > strong { display: block !important; width: 100% !important; margin: 0 0 6px !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: -0.3px !important; color: #575757 !important; line-height: 1.3 !important; }
html body.spike-steps #payment .spike-isc-cardform > strong,
html body.spike-steps #payment .spike-isc-cardform > .cpsw-number,
html body.spike-steps #payment .spike-isc-cardform > .cpsw-number-error { flex: 0 0 100% !important; }
html body.spike-steps #payment .spike-isc-cardform .cpsw-expiry-wrapper,
html body.spike-steps #payment .spike-isc-cardform .cpsw-cvc-wrapper { display: block !important; flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; margin: 14px 0 0 !important; float: none !important; padding: 0 !important; }
html body.spike-steps #payment .spike-isc-cardform .cpsw-number,
html body.spike-steps #payment .spike-isc-cardform .cpsw-expiry,
html body.spike-steps #payment .spike-isc-cardform .cpsw-cvc { display: block !important; box-sizing: border-box !important; width: 100% !important; min-height: 48px !important; padding: 0 12px !important; margin: 0 !important; border: 1px solid rgba(0,0,0,.16) !important; border-radius: 6px !important; background: #ffffff !important; box-shadow: none !important; }
html body.spike-steps #payment .spike-isc-cardform .StripeElement--focus { border-color: #000000 !important; }
html body.spike-steps #payment .spike-isc-cardform .StripeElement--invalid { border-color: #d0021b !important; }
html body.spike-steps #payment .spike-isc-cardform [class$="-error"]:not(:empty) { display: block !important; margin: 4px 0 0 !important; font-size: 12px !important; color: #d0021b !important; }
html body.spike-steps #payment li.payment_method_cpsw_stripe .woocommerce-SavedPaymentMethods-saveNew { margin: 14px 0 0 !important; padding: 0 !important; font-size: 14px !important; font-weight: 300 !important; color: #575757 !important; }
/* Apple Pay / Google Pay row (Stripe plugin's express checkout), top of step 1 */
html body.spike-steps #cpsw-payment-request-wrapper.spike-isc-express { margin: 0 0 28px !important; padding: 0 !important; border: 0 !important; background: transparent !important; width: 100% !important; }
html body.spike-steps #cpsw-payment-request-wrapper.spike-isc-express fieldset { margin: 0 !important; padding: 0 !important; border: 0 !important; min-width: 0 !important; }
html body.spike-steps #cpsw-payment-request-wrapper.spike-isc-express #cpsw-payment-request-title { display: block !important; width: 100% !important; margin: 0 0 10px !important; padding: 0 !important; border: 0 !important; text-align: center !important; font-size: 13px !important; font-weight: 300 !important; letter-spacing: -0.3px !important; color: #575757 !important; line-height: 1.4 !important; background: transparent !important; }
html body.spike-steps #cpsw-payment-request-wrapper.spike-isc-express #cpsw-payment-request-tagline { display: none !important; }
body.spike-steps.spike-step-2 #cpsw-payment-request-wrapper { display: none !important; }
html body.spike-steps #payment .spike-isc-cardform [class$="-error"]:empty { display: none !important; }
html body.spike-steps #payment .spike-isc-cardform .cpsw-save-cards { display: block !important; flex: 0 0 100% !important; width: 100% !important; margin: 14px 0 0 !important; padding: 0 !important; font-size: 14px !important; font-weight: 300 !important; color: #575757 !important; }
html body.spike-steps #payment .spike-isc-cardform .cpsw-save-cards label { font-size: 14px !important; font-weight: 300 !important; color: #575757 !important; letter-spacing: -0.3px !important; }
html body.spike-steps #cpsw-payment-request-wrapper.spike-isc-express .moderncart-payment-request-separator { display: none !important; }
html body.spike-steps #cpsw-payment-request-wrapper.spike-isc-express #cpsw-payment-request-separator { margin: 4px 0 0 !important; }

/* 2.6.0: one page (details, delivery and payment together), then the confirmation page */
html body.spike-steps.spike-onepage .spike-isc-paybar { position: static !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; background: transparent !important; }
html body.spike-steps.spike-onepage .spike-isc-paybar #place_order.spike-isc-pay { width: 100% !important; }

/* 2.6.0: one corner radius (8px) for every box, field and button, and the body font everywhere */
html body.spike-isc-layout .spike-isc-header,
html body.spike-isc-layout .wcf-order-wrap,
html body.spike-isc-layout .wcf-collapsed-order-review-section,
html body.spike-isc-layout #wcf-embed-checkout-form input.input-text,
html body.spike-isc-layout #wcf-embed-checkout-form select,
html body.spike-isc-layout #wcf-embed-checkout-form textarea,
html body.spike-isc-layout #wcf-embed-checkout-form .select2-container .select2-selection,
html body.spike-isc-layout .select2-container .select2-dropdown,
html body.spike-isc-layout #wcf-embed-checkout-form ul.spike-isc-cards > li.spike-isc-opt,
html body.spike-isc-layout #wcf-embed-checkout-form ul.spike-isc-cards > li.spike-isc-toggle,
html body.spike-isc-layout #wcf-embed-checkout-form select.spike-isc-storepick__select,
html body.spike-isc-layout #wcf-embed-checkout-form .spike-isc-payment-note,
html body.spike-isc-layout #wcf-embed-checkout-form .spike-isc-method,
html body.spike-isc-layout #wcf-embed-checkout-form button.spike-isc-method__change,
html body.spike-isc-layout #wcf-embed-checkout-form button.spike-isc-continue,
html body.spike-isc-layout #wcf-embed-checkout-form #payment ul.wc_payment_methods > li.wc_payment_method,
html body.spike-isc-layout #wcf-embed-checkout-form .spike-isc-paybar button.spike-isc-back,
html body.spike-isc-layout #wcf-embed-checkout-form .spike-isc-paybar #place_order.spike-isc-pay,
html body.spike-isc-layout #wcf-embed-checkout-form #payment .spike-isc-cardform .cpsw-number,
html body.spike-isc-layout #wcf-embed-checkout-form #payment .spike-isc-cardform .cpsw-expiry,
html body.spike-isc-layout #wcf-embed-checkout-form #payment .spike-isc-cardform .cpsw-cvc,
html body.spike-isc-layout #wcf-embed-checkout-form .spike-isc-demolink,
html body.spike-isc-layout #wcf-embed-checkout-form .woocommerce-error,
html body.spike-isc-layout #wcf-embed-checkout-form .woocommerce-info,
html body.spike-isc-layout #wcf-embed-checkout-form .woocommerce-message,
html body.spike-isc-layout #order_review_coupon_code,
html body.spike-isc-layout .wcf-order-wrap input.input-text,
html body.spike-isc-layout .wcf-order-wrap button,
html body.spike-isc-layout .wcf-order-wrap .spike-qty__stepper,
html body.spike-isc-layout .wcf-order-wrap .wcf-product-image,
html body.spike-isc-layout .wcf-order-wrap .wcf-product-thumbnail,
html body.spike-isc-layout .wcf-order-wrap .wcf-product-thumbnail img,
html body.spike-isc-layout .wcf-collapsed-order-review-section input.input-text,
html body.spike-isc-layout .wcf-collapsed-order-review-section button,
html body.spike-isc-layout .wcf-collapsed-order-review-section .spike-qty__stepper,
html body.spike-isc-layout .wcf-collapsed-order-review-section .wcf-product-thumbnail img,
.spike-isc-confirm .spike-isc-header,
.spike-isc-confirm .spike-isc-panel,
.spike-isc-confirm .spike-isc-next,
.spike-isc-confirm a.spike-isc-shop,
.spike-isc-confirm .spike-isc-order,
.spike-isc-confirm .spike-isc-order__img,
.spike-isc-confirm .spike-isc-order__img img { border-radius: 8px !important; }
html body.spike-isc-layout #wcf-embed-checkout-form #cpsw-payment-request-wrapper fieldset { border-radius: 0 !important; }
html body.spike-isc-layout #wcf-embed-checkout-form input,
html body.spike-isc-layout #wcf-embed-checkout-form select,
html body.spike-isc-layout #wcf-embed-checkout-form textarea,
html body.spike-isc-layout #wcf-embed-checkout-form button,
html body.spike-isc-layout #wcf-embed-checkout-form .select2-selection__rendered,
html body.spike-isc-layout .select2-results__option,
html body.spike-isc-layout .wcf-order-wrap input,
html body.spike-isc-layout .wcf-order-wrap button,
html body.spike-isc-layout .wcf-collapsed-order-review-section input,
html body.spike-isc-layout .wcf-collapsed-order-review-section button,
html body.spike-isc-layout #order_review_coupon_code,
.spike-isc-confirm, .spike-isc-confirm * { font-family: inherit !important; }
/* 2.6.0: spacing */
html body.spike-steps #payment .form-row.place-order > noscript,
html body.spike-steps #payment .form-row.place-order::before { display: none !important; content: none !important; }
@media (min-width: 768px) and (max-width: 1024px) {
	/* iPad: the header box lines up with the boxes below it (same as on phones) */
	html body.spike-isc-layout .spike-isc-header,
	html body .spike-isc-confirm .spike-isc-header { margin-left: 38px !important; margin-right: 38px !important; padding: 28px 24px !important; width: auto !important; max-width: none !important; }
}
/* 2.6.7: Apple Pay / Google Pay row lines up with the boxes below it, even spacing around "OR" */
html body.spike-steps #cpsw-payment-request-wrapper.spike-isc-express iframe { max-width: none !important; }
html body.spike-steps #cpsw-payment-request-wrapper.spike-isc-express.checkout { margin-bottom: 0 !important; }
html body.spike-steps #cpsw-payment-request-wrapper.spike-isc-express.checkout fieldset.cpsw-payment-request-button-wrapper { margin-bottom: 0 !important; }
html body.spike-steps #cpsw-payment-request-wrapper.spike-isc-express #cpsw-payment-request-separator { margin: 16px 0 0 !important; }
html body.spike-steps #cpsw-payment-request-wrapper.spike-isc-express #cpsw-payment-request-separator::before { margin: 0 14px 0 0 !important; }
html body.spike-steps #cpsw-payment-request-wrapper.spike-isc-express #cpsw-payment-request-separator::after { margin: 0 0 0 14px !important; }
/* 2.6.8: desktop order summary: the grey card is only as tall as its content (no empty grey column
   below it) and it follows the shopper down the page. Taller than the window (long basket, short
   laptop screen): it scrolls inside itself so the coupon and total can still be reached. */
@media (min-width: 1025px) {
  html body.spike-isc-layout form.checkout > .wcf-order-wrap { background: transparent !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  html body.spike-isc-layout .wcf-order-wrap .spike-isc-stick { background: #f6f6f6; border-radius: 8px; padding: 28px; box-sizing: border-box; max-height: calc(100vh - 56px); overflow-y: auto; overscroll-behavior: contain; }
  html body.admin-bar.spike-isc-layout .wcf-order-wrap .spike-isc-stick { max-height: calc(100vh - 88px); }
}
/* 2.6.9: smaller tick next to "Thanks, your order is paid", centred on the first line of the heading */
.spike-isc-confirm .spike-isc-hero { gap: 16px; }
.spike-isc-confirm .spike-isc-hero__icon { width: 34px; height: 34px; margin-top: 4px; border-radius: 50%; }
.spike-isc-confirm .spike-isc-hero__icon svg { width: 17px; height: 17px; }
@media (max-width: 767px) {
  .spike-isc-confirm .spike-isc-hero { gap: 12px; }
  .spike-isc-confirm .spike-isc-hero__icon { width: 28px; height: 28px; margin-top: 3px; }
  .spike-isc-confirm .spike-isc-hero__icon svg { width: 14px; height: 14px; }
}
/* 2.7.0: card icons next to "Credit / debit card" (WooCommerce's own icons) */
html body.spike-steps #payment .spike-isc-brands { align-items: center; gap: 6px; }
html body.spike-steps #payment img.spike-isc-cardicon { display: block !important; width: 38px !important; height: 24px !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 4px !important; box-shadow: none !important; object-fit: contain; }
@media (max-width: 767px) { html body.spike-steps #payment img.spike-isc-cardicon { width: 34px !important; height: 22px !important; } }
/* 2.7.0: total shows the currency code, and the shipping included in it when shipping is paid */
html body .spike-isc-cur { font-size: 13px !important; font-weight: 300 !important; letter-spacing: 0 !important; color: #575757 !important; margin-right: 2px; vertical-align: 2px; }
html body .spike-isc-incl { display: block !important; margin-top: 4px !important; font-size: 13px !important; line-height: 1.3 !important; font-weight: 300 !important; letter-spacing: -0.3px !important; color: #575757 !important; text-align: right !important; white-space: nowrap; }
.spike-isc-order__amt { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
/* 2.7.2: no "Your details" block on the confirmation page */
.spike-isc-confirm .spike-isc-details { display: none !important; }
/* 2.7.3: SPIKE's own Visa / Mastercard icons (assets/cards), each kept at its own shape */
html body.spike-steps #payment img.spike-isc-cardicon { width: auto !important; height: 24px !important; border-radius: 0 !important; object-fit: contain; }
@media (max-width: 767px) { html body.spike-steps #payment img.spike-isc-cardicon { width: auto !important; height: 22px !important; } }
/* 2.7.4: Continue Shopping turns SPIKE red (#ff0000, the logo red) on hover, keyboard focus and tap */
html body .spike-isc-confirm a.spike-isc-shop:hover,
html body .spike-isc-confirm a.spike-isc-shop:focus-visible,
html body .spike-isc-confirm a.spike-isc-shop:active { background: #ff0000 !important; color: #ffffff !important; }
/* 2.7.5: with the order notes box gone, "Payment" sits the same distance below the delivery options as "Delivery or collection" sits below Contact */
html body.spike-steps.spike-onepage .spike-isc-payhead h3 { margin-top: 0 !important; }

/* ---------- 2.8.2: no flash of the old checkout on load ----------
 * body.spike-isc-preload (added by the plugin) keeps the checkout invisible until the script has built
 * the new layout; the inline CSS shows it after 6 s anyway if the script never runs. Then a short fade-in. */
html body.spike-isc-reveal #wcf-embed-checkout-form,
html body.spike-isc-reveal .spike-isc-header { animation: spikeIscFadeIn .25s ease-out both; }
@keyframes spikeIscFadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	html body.spike-isc-reveal #wcf-embed-checkout-form,
	html body.spike-isc-reveal .spike-isc-header { animation: none; }
}
/* While hidden, the page frame already looks like the new layout (white page, no grey band or card border). */
html body.spike-isc-preload,
html body.spike-isc-preload [data-id="40650e2"],
html body.spike-isc-preload [data-id="b9fe25e"] { background: #ffffff !important; }
html body.spike-isc-preload [data-id="6832620"] { border-color: transparent !important; box-shadow: none !important; }

/* 2.8.4: delivery / collection options sit right under Country (address below them), full row width */
html body .woocommerce-billing-fields__field-wrapper > #spike-isc-shipwrap.spike-isc-shipwrap--infields {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	padding: 0 7px !important;
	margin: 0 0 15px !important;
}

/* 2.8.5: while WooCommerce re-checks totals after a delivery choice (and once on load), keep the summary and
 * payment readable; the overlay stays (clicks wait) but is invisible. */
html body.spike-isc-layout.spike-isc-quiet .wcf-order-wrap .blockUI.blockOverlay,
html body.spike-isc-layout.spike-isc-quiet .wcf-embed-checkout-form table.shop_table .blockUI.blockOverlay,
html body.spike-isc-layout.spike-isc-quiet .wcf-embed-checkout-form .woocommerce-checkout-payment .blockUI.blockOverlay,
html body.spike-isc-layout.spike-isc-quiet .wcf-collapsed-order-review-section .blockUI.blockOverlay {
	background: transparent !important;
	opacity: 0 !important;
}

/* ---------- 2.8.6: empty cart ("Your cart is empty") ---------- */
html body.spike-isc-is-empty .spike-isc-header,
html body.spike-isc-is-empty #wcf-embed-checkout-form,
html body.spike-isc-is-empty .wcf-collapsed-order-review-section,
html body.spike-isc-is-empty .woocommerce-notices-wrapper { display: none !important; }
html body .spike-isc-empty {
	display: flex; flex-direction: column; box-sizing: border-box;
	width: 100%; min-height: 460px; margin: 0 0 48px; padding: 43px;
	background: #f6f6f6; border-radius: 7px;
	font-family: Inter, sans-serif; font-weight: 300; letter-spacing: -0.8px; color: #000;
	text-align: left;
}
html body .spike-isc-empty__crumbs { font-size: 16px; line-height: 1.4; color: #000; }
html body .spike-isc-empty__crumbs a, html body .spike-isc-empty__crumbs span { font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; }
html body .spike-isc-empty__crumbs a { color: #000 !important; text-decoration: none !important; }
html body .spike-isc-empty__crumbs a:hover { color: #575757 !important; }
html body .spike-isc-empty__crumbs span { color: #575757; }
html body .spike-isc-empty__body {
	flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; padding: 56px 0 24px;
}
html body .spike-isc-empty__icon { display: block; width: 54px; height: 54px; margin: 0 0 30px; color: #000; }
html body h1.spike-isc-empty__title {
	margin: 0 !important; padding: 0 !important;
	font-family: Inter, sans-serif !important; font-size: 44px !important; line-height: 1.1 !important;
	font-weight: 500 !important; letter-spacing: -2.1px !important; color: #000 !important; text-transform: none !important;
}
html body a.spike-isc-empty__shop,
html body .spike-isc-empty__cats a {
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 8px; background: #000 !important; color: #fff !important; border: 0 !important;
	font-family: Inter, sans-serif; font-weight: 300; letter-spacing: -0.8px;
	text-decoration: none !important; text-transform: none !important; box-shadow: none !important;
	transition: background-color .15s ease;
}
html body a.spike-isc-empty__shop { height: 56px; padding: 0 28px; margin-top: 36px; font-size: 18px; }
html body .spike-isc-empty__cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
html body .spike-isc-empty__cats a { height: 44px; padding: 0 18px; font-size: 16px; }
html body a.spike-isc-empty__shop:hover, html body a.spike-isc-empty__shop:focus-visible, html body a.spike-isc-empty__shop:active,
html body .spike-isc-empty__cats a:hover, html body .spike-isc-empty__cats a:focus-visible, html body .spike-isc-empty__cats a:active {
	background: #ff0000 !important; color: #fff !important;
}
@media (max-width: 767px) {
	html body .spike-isc-empty { min-height: 420px; padding: 24px 20px; margin-bottom: 32px; }
	html body .spike-isc-empty__crumbs { font-size: 14px; }
	html body .spike-isc-empty__body { padding: 40px 0 12px; }
	html body .spike-isc-empty__icon { width: 46px; height: 46px; margin-bottom: 24px; }
	html body h1.spike-isc-empty__title { font-size: 30px !important; line-height: 36px !important; letter-spacing: -1.4px !important; }
	html body a.spike-isc-empty__shop { align-self: stretch; margin-top: 30px; }
	html body .spike-isc-empty__cats { margin-top: 20px; }
}

/* ---------- 2.8.9: Apple Pay / Google Pay row ---------- */
/* Room for the buttons as soon as the row shows (no second jump while Stripe draws them), and a soft fade-in. */
html body.spike-steps #cpsw-payment-request-wrapper.spike-isc-express #cpsw-payment-request-custom-button { min-height: 48px; }
html body.spike-steps #cpsw-payment-request-wrapper.spike-isc-express { animation: spikeIscExpressIn .3s ease-out both; }
@keyframes spikeIscExpressIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html body.spike-steps #cpsw-payment-request-wrapper.spike-isc-express { animation: none; } }