/**
 * 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 {
	padding-top: clamp(1.75rem, 4vw, 3rem);
}

.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 -- */
@media (min-width: 1000px) {
	.wc-block-checkout__sidebar {
		position: sticky;
		top: 1.5rem;
		align-self: flex-start;
		max-height: calc(100vh - 3rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

@media (max-width: 999px) {
	.wc-block-checkout__sidebar {
		position: static !important;
		max-height: none !important;
		overflow: visible !important;
	}
}

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

/* =================================================================
   The configuration panel
   ================================================================= */
.engwe-config {
	padding: 1.25rem 1.25rem 1.5rem;
	border-bottom: 1px solid var(--engwe-line);
	background: #fff;
	transition: opacity 180ms ease;
}

.engwe-config.is-busy {
	opacity: 0.55;
	pointer-events: none;
}

.engwe-config__eyebrow {
	margin: 0 0 0.85rem;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--engwe-ink-2);
}

.engwe-config__eyebrow--acc {
	margin-top: 1.6rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--engwe-line);
}

/* ---------- main product ---------- */
.engwe-product {
	display: flex;
	gap: 0.95rem;
	align-items: center;
}

.engwe-product__img {
	width: 132px;
	height: 100px;
	object-fit: contain;
	flex: 0 0 auto;
	background: var(--engwe-surface);
	border-radius: 4px;
}

.engwe-product__body {
	min-width: 0;
}

.engwe-product__name {
	margin: 0;
	font-weight: 800;
	letter-spacing: -0.01em;
	font-size: 1rem;
	color: var(--engwe-ink);
}

.engwe-product__meta {
	margin: 0.2rem 0 0;
	font-size: 0.8125rem;
	color: var(--engwe-ink-2);
}

.engwe-product__price {
	margin: 0.35rem 0 0;
	font-weight: 700;
	color: var(--engwe-ink);
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.engwe-incl {
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--engwe-ink-2);
}

/* ---------- colour swatches ---------- */
.engwe-swatches {
	display: flex;
	gap: 0.6rem;
	margin-top: 1rem;
}

.engwe-swatch {
	width: 30px;
	height: 30px;
	border-radius: 3px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	cursor: pointer;
	padding: 0;
	transition: box-shadow 160ms ease, transform 160ms ease;
}

.engwe-swatch:hover {
	transform: translateY(-1px);
}

.engwe-swatch.is-on {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--engwe-orange);
}

.engwe-swatch:focus-visible {
	outline: 2px solid var(--engwe-ink);
	outline-offset: 3px;
}

/* ---------- quantity ---------- */
.engwe-qty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.1rem;
}

.engwe-qty__label {
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--engwe-ink-2);
}

.engwe-qty__ctrl {
	display: flex;
	align-items: center;
	border: 1px solid var(--engwe-line);
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
}

.engwe-qty__btn {
	width: 40px;
	height: 40px;
	border: 0;
	background: transparent;
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	color: var(--engwe-ink);
}

.engwe-qty__btn:disabled {
	opacity: 0.32;
	cursor: not-allowed;
}

.engwe-qty__btn:hover:not(:disabled) {
	background: var(--engwe-paper);
}

.engwe-qty__val {
	min-width: 2.25rem;
	text-align: center;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ---------- accessories ---------- */
.engwe-acc {
	display: grid;
	gap: 0.5rem;
}

.engwe-acc__row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	border: 1px solid var(--engwe-line);
	border-radius: 4px;
	padding: 0.45rem 0.5rem;
	background: #fff;
	transition: border-color 160ms ease, background 160ms ease;
}

.engwe-acc__row.is-on {
	border-color: var(--engwe-orange);
	background: rgba(251, 100, 24, 0.05);
}

.engwe-acc__open {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	text-align: left;
}

.engwe-acc__img {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 3px;
	flex: 0 0 auto;
	background: var(--engwe-surface);
}

.engwe-acc__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.engwe-acc__name {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--engwe-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.engwe-acc__open:hover .engwe-acc__name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

.engwe-acc__toggle {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 3px;
	border: 1px solid var(--engwe-line);
	background: #fff;
	cursor: pointer;
	font-size: 0.95rem;
	line-height: 1;
	color: var(--engwe-ink-2);
	transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.engwe-acc__toggle:hover {
	border-color: var(--engwe-orange);
	color: var(--engwe-orange);
}

.engwe-acc__toggle.is-on {
	border-color: var(--engwe-orange);
	color: var(--engwe-orange);
	background: rgba(251, 100, 24, 0.12);
}

.engwe-acc__toggle:focus-visible,
.engwe-acc__open:focus-visible {
	outline: 2px solid var(--engwe-ink);
	outline-offset: 2px;
}

/* Two columns only when the summary column is genuinely wide enough;
   at ~386px a second column truncates the German names. */
.engwe-acc {
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

/* ---------- accessory detail sheet ---------- */
.engwe-sheet {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(16, 18, 20, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.engwe-sheet__panel {
	position: relative;
	width: 100%;
	max-width: 26rem;
	max-height: 88vh;
	overflow-y: auto;
	background: var(--engwe-surface);
	border-radius: 6px;
	padding: 1.5rem;
	text-align: center;
}

.engwe-sheet__close {
	position: absolute;
	top: 0.5rem;
	right: 0.6rem;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	background: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: var(--engwe-ink-2);
}

.engwe-sheet__img {
	width: 100%;
	max-height: 15rem;
	object-fit: contain;
	background: #fff;
	border-radius: 4px;
}

.engwe-sheet__name {
	margin: 1rem 0 0;
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--engwe-ink);
}

.engwe-sheet__price {
	margin: 0.25rem 0 0;
	font-weight: 700;
	color: var(--engwe-ink);
}

.engwe-sheet__desc {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--engwe-ink-2);
	text-align: left;
}

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

/* ---------- mobile ---------- */
@media (max-width: 780px) {
	.engwe-config {
		padding: 1rem 1rem 1.25rem;
	}

	.engwe-product__img {
		width: 108px;
		height: 84px;
	}

	.engwe-qty__btn {
		width: 46px;
		height: 46px;
	}

	.engwe-acc__row {
		padding: 0.5rem;
	}

	.engwe-sheet {
		align-items: flex-end;
		padding: 0;
	}

	.engwe-sheet__panel {
		max-width: none;
		border-radius: 8px 8px 0 0;
		max-height: 86vh;
	}
}

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

/* =================================================================
   Mobile: one listing, not two.

   In the stacked layouts WooCommerce labels itself `is-mobile` /
   `is-medium`, and the configuration panel sits directly above the
   order summary — so the summary's line items repeat the bike, the
   colour and every accessory the customer just chose. The item list is
   hidden there and the summary becomes the financial block only.
   Purely visual: the cart, the order and the totals are untouched, and
   the two-column `is-large` layout keeps its full summary.
   ================================================================= */
.wc-block-checkout.is-mobile .wp-block-woocommerce-checkout-order-summary-cart-items-block,
.wc-block-checkout.is-medium .wp-block-woocommerce-checkout-order-summary-cart-items-block {
	display: none !important;
}

/* …and the remaining figures should not hide behind an accordion. */
.wc-block-checkout.is-mobile .wc-block-components-checkout-order-summary__content,
.wc-block-checkout.is-medium .wc-block-components-checkout-order-summary__content {
	display: block !important;
	height: auto !important;
	overflow: visible !important;
	opacity: 1 !important;
}

.wc-block-checkout.is-mobile .wc-block-components-checkout-order-summary__title svg,
.wc-block-checkout.is-medium .wc-block-components-checkout-order-summary__title svg {
	display: none;
}

.wc-block-checkout.is-mobile .wc-block-components-checkout-order-summary__title,
.wc-block-checkout.is-medium .wc-block-components-checkout-order-summary__title {
	pointer-events: none;
	cursor: default;
}

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