/*
 * 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;
}

.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;
}

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;
}

body.woocommerce-cart td.product-subtotal {
	grid-area: subtotal;
	font-weight: 700;
	font-size: 15px;
	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;
}

.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;
	}
}