/**
 * WooCommerce Checkout block (Figma Checkout 10650:5123), loaded only when
 * the block is on the page.
 *
 * Page: a white panel on the left whose right edge is scalloped, the form in
 * it, and the dark order summary on the textured right half. The header and
 * the compact footer of the template sit in the same split.
 * Form: numbered steps separated by dashed rules, labels above the fields.
 */

/* ------------------------------------------------------------- page -- */

.hb-checkout {
	/* Figma frame: 1440 wide, centred on wider screens. */
	--hb-co-frame: min(100%, 1440px);
	--hb-co-offset: max(0px, (100% - 1440px) / 2);
	--hb-co-split: calc(var(--hb-co-offset) + var(--hb-co-frame) * 0.56875);
	--hb-co-start: calc(var(--hb-co-offset) + var(--hb-co-frame) * 0.06111);
	--hb-co-gap: calc(var(--hb-co-frame) * 0.09931);
	--hb-co-aside: max(2rem, var(--hb-co-frame) * 0.04444);
	--hb-co-band: 6.42875rem;
	--hb-co-notch: 34.2px;
	--hb-co-pitch: 87.93px;
	--hb-co-dash: url("../../images/shapes/line-dashed-light-wide.png") 50% 50% / 100% 2px no-repeat;
	position: relative;
	isolation: isolate;
	margin: 0;
	/* Figma: the textured background stays put behind the summary column. */
	background:
		linear-gradient(90deg, var(--wp--preset--color--base) 0 calc(var(--hb-co-split) - var(--hb-co-band)), transparent 0),
		url("../../images/shop/checkout-bg.webp") 50% 50% / cover fixed,
		var(--wp--preset--color--surface);
}

/* The last strip of the white panel, its right edge bitten by semicircles. */
.hb-checkout::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: calc(var(--hb-co-split) - var(--hb-co-band) - 1px);
	width: calc(var(--hb-co-band) + 1px);
	background-color: var(--wp--preset--color--base);
	-webkit-mask: radial-gradient(circle var(--hb-co-notch) at 100% 50%, #0000 98%, #000 100%) 0 calc(56px - var(--hb-co-pitch) / 2) / 100% var(--hb-co-pitch) repeat-y;
	mask: radial-gradient(circle var(--hb-co-notch) at 100% 50%, #0000 98%, #000 100%) 0 calc(56px - var(--hb-co-pitch) / 2) / 100% var(--hb-co-pitch) repeat-y;
}

.hb-checkout.hb-checkout > * {
	margin-block: 0;
}

.hb-checkout .hb-header--checkout .hb-header__card {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.hb-checkout__main.hb-checkout__main {
	/* Figma: the form and the summary start at y 180. */
	padding-top: 4.3125rem;
}

.hb-checkout__main.hb-checkout__main > * {
	margin-block: 0;
}

.hb-checkout .woocommerce.wc-block-store-notices.wc-block-store-notices {
	box-sizing: border-box;
	max-width: none;
	margin: 0;
	padding-inline: var(--hb-co-start) calc(100% - var(--hb-co-split) + var(--hb-co-gap));
}

.hb-checkout .wp-block-woocommerce-checkout {
	margin: 0;
	padding: 0;
}

/* Two columns: the form in the white panel, the summary on the beige. */
.hb-checkout .wc-block-components-sidebar-layout {
	flex-wrap: nowrap;
	margin: 0;
}

.hb-checkout .wc-block-components-sidebar-layout .wc-block-components-main {
	flex: none;
	width: var(--hb-co-split);
	padding: 0 var(--hb-co-gap) 0 var(--hb-co-start);
}

/* Figma: a viewport-high column, the summary on top and the reassurance
 * list at the bottom. */
.hb-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	box-sizing: border-box;
	width: auto;
	min-height: calc(100vh - 11.25rem);
	margin: 0;
	padding: 0 calc(var(--hb-co-offset) + var(--hb-co-aside)) 4rem var(--hb-co-aside);
}

.hb-checkout .wc-block-checkout__sidebar.is-sticky {
	top: var(--wp--preset--spacing--60);
}

/* The compact footer closes the form column. */
.hb-checkout__footer.hb-checkout__footer {
	box-sizing: border-box;
	width: var(--hb-co-split);
	padding: 0 var(--hb-co-gap) 0 var(--hb-co-start);
}

.hb-checkout__footer .hb-tunnel.hb-tunnel {
	padding: 4rem 0;
}

/* ------------------------------------------------------------- form -- */

.hb-checkout .wc-block-checkout__form {
	counter-reset: hb-checkout-step;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: -0.05rem;
	line-height: 1.25;
}

.hb-checkout .wc-block-checkout__form > * {
	margin: 0;
}

/* Blocks with nothing to show (express payment, shipping on a virtual order). */
.hb-checkout .wc-block-checkout__form > :empty,
.hb-checkout .wc-block-checkout__form > .wc-block-components-notices:not(:has(.wc-block-components-notice-banner)) {
	display: none;
}

.hb-checkout .wc-block-components-form .wc-block-components-checkout-step {
	margin: 0;
}

/* Dashed rules between the steps, and above the help line. */
.hb-checkout .wc-block-checkout__form > .wc-block-components-checkout-step ~ .wc-block-components-checkout-step,
.hb-checkout .hb-checkout-help {
	padding-top: 2rem;
	background: var(--hb-co-dash);
	background-position: 0 0;
	background-size: 100% 1px;
}

.hb-checkout .wc-block-components-checkout-step__heading-container {
	gap: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--40);
}

.hb-checkout .wc-block-components-checkout-step__heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	margin: 0;
}

.hb-checkout .wc-block-components-checkout-step__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	letter-spacing: -0.05rem;
	line-height: 1;
}

/* "1. Contact information", "2. Billing address", "3. Payment options". */
.hb-checkout .wc-block-checkout__form .wc-block-components-checkout-step__title::before {
	counter-increment: hb-checkout-step;
	content: counter(hb-checkout-step) ". ";
}

/* "Already have an account? Log in" (WooCommerce › Settings › Accounts). */
.hb-checkout .wc-block-components-checkout-step__heading-content {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0;
	line-height: 1.375;
}

.hb-checkout .wc-block-components-checkout-step__heading-content a {
	margin-left: var(--wp--preset--spacing--30);
	padding-bottom: 0.25rem;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.hb-checkout .wc-block-components-checkout-step__description,
.hb-checkout .wc-block-checkout__guest-checkout-notice,
.hb-checkout .wc-block-components-address-card {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.25;
}

.hb-checkout .wp-block-woocommerce-checkout .wc-block-checkout__guest-checkout-notice {
	margin-top: var(--wp--preset--spacing--20);
	color: var(--hb-text-subtle);
}

.hb-checkout .wc-block-components-checkout-step__content > * {
	margin-bottom: var(--wp--preset--spacing--40);
}

.hb-checkout .wc-block-components-checkout-step__content > :last-child {
	margin-bottom: 0;
}

/* ----------------------------------------------------------- fields -- */

/* Label above the control (WooCommerce floats it inside by default). */
.hb-checkout .wc-block-components-address-form {
	gap: 0 var(--wp--preset--spacing--40);
}

.hb-checkout .wc-block-components-form .wc-block-components-text-input,
.hb-checkout .wc-block-components-text-input {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--40);
}

.hb-checkout .wc-block-components-form .wc-block-components-checkout-step .wc-block-components-text-input:first-of-type,
.hb-checkout .wc-block-components-form .wc-block-components-checkout-step .wc-block-components-country-input {
	margin-top: 0;
}

.hb-checkout .wc-block-checkout__form .wc-blocks-components-select {
	margin-top: 0;
}

.hb-checkout .wc-block-components-form .wc-block-components-text-input label,
.hb-checkout .wc-block-components-text-input label,
.hb-checkout .wc-blocks-components-select .wc-blocks-components-select__label {
	position: static;
	order: -1;
	max-width: none;
	margin: 0;
	overflow: visible;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.7143;
	white-space: normal;
	transform: none;
	cursor: default;
}

/* "(required)" after the label of mandatory fields, as in the design; WooCommerce already prints "(optional)". */
.hb-checkout {
	--hb-co-required: " (required)";
}

html[lang^="fr"] .hb-checkout {
	--hb-co-required: " (obligatoire)";
}

.hb-checkout .wc-block-components-text-input input:required + label::after,
.hb-checkout .wc-blocks-components-select__container:has(select[aria-required="true"], select:required) .wc-blocks-components-select__label::after,
.hb-checkout .wc-block-components-address-form__country .wc-blocks-components-select__label::after {
	content: var(--hb-co-required);
}

.hb-checkout .wc-block-components-totals-coupon__form .wc-block-components-text-input input:required + label::after {
	content: none;
}

/* The control: 52px, 1px #d1d1d1 border, 4px radius, Source Serif 20/26. */
.hb-checkout .wc-block-components-form .wc-block-components-text-input :is(input[type="email"], input[type="text"], input[type="tel"], input[type="number"], input[type="password"], input[type="url"]),
.hb-checkout .wc-block-components-text-input :is(input[type="email"], input[type="text"], input[type="tel"], input[type="number"], input[type="password"], input[type="url"]),
.hb-checkout .wc-blocks-components-select .wc-blocks-components-select__select {
	box-sizing: border-box;
	height: 3.25rem;
	min-height: 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.05rem;
	line-height: 1.3;
	box-shadow: none;
}

.hb-checkout .wc-block-components-text-input input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.hb-checkout .wc-block-components-form .wc-block-components-text-input :is(input[type="email"], input[type="text"], input[type="tel"], input[type="number"], input[type="password"], input[type="url"]):focus,
.hb-checkout .wc-block-components-text-input :is(input[type="email"], input[type="text"], input[type="tel"], input[type="number"], input[type="password"], input[type="url"]):focus,
.hb-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus {
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--highlight);
	outline: var(--wp--custom--focus--width) solid var(--wp--custom--focus--color);
	outline-offset: var(--wp--custom--focus--offset);
	box-shadow: none;
}

.hb-checkout .wc-blocks-components-select .wc-blocks-components-select__container {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	background: none;
	line-height: 1.3;
}

/* Figma select: 16px left, 12px right, a 16px chevron. */
.hb-checkout .wc-blocks-components-select .wc-blocks-components-select__select {
	padding-right: 2.5rem;
}

.hb-checkout .wc-blocks-components-select .wc-blocks-components-select__expand {
	top: auto;
	right: 0.75rem;
	bottom: 1.625rem;
	width: 1rem;
	height: 1rem;
	fill: var(--wp--preset--color--contrast);
	transform: translateY(50%);
}

/* Error: red border, then the message in Source Serif 16/20. */
.hb-checkout .wc-block-components-form .wc-block-components-text-input.has-error :is(input, input:hover, input:focus, input:active),
.hb-checkout .wc-block-components-text-input.has-error :is(input, input:hover, input:focus, input:active),
.hb-checkout .wc-blocks-components-select.has-error .wc-blocks-components-select__select {
	border-color: var(--wp--preset--color--error);
	box-shadow: none;
}

.hb-checkout .wc-block-components-text-input.has-error label,
.hb-checkout .wc-blocks-components-select.has-error .wc-blocks-components-select__label {
	color: var(--wp--preset--color--contrast);
}

.hb-checkout .wc-block-components-validation-error {
	padding: 0;
	color: var(--wp--preset--color--error);
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: -0.05rem;
	line-height: 1.25;
}

.hb-checkout .wc-block-components-validation-error > p {
	display: flex;
	gap: var(--wp--preset--spacing--10);
	align-items: flex-start;
	margin: 0;
}

.hb-checkout .wc-block-components-validation-error svg {
	flex: none;
	fill: currentColor;
}

/* "+ Add apartment, suite, etc." as a link button, on its own row. */
.hb-checkout .wc-block-components-address-form__address_2-toggle {
	flex: 0 0 100%;
	margin-top: var(--wp--preset--spacing--40);
	padding: 0;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.25;
}

.hb-checkout .wc-block-components-address-form__address_2-toggle:hover {
	text-decoration: underline;
	color: var(--wp--preset--color--secondary);
}

/* Checkboxes: 16px cream box with a grey border, yellow when checked. */
.hb-checkout .wc-block-components-checkbox label {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.25;
}

.hb-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	width: 1rem;
	min-width: 1rem;
	height: 1rem;
	margin-top: 0.125rem;
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--surface);
	transition: background-color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

.hb-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	border-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--accent);
}

.hb-checkout .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	width: 1rem;
	height: 1rem;
	margin: 0.125rem 0 0;
	fill: var(--wp--preset--color--contrast);
}

/* "Is the purchase made by a company?" (happenboard-ui), after the city. */
.hb-checkout .wc-block-components-address-form > .wc-block-components-checkbox {
	flex: 0 0 100%;
	margin-top: var(--wp--preset--spacing--40);
}

/* The VAT number: the EU VAT Number block comes right after the billing
 * address, without a title, and reads as its last field. */
.hb-checkout .wc-block-checkout__form > .wc-block-checkout__billing-fields + .eu-vat-extra-css {
	margin-top: calc(var(--wp--preset--spacing--40) - 2rem);
	padding-top: 0;
	background: none;
}

.hb-checkout .eu-vat-extra-css .wc-block-components-checkout-step__heading:not(:has(.wc-block-components-checkout-step__title:not(:empty))) {
	display: none;
}

.hb-checkout .eu-vat-extra-css .wc-block-components-text-input {
	margin-top: 0;
}

.hb-checkout .wc-block-checkout__terms {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.25;
}

.hb-checkout .wc-block-checkout__terms.wc-block-checkout__terms--with-separator {
	padding-top: 0;
	border-top: 0;
}

/* --------------------------------------------------------- payment -- */

.hb-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.hb-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--base);
}

.hb-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option::after,
.hb-checkout .wc-block-components-radio-control--highlight-checked::after {
	display: none;
}

.hb-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-radius: var(--wp--custom--radius--md);
	box-shadow: none;
}

/* Figma: the chosen option keeps its light border; only the radio changes. */

.hb-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control__option {
	padding: 0 0 0 1.75rem;
}

.hb-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control__label {
	min-height: 1.625rem;
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.04em;
	line-height: 1.3;
}

.hb-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input {
	left: 0;
	width: 1rem;
	min-width: 1rem;
	height: 1rem;
	min-height: 1rem;
	border: 1px solid var(--wp--preset--color--muted);
	background-color: var(--wp--preset--color--surface);
	transform: translateY(-50%);
	transition: background-color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

.hb-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
	border-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--accent);
}

.hb-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
	width: 0.5rem;
	height: 0.5rem;
	background-color: var(--wp--preset--color--contrast);
}

.hb-checkout .wc-block-components-radio-control-accordion-content {
	padding: var(--wp--preset--spacing--40) 0 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.25;
}

.hb-checkout .wc-block-components-radio-control-accordion-content:empty {
	display: none;
}

/* Card brands from the gateways: 48 × 24 tiles. */
.hb-checkout .wc-block-components-payment-method-icons {
	margin: 0 0 0 auto;
}

.hb-checkout .wc-block-components-payment-method-icons .wc-block-components-payment-method-icon {
	height: 1.5rem;
	max-width: 3rem;
	margin: 0 0 0 0.25rem;
}

/* --------------------------------------------------------- actions -- */

.hb-checkout .wc-block-checkout__actions {
	margin: 0;
}

.hb-checkout .wc-block-components-checkout-place-order-button.wc-block-components-checkout-place-order-button {
	min-height: 3.25rem;
	padding: calc(var(--wp--preset--spacing--40) - 1px) calc(var(--wp--preset--spacing--50) - 1px);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	transition: background-color var(--wp--custom--transition), border-color var(--wp--custom--transition);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.25;
}

.hb-checkout .wc-block-components-checkout-place-order-button.wc-block-components-checkout-place-order-button:hover {
	border-color: var(--wp--preset--color--accent-hover);
	background-color: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--contrast);
}

.hb-checkout .wc-block-components-button:not(.is-link):focus {
	box-shadow: none;
}

.hb-checkout .wc-block-components-button:not(.is-link):focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--custom--focus--color);
	outline-offset: var(--wp--custom--focus--offset);
}

/* "Need help? Contact us" (added by inc/shop.php). */
.hb-checkout .hb-checkout-help {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.04em;
	line-height: 1.3;
}

.hb-checkout .hb-checkout-help a {
	padding-bottom: 0.25rem;
	border-bottom: 1px solid currentColor;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.25;
	text-decoration: none;
}

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

/*
 * The summary in the sidebar is the dark Figma card. On phones WooCommerce
 * repeats it above the place order button (the "fill" wrapper): that copy
 * stays light, in the flow of the form.
 */
.hb-checkout .wp-block-woocommerce-checkout-order-summary-block {
	--hb-summary-bg: var(--wp--preset--color--contrast);
	--hb-summary-text: var(--wp--preset--color--base);
	--hb-summary-muted: #888;
	--hb-summary-discount: #ff9d9f;
	--hb-summary-rule: url("../../images/shapes/line-dashed-light.png") 50% 50% / 100% 2px no-repeat;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	box-sizing: border-box;
	padding: 2rem;
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--hb-summary-bg);
	box-shadow: 40px 64px 64px rgb(173 173 173 / 0.16);
	color: var(--hb-summary-text);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0;
	line-height: 1.25;
}

.hb-checkout .wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper {
	--hb-summary-bg: var(--wp--preset--color--base);
	--hb-summary-text: var(--wp--preset--color--contrast);
	--hb-summary-muted: var(--hb-text-subtle);
	--hb-summary-discount: var(--wp--preset--color--error);
	--hb-summary-rule: var(--hb-co-dash);
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: none;
}

.hb-checkout .checkout-order-summary-block-fill-wrapper .wc-block-components-checkout-step__heading {
	margin: 0;
}

.hb-checkout .wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill {
	border: 0;
	border-radius: 0;
}

.hb-checkout .wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper :is(.wc-block-components-order-summary, .wc-block-components-title) {
	margin: 0;
	padding: 0;
}

.hb-checkout .wc-block-checkout__actions .checkout-order-summary-block-fill-wrapper {
	margin-bottom: 2rem;
}

/* Visually hidden heading on large screens; on phones it is the toggle. */
.hb-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.hb-checkout :is(.wc-block-components-checkout-order-summary__content, .checkout-order-summary-block-fill) {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

.hb-checkout .wp-block-woocommerce-checkout-order-summary-block :is(.wc-block-components-totals-wrapper, .wp-block-woocommerce-checkout-order-summary-totals-block) {
	padding: 0;
	border: 0;
}

.hb-checkout :is(.wc-block-components-sidebar, .checkout-order-summary-block-fill) :is(.wc-block-components-panel, .wc-block-components-totals-coupon, .wc-block-components-totals-item) {
	padding-inline: 0;
}

.hb-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper:empty {
	display: none;
}

/* Line item: product name and description on the left, price on the right. */
.hb-checkout .wc-block-components-order-summary {
	padding: 0;
}

.hb-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item {
	gap: var(--wp--preset--spacing--40);
	padding: 0;
}

.hb-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__image,
.hb-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__individual-prices {
	display: none;
}

.hb-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__description {
	gap: var(--wp--preset--spacing--40);
	padding: 0;
}

.hb-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-name {
	max-width: none;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	letter-spacing: -0.033em;
	line-height: 1;
}

.hb-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item .wc-block-components-product-metadata {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: -0.05rem;
	line-height: 1.25;
}

.hb-checkout .wc-block-components-product-metadata p {
	margin: 0;
	font-size: inherit;
}

/* "1 site" alone, as in the design: "Website:" stays for screen readers. */
.hb-checkout .wc-block-components-order-summary .wc-block-components-product-details__name {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.hb-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
	padding: 0;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	letter-spacing: -0.033em;
	line-height: 1;
	white-space: nowrap;
}

.hb-checkout .wc-block-components-order-summary .wc-block-cart-item__total-price-and-sale-badge-wrapper {
	gap: var(--wp--preset--spacing--20);
}

.hb-checkout .wc-block-components-order-summary .wc-block-components-sale-badge {
	padding: 0;
	background: none;
	color: var(--hb-summary-discount);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
}

/* Subtotal, taxes and discounts: grey rows; the discount in pink. */
.hb-checkout .wp-block-woocommerce-checkout-order-summary-totals-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

/* Figma: Avantt Regular 20/20 −0.8 rows. */
.hb-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item {
	padding: 0;
	color: var(--hb-summary-muted);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	letter-spacing: -0.05rem;
	line-height: 1;
}

.hb-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item__description:empty {
	display: none;
}

.hb-checkout .wc-block-components-totals-discount .wc-block-components-totals-item__value,
.hb-checkout .wc-block-components-totals-discount .wc-block-components-totals-item__label {
	color: var(--hb-summary-discount);
}

/* Coupon: a light link button, 12px under the rows. */
.hb-checkout .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
	margin-top: calc(var(--wp--preset--spacing--30) - var(--wp--preset--spacing--50));
}

.hb-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button {
	display: inline-flex;
	width: auto;
	margin: 0;
	padding: 0 0 0.25rem !important;
	border-bottom: 1px solid var(--wp--preset--color--border);
	color: var(--hb-summary-text);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.25;
}

.hb-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button-icon {
	display: none;
}

.hb-checkout .wc-block-components-totals-coupon .wc-block-components-panel__content {
	padding-top: var(--wp--preset--spacing--40);
}

.hb-checkout .wc-block-components-totals-coupon__form .wc-block-components-text-input {
	margin: 0;
}

.hb-checkout .wc-block-components-totals-coupon__form .wc-block-components-text-input label {
	color: var(--hb-summary-text);
}

.hb-checkout .wc-block-components-totals-coupon__button.wc-block-components-totals-coupon__button {
	align-self: flex-end;
	min-height: 3.125rem;
	border-color: var(--hb-summary-text);
	background-color: var(--hb-summary-text);
	color: var(--hb-summary-bg);
}

/* Total, under a light dashed rule. */
.hb-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item {
	padding-top: var(--wp--preset--spacing--50);
	background: var(--hb-summary-rule);
	background-position: 0 0;
	background-size: 100% 1px;
	color: var(--hb-summary-text);
}

.hb-checkout .wc-block-components-totals-footer-item :is(.wc-block-components-totals-item__label, .wc-block-components-totals-item__value) {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	letter-spacing: -0.05rem;
	line-height: 1;
}

/* Reassurance list under the card (added by inc/shop.php). */
.hb-checkout .hb-reassurance {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	margin: auto 0 0;
	padding: 4.4375rem 0 0;
	list-style: none;
}

.hb-checkout .hb-reassurance li {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
}

.hb-reassurance__title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	letter-spacing: -0.05rem;
	line-height: 1;
}

.hb-reassurance__text {
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: -0.05rem;
	line-height: 1.25;
}

/* ---------------------------------------------------------- tablet -- */

@media (max-width: 1023.98px) {
	.hb-checkout {
		background: var(--wp--preset--color--base);
	}

	.hb-checkout::before {
		display: none;
	}

	.hb-checkout .wc-block-store-notices,
	.hb-checkout__footer.hb-checkout__footer {
		width: auto;
		padding-inline: var(--hb-gutter);
	}

	.hb-checkout .wc-block-components-sidebar-layout {
		flex-direction: column;
		max-width: 40rem;
		margin-inline: auto;
		padding-inline: var(--hb-gutter);
	}

	.hb-checkout .wc-block-components-sidebar-layout .wc-block-components-main,
	.hb-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar {
		width: 100%;
		min-height: 0;
		padding: 0;
	}

	.hb-checkout .wc-block-components-sidebar-layout .wc-block-components-main {
		order: 1;
	}

	.hb-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar {
		order: 0;
		margin-bottom: var(--wp--preset--spacing--70);
	}

	.hb-checkout .wc-block-checkout__sidebar.is-sticky {
		position: static;
	}

	.hb-checkout .hb-reassurance {
		display: none;
	}
}

/* Phones: WooCommerce turns the summary into a disclosure. */
@container (max-width: 699px) {
	.hb-checkout .wp-block-woocommerce-checkout-order-summary-block:not(.checkout-order-summary-block-fill-wrapper) {
		gap: 0;
		padding-block: 0;
	}

	.hb-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		padding: var(--wp--preset--spacing--50) 0;
		overflow: visible;
		clip-path: none;
		border: 0;
		white-space: normal;
	}

	.hb-checkout .wc-block-components-checkout-order-summary__title-text {
		font-size: var(--wp--preset--font-size--large);
		font-weight: 600;
	}

	.hb-checkout .wc-block-components-checkout-order-summary__content.is-open {
		padding-bottom: var(--wp--preset--spacing--50);
		border: 0;
	}

	.hb-checkout .wc-block-components-checkout-order-summary__content:not(.is-open) {
		display: none;
	}
}