/*
 * Cart & checkout visual redesign.
 * Built entirely on the theme's own --hestia-primary-color customizer
 * variable (see inc/views/inline/class-hestia-colors.php) - every accent
 * here is derived from that single value via color-mix(), so it always
 * matches whatever brand color is set in the Customizer.
 */

body.woocommerce-cart,
body.woocommerce-checkout {
	--hcc-accent: var( --hestia-primary-color, #9c27b0 );
	--hcc-accent-deep: color-mix( in srgb, var( --hcc-accent ) 75%, black 25% );
	--hcc-accent-soft: color-mix( in srgb, var( --hcc-accent ) 14%, white 86% );
	--hcc-ink: #22303d;
	--hcc-ink-soft: #5c6e7a;
	--hcc-border: rgba( 34, 48, 61, 0.12 );
	--hcc-bg-alt: #f6f7f8;
	--hcc-success: #1b8a4d;
	--hcc-success-soft: #e4f3ea;
}

/* ---------- shared: buttons, headings, form rows ---------- */

/* the theme's generic page-title hero (huge accent-colored band with
   30vh top padding) is meant for blog posts/pages, not a checkout flow -
   it visually dominates and fights the redesign below it. */
body.woocommerce-cart .page-header,
body.woocommerce-checkout .page-header,
body.woocommerce-cart .hestia-title.title-in-content,
body.woocommerce-checkout .hestia-title.title-in-content {
	display: none;
}

/* .main-raised pulls the whole content area up -60px by design, to tuck
   under .page-header for that "card floats over the hero" effect - with
   page-header hidden above there's nothing left to tuck under, so it was
   just dragging real content up underneath the fixed .navbar instead.
   Cancel the pull and add real breathing room below the fixed nav in
   its place. --hestia-cc-nav-clearance is measured live off the actual
   .navbar element (see hestia-cart-checkout.js) since its height depends
   on this site's own logo/topbar/customizer settings - 80px is only the
   pre-JS fallback, not an assumption carried over from another site. */
body.woocommerce-cart .main-raised,
body.woocommerce-checkout .main-raised {
	margin-top: 0;
}

body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce {
	padding-top: var( --hestia-cc-nav-clearance, 80px );
}

body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-checkout form.checkout {
	color: var( --hcc-ink );
}

/* .hestia-cc-heading itself is visually hidden (screen-reader-text, see
   the theme's own style.css) - the step indicator below is the real
   visible heading now, no separate visual styling needed here. */

/* checkout step indicator */
.hestia-cc-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 24px;
}

.hestia-cc-step {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 600;
	color: var( --hcc-ink-soft );
	white-space: nowrap;
}

/* Notices relocated between the step bar and the shipping bar (user request
   2026-07-22, moved there by relocateNotices() in hestia-cart-checkout.js) -
   give them a little breathing room from the steps above. */
.hestia-cc-steps + .woocommerce-notices-wrapper,
.hestia-cc-steps + .woocommerce-message,
.hestia-cc-steps + .woocommerce-info,
.hestia-cc-steps + .woocommerce-error {
	margin-top: 14px;
	margin-bottom: 0;
}

/* Clickable steps (user request 2026-07-22): Winkelmand -> cart, Adres ->
   checkout. Keep the same look, just make the link feel interactive. */
a.hestia-cc-step.is-clickable {
	text-decoration: none;
	cursor: pointer;
	transition: color 0.15s ease, opacity 0.15s ease;
}

a.hestia-cc-step.is-clickable:hover {
	color: var( --hcc-accent, #e91e63 );
}

a.hestia-cc-step.is-clickable:hover .hestia-cc-step-label {
	text-decoration: underline;
}

.hestia-cc-step-num {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 800;
	flex: none;
	background: var( --hcc-bg-alt );
	border: 1px solid var( --hcc-border );
	color: var( --hcc-ink-soft );
}

.hestia-cc-step.is-done {
	color: var( --hcc-ink );
}

.hestia-cc-step.is-done .hestia-cc-step-num {
	background: linear-gradient( 135deg, var( --hcc-accent-deep ), var( --hcc-accent ) );
	color: #fff;
	border: none;
}

.hestia-cc-step.is-current {
	color: var( --hcc-ink );
}

.hestia-cc-step.is-current .hestia-cc-step-num {
	border: 2px solid var( --hcc-accent );
	color: var( --hcc-accent-deep );
	box-shadow: 0 0 0 4px var( --hcc-accent-soft );
}

.hestia-cc-step-line {
	width: 28px;
	height: 2px;
	background: var( --hcc-border );
	margin: 0 8px;
	flex: none;
}

.hestia-cc-step-line.is-done {
	background: linear-gradient( 90deg, var( --hcc-accent ), var( --hcc-border ) );
}

/* keep labels visible on mobile ("Mand", "Adres", "Betalen" should
   actually read as text there, not collapse to unlabeled dots) - just
   tighten sizing so all three steps fit a narrow viewport. */
@media ( max-width: 460px ) {
	.hestia-cc-steps {
		gap: 0;
	}

	.hestia-cc-step {
		font-size: 11px;
		gap: 5px;
	}

	.hestia-cc-step-num {
		width: 20px;
		height: 20px;
		font-size: 10px;
	}

	.hestia-cc-step-line {
		width: 14px;
		margin: 0 4px;
	}
}

/* soften WooCommerce's default saturated info/error notice boxes to sit
   with the rest of the redesign instead of clashing with it - green
   (same tone as the free-shipping panel) rather than the pink accent, so
   "informational" reads as its own consistent colour language. */
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message {
	background: var( --hcc-success-soft );
	color: var( --hcc-success );
	border: 1px solid var( --hcc-border );
	border-radius: 12px;
	padding: 14px 18px;
	font-size: 13.5px;
}

body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-error {
	background: #fbe9e7;
	color: #9c3a2e;
	border: 1px solid rgba( 156, 58, 46, 0.2 );
	border-radius: 12px;
	padding: 14px 18px;
	font-size: 13.5px;
}

/* TTC 2026-08-07 - OP-18. Op winkelwagen/afrekenen kreeg de info-melding
   --hcc-success (#1b8a4d) op --hcc-success-soft: gemeten 3,82:1, onder de
   4,5:1 die nodig is. Alleen de TEKSTKLEUR van de INFO-melding is verdiept;
   de succes- en foutmelding hierboven blijven bewust ongewijzigd. */
body.woocommerce-cart .woocommerce-info,
body.woocommerce-checkout .woocommerce-info {
	color: #14663a;
}

body.woocommerce-cart .woocommerce-info a,
body.woocommerce-cart .woocommerce-message a,
body.woocommerce-checkout .woocommerce-info a,
body.woocommerce-checkout .woocommerce-message a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-checkout #payment #place_order {
	display: block;
	width: 100%;
	text-align: center;
	border: 0;
	border-radius: 12px;
	padding: 15px 18px !important;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #fff !important;
	background: linear-gradient( 120deg, var( --hcc-accent-deep ), var( --hcc-accent ) 65% ) !important;
	box-shadow: 0 14px 26px -14px color-mix( in srgb, var( --hcc-accent-deep ) 70%, transparent );
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
body.woocommerce-checkout #payment #place_order:hover {
	filter: brightness( 1.05 );
}

/* ---------- cart: product grid ---------- */

.hestia-shipping-progress {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var( --hcc-success-soft );
	border-radius: 14px;
	padding: 14px 18px;
}

body.woocommerce-cart .hestia-shipping-progress {
	margin-bottom: 20px;
}

body.woocommerce-checkout .hestia-shipping-progress {
	margin: 0 0 24px;
}

.hestia-shipping-icon {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --hcc-success );
	box-shadow: 0 4px 10px -6px rgba( 27, 138, 77, 0.5 );
}

.hestia-shipping-icon svg {
	width: 18px;
	height: 18px;
}

.hestia-ring {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	position: relative;
	background: conic-gradient( var( --hcc-success ) calc( var( --hestia-ring-pct, 0 ) * 1% ), rgba( 27, 138, 77, 0.18 ) 0 );
}

.hestia-ring::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var( --hcc-success-soft );
}

.hestia-ring-pct {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 800;
	color: var( --hcc-success );
	z-index: 1;
}

.hestia-shipping-copy {
	flex: 1;
	min-width: 0;
}

.hestia-shipping-headline {
	margin: 0 0 2px;
	font-size: 13.5px;
	color: var( --hcc-success );
	font-weight: 700;
}

.hestia-shipping-detail {
	margin: 0;
	font-size: 12px;
	color: var( --hcc-success );
	opacity: 0.75;
	font-variant-numeric: tabular-nums;
}

body.woocommerce-cart .woocommerce-cart-form table.cart {
	display: block;
	border: none;
	background: none;
	border-collapse: separate;
}

body.woocommerce-cart .woocommerce-cart-form table.cart thead {
	display: none;
}

body.woocommerce-cart .woocommerce-cart-form table.cart tbody {
	display: grid;
	/* capped at 260px (not 1fr) on purpose - with few products, 1fr would
	   stretch a single card to fill the entire row width, looking
	   oversized; a fixed max keeps card size sane regardless of count. */
	grid-template-columns: repeat( auto-fit, minmax( 200px, 260px ) );
	gap: 16px;
}

body.woocommerce-cart .woocommerce-cart-form table.cart tr.cart_item {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"thumb"
		"name"
		"qty"
		"subtotal";
	justify-items: center;
	text-align: center;
	align-content: start;
	gap: 6px;
	background: #fff;
	border: 1px solid var( --hcc-border );
	border-radius: 16px;
	padding: 16px;
	position: relative;
	box-shadow: 0 16px 28px -22px rgba( 34, 48, 61, 0.35 );
	transition: box-shadow 0.15s, transform 0.15s;
}

body.woocommerce-cart .woocommerce-cart-form table.cart tr.cart_item:hover {
	box-shadow: 0 20px 34px -18px rgba( 34, 48, 61, 0.28 );
	transform: translateY( -2px );
}

/* the theme's JS (see hestia-cart-checkout.js) moves this row out from
   inside the product <tbody> to right after the table - a spanning grid
   item left in the auto-fit grid would force every possible track to
   materialize, defeating the "collapse when there are few products"
   point of auto-fit entirely. */
body.woocommerce-cart .woocommerce-cart-form table.cart tr:has( td.actions ) {
	display: block;
	border: none;
	background: none;
	padding: 0;
	margin-top: 16px;
}

body.woocommerce-cart .woocommerce-cart-form table.cart td {
	border: none;
	padding: 0;
}

/* woocommerce-smallscreen.css (≤768px only) prefixes every td that has a
   data-title attribute with "Label: " via ::before - meant for its own
   plain responsive table, not this card grid, where position already
   conveys what each value is. Desktop never loads that stylesheet at
   all, hence the mismatch: without this, mobile shows "Product:",
   "Quantity:", "Subtotal:" labels desktop never does (and, for
   product-thumbnail specifically, a stray bare ":" - it has no real
   data-title, WC just never needed to exclude it from this rule since
   stock behaviour hides the whole thumbnail column on mobile anyway). */
body.woocommerce-cart .woocommerce-cart-form table.cart td::before {
	display: none !important;
	content: none !important;
}

body.woocommerce-cart td.product-thumbnail {
	grid-area: thumb;
	/* WooCommerce's own woocommerce-smallscreen.css (loaded only up to
	   768px width) sets table.cart .product-thumbnail{display:none} at
	   specificity (0,3,1) - higher than a same-shape selector without
	   !important can reliably beat - that's the classic responsive-table
	   behaviour where the image is dropped to save space, but it fights
	   this redesign's card layout where the photo is the point. Confirmed
	   via Chrome DevTools Protocol's actual matched-rules resolution, not
	   guessed. Override it back on at every width. */
	display: block !important;
}

body.woocommerce-cart td.product-thumbnail img {
	display: block;
	width: 96px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
	background: var( --hcc-accent-soft );
	padding: 6px;
	box-sizing: border-box;
}

/* absolutely positioned instead of its own grid column - a dedicated
   column for just this button was what pushed the rest of the card's
   content off-centre (thumb/name/etc were only centred within the
   narrower remaining column, not the full card width).
   !important needed: .woocommerce-cart table.shop_table td.product-remove
   {position:relative} (Hestia's own woocommerce.css) is (0,3,1),
   beating an unqualified override at (0,2,1) - same specificity pattern
   as product-thumbnail/product-price above, confirmed via CDP again
   rather than guessed. */
body.woocommerce-cart td.product-remove {
	position: absolute !important;
	top: 12px !important;
	right: 12px !important;
}

body.woocommerce-cart td.product-remove a.remove {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var( --hcc-bg-alt );
	color: var( --hcc-ink-soft ) !important;
	font-size: 16px;
}

body.woocommerce-cart td.product-name {
	grid-area: name;
	font-weight: 600;
	font-size: 14.5px;
}

body.woocommerce-cart td.product-name a {
	color: var( --hcc-ink );
}

/* price is redundant with subtotal on a single-column card - keep it out
   of the way visually rather than showing the same number twice. Same
   specificity fight as product-thumbnail above - woocommerce-smallscreen.css
   sets tr td{display:block} at (0,2,2), beating an unqualified override. */
body.woocommerce-cart td.product-price {
	display: none !important;
}

body.woocommerce-cart td.product-quantity {
	grid-area: qty;
}

/* "unit price &middot; line total" (hestia_cc_cart_item_unit_price in
   cart-checkout-redesign.php). Laid out as one centred baseline row: the
   per-unit price sits muted on the left, a thin separator, then the bold
   accent line total on the right. The cell's own bold/accent styling still
   applies to the line total (which inherits it); the unit price and
   separator dial themselves back down below. */
body.woocommerce-cart td.product-subtotal {
	grid-area: subtotal;
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	gap: 7px;
	font-weight: 700;
	font-size: 15px;
	color: var( --hcc-accent-deep );
}

body.woocommerce-cart td.product-subtotal .hestia-cc-unit-price {
	font-weight: 500;
	font-size: 13px;
	color: var( --hcc-ink-soft );
}

body.woocommerce-cart td.product-subtotal .hestia-cc-price-sep {
	font-weight: 700;
	color: var( --hcc-ink-soft );
	opacity: 0.6;
}

body.woocommerce-cart td.product-subtotal .hestia-cc-line-total {
	font-weight: 700;
	color: var( --hcc-accent-deep );
}

/* quantity stepper */
body.woocommerce-cart .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var( --hcc-border );
	border-radius: 8px;
	overflow: hidden;
}

body.woocommerce-cart .quantity input.qty {
	width: 42px;
	text-align: center;
	border: none;
	padding: 6px 0;
	-moz-appearance: textfield;
}

body.woocommerce-cart .quantity input.qty::-webkit-inner-spin-button,
body.woocommerce-cart .quantity input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Keep the quantity steppers CLICKABLE while WooCommerce's cart-update
   AJAX runs: WC core blockUI()s the whole cart form with an overlay
   (z-index ~1000 inside the blocked element), which used to eat every
   click for the duration of the round-trip - the "spam +/- feels stuck"
   complaint. hestia-cart-checkout.js records mid-flight edits as pending
   and re-applies / re-submits once the re-render arrives (last write
   wins), so the overlay may never swallow a click.

   The z-index lift alone did NOT do it (the table/grid wrappers form
   their own stacking context, so 1011 never actually rose above the
   overlay - proven live by a burst-pause-burst click test dropping the
   clicks that landed during the AJAX window). The overlay itself is now
   click-transparent inside the cart form: the busy dim stays visible,
   but clicks fall through to the steppers. */
.woocommerce-cart-form .quantity {
	position: relative;
	z-index: 1011; /* blockUI overlay is 1010 inside the blocked form */
}

.woocommerce-cart-form .blockUI.blockOverlay {
	pointer-events: none !important;
	cursor: default !important;
}

.hestia-qty-step {
	appearance: none;
	border: none;
	background: var( --hcc-bg-alt );
	width: 28px;
	height: 30px;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	color: var( --hcc-ink );
}

.hestia-qty-step:hover {
	background: var( --hcc-accent-soft );
}

/* coupon / update-cart row */
body.woocommerce-cart td.actions .coupon {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 8px;
}

body.woocommerce-cart td.actions .coupon .input-text {
	border: 1px solid var( --hcc-border );
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 13px;
}

body.woocommerce-cart td.actions .coupon button {
	border: 1px solid var( --hcc-border );
	background: var( --hcc-bg-alt );
	border-radius: 8px;
	padding: 10px 16px;
	font-weight: 600;
	font-size: 12.5px;
	cursor: pointer;
}

/* "Update cart" is redundant now that quantity changes auto-submit via
   initCartAutoUpdate() in hestia-cart-checkout.js - hiding rather than
   removing from markup keeps the form's native fallback submit intact. */
body.woocommerce-cart td.actions button[name="update_cart"] {
	display: none !important;
}

/* ---------- cart & checkout: totals / order review panel ---------- */

/* same -60px "tuck under the hero" pull as .main-raised, this time on the
   totals panel specifically - same reason, same fix. */
body.woocommerce-cart .cart-collaterals {
	margin-top: 0;
}

body.woocommerce-cart .cart-collaterals .card.card-raised,
body.woocommerce-checkout #order_review {
	background: #fff;
	border: 1px solid var( --hcc-border );
	border-radius: 18px;
	box-shadow: 0 20px 40px -30px rgba( 34, 48, 61, 0.35 );
}

body.woocommerce-checkout #order_review {
	padding: 22px 24px;
	position: sticky;
	top: 20px;
}

body.woocommerce-cart .cart_totals table,
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
	border: none;
	background: none;
}

body.woocommerce-cart .cart_totals table tr,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr {
	border-bottom: 1px solid var( --hcc-border );
}

body.woocommerce-cart .cart_totals table th,
body.woocommerce-cart .cart_totals table td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
	border: none;
	padding: 10px 0;
	font-size: 13.5px;
	color: var( --hcc-ink-soft );
}

body.woocommerce-cart .cart_totals table tr.order-total th,
body.woocommerce-cart .cart_totals table tr.order-total td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total td {
	border-top: 1px solid var( --hcc-border );
	border-bottom: none;
	padding-top: 14px;
}

body.woocommerce-cart .cart_totals table tr.order-total .amount,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total .amount {
	font-family: inherit;
	font-size: 20px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	background: linear-gradient( 100deg, var( --hcc-accent-deep ), var( --hcc-accent ) 75% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---------- checkout: form layout ---------- */

body.woocommerce-checkout form.checkout.woocommerce-checkout {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	gap: 28px;
	align-items: start;
}

/* the theme's own _checkout.scss floats these at 48%/40% for its original
   single-column layout (see assets/sass/6_woocommerce/_checkout.scss) -
   that has to be neutralized or the floated boxes shrink-to-fit instead
   of stretching to the grid column, as one big garbled column. */
body.woocommerce-checkout form.checkout #customer_details,
body.woocommerce-checkout form.checkout #order_review {
	float: none;
	clear: none;
	width: auto;
	margin: 0;
}

body.woocommerce-checkout form.checkout #customer_details {
	grid-column: 1;
	grid-row: 1 / span 3;
}

body.woocommerce-checkout form.checkout #order_review_heading {
	grid-column: 2;
	grid-row: 1;
	font-size: 19px;
	margin: 0 0 4px;
}

body.woocommerce-checkout form.checkout #order_review {
	grid-column: 2;
	grid-row: 2;
}

@media ( max-width: 782px ) {
	body.woocommerce-checkout form.checkout.woocommerce-checkout {
		display: block;
	}

	body.woocommerce-checkout form.checkout #order_review {
		position: static;
		margin-top: 24px;
	}
}

body.woocommerce-checkout #customer_details .form-row {
	margin-bottom: 14px;
}

body.woocommerce-checkout #customer_details label {
	font-size: 12px;
	color: var( --hcc-ink-soft );
	margin-bottom: 4px;
	display: block;
}

body.woocommerce-checkout #customer_details input.input-text,
body.woocommerce-checkout #customer_details select {
	border: none;
	border-bottom: 1.5px solid var( --hcc-border );
	border-radius: 0;
	padding: 9px 2px;
	background: transparent;
	transition: border-color 0.15s;
}

body.woocommerce-checkout #customer_details input.input-text:focus,
body.woocommerce-checkout #customer_details select:focus {
	border-bottom-color: var( --hcc-accent );
	box-shadow: none;
	outline: none;
}

/* "Billing details" - redundant now: the step indicator already says
   which page you're on, and the form itself makes it obvious what these
   fields are for. */
body.woocommerce-checkout #customer_details h3 {
	display: none;
}

/* payment methods */
body.woocommerce-checkout ul.wc_payment_methods {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method {
	border: 1px solid var( --hcc-border );
	border-radius: 11px;
	padding: 12px 14px;
	margin-bottom: 8px;
	transition: border-color 0.15s, background-color 0.15s;
}

body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method:has( input:checked ),
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method.is-selected {
	border-color: var( --hcc-accent );
	background: var( --hcc-accent-soft );
}

body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method label {
	font-weight: 600;
	font-size: 13.5px;
}

body.woocommerce-checkout .payment_box {
	font-size: 13px;
	color: var( --hcc-ink-soft );
	padding: 10px 2px 0;
}

/* coupon relocated by the theme's existing JS to #hestia-checkout-coupon */
body.woocommerce-checkout #hestia-checkout-coupon {
	margin-top: 20px;
}

body.woocommerce-checkout .checkout_coupon .form-row {
	display: flex;
	gap: 10px;
	margin-bottom: 0;
}

body.woocommerce-checkout .checkout_coupon .input-text {
	flex: 1;
	border: 1px solid var( --hcc-border );
	border-radius: 8px;
	padding: 10px 14px;
}

/* "Create an account?" (#createaccount), "Ship to a different
   address?" (#ship-to-different-address-checkbox), and "Remember me"
   on the returning-customer login panel (.woocommerce-form-login__rememberme)
   all use WooCommerce's label-wraps-checkbox-then-span pattern, styled
   with float in the theme's own _checkout.scss - float doesn't reliably
   clear the label text when it wraps to a second line at narrow widths,
   which is what put the checkbox visually inside the wrapped text. Flex
   on the label sidesteps that: checkbox stays a fixed-size item, text
   wraps in its own flex item without the checkbox floating into it.
   Targeting the shared woocommerce-form__label-for-checkbox base class
   (rather than just .checkbox) catches every WooCommerce checkbox-label
   variant on this page, including ones that don't carry a ".checkbox"
   class of their own, like "Remember me". Remember me specifically also
   needs !important on display: WooCommerce core ships
   ".woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme{display:inline-block}"
   (3 classes), which out-specifies this rule's 2 classes and wins even
   though this rule comes later in the cascade. */
body.woocommerce-checkout label.woocommerce-form__label-for-checkbox {
	display: flex !important;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
}

body.woocommerce-checkout label.woocommerce-form__label-for-checkbox input[type="checkbox"] {
	flex: none;
	float: none;
	width: 16px;
	height: 16px;
	margin: 3px 0 0;
}

body.woocommerce-checkout label.woocommerce-form__label-for-checkbox span {
	flex: 1;
	float: none;
	margin-left: 0;
}

/* ---------- sticky mobile total bar ---------- */

.hestia-sticky-bar {
	display: none;
}

@media ( max-width: 600px ) {
	/* position: fixed rather than sticky - sticky's initial "stuck" offset
	   can be miscalculated on first paint (e.g. before a late-loading
	   placeholder product image finishes shifting page height), only
	   correcting itself after some later reflow like WooCommerce's AJAX
	   cart update. Fixed is viewport-relative from the first frame, so
	   there's nothing to miscalculate. Reserve space for it below so it
	   doesn't cover the last bit of real content. */
	body.woocommerce-cart,
	body.woocommerce-checkout {
		padding-bottom: 72px;
	}

	/* on mobile the row only ever fits one card - auto-fit still leaves
	   it flush left with empty space to its right by default (that space
	   is what collapses on wider screens with more products); centre the
	   track itself so a single card reads as deliberate, not stranded. */
	body.woocommerce-cart .woocommerce-cart-form table.cart tbody {
		justify-content: center;
	}

	.hestia-sticky-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		border-top: 1px solid var( --hcc-border );
		padding: 12px 16px;
		box-shadow: 0 -8px 20px -12px rgba( 34, 48, 61, 0.25 );
		z-index: 20;
	}

	.hestia-sticky-bar__total {
		font-weight: 700;
		font-size: 15px;
		font-variant-numeric: tabular-nums;
		color: var( --hcc-ink );
	}

	.hestia-sticky-bar__cta {
		border: 0;
		border-radius: 10px;
		padding: 11px 18px;
		font-weight: 700;
		font-size: 13px;
		color: #fff;
		background: linear-gradient( 120deg, var( --hcc-accent-deep ), var( --hcc-accent ) 65% );
	}

	/* the sticky bar duplicates the real CTA on small screens - hide the
	   in-flow one so there is only ever one actionable button, not two. */
	body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
	body.woocommerce-checkout #payment #place_order {
		display: none !important;
	}

	/* two other fixed-position mobile widgets land in the same bottom
	   strip as the sticky bar and would otherwise sit on top of it:
	   the newsletter plugin's floating launcher (.snl-cw, bottom-left,
	   see simple-newsletter/assets/checkout-widget.css) and the theme's
	   own "scroll to top" button (.hestia-scroll-to-top, right by
	   default here, see assets/sass/3_sections/_footer.scss). Push both
	   up to clear the sticky bar's real height instead - its real height
	   is ~61px (measured), so 70px leaves a small ~9px gap rather than
	   the wide gap 86px left. */
	body.woocommerce-cart .snl-cw,
	body.woocommerce-checkout .snl-cw,
	body.woocommerce-cart .hestia-scroll-to-top,
	body.woocommerce-checkout .hestia-scroll-to-top {
		bottom: 70px !important;
	}
}