/*
 * Milcom Course Sessions — the purchase pages in the site's own clothes.
 *
 * Loaded on cart, checkout, order-received and My Account. Tokens mirror
 * milcom.css so these pages read as part of the site rather than as a shop
 * bolted on. Selectors target WooCommerce's block markup (cart, checkout) and
 * its classic account templates.
 */

body.mlcs-shop-page {
	--navy: #081f3f;
	--navy-2: #0b2a54;
	--blue: #0c4fb3;
	--blue-d: #0a3f92;
	--blue-l: #e9f1fd;
	--amber: #ffb703;
	--amber-d: #e79c00;
	--amber-ink: #3d2c00;
	--ink: #0f1b2d;
	--body: #33425a;
	--muted: #5c6b81; /* kept in step with milcom.css: #6b7a90 was 4.36:1 on white */
	--line: #e4eaf3;
	--line-2: #eef3fa;
	--soft: #f4f8fd;
	--ok: #0f7a4f;
	--radius: 14px;
	--radius-s: 10px;
	--shadow-s: 0 1px 2px rgba(11, 31, 64, .06), 0 2px 8px rgba(11, 31, 64, .05);
	--shadow-m: 0 6px 22px rgba(11, 31, 64, .10);
	--maxw: 1180px;
}

/* The theme's own page chrome steps aside; the band below is the title. */
body.mlcs-shop-page .site-main {
	max-width: none;
	padding: 0;
	margin: 0;
}

body.mlcs-shop-page .site-main > .page-header,
body.mlcs-shop-page .woocommerce-breadcrumb {
	display: none;
}

/* ---------- hero band ---------- */

.mlcs-shop-hero {
	background: linear-gradient(160deg, #071b38, #0b2c59);
	color: #eaf2ff;
	padding: 32px 0 40px;
}

.mlcs-shop-hero .wrap {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 22px;
}

.mlcs-shop-hero .mlcs-crumb {
	margin: 0 0 12px;
	font-size: .84rem;
	color: #9fb8de;
}

.mlcs-shop-hero .mlcs-crumb a {
	color: #9fb8de;
}

.mlcs-shop-hero .mlcs-crumb strong {
	color: #dce8fb;
}

.mlcs-shop-hero h1 {
	color: #fff;
	margin: 0 0 .25em;
}

.mlcs-shop-hero .mlcs-tagline {
	color: #cfe0f8;
	font-size: 1.08rem;
	max-width: 60ch;
	margin: 0;
}

.mlcs-shop.wrap {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 40px 22px 72px;
}

/* ---------- shared: buttons, inputs, notices ---------- */

body.mlcs-shop-page .wc-block-components-button:not(.is-link),
body.mlcs-shop-page .wc-block-cart__submit-button,
body.mlcs-shop-page .wc-block-components-checkout-place-order-button,
body.mlcs-shop-page .woocommerce-button,
body.mlcs-shop-page button.button,
body.mlcs-shop-page .woocommerce-MyAccount-content .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	font-weight: 700;
	font-size: .98rem;
	padding: .8em 1.35em;
	border-radius: 999px;
	border: 1.5px solid transparent;
	background: var(--amber);
	color: var(--amber-ink);
	box-shadow: var(--shadow-s);
	cursor: pointer;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

body.mlcs-shop-page .wc-block-components-button:not(.is-link):hover,
body.mlcs-shop-page .woocommerce-button:hover,
body.mlcs-shop-page button.button:hover {
	background: var(--amber-d);
	box-shadow: var(--shadow-m);
	transform: translateY(-1px);
	text-decoration: none;
}

body.mlcs-shop-page .wc-block-components-button:not(.is-link) .wc-block-components-button__text {
	color: var(--amber-ink);
}

body.mlcs-shop-page .wc-block-components-button.is-link,
body.mlcs-shop-page .wc-block-components-checkout-return-to-cart-button {
	color: var(--blue);
}

body.mlcs-shop-page input[type="text"],
body.mlcs-shop-page input[type="email"],
body.mlcs-shop-page input[type="tel"],
body.mlcs-shop-page input[type="password"],
body.mlcs-shop-page input[type="number"],
body.mlcs-shop-page select,
body.mlcs-shop-page textarea,
body.mlcs-shop-page .wc-block-components-text-input input,
body.mlcs-shop-page .wc-block-components-combobox .wc-block-components-combobox-control input {
	border: 1.5px solid var(--line);
	border-radius: var(--radius-s);
	font-family: inherit;
	color: var(--ink);
	background: #fff;
}

body.mlcs-shop-page .wc-block-components-text-input.is-active input,
body.mlcs-shop-page .wc-block-components-text-input input:focus,
body.mlcs-shop-page input:focus,
body.mlcs-shop-page select:focus,
body.mlcs-shop-page textarea:focus {
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(12, 79, 179, .15);
	outline: none;
}

body.mlcs-shop-page .wc-block-components-notice-banner,
body.mlcs-shop-page .woocommerce-message,
body.mlcs-shop-page .woocommerce-info,
body.mlcs-shop-page .woocommerce-error {
	border-radius: var(--radius-s);
	border-width: 1px;
}

body.mlcs-shop-page .woocommerce-message,
body.mlcs-shop-page .woocommerce-info {
	background: var(--blue-l);
	border: 1px solid #cfe0f7;
	color: var(--ink);
	padding: 14px 18px;
	margin: 0 0 22px;
}

body.mlcs-shop-page .woocommerce-error {
	background: #fff5f5;
	border: 1px solid #f3c2c2;
	color: #7a1f1f;
	padding: 14px 18px;
	margin: 0 0 22px;
}

/* WooCommerce draws its tick / info / error icon at 1.5em from the left, which
   the tighter padding above would put on top of the text. Keep room for it and
   line the icon up with the first line. */
body.mlcs-shop-page .woocommerce-message,
body.mlcs-shop-page .woocommerce-info,
body.mlcs-shop-page .woocommerce-error {
	padding-left: 46px;
}

body.mlcs-shop-page .woocommerce-message::before,
body.mlcs-shop-page .woocommerce-info::before,
body.mlcs-shop-page .woocommerce-error::before {
	left: 18px;
	top: 15px;
}

/* ---------- block cart and checkout ---------- */

body.mlcs-shop-page .wc-block-components-sidebar-layout .wc-block-components-main {
	padding-right: 40px;
}

body.mlcs-shop-page .wc-block-components-sidebar,
body.mlcs-shop-page .wc-block-checkout__sidebar {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-s);
	padding: 8px 22px 22px;
	position: sticky;
	top: 96px;
}

body.mlcs-shop-page .wc-block-components-checkout-step {
	padding-left: 0;
}

body.mlcs-shop-page .wc-block-components-checkout-step__heading .wc-block-components-title,
body.mlcs-shop-page .wc-block-components-title,
body.mlcs-shop-page .wc-block-cart__totals-title {
	color: var(--ink);
	font-weight: 800;
	letter-spacing: -.01em;
}

body.mlcs-shop-page .wc-block-components-checkout-step__description,
body.mlcs-shop-page .wc-block-components-product-metadata,
body.mlcs-shop-page .wc-block-components-product-details {
	color: var(--muted);
}

/* Placeholder thumbnails say "shop", not "course". The date line says it all. */
/* Restored along with the cart thumbnail: the products carry their own key art
 * now, so the order summary shows what is being bought. */
body.mlcs-shop-page .wc-block-components-order-summary-item__image {
	display: table-cell;
	width: 56px;
}

body.mlcs-shop-page .wc-block-components-order-summary-item__description {
	padding-left: 14px;
}

/* The cart is a table with a fixed image column; empty it rather than drop the cell. */
body.mlcs-shop-page .wc-block-cart-items {
	table-layout: auto;
}

/* The thumbnail column was collapsed to 0 because every course product fell
 * back to WooCommerce's placeholder. The products carry their own key art now,
 * so the column is restored. */
body.mlcs-shop-page .wc-block-cart-items__header .wc-block-cart-items__header-image,
body.mlcs-shop-page .wc-block-cart-item__image {
	width: 84px;
	padding: 16px 0;
}

body.mlcs-shop-page .wc-block-cart-item__product {
	width: auto;
	padding-left: 16px;
}

body.mlcs-shop-page .wc-block-cart-items .wc-block-cart-item__total {
	white-space: nowrap;
}

body.mlcs-shop-page .wc-block-cart-item__product .wc-block-components-product-name {
	text-decoration: none;
}

body.mlcs-shop-page .wc-block-cart__totals-title {
	font-size: .8rem;
	letter-spacing: .08em;
}

body.mlcs-shop-page .wc-block-cart .wc-block-cart__sidebar {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-s);
	padding: 8px 22px 22px;
}

body.mlcs-shop-page .wc-block-components-product-name,
body.mlcs-shop-page .wc-block-cart-item__product .wc-block-components-product-name {
	font-weight: 700;
	color: var(--ink);
}

body.mlcs-shop-page .wc-block-components-product-details__value,
body.mlcs-shop-page .wc-block-components-product-details__name {
	color: var(--body);
}

body.mlcs-shop-page .wc-block-components-totals-item.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body.mlcs-shop-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: var(--ink);
	font-weight: 800;
}

body.mlcs-shop-page .wc-block-components-radio-control__option {
	border: 1.5px solid var(--line);
	border-radius: var(--radius-s);
	margin: 0 0 10px;
	background: #fff;
}

body.mlcs-shop-page .wc-block-components-radio-control__option:has(input:checked) {
	border-color: var(--blue);
	background: var(--soft);
}

body.mlcs-shop-page .wc-block-components-radio-control__option::after {
	display: none;
}

body.mlcs-shop-page .wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
	border-color: var(--blue);
}

body.mlcs-shop-page .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
	background: var(--blue);
}

body.mlcs-shop-page .wc-block-checkout__terms,
body.mlcs-shop-page .wc-block-components-checkout-policies {
	color: var(--muted);
	font-size: .9rem;
}

body.mlcs-shop-page .wc-block-checkout__terms a {
	color: var(--blue);
}

body.mlcs-shop-page .wc-block-components-checkout-place-order-button {
	width: 100%;
	font-size: 1.05rem;
	padding: 1em 1.4em;
}

/* Empty cart: keep the title, drop the "New in store" product grid and its rule. */
body.mlcs-shop-page .wp-block-woocommerce-empty-cart-block .wc-block-grid,
body.mlcs-shop-page .wp-block-woocommerce-empty-cart-block hr,
body.mlcs-shop-page .wp-block-woocommerce-empty-cart-block h2.wp-block-heading:not(.wc-block-cart__empty-cart__title) {
	display: none;
}

body.mlcs-shop-page .wc-block-cart__empty-cart__title {
	color: var(--ink);
	font-weight: 800;
	margin: 20px 0 8px;
}

.mlcs-cart-cta {
	margin: 26px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: center;
}

.mlcs-cart-cta .btn {
	display: inline-flex;
	align-items: center;
	padding: .8em 1.35em;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
}

.mlcs-cart-cta .btn-primary {
	background: var(--amber);
	color: var(--amber-ink);
	box-shadow: var(--shadow-s);
}

/* ---------- order received ---------- */

body.mlcs-shop-page .woocommerce-order > p:first-of-type {
	font-size: 1.1rem;
	color: var(--body);
}

body.mlcs-shop-page .woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	list-style: none;
	margin: 0 0 30px;
	padding: 18px 22px;
	background: var(--soft);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

body.mlcs-shop-page .woocommerce-order-overview li {
	border: 0;
	margin: 0;
	padding: 0 22px 0 0;
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--muted);
}

body.mlcs-shop-page .woocommerce-order-overview li strong {
	display: block;
	text-transform: none;
	letter-spacing: 0;
	font-size: 1.05rem;
	color: var(--ink);
}

body.mlcs-shop-page .woocommerce-order h2,
body.mlcs-shop-page .mlcs-booked h2,
body.mlcs-shop-page .mlcs-next h2,
body.mlcs-shop-page .mdlbr-course-links h2 {
	font-size: 1.35rem;
	margin: 34px 0 14px;
}

body.mlcs-shop-page .mlcs-booked h2:first-child {
	margin-top: 0;
}

body.mlcs-shop-page .woocommerce-table--order-details,
body.mlcs-shop-page .woocommerce-orders-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	font-size: .95rem;
}

body.mlcs-shop-page .woocommerce-table--order-details th,
body.mlcs-shop-page .woocommerce-orders-table th {
	background: var(--soft);
	color: var(--blue-d);
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 12px 16px;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--line);
}

body.mlcs-shop-page .woocommerce-table--order-details td,
body.mlcs-shop-page .woocommerce-orders-table td {
	padding: 12px 16px;
	border: 0;
	border-top: 1px solid var(--line-2);
	color: var(--body);
	vertical-align: top;
}

body.mlcs-shop-page .woocommerce-table--order-details tfoot th,
body.mlcs-shop-page .woocommerce-table--order-details tfoot td {
	background: #fff;
	text-transform: none;
	letter-spacing: 0;
	font-size: .95rem;
	color: var(--ink);
}

body.mlcs-shop-page .woocommerce-table--order-details tfoot tr:last-child td,
body.mlcs-shop-page .woocommerce-table--order-details tfoot tr:last-child th {
	font-weight: 800;
	font-size: 1.05rem;
}

body.mlcs-shop-page .woocommerce-customer-details address {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px 22px;
	font-style: normal;
	background: #fff;
}

.mlcs-next {
	margin: 34px 0 0;
	padding: 26px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-s);
}

.mlcs-next-steps {
	counter-reset: step;
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

.mlcs-next-steps li {
	position: relative;
	padding: 8px 0 8px 46px;
	color: var(--body);
	border-top: 1px solid var(--line-2);
}

.mlcs-next-steps li:first-child {
	border-top: 0;
}

.mlcs-next-steps li::before {
	counter-increment: step;
	content: counter(step);
	position: absolute;
	left: 0;
	top: 8px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--blue-l);
	color: var(--blue-d);
	font-weight: 800;
	display: grid;
	place-items: center;
	font-size: .9rem;
}

.mlcs-next-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

body.mlcs-shop-page .mdlbr-course-links {
	margin-top: 30px;
}

body.mlcs-shop-page .mdlbr-course-button,
body.mlcs-shop-page .mlcs-next-actions .btn-primary {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-weight: 700;
	padding: .8em 1.35em;
	border-radius: 999px;
	background: var(--amber);
	color: var(--amber-ink);
	box-shadow: var(--shadow-s);
	text-decoration: none;
}

body.mlcs-shop-page .mlcs-next-actions .btn-ghost {
	display: inline-flex;
	align-items: center;
	padding: .8em 1.35em;
	border-radius: 999px;
	border: 1.5px solid var(--line);
	color: var(--blue);
	background: #fff;
	font-weight: 700;
	text-decoration: none;
}

/* ---------- My Account ---------- */

body.mlcs-shop-page .woocommerce-MyAccount-navigation {
	float: none;
	width: auto;
}

body.mlcs-shop-page.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	column-gap: 32px;
	row-gap: 0;
	align-items: start;
}

/* Explicit placement: WooCommerce prints an (often empty) notices wrapper
   first, which would otherwise take the navigation's column. */
body.mlcs-shop-page.woocommerce-account .woocommerce > .woocommerce-notices-wrapper,
body.mlcs-shop-page.woocommerce-account .woocommerce > .woocommerce-message,
body.mlcs-shop-page.woocommerce-account .woocommerce > .woocommerce-info,
body.mlcs-shop-page.woocommerce-account .woocommerce > .woocommerce-error {
	grid-column: 1 / -1;
	grid-row: 1;
}

body.mlcs-shop-page.woocommerce-account .woocommerce > .woocommerce-notices-wrapper:not(:empty) {
	margin-bottom: 22px;
}

body.mlcs-shop-page .woocommerce-MyAccount-navigation {
	grid-column: 1;
	grid-row: 2;
}

body.mlcs-shop-page .woocommerce-MyAccount-content {
	grid-column: 2;
	grid-row: 2;
}

/* Logged out: the login form is the only child. */
body.mlcs-shop-page.woocommerce-account .woocommerce > .woocommerce-form-login,
body.mlcs-shop-page.woocommerce-account .woocommerce > .u-columns {
	grid-column: 1 / -1;
	grid-row: 2;
}

/* Logged out there is no navigation column, so lost-password forms and
   confirmation text take the full width instead of the right-hand column. */
body.mlcs-shop-page.woocommerce-account:not(.logged-in) .woocommerce > * {
	grid-column: 1 / -1;
}

body.mlcs-shop-page .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 8px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-s);
}

body.mlcs-shop-page .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	border: 0;
}

body.mlcs-shop-page .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 10px 14px;
	border-radius: 8px;
	color: var(--body);
	font-weight: 600;
	text-decoration: none;
}

body.mlcs-shop-page .woocommerce-MyAccount-navigation li a:hover {
	background: var(--soft);
	color: var(--blue);
}

body.mlcs-shop-page .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--blue-l);
	color: var(--blue-d);
}

body.mlcs-shop-page .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--muted);
	font-weight: 500;
}

body.mlcs-shop-page .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-s);
	padding: 26px 28px;
	min-width: 0;
}

body.mlcs-shop-page .woocommerce-MyAccount-content > p:first-child {
	color: var(--body);
}

body.mlcs-shop-page .woocommerce-MyAccount-content h2,
body.mlcs-shop-page .woocommerce-MyAccount-content h3 {
	color: var(--ink);
}

body.mlcs-shop-page .mdlbr-my-courses .mdlbr-course {
	border: 1px solid var(--line);
	border-left: 4px solid var(--blue);
	border-radius: 8px;
	padding: 14px 16px;
	margin: 0 0 12px;
}

body.mlcs-shop-page .mdlbr-my-courses .mdlbr-course-title {
	font-size: 1.05rem;
	margin: 0 0 .4em;
}

body.mlcs-shop-page .mdlbr-my-courses .mdlbr-course p:last-child {
	margin: 0;
}

body.mlcs-shop-page .mdlbr-my-courses .mdlbr-course-button {
	font-size: .9rem;
	padding: .6em 1.1em;
}

body.mlcs-shop-page .mdlbr-empty,
body.mlcs-shop-page .mdlbr-login-required {
	color: var(--muted);
}

/* Login form when logged out. */
body.mlcs-shop-page .woocommerce-form-login {
	max-width: 460px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-s);
	padding: 26px 28px;
}

body.mlcs-shop-page .woocommerce-form-login .woocommerce-form-login__submit {
	width: 100%;
	margin-top: 10px;
}

body.mlcs-shop-page .woocommerce-form-login label {
	font-weight: 600;
	color: var(--ink);
}

body.mlcs-shop-page .woocommerce-form-login input.input-text {
	width: 100%;
	padding: 11px 14px;
}

body.mlcs-shop-page .woocommerce-LostPassword a {
	color: var(--blue);
}

@media (max-width: 860px) {
	body.mlcs-shop-page.woocommerce-account .woocommerce {
		grid-template-columns: 1fr;
	}

	body.mlcs-shop-page .woocommerce-MyAccount-navigation {
		grid-column: 1;
		grid-row: 2;
		margin-bottom: 18px;
	}

	body.mlcs-shop-page .woocommerce-MyAccount-content {
		grid-column: 1;
		grid-row: 3;
	}

	body.mlcs-shop-page .woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
	}

	body.mlcs-shop-page .wc-block-components-sidebar,
	body.mlcs-shop-page .wc-block-checkout__sidebar {
		position: static;
	}

	body.mlcs-shop-page .wc-block-components-sidebar-layout .wc-block-components-main {
		padding-right: 0;
	}

	.mlcs-shop.wrap {
		padding: 28px 18px 56px;
	}
}

/* ---------- checkout: trust badges and booking strip ---------- */

.mlcs-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.mlcs-trust li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .18);
	color: #dce8fb;
	font-size: .8rem;
	font-weight: 600;
}

.mlcs-trust li::before {
	content: "✓";
	color: var(--amber);
	font-weight: 800;
}

.mlcs-strip {
	margin: 0 0 28px;
	padding: 18px 22px;
	background: #fff;
	border: 1px solid var(--line);
	border-left: 4px solid var(--blue);
	border-radius: var(--radius);
	box-shadow: var(--shadow-s);
}

.mlcs-strip h2 {
	margin: 0 0 8px;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--blue-d);
}

.mlcs-strip ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mlcs-strip li {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 16px;
	padding: 8px 0;
	border-top: 1px solid var(--line-2);
}

.mlcs-strip li:first-child {
	border-top: 0;
	padding-top: 0;
}

.mlcs-strip-course {
	font-weight: 700;
	color: var(--ink);
}

.mlcs-strip-course em {
	font-style: normal;
	font-weight: 500;
	color: var(--muted);
}

.mlcs-strip-date {
	grid-column: 1;
	color: var(--body);
	font-size: .95rem;
}

.mlcs-strip-count {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--blue-l);
	color: var(--blue-d);
	font-size: .76rem;
	font-weight: 600;
}

.mlcs-strip-change {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	font-size: .88rem;
	color: var(--blue);
	white-space: nowrap;
}

/* ---------- account hub ---------- */

body.mlcs-account-dashboard .woocommerce-MyAccount-content > p:nth-of-type(-n + 2) {
	display: none;
}

.mlcs-hub-head h2 {
	margin: 0 0 4px;
	font-size: 1.5rem;
}

.mlcs-hub-head p {
	margin: 0 0 18px;
	color: var(--muted);
}

.mlcs-hub-next {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 20px;
	padding: 20px 22px;
	margin: 0 0 18px;
	border-radius: var(--radius);
	background: linear-gradient(160deg, #071b38, #0b2c59);
	color: #eaf2ff;
}

.mlcs-hub-next.is-empty {
	background: var(--soft);
	color: var(--ink);
	border: 1px solid var(--line);
}

.mlcs-hub-eyebrow {
	grid-column: 1 / -1;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8fb5f0;
}

.mlcs-hub-next strong {
	grid-column: 1;
	font-size: 1.15rem;
	color: inherit;
}

.mlcs-hub-date {
	grid-column: 1;
	font-size: .95rem;
	color: #cfe0f8;
}

.mlcs-hub-next.is-empty .mlcs-hub-date {
	color: var(--body);
}

.mlcs-hub-count {
	grid-column: 1;
	display: inline-block;
	width: max-content;
	margin-top: 6px;
	padding: 2px 10px;
	border-radius: 999px;
	background: rgba(255, 183, 3, .18);
	color: var(--amber);
	font-size: .78rem;
	font-weight: 700;
}

.mlcs-hub-actions {
	grid-column: 2;
	grid-row: 2 / span 3;
	align-self: center;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.mlcs-hub-next.is-empty .mlcs-hub-actions {
	grid-row: 1 / span 2;
}

.mlcs-hub-actions .btn {
	display: inline-flex;
	align-items: center;
	padding: .6em 1.1em;
	border-radius: 999px;
	font-weight: 700;
	font-size: .9rem;
	background: var(--amber);
	color: var(--amber-ink);
	text-decoration: none;
	white-space: nowrap;
}

.mlcs-hub-ics {
	font-size: .82rem;
	color: #cfe0f8;
}

.mlcs-hub-next.is-empty .mlcs-hub-ics {
	color: var(--blue);
}

.mlcs-hub-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
}

.mlcs-hub-tiles li,
.mlcs-hub-tiles li a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 16px;
	border-radius: var(--radius-s);
	border: 1px solid var(--line);
	background: #fff;
	text-decoration: none;
	color: var(--muted);
}

.mlcs-hub-tiles li:has(a) {
	padding: 0;
	border: 0;
}

.mlcs-hub-tiles li a:hover {
	border-color: var(--blue);
	background: var(--soft);
}

.mlcs-hub-tiles b {
	font-size: 1.6rem;
	color: var(--ink);
	line-height: 1.1;
}

.mlcs-hub-tiles span {
	font-size: .82rem;
}

body.mlcs-account-dashboard .mlcs-booked h2 {
	font-size: 1.1rem;
	margin: 0 0 10px;
}

@media (max-width: 720px) {
	.mlcs-hub-next {
		grid-template-columns: 1fr;
	}

	.mlcs-hub-actions,
	.mlcs-hub-next.is-empty .mlcs-hub-actions {
		grid-column: 1;
		grid-row: auto;
		flex-direction: row;
		align-items: center;
		margin-top: 10px;
	}

	.mlcs-hub-tiles {
		grid-template-columns: 1fr;
	}

	.mlcs-strip li {
		grid-template-columns: 1fr;
	}

	.mlcs-strip-change {
		grid-column: 1;
		grid-row: auto;
	}
}

/* ============================================================
 * Production hardening (v1.2.0)
 *
 * WooCommerce ships its own form-control skin at a higher specificity than the
 * `body.mlcs-shop-page input[type=...]` rules above, so the sign-in, register
 * and checkout fields kept Woo's square 4px corners and near-black border
 * while every other control on the site was a 10px-radius --line box. These
 * selectors match Woo's own weight so the shop pages finally wear the site's
 * form controls rather than the plugin's.
 * ============================================================ */

body.mlcs-shop-page .woocommerce form .form-row input.input-text,
body.mlcs-shop-page .woocommerce form .form-row textarea,
body.mlcs-shop-page .woocommerce form .form-row select,
body.mlcs-shop-page .woocommerce-page form .form-row input.input-text,
body.mlcs-shop-page .woocommerce input.input-text,
body.mlcs-shop-page .woocommerce-input-wrapper input,
body.mlcs-shop-page .woocommerce-Input {
	box-sizing: border-box;
	width: 100%;
	padding: 11px 14px;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-s);
	background: #fff;
	color: var(--ink);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

body.mlcs-shop-page .woocommerce form .form-row input.input-text:focus,
body.mlcs-shop-page .woocommerce form .form-row textarea:focus,
body.mlcs-shop-page .woocommerce form .form-row select:focus,
body.mlcs-shop-page .woocommerce input.input-text:focus,
body.mlcs-shop-page .woocommerce-Input:focus {
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(12, 79, 179, .15);
	outline: none;
}

body.mlcs-shop-page .woocommerce form .form-row label,
body.mlcs-shop-page .woocommerce-form-row label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: .9rem;
	color: var(--ink);
}

body.mlcs-shop-page .woocommerce form .form-row {
	margin-bottom: 18px;
}

body.mlcs-shop-page .required {
	color: #b3261e;
	text-decoration: none;
}

/* Woo's password toggle is absolutely positioned over the field's right edge;
 * the field needs room for it so the eye does not sit on top of the border. */
body.mlcs-shop-page .woocommerce .password-input {
	display: block;
	position: relative;
}

body.mlcs-shop-page .woocommerce .password-input input.input-text {
	padding-right: 44px;
}

body.mlcs-shop-page .woocommerce .show-password-input {
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	padding: 0;
	color: var(--muted);
}

/* Checkboxes: the UA control next to brand type reads as an unfinished form. */
body.mlcs-shop-page .woocommerce input[type="checkbox"],
body.mlcs-shop-page .woocommerce input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0 8px 0 0;
	accent-color: var(--blue);
	vertical-align: -3px;
}

body.mlcs-shop-page .woocommerce-form-login__rememberme,
body.mlcs-shop-page .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-weight: 500;
	color: var(--body);
}

body.mlcs-shop-page .woocommerce-form-login__rememberme span {
	font-weight: 500;
}

/* The login and register panels are the same component; give them the same
 * card so one does not read as primary and the other as an afterthought. */
body.mlcs-shop-page .woocommerce .u-column1.col-1 > form,
body.mlcs-shop-page .woocommerce .u-column2.col-2 > form,
body.mlcs-shop-page .woocommerce form.login,
body.mlcs-shop-page .woocommerce form.register {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-s);
	padding: 26px;
	margin: 0;
}

body.mlcs-shop-page .woocommerce form.login .woocommerce-form-login__submit,
body.mlcs-shop-page .woocommerce form.register button.button {
	width: 100%;
	margin-top: 4px;
}

body.mlcs-shop-page .woocommerce-LostPassword {
	margin: 14px 0 0;
	font-size: .9rem;
}

/* ---------- block cart / checkout width ----------
 * The cart and checkout blocks are saved as `alignwide`, which resolves
 * against the theme's own --wp--style--global--wide-size. Inside the plugin's
 * 1180px wrapper that came out wider than the column and pulled the block's
 * left edge off-canvas (measured at -62px on a 390px viewport). Pinning the
 * alignment to the wrapper keeps the block inside its gutters at every width. */
body.mlcs-shop-page .wp-block-woocommerce-cart,
body.mlcs-shop-page .wp-block-woocommerce-checkout,
body.mlcs-shop-page .woocommerce .alignwide,
body.mlcs-shop-page .entry-content .alignwide {
	max-width: 100%;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

body.mlcs-shop-page .wc-block-cart__empty-cart__title,
body.mlcs-shop-page .wc-block-components-notices,
body.mlcs-shop-page .with-scroll-to-top__scroll-point {
	margin-left: auto;
	margin-right: auto;
}

/* Woo's empty-cart glyph is a near-black blob against the page; tint it to the
 * brand and give the panel the spacing the rest of the site uses. */
body.mlcs-shop-page .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	color: var(--blue);
	opacity: .35;
}

body.mlcs-shop-page .wp-block-woocommerce-empty-cart-block {
	text-align: center;
	padding: 8px 0 24px;
}

/* ---------- cart line items ----------
 * The course key art is now the product image, so the thumbnail column earns
 * its space. (It was hidden while every product fell back to WooCommerce's
 * placeholder, which rendered as an empty ~90px gutter down the left.)
 */
body.mlcs-shop-page .wc-block-cart-item__image img {
	border-radius: var(--radius-s);
	border: 1px solid var(--line);
	background: #0b1f3a;
	object-fit: contain;
}

body.mlcs-shop-page .wc-block-components-order-summary-item__image img {
	border-radius: 6px;
	background: #0b1f3a;
	object-fit: contain;
}

body.mlcs-shop-page .wc-block-cart-items__header th {
	color: var(--muted);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--line);
	padding-bottom: 10px;
}

body.mlcs-shop-page .wc-block-components-product-name {
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
}

body.mlcs-shop-page .wc-block-cart-item__remove-link {
	color: var(--muted);
	text-decoration: underline;
}

body.mlcs-shop-page .wc-block-cart-item__remove-link:hover {
	color: #b3261e;
}

/* The way back to the catalogue is deliberately quiet next to "Proceed to
 * checkout"; keep it clear of the totals card. */
body.mlcs-shop-page .mlcs-cart-cta {
	margin: 26px 0 0;
}

/* A course seat has no quantity selector, so WooCommerce's per-unit price under
 * the title is the same number as the line total beside it. Hide it only while
 * there is no quantity control — if seats become adjustable it comes back. */
body.mlcs-shop-page .wc-block-cart-items__row:not(:has(.wc-block-components-quantity-selector))
	.wc-block-cart-item__product .wc-block-components-product-price {
	display: none;
}

/* .mlcs-shop lays its children out as a centred flex column; the way-back link
 * belongs on the same left edge as the cart rows above it. */
body.mlcs-shop-page .mlcs-cart-cta {
	text-align: left;
	justify-content: flex-start;
	align-self: flex-start;
}

/* Checkout summary: let a learner drop a line they did not mean to book.
   The block renders the summary read-only and this store sends people
   straight from the date picker to checkout, so the cart page — where
   WooCommerce puts its own remove control — is a screen most never see.
   The selectors are specific because the theme styles every button inside
   the summary as a primary call to action, which this is the opposite of. */
.wc-block-components-order-summary-item .mlcs-remove-item,
.wp-block-woocommerce-checkout .mlcs-remove-item {
	display: inline-block;
	width: auto;
	margin: 6px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	background-color: transparent;
	box-shadow: none;
	color: #6b7280;
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	text-decoration: underline;
	cursor: pointer;
	min-height: 0;
}

.wc-block-components-order-summary-item .mlcs-remove-item:hover,
.wc-block-components-order-summary-item .mlcs-remove-item:focus,
.wp-block-woocommerce-checkout .mlcs-remove-item:hover,
.wp-block-woocommerce-checkout .mlcs-remove-item:focus {
	background: none;
	background-color: transparent;
	color: #b42318;
	box-shadow: none;
}

.wc-block-components-order-summary-item .mlcs-remove-item[disabled],
.wp-block-woocommerce-checkout .mlcs-remove-item[disabled] {
	cursor: default;
	text-decoration: none;
	opacity: 0.6;
}

.wc-block-components-order-summary-item .mlcs-remove-item.is-error,
.wp-block-woocommerce-checkout .mlcs-remove-item.is-error {
	color: #b42318;
}