/*
Theme Name:   MH Unlock (Astra Child)
Theme URI:    https://mhunlock.online/
Description:  Child theme for MH Unlock. Dark teal theme, taken from the logo.
Author:       MH Unlock
Template:     astra
Version:      2.0.0
Text Domain:  astra-child
*/

/* ---------------------------------------------------------------------------
   Design tokens — dark

   One accent colour, one neutral ramp, three surface steps, two shadows.
   Everything else is spacing. The site is dark by choice, not by responding to
   the visitor's OS setting: Astra's own palette is set to match, so there is a
   single source of truth rather than light chrome with dark paint over it.
   --------------------------------------------------------------------------- */

:root {
	/* Teal, taken from the logo. Two of them, because one colour cannot do both
	   jobs on a dark theme — measured against every surface below:
	     #2aa9c0 as text  -> 5.25-6.77 (clears AA everywhere)
	     #4dd0e1 as text  -> 7.96-10.27 (hover, the logo's bright cyan)
	     white on #2aa9c0 -> fails; white on #0e7490 -> 5.36 (passes)
	   So: --mh-primary reads AS text, --mh-primary-solid is sat ON. */
	--mh-primary: #2aa9c0;
	--mh-primary-dark: #4dd0e1;   /* hover goes lighter on dark, not darker */
	--mh-primary-solid: #0e7490;  /* filled buttons, badges — white text on this */
	--mh-primary-solid-hover: #0d7d8c;
	--mh-primary-soft: rgba(42, 169, 192, 0.14);
	--mh-primary-line: rgba(42, 169, 192, 0.34);

	--mh-ink: #eef6f8;
	--mh-body: #a8bcc3;
	--mh-muted: #7d949c;

	--mh-line: #1c2f36;
	--mh-line-strong: #27424b;

	--mh-canvas: #0b1216;         /* page ground */
	--mh-surface: #101a1f;        /* cards, header, panels */
	--mh-surface-alt: #152329;    /* nested fills, table heads */
	--mh-surface-hi: #1a2b32;     /* hover fill */

	--mh-on-primary: #ffffff;

	--mh-radius: 12px;
	--mh-radius-lg: 16px;

	/* On dark, depth reads through a lighter top edge plus a deeper shadow —
	   a soft grey shadow alone is invisible. */
	--mh-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 2px 8px rgba(0, 0, 0, 0.4);
	--mh-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 14px 34px rgba(0, 0, 0, 0.55);
	--mh-glow: 0 0 0 1px rgba(42, 169, 192, 0.35), 0 12px 34px rgba(42, 169, 192, 0.20);

	--mh-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* One easing and one duration across the whole site, so nothing feels
   out of step with anything else. */
a,
button,
input,
select,
textarea,
.button,
.mh-cat__link,
.woocommerce ul.products li.product {
	transition-timing-function: var(--mh-ease);
}

html {
	scroll-behavior: smooth;
	color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Focus rings have to be visible against dark, and Astra's dotted default
   disappears. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible {
	outline: 2px solid var(--mh-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

::selection {
	background: rgba(42, 169, 192, 0.35);
	color: #fff;
}

/* Scrollbar, so the chrome does not stay light against a dark page. */
* {
	scrollbar-color: var(--mh-line-strong) var(--mh-canvas);
}

/* ---------------------------------------------------------------------------
   Page canvas
   ---------------------------------------------------------------------------
   The ground is the darkest layer; cards and the header sit one step lighter.
   Keeping those two separate is what stops a dark page reading as flat.
   --------------------------------------------------------------------------- */

body,
body.ast-plain-container,
body.ast-separate-container,
body.ast-narrow-container,
body.ast-page-builder-template {
	background-color: var(--mh-canvas);
	color: var(--mh-body);
}

#page,
#content,
.site-content,
.ast-container,
.entry-content {
	background: transparent;
}

/* Roomier content column. Long lines are the other half of "unprofessional". */
.ast-container {
	max-width: 1240px;
}

/* ---------------------------------------------------------------------------
   Type
   ---------------------------------------------------------------------------
   Space Grotesk on headings — self-hosted, latin only, 43 KB for both weights.
   Body stays on the system stack: it renders on first paint with no swap, and
   a webfont there would have cost another ~550 KB for no gain in readability.
   --------------------------------------------------------------------------- */

:root {
	--mh-font-heading: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system,
		'Segoe UI', Roboto, sans-serif;
	--mh-font-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
		'Helvetica Neue', Arial, sans-serif;
}

body,
button,
input,
select,
textarea {
	font-family: var(--mh-font-body);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.mh-section__title,
.mh-slide__title,
.woocommerce-products-header__title,
.ast-archive-title,
.woocommerce div.product .product_title,
.mh-auth__title,
.mh-footer__heading,
.mh-cat__name,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--mh-font-heading);
	font-feature-settings: 'ss01' 1;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--mh-ink);
	letter-spacing: -0.015em;
}

/* Prices read as data — tabular figures keep the columns from jittering. */
.woocommerce .price,
.woocommerce-Price-amount,
.mh-cat__count {
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */

.site-header,
.ast-primary-header-bar,
.main-header-bar {
	background-color: var(--mh-surface) !important;
	border-bottom: 1px solid var(--mh-line);
	box-shadow: none !important;
}

/* The logo mark is portrait (taller than wide), so cap its height — sizing it
   by width blew the header row from 92px to 224px. */
.site-header .custom-logo-link img,
.site-header .custom-logo {
	max-height: 40px;
	width: auto !important;
	max-width: none;
}

/* Mark and wordmark side by side. */
.site-branding .ast-site-identity {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0 !important;
}

.site-title {
	margin: 0 !important;
	line-height: 1.1 !important;
}

.site-title a {
	font-weight: 700;
	font-size: 1.35rem;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

/* Underline that grows on the active and hovered nav item. */
.main-header-menu > .menu-item > .menu-link {
	position: relative;
	font-weight: 500;
}

.main-header-menu > .menu-item > .menu-link::after {
	content: "";
	position: absolute;
	left: 0.9em;
	right: 0.9em;
	bottom: 0.55em;
	height: 2px;
	border-radius: 2px;
	background: var(--mh-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.18s ease;
}

.main-header-menu > .menu-item:hover > .menu-link::after,
.main-header-menu > .current-menu-item > .menu-link::after,
.main-header-menu > .current-menu-ancestor > .menu-link::after {
	transform: scaleX(1);
}

/* --- Header row 2: navigation bar -------------------------------------- */

.ast-below-header-bar,
.site-below-header-wrap {
	background: var(--mh-surface-alt) !important;
	border-bottom: 1px solid var(--mh-line);
}

/* Astra gives this row a tall default height; the reference nav bar is compact. */
.ast-below-header-bar .site-below-header-wrap,
.ast-below-header-bar .ast-builder-grid-row {
	min-height: 0;
}

/* Nav items as buttons. */
.ast-below-header-bar .main-header-menu > .menu-item > .menu-link {
	height: auto !important;
	line-height: 1.3 !important;
	padding: 0.5rem 1rem !important;
	margin: 0.3rem 0.25rem 0.3rem 0;
	border: 1px solid var(--mh-line-strong);
	border-radius: 8px;
	background: var(--mh-surface);
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--mh-body) !important;
	transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

/* Hover and current page both fill with the brand colour. Astra styles these
   links with its own specific selectors, so match that weight here. */
.ast-below-header-bar .main-header-menu > .menu-item:hover > .menu-link,
.ast-below-header-bar .main-header-menu > .menu-item > .menu-link:hover,
.ast-below-header-bar .main-header-menu > .menu-item > .menu-link:focus-visible,
.ast-below-header-bar .main-header-menu > .current-menu-item > .menu-link,
.ast-below-header-bar .main-header-menu > .current-menu-ancestor > .menu-link,
.ast-below-header-bar .main-header-menu > .current_page_item > .menu-link {
	border-color: var(--mh-primary) !important;
	background-color: var(--mh-primary) !important;
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(14, 116, 144, 0.30);
}

/* Lift the whole button slightly so the hover reads as a press target. */
.ast-below-header-bar .main-header-menu > .menu-item:hover > .menu-link {
	transform: translateY(-1px);
}

/* Caret inherits the button's text colour. */
.ast-below-header-bar .main-header-menu > .menu-item > .menu-link .ast-icon,
.ast-below-header-bar .main-header-menu > .menu-item > .menu-link svg {
	fill: currentColor;
}

/* The underline belongs to the old single-row header; the pill replaces it. */
.ast-below-header-bar .main-header-menu > .menu-item > .menu-link::after {
	display: none;
}

/* Cart sits at the far right of row 2. */
.ast-below-header-bar .ast-header-woo-cart {
	margin-left: auto;
}

.ast-below-header-bar .ast-cart-menu-wrap {
	color: var(--mh-body);
}

/* --- Header row 1 -----------------------------------------------------
   Astra sizes the primary header grid as `580px 0px 580px` — the centre column
   gets no width at all unless one of its own components is in there. Give the
   middle a real track so the search box can live in it. */

/* Both header rows share one grid, so the nav buttons in row 2 line up under
   the search box in row 1 instead of hugging the left edge. The first track is
   sized to the logo lockup; the middle track is the search/nav column.

   Desktop only — below Astra's breakpoint the mobile header takes over and a
   fixed 280px first column would squeeze it. */
@media (min-width: 922px) {
	.ast-primary-header-bar .ast-builder-grid-row,
	.ast-below-header-bar .ast-builder-grid-row {
		grid-template-columns: 280px minmax(240px, 620px) 1fr;
		align-items: center;
		gap: 1.5rem;
	}
}

.ast-primary-header-bar .ast-builder-grid-row,
.ast-below-header-bar .ast-builder-grid-row {
	align-items: center;
}

.ast-primary-header-bar {
	padding: 0.35rem 0;
}

/* Row 2's buttons sit centred inside the same column the search box occupies,
   so the group is centred under the search bar. */
.ast-below-header-bar .site-header-below-section-center {
	justify-content: center;
}

.ast-below-header-bar .site-header-below-section-center .ast-builder-menu {
	width: 100%;
	justify-content: center;
}

/* Astra puts `margin-left: auto` on this wrapper, which pins the menu to the
   right of its column. Auto on both sides centres it instead. */
.ast-below-header-bar .ast-main-header-bar-alignment {
	margin-left: auto !important;
	margin-right: auto;
}

/* Astra's wrappers around an HTML component are `flex: 0 1 auto`, so they shrink
   to the input's intrinsic size and the search box never fills the column it
   was given. Stretch the whole chain, in whichever row the search sits. */
.site-header-primary-section-center,
.site-header-primary-section-center .ast-builder-layout-element,
.site-header-primary-section-center .ast-builder-html-element,
.site-header-primary-section-center .ast-header-html,
.site-header-below-section-center,
.site-header-below-section-center .ast-builder-layout-element,
.site-header-below-section-center .ast-builder-html-element,
.site-header-below-section-center .ast-header-html {
	width: 100%;
	min-width: 0;
	flex: 1 1 auto;
	justify-content: center;
}

.mh-search {
	position: relative;
	display: flex;
	width: 100%;
	max-width: 620px;
}

.mh-search input[type="search"] {
	width: 100%;
	padding: 0.7rem 3.2rem 0.7rem 1.2rem;
	border: 1px solid var(--mh-line-strong);
	border-radius: 999px;
	background: var(--mh-surface);
	font-size: 0.9rem;
	color: var(--mh-ink);
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
	-webkit-appearance: none;
	appearance: none;
}

.mh-search input[type="search"]::placeholder {
	color: var(--mh-muted);
}

.mh-search input[type="search"]:focus {
	outline: none;
	border-color: var(--mh-primary);
	background: var(--mh-surface);
	box-shadow: 0 0 0 3px rgba(42, 169, 192, 0.16);
}

/* Solid circular submit inside the field, as on the reference storefront. */
.mh-search button {
	position: absolute;
	top: 50%;
	right: 5px;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--mh-primary);
	color: #fff;
	cursor: pointer;
	transition: background 0.16s ease;
}

.mh-search button:hover,
.mh-search button:focus-visible {
	background: var(--mh-primary-dark);
	color: #fff;
}

.mh-search button svg {
	width: 17px;
	height: 17px;
}

/* --- Account button --------------------------------------------------- */

.mh-account-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0;
	border: 0;
	background: none;
	color: var(--mh-ink) !important;
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	transition: color 0.16s ease;
}

.mh-account-btn:hover,
.mh-account-btn:focus-visible {
	color: var(--mh-primary) !important;
}

.mh-account-btn svg {
	width: 22px;
	height: 22px;
	flex: none;
	stroke-width: 1.5;
	color: var(--mh-muted);
	transition: color 0.16s ease;
}

.mh-account-btn:hover svg {
	color: var(--mh-primary);
}

@media (max-width: 921px) {
	.mh-account-btn span {
		display: none;   /* icon only — the header is tight on phones */
	}

	.mh-account-btn {
		padding: 0.5rem;
	}

	/* The site title was wrapping to two lines and forcing the header to 189px. */
	#ast-mobile-header .site-title {
		white-space: nowrap;
		font-size: 1.15rem;
		line-height: 1.2;
	}

	#ast-mobile-header .site-header-primary-section-left {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Search sits on its own row — let it use the full width. */
	#ast-mobile-header .site-header-below-section-center,
	#ast-mobile-header .site-header-below-section-center .ast-builder-layout-element,
	#ast-mobile-header .site-header-below-section-center .ast-header-html,
	#ast-mobile-header .site-header-below-section-center .ast-builder-html-element {
		width: 100%;
		flex: 1 1 auto;
	}

	/* That row holds nothing but the search, so collapse the 1fr/auto/1fr grid
	   Astra gives it to a single full-width track. */
	#ast-mobile-header .ast-below-header-bar .ast-builder-grid-row {
		grid-template-columns: 1fr;
	}

	#ast-mobile-header .mh-search {
		max-width: none;
	}

	#ast-mobile-header .ast-below-header-bar,
	#ast-mobile-header .site-below-header-wrap {
		padding: 0.5rem 0;
	}
}

/* --- Dropdown --------------------------------------------------------- */

.main-header-menu .sub-menu {
	min-width: 220px;
	padding: 0.4rem;
	border: 1px solid var(--mh-line);
	border-radius: var(--mh-radius);
	background: var(--mh-surface);
	box-shadow: 0 12px 34px rgba(26, 21, 35, 0.10);
}

/* Same weight as the nav buttons above them, so the dropdown reads as part of
   the same control rather than a lighter afterthought. */
.main-header-menu .sub-menu .menu-link {
	padding: 0.6rem 0.75rem !important;
	border-radius: 8px;
	font-size: 0.88rem;
	font-weight: 600 !important;
	color: var(--mh-body) !important;
	transition: background 0.14s ease, color 0.14s ease;
}

.main-header-menu .sub-menu .menu-item:hover > .menu-link,
.main-header-menu .sub-menu .current-menu-item > .menu-link {
	background: var(--mh-primary-soft) !important;
	color: var(--mh-primary-dark) !important;
}

/* The parent underline shouldn't repeat on every child row. */
.main-header-menu .sub-menu .menu-link::after {
	display: none;
}

/* Small caret so the dropdown is discoverable. */
.main-header-menu > .menu-item-has-children > .menu-link .ast-icon {
	margin-left: 0.3rem;
}

/* ---------------------------------------------------------------------------
   Trust bar — one quiet line, not a second header
   --------------------------------------------------------------------------- */

.mh-trustbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 2rem;
	padding: 0.6rem 1rem;
	background: var(--mh-surface-alt);
	border-bottom: 1px solid var(--mh-line);
	font-size: 0.82rem;
	color: var(--mh-muted);
}

.mh-trustbar span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	white-space: nowrap;
}

.mh-trustbar span::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--mh-primary);
	flex: none;
}

/* ---------------------------------------------------------------------------
   Home page — banner sits straight under the trust bar
   ---------------------------------------------------------------------------
   The page title is switched off in the page's own Astra settings, so only the
   leftover top padding has to come off here.
   --------------------------------------------------------------------------- */

.home #content .ast-container {
	padding-top: 1.25rem;
}

.home .site-content .entry-header,
.home .ast-single-post .entry-header {
	display: none;
}

.home .entry-content > *:first-child {
	margin-top: 0;
}

/* The homepage still needs one H1 for search engines. It is visually hidden
   rather than removed — clip-based, not display:none, so screen readers still
   announce it and the text matches what the page is actually about. */
.mh-sr-heading {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
   Archive / shop header
   --------------------------------------------------------------------------- */

.woocommerce-products-header,
.ast-archive-description {
	position: relative;
	margin: 0 0 1.75rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--mh-line);
	border-radius: var(--mh-radius);
	/* One quiet teal wash. Enough to lift the header off the page without
	   turning it into a second banner. */
	background:
		radial-gradient(620px circle at 50% 0%, rgba(42, 169, 192, 0.10), transparent 65%),
		var(--mh-surface);
	box-shadow: none;
	overflow: hidden;
	text-align: center;
}

/* No left accent bar: with the title centred an edge on one side reads as a
   mistake rather than a detail. */
.woocommerce-products-header::before,
.ast-archive-description::before {
	display: none;
}

.woocommerce-products-header__title,
.ast-archive-description .ast-archive-title {
	margin: 0;
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--mh-ink);
	text-align: center;
}

/* The category description stays in the database — Rank Math still uses it for
   the meta description — it is just not printed in this header. */
.woocommerce-products-header .term-description,
.woocommerce-products-header__title + p,
.ast-archive-description .ast-archive-description-inner,
.ast-archive-description p {
	display: none;
}

.woocommerce-breadcrumb {
	margin: 0 0 0.4rem !important;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	color: var(--mh-muted);
}

.woocommerce-breadcrumb a {
	color: var(--mh-muted);
	text-decoration: none;
	transition: color 0.16s var(--mh-ease);
}

.woocommerce-breadcrumb a:hover {
	color: var(--mh-primary);
}

/* The separator Woo prints between crumbs. */
.woocommerce-breadcrumb {
	word-spacing: 0.15em;
}

/* Result count sits inside the header block on archives, so give it room. */
.woocommerce-products-header + .woocommerce-result-count,
.ast-archive-description + .woocommerce-result-count {
	margin-top: 0;
}

/* ---------------------------------------------------------------------------
   Service cards
   --------------------------------------------------------------------------- */

.woocommerce ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0 0 1rem;
	border: 1px solid var(--mh-line);
	border-radius: var(--mh-radius);
	background: var(--mh-surface);
	box-shadow: var(--mh-shadow);
	overflow: hidden;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	border-color: var(--mh-primary-line);
	box-shadow: var(--mh-shadow-hover);
}

/* A shorter image band keeps the card compact — with 4/3 the cards ran to
   over 600px tall and the grid felt sparse. */
.woocommerce ul.products li.product a img {
	margin: 0 0 0.85rem;
	border-radius: 0;
	background: var(--mh-surface-alt);
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* The placeholder is line art, not a photo — let it breathe rather than crop. */
.woocommerce ul.products li.product a img.mh-placeholder {
	object-fit: contain;
	padding: 1.1rem;
}

/* Dark theme fixes for elements Astra and WooCommerce leave light. */
.woocommerce ul.products li.product:hover {
	background: var(--mh-surface-hi);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce-tabs .wc-tab {
	background: var(--mh-surface);
	border-color: var(--mh-line);
	color: var(--mh-body);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border-bottom-color: var(--mh-line);
}

.woocommerce .quantity .qty,
.woocommerce #coupon_code,
.woocommerce .select2-container .select2-selection--single,
.woocommerce select,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce textarea {
	background: var(--mh-surface-alt);
	border: 1px solid var(--mh-line-strong);
	color: var(--mh-ink);
}

.woocommerce input::placeholder,
.woocommerce textarea::placeholder {
	color: var(--mh-muted);
}

/* Cart, checkout and order tables. */
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th,
.woocommerce .cart_totals table,
.woocommerce-checkout #order_review,
.woocommerce ul.order_details {
	background: var(--mh-surface);
	border-color: var(--mh-line);
	color: var(--mh-body);
}

.woocommerce table.shop_table tbody tr:hover td {
	background: var(--mh-surface-hi);
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout .woocommerce-checkout-payment,
.woocommerce-checkout #payment {
	background: var(--mh-surface) !important;
	border: 1px solid var(--mh-line);
	border-radius: var(--mh-radius);
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--mh-surface-alt) !important;
	color: var(--mh-body);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--mh-surface-alt) !important;
}

/* Star ratings keep their amber, but the empty state needs to be visible. */
.woocommerce .star-rating::before {
	color: var(--mh-line-strong);
}

/* --- Shop sorting dropdown --------------------------------------------
   Astra sets `appearance: none` on this select but leaves the background
   transparent, so the browser painted its own white popup behind light option
   text — unreadable. The select needs a real background, and the options need
   one explicitly: they do not inherit the select's. */

.woocommerce .woocommerce-ordering {
	margin-bottom: 1.5rem;
}

.woocommerce .woocommerce-ordering select,
.woocommerce .woocommerce-ordering select.orderby,
select.orderby {
	appearance: none;
	-webkit-appearance: none;
	padding: 0.55rem 2.4rem 0.55rem 0.9rem !important;
	border: 1px solid var(--mh-line-strong) !important;
	border-radius: 8px !important;
	background-color: var(--mh-surface) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232aa9c0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.7rem center;
	background-size: 15px 15px;
	color: var(--mh-ink) !important;
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color 0.16s var(--mh-ease), box-shadow 0.16s var(--mh-ease);
}

.woocommerce .woocommerce-ordering select:hover,
select.orderby:hover {
	border-color: var(--mh-primary) !important;
}

.woocommerce .woocommerce-ordering select:focus,
select.orderby:focus {
	outline: none;
	border-color: var(--mh-primary) !important;
	box-shadow: 0 0 0 3px rgba(42, 169, 192, 0.18);
}

/* The open list. Options do not inherit the select's colours, so set both
   here or the popup falls back to the browser's white. */
select option,
.woocommerce select option,
select.orderby option {
	background-color: #152329;
	color: #eef6f8;
}

select option:checked,
select option:hover,
select.orderby option:checked {
	background-color: #0e7490;
	color: #fff;
}

/* Native controls follow the page, not the OS. */
select,
input,
textarea {
	color-scheme: dark;
}

.woocommerce .woocommerce-result-count {
	margin-bottom: 1.5rem;
	font-size: 0.88rem;
	color: var(--mh-muted);
}

/* Astra's mini-cart drawer. */
.astra-cart-drawer,
.astra-cart-drawer-content,
.ast-site-header-cart .widget_shopping_cart {
	background: var(--mh-surface) !important;
	color: var(--mh-body);
}

.ast-site-header-cart .widget_shopping_cart .cart_list li {
	border-color: var(--mh-line);
}

/* --- Contrast fixes found by measuring, not by eye -------------------- */

/* `code` inherited a light chip from Astra: 1.76:1 against dark text. */
code,
kbd,
tt,
var,
pre {
	background: var(--mh-surface-alt);
	border: 1px solid var(--mh-line);
	border-radius: 6px;
	padding: 0.1em 0.4em;
	/* The mid violet only reached 4.1:1 on this fill; the light one clears AA. */
	color: var(--mh-primary-dark);
	font-size: 0.92em;
}

pre {
	padding: 1rem;
	overflow-x: auto;
}

pre code {
	border: 0;
	padding: 0;
	background: none;
}

/* Product tabs sat at 2.31:1. */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--mh-body) !important;
	font-weight: 600;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--mh-ink) !important;
}

/* Breadcrumb links were 4.3:1 — just under AA. */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a,
.ast-breadcrumbs-inner a {
	color: var(--mh-body) !important;
}

.woocommerce-breadcrumb a:hover {
	color: var(--mh-primary) !important;
}

/* White text needs the deeper violet underneath it. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,
.ast-below-header-bar .main-header-menu > .menu-item:hover > .menu-link,
.ast-below-header-bar .main-header-menu > .current-menu-item > .menu-link,
.ast-below-header-bar .main-header-menu > .current-menu-ancestor > .menu-link,
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.mh-search button,
.mh-auth__submit .button {
	background-color: var(--mh-primary-solid) !important;
	border-color: var(--mh-primary-solid) !important;
	color: #fff !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.mh-search button:hover,
.mh-auth__submit .button:hover {
	background-color: var(--mh-primary-solid-hover) !important;
	border-color: var(--mh-primary-solid-hover) !important;
	color: #fff !important;
}

/* Off-canvas mobile drawer.
   Astra paints the open state with `.ast-mobile-popup-drawer.active
   .ast-mobile-popup-inner { background:#fff }` — three classes deep. A
   two-class selector loses, and the drawer opened white behind light text. */
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner,
.ast-mobile-popup-drawer.show .ast-mobile-popup-inner {
	background: var(--mh-surface) !important;
}

.ast-mobile-popup-drawer .ast-mobile-popup-header,
.ast-mobile-popup-drawer .ast-mobile-popup-content {
	background: transparent;
}

.ast-mobile-popup-drawer .menu-item a,
.ast-mobile-popup-drawer .menu-link {
	color: var(--mh-body) !important;
	border-color: var(--mh-line) !important;
}

.ast-mobile-popup-drawer .menu-item a:hover,
.ast-mobile-popup-drawer .menu-item.current-menu-item > a {
	color: var(--mh-primary) !important;
}

/* Close button and the sub-menu toggle arrows. */
.ast-mobile-popup-drawer .menu-toggle-close,
.ast-mobile-popup-drawer .ast-menu-toggle {
	color: var(--mh-ink) !important;
}

.ast-mobile-popup-drawer .ast-mobile-popup-overlay {
	background: rgba(0, 0, 0, 0.6);
}

/* Astra prints its own category line on each card. The storefront plugin
   already prints one, better placed and styled — and Astra's carries no
   horizontal padding, so it sat 16px left of everything else in the card.
   Hide the duplicate rather than align it. */
.woocommerce ul.products li.product .ast-woo-product-category {
	display: none;
}

/* Astra also adds its own "Sale!" chip. Ours shows the actual percentage, so
   the word-only one is redundant — two sale markers on one card is noise. */
.woocommerce ul.products li.product .ast-on-card-button.ast-onsale-card,
.ast-onsale-card {
	display: none !important;
}

/* Astra pins the sale flash to top/right with its own more specific rule,
   which pushed our badge 5px outside the card and the overflow clipped it. */
.woocommerce ul.products li.product span.onsale,
.woocommerce ul.products li.product .onsale,
.woocommerce.ast-woo-shop-archive ul.products li.product .onsale {
	top: 10px !important;
	left: 10px !important;
	right: auto !important;
	bottom: auto !important;
	transform: none !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0 1rem;
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mh-ink);
}

.woocommerce ul.products li.product .price {
	display: block;
	padding: 0 1rem;
	margin-top: auto;
	color: var(--mh-ink);
	font-size: 1.1rem;
	font-weight: 700;
}

.woocommerce ul.products li.product .star-rating {
	margin: 0 1rem 0.5rem;
	font-size: 0.8em;
	color: #f0a500;
}

/* Centred, and wide enough to read as the card's main action.
   Astra sets its own margin on this button, so the auto sides need weight or
   the button stays pinned to the left edge. */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button {
	display: block;
	width: calc(100% - 2rem);
	margin: 0.85rem auto 0 !important;
	padding: 0.6rem 1rem !important;
	border-radius: 8px !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	text-align: center;
}

/* ---------------------------------------------------------------------------
   Single service page
   --------------------------------------------------------------------------- */

.woocommerce div.product .summary.entry-summary {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.woocommerce div.product .product_title {
	font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.woocommerce div.product p.price {
	color: var(--mh-ink);
	font-size: 1.7rem;
	font-weight: 700;
}

.mh-delivery {
	display: inline-flex;
	align-items: center;
	margin: 0.5rem 0 0.25rem;
	padding: 0.28rem 0.7rem;
	border: 1px solid var(--mh-primary-line);
	border-radius: 999px;
	background: var(--mh-primary-soft);
	color: var(--mh-primary-dark);
	font-size: 0.8rem;
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Device details form
   --------------------------------------------------------------------------- */

.mh-order-fields {
	margin: 1.5rem 0;
	padding: 1.35rem;
	border: 1px solid var(--mh-line);
	border-radius: var(--mh-radius);
	background: var(--mh-surface-alt);
}

.mh-order-fields__title {
	margin: 0 0 1rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--mh-ink);
}

.mh-field {
	margin-bottom: 0.9rem;
}

.mh-field:last-child {
	margin-bottom: 0;
}

.mh-field label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--mh-ink);
}

.mh-field .mh-required {
	color: #d63638;
}

.mh-field input[type="text"],
.mh-field input[type="tel"],
.mh-field select,
.mh-field textarea {
	width: 100%;
	padding: 0.62rem 0.8rem;
	border: 1px solid var(--mh-line-strong);
	border-radius: 8px;
	background: var(--mh-surface);
	font-size: 0.95rem;
	color: var(--mh-ink);
}

.mh-field input:focus,
.mh-field select:focus,
.mh-field textarea:focus {
	outline: none;
	border-color: var(--mh-primary);
	box-shadow: 0 0 0 3px rgba(42, 169, 192, 0.18);
}

.mh-field__hint {
	display: block;
	margin-top: 0.28rem;
	font-size: 0.78rem;
	color: var(--mh-muted);
}

.mh-field input[name="mh_imei"] {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: 0.06em;
}

/* ---------------------------------------------------------------------------
   My Account
   ---------------------------------------------------------------------------
   WooCommerce ships this page as bare lists and forms. Two states to cover:
   signed out (login + register side by side) and signed in (nav rail beside a
   content panel).
   --------------------------------------------------------------------------- */

.woocommerce-account .entry-title,
.woocommerce-account .page-title {
	margin-bottom: 1.75rem;
}

/* --- Signed in: rail + panel ------------------------------------------ */

/* Only the wrapper that actually holds the account rail becomes a grid — the
   header mini-cart also carries a `.woocommerce` class and must be left alone.
   Rail and panel are placed explicitly so neither source order nor WooCommerce's
   floats can swap them. */
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 1.75rem;
	align-items: start;
}

.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation {
	grid-column: 1;
	grid-row: 1;
	width: auto !important;
	max-width: none;
	float: none !important;
	margin: 0 !important;
	padding: 0.5rem;
	border: 1px solid var(--mh-line);
	border-radius: var(--mh-radius);
	background: var(--mh-surface);
	box-shadow: var(--mh-shadow);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.65rem 0.8rem;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--mh-body) !important;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--mh-surface-alt);
	color: var(--mh-primary-dark) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--mh-primary);
	color: #fff !important;
}

/* Icon per item, tinted by the link colour via a mask. */
.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.woocommerce-MyAccount-navigation-link--dashboard a::before {
	-webkit-mask-image: 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='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
	mask-image: 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='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--orders a::before {
	-webkit-mask-image: 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%3Cpath d='M6 2h12l2 6H4z'/%3E%3Cpath d='M5 8v12h14V8'/%3E%3Cpath d='M9 12h6'/%3E%3C/svg%3E");
	mask-image: 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%3Cpath d='M6 2h12l2 6H4z'/%3E%3Cpath d='M5 8v12h14V8'/%3E%3Cpath d='M9 12h6'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--downloads a::before {
	-webkit-mask-image: 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%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E");
	mask-image: 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%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-address a::before {
	-webkit-mask-image: 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%3Cpath d='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
	mask-image: 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%3Cpath d='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-account a::before {
	-webkit-mask-image: 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%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5'/%3E%3C/svg%3E");
	mask-image: 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%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5'/%3E%3C/svg%3E");
}

/* Statement is our own endpoint, so it needs its own icon — without one the
   mask renders as an empty square. */
.woocommerce-MyAccount-navigation-link--statement a::before {
	-webkit-mask-image: 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%3Cpath d='M6 2h9l5 5v15H6z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E");
	mask-image: 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%3Cpath d='M6 2h9l5 5v15H6z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--customer-logout a::before {
	-webkit-mask-image: 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%3Cpath d='M10 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M16 16l4-4-4-4'/%3E%3Cpath d='M20 12H10'/%3E%3C/svg%3E");
	mask-image: 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%3Cpath d='M10 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M16 16l4-4-4-4'/%3E%3Cpath d='M20 12H10'/%3E%3C/svg%3E");
}

/* --- Content panel ---------------------------------------------------- */

.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
	grid-column: 2;
	grid-row: 1;
	width: auto !important;
	max-width: none;
	float: none !important;
	margin: 0 !important;
	padding: 1.6rem;
	border: 1px solid var(--mh-line);
	border-radius: var(--mh-radius);
	background: var(--mh-surface);
	box-shadow: var(--mh-shadow);
}

.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

/* --- Dashboard stat cards --------------------------------------------- */

.mh-dash__greeting {
	margin: 0 0 1.25rem;
	font-size: 1.1rem;
	color: var(--mh-body);
}

.mh-dash__greeting strong {
	color: var(--mh-ink);
}

.mh-dash__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.9rem;
	margin-bottom: 1.5rem;
}

.mh-stat {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 1.1rem 1.15rem;
	border: 1px solid var(--mh-line);
	border-radius: var(--mh-radius);
	background: var(--mh-surface-alt);
}

.mh-stat__label {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mh-muted);
}

.mh-stat__value {
	font-family: var(--mh-font-heading);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--mh-ink);
	font-variant-numeric: tabular-nums;
}

/* Woo wraps prices in its own span; keep it from re-styling the figure. */
.mh-stat__value .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.mh-stat__link {
	margin-top: 0.15rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--mh-primary);
	text-decoration: none;
}

.mh-stat__link:hover {
	color: var(--mh-primary-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mh-stat__note {
	font-size: 0.75rem;
	color: var(--mh-muted);
}

/* Balance is the one a customer looks for first. */
.mh-stat--balance {
	border-color: var(--mh-primary-line);
	background:
		radial-gradient(340px circle at 100% 0%, rgba(42, 169, 192, 0.12), transparent 70%),
		var(--mh-surface-alt);
}

.mh-stat--balance .mh-stat__value {
	color: var(--mh-primary-dark);
}

.mh-dash__intro {
	margin: 0;
	font-size: 0.92rem;
	color: var(--mh-body);
}

/* --- Top-up request form ------------------------------------------------ */

.mh-topup-form {
	margin: 1.5rem 0 2rem;
}

.mh-topup-form__fields {
	padding: 1.35rem;
	border: 1px solid var(--mh-line);
	border-radius: var(--mh-radius);
	background: var(--mh-surface-alt);
}

.mh-topup-form input[type="number"],
.mh-topup-form input[type="text"],
.mh-topup-form input[type="file"] {
	width: 100%;
	padding: 0.62rem 0.85rem;
	border: 1px solid var(--mh-line-strong);
	border-radius: 8px;
	background: var(--mh-surface);
	font-size: 0.95rem;
	color: var(--mh-ink);
}

.mh-topup-form input[type="file"] {
	padding: 0.5rem;
	cursor: pointer;
}

.mh-topup-form input:focus {
	outline: none;
	border-color: var(--mh-primary);
	box-shadow: 0 0 0 3px rgba(42, 169, 192, 0.18);
}

.mh-topup-form .button {
	margin-top: 0.4rem;
}

.mh-topup-form__heading {
	margin: 2rem 0 0.9rem;
	font-size: 1.05rem;
}

.mh-topup__msg {
	margin-bottom: 1.1rem;
	padding: 0.9rem 1.1rem;
	border-radius: 8px;
	border-left: 3px solid;
	font-size: 0.92rem;
}

.mh-topup__msg--ok {
	border-left-color: #4ade80;
	background: rgba(74, 222, 128, 0.10);
	color: var(--mh-ink);
}

.mh-topup__msg--bad {
	border-left-color: #f87171;
	background: rgba(248, 113, 113, 0.10);
	color: var(--mh-ink);
}

.mh-topup-table {
	width: 100%;
	border: 1px solid var(--mh-line);
	border-radius: var(--mh-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.mh-topup-table th,
.mh-topup-table td {
	padding: 0.7rem 0.9rem;
}

.mh-topup-status {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
}

.mh-topup-status--pending {
	background: rgba(250, 204, 21, 0.14);
	color: #fbbf24;
}

.mh-topup-status--approved {
	background: rgba(74, 222, 128, 0.14);
	color: #4ade80;
}

.mh-topup-status--rejected {
	background: rgba(248, 113, 113, 0.14);
	color: #f87171;
}

.mh-topup-reason {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.78rem;
	color: var(--mh-muted);
}

/* --- Not-enough-balance panel at checkout ------------------------------- */

.mh-topup {
	margin: 0 0 1.5rem;
	padding: 1.25rem 1.35rem;
	border: 1px solid var(--mh-line-strong);
	border-radius: var(--mh-radius);
	background: var(--mh-surface-alt);
}

.mh-topup__title {
	margin: 0 0 0.8rem;
	font-size: 1.05rem;
	color: var(--mh-ink);
}

.mh-topup__figures {
	width: 100%;
	margin: 0 0 1rem;
	border: 0;
	font-size: 0.92rem;
}

.mh-topup__figures td {
	padding: 0.3rem 0;
	border: 0;
	color: var(--mh-body);
}

.mh-topup__figures td:last-child {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.mh-topup__short td {
	padding-top: 0.6rem !important;
	border-top: 1px solid var(--mh-line) !important;
	font-weight: 700;
	color: var(--mh-ink) !important;
}

/* Email is kept in the form for WooCommerce but never shown — the account
   already has it. */
.mh-hidden-field {
	display: none !important;
}

/* --- Unlock result on the customer's order page ------------------------ */

.mh-unlock-result {
	margin: 1.75rem 0;
	padding: 1.25rem 1.35rem;
	border: 1px solid var(--mh-primary-line);
	border-radius: var(--mh-radius);
	background:
		radial-gradient(420px circle at 100% 0%, rgba(42, 169, 192, 0.12), transparent 70%),
		var(--mh-surface-alt);
}

.mh-unlock-result h2 {
	margin: 0 0 0.75rem;
	font-size: 1.05rem;
}

/* Codes are read character by character and often copied by hand, so a
   monospace face and generous spacing matter more than looking tidy. */
.mh-unlock-result__body {
	margin: 0;
	padding: 0.9rem 1rem;
	border: 1px solid var(--mh-line-strong);
	border-radius: 8px;
	background: var(--mh-canvas);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.95rem;
	line-height: 1.65;
	letter-spacing: 0.03em;
	color: var(--mh-ink);
	white-space: pre-wrap;
	word-break: break-word;
	user-select: all;
}

/* --- Customer notes on the order page ---------------------------------- */

.woocommerce-customer-details,
.woocommerce-order-details {
	margin-bottom: 1.75rem;
}

.woocommerce-OrderUpdates {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-OrderUpdates-item {
	margin: 0 0 0.75rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--mh-line);
	border-left: 3px solid var(--mh-primary);
	border-radius: 8px;
	background: var(--mh-surface-alt);
	list-style: none;
}

.woocommerce-OrderUpdate-meta {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.75rem;
	color: var(--mh-muted);
}

.woocommerce-OrderUpdate-description {
	margin: 0;
	color: var(--mh-body);
}

.woocommerce-OrderUpdate-description p:last-child {
	margin-bottom: 0;
}

/* --- Statement --------------------------------------------------------- */

.mh-statement__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.35rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--mh-primary-line);
	border-radius: var(--mh-radius);
	background:
		radial-gradient(420px circle at 100% 0%, rgba(42, 169, 192, 0.12), transparent 70%),
		var(--mh-surface-alt);
}

.mh-statement__label {
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mh-muted);
}

.mh-statement__balance {
	display: block;
	margin-top: 0.2rem;
	font-family: var(--mh-font-heading);
	font-size: 1.7rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--mh-primary-dark);
	font-variant-numeric: tabular-nums;
}

.mh-statement__balance .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.mh-statement__empty {
	margin: 0;
	padding: 1.5rem;
	border: 1px dashed var(--mh-line-strong);
	border-radius: var(--mh-radius);
	text-align: center;
	color: var(--mh-muted);
}

.mh-statement__table {
	width: 100%;
	margin: 0;
}

.mh-statement__table th,
.mh-statement__table td {
	padding: 0.75rem 0.9rem;
	vertical-align: top;
}

.mh-statement__table .mh-num {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.mh-statement__time {
	display: block;
	font-size: 0.75rem;
	color: var(--mh-muted);
}

.mh-statement__reason {
	display: block;
	font-weight: 600;
	color: var(--mh-ink);
}

.mh-statement__note {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.8rem;
	color: var(--mh-muted);
}

.mh-statement__note a {
	color: var(--mh-primary);
}

/* Money in and money out have to be distinguishable at a glance — colour alone
   would fail for anyone who cannot see the difference, so the sign carries it
   too. */
.mh-statement__amount {
	font-weight: 700;
	white-space: nowrap;
}

.mh-statement__amount--credit,
.mh-statement__amount--credit .woocommerce-Price-amount {
	color: #4ade80;
}

.mh-statement__amount--debit,
.mh-statement__amount--debit .woocommerce-Price-amount {
	color: var(--mh-body);
}

.mh-statement__pager {
	margin-top: 1.25rem;
}

@media (max-width: 600px) {
	.mh-statement__table thead {
		display: none;
	}

	.mh-statement__table,
	.mh-statement__table tbody,
	.mh-statement__table tr,
	.mh-statement__table td {
		display: block;
		width: 100%;
	}

	.mh-statement__table tr {
		margin-bottom: 0.75rem;
		border: 1px solid var(--mh-line);
		border-radius: var(--mh-radius);
	}

	.mh-statement__table td {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		text-align: right;
	}

	.mh-statement__table td::before {
		content: attr(data-title);
		font-size: 0.75rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--mh-muted);
		text-align: left;
	}

	.mh-statement__table .mh-num {
		text-align: right;
	}
}

@media (max-width: 782px) {
	.mh-dash__stats {
		grid-template-columns: 1fr;
	}
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	margin-top: 0;
	font-size: 1.1rem;
}

/* --- Signed out: one form at a time ------------------------------------
   Sign in and registration are separate screens (see the form-login.php
   override), so this is a single centred card rather than two columns. */

.mh-auth {
	display: flex;
	justify-content: center;
	padding: 1rem 0 2.5rem;
}

.mh-auth__card {
	width: 100%;
	max-width: 440px;
	padding: 2rem;
	border: 1px solid var(--mh-line);
	border-radius: var(--mh-radius-lg);
	background: var(--mh-surface);
	box-shadow: 0 8px 30px rgba(26, 21, 35, 0.06);
}

.mh-auth__title {
	margin: 0 0 0.35rem;
	font-size: 1.4rem;
}

.mh-auth__sub {
	margin: 0 0 1.5rem;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--mh-muted);
}

.mh-auth form.login,
.mh-auth form.register {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.mh-auth__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
}

.mh-auth__lost {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--mh-primary);
	text-decoration: none;
}

.mh-auth__lost:hover {
	text-decoration: underline;
}

.mh-auth__submit {
	margin: 0 !important;
}

.mh-auth__submit .button {
	width: 100%;
	padding: 0.8rem 1rem !important;
	border-radius: 8px !important;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
}

.mh-auth__note {
	margin: 0 0 1.25rem;
	font-size: 0.85rem;
	color: var(--mh-muted);
}

.mh-auth__switch {
	margin: 1.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--mh-line);
	text-align: center;
	font-size: 0.9rem;
	color: var(--mh-muted);
}

.mh-auth__switch a {
	font-weight: 700;
	color: var(--mh-primary);
	text-decoration: none;
}

.mh-auth__switch a:hover {
	text-decoration: underline;
}

/* The account page title is redundant above a card that says "Sign in". */
.woocommerce-account:not(.logged-in) .entry-header {
	display: none;
}

/* --- Shared form styling ---------------------------------------------- */

.woocommerce form .form-row {
	margin-bottom: 1rem;
	padding: 0;
}

.woocommerce form .form-row label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--mh-ink);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .woocommerce-Input {
	width: 100%;
	padding: 0.62rem 0.85rem;
	border: 1px solid var(--mh-line-strong);
	border-radius: 8px;
	background: var(--mh-surface);
	font-size: 0.93rem;
	color: var(--mh-ink);
	line-height: 1.4;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce .woocommerce-Input:focus {
	outline: none;
	border-color: var(--mh-primary);
	box-shadow: 0 0 0 3px rgba(42, 169, 192, 0.16);
}

.woocommerce form .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.85rem;
	color: var(--mh-muted);
}

.woocommerce .woocommerce-privacy-policy-text p,
.woocommerce form .form-row .required {
	font-size: 0.82rem;
	color: var(--mh-muted);
}

.woocommerce-LostPassword {
	margin: 0.75rem 0 0;
	font-size: 0.85rem;
}

/* --- Notices ---------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: 0;
	border-left: 3px solid var(--mh-primary);
	border-radius: 8px;
	background: var(--mh-primary-soft);
	color: var(--mh-ink);
}

.woocommerce-error {
	border-left-color: #f87171;
	background: rgba(248, 113, 113, 0.10);
}

/* WooCommerce colours its own icon #b81c23 — near-invisible on a dark notice. */
.woocommerce-error::before {
	color: #f87171;
}

/* --- Orders table ------------------------------------------------------ */

.woocommerce-account .woocommerce-orders-table,
.woocommerce table.shop_table {
	border: 1px solid var(--mh-line);
	border-radius: var(--mh-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce table.shop_table thead th {
	background: var(--mh-surface-alt);
	font-size: 0.82rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--mh-muted);
}

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 900px) {
	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		grid-template-columns: 1fr;
	}

	/* Stack rail above panel on narrow screens. */
	.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation {
		grid-column: 1;
		grid-row: 1;
	}

	.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
		grid-column: 1;
		grid-row: 2;
	}
}

/* ---------------------------------------------------------------------------
   Content blocks — plain, no card chrome
   --------------------------------------------------------------------------- */

.entry-content > h2 {
	margin-top: 2.75rem;
	margin-bottom: 1rem;
	font-size: clamp(1.35rem, 2.4vw, 1.8rem);
}

.entry-content > h3 {
	margin-top: 1.75rem;
	font-size: 1.1rem;
}

.wp-block-columns .wp-block-column {
	padding: 1.4rem;
	border: 1px solid var(--mh-line);
	border-radius: var(--mh-radius);
	background: var(--mh-surface);
	box-shadow: none;
}

.wp-block-columns .wp-block-column h3 {
	margin-top: 0;
	font-size: 1.02rem;
}

.wp-block-columns .wp-block-column p {
	margin-bottom: 0;
	font-size: 0.92rem;
	color: var(--mh-body);
}

.wp-block-table table {
	border-radius: var(--mh-radius);
	overflow: hidden;
	background: var(--mh-surface);
	border: 1px solid var(--mh-line);
}

.wp-block-table thead th {
	background: var(--mh-primary-soft);
	color: var(--mh-ink);
}

.wp-block-table td,
.wp-block-table th {
	border-color: var(--mh-line);
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */

.site-footer {
	background: var(--mh-surface) !important;
	border-top: 1px solid var(--mh-line);
}

.site-footer::before {
	display: none;
}

.mh-footer {
	padding: 3rem 0 0;
}

.mh-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 2.5rem;
	padding-bottom: 2.5rem;
}

/* --- Brand column --- */

.mh-footer__logo {
	display: inline-block;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--mh-ink);
	text-decoration: none;
}

.mh-footer__logo:hover {
	color: var(--mh-primary);
}

.mh-footer .custom-logo-link img {
	max-height: 64px;
	width: auto;
	max-width: 170px;
}

.mh-footer__tagline {
	margin: 0.75rem 0 0;
	max-width: 22rem;
	font-size: 0.9rem;
	line-height: 1.65;
	color: var(--mh-muted);
}

/* --- Link columns --- */

.mh-footer__heading {
	margin: 0 0 0.9rem;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--mh-ink);
}

.mh-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mh-footer__links li {
	margin: 0 0 0.55rem;
	list-style: none;
}

.mh-footer__links li:last-child {
	margin-bottom: 0;
}

.mh-footer__links a {
	font-size: 0.88rem;
	color: var(--mh-muted);
	text-decoration: none;
	transition: color 0.16s ease;
}

.mh-footer__links a:hover,
.mh-footer__links a:focus-visible {
	color: var(--mh-primary);
}

/* --- Bottom bar --- */

.mh-footer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 1.15rem 0;
	border-top: 1px solid var(--mh-line);
}

.mh-footer__copy {
	margin: 0;
	font-size: 0.82rem;
	color: var(--mh-muted);
}

.mh-footer__pay {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.mh-footer__pay-label {
	font-size: 0.78rem;
	color: var(--mh-muted);
}

.mh-footer__pay-item {
	padding: 0.22rem 0.6rem;
	border: 1px solid var(--mh-line);
	border-radius: 6px;
	background: var(--mh-surface-alt);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--mh-body);
}

/* Astra's own copyright row is switched off in the footer builder; this hides
   the empty wrapper it can still leave behind. */
.site-below-footer-wrap:empty,
.ast-builder-grid-row-container:empty {
	display: none;
}

/* --- Floating WhatsApp button --- */

.mh-whatsapp {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 999;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
	transition: transform 0.18s ease;
}

.mh-whatsapp:hover,
.mh-whatsapp:focus-visible {
	transform: scale(1.06);
	color: #fff;
}

.mh-whatsapp svg {
	width: 30px;
	height: 30px;
}

@media (max-width: 992px) {
	.mh-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}

	.mh-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.mh-footer__grid {
		grid-template-columns: 1fr;
	}

	.mh-footer__bar {
		justify-content: flex-start;
	}

	.mh-whatsapp {
		right: 14px;
		bottom: 14px;
		width: 48px;
		height: 48px;
	}
}

/* ---------------------------------------------------------------------------
   Motion preferences
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product,
	.main-header-menu > .menu-item > .menu-link::after {
		transition: none;
	}

	.woocommerce ul.products li.product:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   No prefers-color-scheme blocks here, deliberately.

   The site is dark for everyone, so there is nothing to switch on. An earlier
   revision tried driving dark styling from the OS media query while Astra's own
   palette stayed light; the two fought and the result was invisible white-on-
   white decoration for anyone with dark mode enabled. Astra's palette is now
   dark at the theme level, which is why this stylesheet can stay unconditional.
   --------------------------------------------------------------------------- */