/* ============================================================
   Onyoda — cart, checkout & order-received (thank you)
   Styling only over the WooCommerce block markup; no restructuring.
   Uses theme.json design tokens.
   ============================================================ */

/* ---------- Distraction-free checkout header (wordmark only) ---------- */
.onyoda-checkout-header {
	padding: 24px 0;
}
.onyoda-checkout-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	max-width: 1500px;
	margin: 0 auto;
	padding: 0 56px;
}
.onyoda-checkout-header__inner > * {
	margin-block: 0;
	min-width: 0;
}
.onyoda-checkout-header__back {
	justify-self: start;
}
.onyoda-checkout-header__back a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sienna);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.3s ease;
}
.onyoda-checkout-header__back a:hover {
	color: var(--wp--preset--color--gold);
}
@media (max-width: 749px) {
	.onyoda-checkout-header__inner {
		padding: 0 24px;
		gap: 14px;
	}
	/* Collapse to just the arrow so the label can't crowd the wordmark. */
	.onyoda-checkout-header__back-text {
		display: none;
	}
	.onyoda-checkout-header__back-arrow {
		font-size: 18px;
		line-height: 1;
	}
}

/* ---------- Page title ("Cart" / "Checkout") ---------- */
.wp-block-post-title {
	margin: 90px 0 40px;
	text-align: center;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: 54px;
	color: var(--wp--preset--color--sienna);
}

/* Shared submit buttons (proceed to checkout / place order). */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-container .wc-block-components-button {
	background: var(--wp--preset--color--sienna);
	color: var(--wp--preset--color--cream);
	border: none;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 18px 32px;
	transition: background 0.4s ease;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--wp--preset--color--espresso);
}

/* ============================================================
   CART
   ============================================================ */
.wc-block-cart-items__header {
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--sienna) 60%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--sienna) 15%, transparent);
}
.wc-block-cart-items__row {
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--sienna) 15%, transparent);
}
.wc-block-cart-item__image {
	width: 100px;
}
.wc-block-cart-item__image img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	background: var(--wp--preset--color--beige-tile);
	border-radius: 0;
}
.wc-block-cart-item__product .wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.2;
	color: var(--wp--preset--color--sienna);
	text-decoration: none;
}
.wc-block-cart-item__product .wc-block-components-product-metadata {
	margin-top: 4px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	color: color-mix(in srgb, var(--wp--preset--color--sienna) 70%, transparent);
}
.wc-block-cart-item__prices .wc-block-components-product-price,
.wc-block-cart-item__total .wc-block-components-formatted-money-amount {
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 400;
	color: var(--wp--preset--color--deep-text);
}

/* Quantity stepper — match the PDP style (sienna borders, 40px). */
.wc-block-components-quantity-selector {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sienna) 30%, transparent);
	border-radius: 0;
	height: 40px;
	max-width: 116px;
}
.wc-block-components-quantity-selector__input {
	background: transparent;
	color: var(--wp--preset--color--deep-text);
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
}
.wc-block-components-quantity-selector__button {
	color: var(--wp--preset--color--sienna);
	font-size: 18px;
}
.wc-block-components-quantity-selector__button:hover:not(:disabled) {
	background: color-mix(in srgb, var(--wp--preset--color--sienna) 8%, transparent);
}

/* Remove — subtle sienna icon, full opacity on hover. */
.wc-block-cart-item__remove-link {
	color: color-mix(in srgb, var(--wp--preset--color--sienna) 40%, transparent);
	transition: color 0.3s ease;
}
.wc-block-cart-item__remove-link:hover {
	color: var(--wp--preset--color--sienna);
}

/* Totals sidebar. */
.wc-block-cart__totals-title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--sienna) 60%, transparent);
}
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	color: var(--wp--preset--color--deep-text);
}
.wc-block-components-totals-footer-item {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--sienna) 15%, transparent);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 17px;
	color: var(--wp--preset--color--sienna);
}
.wc-block-components-panel__button {
	color: var(--wp--preset--color--sienna);
	font-family: var(--wp--preset--font-family--body);
}

/* Empty cart. */
.wc-block-cart__empty-cart__title,
.wp-block-woocommerce-empty-cart-block h2 {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-weight: 400;
	font-size: 32px;
	color: var(--wp--preset--color--sienna);
}
/* "Shop the collection" link under the empty-cart heading. */
.onyoda-empty-cart__link {
	margin-top: 22px;
}
.onyoda-empty-cart__link a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sienna);
	text-decoration: none;
	transition: color 0.3s ease;
}
.onyoda-empty-cart__link a:hover {
	color: var(--wp--preset--color--gold);
}

/* ============================================================
   CHECKOUT
   ============================================================ */
.wc-block-checkout__sidebar {
	align-self: flex-start;
	position: sticky;
	top: 40px;
}

/* Section headings — Contact / Shipping / Payment. */
.wc-block-components-checkout-step__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: 24px;
	color: var(--wp--preset--color--sienna);
}
.wc-block-components-checkout-step {
	margin-top: 48px;
}
.wc-block-components-checkout-step:first-child {
	margin-top: 0;
}

/* Form inputs — cream, sienna hairline border, sienna text.
   !important overrides WooCommerce's own input rules (which are higher
   specificity — `.wc-block-components-text-input input[type="text"]` etc. — and
   otherwise force a white ground + dark currentColor border). */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-combobox .components-combobox-control__input,
.wc-block-components-combobox input,
.wc-block-components-select__container select,
.wc-block-components-address-form input,
.wc-block-components-address-form select {
	background: var(--wp--preset--color--cream) !important;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sienna) 18%, transparent) !important;
	border-radius: 2px !important;
	color: var(--wp--preset--color--sienna);
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	padding: 14px 16px;
}
.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus,
.wc-block-components-combobox.is-active input,
.wc-block-components-address-form input:focus,
.wc-block-components-address-form select:focus {
	border-color: var(--wp--preset--color--sienna) !important;
	box-shadow: none !important;
	outline: none;
}
/* Floating labels. */
.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-components-checkout-step label {
	font-family: var(--wp--preset--font-family--body);
	color: color-mix(in srgb, var(--wp--preset--color--sienna) 60%, transparent);
}
.wc-block-components-text-input.is-active label {
	color: var(--wp--preset--color--sienna);
}

/* Checkboxes + radios — sienna accent, no blue. */
.wc-block-components-checkbox__input,
.wc-block-components-radio-control__input,
input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--wp--preset--color--sienna);
}
.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--deep-text);
}

/* Shipping + payment option rows. */
.wc-block-checkout__shipping-option,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sienna) 15%, transparent);
	border-radius: 2px;
}
.wc-block-components-radio-control-accordion-content,
.wc-block-checkout__payment-method p {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	color: color-mix(in srgb, var(--wp--preset--color--sienna) 80%, transparent);
}

/* Order summary sidebar card. */
.wc-block-components-order-summary,
.wc-block-checkout__sidebar .wc-block-components-panel,
.wc-block-checkout__sidebar > .wc-block-components-totals-wrapper {
	background: var(--wp--preset--color--cream);
}
.wc-block-checkout__sidebar {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sienna) 12%, transparent);
	border-radius: 2px;
	padding: 32px;
	background: var(--wp--preset--color--cream);
}
.wc-block-components-checkout-order-summary__title,
.wc-block-components-checkout-order-summary__title-text {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: 24px;
	color: var(--wp--preset--color--sienna);
}
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--sienna);
}

/* Validation / error + success. */
.wc-block-components-validation-error,
.wc-block-components-validation-error p {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	color: #a3341f;
}
.wc-block-components-notice-banner.is-error {
	background: #faf1ee;
	border-color: #a3341f;
	color: #a3341f;
}
.wc-block-components-notice-banner.is-success {
	background: #f0f3ec;
	border-color: #5a6b4a;
	color: #3d4a31;
}

/* ============================================================
   ORDER RECEIVED (thank you)
   ============================================================ */
.woocommerce-order-received .wp-block-woocommerce-order-confirmation-status-heading,
.woocommerce-order-received .wc-block-order-confirmation-status h1,
.woocommerce-order-received .entry-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: 48px;
	color: var(--wp--preset--color--sienna);
	text-align: center;
	margin-top: 90px;
}
.woocommerce-order-received .wc-block-order-confirmation-summary,
.woocommerce-order-received .wc-block-order-confirmation-totals__table {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--deep-text);
}
.woocommerce-order-received .wc-block-order-confirmation-totals th,
.woocommerce-order-received h2,
.woocommerce-order-received h3 {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--sienna);
}

/* ============================================================
   ORDER-PAY ("Pay for order") — /checkout/order-pay/{id}/
   The redirect payment screen (RollaPay in production). Renders an
   order-details summary + a Pay / Cancel control pair. Styling only.
   ============================================================ */
.woocommerce-order-pay .woocommerce {
	max-width: 1100px;
	margin-inline: auto;
	padding-bottom: 60px;
}

/* Order metadata card — order number / date / total / payment method. */
.woocommerce-order-pay ul.order_details {
	display: flex;
	flex-wrap: wrap;
	margin: 60px 0 0;
	padding: 32px;
	list-style: none;
	background: var(--wp--preset--color--cream);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sienna) 15%, transparent);
	border-radius: 2px;
}
/* Labels (the text node before the <strong>). */
.woocommerce-order-pay ul.order_details li {
	flex: 0 0 auto;
	margin: 0;
	padding: 0 28px;
	border-right: 1px solid color-mix(in srgb, var(--wp--preset--color--sienna) 15%, transparent);
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}
.woocommerce-order-pay ul.order_details li:first-child {
	padding-left: 0;
}
.woocommerce-order-pay ul.order_details li:last-child {
	padding-right: 0;
	border-right: none;
}
/* Values. */
.woocommerce-order-pay ul.order_details li strong {
	display: block;
	margin-top: 8px;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: color-mix(in srgb, var(--wp--preset--color--sienna) 80%, transparent);
}
.woocommerce-order-pay ul.order_details .woocommerce-Price-amount {
	color: color-mix(in srgb, var(--wp--preset--color--sienna) 80%, transparent);
}

/* Payment instruction line. */
.woocommerce-order-pay #wc-rollapay-form > p {
	margin: 60px 0 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--wp--preset--color--sienna);
}

/* Pay / Cancel control row. */
.woocommerce-order-pay #rollapay_form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
	margin-top: 32px;
}
/* Empty helper form RollaPay injects — keep it out of the flex row. */
.woocommerce-order-pay #rollapay_form > form#order_review {
	display: none;
}

/* Pay Now — sienna, matches the checkout "Place order" button.
   #place_order covers the classic form-pay fallback (e.g. bank transfer). */
.woocommerce-order-pay #rollapay-payment-button,
.woocommerce-order-pay #place_order {
	background: var(--wp--preset--color--sienna);
	color: var(--wp--preset--color--cream);
	border: none;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 18px 32px;
	cursor: pointer;
	transition: background 0.4s ease;
}
.woocommerce-order-pay #rollapay-payment-button:hover,
.woocommerce-order-pay #place_order:hover {
	background: var(--wp--preset--color--espresso);
	color: var(--wp--preset--color--cream);
}

/* Cancel order & restore cart — reset the .button class back to a quiet
   text link (sienna, small, underline on hover). */
.woocommerce-order-pay #rollapay-cancel-payment-button.button.cancel {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--wp--preset--color--sienna);
	text-decoration: none;
	transition: color 0.3s ease;
}
.woocommerce-order-pay #rollapay-cancel-payment-button.button.cancel:hover {
	background: transparent;
	color: var(--wp--preset--color--sienna);
	text-decoration: underline;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 880px) {
	.wp-block-post-title {
		margin-top: 60px;
		font-size: 42px;
	}
	.wc-block-checkout__sidebar {
		position: static;
		padding: 24px;
	}
	/* Quantity stepper drops below the product row on narrow carts. */
	.wc-block-cart-item__wrap {
		flex-wrap: wrap;
	}
	/* Order-pay metadata card stacks; dividers move to the bottom edge. */
	.woocommerce-order-pay ul.order_details {
		flex-direction: column;
		padding: 24px;
	}
	.woocommerce-order-pay ul.order_details li {
		padding: 0 0 18px;
		border-right: none;
		border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--sienna) 15%, transparent);
	}
	.woocommerce-order-pay ul.order_details li:not(:first-child) {
		padding-top: 18px;
	}
	.woocommerce-order-pay ul.order_details li:last-child {
		padding-bottom: 0;
		border-bottom: none;
	}
}