/* Miso Rental Box — customer-facing styles (Flatsome-compatible) */

/* The three sentences at the top of the dashboard - the "international
   deliveries only" note, this intro, and the hold-window line - are consecutive
   prose and now read as such. Until 2026-09-09 they carried three different
   sizes and three different greys (0.85em/#888 as smallprint, #666, 0.9em/#777),
   which made one short paragraph look like three unrelated notices. David: "just
   make those three sentences in the same, standard font." None of them sets a
   size or a colour any more; only spacing is styled. The eligibility note also
   lost its `miso-rb-smallprint` class in the template, so the shared smallprint
   style is untouched everywhere else it is used. */
.miso-rb-dashboard .miso-rb-intro,
.miso-rb-dashboard .miso-rb-eligibility,
.miso-rb-dashboard .miso-rb-expiry {
	font-size: 1em;
	color: inherit;
}

/* The "international deliveries only" note, first thing under the heading on
   every state of the dashboard (item 3). */
.miso-rb-eligibility {
	margin: 0 0 1em;
}

.miso-rb-expiry {
	margin: 0 0 1em;
}

.miso-rb-orders {
	margin-bottom: 1.5em;
}

.miso-rb-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	align-items: center;
}

.miso-rb-actions .button {
	margin: 0;
}

/* max-width in rem, not em: at 0.85em the old 44em resolved to roughly 37rem of
   actual text, which wrapped the support note far narrower than everything
   around it. rem keeps the measure independent of the reduced font size. */
.miso-rb-smallprint {
	font-size: 0.85em;
	color: #888;
	max-width: 56rem;
}

.miso-rb-how ol {
	max-width: 44em;
}

.miso-rb-how li {
	margin-bottom: 0.6em;
}

.miso-rb-inline-notice {
	margin: 0 0 1em;
	font-size: 0.9em;
}

/* ---------- Ship my box (review screen) ---------- */

.miso-rb-back {
	font-size: 0.9em;
}

.miso-rb-manifest {
	margin-bottom: 1.5em;
}

.miso-rb-address-grid {
	margin-bottom: 1.5em;
}

.miso-rb-rates {
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0;
	border: 1px solid #e5e5e5;
}

.miso-rb-rates li {
	margin: 0;
	border-bottom: 1px solid #e5e5e5;
}

.miso-rb-rates li:last-child {
	border-bottom: 0;
}

.miso-rb-rates label {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin: 0;
	padding: 0.85em 1em;
	cursor: pointer;
	font-weight: 400;
}

.miso-rb-rates label:hover {
	background: #fafafa;
}

.miso-rb-rate-label {
	flex: 1;
}

.miso-rb-rate-cost {
	font-weight: 600;
	white-space: nowrap;
}

.miso-rb-terms {
	font-size: 0.9em;
	color: #777;
	padding: 0.75em 1em;
	background: #fafafa;
	border-left: 3px solid #ddd;
}

/* ---------- Order picker (ship screen) ---------- */

.miso-rb-order-picker {
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
	border: 1px solid #e5e5e5;
}

/* Each row is a checkbox alongside a <details> disclosure, so the tick and the
   expand/collapse never fight over the same click. */
.miso-rb-order-pick {
	display: flex;
	align-items: flex-start;
	gap: 0.7em;
	margin: 0;
	padding: 0.85em 1em;
	border-bottom: 1px solid #e5e5e5;
}

.miso-rb-order-pick:last-child {
	border-bottom: 0;
}

/* Past the hold window — ticked and not untickable. */
.miso-rb-order-pick.is-required {
	background: #fafafa;
}

/* Waiting on a pre-order — unticked and cannot be ticked. Muted so it reads as
   "not available yet" rather than "you forgot this one". */
.miso-rb-order-pick.is-blocked {
	background: #fafafa;
}

.miso-rb-order-pick.is-blocked .miso-rb-order-pick-head strong,
.miso-rb-order-pick.is-blocked .miso-rb-order-pick-items {
	color: #999;
}

.miso-rb-order-pick-tick {
	margin: 0.25em 0 0;
	flex: none;
}

.miso-rb-order-pick-detail {
	flex: 1 1 auto;
	min-width: 0;
}

.miso-rb-order-pick-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.6em;
	position: relative;
	padding-right: 1.8em; /* room for the chevron */
	cursor: pointer;
	list-style: none;
}

/* Drop the native disclosure marker — the chevron below replaces it, on the
   right, so the tick (include) and the expand (inspect) do not sit on top of
   each other competing for the same corner of the row. */
.miso-rb-order-pick-head::-webkit-details-marker {
	display: none;
}

.miso-rb-order-pick-head::marker {
	content: '';
}

.miso-rb-order-pick-head::after {
	content: '';
	position: absolute;
	right: 0.3em;
	top: 0.3em;
	width: 0.45em;
	height: 0.45em;
	border-right: 2px solid #999;
	border-bottom: 2px solid #999;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.miso-rb-order-pick-detail[open] > .miso-rb-order-pick-head::after {
	transform: rotate(-135deg);
}

.miso-rb-order-pick-head:hover::after,
.miso-rb-order-pick-head:focus::after {
	border-color: #333;
}

/* Placed after .is-required so it wins on equal specificity and every row,
   locked or not, still reads as expandable. */
.miso-rb-order-pick:hover {
	background: #f5f5f5;
}

.miso-rb-order-pick-date,
.miso-rb-order-pick-count {
	font-size: 0.85em;
	color: #888;
}

.miso-rb-order-pick-items {
	list-style: none;
	margin: 0.6em 0 0;
	padding: 0;
	font-size: 0.9em;
	color: #555;
}

.miso-rb-order-pick-items li {
	margin: 0;
}

.miso-rb-order-pick-note {
	margin: 0.6em 0 0;
	font-size: 0.85em;
	color: #777;
}

/* ---------- Live regions (AJAX re-quote) ---------- */

/* Dimmed and inert while the server re-prices. Not a spinner: the round trip is
   a flat-rate zone lookup, not an external carrier call, so it is over quickly
   and a spinner would flash more than it would reassure. */
.miso-rb-live.is-requoting {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.12s ease;
}

/* ---------- Orders in your box (dashboard) ---------- */

/* Same disclosure pattern as the ship screen's picker, minus the checkbox: the
   collapsed row carries every column except the items, which appear underneath
   on expand. Nothing reserves space for them, so a ten-line order costs the same
   vertical space as a one-line order until the customer asks for it. */
.miso-rb-order-list {
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0;
	border: 1px solid #e5e5e5;
}

.miso-rb-order-row {
	margin: 0;
	padding: 0.85em 1em;
	border-bottom: 1px solid #e5e5e5;
}

.miso-rb-order-row:last-child {
	border-bottom: 0;
}

.miso-rb-order-row:hover {
	background: #f5f5f5;
}

/* Waiting on a pre-order. Muted to match .miso-rb-order-pick.is-blocked on the
   ship screen, so the same order does not look normal here and greyed there.
   Placed before :hover above would lose the tint, so it sits after. */
.miso-rb-order-row.is-waiting .miso-rb-order-cell {
	color: #999;
}

.miso-rb-order-row.is-waiting .miso-rb-order-cell strong {
	font-weight: 600;
}

.miso-rb-order-list-head {
	display: grid;
	grid-template-columns: minmax(5em, 0.9fr) minmax(8em, 1.5fr) minmax(5em, 0.9fr) minmax(5em, 0.8fr);
	gap: 0.6em;
	margin: 0;
	padding: 0.6em 1em;
	padding-right: 2.8em; /* matches the row's chevron gutter, so headings line up */
	border-bottom: 1px solid #e5e5e5;
	background: #fafafa;
	font-size: 0.8em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #888;
}

.miso-rb-order-head {
	display: grid;
	grid-template-columns: minmax(5em, 0.9fr) minmax(8em, 1.5fr) minmax(5em, 0.9fr) minmax(5em, 0.8fr);
	gap: 0.6em;
	align-items: baseline;
	position: relative;
	padding-right: 1.8em; /* room for the chevron */
	cursor: pointer;
	list-style: none;
}

.miso-rb-order-head::-webkit-details-marker {
	display: none;
}

.miso-rb-order-head::marker {
	content: '';
}

.miso-rb-order-head::after {
	content: '';
	position: absolute;
	right: 0.3em;
	top: 0.35em;
	width: 0.45em;
	height: 0.45em;
	border-right: 2px solid #999;
	border-bottom: 2px solid #999;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.miso-rb-order-detail[open] > .miso-rb-order-head::after {
	transform: rotate(-135deg);
}

.miso-rb-order-head:hover::after,
.miso-rb-order-head:focus::after {
	border-color: #333;
}

.miso-rb-order-cell {
	min-width: 0;
	word-break: break-word;
}

/* Past the hold window. Red plus a title tooltip — never set on an order waiting
   on a pre-order, which shows a clock instead. */
.miso-rb-order-held.is-overdue {
	color: #b00020;
	font-weight: 600;
	cursor: help;
}

.miso-rb-order-total {
	font-weight: 600;
}

.miso-rb-order-items {
	list-style: none;
	margin: 0.7em 0 0;
	padding: 0;
	font-size: 0.9em;
	color: #555;
}

.miso-rb-order-items li {
	margin: 0;
}

.miso-rb-order-link {
	margin: 0.6em 0 0;
	font-size: 0.9em;
}

/* Outside the disclosure — it explains the clock in the collapsed row, so it has
   to be readable without expanding anything. */
.miso-rb-order-note {
	margin: 0.5em 0 0;
	font-size: 0.85em;
	color: #777;
}

@media (max-width: 549px) {
	/* Headings cannot follow the rows once they stack, so drop them and let each
	   cell label itself from its data-label. */
	.miso-rb-order-list-head {
		display: none;
	}

	.miso-rb-order-head {
		display: block;
	}

	.miso-rb-order-cell {
		display: block;
	}

	.miso-rb-order-cell + .miso-rb-order-cell {
		margin-top: 0.2em;
	}

	.miso-rb-order-cell[data-label]:not(:first-child)::before {
		content: attr(data-label) ': ';
		font-size: 0.85em;
		color: #888;
	}
}

/* ---------- Close-at-checkout toggle ---------- */

.miso-rb-close-toggle {
	padding: 0.85em 1em;
	background: #fafafa;
	border: 1px solid #e5e5e5;
	margin-bottom: 0.5em;
}

.miso-rb-close-toggle label {
	display: block;
	margin: 0 0 0.35em;
	cursor: pointer;
}

.miso-rb-close-toggle .miso-rb-smallprint {
	margin: 0;
}

/* ---------- Guest account: set a password, or log in ---------- */

/* Both sit inside div.woocommerce-account-fields, directly above WooCommerce's
   own password box, so the two paths look identical to the customer. */

.miso-rb-account-prompt {
	margin: 0 0 1em;
	font-size: 0.9em;
}

/* The note under the express buttons (Google Pay / Apple Pay / Link) on the
   basket and at the top of the checkout, for a guest who is offered the box
   rate: the wallet sheet cannot explain that an account will be created, so
   this does, quietly, before they tap (2026-09-10). */
.miso-rb-express-note {
	margin: 0.5em 0 1em;
	font-size: 0.85em;
	color: #666;
	max-width: 56rem;
}

/* The login block reads as one quiet panel under the prompt, not a stray
   password box floating in the billing form (feedback 2026-09-05, "very ugly").
   Buttons white and outlined like the rest of the feature. */
.miso-rb-login-inline {
	margin: 0 0 1.25em;
	padding: 1em 1.1em;
	background: #fafafa;
	border: 1px solid #e5e5e5;
}

.miso-rb-login-inline .form-row {
	margin-bottom: 0.75em;
}

.miso-rb-login-inline .miso-rb-login-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1em;
	margin: 0;
}

.miso-rb-login-inline .miso-rb-login-actions .button {
	margin: 0;
	background: #fff;
	color: inherit;
	border: 1px solid #c9ced6;
	box-shadow: none;
	border-radius: 3px;
	font-size: 0.8em;
	letter-spacing: 0.04em;
}

.miso-rb-login-inline .miso-rb-login-actions .button:hover {
	background: #f3f5f8;
	color: inherit;
	border-color: #9aa3b2;
}

.miso-rb-login-inline .miso-rb-login-actions .button[disabled] {
	opacity: 0.6;
}

.miso-rb-login-use-password {
	font-size: 0.9em;
}

.miso-rb-login-feedback.miso-rb-login-sent {
	margin-top: 0.9em;
	color: #1e6b2e;
}

.miso-rb-lost-password {
	font-size: 0.9em;
}

.miso-rb-login-feedback {
	margin: 0.75em 0 0;
	font-size: 0.9em;
}

.miso-rb-login-feedback:empty {
	display: none;
}

.miso-rb-login-feedback.miso-rb-login-failed {
	color: #b00020;
}

/* ---------- Orders list: the action buttons ---------- */

/* Flatsome renders every order action as a full-weight primary button, and a
   row can carry three of them (Pay · View · Cancel, or View · Hold & Combine),
   so the column turned into a wall of navy blocks of different widths, each
   row's set starting at a different x. Make them quiet, compact, and lined up:
   one flex row per cell, right-aligned, outline style — the ONE action a
   customer may not know about (Hold & Combine) keeps the filled style. */
/* Two reserved columns, so every row's buttons sit at the same x: View always
   in the first, everything else (Pay, Cancel, View box, Hold & Combine) in the
   second, stacking if there is more than one. All white — no button on this
   list is more important than the order it belongs to (David, 2026-09-03). */
/* Both columns fixed, so View and the second button line up down the whole
   list, but sized to the widest label ("Hold & Combine" / "Box on its way" is
   just under 8em at this size) rather than the old 10.5em, which left every
   button stretched across empty space (item 17). */
.woocommerce-orders-table__cell-order-actions {
	display: grid;
	grid-template-columns: 4.5em 9em; /* 9em since "+ Hold & Combine" (2026-09-05) */
	grid-auto-rows: min-content;
	gap: 4px 6px;
	justify-content: end;
	align-content: center;
	white-space: nowrap;
}

.woocommerce-orders-table__cell-order-actions .button {
	display: block;
	margin: 0;
	padding: 0 0.8em;
	min-height: 0;
	line-height: 2.1em;
	font-size: 0.72em;
	letter-spacing: 0.04em;
	text-align: center;
	background: #fff;
	color: inherit;
	border: 1px solid #c9ced6;
	box-shadow: none;
	border-radius: 3px;
	grid-column: 2;
}

.woocommerce-orders-table__cell-order-actions .button.view {
	grid-column: 1;
	grid-row: 1;
}

.woocommerce-orders-table__cell-order-actions .button:hover {
	background: #f3f5f8;
	color: inherit;
	border-color: #9aa3b2;
}

/* Below tablet width the six-column table does not fit and the theme simply
   clips it. Stack each order as a card: cell labels come from the data-title
   WooCommerce already puts on every cell, and the actions run in a row. */
@media (max-width: 767px) {
	.woocommerce-orders-table,
	.woocommerce-orders-table tbody,
	.woocommerce-orders-table tr,
	.woocommerce-orders-table td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	.woocommerce-orders-table thead {
		display: none;
	}

	.woocommerce-orders-table tr {
		padding: 0.75em 0;
		border-bottom: 1px solid #e5e5e5;
	}

	.woocommerce-orders-table td {
		padding: 0.15em 0;
		border: 0;
		text-align: left;
	}

	.woocommerce-orders-table td[data-title]:not(.woocommerce-orders-table__cell-order-actions)::before {
		content: attr(data-title) ': ';
		font-size: 0.85em;
		color: #888;
	}

	.woocommerce-orders-table__cell-order-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		justify-content: flex-start;
		margin-top: 0.5em;
		white-space: normal;
	}

	.woocommerce-orders-table__cell-order-actions .button,
	.woocommerce-orders-table__cell-order-actions .button.view {
		display: inline-block;
		grid-column: auto;
		grid-row: auto;
		order: 1;
		/* Flatsome's mobile button rules shrink these to a sliver; keep the
		   desktop size and let them wrap onto a second row instead (item 17). */
		flex: 0 0 auto;
		width: auto;
		min-width: 5em;
		padding: 0 0.9em;
		font-size: 0.75em;
		white-space: nowrap;
	}

	.woocommerce-orders-table__cell-order-actions .button.view {
		order: 0;
	}
}

/* WooCommerce 11.0's "Confirm your email address…" prompt on the Orders page:
   its button is hidden by Flatsome. The fix lives in the THEME (Flatsome →
   Advanced → Custom CSS, on live and staging, 2026-09-03), not here — it is a
   theme/WooCommerce problem that exists whether or not this plugin is active. */

/* ---------- On its way (dashboard, boxes past the point of adding) ---------- */

.miso-rb-transit {
	margin-top: 2.5em;
	padding-top: 1.5em;
	border-top: 1px solid #e5e5e5;
}

.miso-rb-transit > .miso-rb-smallprint {
	margin-bottom: 1em;
}

.miso-rb-transit-box {
	padding: 0.85em 1em;
	margin-bottom: 0.75em;
	border: 1px solid #e5e5e5;
	border-left: 3px solid #9aa3b2;
	background: #fafafa;
}

.miso-rb-transit-box p {
	margin: 0 0 0.3em;
}

.miso-rb-transit-box p:last-child {
	margin-bottom: 0;
}

.miso-rb-transit-shipped {
	border-left-color: #1e6b2e;
}

.miso-rb-transit-unpaid {
	border-left-color: #a8620f;
	background: #fbeedb;
}

.miso-rb-transit-orders,
.miso-rb-transit-service,
.miso-rb-transit-status {
	font-size: 0.9em;
	color: #555;
}

/* ---------- Shipping credit (0.8.0) ---------- */

/* A shipping credit reads as a reduced price, not as a sentence: the quoted
   figure struck through, what they actually pay beside it at the same size.
   David, 2026-09-09: "I didn't actually notice the 'you pay' part" - it was
   0.85em green text alongside a 600-weight price, and on that screen the
   difference between two rows was the whole credit. */
.miso-rb-rate-cost.is-reduced {
	font-weight: 400;
	color: #999;
	text-decoration: line-through;
}

.miso-rb-rate-net {
	font-size: 1em;
	font-weight: 600;
	color: #1e6b2e;
	white-space: nowrap;
	margin-left: 0.5em;
}

/* The struck figure alone does not say WHY it changed, so the payable amount
   carries the words for a screen reader. Flatsome defines .screen-reader-text,
   but this feature must not depend on the theme for something that would
   otherwise print a stray sentence in the middle of a price. */
.miso-rb-rates .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.miso-rb-credit-note {
	font-size: 0.9em;
	color: #555;
	padding: 0.75em 1em;
	margin: -1em 0 1.5em;
	background: #f2f8f3;
	border-left: 3px solid #1e6b2e;
}

.miso-rb-order-credit {
	color: #1e6b2e;
}

/* The "hold this order" invitation on the order-received and view-order pages:
   the button sits on its own line in the smaller button size, and the notice
   keeps clear of the "Order details" heading below it (items 12, 13, 24). */
.miso-rb-hold-invite,
.miso-rb-order-notice {
	margin-bottom: 2em;
}

.miso-rb-hold-invite .button {
	display: inline-block;
	margin: 0.8em 0 0;
	font-size: 0.8em;
}

/* The held-order notice reads as three short lines - what happened, what to do
   next, the link - each on its own (David, 2026-09-06). */
.miso-rb-order-notice-line {
	display: block;
}

.miso-rb-order-notice-line + .miso-rb-order-notice-line {
	margin-top: 0.7em;
}

/* The checkout rate: the name in bold, the explanation after it, and the
   "What's this?" link underlined so it reads as a link inside a label. */
.miso-rb-rate-info {
	text-decoration: underline;
	white-space: nowrap;
}

/* Hold confirmation screen: air between the explanation and what follows (item 14). */
.miso-rb-hold-lead {
	margin-bottom: 1.5em;
}

/* ---------- Order-pay page (the box shipping order is paid here) ---------- */

/* Flatsome styles the payment list on the checkout form but not on order-pay,
   so the radios grow list bullets and Stripe's card box runs the full width of
   the page (item 11, 2026-09-03). Scoped to the order-pay body class so the
   ordinary checkout is untouched. */
.woocommerce-order-pay #payment ul.payment_methods,
.woocommerce-order-pay #payment ul.payment_methods li {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.woocommerce-order-pay #payment .payment_box {
	max-width: 32em;
}

/* ---------- My Account login page: Magic Login Pro's "Quick Login with Magic
   Link" block ---------- */

/* Magic Login Pro renders its form under WooCommerce's Login / Register
   columns, centred in a 320px box that lines up with nothing. Sit it under
   its own heading at the width of the Login column's fields (Flatsome col:
   half the row, 30px padding each side), full width once the columns stack
   (feedback 2026-09-05). The plugin's own markup is untouched. */
.magic-login-woo-account {
	margin-top: 2em;
}

.magic-login-woo-account .woocommerce-form-title {
	margin-bottom: 0.75em;
}

.magic-login-woo-account .magic-login-content,
.magic-login-woo-account #magic-login-shortcode,
.magic-login-woo-account form.magic-login-inline-login-form {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.magic-login-woo-account .magic-login-form-header {
	margin: 0 0 1em;
	padding: 0;
	border: 0;
	background: none;
}

.magic-login-woo-account .magic-login-form-header .message {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #666;
}

.magic-login-woo-account form.magic-login-inline-login-form label {
	display: block;
	margin-bottom: 0.4em;
}

.magic-login-woo-account form.magic-login-inline-login-form input.input {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 1em;
}

/* The plugin sizes the button 100% from an id selector; match the Log in
   button above instead. */
.magic-login-woo-account #magic-login-shortcode .magic-login-submit {
	width: auto;
	margin: 0;
}

@media (min-width: 850px) {
	.magic-login-woo-account {
		max-width: calc(50% - 30px);
	}
}

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

/* The menu order and labels come from miso_rb_account_menu_order() in
   functions-account.php. The dashboard renders it as a two-column tile grid
   (Flatsome's ul.dashboard-links), read in pairs; these margins open the gaps
   between David's groups (2026-09-05): [Order History, Hold & Combine /
   Pre-orders, Subscriptions] [Stock Notifications, Wishlist] [Coupons, Gift
   Card Balance] [Addresses, Account details] [Log out]. Both tiles of a row
   carry the margin so the row below drops evenly. */
ul.dashboard-links .woocommerce-MyAccount-navigation-link--pre-orders,
ul.dashboard-links .woocommerce-MyAccount-navigation-link--subscriptions,
ul.dashboard-links .woocommerce-MyAccount-navigation-link--backinstock,
ul.dashboard-links .woocommerce-MyAccount-navigation-link--miso-wishlist,
ul.dashboard-links .woocommerce-MyAccount-navigation-link--wc-smart-coupons,
ul.dashboard-links .woocommerce-MyAccount-navigation-link--pw-gift-card-balance,
ul.dashboard-links .woocommerce-MyAccount-navigation-link--edit-address,
ul.dashboard-links .woocommerce-MyAccount-navigation-link--edit-account {
	margin-bottom: 2.4em;
}

/* YITH appends its own Wishlist tile at the end; the menu now carries one in
   the right place. */
ul.dashboard-links > li.wishlist-account-element {
	display: none;
}

/* The sidebar list on the other account pages is one column: one gap per group. */
.woocommerce-MyAccount-navigation ul:not(.dashboard-links) .woocommerce-MyAccount-navigation-link--subscriptions,
.woocommerce-MyAccount-navigation ul:not(.dashboard-links) .woocommerce-MyAccount-navigation-link--miso-wishlist,
.woocommerce-MyAccount-navigation ul:not(.dashboard-links) .woocommerce-MyAccount-navigation-link--pw-gift-card-balance,
.woocommerce-MyAccount-navigation ul:not(.dashboard-links) .woocommerce-MyAccount-navigation-link--edit-account {
	margin-bottom: 1.5em;
}

.woocommerce-MyAccount-content > p:empty {
	display: none;
}

/* ---------- My Account: centring and breadcrumb (feedback 2026-09-05) ---------- */

/* The dashboard: Flatsome sizes a tile at a third of the content column, so
   two fit per row and the pair sat at the left of a 1050px column. Narrow the
   column to two tiles and centre it; the greeting stays aligned with the tiles.
   Only above the theme's stacking breakpoint - on a phone the tiles are full
   width already. */
@media (min-width: 850px) {
	.miso-account-dashboard .woocommerce-MyAccount-content {
		max-width: 760px;
		margin-left: auto;
		margin-right: auto;
	}

	.miso-account-dashboard ul.dashboard-links > li {
		width: calc(50% - 27.04px);
	}

	/* Every tile carries a 27px left margin, so the greeting lines up with
	   the tiles' left edge rather than the column's. */
	.miso-account-dashboard .woocommerce-MyAccount-content > p {
		margin-left: 27px;
	}
}

/* Account details and Addresses: the forms ran the full content width, so a
   name field was a foot wide. One reading column, centred like the dashboard.
   Other account screens (orders, boxes, pre-orders) keep the full width - they
   are tables. */
.miso-account-edit-account .woocommerce-MyAccount-content,
.miso-account-edit-address .woocommerce-MyAccount-content {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

/* The two address blocks share the column evenly rather than hugging its
   left edge at their natural width. */
@media (min-width: 550px) {
	.miso-account-edit-address .woocommerce-Addresses {
		display: flex;
		gap: 2em;
	}

	.miso-account-edit-address .woocommerce-Addresses .woocommerce-Address {
		flex: 1 1 0;
		max-width: none;
		float: none;
	}
}

/* "My Account > Order History" at the top of every account screen except the
   dashboard, so a customer who pressed a tile has a way back. */
.miso-account-crumb {
	margin: 0 0 1.5em;
	font-size: 0.85em;
	color: #888;
}

.miso-account-crumb a {
	color: inherit;
	text-decoration: underline;
}

.miso-account-crumb a:hover {
	color: #333;
}

.miso-account-crumb-sep {
	margin: 0 0.5em;
}

.miso-account-crumb-current {
	color: #555;
}

/* ---------- Order details page ---------- */

/* WooCommerce's myaccount/view-order.php wraps the order number, date and status
   in <mark>, which browsers paint highlighter-yellow by default. Bold says the
   same thing without looking like someone has been at the page with a marker
   pen. Applies to every order, not just box ones — it is one sentence and a
   split style would look like a bug. */
.woocommerce-MyAccount-content mark.order-number,
.woocommerce-MyAccount-content mark.order-date,
.woocommerce-MyAccount-content mark.order-status {
	background: none;
	background-color: transparent;
	color: inherit;
	font-weight: 700;
}

/* The box statuses carry a link to the box. Keep it in the sentence's own
   colour so the line still reads as a sentence, underlined so it is obviously
   clickable. */
.woocommerce-MyAccount-content mark.order-status a {
	color: inherit;
	text-decoration: underline;
}

@media (max-width: 549px) {
	.miso-rb-rates label {
		flex-wrap: wrap;
	}
}

/* ---------- Free delivery by destination (2026-09-06) ---------- */

/* The information page panel ([miso_rb_free_delivery_panel], one block for
   every country). The server prints the figure and a country <select>; the
   script fills in the country NAME from the mp_orig_country cookie, because
   the page is cached per VAT/currency bucket, not per country. Until the
   script has run, or when the cookie names nothing in the list, the
   "Shipping to X?" phrases are hidden and the neutral sentence shows. */
.miso-rb-fd .miso-rb-fd-known,
.miso-rb-fd.miso-rb-fd-has-country .miso-rb-fd-unknown {
	display: none;
}

.miso-rb-fd.miso-rb-fd-has-country .miso-rb-fd-known {
	display: inline;
}

/* The "duties paid up front" sentence in the zone / no-offer states: only once
   the script has confirmed the real country is a DDP destination (data-ddp). */
.miso-rb-fd .miso-rb-fd-ddp {
	display: none;
}

.miso-rb-fd.miso-rb-fd-has-ddp .miso-rb-fd-ddp {
	display: inline;
}

/* The second benefit column ([miso_rb_customs_column], 2026-09-07). Both
   variants are in the HTML because the page is cached per VAT/currency bucket,
   not per country; the script shows the "Pre-paid customs" one only once it has
   confirmed the real country is a DDP destination. The default - no script yet,
   no cookie, or a country not in the list - is the enclosed fallback, which is
   true for everyone. */
.miso-rb-fd-col .miso-rb-fd-col-ddp {
	display: none;
}

.miso-rb-fd-col.miso-rb-fd-has-ddp .miso-rb-fd-col-ddp {
	display: block;
}

.miso-rb-fd-col.miso-rb-fd-has-ddp .miso-rb-fd-col-alt {
	display: none;
}

/* The basket banner (David, 2026-09-06): the free-delivery line at the top of
   the basket page, in the site's light blue with the progress bar under it.
   Green once the order qualifies. Same family as the dashboard block below. */
/* Second pass (David): quieter - a soft neutral card the width of the products
   column, regular-weight text, a thin bar. No rule, no bold sentence. */
.miso-rb-fd-cart {
	margin: 0 0 1.25em;
	padding: 0.85em 1em 0.95em;
	background: #f4f6f9;
	border-radius: 3px;
}

.miso-rb-fd-cart-line {
	margin: 0 0 0.55em;
	font-size: 0.95em;
	font-weight: 400;
	color: #04164d;
}

.miso-rb-fd-cart.miso-rb-free-yes .miso-rb-fd-cart-line {
	color: #1e6b2e;
}

.miso-rb-fd-cart-line .woocommerce-Price-amount {
	font-weight: 600;
}

.miso-rb-fd-cart .miso-rb-fd-bar {
	height: 4px;
	margin-bottom: 0;
	background: #fff;
}

.miso-rb-fd-cart .miso-rb-fd-bar > span {
	background: #04164d;
}

.miso-rb-fd-cart.miso-rb-free-yes .miso-rb-fd-bar > span {
	background: #1e6b2e;
}

/* The customs-fee plugin's "Customs included" notice, relocated to sit directly
   under the card (its green box styling is the plugin's own). */
.miso-rb-fd-customs {
	margin: 0 0 1.25em;
}

.miso-rb-fd-cart + .miso-rb-fd-customs {
	margin-top: -0.6em;
}

/* Checkout: two copies of the card, one visible at a time. From Flatsome's
   850px breakpoint the columns sit side by side and the copy above the framed
   "Your order" box shows; below it the columns stack (billing first) and that
   spot is far down the page, so the copy at the top of the page shows instead. */
@media (min-width: 850px) {
	.miso-rb-fd-host-top {
		display: none;
	}
}

@media (max-width: 849px) {
	.miso-rb-fd-host-side {
		display: none;
	}
}

.miso-rb-fd-heading {
	margin-bottom: 6px;
}

/* The country selector ([miso_rb_delivery_country]) sits at the TOP of the
   page, directly under the strapline (David, 2026-09-07) - "Delivering to:
   [ United States v ]" on one line. Everything below it on the page follows
   from it, so it reads as the page's one input. Centred by the hero column, not
   by this rule. */
/* David, 2026-09-07 (second pass): more prominent. It is the page's one input -
   the figure, the strapline and the customs column all follow from it - so it
   reads in the house navy at full body size rather than as grey small print. */
.miso-rb-fd-switch {
	font-size: 1.05em;
	color: #04164d;
	margin-top: 0;
	margin-bottom: 1.6em;
}

.miso-rb-fd-switch label {
	display: inline;
	font-weight: inherit;
	color: inherit;
	cursor: pointer;
}

.miso-rb-fd-switch-label {
	margin-right: 0.6em;
	font-weight: 600;
}

/* background-color, not background: Flatsome draws the dropdown arrow with a
   background-image and the shorthand would wipe it. */
.miso-rb-fd-select {
	display: inline-block;
	width: auto;
	max-width: 100%;
	margin: 0;
	padding: 0.45em 2.2em 0.45em 0.8em;
	height: auto;
	font-size: 1em;
	font-weight: 600;
	color: #04164d;
	background-color: #fff;
	border: 1px solid #03219a;
	border-radius: 4px;
	box-shadow: none;
	vertical-align: baseline;
}

.miso-rb-fd-select:focus {
	border-color: #03219a;
	box-shadow: 0 0 0 2px rgba(3, 33, 154, 0.18);
}

.miso-rb-fd-busy {
	margin-left: 0.5em;
	font-style: italic;
}

/* The dashboard progress block and the cart/checkout line. */
.miso-rb-fd-progress {
	margin: 0 0 1.5em;
}

.miso-rb-fd-bar {
	height: 6px;
	background: #e9ecf2;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 0.5em;
}

.miso-rb-fd-bar > span {
	display: block;
	height: 100%;
	background: #03219a;
	border-radius: 3px;
	transition: width 0.3s ease;
}

.miso-rb-free-yes .miso-rb-fd-bar > span {
	background: #1e6b2e;
}

.miso-rb-fd-line {
	margin: 0;
	font-size: 0.95em;
}

.miso-rb-fd-line .miso-rb-smallprint {
	display: block;
	margin-top: 0.25em;
}

.miso-rb-free-yes .miso-rb-fd-line {
	color: #1e6b2e;
}

/* Cart and checkout: one row in the totals table, above Total. The cart's totals
   table is th/td, the checkout's is th/td too - both accept a colspan cell. */
tr.miso-rb-free-line td {
	font-size: 0.9em;
	font-weight: 400;
	text-align: left;
	padding-top: 6px;
	padding-bottom: 6px;
}

tr.miso-rb-free-yes td {
	color: #1e6b2e;
}