/*
 * Montessori Bees shop: the product card, the shop page and the product category pages.
 *
 * Loaded on WooCommerce pages only, after brand.css (the colours, fonts and type scale) and home.css
 * (whose `.mb-section` resets undo Twenty Twenty's blog-post content rules; those are loaded site-wide).
 *
 * Widths follow the rest of the site: a 1120px column inside 80px margins on a desktop, 20px on a phone.
 * Every colour here is a brand.css token; nothing new is introduced except the error red, which the
 * shop is the first part of the site to need.
 */

:root {
	--mb-shop-gutter: var(--mb-gutter);
	--mb-shop-width: var(--mb-page);
	--mb-money-ink: var(--mb-charcoal); /* White would fail contrast on honey; charcoal passes at 4.9:1. */
	--mb-field-border: #7a8b96; /* Field and option outlines: 3.5:1 on white, 3.2:1 on cream (WCAG wants 3:1). */
	--mb-error-tint: color-mix(in srgb, var(--mb-error) 9%, white); /* brand.css owns --mb-error (6:1 on white). */
}


/* Page furniture ---------------------------- */

/* Twenty Twenty paints the content area white. The shop is cream, like the rest of the site. */
.woocommerce #site-content,
.woocommerce-page #site-content {
	background: var(--mb-cream);
}

/*
 * Twenty Twenty caps everything in the content area at 580px and centres it. The shop's own markup is
 * not blocks, so home.css's resets do not reach it: it is released here instead.
 */
:is(.entry-content, #mb) :is(.mb-shop-products, .mb-shop-groups, .mb-shop-group, .mb-shop-intro > *) {
	max-width: none;
	width: 100%;
}

/* One column, 1120px wide, 80px from the edge of a 1440px screen — as the rest of the site. */
:is(.entry-content, #mb) :is(.mb-shop-intro > *, .mb-shop-group__inner) {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: var(--mb-shop-width);
	padding-left: var(--mb-shop-gutter);
	padding-right: var(--mb-shop-gutter);
}

/*
 * No "Shop" banner: the menu item and the breadcrumb have both said it already. The one line that does
 * real work — what is actually for sale — is the page's heading, sized as a lede so the section
 * headings below it lead.
 */
:is(.entry-content, #mb) .mb-shop-intro {
	padding: 40px 0 8px;
}

:is(.entry-content, #mb) .mb-shop-intro__title {
	color: var(--mb-deep);
	font-size: clamp(20px, 16.9px + 0.8vw, 26px);
	line-height: 1.35;
	max-width: 700px;
}

.mb-shop-group {
	padding: 20px 0 64px;
}

.mb-shop-group--tinted {
	background: var(--mb-beige);
	padding-top: 56px;
}

.mb-shop-group__title {
	color: var(--mb-deep);
	font-size: clamp(26px, 20.343px + 1.5vw, 36px);
}

.mb-shop-group__blurb {
	margin: 14px 0 0;
	max-width: 640px;
}


/* The grid and the card are in product-card.css, which the Home page shares. */

/* The tinted group's cards need a chip that still lifts off it. */
.mb-shop-group--tinted .mb-product-card__chip {
	background: var(--mb-pale-blue, #e6eef3);
}


/* Reassurances ------------------------------ */

:is(.entry-content, #mb) .mb-shop-reassurance {
	border-bottom: 1px solid var(--mb-beige);
	border-top: 1px solid var(--mb-beige);
}

/* The row itself is the group's inner container, which is where the block editor puts the children. */
:is(.entry-content, #mb) .mb-shop-reassurance > * {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: 20px 56px;
	margin: 0 auto;
	max-width: var(--mb-shop-width);
	padding: 30px var(--mb-shop-gutter);
	width: 100%;
}

:is(.entry-content, #mb) .mb-shop-reassurance__item {
	margin: 0;
	max-width: none;
	padding-left: 32px;
	position: relative;
	width: auto;
}

.mb-shop-reassurance__item::before {
	background-position: center;
	background-repeat: no-repeat;
	background-size: 22px 22px;
	content: "";
	height: 22px;
	left: 0;
	position: absolute;
	top: 1px;
	width: 22px;
}

.mb-shop-reassurance__item.is-style-card::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2368869a' stroke-width='1.6'%3E%3Crect x='4' y='10' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

.mb-shop-reassurance__item.is-style-download::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2368869a' stroke-width='1.6'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M8 11l4 4 4-4'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E");
}

.mb-shop-reassurance__item.is-style-mail::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2368869a' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}


/* Questions --------------------------------- */

:is(.entry-content, #mb) .mb-shop-faq {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: var(--mb-shop-width);
	padding: 52px var(--mb-shop-gutter) 56px;
}

:is(.entry-content, #mb) .mb-shop-faq h2 {
	color: var(--mb-deep);
	font-size: clamp(26px, 20.343px + 1.5vw, 36px);
	margin-bottom: 24px;
}

:is(.entry-content, #mb) .mb-shop-faq .wp-block-details {
	border-bottom: 1px solid var(--mb-beige);
	margin-left: 0;
	margin-right: auto;
	max-width: 840px;
	padding: 18px 0;
	width: auto;
}

:is(.entry-content, #mb) .mb-shop-faq summary {
	color: var(--mb-deep);
	cursor: pointer;
	font-family: var(--mb-font-heading);
	font-size: 20px;
	letter-spacing: -0.03em;
	list-style: none;
	padding-right: 32px;
	position: relative;
}

.mb-shop-faq summary::-webkit-details-marker {
	display: none;
}

.mb-shop-faq summary::after {
	border-bottom: 1.5px solid var(--mb-primary);
	border-right: 1.5px solid var(--mb-primary);
	content: "";
	height: 8px;
	position: absolute;
	right: 4px;
	top: 6px;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	width: 8px;
}

.mb-shop-faq details[open] summary::after {
	transform: rotate(-135deg);
	top: 10px;
}

:is(.entry-content, #mb) .mb-shop-faq .wp-block-details p {
	margin-top: 12px;
	max-width: 760px;
}


/* Closing invitation ------------------------ */

:is(.entry-content, #mb) .mb-shop-cta {
	padding: 52px 0;
}

:is(.entry-content, #mb) .mb-shop-cta > * {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: var(--mb-shop-width);
	padding: 0 var(--mb-shop-gutter);
	width: 100%;
}

:is(.entry-content, #mb) .mb-shop-cta h2 {
	font-size: clamp(26px, 20.343px + 1.5vw, 32px);
}

:is(.entry-content, #mb) .mb-shop-cta p {
	margin-top: 12px;
	max-width: 620px;
}

:is(.entry-content, #mb) .mb-shop-cta .wp-block-buttons {
	margin-top: 24px;
}


/* WooCommerce's own messages ---------------- */

:is(.entry-content, #mb) .woocommerce-message,
:is(.entry-content, #mb) .woocommerce-info,
:is(.entry-content, #mb) .woocommerce-error {
	background: var(--mb-white);
	border: 1px solid var(--mb-primary);
	border-radius: var(--mb-radius);
	box-sizing: border-box;
	list-style: none;
	margin: 0 auto 24px;
	max-width: calc(var(--mb-shop-width) - var(--mb-shop-gutter) * 2);
	padding: 16px 20px;
}

:is(.entry-content, #mb) .woocommerce-error {
	border-color: var(--mb-error);
}


/* Phone ------------------------------------- */

@media (max-width: 781px) {
	:root {
		--mb-shop-gutter: var(--mb-gutter);
	}

	:is(.entry-content, #mb) .mb-shop-intro {
		padding: 32px 0 20px;
	}

	.mb-shop-group {
		padding: 10px 0 30px;
	}

	.mb-shop-group--tinted {
		padding-top: 26px;
	}

	.mb-products {
		gap: 16px;
		grid-template-columns: 1fr;
		margin-top: 18px;
	}

	:is(.entry-content, #mb) .mb-shop-reassurance > * {
		gap: 16px;
		padding: 24px var(--mb-shop-gutter);
	}

	:is(.entry-content, #mb) .mb-shop-faq {
		padding: 30px var(--mb-shop-gutter) 34px;
	}

	:is(.entry-content, #mb) .mb-shop-cta {
		padding: 30px 0 34px;
	}
}


/* Less motion ------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.mb-product-card,
	.mb-button,
	.mb-shop-faq summary::after {
		transition: none;
	}

	.mb-product-card:hover,
	.mb-product-card:focus-within {
		transform: none;
	}
}


/* The product page --------------------------- */
/*
 * Photo on the left, the buy box on the right, the long copy underneath. The buy box stays on screen
 * while the copy scrolls, because the price and the button should never be somewhere you have to
 * scroll back to. On a phone nothing sticks: it would eat the screen.
 */

:is(.entry-content, #mb) .mb-product {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: var(--mb-shop-width);
	padding: 0 var(--mb-shop-gutter) 64px;
	width: 100%;
}

:is(.entry-content, #mb) .mb-product__crumbs {
	font-size: 14px;
	padding: 28px 0 0;
}

.mb-product__crumbs .woocommerce-breadcrumb {
	color: #5d6263;
	margin: 0;
}

:is(.entry-content, #mb) .mb-product__top {
	display: flex;
	gap: 56px;
	padding-top: 28px;
}

:is(.entry-content, #mb) .mb-product__media {
	flex-shrink: 0;
	width: 584px;
}

.mb-product__media .woocommerce-product-gallery__image img {
	border-radius: var(--mb-radius);
	display: block;
	width: 100%;
}

.mb-product__media .flex-control-thumbs {
	display: flex;
	gap: 12px;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.mb-product__media .flex-control-thumbs li {
	flex: 0 1 134px;
	margin: 0;
}

.mb-product__media .flex-control-thumbs img {
	border: 1px solid var(--mb-beige);
	border-radius: calc(var(--mb-radius) / 2);
	cursor: pointer;
	display: block;
	width: 100%;
}

.mb-product__media .flex-control-thumbs img.flex-active {
	border-color: var(--mb-deep);
	border-width: 2px;
}

:is(.entry-content, #mb) .mb-product__buy {
	align-self: flex-start;
	background: var(--mb-white);
	border: 1px solid var(--mb-primary);
	border-radius: var(--mb-radius);
	box-sizing: border-box;
	flex-grow: 1;
	padding: 28px;
	position: sticky;
	top: 88px; /* Below the sticky header. */
}

:is(.entry-content, #mb) .mb-product__title {
	color: var(--mb-deep);
	font-size: clamp(28px, 22px + 1.4vw, 40px);
	margin: 0;
}

:is(.entry-content, #mb) .mb-product__lead p {
	font-size: 16px;
	line-height: 1.5;
	margin: 12px 0 0;
}

:is(.entry-content, #mb) .mb-product__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

:is(.entry-content, #mb) .mb-product__price {
	color: var(--mb-deep);
	font-family: var(--mb-font-heading);
	font-size: 44px;
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin: 22px 0 0;
}

.mb-product__price .woocommerce-Price-amount {
	font-family: var(--mb-font-heading);
}

.mb-product__price-on-request {
	font-size: 32px;
}

:is(.entry-content, #mb) .mb-product__quote-note {
	font-size: 16px;
	line-height: 1.5;
	margin: 10px 0 0;
}

:is(.entry-content, #mb) .mb-product__cart {
	align-items: stretch;
	display: flex;
	gap: 12px;
	margin: 18px 0 0;
}

:is(.entry-content, #mb) .mb-product__action {
	flex-grow: 1;
	font-size: 17px;
	letter-spacing: normal;
	margin-top: 0;
	min-height: 52px;
}

a.mb-product__action {
	margin-top: 18px;
}

/* The quantity box, where a product allows more than one. */
.mb-product__cart .quantity {
	flex-shrink: 0;
}

.mb-product__cart .quantity .qty {
	border: 1px solid var(--mb-beige);
	border-radius: var(--mb-radius);
	font-family: var(--mb-font-body);
	font-size: 16px;
	height: 100%;
	min-height: 52px;
	padding: 0 10px;
	text-align: center;
	width: 72px;
}

:is(.entry-content, #mb) .mb-product__trust {
	color: #5d6263;
	font-size: 14px;
	line-height: 1.4;
	margin: 14px 0 0;
	padding-left: 24px;
	position: relative;
}

.mb-product__trust::before {
	background-position: center;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	content: "";
	height: 16px;
	left: 0;
	position: absolute;
	top: 2px;
	width: 16px;
}

.mb-product__trust--lock::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6263' stroke-width='1.8'%3E%3Crect x='4' y='10' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

.mb-product__trust--clock::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6263' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

:is(.entry-content, #mb) .mb-product__next {
	border-top: 1px solid var(--mb-beige);
	margin-top: 26px;
	padding-top: 22px;
}

:is(.entry-content, #mb) .mb-product__next-title {
	color: var(--mb-deep);
	font-size: 21px;
	margin: 0;
}

/* Numbered steps, used in the buy box and again after the payment. */
:is(.entry-content, #mb) .mb-steps {
	display: flex;
	flex-direction: column;
	gap: 14px;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

:is(.entry-content, #mb) .mb-steps__step {
	align-items: flex-start;
	display: flex;
	gap: 14px;
	margin: 0;
}

.mb-steps__number {
	align-items: center;
	background: var(--mb-pale-green);
	border-radius: 50%;
	display: flex;
	flex-shrink: 0;
	font-size: 14px;
	height: 28px;
	justify-content: center;
	width: 28px;
}

.mb-steps__text {
	font-size: 16px;
	line-height: 1.45;
}

.mb-steps__step--done .mb-steps__text {
	color: #5d6263;
	text-decoration: line-through;
}

/* The long copy. Blocks, so the accordions and lists are the ones Danae writes. */
:is(.entry-content, #mb) .mb-product__body {
	margin-top: 56px;
	max-width: 920px;
}

:is(.entry-content, #mb) .mb-product__body > * {
	margin: 0 0 16px;
	max-width: none;
	width: auto;
}

:is(.entry-content, #mb) .mb-product__body :is(h2, h3) {
	color: var(--mb-deep);
	margin-top: 36px;
}

:is(.entry-content, #mb) .mb-product__body :is(p, li) {
	font-size: 17px;
	line-height: 1.6;
}

:is(.entry-content, #mb) .mb-product__body .wp-block-details {
	border-bottom: 1px solid var(--mb-beige);
	margin: 0;
	padding: 16px 0;
}

:is(.entry-content, #mb) .mb-product__body summary {
	color: var(--mb-deep);
	cursor: pointer;
	font-family: var(--mb-font-heading);
	font-size: 20px;
	letter-spacing: -0.03em;
	list-style: none;
	padding-right: 32px;
	position: relative;
}

.mb-product__body summary::-webkit-details-marker {
	display: none;
}

.mb-product__body summary::after {
	border-bottom: 1.5px solid var(--mb-primary);
	border-right: 1.5px solid var(--mb-primary);
	content: "";
	height: 8px;
	position: absolute;
	right: 4px;
	top: 6px;
	transform: rotate(45deg);
	width: 8px;
}

.mb-product__body details[open] summary::after {
	top: 10px;
	transform: rotate(-135deg);
}

/* Related products. */
:is(.entry-content, #mb) .related {
	margin-top: 64px;
}

:is(.entry-content, #mb) .related > h2 {
	color: var(--mb-deep);
	font-size: clamp(24px, 20px + 1vw, 32px);
}


/* The video, once it is yours ---------------- */

.mb-watch {
	margin-top: 22px;
}

:is(.entry-content, #mb) .mb-watch__title {
	color: var(--mb-deep);
	font-size: 24px;
	margin: 0 0 14px;
}

.mb-watch__video iframe,
.mb-watch__video video {
	aspect-ratio: 16 / 9;
	border-radius: var(--mb-radius);
	height: auto;
	width: 100%;
}

:is(.entry-content, #mb) .mb-watch__missing {
	background: var(--mb-beige);
	border-radius: var(--mb-radius);
	color: #5d6263;
	font-size: 15px;
	margin: 0;
	padding: 20px;
}

:is(.entry-content, #mb) .mb-watch__until {
	background: var(--mb-cream);
	border-radius: var(--mb-radius);
	font-size: 15px;
	line-height: 1.5;
	margin: 16px 0 0;
	padding: 14px 16px;
}

/* A live seminar: a place before it, the wait for the recording after (inc/live-seminars.php). */
.mb-live .mb-watch__until {
	margin: 0 0 18px;
}

:is(.entry-content, #mb) .mb-live__note {
	color: #5d6263;
	font-size: 15px;
	line-height: 1.5;
	margin: 16px 0 0;
}

:is(.entry-content, #mb) .mb-live__past {
	margin: 22px 0 18px;
}

.mb-seminars--live {
	margin-bottom: 18px;
}

/* Often only two seminars are coming up: keep them card-sized, the width of the Services row,
   instead of auto-fit stretching them across the page. One seminar is laid out sideways instead
   (product-card.css). */
@media (min-width: 782px) {
	#live-seminars .mb-products:not(:has(> .mb-product-card:only-child)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}


/* Forms ------------------------------------- */

:is(.entry-content, #mb) .mb-quote {
	background: var(--mb-beige);
	margin: 56px calc(-1 * var(--mb-shop-gutter)) 0;
	padding: 48px var(--mb-shop-gutter) 52px;
}

:is(.entry-content, #mb) .mb-quote h2 {
	color: var(--mb-deep);
	font-size: clamp(26px, 20px + 1.4vw, 32px);
	margin: 0;
}

:is(.entry-content, #mb) .mb-quote__lead {
	margin: 12px 0 0;
	max-width: 760px;
}

/* After the payment ------------------------- */

:is(.entry-content, #mb) .mb-thanks {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 880px;
	padding: 56px var(--mb-shop-gutter) 72px;
	width: 100%;
}

.mb-thanks__head {
	align-items: center;
	display: flex;
	gap: 14px;
}

.mb-thanks__tick {
	align-items: center;
	background: var(--mb-pale-green);
	border-radius: 50%;
	color: var(--mb-charcoal);
	display: flex;
	flex-shrink: 0;
	height: 40px;
	justify-content: center;
	width: 40px;
}

:is(.entry-content, #mb) .mb-thanks__title {
	color: var(--mb-deep);
	font-size: clamp(26px, 20px + 1.4vw, 34px);
	margin: 0;
}

:is(.entry-content, #mb) .mb-thanks__lead {
	margin: 16px 0 0;
}

:is(.entry-content, #mb) .mb-thanks__item {
	background: var(--mb-white);
	border: 1px solid var(--mb-primary);
	border-radius: var(--mb-radius);
	margin-top: 26px;
	padding: 26px 28px;
}

:is(.entry-content, #mb) .mb-thanks__item-title {
	color: var(--mb-deep);
	font-size: 24px;
	margin: 0 0 12px;
}

:is(.entry-content, #mb) .mb-thanks__note {
	background: var(--mb-cream);
	border-radius: var(--mb-radius);
	font-size: 15px;
	line-height: 1.5;
	margin: 16px 0 0;
	padding: 14px 16px;
}

:is(.entry-content, #mb) .mb-thanks .mb-button {
	display: inline-flex;
	margin-top: 16px;
}

:is(.entry-content, #mb) .mb-intake {
	border-top: 1px solid var(--mb-beige);
	margin-top: 36px;
	padding-top: 28px;
}

:is(.entry-content, #mb) .mb-intake h2 {
	color: var(--mb-deep);
	font-size: 24px;
	margin: 0;
}

:is(.entry-content, #mb) .mb-intake__lead {
	color: #5d6263;
	font-size: 15px;
	margin: 10px 0 0;
}

:is(.entry-content, #mb) .mb-intake .mb-form {
	background: var(--mb-cream);
	margin-top: 18px;
}


/* My seminars ------------------------------- */

:is(.entry-content, #mb) .mb-seminars {
	list-style: none;
	margin: 0;
	padding: 0;
}

:is(.entry-content, #mb) .mb-seminars__item {
	align-items: center;
	border-bottom: 1px solid var(--mb-beige);
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 18px 0;
}

.mb-seminars__item--ended {
	opacity: 0.6;
}

.mb-seminars__photo {
	border-radius: calc(var(--mb-radius) / 2);
	flex-shrink: 0;
	height: 68px;
	object-fit: cover;
	width: 96px;
}

.mb-seminars__text {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 5px;
}

.mb-seminars__name {
	color: var(--mb-deep);
	font-family: var(--mb-font-heading);
	font-size: 20px;
	letter-spacing: -0.03em;
}

.mb-seminars__dates {
	color: #5d6263;
	font-size: 14px;
}

.mb-seminars__action {
	flex-shrink: 0;
	min-height: 44px;
}


/* Cart, checkout and the account ------------ */
/*
 * These are ordinary pages holding WooCommerce's own markup, so Twenty Twenty's page furniture has to
 * be quieted: its big centred title, and its 580px cap on everything in the content.
 */

.woocommerce-cart .entry-header-inner,
.woocommerce-checkout .entry-header-inner,
.woocommerce-account .entry-header-inner {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: var(--mb-shop-width);
	padding: 48px var(--mb-shop-gutter) 0;
	text-align: left;
	width: 100%;
}

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title {
	color: var(--mb-deep);
	font-size: clamp(28px, 22px + 1.4vw, 40px);
	letter-spacing: -0.04em;
	margin: 0;
}

.woocommerce-cart .post-inner,
.woocommerce-checkout .post-inner,
.woocommerce-account .post-inner {
	padding-top: 24px;
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .entry-content {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: var(--mb-shop-width);
	padding: 0 var(--mb-shop-gutter) 72px;
	width: 100%;
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) :is(.entry-content, #mb) > * {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
	width: 100%;
}

/*
 * Checkout: express buttons, details and payment down the left; what you are paying for on the right.
 *
 * #order_review holds the summary table and the payment block. Letting its children sit in the form's own
 * grid (display: contents) puts payment under the billing details without touching WooCommerce's markup.
 * The express buttons and their divider are Stripe's, direct children of the form, and start hidden until
 * Stripe's script shows them, so their rows cost nothing when there are none.
 */
:is(.entry-content, #mb) form.checkout {
	align-items: start;
	display: grid;
	gap: 0 64px;
	grid-template-columns: minmax(0, 1fr) 420px;
}

:is(.entry-content, #mb) #order_review {
	display: contents;
}

:is(.entry-content, #mb) #wc-stripe-express-checkout-element {
	grid-column: 1;
	grid-row: 2;
	margin: 0 !important; /* Stripe sets an inline margin. */
}

:is(.entry-content, #mb) #wc-stripe-express-checkout-button-separator {
	grid-column: 1;
	grid-row: 3;
}

/* Stripe shows the divider by writing display: block; make that a line, words, line. */
:is(.entry-content, #mb) #wc-stripe-express-checkout-button-separator {
	align-items: center;
	display: flex; /* Stripe hides it inline and clears that when its buttons are showing. */
	font-size: 15px;
	gap: 16px;
	margin: 12px 0 28px !important;
	text-align: left !important;
}

:is(.entry-content, #mb) .mb-or-rule {
	background: var(--mb-field-border);
	flex-grow: 1;
	height: 1px;
}

:is(.entry-content, #mb) #customer_details {
	grid-column: 1;
	grid-row: 4;
}

:is(.entry-content, #mb) .mb-payment-heading {
	color: var(--mb-deep);
	font-size: 24px;
	grid-column: 1;
	grid-row: 5;
	margin: 36px 0 16px;
}

:is(.entry-content, #mb) #payment {
	grid-column: 1;
	grid-row: 6;
}

/* Heading and summary share a row; the heading is one fixed line so the summary can start under it. */
:is(.entry-content, #mb) #order_review_heading {
	color: var(--mb-deep);
	float: none;
	font-size: 24px;
	grid-column: 2;
	grid-row: 4;
	line-height: 30px;
	margin: 0;
	white-space: nowrap;
	width: 100%;
}

:is(.entry-content, #mb) form.checkout #order_review .shop_table.woocommerce-checkout-review-order-table {
	grid-column: 2;
	grid-row: 4;
	margin-top: 52px;
}

:is(.entry-content, #mb) form.checkout #order_review .shop_table.woocommerce-checkout-review-order-table {
	background: var(--mb-white);
	border: 1px solid var(--mb-deep);
	border-collapse: separate;
	border-radius: var(--mb-radius);
	border-spacing: 0;
	box-sizing: border-box;
	padding: 10px 28px 14px;
}

/* A failed submit: one box across the top, headed, with each problem a link to its field. */
:is(.entry-content, #mb) .woocommerce-NoticeGroup-checkout {
	background: var(--mb-white);
	border: 2px solid var(--mb-error);
	border-radius: var(--mb-radius);
	box-sizing: border-box;
	grid-column: 1 / -1;
	grid-row: 1;
	margin: 0 0 28px;
	padding: 20px 24px;
}

:is(.entry-content, #mb) .woocommerce-NoticeGroup-checkout .woocommerce-error {
	background: none;
	border: 0;
	margin: 0;
	max-width: none;
	padding: 0;
}

:is(.entry-content, #mb) .woocommerce-NoticeGroup-checkout .woocommerce-error li {
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 6px;
	padding: 0;
}

:is(.entry-content, #mb) .woocommerce-NoticeGroup-checkout .woocommerce-error a {
	color: var(--mb-error);
	font-weight: 500;
}

:is(.entry-content, #mb) .mb-error-title {
	color: var(--mb-error);
	font-size: 22px;
	margin: 0 0 10px;
}

/* A long product name (the seminar's) must not run into the price. */
:is(.entry-content, #mb) .woocommerce-checkout-review-order-table td.product-name {
	padding-right: 20px;
}

/* The line under the total, when the basket holds a download. */
:is(.entry-content, #mb) .mb-download-note td {
	background: var(--mb-cream);
	border-bottom: 0;
	border-radius: var(--mb-radius);
	font-size: 15px;
	line-height: 1.5;
	padding: 14px 16px;
}

:is(.entry-content, #mb) .woocommerce-billing-fields h3,
:is(.entry-content, #mb) .woocommerce-additional-fields h3 {
	color: var(--mb-deep);
	font-size: 24px;
	margin: 0 0 18px;
}

/* Fields: a visible label above, always. */
:is(.entry-content, #mb) .woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	margin: 0 0 18px;
	padding: 0;
}

:is(.entry-content, #mb) .woocommerce form .form-row label {
	font-size: 15px;
	margin-bottom: 6px;
}

/* Checkboxes and radios: 24px, deep blue, and the whole row is the click target. */
:is(.entry-content, #mb) .woocommerce form :is(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--mb-deep);
	flex-shrink: 0;
	height: 24px;
	margin: 0;
	width: 24px;
}

:is(.entry-content, #mb) .woocommerce form .form-row label.checkbox {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: 16px;
	gap: 12px;
	min-height: 48px;
}

/* A field WooCommerce has marked wrong: a heavier outline and a tint, on top of its own message. */
:is(.entry-content, #mb) .woocommerce form .form-row.woocommerce-invalid :is(.input-text, select),
:is(.entry-content, #mb) .woocommerce form .form-row.woocommerce-invalid .select2-selection--single {
	border: 2px solid var(--mb-error);
}

:is(.entry-content, #mb) .woocommerce form .form-row .required {
	color: var(--mb-charcoal);
	text-decoration: none;
}

:is(.entry-content, #mb) .woocommerce form :is(.input-text, select),
:is(.entry-content, #mb) .select2-container .select2-selection--single {
	background: var(--mb-white);
	border: 1px solid var(--mb-field-border);
	border-radius: var(--mb-radius);
	box-sizing: border-box;
	color: var(--mb-charcoal);
	font-family: var(--mb-font-body);
	font-size: 16px;
	height: auto;
	min-height: 48px;
	padding: 12px 14px;
	width: 100%;
}

:is(.entry-content, #mb) .woocommerce form :is(.input-text, select):focus {
	border-color: var(--mb-deep);
	outline: 2px solid var(--mb-deep);
	outline-offset: 1px;
}

:is(.entry-content, #mb) .woocommerce form .form-row-first,
:is(.entry-content, #mb) .woocommerce form .form-row-last {
	display: inline-flex;
	width: calc(50% - 10px);
}

:is(.entry-content, #mb) .woocommerce form .form-row-first {
	margin-right: 16px;
}

/* The reset-password form: two fields side by side, then everything else on its own full-width row.
 * Inline-flex rows left the Save button and the strength meter floating over the second field. */
:is(.entry-content, #mb) .woocommerce form.lost_reset_password {
	display: grid;
	gap: 0 16px;
	grid-template-columns: 1fr 1fr;
}

:is(.entry-content, #mb) .woocommerce form.lost_reset_password > * {
	clear: none;
	float: none;
	grid-column: 1 / -1;
	margin-left: 0;
	margin-right: 0;
	position: static;
	width: auto;
}

:is(.entry-content, #mb) .woocommerce form.lost_reset_password > .form-row-first {
	grid-column: 1;
}

:is(.entry-content, #mb) .woocommerce form.lost_reset_password > .form-row-last {
	grid-column: 2;
}

:is(.entry-content, #mb) .woocommerce form.lost_reset_password > .clear {
	display: none;
}

:is(.entry-content, #mb) .woocommerce .woocommerce-password-strength {
	margin: 6px 0 0;
	text-align: left;
}

@media (max-width: 700px) {

	:is(.entry-content, #mb) .woocommerce form.lost_reset_password > :is(.form-row-first, .form-row-last) {
		grid-column: 1 / -1;
	}
}

/* The agreement a download needs before it can be sold. */
:is(.entry-content, #mb) .woocommerce form .form-row.mb-waiver {
	background: var(--mb-white);
	border: 1px solid var(--mb-beige);
	border-radius: var(--mb-radius);
	box-sizing: border-box;
	margin: 24px 0 0;
	padding: 14px 18px;
}

:is(.entry-content, #mb) .woocommerce form .form-row.mb-waiver.woocommerce-invalid {
	background: var(--mb-error-tint);
	border: 2px solid var(--mb-error);
}

:is(.entry-content, #mb) .woocommerce form .form-row.mb-waiver label {
	align-items: flex-start;
	display: flex;
	font-size: 16px;
	gap: 14px;
	line-height: 1.5;
	margin: 0;
}

/* The box is the agreement; an asterisk adds nothing beside a sentence this long. */
:is(.entry-content, #mb) .woocommerce form .form-row.mb-waiver .required {
	display: none;
}

/* The order summary and the cart table. */
:is(.entry-content, #mb) .shop_table {
	border: 0;
	border-collapse: collapse;
	width: 100%;
}

:is(.entry-content, #mb) .shop_table :is(th, td) {
	border: 0;
	border-bottom: 1px solid var(--mb-beige);
	font-size: 15px;
	padding: 12px 0;
	text-align: left;
}

:is(.entry-content, #mb) .shop_table :is(tfoot th, tfoot td) {
	font-weight: 400;
}

:is(.entry-content, #mb) .shop_table .order-total :is(th, td) {
	border-bottom: 0;
	color: var(--mb-deep);
	font-family: var(--mb-font-heading);
	font-size: 22px;
	padding-top: 16px;
}

:is(.entry-content, #mb) .cart_totals h2,
:is(.entry-content, #mb) .cross-sells h2 {
	color: var(--mb-deep);
	font-size: 24px;
}

:is(.entry-content, #mb) #payment {
	background: transparent;
	border-radius: 0;
	margin-top: 0;
}

/* Each way to pay is an outlined option; the chosen one gets a heavier deep-blue outline. */
:is(.entry-content, #mb) #payment ul.payment_methods {
	border: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

:is(.entry-content, #mb) #payment ul.payment_methods > li {
	align-items: center;
	background: var(--mb-white);
	border: 1px solid var(--mb-field-border);
	border-radius: var(--mb-radius);
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	margin: 0 0 12px;
	padding: 0;
}

/* Stripe shows some options by writing display: block on the row; keep them on the grid. */
:is(.entry-content, #mb) #payment ul.payment_methods > li[style*="display: block"],
:is(.entry-content, #mb) #payment ul.payment_methods > li[style*="display:block"] {
	display: grid !important;
}

:is(.entry-content, #mb) #payment ul.payment_methods > li:has(> input:checked) {
	border-color: var(--mb-deep);
	box-shadow: inset 0 0 0 1px var(--mb-deep);
}

:is(.entry-content, #mb) #payment ul.payment_methods > li > input {
	display: inline-block; /* WooCommerce's Twenty Twenty sheet hides the radio and paints its own dot. */
	margin-left: 16px;
}

:is(.entry-content, #mb) #payment ul.payment_methods > li > label::before {
	display: none;
}

:is(.entry-content, #mb) #payment ul.payment_methods > li > label {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: 17px;
	gap: 10px;
	justify-content: space-between;
	margin: 0;
	min-height: 56px;
	padding: 0 16px 0 12px;
	text-align: left;
}

:is(.entry-content, #mb) #payment ul.payment_methods > li > label img {
	float: none;
	margin: 0;
	max-height: 24px;
}

:is(.entry-content, #mb) #payment div.payment_box {
	background: transparent;
	border-radius: 0;
	color: var(--mb-charcoal);
	font-size: 15px;
	grid-column: 1 / -1;
	line-height: 1.5;
	margin: 0;
	padding: 4px 16px 18px;
}

:is(.entry-content, #mb) #payment div.payment_box::before {
	display: none;
}

/* Stripe's invisible style probe is absolutely positioned at full width. Left to its static position it
   lands inside the grid, offset from the edge, and widens the page (a sideways scroll). Pin it. */
:is(.entry-content, #mb) #wc-stripe-hidden-style-input {
	left: 0 !important;
}

/* The privacy sentence, then the pay button. */
:is(.entry-content, #mb) .woocommerce-privacy-policy-text p {
	font-size: 14px;
	line-height: 1.6;
	margin: 20px 0 0;
}

/* Every button WooCommerce prints for itself. */
:is(.entry-content, #mb) .woocommerce :is(a.button, button.button, input.button, .wc-block-components-button) {
	background: var(--mb-deep);
	border: 0;
	border-radius: 0;
	color: var(--mb-white);
	font-family: var(--mb-font-body);
	font-size: 15px;
	font-weight: 400;
	min-height: 48px;
	padding: 12px 28px;
	text-decoration: none;
}

:is(.entry-content, #mb) .woocommerce :is(a.button, button.button, input.button):hover {
	background: var(--mb-deep-shade);
	color: var(--mb-white);
}

:is(.entry-content, #mb) .woocommerce #place_order,
:is(.entry-content, #mb) .woocommerce .checkout-button {
	background: var(--mb-money);
	color: var(--mb-money-ink);
	font-size: 18px;
	margin-top: 20px;
	min-height: 58px;
	width: 100%;
}

/* A padlock before the amount: this is the button that takes money. */
:is(.entry-content, #mb) .woocommerce #place_order::before {
	background: currentcolor;
	content: "";
	display: inline-block;
	height: 18px;
	margin-right: 10px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
	vertical-align: -3px;
	width: 18px;
}

:is(.entry-content, #mb) .woocommerce :is(#place_order, .checkout-button):hover {
	background: var(--mb-deep);
	color: var(--mb-white);
}

/* The coupon field stays out of the way until it is wanted. */
:is(.entry-content, #mb) .woocommerce-form-coupon-toggle .woocommerce-info {
	background: transparent;
	border: 0;
	border-radius: 0;
	font-size: 14px;
	margin: 0 0 18px;
	padding: 0;
}

/* The account pages: the menu beside the panel. */
:is(.entry-content, #mb) .woocommerce-MyAccount-navigation {
	float: none;
	width: auto;
}

:is(.entry-content, #mb) .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	list-style: none;
	margin: 0 0 28px;
	padding: 0 0 18px;
	border-bottom: 1px solid var(--mb-beige);
}

:is(.entry-content, #mb) .woocommerce-MyAccount-navigation li {
	margin: 0;
}

:is(.entry-content, #mb) .woocommerce-MyAccount-navigation a {
	color: var(--mb-deep);
	font-size: 16px;
	text-decoration: none;
}

:is(.entry-content, #mb) .woocommerce-MyAccount-navigation li.is-active a {
	text-decoration: underline;
	text-underline-offset: 6px;
}

:is(.entry-content, #mb) .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}


/* Phone: the product page --------------------- */

@media (max-width: 880px) {
	:is(.entry-content, #mb) .mb-product__top {
		display: block;
	}

	:is(.entry-content, #mb) .mb-product__media {
		width: auto;
	}

	:is(.entry-content, #mb) .mb-product__buy {
		margin-top: 24px;
		position: static; /* Sticking would eat the screen. */
	}

	:is(.entry-content, #mb) form.checkout {
		display: block;
	}

	:is(.entry-content, #mb) #order_review_heading {
		margin-top: 32px;
		white-space: normal;
	}

	:is(.entry-content, #mb) form.checkout #order_review .shop_table.woocommerce-checkout-review-order-table {
		margin-top: 16px;
		padding: 6px 20px 10px;
	}
}

@media (max-width: 781px) {
	:is(.entry-content, #mb) .mb-product {
		padding-bottom: 36px;
	}

	:is(.entry-content, #mb) .mb-product__buy {
		padding: 20px;
	}

	:is(.entry-content, #mb) .mb-product__body {
		margin-top: 36px;
	}

	:is(.entry-content, #mb) .mb-form__row {
		display: block;
	}

	:is(.entry-content, #mb) .mb-form {
		padding: 20px;
	}

	:is(.entry-content, #mb) .woocommerce form .form-row-first,
	:is(.entry-content, #mb) .woocommerce form .form-row-last {
		display: flex;
		margin-right: 0;
		width: 100%;
	}

	:is(.entry-content, #mb) .mb-thanks {
		padding: 32px var(--mb-shop-gutter) 40px;
	}

	:is(.entry-content, #mb) .mb-seminars__item {
		flex-wrap: wrap;
	}
}


/* Undoing WooCommerce's own layout -----------
 *
 * WooCommerce lays its lists and product pages out with floats and percentage widths. Everywhere the
 * shop draws its own layout, those have to go, or a grid item floats inside its own cell.
 */

:is(.entry-content, #mb) ul.products li.product {
	float: none;
	margin: 0;
	width: auto;
}

/* The cart and checkout: WooCommerce floats these at 48% each, inside a grid that already places them. */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) :is(.entry-content, #mb) :is(.woocommerce, .woocommerce > *, form.checkout, form.woocommerce-cart-form, #customer_details, #order_review, .col2-set, .col2-set > .col-1, .col2-set > .col-2) {
	float: none;
	margin-left: 0;
	margin-right: 0;
	max-width: none;
	width: 100%;
}

/* A checkbox sits beside its words, not above them. */
:is(.entry-content, #mb) .woocommerce form .woocommerce-form__label-for-checkbox {
	align-items: center;
	display: flex;
	flex-direction: row;
	gap: 10px;
	margin: 0;
}

:is(.entry-content, #mb) .woocommerce form .woocommerce-form__label-for-checkbox input {
	height: 20px;
	margin: 0;
	width: 20px;
}

:is(.entry-content, #mb) .mb-product__media .woocommerce-product-gallery {
	float: none;
	max-width: none;
	width: 100%;
}

:is(.entry-content, #mb) .mb-product__media .woocommerce-product-gallery__image {
	width: 100%;
}

/* The wrapper WooCommerce puts around a shortcode carries the parent theme's page padding twice. */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) :is(.entry-content, #mb) > .woocommerce {
	padding-left: 0;
	padding-right: 0;
}

/* WooCommerce's own headings on the order pages: the parent theme sizes these for a blog post. */
:is(.entry-content, #mb) :is(.woocommerce-order-details, .woocommerce-customer-details, .woocommerce-order) > h2,
:is(.entry-content, #mb) .woocommerce-column__title {
	color: var(--mb-deep);
	font-size: 24px;
	letter-spacing: -0.03em;
	margin: 36px 0 16px;
}

:is(.entry-content, #mb) .woocommerce-order {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 880px;
	padding: 0 var(--mb-shop-gutter);
}

/* A long product name must not push the amount into wrapping: "€2 5" is not a price. */
:is(.entry-content, #mb) .shop_table :is(td.product-total, td.product-subtotal, .order-total td, .cart-subtotal td),
:is(.entry-content, #mb) .shop_table .amount {
	white-space: nowrap;
}


/* The account ------------------------------- */

:is(.entry-content, #mb) .mb-login {
	margin: 0 auto;
	max-width: 480px;
}

:is(.entry-content, #mb) .mb-login__card {
	background: var(--mb-white);
	border: 1px solid var(--mb-primary);
	border-radius: var(--mb-radius);
	padding: 28px;
}

:is(.entry-content, #mb) .mb-login__title {
	color: var(--mb-deep);
	font-size: 26px;
	margin: 0 0 20px;
}

:is(.entry-content, #mb) .mb-login .mb-form {
	background: transparent;
	margin: 0;
	max-width: none;
	padding: 0;
}

:is(.entry-content, #mb) .mb-login .mb-form :is(input[type="text"], input[type="password"], input[type="email"]) {
	background: var(--mb-white);
	border: 1px solid #d9d1c6;
	border-radius: var(--mb-radius);
	box-sizing: border-box;
	font-family: var(--mb-font-body);
	font-size: 16px;
	padding: 12px 14px;
	width: 100%;
}

:is(.entry-content, #mb) .mb-login__remember {
	margin: 0 0 20px;
}

:is(.entry-content, #mb) .mb-login__submit {
	margin: 0;
}

:is(.entry-content, #mb) .mb-login__submit .mb-button {
	width: 100%;
}

:is(.entry-content, #mb) .mb-login__lost {
	font-size: 14px;
	margin: 16px 0 0;
	text-align: center;
}

:is(.entry-content, #mb) .mb-login__note {
	color: #5d6263;
	font-size: 15px;
	line-height: 1.5;
	margin: 20px 0 0;
	text-align: center;
}

/* The dashboard: the two or three things there are to do, not a wall of prose. */
:is(.entry-content, #mb) .mb-dashboard__hello {
	font-size: 18px;
	margin: 0 0 22px;
}

:is(.entry-content, #mb) .mb-dashboard {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	margin: 0;
}

:is(.entry-content, #mb) .mb-dashboard__card {
	background: var(--mb-white);
	border: 1px solid var(--mb-primary);
	border-radius: var(--mb-radius);
	color: var(--mb-charcoal);
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 24px;
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

:is(.entry-content, #mb) .mb-dashboard__card:is(:hover, :focus) {
	border-color: var(--mb-deep);
	box-shadow: 0 4px 10px rgb(62 65 66 / 10%);
	transform: translateY(-2px);
}

.mb-dashboard__card-title {
	color: var(--mb-deep);
	font-family: var(--mb-font-heading);
	font-size: 22px;
	letter-spacing: -0.03em;
}

.mb-dashboard__card-note {
	color: #5d6263;
	font-size: 14px;
}

:is(.entry-content, #mb) .mb-dashboard__empty {
	color: #5d6263;
	font-size: 15px;
	margin: 24px 0 0;
}

/* Orders, downloads and the details form all use WooCommerce's own tables and fields. */
:is(.entry-content, #mb) .woocommerce-MyAccount-content :is(.woocommerce-orders-table, .woocommerce-table--order-downloads, .shop_table) {
	margin-top: 8px;
}

:is(.entry-content, #mb) .woocommerce-MyAccount-content .woocommerce-Message,
:is(.entry-content, #mb) .woocommerce-MyAccount-content .woocommerce-info {
	background: var(--mb-white);
	border: 1px solid var(--mb-primary);
	border-radius: var(--mb-radius);
	padding: 16px 20px;
}

:is(.entry-content, #mb) .woocommerce-EditAccountForm fieldset {
	border: 0;
	border-top: 1px solid var(--mb-beige);
	margin: 28px 0 0;
	padding: 22px 0 0;
}

:is(.entry-content, #mb) .woocommerce-EditAccountForm legend {
	color: var(--mb-deep);
	font-family: var(--mb-font-heading);
	font-size: 22px;
	padding: 0;
}

@media (max-width: 781px) {
	:is(.entry-content, #mb) .mb-dashboard {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

/*
 * The account page: Twenty Twenty lays it out as a flex row, which puts the tabs in a narrow column
 * beside the content. The tabs belong across the top, with the panel under them.
 */
/* WooCommerce's own Twenty Twenty stylesheet sets this with `#site-content`, so this has to as well. */
.woocommerce-account #site-content :is(.entry-content, #mb) > .woocommerce {
	display: block;
}

.woocommerce-account #site-content :is(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) {
	float: none;
	margin-left: 0;
	margin-right: 0;
	max-width: none;
	width: 100%;
}

/* A button's words do not wrap: "Resend" is not "Rese nd". */
:is(.entry-content, #mb) .woocommerce :is(a.button, button.button, input.button, .mb-button) {
	white-space: nowrap;
}

/* The login card is narrow on purpose; the width reset above would otherwise stretch it. */
.woocommerce-account #site-content :is(.entry-content, #mb) .mb-login {
	margin: 0 auto;
	max-width: 480px;
}