/*
 * Content pages and the WooCommerce block pages (checkout, cart, account).
 *
 * The Checkout block keeps its own layout, fields and behaviour (WooCommerce
 * default fields: first/last name, split city/state/ZIP). This file only
 * re-skins it to the final design: red Book type, pill inputs and radio rows,
 * a square order summary, red pill "Place order", and the #F0F0F0 order
 * summary bar on mobile. Selectors stick to the block's public component
 * classes (.wc-block-components-*) and touch as little as possible:
 * WooCommerce updates the internals often.
 */

.page-content {
	width: 100%;
	max-width: var(--page-max);
	margin: 0 auto;
	padding: var(--space-6) var(--gutter) var(--space-8);
}

.page-content__title {
	margin-bottom: var(--space-5);
	font-size: var(--text-20);
}

.entry-content > * + * {
	margin-top: var(--space-4);
}

.entry-content .alignwide {
	width: 100%;
	max-width: var(--page-max);
}

@media (min-width: 768px) {
	.page-content__title {
		font-size: var(--text-24);
	}
}

/* ---- WooCommerce blocks: type and color ---------------------------------- */

.os-context-simple .page-content {
	max-width: calc(1780px + 2 * var(--gutter));
	padding-top: 30px;
}

/* Desktop checkout: 70px side margins at 1920. */
@media (min-width: 768px) {
	.os-context-simple .page-content {
		padding-inline: clamp(var(--gutter), 3.646vw, 70px);
	}
}

.os-context-simple .wc-block-components-sidebar-layout,
.os-context-simple .wc-block-components-sidebar-layout * {
	font-family: var(--font-body);
}

.os-context-simple .wc-block-components-sidebar-layout {
	margin-bottom: 0;
	color: var(--color-text);
}

.os-context-simple .wc-block-components-title,
.os-context-simple .wc-block-components-checkout-step__title,
.os-context-simple .wc-block-components-checkout-order-summary__title-text {
	color: var(--color-text);
	font-size: var(--text-14);
	font-weight: var(--weight-book);
	text-transform: uppercase;
}

.os-context-simple .wc-block-components-checkout-step__description,
.os-context-simple .wc-block-components-checkout-step__heading-content,
.os-context-simple .wc-block-components-checkbox__label,
.os-context-simple .wc-block-checkout__terms,
.os-context-simple .wc-block-components-product-metadata {
	color: var(--color-text);
	font-size: var(--text-12);
}

.os-context-simple .wc-block-components-checkout-step__heading-content a,
.os-context-simple .wc-block-checkout__terms a,
.os-context-simple .wc-block-components-checkout-return-to-cart-button {
	color: var(--color-text);
}

@media (min-width: 768px) {
	.os-context-simple .wc-block-components-title,
	.os-context-simple .wc-block-components-checkout-step__title {
		font-size: var(--text-18);
	}
}

/* ---- Inputs and selects: pills, 1px #E4E4E4, red uppercase labels -------- */

.os-context-simple .wc-block-components-text-input input,
.os-context-simple .wc-block-components-text-input textarea,
.os-context-simple .wc-block-components-combobox .wc-block-components-combobox-control input,
.os-context-simple .wc-blocks-components-select .wc-blocks-components-select__select {
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--text-14);
	padding-inline: 19px;
	box-shadow: none;
}

.os-context-simple .wc-block-components-text-input textarea {
	border-radius: 24px;
}

.os-context-simple .wc-block-components-text-input label,
.os-context-simple .wc-block-components-combobox .wc-block-components-combobox-control label,
.os-context-simple .wc-blocks-components-select .wc-blocks-components-select__label {
	left: 20px;
	color: var(--color-text);
	font-size: var(--text-14);
	text-transform: uppercase;
}

.os-context-simple .wc-block-components-text-input input:focus,
.os-context-simple .wc-block-components-combobox .wc-block-components-combobox-control input:focus,
.os-context-simple .wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--color-border-strong);
	outline: 1px solid var(--color-border-strong);
	outline-offset: 0;
	box-shadow: none;
}

.os-context-simple .wc-blocks-components-select .wc-blocks-components-select__container {
	border-radius: var(--radius-pill);
	background: transparent;
}

.os-context-simple .wc-blocks-components-select .wc-blocks-components-select__expand {
	right: 19px;
	fill: var(--color-text);
}

.os-context-simple .wc-block-components-validation-error {
	padding-left: 20px;
	color: var(--color-text);
}

/* ---- Radios (shipping and payment rows): pill rows, 12px red circles ----- */

.os-context-simple .wc-block-components-radio-control__option,
.os-context-simple .wc-block-components-radio-control-accordion-option {
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-pill);
	box-shadow: none;
}

.os-context-simple .wc-block-components-radio-control--highlight-checked::after,
.os-context-simple .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.os-context-simple .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
	border-color: var(--color-border-strong);
	box-shadow: none;
}

.os-context-simple .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option + .wc-block-components-radio-control-accordion-option,
.os-context-simple .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option + .wc-block-components-radio-control__option {
	margin-top: 9px;
}

.os-context-simple .wc-block-components-radio-control--highlight-checked::after {
	display: none;
}

/* Accordion options hold the payment fields: square off the open row. */
.os-context-simple .wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control-accordion-content) {
	border-radius: 24px;
}

.os-context-simple .wc-block-components-radio-control__input {
	width: 12px;
	min-width: 12px;
	height: 12px;
	min-height: 12px;
	border: var(--border-width) solid var(--color-text);
	background: var(--color-surface);
}

.os-context-simple .wc-block-components-radio-control__input:checked {
	border-color: var(--color-text);
}

.os-context-simple .wc-block-components-radio-control__input:checked::before {
	width: 6px;
	min-width: 6px;
	height: 6px;
	background: var(--color-text);
}

.os-context-simple .wc-block-components-radio-control__label,
.os-context-simple .wc-block-components-radio-control__secondary-label,
.os-context-simple .wc-block-components-payment-method-label,
.os-context-simple .wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__label {
	color: var(--color-text);
	font-size: var(--text-14);
	text-transform: uppercase;
}

.os-context-simple .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	border-color: var(--color-border-strong);
	border-radius: 2px;
}

.os-context-simple .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--color-text);
}

/* ---- Buttons ------------------------------------------------------------ */

.os-context-simple .wc-block-components-button:not(.is-link),
.os-context-simple .wc-block-cart__submit-button {
	min-height: var(--control-height);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-action);
	box-shadow: none;
	color: var(--color-action-text);
	font-size: var(--text-12);
	font-weight: var(--weight-bold);
	text-transform: uppercase;
}

.os-context-simple .wc-block-components-button:not(.is-link):hover {
	background: var(--color-action-hover);
}

.os-context-simple .wc-block-components-button:not(.is-link):focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
	box-shadow: none;
}

@media (min-width: 768px) {
	.os-context-simple .wc-block-components-checkout-place-order-button,
	.os-context-simple .wc-block-cart__submit-button {
		min-height: var(--input-height);
		font-size: var(--text-18);
	}
}

/* ---- Order summary: square box, 10px thumbnails, Book totals ------------ */

.os-context-simple .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__content,
.os-context-simple .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block,
.os-context-simple .wc-block-components-totals-wrapper,
.os-context-simple .wc-block-components-order-summary {
	border-color: var(--color-border);
	border-radius: var(--radius-none);
}

.os-context-simple .wc-block-components-order-summary-item__image img {
	border-radius: var(--radius-thumb);
}

/* Quantity badge: red pill, no shadow. */
.os-context-simple .wc-block-components-order-summary-item__quantity {
	border: 0;
	background: var(--color-action);
	box-shadow: none;
	color: var(--color-action-text);
	font-size: var(--text-10);
}

.os-context-simple .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	color: var(--color-text);
	font-size: var(--text-14);
	font-weight: var(--weight-bold);
	text-transform: uppercase;
}

.os-context-simple .wc-block-components-order-summary-item__total-price,
.os-context-simple .wc-block-components-order-summary-item__individual-prices,
.os-context-simple .wc-block-components-totals-item__label,
.os-context-simple .wc-block-components-totals-item__value,
.os-context-simple .wc-block-components-totals-item__description {
	color: var(--color-text);
	font-size: var(--text-14);
	font-weight: var(--weight-book);
	text-transform: uppercase;
}

.os-context-simple .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.os-context-simple .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: var(--text-16);
	font-weight: var(--weight-book);
}

.os-context-simple .wc-block-components-panel__button,
.os-context-simple .wc-block-components-totals-coupon-link {
	color: var(--color-text);
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.os-context-simple .wc-block-components-order-summary-item__description .wc-block-components-product-name,
	.os-context-simple .wc-block-components-order-summary-item__total-price,
	.os-context-simple .wc-block-components-totals-item__label,
	.os-context-simple .wc-block-components-totals-item__value {
		font-size: var(--text-16);
	}

	.os-context-simple .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
	.os-context-simple .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
		font-size: var(--text-18);
	}
}

/* ==========================================================================
 * Checkout form only (body.os-checkout, set in inc/setup.php). Cart and
 * account never get these rules.
 *
 * Breakpoints inside the block use the SAME container queries as WooCommerce
 * (.wp-block-woocommerce-checkout is an inline-size container and the block
 * stacks below 700px), so the skin can never disagree with the block's own
 * layout. Page-level rules use the theme's 768/1100 viewport breakpoints.
 *
 * Selectors carry .wp-block-woocommerce-checkout (plus WC's parent classes
 * where its rule has them) because WooCommerce's rules are long, e.g.
 * `.wc-block-components-form .wc-block-components-text-input input[type=email]`
 * (0,3,1), and they beat the generic rules above.
 * ======================================================================== */

/* ---- Page frame: the XD's 70px side margins and 1780px content at 1920 --- */

/* Mobile: the summary bar touches the banner. The title spacing moves inside. */
.os-checkout .page-content {
	padding-top: 0;
}

@media (min-width: 768px) {
	/*
	 * The simple-context rule above resolves to the gutter (88px at 1920):
	 * its clamp() minimum (--gutter) is larger than its 70px maximum, and
	 * clamp() then returns the minimum. Checkout gets the intended 19-70px.
	 */
	.os-checkout .page-content {
		max-width: calc(1780px + 2 * 70px);
		padding-top: 44px; /* XD 1920: banner ends at 91, CHECKOUT cap top at ~139 */
		padding-inline: clamp(19px, 3.646vw, 70px);
	}
}

/*
 * The block ships `alignwide`, capped at --page-max (1200px) above: fill the
 * frame. Its own 24px top padding would open a gap under the banner on mobile.
 */
.os-checkout .entry-content .wp-block-woocommerce-checkout.alignwide {
	max-width: none;
	padding-top: 0;
}

/*
 * Desktop columns (XD at 1920): form 899px at x70, summary 821px at x1029,
 * a 60px gap. Proportional below that. WooCommerce's own 65/35 split takes
 * over under 1100px, and the block stacks under 700px (container).
 */
@media (min-width: 1100px) {
	.os-checkout .wp-block-woocommerce-checkout {
		--os-checkout-gap: clamp(32px, 3.125vw, 60px);
	}

	.os-checkout .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-main {
		width: calc((100% - var(--os-checkout-gap)) * 0.5227); /* 899 / 1720 */
		padding-right: 0;
	}

	.os-checkout .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar {
		width: calc((100% - var(--os-checkout-gap)) * 0.4773); /* 821 / 1720 */
		margin-left: var(--os-checkout-gap);
		padding-left: 0;
	}
}

/* ---- "CHECKOUT" title (printed inside the fields column, inc/checkout.php) */

.os-checkout .wp-block-woocommerce-checkout .os-checkout__title {
	margin: 27px 0 22px; /* XD 375: the bar ends at 116, CHECKOUT baseline at 159 */
	color: var(--color-text);
	font-family: var(--font-display);
	font-size: var(--text-20);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	text-transform: uppercase;
}

@container (min-width: 700px) {
	.os-checkout .wp-block-woocommerce-checkout .os-checkout__title {
		margin: 0 0 var(--space-5);
		font-size: var(--text-24);
	}
}

/* ---- Step titles: "CONTACT + SHIPPING ADDRESS", "Shipping", "Payment" ---- */

/* The contact heading covers the address step too (XD). Kept for screen readers. */
.os-checkout .wp-block-woocommerce-checkout .wc-block-checkout__shipping-fields .wc-block-components-checkout-step__heading-container {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Email to country: the same 12px as the address rows, one visual group. */
.os-checkout .wp-block-woocommerce-checkout .wc-block-components-form .wc-block-checkout__contact-fields {
	margin-bottom: 12px;
}

@container (min-width: 700px) {
	/* Desktop XD: "Shipping" and "Payment" as typed (mobile is all uppercase). */
	.os-checkout .wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-shipping-methods-block .wc-block-components-checkout-step__title,
	.os-checkout .wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-payment-block .wc-block-components-checkout-step__title {
		text-transform: none;
	}
}

/* ---- Inputs: pills, 1px #E4E4E4, like the selects ---------------------- */

.os-checkout .wp-block-woocommerce-checkout {
	--os-input-height: 45px; /* XD 375 */
}

@container (min-width: 700px) {
	.os-checkout .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
		--os-input-height: var(--input-height); /* 47px, XD 1920 */
	}
}

.os-checkout .wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type] {
	height: var(--os-input-height);
	padding: 0 19px;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	box-shadow: none;
	color: var(--color-text);
	font-size: var(--text-14);
	line-height: 21px;
}

/* Floating label: the value below, the label scaled above, inside the pill. */
.os-checkout .wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input.is-active input[type],
.os-checkout .wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type]:-webkit-autofill {
	padding: 18px 19px 4px;
}

.os-checkout .wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type]:focus {
	padding-left: 19px;
	border-color: var(--color-border-strong);
	outline: 1px solid var(--color-border-strong);
	outline-offset: 0;
}

.os-checkout .wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input label {
	top: calc(var(--os-input-height) / 2);
	left: 20px;
	font-size: var(--text-14);
}

.os-checkout .wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input.is-active label,
.os-checkout .wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type]:-webkit-autofill + label {
	top: 4px;
}

/* Mobile XD: field labels Book 12. */
@container (max-width: 699px) {
	.os-checkout .wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input label,
	.os-checkout .wp-block-woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__label {
		font-size: var(--text-12);
	}
}

.os-checkout .wp-block-woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__container {
	height: var(--os-input-height);
}

.os-checkout .wp-block-woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select {
	height: 100%;
}

/* ---- Radio rows (shipping, payment): pills, like the inputs ------------ */

.os-checkout .wp-block-woocommerce-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option,
.os-checkout .wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted,
.os-checkout .wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option,
.os-checkout .wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-radius: var(--radius-pill);
}

/* An open payment row holds the card fields: rounded, not a pill. */
.os-checkout .wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control-accordion-content) {
	border-radius: 24px;
}

/* ---- Place order: 40px Bold 12 + live total (mobile), 47px Bold 18 (desktop) */

.os-checkout .wp-block-woocommerce-checkout .wc-block-checkout__actions .wc-block-components-button.wc-block-components-checkout-place-order-button {
	height: var(--control-height);
	min-height: var(--control-height);
	padding: 0 var(--space-5);
	font-size: var(--text-12);
	line-height: 1;
}

.os-checkout .wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button .wc-block-components-checkout-place-order-button__separator {
	margin: 0 0.35em;
}

@container (min-width: 700px) {
	.os-checkout .wp-block-woocommerce-checkout .wc-block-checkout__actions .wc-block-components-button.wc-block-components-checkout-place-order-button {
		height: var(--input-height);
		min-height: var(--input-height);
		font-size: var(--text-18);
	}

	/* Desktop XD: "PLACE ORDER" only. */
	.os-checkout .wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button .wc-block-components-checkout-place-order-button__separator,
	.os-checkout .wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button .wc-block-components-checkout-place-order-button__price {
		display: none;
	}
}

/* ---- Order summary ------------------------------------------------------ */

/* Name, variant and price only: no product short description (XD). */
.os-checkout .wp-block-woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-metadata__description {
	display: none;
}

.os-checkout .wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text {
	color: var(--color-text);
	font-size: var(--text-18);
	font-weight: var(--weight-book);
	line-height: var(--leading-snug);
	text-transform: uppercase;
}

/* Mobile: WooCommerce's second, full summary before the CTA is not in the XD. */
.os-checkout .wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper {
	display: none;
}

/*
 * Mobile: the collapsible summary is the #F0F0F0 bar under the banner (WC
 * stacks the sidebar first): "▼ ORDER SUMMARY (2 ITEMS)    $80.00", Book 12,
 * 63px tall, the red triangle on the LEFT (WC's chevron on the right is hidden).
 */
@container (max-width: 699px) {
	/* The title below carries the bar-to-CHECKOUT spacing. */
	.os-checkout .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-checkout__sidebar {
		margin-bottom: 0;
	}

	.os-checkout .wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title {
		gap: 7px;
		margin: 0 calc(-1 * var(--gutter));
		padding: 22px var(--gutter);
		border: 0;
		background: var(--color-summary-bar);
	}

	.os-checkout .wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title::before {
		content: "";
		flex: none;
		width: 0;
		height: 0;
		border-top: 8px solid var(--color-text);
		border-inline: 5px solid transparent;
		transition: transform var(--duration-fast) var(--ease-out);
	}

	.os-checkout .wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title.is-open::before {
		transform: rotate(180deg);
	}

	.os-checkout .wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text {
		font-size: var(--text-12);
		line-height: 19px;
	}

	/* "(2 ITEMS)": the count is set by assets/js/checkout.js. */
	.os-checkout .wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title-text[data-os-count]::after {
		content: " " attr(data-os-count);
	}

	.os-checkout .wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title-price {
		color: var(--color-text);
		font-size: var(--text-12);
	}

	.os-checkout .wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-icon {
		display: none;
	}
}