/*
 * Checkout — Two Column + Grouped Sections.
 *
 * Layout: title → two-col grid (1.4fr form | 1fr sticky summary) → mobile bar.
 * Form: 3 sections (Delivery Details → Billing → Payment), each with
 *   underline-only fields, section labels, thin dividers.
 * Order Summary: reuses .wpdl-cart__* classes for coupon / total / trust line
 *   (cart.css loaded first alphabetically — no duplication needed here).
 * Tablet: single col, summary stacks below form (static).
 * Mobile: form simplified, fixed bottom PLACE ORDER bar.
 *
 * Two-class selectors give 0,2,0 — beats WP layout rules at 0,1,0.
 *
 * Tokens read:
 *   color.terracotta.500        — section labels (accent), remove hover
 *   semantic.color.text.primary — title, field text, payment labels
 *   semantic.color.text.muted   — field labels, legal notice, breadcrumb
 *   semantic.color.text.inverse — place order button text
 *   semantic.color.bg.surface   — order summary panel
 *   semantic.color.border.base  — field underlines, dividers, payment rows
 *   semantic.typography.display — title, summary heading, total value (Cormorant)
 *   semantic.typography.body    — labels, fields, payment, legal (Jost)
 *   space.1 – 11
 *   duration.base / easing.default
 */

/* ── Page title ───────────────────────────────────────────────────── */

.wpdl-checkout__title.wp-block-heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.375rem, 0.9rem + 2.08vw, 2.25rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: var(--wp--custom--space--8) var(--wp--custom--space--8);
}

/* ── Two-column grid ──────────────────────────────────────────────── */

.wpdl-checkout__grid.wp-block-group {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--wp--custom--space--9);
	align-items: start;
	margin-block: 0 var(--wp--custom--space--10);
}

/* Reset WP flow margins on grid direct children */
.wpdl-checkout__form.wp-block-group,
.wpdl-checkout__summary.wp-block-group {
	margin-block: 0;
}

/* ── Section labels ───────────────────────────────────────────────── */

.wpdl-checkout__section-label {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--accent--primary);
	margin-block: 0 var(--wp--custom--space--7);
}

/* ── Section divider ──────────────────────────────────────────────── */

.wpdl-checkout__section-divider.wp-block-separator {
	border: none;
	border-block-end: 1px solid var(--wp--custom--semantic--color--border--base);
	margin-block: var(--wp--custom--space--8);
	opacity: 1;
}

/* ── Form fields (underline-only) ─────────────────────────────────── */

.wpdl-checkout__field.wp-block-group {
	flex: 1;
	margin-block: 0 var(--wp--custom--space--6);
}

.wpdl-checkout__field-label {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.6875rem;
	font-weight: 400;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: 0 var(--wp--custom--space--3);
}

.wpdl-checkout__field-line.wp-block-separator {
	border: none;
	border-block-end: 1px solid var(--wp--custom--semantic--color--border--base);
	margin-block: 0 var(--wp--custom--space--3);
	opacity: 1;
}

/* ── Two-column field rows ────────────────────────────────────────── */

.wpdl-checkout__field-row.wp-block-group {
	gap: var(--wp--custom--space--5);
	align-items: start;
	margin-block: 0;
}

/* ── Payment section ──────────────────────────────────────────────── */

.wpdl-checkout__payment-row.wp-block-group {
	gap: var(--wp--custom--space--5);
	align-items: center;
	padding-block: var(--wp--custom--space--5);
	border-block-end: 1px solid var(--wp--custom--semantic--color--border--base);
	margin-block: 0;
}

.wpdl-checkout__radio {
	flex: 0 0 0.875rem;
	min-block-size: 0.875rem;
	min-inline-size: 0.875rem;
	border: 1px solid var(--wp--custom--semantic--color--border--base);
	border-radius: 50%;
	margin-block: 0;
}

.wpdl-checkout__payment-label {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.875rem;
	font-weight: 300;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0;
}

.wpdl-checkout__legal {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.6875rem;
	font-weight: 300;
	line-height: 1.6;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: var(--wp--custom--space--6) 0;
}

/* ── Order summary panel ──────────────────────────────────────────── */

.wpdl-checkout__summary.wp-block-group {
	position: sticky;
	top: var(--wp--custom--space--6);
	background-color: var(--wp--custom--semantic--color--surface--primary);
	padding: var(--wp--custom--space--8);
}

.wpdl-checkout__summary-heading.wp-block-heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.1875rem, 0.98rem + 0.89vw, 1.375rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0 var(--wp--custom--space--6);
}

/* Mini line item */
.wpdl-checkout__summary-item.wp-block-group {
	gap: var(--wp--custom--space--5);
	align-items: center;
	margin-block: 0 var(--wp--custom--space--6);
	padding-block-end: var(--wp--custom--space--6);
	border-block-end: 1px solid var(--wp--custom--semantic--color--border--base);
}

.wpdl-checkout__summary-thumb.wp-block-image {
	flex: 0 0 3.5rem;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-block: 0;
	background-color: var(--wp--custom--semantic--color--accent--primary);
}

.wpdl-checkout__summary-thumb.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wpdl-checkout__summary-item-info.wp-block-group {
	flex: 1;
	gap: var(--wp--custom--space--1);
	margin-block: 0;
}

.wpdl-checkout__summary-item-name {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0;
}

.wpdl-checkout__summary-item-qty {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem;
	font-weight: 300;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: 0;
}

.wpdl-checkout__summary-item-price {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0;
	flex: 0 0 auto;
}

/* ── Mobile sticky bar (hidden above 40em) ────────────────────────── */

.wpdl-checkout__mobile-bar.wp-block-group {
	display: none;
}

/* ── Tablet (< 64em / 1024px) ────────────────────────────────────── */

@media (width < 64em) {
	.wpdl-checkout__grid.wp-block-group {
		grid-template-columns: 1fr;
		gap: var(--wp--custom--space--8);
	}

	.wpdl-checkout__summary.wp-block-group {
		position: static;
	}
}

/* ── Mobile (< 40em / 640px) ─────────────────────────────────────── */

@media (width < 40em) {
	.wpdl-checkout__mobile-bar.wp-block-group {
		display: flex;
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 20;
		background-color: var(--wp--custom--semantic--color--background--canvas);
		border-block-start: 1px solid var(--wp--custom--semantic--color--border--base);
		padding: var(--wp--custom--space--5) var(--wp--custom--space--6);
		gap: var(--wp--custom--space--6);
		align-items: center;
	}

	.wpdl-checkout.wp-block-group {
		padding-block-end: var(--wp--custom--space--11);
	}
}

/* ── Reduced motion ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.wpdl-checkout__coupon-apply {
		transition: none;
	}
}

/* =============================================================================
   WC P8 — page-checkout.html block theming (wc/checkout native block)
   Scoped to .wpdl-checkout-page (tagName=main in template).
   WC places the wc/checkout block as post-content; we theme its output classes.
   WC handles all checkout logic (contact, shipping, billing, payment) natively.
   ============================================================================= */

/* stylelint-disable no-descending-specificity -- WC block classes follow
   static pattern selectors; distinct properties, no cascade conflict. */

/* Checkout block body font */
.wpdl-checkout-page .wc-block-checkout {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
}

/* Step headings ("Contact information", "Shipping address", "Payment") */
.wpdl-checkout-page .wc-block-components-checkout-step__title {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--accent--primary);
}

/* Form field labels */
.wpdl-checkout-page .wc-block-components-text-input label,
.wpdl-checkout-page .wc-block-components-select-control label,
.wpdl-checkout-page .wc-block-components-checkbox-control label {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem;
	color: var(--wp--custom--semantic--color--text--muted);
}

/* Form field inputs */
.wpdl-checkout-page .wc-block-components-text-input input,
.wpdl-checkout-page .wc-block-components-select-control select,
.wpdl-checkout-page .wc-block-components-textarea textarea {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.875rem;
	color: var(--wp--custom--semantic--color--text--primary);
	border-color: var(--wp--custom--semantic--color--border--base);
}

.wpdl-checkout-page .wc-block-components-text-input:focus-within input,
.wpdl-checkout-page .wc-block-components-select-control:focus-within select {
	border-color: var(--wp--custom--semantic--color--text--primary);
	outline: 0.125rem solid var(--wp--custom--semantic--color--text--primary);
	outline-offset: 0.125rem;
}

/* Payment method label */
.wpdl-checkout-page .wc-block-components-payment-method-label__label {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.875rem;
	color: var(--wp--custom--semantic--color--text--primary);
}

/* Order summary sidebar */
.wpdl-checkout-page .wc-block-checkout__sidebar-panel {
	background-color: var(--wp--custom--semantic--color--surface--primary);
}

.wpdl-checkout-page .wc-block-checkout__order-summary-title,
.wpdl-checkout-page .wc-block-checkout__totals-title {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
}

/* Order summary product names */
.wpdl-checkout-page .wc-block-checkout-order-summary-cart-items__product-details-name {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
}

/* Totals rows */
.wpdl-checkout-page .wc-block-components-totals-item__label,
.wpdl-checkout-page .wc-block-components-totals-item__value {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.8125rem;
	color: var(--wp--custom--semantic--color--text--primary);
}

/* Grand total */
.wpdl-checkout-page .wc-block-components-totals-grand-total__label,
.wpdl-checkout-page .wc-block-components-totals-grand-total__value {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
}

/* Place order button */
.wpdl-checkout-page .wc-block-components-checkout-place-order-button {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background-color: var(--wp--custom--semantic--color--text--primary);
	color: var(--wp--custom--semantic--color--text--inverse);
	border: none;
	border-radius: 0;
	transition: background-color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-checkout-page .wc-block-components-checkout-place-order-button:hover {
	background-color: var(--wp--custom--semantic--color--accent--primary);
}

/* Privacy / legal notice */
.wpdl-checkout-page .wc-block-checkout__privacy-policy {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.6875rem;
	color: var(--wp--custom--semantic--color--text--muted);
}

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

/* stylelint-enable no-descending-specificity */