/**
 * ENGWE checkout — light, premium, the same brand as the landing page.
 *
 * Scope discipline: this styles the checkout content area and the
 * configuration panel only. Header, footer, Stripe's payment fields and
 * every WooCommerce block behaviour are left alone; the rules below
 * change surface, spacing and colour, never structure.
 */

:root {
	--engwe-orange: #fb6418;
	--engwe-orange-hover: #fc8245;
	--engwe-ink: #16181a;
	--engwe-ink-2: #55595d;
	--engwe-paper: #f2f1ee;
	--engwe-surface: #fbfaf8;
	--engwe-line: #e0ded8;
}

/* ---------- page surface ---------- */
.woocommerce-checkout .wp-block-woocommerce-checkout,
body.woocommerce-checkout .wc-block-checkout {
	color: var(--engwe-ink);
}

body.woocommerce-checkout {
	background: var(--engwe-paper);
}

.wc-block-checkout__main {
	background: transparent;
}


/* ---------- page opening ---------- */
/* Kadence's title hero is 200px of empty light space between the site
   header and the first checkout field. Removed on checkout only. */
body.woocommerce-checkout .entry-hero,
body.woocommerce-checkout header.entry-header,
body.woocommerce-checkout .entry-hero-container-inner {
	display: none !important;
}

body.woocommerce-checkout .content-area,
body.woocommerce-checkout .content-container,
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout .entry-content-wrap,
body.woocommerce-checkout main.wrap,
body.woocommerce-checkout .site-main {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* one deliberate breath between the site header and the first field */
body.woocommerce-checkout .wp-block-woocommerce-checkout {
	padding-top: clamp(1.5rem, 3vw, 2.5rem) !important;
}

/* The two desktop columns.
 *
 * Keyed on `.is-large`, the class WooCommerce puts on the layout after
 * measuring its own container — never on a viewport media query, which
 * disagrees with that measurement between roughly 900px and 1000px and
 * left the column widths unstyled in that band.
 *
 * `flex-basis: 0` is load-bearing: the layout is `display:flex` with
 * `flex-wrap: wrap`, so a content-sized basis on the form column makes
 * it claim the whole row and pushes the configuration column onto a
 * second line — the form and the summary stop being columns at all.
 * With a zero basis the form takes what is left beside the summary:
 * 62% / 38% at 1440 and 1920.
 */
.wc-block-checkout.is-large .wc-block-checkout__sidebar {
	flex: 0 0 38%;
	min-width: 20rem;
	max-width: 31rem;
}

.wc-block-checkout.is-large .wc-block-checkout__main {
	flex: 1 1 0%;
	min-width: 0;
	max-width: 100%;
}

.engwe-checkout-title {
	margin: 0 0 1.75rem;
	font-size: clamp(1.375rem, 2.4vw, 1.875rem);
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--engwe-ink);
}

/* ---------- desktop: keep the order in view while filling the form -- */
.wc-block-checkout.is-large .wc-block-checkout__sidebar {
	position: sticky;
	top: 1.5rem;
	align-self: flex-start;
}



/* ---------- headings and labels ---------- */
.wc-block-components-title,
.wc-block-components-checkout-step__title {
	color: var(--engwe-ink);
	letter-spacing: -0.01em;
}

.wc-block-components-checkout-step__description,
.wc-block-components-text-input label {
	color: var(--engwe-ink-2);
}

/* ---------- inputs: quiet, restrained radius ---------- */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox-control input,
.wc-block-components-select__container select {
	background: #fff;
	border-radius: 4px;
	border-color: var(--engwe-line);
}

.wc-block-components-text-input.is-active input:focus,
.wc-block-components-textarea:focus {
	outline: 2px solid var(--engwe-orange-hover);
	outline-offset: 1px;
}

/* ---------- the right column ---------- */
.wc-block-checkout__sidebar .wc-block-components-sidebar-layout,
.wp-block-woocommerce-checkout-order-summary-block {
	background: var(--engwe-surface);
	border: 1px solid var(--engwe-line);
	border-radius: 6px;
}

.wp-block-woocommerce-checkout-order-summary-block {
	padding: 0;
	overflow: hidden;
}

.wc-block-components-totals-item__label {
	color: var(--engwe-ink-2);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--engwe-ink);
	font-weight: 700;
}


/* German price transparency: catalogue prices are gross, so the total
   carries the note rather than a separate VAT line. */
.wc-block-components-totals-footer-item::after {
	content: "inkl. MwSt.";
	display: block;
	margin-top: 0.3rem;
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--engwe-ink-2);
	text-align: right;
}

/* ---------- shipping row ---------- */
.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__option {
	border-radius: 4px;
}

/* ---------- coupon: present but never dominant ---------- */
.wc-block-components-totals-coupon .wc-block-components-panel__button {
	color: var(--engwe-ink-2);
	font-weight: 500;
	font-size: 0.875rem;
}

.wc-block-components-totals-coupon .wc-block-components-panel__button:hover {
	color: var(--engwe-orange);
}

/* ---------- the one strong accent: the final CTA ---------- */
.wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button:not(:disabled) {
	background: var(--engwe-orange) !important;
	border-color: var(--engwe-orange) !important;
	color: #1a1206 !important;
	font-weight: 700;
	border-radius: 4px;
	min-height: 3.5rem;
	transition: background 180ms ease, transform 180ms ease;
}

.wc-block-components-checkout-place-order-button:hover:not(:disabled) {
	background: var(--engwe-orange-hover) !important;
	border-color: var(--engwe-orange-hover) !important;
}

.wc-block-components-checkout-place-order-button:focus-visible {
	outline: 2px solid var(--engwe-ink);
	outline-offset: 2px;
}

/* keep every other block link on brand */
.wc-block-checkout__terms a,
.wc-block-components-checkout-step a {
	color: #b83f01;
}

.engwe-btn {
	margin-top: 1.25rem;
	width: 100%;
	min-height: 3rem;
	border: 1px solid var(--engwe-orange);
	border-radius: 4px;
	background: var(--engwe-orange);
	color: #1a1206;
	font-weight: 700;
	cursor: pointer;
}

.engwe-btn.is-on {
	background: transparent;
	color: #b83f01;
}

.engwe-btn:hover {
	background: var(--engwe-orange-hover);
	border-color: var(--engwe-orange-hover);
	color: #1a1206;
}



/* ---------- legal acknowledgment ---------- */
.engwe-terms p {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--engwe-ink-2);
}

.engwe-terms .engwe-legal-link {
	color: #b83f01;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =================================================================
   One configuration, one Bestellübersicht — at every width.

   WooCommerce emits a second order summary inside the form column for
   its stacked layouts. Which layout is stacked is decided at runtime:
   the block measures its own container and labels itself `is-mobile`,
   `is-small`, `is-medium` or `is-large`. Naming the stacked classes one
   by one missed `is-small` (roughly 480–600px) and showed two
   Bestellübersicht blocks there, so the rules below invert the test —
   everything that is not the two-column `is-large` layout is stacked,
   whatever WooCommerce decides to call it next.

   The form-column copy is never the live one: coupon, subtotal,
   shipping and total all come from the sidebar instance, which is also
   where the configuration panel mounts. Hiding it is purely visual —
   the cart, the order and the totals are untouched.
   ================================================================= */
.wc-block-checkout:not(.is-large) .wc-block-checkout__main .wp-block-woocommerce-checkout-order-summary-block {
	display: none !important;
}

/* Belt and braces for the two-column layout: hide a form-column copy
   only while the sidebar actually holds one, so a WooCommerce change
   that moves the summary can never leave the customer without totals. */
.wc-block-checkout:has(.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block)
	.wc-block-checkout__main .wp-block-woocommerce-checkout-order-summary-block {
	display: none !important;
}

/* On the stacked layouts the configuration panel sits directly above
   the summary, so the summary's line items repeat the bike, the colour
   and every accessory the customer just chose. There it becomes the
   financial block only; the two-column layout keeps its full summary. */


/* …and the remaining figures should not hide behind an accordion. */






/* A compact summary needs the name, the price and the variation — the
   full product description belongs to the accessory detail sheet.
   Applies to both breakpoints; the product itself keeps its text. */
.wc-block-components-product-metadata__description {
	display: none !important;
}

/* =================================================================
   Address autocomplete
   ================================================================= */
.engwe-ac {
	position: absolute;
	z-index: 60;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	margin: 0;
	padding: 0.25rem;
	list-style: none;
	max-height: 17rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--engwe-surface);
	border: 1px solid var(--engwe-line);
	border-radius: 4px;
	box-shadow: 0 8px 22px rgba(22, 24, 26, 0.1);
}

.engwe-ac[hidden] {
	display: none;
}

.engwe-ac {
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* The surrounding checkout stylesheet zeroes line-height on inline
   children; stated explicitly here, the two lines stop colliding. */
.engwe-ac,
.engwe-ac__row,
.engwe-ac__line1,
.engwe-ac__line2 {
	line-height: 1.35 !important;
}

.engwe-ac__row {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.15rem;
	min-height: 3.25rem;
	padding: 0.65rem 0.75rem;
	border-radius: 3px;
	cursor: pointer;
	width: 100%;
	text-align: left;
}

.engwe-ac__row + .engwe-ac__row {
	border-top: 1px solid var(--engwe-line);
}

.engwe-ac__line1,
.engwe-ac__line2 {
	display: block;
	overflow-wrap: anywhere;
}

.engwe-ac__row:active {
	background: rgba(251, 100, 24, 0.14);
}

.engwe-ac__row.is-active,
.engwe-ac__row:hover {
	background: rgba(251, 100, 24, 0.08);
	box-shadow: inset 2px 0 0 var(--engwe-orange);
}

.engwe-ac__line1 {
	font-size: 0.9375rem;
	color: var(--engwe-ink);
}

.engwe-ac__line2 {
	font-size: 0.8125rem;
	color: var(--engwe-ink-2);
}

@media (max-width: 480px) {
	.engwe-ac {
		max-height: 15rem;
	}

	.engwe-ac__row {
		min-height: 3.5rem;
		padding: 0.7rem;
	}
}

/* =================================================================
   Payment area warm-up

   Only while checkout.js says the registry is still empty and the
   grace period has not run out. WooCommerce's own notice is restored
   afterwards, so a genuinely unavailable gateway is still reported.
   ================================================================= */
.wp-block-woocommerce-checkout-payment-block.engwe-pay-warmup .wc-block-checkout__no-payment-methods-notice {
	display: none !important;
}

.engwe-pay-warmup__note {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 1.125rem 1.25rem;
	border: 1px solid var(--engwe-line);
	border-radius: 6px;
	background: var(--engwe-surface);
	color: var(--engwe-ink-2);
	font-size: 0.9375rem;
}

.engwe-pay-warmup__note::before {
	content: "";
	width: 1rem;
	height: 1rem;
	flex: none;
	border: 2px solid var(--engwe-line);
	border-top-color: var(--engwe-orange);
	border-radius: 50%;
	animation: engwe-pay-spin 0.8s linear infinite;
}

@keyframes engwe-pay-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.engwe-pay-warmup__note::before { animation: none; }
}

body.woocommerce-checkout .engwe-checkout-title {
	font-weight: 800;
	text-transform: none;
	letter-spacing: -0.01em;
}

body.woocommerce-checkout .wc-block-components-checkout-step__title {
	font-weight: 700;
	letter-spacing: 0.005em;
}

/* ---------- controls in the landing's shape ---------- */
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-country-input input,
body.woocommerce-checkout .wc-block-components-state-input input,
body.woocommerce-checkout .wc-block-components-combobox-control input,
body.woocommerce-checkout .wc-block-components-form .wc-block-components-select .components-custom-select-control__button {
	border-radius: 3px;
}

body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-combobox-control input:focus {
	border-color: var(--engwe-orange);
	box-shadow: 0 0 0 1px var(--engwe-orange);
}

body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
	border-radius: 2px;
	font-weight: 700;
	font-size: 1.0625rem;
	min-height: 3.4rem;
	letter-spacing: 0.01em;
	transition: background-color 150ms ease;
}

body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
	background-color: var(--engwe-orange-hover);
}

/* the quiet grey "enter an address" placeholder should not shout */
body.woocommerce-checkout .wc-block-components-shipping-rates-control__no-results-notice,
body.woocommerce-checkout .wc-block-components-notice-banner.is-info {
	background: #f7f6f3;
	border: 1px dashed var(--engwe-line);
	box-shadow: none;
	color: var(--engwe-ink-2);
	font-size: 0.875rem;
}

/* ---------- trust row under the pay button ---------- */
.engwe-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 1.4rem;
	margin: 0.9rem 0 0;
	padding: 0;
	list-style: none;
}

.engwe-trust li {
	position: relative;
	margin: 0;
	padding-left: 1.2rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--engwe-ink-2);
	white-space: nowrap;
}

.engwe-trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 0.7em;
	height: 0.42em;
	border-left: 2px solid var(--engwe-orange);
	border-bottom: 2px solid var(--engwe-orange);
	transform: rotate(-45deg);
}

/* Scoped by viewport, not by WooCommerce's size classes: this WC
   version does not put is-large/is-small on the container at all, so a
   class-based rule would fire on every width. Below 700px the block is
   reliably single-column. */
@media (max-width: 699px) {
	/* the page title at phone width: one line, quieter */
	body.woocommerce-checkout .engwe-checkout-title {
		font-size: 1.25rem;
		margin-bottom: 1.1rem;
	}

	/* The summary rows ran flush against the card edge while the panel
	   above them is padded — same 1rem breathing room for both, and the
	   title row reads as a quiet section head rather than a bar.
	   (body-prefixed: Woo sets the title's padding as a shorthand with
	   higher specificity, and its 16px top margin painted a grey sliver
	   between the panel and the title.) */
	body.woocommerce-checkout .wc-block-components-checkout-order-summary__title {
		padding: 0.9rem 1rem;
		margin-top: 0;
		border-top: 1px solid var(--engwe-line);
		border-bottom: 0;
	}

	body.woocommerce-checkout .wc-block-components-checkout-order-summary__content {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	/* the coupon + totals rows inside the content keep their own inner
	   spacing; without this they double up against the new padding */
	.wc-block-components-checkout-order-summary__content .wc-block-components-totals-wrapper {
		padding-left: 0;
		padding-right: 0;
	}

	.wp-block-woocommerce-checkout-order-summary-block {
		margin-top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
		transition: none;
	}
}


/* =================================================================
   Simplified payment-step checkout (2026-08-19).

   The configurator is gone: WooCommerce's own order summary shows the
   purchased line items — thumbnail, name, colour variation, quantity
   and live prices. Everything below is layout only.
   ================================================================= */

/* desktop: the summary keeps the customer company while they type */
@media (min-width: 700px) {
	.wc-block-checkout .wc-block-components-sidebar.wc-block-checkout__sidebar {
		align-self: flex-start;
		position: sticky !important;
		top: 1.25rem;
	}
}

/* tighter vertical rhythm on the form column */
body.woocommerce-checkout .wc-block-components-checkout-step {
	margin-bottom: 1.6rem;
}

body.woocommerce-checkout .wc-block-components-checkout-step__heading {
	margin-bottom: 0.75rem;
}

body.woocommerce-checkout .wc-block-components-address-form__address_2-toggle {
	margin-top: 0.4rem;
}

/* one payment method: the radio dot is noise, the Stripe card fields
   and their branding stay exactly as the gateway renders them */
body.woocommerce-checkout .wc-block-components-radio-control__option:only-child .wc-block-components-radio-control__input {
	display: none;
}

body.woocommerce-checkout .wc-block-components-radio-control__option:only-child {
	padding-left: 1rem;
}

/* order-summary line items: compact, quiet */
.wp-block-woocommerce-checkout-order-summary-cart-items-block .wc-block-components-order-summary-item {
	padding-block: 0.75rem;
}

.wc-block-components-order-summary-item__image {
	border: 1px solid var(--engwe-line);
	border-radius: 4px;
	background: #fff;
}

/* ---------- mobile: collapsed summary with the live total ---------- */
.engwe-sum .wc-block-components-checkout-order-summary__title {
	cursor: default;
}

.engwe-sum__total {
	display: none;
	margin-left: auto;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 699px) {
	.engwe-sum .wc-block-components-checkout-order-summary__title {
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: 0.6rem;
	}

	.engwe-sum .wc-block-components-checkout-order-summary__title::after {
		content: "";
		width: 0.5em;
		height: 0.5em;
		border-right: 2px solid var(--engwe-ink-2);
		border-bottom: 2px solid var(--engwe-ink-2);
		transform: rotate(45deg);
		transition: transform 150ms ease;
		flex: 0 0 auto;
	}

	.engwe-sum.is-open .wc-block-components-checkout-order-summary__title::after {
		transform: rotate(-135deg);
	}

	.engwe-sum__total {
		display: inline;
	}

	.engwe-sum.is-collapsed .wc-block-components-checkout-order-summary__content {
		display: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.engwe-sum .wc-block-components-checkout-order-summary__title::after {
			transition: none;
		}
	}
}


/* Germany is the only destination: the one-option country field adds a
   tap with no choice. The field stays in the form (value "Deutschland",
   posted as normal) — only its box is hidden. */
body.woocommerce-checkout .wc-block-components-address-form__country {
	display: none;
}