/* Mufaddal Storefront components. Every rule is scoped to a .mi-* component; colours and fonts come from the
   Elementor kit variables (--mi-*), with fallbacks. Breakpoints match Elementor: tablet ≤1024px, mobile ≤767px. */

/* Large monitors (1600px and wider): a wider content area, so less empty space either side. The Elementor kit
   variable --mi-container (1240px; every section, the header and the footer use it) is raised here, and Astra's own
   container (product, cart, checkout and account pages) follows so those pages line up with the header and footer
   (Astra's width includes its 20px side padding). Below 1600px nothing changes. */
@media (min-width: 1600px) {
	:root:root {
		--mi-container: 1400px;
	}

	body .ast-container,
	body.ast-woo-shop-archive .site-content > .ast-container {
		max-width: 1440px;
	}
}

.mi-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Spam-guard honeypot (includes/spam-guard.php): off-screen rather than display:none, which some bots skip. */
.mi-hp {
	position: absolute !important;
	left: -10000px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mi-ico {
	display: block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* ---- Header "All Categories" control ---------------------------------------------------------------- */

.mi-allcats {
	position: relative;
	flex: 1 1 auto;
	height: 100%;
}

/* The tab fills the nav row's full height so the homepage sidebar starts exactly at its bottom edge. */
[data-elementor-type="header"] .elementor-widget-shortcode:has(.mi-allcats),
[data-elementor-type="header"] .elementor-widget-shortcode:has(.mi-allcats) > .elementor-shortcode {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: 100%;
}

.mi-allcats .mi-allcats__btn {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	height: 100%;
	min-height: 48px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: var(--mi-radius, 8px) var(--mi-radius, 8px) 0 0;
	background: var(--mi-primary, #226480);
	color: #fff;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.2s;
}

.mi-allcats .mi-allcats__btn:hover,
.mi-allcats .mi-allcats__btn:focus,
.mi-allcats.is-open .mi-allcats__btn {
	background: var(--mi-primary-dark, #174a60);
	color: #fff;
}

.mi-allcats .mi-allcats__btn:focus-visible {
	outline: 3px solid var(--mi-coral, #bf4d36);
	outline-offset: 2px;
}

.mi-allcats__label {
	flex: 1;
}

.mi-allcats__chev {
	width: 18px;
	height: 18px;
	transition: transform 0.2s;
}

.mi-allcats.is-open .mi-allcats__chev {
	transform: rotate(180deg);
}

.mi-allcats[data-mode="skip"] .mi-allcats__chev {
	display: none;
}

/* ---- Category list ------------------------------------------------------------------------------------ */

.mi-catmenu {
	font-family: var(--mi-font-body, Inter), sans-serif;
	background: #fff;
}

.mi-catmenu__nav {
	position: relative; /* containing block for the desktop flyouts */
	display: flex;
	flex-direction: column;
	height: 100%;
}

.mi-catmenu__list {
	margin: 0;
	padding: 6px 8px 0;
	list-style: none;
}

.mi-catmenu__item {
	position: static;
	margin: 0;
	border-bottom: 1px solid #e9eff2;
}

.mi-catmenu__item--services {
	margin-top: 6px;
	border-top: 1px solid var(--mi-border, #dce5e8);
	border-bottom: 0;
	padding-top: 2px;
}

.mi-catmenu__row {
	display: flex;
	align-items: stretch;
	border-radius: 6px;
	transition: background-color 0.15s;
}

.mi-catmenu .mi-catmenu__link {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 12px;
	min-width: 0;
	min-height: 43px;
	padding: 0 4px 0 10px;
	border-radius: 6px 0 0 6px;
	color: var(--mi-heading, #13222b);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.25;
	text-decoration: none;
}

.mi-catmenu__icon {
	width: 20px;
	height: 20px;
	color: var(--mi-primary, #226480);
}

.mi-catmenu__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mi-catmenu .mi-catmenu__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0 6px 6px 0;
	background: transparent;
	color: #66777f; /* ≥4.5:1 on white */
	cursor: pointer;
}

.mi-catmenu .mi-catmenu__toggle:hover,
.mi-catmenu .mi-catmenu__toggle:focus {
	background: transparent; /* not the kit's global button hover/focus fill */
	color: var(--mi-primary, #226480);
}

.mi-catmenu__chev {
	width: 16px;
	height: 16px;
	transition: transform 0.2s;
}

.mi-catmenu__row:hover,
.mi-catmenu__item.is-open > .mi-catmenu__row {
	background: rgba(34, 100, 128, 0.07);
	box-shadow: inset 3px 0 0 var(--mi-coral, #bf4d36);
}

.mi-catmenu__row:hover .mi-catmenu__link,
.mi-catmenu__item.is-open > .mi-catmenu__row .mi-catmenu__link,
.mi-catmenu__row:hover .mi-catmenu__toggle,
.mi-catmenu__item.is-open > .mi-catmenu__row .mi-catmenu__toggle {
	color: var(--mi-primary, #226480);
}

.mi-catmenu__item.is-open > .mi-catmenu__row .mi-catmenu__link {
	font-weight: 600;
}

.mi-catmenu .mi-catmenu__link:focus-visible,
.mi-catmenu__toggle:focus-visible,
.mi-catmenu .mi-catmenu__all:focus-visible,
.mi-catmenu .mi-catmenu__mega-all:focus-visible,
.mi-catmenu .mi-catmenu__children a:focus-visible,
.mi-catmenu .mi-catmenu__card:focus-visible {
	outline: 2px solid var(--mi-primary, #226480);
	outline-offset: -2px;
	position: relative;
	z-index: 1;
}

.mi-catmenu .mi-catmenu__all {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: auto;
	padding: 13px 16px 14px;
	color: var(--mi-primary, #226480);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.mi-catmenu .mi-catmenu__all:hover {
	color: var(--mi-coral, #bf4d36);
}

.mi-catmenu .mi-catmenu__all-arrow {
	width: 15px;
	height: 15px;
}

/* ---- Mega panel contents ------------------------------------------------------------------------------- */

.mi-catmenu__mega[hidden] {
	display: none !important;
}

.mi-catmenu__mega-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--mi-border, #dce5e8);
}

.mi-catmenu__mega-title {
	margin: 0;
	color: var(--mi-heading, #13222b);
	font-family: var(--mi-font-heading, "Plus Jakarta Sans"), sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
}

.mi-catmenu .mi-catmenu__mega-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--mi-coral, #bf4d36);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.mi-catmenu .mi-catmenu__mega-all:hover {
	color: var(--mi-primary, #226480);
	text-decoration: underline;
}

.mi-catmenu__children {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.mi-catmenu .mi-catmenu__children a {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--mi-border, #dce5e8);
	border-radius: 999px;
	color: var(--mi-heading, #13222b);
	font-size: 13px;
	text-decoration: none;
}

.mi-catmenu .mi-catmenu__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mi-catmenu .mi-catmenu__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	padding: 10px;
	border: 1px solid var(--mi-border, #dce5e8);
	border-radius: 8px;
	background: #fff;
	color: var(--mi-heading, #13222b);
	text-decoration: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.mi-catmenu .mi-catmenu__card:hover {
	border-color: var(--mi-primary, #226480);
	box-shadow: 0 8px 20px rgba(14, 42, 56, 0.08);
	color: var(--mi-primary, #226480);
}

.mi-catmenu .mi-catmenu__card-media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: 8px;
	border-radius: 6px;
	background: #f5f7f8;
	overflow: hidden;
}

.mi-catmenu .mi-catmenu__card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply; /* white product backgrounds blend into the tile */
}

.mi-catmenu .mi-catmenu__card-name {
	display: -webkit-box;
	overflow: hidden;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* ---- Desktop: homepage sidebar, header dropdown, flyout mega panels -------------------------------------- */

@media (min-width: 1025px) {
	.mi-catmenu--home {
		height: 100%;
		border: 1px solid var(--mi-border, #dce5e8);
		border-top: 0;
		border-radius: 0 0 var(--mi-radius, 8px) var(--mi-radius, 8px);
	}

	.mi-catmenu--dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 60;
		width: 100%;
		min-width: 260px;
		border: 1px solid var(--mi-border, #dce5e8);
		border-top: 0;
		border-radius: 0 0 var(--mi-radius, 8px) var(--mi-radius, 8px);
		box-shadow: 0 18px 40px rgba(14, 42, 56, 0.16);
	}

	.mi-catmenu__mega {
		position: absolute;
		top: -1px;
		left: 100%;
		z-index: 40;
		box-sizing: border-box;
		width: 640px;
		max-width: calc(100vw - 100% - 40px);
		min-height: calc(100% + 1px);
		padding: 24px 26px 26px;
		border: 1px solid var(--mi-border, #dce5e8);
		border-radius: 0 var(--mi-radius, 8px) var(--mi-radius, 8px) 0;
		background: #fff;
		box-shadow: 18px 18px 44px rgba(14, 42, 56, 0.18);
	}

	.mi-catmenu--home .mi-catmenu__mega {
		top: 0;
		min-height: 100%;
	}
}

/* ---- Below desktop: header dropdown under the header, accordion panels ----------------------------------- */

@media (max-width: 1024px) {
	.mi-catmenu--home {
		display: none;
	}

	/* The dropdown spans the header's nav row (position: relative), not the narrow control. */
	.mi-allcats,
	[data-elementor-type="header"] .elementor-widget-shortcode:has(.mi-allcats) {
		position: static;
	}

	.mi-allcats .mi-allcats__btn {
		gap: 10px;
		min-height: 46px;
		padding: 0 14px;
		border-radius: var(--mi-radius, 8px);
		font-size: 14px;
	}

	.mi-catmenu--dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 60;
		max-height: calc(100vh - 140px);
		max-height: calc(100dvh - 140px);
		overflow-y: auto;
		overscroll-behavior: contain;
		border-top: 1px solid var(--mi-border, #dce5e8);
		box-shadow: 0 24px 40px rgba(14, 42, 56, 0.2);
	}

	.mi-catmenu__list {
		padding: 4px 16px 0;
	}

	.mi-catmenu .mi-catmenu__link {
		min-height: 48px;
		font-size: 15px;
	}

	.mi-catmenu .mi-catmenu__toggle {
		width: 48px;
	}

	.mi-catmenu__item.is-open .mi-catmenu__chev {
		transform: rotate(90deg);
	}

	.mi-catmenu__mega {
		padding: 12px 4px 16px 42px;
	}

	.mi-catmenu__mega-head {
		margin-bottom: 12px;
		padding-bottom: 0;
		border-bottom: 0;
	}

	.mi-catmenu__mega-title {
		display: none; /* the open row above already names the category */
	}

	.mi-catmenu .mi-catmenu__cards {
		gap: 10px;
	}

	.mi-catmenu .mi-catmenu__card {
		gap: 6px;
		padding: 6px;
	}

	.mi-catmenu .mi-catmenu__card-name {
		font-size: 12px;
		font-weight: 500;
	}

	.mi-catmenu .mi-catmenu__all {
		justify-content: flex-start;
		padding: 14px 26px 18px;
	}
}

@media (max-width: 767px) {
	.mi-allcats .mi-allcats__btn {
		width: 46px;
		padding: 0;
		justify-content: center;
	}

	.mi-allcats .mi-allcats__label,
	.mi-allcats .mi-allcats__chev {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.mi-catmenu__mega {
		padding-left: 0;
	}
}

/* ---- Shop by category tiles ------------------------------------------------------------------------------ */

.mi-cattiles {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mi-cattiles .mi-cattile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	height: 100%;
	padding: 14px 14px 18px;
	border: 1px solid var(--mi-border, #dce5e8);
	border-radius: var(--mi-radius, 8px);
	background: #fff;
	color: var(--mi-heading, #13222b);
	font-family: var(--mi-font-body, Inter), sans-serif;
	text-align: center;
	text-decoration: none;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.mi-cattiles .mi-cattile:hover {
	border-color: var(--mi-primary, #226480);
	box-shadow: 0 10px 24px rgba(14, 42, 56, 0.08);
	transform: translateY(-2px);
	color: var(--mi-primary, #226480);
}

.mi-cattiles .mi-cattile:focus-visible {
	outline: 3px solid var(--mi-primary, #226480);
	outline-offset: 2px;
}

.mi-cattiles .mi-cattile__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	margin-bottom: 10px;
}

.mi-cattiles .mi-cattile__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.mi-cattiles .mi-cattile__fallback {
	width: 56px;
	height: 56px;
	color: var(--mi-primary, #226480);
}

.mi-cattiles .mi-cattile__name {
	font-family: var(--mi-font-heading, "Plus Jakarta Sans"), sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.mi-cattiles .mi-cattile__count {
	color: var(--mi-text, #4a5a63);
	font-size: 13px;
}

@media (max-width: 1024px) {
	.mi-cattiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.mi-cattiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.mi-cattiles .mi-cattile {
		padding: 10px 10px 14px;
	}

	.mi-cattiles .mi-cattile__name {
		font-size: 14px;
	}
}

/* ---- Header search with category selector ---------------------------------------------------------------- */

.mi-header-search .dgwt-wcas-search-wrapp {
	max-width: none;
	min-width: 0;
}

.mi-header-search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp {
	display: flex;
	align-items: stretch;
	padding: 0;
	border: 1px solid var(--mi-border, #dce5e8);
	border-radius: var(--mi-radius, 8px);
	background: #f5f7f8;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.mi-header-search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp:focus-within {
	border-color: var(--mi-primary, #226480);
	box-shadow: 0 0 0 3px rgba(34, 100, 128, 0.15);
	background: #fff;
}

.mi-header-search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 50px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: var(--mi-radius, 8px) 0 0 var(--mi-radius, 8px);
	background: transparent;
	box-shadow: none;
	color: var(--mi-heading, #13222b);
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 15px;
	outline: 0;
}

.mi-header-search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp .dgwt-wcas-ico-magnifier {
	display: none;
}

.mi-search-cat-wrap {
	position: relative;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin: 9px 0;
	border-left: 1px solid var(--mi-border, #dce5e8);
}

.mi-header-search .dgwt-wcas-search-wrapp select.mi-search-cat {
	height: 100%;
	max-width: 190px;
	margin: 0;
	padding: 0 36px 0 16px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--mi-text, #4a5a63);
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.mi-header-search .dgwt-wcas-search-wrapp select.mi-search-cat:focus-visible {
	outline: 2px solid var(--mi-primary, #226480);
	outline-offset: 2px;
	border-radius: 4px;
}

.mi-search-cat-chev {
	position: absolute;
	right: 12px;
	width: 16px;
	height: 16px;
	color: var(--mi-text, #4a5a63);
	pointer-events: none;
}

.mi-header-search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	flex-shrink: 0;
	width: 64px;
	min-width: 64px;
	height: auto;
	min-height: 50px;
	margin: -1px -1px -1px 0;
	padding: 0;
	border: 0;
	border-radius: 0 var(--mi-radius, 8px) var(--mi-radius, 8px) 0;
	background: var(--mi-coral, #bf4d36);
	color: #fff;
	transition: background-color 0.2s;
}

.mi-header-search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit:hover,
.mi-header-search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit:focus-visible {
	background: var(--mi-navy, #0e2a38);
}

.mi-header-search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit::before {
	display: none;
}

.mi-header-search .dgwt-wcas-search-wrapp .dgwt-wcas-search-submit .dgwt-wcas-ico-magnifier {
	display: block;
	position: static;
	width: 22px;
	height: 22px;
	margin: 0 auto;
	fill: #fff;
}

.mi-header-search .dgwt-wcas-search-wrapp .dgwt-wcas-search-submit .dgwt-wcas-ico-magnifier path {
	fill: #fff;
}

.mi-header-search .dgwt-wcas-search-wrapp .dgwt-wcas-preloader {
	right: 270px;
}

/* ---- Header search below desktop: fill the row beside the category control ------------------------------ */

@media (max-width: 1024px) {
	[data-elementor-type="header"] .dgwt-wcas-search-wrapp {
		max-width: none;
	}
}

/* ---- Header logo (atomic image "Logo" in the Site Header, linked home): visible keyboard focus -------------- */
[data-elementor-type="header"] a.e-image-link-base[data-interaction-id="349fea3a"]:focus-visible {
	outline: 2px solid var(--mi-primary, #226480);
	outline-offset: 4px;
	border-radius: 4px;
}

/* ---- Header burger (classic Nav Menu inside the atomic header): keep it to the toggle's own width --------- */

[data-elementor-type="header"] .elementor-widget-nav-menu.elementor-widget__width-auto {
	width: auto;
}

/* ---- Header cart toggle (Elementor Pro Menu Cart): icon-only, not the kit's global button style ------------ */

[data-elementor-type="header"] .elementor-menu-cart__toggle .elementor-button.elementor-menu-cart__toggle_button {
	padding: 4px;
	border: 0;
	background: transparent;
	color: var(--mi-heading, #13222b);
}

[data-elementor-type="header"] .elementor-menu-cart__toggle .elementor-button.elementor-menu-cart__toggle_button:hover,
[data-elementor-type="header"] .elementor-menu-cart__toggle .elementor-button.elementor-menu-cart__toggle_button:focus {
	background: transparent;
	color: var(--mi-primary, #226480);
}

[data-elementor-type="header"] .elementor-menu-cart__toggle .elementor-button.elementor-menu-cart__toggle_button:focus-visible {
	outline: 2px solid var(--mi-primary, #226480);
	outline-offset: 2px;
}

/* ---- Empty quote list ---------------------------------------------------------------------------------- */

.mi-quote-empty {
	max-width: 640px;
	margin: 24px 0 8px;
	padding: 28px;
	border: 1px solid var(--mi-border, #dce5e8);
	border-radius: var(--mi-radius, 8px);
	background: #f5f7f8;
}

.mi-quote-empty__title {
	margin: 0 0 6px;
	color: var(--mi-heading, #13222b);
	font-family: var(--mi-font-heading, "Plus Jakarta Sans"), sans-serif;
	font-size: 20px;
	font-weight: 700;
}

.mi-quote-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 18px;
}

.mi-quote-empty .mi-quote-empty__btn {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 20px;
	border: 2px solid var(--mi-primary, #226480);
	border-radius: var(--mi-radius, 8px);
	color: var(--mi-primary, #226480);
	font-weight: 600;
	text-decoration: none;
}

.mi-quote-empty__btn:hover {
	background: var(--mi-primary, #226480);
	color: #fff;
}

.mi-quote-empty__btn--primary {
	border-color: var(--mi-coral, #bf4d36);
	background: var(--mi-coral, #bf4d36);
	color: #fff;
}

.mi-quote-empty__btn--primary:hover {
	border-color: var(--mi-navy, #0e2a38);
	background: var(--mi-navy, #0e2a38);
}

/* ---- Site footer (Elementor template "Site Footer"; layout, colours and the skyline background live there) ---- */

.mi-footer a:focus-visible {
	outline: 2px solid var(--mi-coral-light, #e8836b);
	outline-offset: 3px;
	border-radius: 4px;
}

.mi-footer a.mi-icon-link:hover .mi-footer-contact,
.mi-footer a.mi-icon-link:focus-visible .mi-footer-contact {
	color: var(--mi-coral-light, #e8836b);
}

/* Legal links line up with the copyright text when the row stacks (outranks the menu widget's own item padding). */
.mi-footer .mi-footer-legal .elementor-nav-menu--main > .elementor-nav-menu > li:first-child > a.elementor-item {
	padding-inline-start: 0;
}

.mi-footer .elementor-shortcode {
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.74);
}

/* "Designed & Developed by" credit link in the theme orange. A light tint keeps small text readable over the skyline
 * photo: #eb9681 is ≥ 4.7:1 at its brightest spot (the full #bf4d36 is under 3:1, the coral-light #e8836b 4.05:1). */
.mi-footer .elementor-shortcode a {
	color: #eb9681;
	text-decoration: underline;
	text-decoration-color: rgba(235, 150, 129, 0.5);
	text-underline-offset: 3px;
	transition: color 0.2s, text-decoration-color 0.2s;
}

.mi-footer .elementor-shortcode a:hover {
	color: #fff;
	text-decoration-color: currentColor;
}

/*
 * Copyright row: copyright at the start; legal links (when published) and TranslatePress's language switcher
 * ([language-switcher] shortcode widget, class mi-footer-lang; removed while Arabic is off) at the end of the content
 * container.
 * Joinchat's fixed button sits in the bottom-right corner (60px wide, 28px from the edge). Where the container reaches
 * it (below ~1400px), the row's end padding keeps 12px clear of it: reserve = 100px minus the container's side margin
 * (+12px for the scrollbar that 100vw includes).
 */
.mi-footer .mi-footer-legal > :first-child {
	margin-inline-end: auto;
}

@media (min-width: 768px) {
	.mi-footer .mi-wrap.mi-footer-legal {
		padding-inline-end: max(var(--mi-gutter, 20px), calc(112px - max(0px, (100vw - var(--mi-container, 1240px)) / 2)));
	}
}

/* Phones: the row stacks and keeps 84px below the copyright, clear of Joinchat and the scroll-to-top button. When
 * present, the switcher takes that space (the row keeps its height), away from Joinchat on the right. */
@media (max-width: 767px) {
	.mi-footer .mi-wrap.mi-footer-legal {
		padding-bottom: 84px;
	}

	.mi-footer .mi-wrap.mi-footer-legal:has(> .mi-footer-lang) {
		padding-bottom: calc(84px - 40px - 0.5rem); /* 84px reserve − switcher − row gap */
	}

	/* Centred: copyright, then "Designed & Developed by …" on its own line, then the legal links. */
	.mi-footer .mi-wrap.mi-footer-legal {
		align-items: center;
		text-align: center;
	}

	.mi-footer .mi-footer-legal > :first-child {
		margin-inline-end: 0;
	}

	.mi-footer .mi-footer-legal .elementor-shortcode {
		text-align: center;
	}

	.mi-footer .mi-footer-credit {
		display: block;
	}

	/* Links wrap onto two lines here, so no dividers (one would dangle at a line end); even spacing instead. */
	.mi-footer .mi-footer-legal .elementor-nav-menu--main > .elementor-nav-menu {
		justify-content: center;
		gap: 2px 20px;
	}

	.mi-footer .mi-footer-legal .elementor-nav-menu--main > .elementor-nav-menu > li::after,
	.mi-footer .mi-footer-legal .elementor-nav-menu--main > .elementor-nav-menu::after {
		content: none; /* the list's own ::after is a clearfix space that would join the last line and shift it */
	}

	.mi-footer .mi-footer-legal .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item,
	.mi-footer .mi-footer-legal .elementor-nav-menu--main > .elementor-nav-menu > li:first-child > a.elementor-item {
		padding-inline: 0;
	}
}

/* ---- Footer language switcher (TranslatePress shortcode switcher; colours from TP's switcher settings) ---------
 * TP renders an inert in-flow "anchor" that holds the space and an absolutely positioned "overlay" (the control and
 * its list). The overlay is pinned to the anchor's bottom and stacks in reverse, so the list opens upward. */
.mi-footer .mi-footer-legal > .elementor-element.mi-footer-lang {
	flex: 0 0 auto;
	width: auto;
	margin-block: -6px; /* the 32px control fits the 21px text row without changing the row's height */
}

.mi-footer .mi-footer-lang .trp-language-switcher {
	--flag-size: 16px;
	--font-size: 12.5px;
}

.mi-footer .mi-footer-lang .trp-shortcode-switcher {
	display: block; /* not inline-block: no line-box strut under the control */
	box-sizing: border-box;
	width: 112px;
	padding: 0;
}

.mi-footer .mi-footer-lang .trp-shortcode-overlay {
	top: auto;
	right: 0;
	bottom: 0;
	left: auto;
	display: flex;
	flex-direction: column-reverse;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.mi-footer .mi-footer-lang .trp-shortcode-overlay.is-open {
	box-shadow: 0 -12px 28px rgba(0, 12, 20, 0.35);
}

.mi-footer .mi-footer-lang .trp-current-language-item__wrapper {
	height: 30px;
	padding: 0;
	padding-inline-end: 8px;
}

.mi-footer .mi-footer-lang .trp-language-item {
	box-sizing: border-box;
	gap: 7px;
	min-height: 0;
	padding: 0 10px;
}

.mi-footer .mi-footer-lang .trp-current-language-item__wrapper .trp-language-item {
	height: 100%;
	padding-inline-end: 4px;
}

.mi-footer .mi-footer-lang .trp-switcher-dropdown-list .trp-language-item {
	height: 32px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.mi-footer .mi-footer-lang .trp-language-item-name {
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-weight: 500;
	line-height: 1.2;
}

.mi-footer .mi-footer-lang .trp-language-item:focus-visible {
	outline: 2px solid var(--mi-coral-light, #e8836b);
	outline-offset: -2px;
	border-radius: 5px;
}

/* Chevron points up (the list opens upward) and flips while open. */
.mi-footer .mi-footer-lang .trp-shortcode-arrow {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	transform: rotate(180deg);
	transition: transform 0.2s;
}

.mi-footer .mi-footer-lang .trp-shortcode-switcher.is-open .trp-shortcode-arrow {
	transform: none;
}

/* Touch-sized on phones (40px). */
@media (max-width: 767px) {
	.mi-footer .mi-footer-legal > .elementor-element.mi-footer-lang {
		margin-block: 0;
	}

	.mi-footer .mi-footer-lang .trp-shortcode-switcher {
		width: 124px;
	}

	.mi-footer .mi-footer-lang .trp-current-language-item__wrapper {
		height: 38px;
	}

	.mi-footer .mi-footer-lang .trp-switcher-dropdown-list .trp-language-item {
		height: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mi-footer .mi-footer-lang .trp-shortcode-arrow {
		transition: none;
	}
}

/* ---- Homepage "What we do" services feature (Elementor Home page; layout, copy and background live there) ---- */

.mi-services-feature a:focus-visible {
	outline: 2px solid var(--mi-coral-light, #e8836b);
	outline-offset: 3px;
	border-radius: 4px;
}

.mi-services-feature a.mi-icon-link:hover .mi-link-arrow,
.mi-services-feature a.mi-icon-link:focus-visible .mi-link-arrow {
	color: var(--mi-coral, #bf4d36);
}

/* ---- Homepage customer-stories carousel (Elementor Home page → "Testimonials"; behaviour in customer-stories.js) ---- */

.mi-customer-stories-slider h2 span {
	color: #a9e0eb;
}

/* All stories share one grid cell, so the card is as tall as the longest story: no height jumps between slides. */
.mi-customer-stories-slider [data-mi-stories] [data-mi-stories-track] {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	touch-action: pan-y;
}

.mi-customer-stories-slider [data-mi-stories-track] [data-mi-story] {
	grid-area: 1 / 1;
	border: 1px solid rgba(255, 255, 255, 0.36);
	border-radius: 22px;
	/* Cool white/teal glass over a dark base layer: the base alone keeps white text at WCAG AA over the brightest
	   parts of the photo (lamp glow), so contrast holds with or without backdrop blur. */
	background-color: rgba(8, 32, 44, 0.5);
	background-image: linear-gradient(130deg, rgba(255, 255, 255, 0.13), rgba(203, 231, 241, 0.04));
	box-shadow: 0 20px 65px rgba(0, 12, 20, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	-webkit-backdrop-filter: blur(22px) saturate(135%);
	backdrop-filter: blur(22px) saturate(135%);
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

/* Before the script runs (or without it) only the first story shows; the script then drives .is-active. */
.mi-customer-stories-slider [data-mi-stories-track] [data-mi-story]:not(:first-child),
.mi-customer-stories-slider [data-mi-stories-ready] [data-mi-story] {
	visibility: hidden;
	opacity: 0;
}

.mi-customer-stories-slider [data-mi-stories-ready] [data-mi-stories-track] [data-mi-story].is-active {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.35s ease, visibility 0s;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.mi-customer-stories-slider [data-mi-stories-track] [data-mi-story] {
		background-color: rgba(14, 42, 56, 0.94);
		background-image: none;
	}
}

@media (max-width: 767px) {
	.mi-customer-stories-slider [data-mi-stories-track] [data-mi-story] {
		border-radius: 18px;
		background-color: rgba(8, 32, 44, 0.55);
	}
}

/* Quote: a classic Text Editor widget holding a <blockquote> (neutralise theme blockquote styling). */
.mi-customer-stories-slider [data-mi-story] .elementor-widget-text-editor {
	width: 100%;
}

.mi-customer-stories-slider [data-mi-story] blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: clamp(20px, 1.95vw, 26px);
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: #fff;
	text-wrap: pretty;
}

.mi-customer-stories-slider [data-mi-story] blockquote p {
	margin: 0;
	color: inherit;
	font: inherit;
}

@media (max-width: 767px) {
	.mi-customer-stories-slider [data-mi-story] blockquote {
		font-size: 19px;
	}
}

/* Controls (built by customer-stories.js). Kit button styles are overridden with parent-scoped selectors. */
.mi-customer-stories-slider .mi-stories__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 24px;
}

.mi-customer-stories-slider .mi-stories__controls .mi-stories__arrow,
.mi-customer-stories-slider .mi-stories__controls .mi-stories__arrow:hover,
.mi-customer-stories-slider .mi-stories__controls .mi-stories__arrow:focus {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	background: rgba(13, 41, 55, 0.5);
	color: #fff;
	cursor: pointer;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: background-color 0.2s;
}

.mi-customer-stories-slider .mi-stories__controls .mi-stories__arrow:hover {
	background: rgba(255, 255, 255, 0.2);
}

.mi-customer-stories-slider .mi-stories__arrow svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mi-customer-stories-slider .mi-stories__dots {
	display: flex;
	align-items: center;
}

.mi-customer-stories-slider .mi-stories__dots .mi-stories__dot,
.mi-customer-stories-slider .mi-stories__dots .mi-stories__dot:hover,
.mi-customer-stories-slider .mi-stories__dots .mi-stories__dot:focus {
	display: grid;
	place-items: center;
	min-width: 24px;
	height: 44px;
	padding: 0 4px;
	border: 0;
	background: none;
	cursor: pointer;
}

.mi-customer-stories-slider .mi-stories__dot span {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.55);
	transition: width 0.25s, background-color 0.25s;
}

.mi-customer-stories-slider .mi-stories__dot:hover span {
	background: rgba(255, 255, 255, 0.85);
}

.mi-customer-stories-slider .mi-stories__dot[aria-current="true"] span {
	width: 30px;
	background: #ed896c;
}

.mi-customer-stories-slider .mi-stories__playback {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 12px;
}

.mi-customer-stories-slider .mi-stories__playback .mi-stories__toggle,
.mi-customer-stories-slider .mi-stories__playback .mi-stories__toggle:hover,
.mi-customer-stories-slider .mi-stories__playback .mi-stories__toggle:focus {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 10px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: #eef6f7;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}

.mi-customer-stories-slider .mi-stories__playback .mi-stories__toggle:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mi-customer-stories-slider .mi-stories__toggle svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.mi-customer-stories-slider .mi-stories__timer {
	width: 76px;
	height: 2px;
	overflow: hidden;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.25);
}

.mi-customer-stories-slider .mi-stories__progress {
	display: block;
	width: 100%;
	height: 100%;
	background: #ed896c;
	transform: scaleX(0);
	transform-origin: left;
}

.mi-customer-stories-slider .is-paused .mi-stories__timer {
	opacity: 0.5;
}

.mi-customer-stories-slider button:focus-visible {
	outline: 3px solid #ffa68e;
	outline-offset: 3px;
}

/* Elementor editor: no carousel; every story is listed so each can be edited. */
.elementor-editor-active .mi-customer-stories-slider [data-mi-stories] [data-mi-stories-track] {
	gap: 24px;
}

.elementor-editor-active .mi-customer-stories-slider [data-mi-stories-track] [data-mi-story] {
	grid-area: auto;
	visibility: visible;
	opacity: 1;
}

/* ---- Shop page (Elementor "Shop Page" products-archive template; behaviour in shop.js) -------------------------
 * Everything is scoped to .mi-shop (the template's root) or to the drawer pieces shop.js adds. The archive widget's
 * class is part of the card selectors so they win over Elementor's products grid, Astra's loop styles and the kit's
 * global button/link colours without affecting other archives. */

.mi-shop .woocommerce-breadcrumb {
	margin: 0;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 14px;
	color: var(--mi-text, #4a5a63);
}

.mi-shop .woocommerce-breadcrumb a {
	color: var(--mi-text, #4a5a63);
	text-decoration: none;
}

.mi-shop .woocommerce-breadcrumb a:hover {
	color: var(--mi-primary, #226480);
	text-decoration: underline;
}

/* Toolbar: result count left, sorting right. */
.mi-shop .elementor-widget-wc-archive-products .woocommerce-result-count {
	float: left;
	margin: 0 0 16px;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 14px;
	line-height: 42px;
	color: var(--mi-text, #4a5a63);
}

.mi-shop .elementor-widget-wc-archive-products .woocommerce-ordering {
	float: right;
	margin: 0 0 16px;
}

.mi-shop .elementor-widget-wc-archive-products .woocommerce-ordering select.orderby {
	height: 42px;
	min-width: 190px;
	padding: 0 36px 0 14px;
	border: 1px solid #d5e1e5;
	border-radius: 8px;
	background-color: #fff;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 14px;
	color: var(--mi-navy, #0e2a38);
}

/* Product grid and cards. */
.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products.elementor-grid,
.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products {
	display: grid;
	clear: both;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
}

.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products::before,
.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products::after {
	display: none;
}

.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto;
	margin: 0;
	padding: 14px 14px 16px;
	float: none;
	border: 1px solid #dfe8eb;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(14, 42, 56, 0.04);
	transition: box-shadow 0.2s, border-color 0.2s;
}

.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product:hover {
	border-color: #cbdbe0;
	box-shadow: 0 10px 26px rgba(14, 42, 56, 0.08);
}

/* Image area: same box on every card; whole product visible (contain), never cropped or stretched. */
.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	margin: 0 0 12px;
	overflow: hidden;
	border-radius: 8px;
	background: #fff;
}

.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product .astra-shop-thumbnail-wrap > a.woocommerce-LoopProduct-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product .astra-shop-thumbnail-wrap img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
}

/* Astra's hover "add to cart" icon duplicates the card's own button. */
.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product .astra-shop-thumbnail-wrap .ast-on-card-button.ast-select-options-trigger {
	display: none;
}

.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product .ast-onsale-card {
	position: absolute;
	top: 0;
	left: 0;
	right: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 4px 10px;
	border-radius: 6px;
	background: var(--mi-coral, #bf4d36);
	box-shadow: none;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
}

.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 0;
}

.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product .ast-woo-product-category {
	margin: 0 0 4px;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 12px;
	line-height: 1.4;
	color: #5c6d76;
	text-transform: none;
	opacity: 1;
}

.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product a.ast-loop-product__link {
	color: var(--mi-navy, #0e2a38);
	text-decoration: none;
}

/* Titles: room for two lines on every card (aligned rows), clamped at three; the full name stays in the DOM. */
.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	min-height: calc(1.4em * 2);
	margin: 0 0 10px;
	padding: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mi-navy, #0e2a38);
}

.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product a.ast-loop-product__link:hover .woocommerce-loop-product__title {
	color: var(--mi-primary, #226480);
	text-decoration: underline;
}

/* Price and button sit at the bottom of every card in a row. */
.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	margin: auto 0 0;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--mi-navy, #0e2a38);
}

.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product .price ins {
	order: 0;
	text-decoration: none;
	color: inherit;
}

.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product .price del {
	order: 1;
	font-size: 13px;
	font-weight: 400;
	color: #6b7b84;
	opacity: 1;
}

.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product .cfvsw_variations_form {
	margin: 8px 0 0;
}

.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product a.button,
.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product a.button:hover,
.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product a.button:focus {
	display: block;
	width: 100%;
	margin: 12px 0 0;
	padding: 11px 14px;
	border: 0;
	border-radius: 8px;
	background: var(--mi-primary, #226480);
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	color: #fff;
	transition: background-color 0.2s;
}

.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product a.button:hover {
	background: var(--mi-primary-dark, #174a60);
}

.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product a.button.loading {
	opacity: 0.7;
}

.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product a.added_to_cart {
	display: block;
	margin: 8px 0 0;
	padding: 0;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	color: var(--mi-primary, #226480);
}

/* TI Wishlist: its own button, shown as a heart in the card's top-right corner (accessible name kept). */
.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product .tinvwl-loop-button-wrapper {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	margin: 0;
	padding: 0;
}

.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product .tinvwl-loop-button-wrapper .tinv-wishlist-clear,
.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product .tinvwl-loop-button-wrapper .tinvwl-tooltip {
	display: none;
}

.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product .tinvwl-loop-button-wrapper a.tinvwl_add_to_wishlist_button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 1px solid #dfe8eb;
	border-radius: 50%;
	background: #fff;
	color: var(--mi-navy, #0e2a38);
	text-decoration: none;
}

.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product .tinvwl-loop-button-wrapper a.tinvwl_add_to_wishlist_button::before {
	margin: 0;
	font-size: 18px;
	line-height: 1;
}

.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product .tinvwl-loop-button-wrapper a.tinvwl_add_to_wishlist_button:hover,
.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product .tinvwl-loop-button-wrapper a.tinvwl_add_to_wishlist_button.tinvwl-product-in-list {
	border-color: var(--mi-coral, #bf4d36);
	color: var(--mi-coral, #bf4d36);
}

.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Pagination row: native pages left, "Page X of Y" right. */
.mi-shop .mi-shop-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 28px;
}

.mi-shop .mi-shop-pager .woocommerce-pagination {
	margin: 0;
	text-align: left;
}

.mi-shop .mi-shop-pager .woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
}

.mi-shop .mi-shop-pager .woocommerce-pagination ul.page-numbers li {
	float: none;
	margin: 0;
	border: 0;
	overflow: visible;
}

.mi-shop .mi-shop-pager .woocommerce-pagination ul.page-numbers li .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid #cbdbe0;
	border-radius: 8px;
	background: #fff;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	color: var(--mi-navy, #0e2a38);
	text-decoration: none;
}

.mi-shop .mi-shop-pager .woocommerce-pagination ul.page-numbers li a.page-numbers:hover {
	border-color: var(--mi-primary, #226480);
	background: #fff;
	color: var(--mi-primary, #226480);
}

.mi-shop .mi-shop-pager .woocommerce-pagination ul.page-numbers li span.current {
	border-color: var(--mi-primary, #226480);
	background: var(--mi-primary, #226480);
	color: #fff;
}

.mi-shop .mi-shop-pager__status {
	margin: 0;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 14px;
	color: var(--mi-text, #4a5a63);
}

.mi-shop .elementor-widget-wc-archive-products .woocommerce-info {
	clear: both;
}

/* Filter Everything inside the sidebar panel. Its own mobile popup controls are replaced by the drawer. */
.mi-shop .wpc-filters-main-wrap .wpc-filters-open-button-container,
.mi-shop .wpc-filters-main-wrap .wpc-widget-close-container,
.mi-shop .wpc-filters-main-wrap .wpc-filters-widget-controls-container {
	display: none !important; /* Filter Everything shows these on its own mobile breakpoint */
}

.mi-shop .wpc-filters-main-wrap .wpc-filters-widget-content {
	display: block !important; /* keep the panel itself visible at every width; the drawer handles small screens */
	position: static;
	box-shadow: none;
}

.mi-shop .wpc-filters-main-wrap .wpc-filters-section:not(.wpc-filter-layout-submit-button) {
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid #e6eef0;
}

.mi-shop .wpc-filters-main-wrap .wpc-filter-title {
	margin: 0 0 10px;
	padding: 0;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: var(--mi-navy, #0e2a38);
}

.mi-shop .wpc-filters-main-wrap .wpc-filters-ul-list li.wpc-checkbox-item {
	margin: 0 0 6px;
}

.mi-shop .wpc-filters-main-wrap .wpc-term-item-content-wrapper {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 28px;
}

.mi-shop .wpc-filters-main-wrap .wpc-term-item-content-wrapper input[type="checkbox"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--mi-primary, #226480);
}

.mi-shop .wpc-filters-main-wrap .wpc-term-item-content-wrapper label {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	margin: 0;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 14px;
	color: #2d414b;
}

.mi-shop .wpc-filters-main-wrap .wpc-term-item-content-wrapper label a.wpc-filter-link {
	color: #2d414b;
	text-decoration: none;
}

.mi-shop .wpc-filters-main-wrap .wpc-term-count {
	font-size: 12px;
	color: #5c6d76;
	opacity: 1; /* Filter Everything fades counts to 0.3, below readable contrast */
}

.mi-shop .wpc-filters-main-wrap .wpc-filters-range-inputs,
.mi-shop .wpc-filters-main-wrap .wpc-filter-range-form {
	width: 100%;
}

.mi-shop .wpc-filters-main-wrap .wpc-filters-range-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.mi-shop .wpc-filters-main-wrap .wpc-filters-range-column {
	position: relative;
	width: auto;
	max-width: none; /* Filter Everything caps each column at 47% */
	margin: 0;
}

.mi-shop .wpc-filters-main-wrap .wpc-filters-range-column input[type="number"] {
	width: 100%;
	height: 42px;
	padding: 0 10px;
	border: 1px solid #cbdbe0;
	border-radius: 8px;
	background: #fff;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 14px;
	color: var(--mi-navy, #0e2a38);
}

.mi-shop .wpc-filters-main-wrap .wpc-filters-range-values-wrapper p {
	margin: 8px 0 0;
	font-size: 12px;
	color: #6b7b84;
}

.mi-shop .wpc-filters-main-wrap .wpc-filters-section.wpc-filter-layout-submit-button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.mi-shop .wpc-filters-main-wrap .wpc-sticky-buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 16px 0 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.mi-shop .wpc-filters-main-wrap a.wpc-filters-submit-button,
.mi-shop .wpc-filters-main-wrap a.wpc-filters-reset-button {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 42px;
	margin: 0;
	padding: 8px 10px;
	border: 1px solid var(--mi-primary, #226480);
	border-radius: 8px;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.mi-shop .wpc-filters-main-wrap a.wpc-filters-submit-button {
	background: var(--mi-primary, #226480);
	color: #fff;
}

.mi-shop .wpc-filters-main-wrap a.wpc-filters-submit-button:hover {
	border-color: var(--mi-primary-dark, #174a60);
	background: var(--mi-primary-dark, #174a60);
	color: #fff;
}

.mi-shop .wpc-filters-main-wrap a.wpc-filters-reset-button {
	background: #fff;
	color: var(--mi-primary, #226480);
}

/* Price "Apply" (added by shop.js; categories and availability apply as soon as they're ticked). */
.mi-shop .wpc-filters-main-wrap .mi-shop-price-apply,
.mi-shop .wpc-filters-main-wrap .mi-shop-price-apply:hover,
.mi-shop .wpc-filters-main-wrap .mi-shop-price-apply:focus {
	display: block;
	width: 100%;
	min-height: 42px;
	margin: 10px 0 0;
	padding: 8px 12px;
	border: 1px solid var(--mi-primary, #226480);
	border-radius: 8px;
	background: var(--mi-primary, #226480);
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	cursor: pointer;
}

.mi-shop .wpc-filters-main-wrap .mi-shop-price-apply:hover {
	border-color: var(--mi-primary-dark, #174a60);
	background: var(--mi-primary-dark, #174a60);
}

.mi-shop .wpc-filters-main-wrap .wpc-pc-apply-button {
	margin-left: 4px;
}

/* Active-filter chips (Filter Everything) above the groups. */
.mi-shop .wpc-filters-main-wrap .wpc-filter-chips-list:not(.wpc-empty-chips-container) {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 4px;
	padding: 0;
}

.mi-shop .wpc-filters-main-wrap .wpc-filter-chips-list li a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border: 1px solid #cbdbe0;
	border-radius: 99px;
	background: #f3f7f8;
	font-size: 13px;
	color: var(--mi-navy, #0e2a38);
	text-decoration: none;
}

.mi-shop a:focus-visible,
.mi-shop button:focus-visible,
.mi-shop select:focus-visible,
.mi-shop input:focus-visible,
.mi-shop-drawer-close:focus-visible {
	outline: 2px solid var(--mi-primary, #226480);
	outline-offset: 2px;
}

/* "Filters" toggle (drawer mode only). */
.mi-shop .mi-shop-filter-toggle,
.mi-shop .mi-shop-filter-toggle:hover,
.mi-shop .mi-shop-filter-toggle:focus {
	display: none;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 46px;
	margin: 0 0 14px;
	padding: 0 16px;
	border: 1px solid #cbdbe0;
	border-radius: 8px;
	background: #fff;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--mi-navy, #0e2a38);
	cursor: pointer;
}

.mi-shop .mi-shop-filter-toggle svg,
.mi-shop-drawer-close svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
}

.mi-shop .mi-shop-drawer-close {
	display: none;
}

.mi-shop-drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(14, 42, 56, 0.45);
}

/* Narrower desktops: slimmer sidebar, two product columns. */
@media (max-width: 1099px) {
	.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products.elementor-grid,
	.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Drawer mode: the sidebar becomes an off-canvas dialog; products use the full width. */
@media (max-width: 899px) {
	.mi-shop aside[data-mi-shop-filters] {
		display: none;
	}

	.mi-shop aside[data-mi-shop-filters].is-open {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 100001;
		display: flex;
		width: min(360px, 88vw);
		padding: 56px 16px 24px;
		overflow-y: auto;
		background: var(--mi-light, #f3f7f8);
		box-shadow: 0 0 40px rgba(14, 42, 56, 0.25);
	}

	.mi-shop aside[data-mi-shop-filters].is-open .mi-shop-drawer-close,
	.mi-shop aside[data-mi-shop-filters].is-open .mi-shop-drawer-close:hover,
	.mi-shop aside[data-mi-shop-filters].is-open .mi-shop-drawer-close:focus {
		position: absolute;
		top: 10px;
		right: 10px;
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 1px solid #cbdbe0;
		border-radius: 8px;
		background: #fff;
		color: var(--mi-navy, #0e2a38);
	}

	.mi-shop .mi-shop-filter-toggle,
	.mi-shop .mi-shop-filter-toggle:hover,
	.mi-shop .mi-shop-filter-toggle:focus {
		display: flex;
	}

	.mi-shop .elementor-widget-wc-archive-products .woocommerce-result-count {
		line-height: 1.4;
		margin-top: 12px;
	}

	html.mi-shop-drawer-open,
	html.mi-shop-drawer-open body {
		overflow: hidden;
	}
}

@media (max-width: 599px) {
	.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products.elementor-grid,
	.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products {
		gap: 10px;
	}

	.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product {
		padding: 10px 10px 12px;
	}

	.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 14px;
	}

	.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product .price {
		font-size: 16px;
	}

	.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product a.button,
	.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product a.button:hover,
	.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product a.button:focus {
		padding: 11px 8px;
		font-size: 14px;
	}

	.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product .tinvwl-loop-button-wrapper {
		top: 10px;
		right: 10px;
	}

	.mi-shop .elementor-widget-wc-archive-products .woocommerce-result-count,
	.mi-shop .elementor-widget-wc-archive-products .woocommerce-ordering {
		float: none;
	}

	.mi-shop .elementor-widget-wc-archive-products .woocommerce-ordering select.orderby {
		width: 100%;
	}
}

/* Very narrow phones: one product per row. */
@media (max-width: 359px) {
	.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products.elementor-grid,
	.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product,
	.mi-shop .elementor-widget-wc-archive-products .woocommerce ul.products li.product a.button {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mi-footer a,
	.mi-services-feature a,
	.mi-services-feature .mi-link-arrow,
	.mi-customer-stories-slider [data-mi-stories-track] [data-mi-story],
	.mi-customer-stories-slider [data-mi-stories-ready] [data-mi-stories-track] [data-mi-story].is-active,
	.mi-customer-stories-slider .mi-stories__dot span,
	.mi-customer-stories-slider .mi-stories__controls .mi-stories__arrow {
		transition: none;
	}

	.mi-customer-stories-slider .mi-stories__timer {
		display: none;
	}

	.mi-allcats .mi-allcats__btn,
	.mi-allcats .mi-allcats__chev,
	.mi-catmenu__row,
	.mi-catmenu__chev,
	.mi-catmenu .mi-catmenu__card,
	.mi-cattiles .mi-cattile,
	.mi-header-search .dgwt-wcas-sf-wrapp,
	.mi-header-search .dgwt-wcas-search-submit {
		transition: none;
	}

	.mi-cattiles .mi-cattile:hover {
		transform: none;
	}
}

/* ---- Category archive (Elementor "<Name> Category" products-archive templates, one per category, plus "Product
 * Category (default)"; toolbar in archive-toolbar.js) -----
 * The template root carries .mi-shop (shared card styles above) and .mi-cat-archive (this section): no sidebar, a
 * horizontal toolbar ([mi_archive_toolbar]) and a full-width four-column grid. */

/* The default template's banner photo is the category thumbnail (dynamic tag); a category without one gets no image. */
.mi-cat-archive section img:not([src]) {
	display: none;
}

/* Astra wraps theme-builder archives in its 1280px .ast-container with 20px padding, which below 1280px insets the
 * content a second gutter. This template is full width; its .mi-wrap lines up with the header and footer. */
.site-content > .ast-container:has(> .elementor-location-archive > .mi-cat-archive) {
	max-width: none;
	padding-right: 0;
	padding-left: 0;
}

.mi-cat-archive .mi-archive-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	padding: 10px 12px 10px 20px;
	border: 1px solid #dfe8eb;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(14, 42, 56, 0.04);
	font-family: var(--mi-font-body, Inter), sans-serif;
}

.mi-cat-archive .mi-archive-toolbar[aria-busy="true"] {
	opacity: 0.7;
}

.mi-cat-archive .mi-archive-toolbar__count {
	margin-inline-end: auto;
}

.mi-cat-archive .mi-archive-toolbar .woocommerce-result-count {
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--mi-text, #4a5a63);
}

.mi-cat-archive .mi-archive-filters {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.mi-cat-archive .mi-archive-filters__head,
.mi-cat-archive .mi-archive-filters__actions {
	display: none;
}

/* Shared control look: 40px, thin border, 8px corners. */
.mi-cat-archive .mi-archive-price__toggle,
.mi-cat-archive .mi-archive-filters-toggle,
.mi-cat-archive .mi-archive-toolbar .woocommerce-ordering select.orderby {
	box-sizing: border-box;
	height: 40px;
	margin: 0;
	border: 1px solid #d5e1e5;
	border-radius: 8px;
	background-color: #fff;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--mi-navy, #0e2a38);
}

.mi-cat-archive .mi-archive-price__toggle,
.mi-cat-archive .mi-archive-price__toggle:hover,
.mi-cat-archive .mi-archive-price__toggle:focus,
.mi-cat-archive .mi-archive-filters-toggle,
.mi-cat-archive .mi-archive-filters-toggle:hover,
.mi-cat-archive .mi-archive-filters-toggle:focus {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0 12px 0 14px;
	background: #fff;
	color: var(--mi-navy, #0e2a38);
	cursor: pointer;
}

.mi-cat-archive .mi-archive-filters-toggle[hidden] {
	display: none;
}

.mi-cat-archive .mi-archive-price__toggle {
	justify-content: space-between;
	min-width: 150px;
}

.mi-cat-archive .mi-archive-price__toggle:hover,
.mi-cat-archive .mi-archive-filters-toggle:hover,
.mi-cat-archive .mi-archive-toolbar .woocommerce-ordering select.orderby:hover {
	border-color: #a9c3cb;
}

.mi-cat-archive .mi-archive-price.is-active .mi-archive-price__toggle {
	border-color: var(--mi-primary, #226480);
	background: #eaf4f7;
	color: var(--mi-primary-dark, #174a60);
}

.mi-cat-archive .mi-archive-price__chev {
	width: 16px;
	height: 16px;
	transition: transform 0.2s;
}

.mi-cat-archive .mi-archive-price.is-open .mi-archive-price__chev {
	transform: rotate(180deg);
}

.mi-cat-archive .mi-archive-toolbar__icon {
	width: 18px;
	height: 18px;
}

.mi-cat-archive .mi-archive-filters-toggle__count {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--mi-primary, #226480);
	font-size: 12px;
	font-weight: 700;
	color: #fff;
}

/* Price panel (desktop: a small popover under its toggle). */
.mi-cat-archive .mi-archive-price {
	position: relative;
}

.mi-cat-archive .mi-archive-price__panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 30;
	box-sizing: border-box;
	width: 280px;
	padding: 16px;
	border: 1px solid #dfe8eb;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 16px 36px rgba(14, 42, 56, 0.14);
}

.mi-cat-archive .mi-archive-price__panel[hidden] {
	display: none;
}

.mi-cat-archive .mi-archive-price__fields {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
}

.mi-cat-archive .mi-archive-price__legend {
	width: 100%;
	margin: 0 0 4px;
	padding: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--mi-navy, #0e2a38);
}

.mi-cat-archive .mi-archive-price__field {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	font-size: 12px;
	color: var(--mi-text, #4a5a63);
}

.mi-cat-archive .mi-archive-price__field input[type="number"] {
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid #cbdbe0;
	border-radius: 8px;
	background: #fff;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 15px;
	color: var(--mi-navy, #0e2a38);
}

.mi-cat-archive .mi-archive-price__dash {
	padding-bottom: 10px;
	color: #6b7b84;
}

.mi-cat-archive .mi-archive-price__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 12px;
}

.mi-cat-archive .mi-archive-btn,
.mi-cat-archive .mi-archive-btn:hover,
.mi-cat-archive .mi-archive-btn:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 40px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--mi-primary, #226480);
	border-radius: 8px;
	background: var(--mi-primary, #226480);
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}

.mi-cat-archive .mi-archive-btn:hover {
	border-color: var(--mi-primary-dark, #174a60);
	background: var(--mi-primary-dark, #174a60);
}

.mi-cat-archive .mi-archive-btn--ghost,
.mi-cat-archive .mi-archive-btn--ghost:hover,
.mi-cat-archive .mi-archive-btn--ghost:focus {
	border-color: #cbdbe0;
	background: #fff;
	color: var(--mi-navy, #0e2a38);
}

.mi-cat-archive .mi-archive-link,
.mi-cat-archive .mi-archive-reset {
	font-size: 14px;
	font-weight: 600;
	color: var(--mi-primary, #226480);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mi-cat-archive .mi-archive-link:hover,
.mi-cat-archive .mi-archive-reset:hover {
	color: var(--mi-coral, #bf4d36);
}

/* "In stock": a native checkbox in a 40px row. */
.mi-cat-archive .mi-archive-stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	margin: 0;
	padding: 0 4px;
	font-size: 14px;
	font-weight: 500;
	color: var(--mi-navy, #0e2a38);
	cursor: pointer;
}

.mi-cat-archive .mi-archive-stock input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--mi-primary, #226480);
	cursor: pointer;
}

.mi-cat-archive .mi-archive-toolbar__sort .woocommerce-ordering {
	float: none;
	margin: 0;
}

.mi-cat-archive .mi-archive-toolbar .woocommerce-ordering select.orderby {
	min-width: 190px;
	padding: 0 36px 0 14px;
}

.mi-cat-archive .mi-archive-toolbar :is(button, a, input, select):focus-visible {
	outline: 2px solid var(--mi-primary, #226480);
	outline-offset: 2px;
}

/* Grid: four columns of slightly roomier cards (three on narrower desktops). */
.mi-shop.mi-cat-archive .elementor-widget-wc-archive-products .woocommerce ul.products.elementor-grid,
.mi-shop.mi-cat-archive .elementor-widget-wc-archive-products .woocommerce ul.products {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

@media (max-width: 1099px) {
	.mi-shop.mi-cat-archive .elementor-widget-wc-archive-products .woocommerce ul.products.elementor-grid,
	.mi-shop.mi-cat-archive .elementor-widget-wc-archive-products .woocommerce ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.mi-shop.mi-cat-archive .elementor-widget-wc-archive-products .woocommerce ul.products li.product {
	padding: 16px 18px 18px;
}

.mi-shop.mi-cat-archive .elementor-widget-wc-archive-products .woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
	aspect-ratio: 5 / 4;
	margin-bottom: 14px;
}

.mi-shop.mi-cat-archive .elementor-widget-wc-archive-products .woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin-bottom: 4px;
	font-size: 16px;
}

.mi-shop.mi-cat-archive .elementor-widget-wc-archive-products .woocommerce ul.products li.product .price {
	font-size: 20px;
}

.mi-shop.mi-cat-archive .elementor-widget-wc-archive-products .woocommerce ul.products li.product .price del {
	font-size: 14px;
}

.mi-cat-archive .mi-card-features {
	margin: 0 0 14px;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 14px;
	line-height: 1.45;
	color: #5c6d76;
}

/* Below 900px: two columns; the filters move into a drawer opened by "Filters". */
@media (max-width: 899px) {
	.mi-shop.mi-cat-archive .elementor-widget-wc-archive-products .woocommerce ul.products.elementor-grid,
	.mi-shop.mi-cat-archive .elementor-widget-wc-archive-products .woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.mi-cat-archive .mi-archive-toolbar.is-ready .mi-archive-filters {
		display: none;
	}

	.mi-cat-archive .mi-archive-toolbar.is-ready .mi-archive-filters.is-open {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 100001;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 18px;
		box-sizing: border-box;
		width: min(360px, 88vw);
		padding: 18px 18px 24px;
		overflow-y: auto;
		background: var(--mi-light, #f3f7f8);
		box-shadow: 0 0 40px rgba(14, 42, 56, 0.25);
	}

	.mi-cat-archive .mi-archive-filters.is-open .mi-archive-filters__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 12px;
		border-bottom: 1px solid #dfe8eb;
	}

	.mi-cat-archive .mi-archive-filters__title {
		margin: 0;
		font-family: var(--mi-font-heading, "Plus Jakarta Sans"), sans-serif;
		font-size: 18px;
		font-weight: 700;
		color: var(--mi-navy, #0e2a38);
	}

	.mi-cat-archive .mi-archive-filters__close,
	.mi-cat-archive .mi-archive-filters__close:hover,
	.mi-cat-archive .mi-archive-filters__close:focus {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid #cbdbe0;
		border-radius: 8px;
		background: #fff;
		color: var(--mi-navy, #0e2a38);
	}

	.mi-cat-archive .mi-archive-filters.is-open .mi-archive-price__toggle {
		display: none;
	}

	.mi-cat-archive .mi-archive-filters.is-open .mi-archive-price__panel {
		position: static;
		width: auto;
		padding: 16px;
		box-shadow: none;
	}

	.mi-cat-archive .mi-archive-filters.is-open .mi-archive-price__actions .mi-archive-btn {
		display: none; /* the drawer applies everything with "Show results" */
	}

	.mi-cat-archive .mi-archive-filters.is-open .mi-archive-stock {
		min-height: 48px;
		padding: 0 16px;
		border: 1px solid #dfe8eb;
		border-radius: 10px;
		background: #fff;
	}

	.mi-cat-archive .mi-archive-filters.is-open .mi-archive-filters__actions {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-top: auto;
	}

	.mi-cat-archive .mi-archive-filters.is-open .mi-archive-filters__actions .mi-archive-btn {
		min-height: 48px;
		font-size: 15px;
	}

	.mi-cat-archive .mi-archive-toolbar.is-ready .mi-archive-reset {
		display: none; /* inside the drawer instead */
	}

	.mi-archive-backdrop {
		position: fixed;
		inset: 0;
		z-index: 100000;
		background: rgba(14, 42, 56, 0.45);
	}

	.mi-archive-backdrop[hidden] {
		display: none;
	}

	html.mi-archive-drawer-open {
		overflow: hidden;
	}
}

/* Phones: count on its own line; Filters and sorting share the row below. */
@media (max-width: 599px) {
	.mi-cat-archive .mi-archive-toolbar {
		padding: 12px;
	}

	.mi-cat-archive .mi-archive-toolbar__count {
		flex: 1 0 100%;
	}

	.mi-cat-archive .mi-archive-filters-toggle,
	.mi-cat-archive .mi-archive-filters-toggle:hover,
	.mi-cat-archive .mi-archive-filters-toggle:focus {
		height: 44px;
	}

	.mi-cat-archive .mi-archive-toolbar__sort {
		flex: 1 1 0;
		min-width: 0;
	}

	.mi-cat-archive .mi-archive-toolbar .woocommerce-ordering select.orderby {
		width: 100%;
		min-width: 0;
		height: 44px;
	}

	/* One card per row: two columns would clip the long camera names and wrap the price ranges. */
	.mi-shop.mi-cat-archive .elementor-widget-wc-archive-products .woocommerce ul.products.elementor-grid,
	.mi-shop.mi-cat-archive .elementor-widget-wc-archive-products .woocommerce ul.products {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.mi-shop.mi-cat-archive .elementor-widget-wc-archive-products .woocommerce ul.products li.product {
		padding: 14px 16px 16px;
	}

	.mi-shop.mi-cat-archive .elementor-widget-wc-archive-products .woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
		aspect-ratio: 16 / 10;
	}

	.mi-shop.mi-cat-archive .elementor-widget-wc-archive-products .woocommerce ul.products li.product .woocommerce-loop-product__title {
		min-height: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mi-cat-archive .mi-archive-price__chev {
		transition: none;
	}
}

/* ---- Homepage hero slider (Elementor Home page → "Hero Slider"; behaviour in hero-slider.js) -------------------
 * Slides are stacked in one grid cell so the banner keeps the tallest slide's size; only the active one is visible
 * (inactive slides are also inert and aria-hidden, set by the script). Typography, spacing and images live in
 * Elementor; this is the structure: stacking and fade, the readability scrim and the control bar. */

.mi-hero-slider {
	touch-action: pan-y;
}

/* The category sidebar beside the slider keeps the same top and bottom edges as the banner. */
.e-grid-base:has(> .mi-hero-slider) > :first-child > .elementor-widget-shortcode,
.e-grid-base:has(> .mi-hero-slider) > :first-child > .elementor-widget-shortcode > .elementor-shortcode {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.e-grid-base:has(> .mi-hero-slider) .mi-catmenu--home {
	flex: 1 1 auto;
}

.mi-hero-slider [data-mi-hero-track] [data-mi-hero-slide] {
	grid-area: 1 / 1;
}

/* Before the script runs (or without it), only the first slide shows. */
.mi-hero-slider [data-mi-hero-track] [data-mi-hero-slide]:not(:first-child),
.mi-hero-slider[data-mi-hero-ready] [data-mi-hero-track] [data-mi-hero-slide] {
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.mi-hero-slider[data-mi-hero-ready] [data-mi-hero-track] [data-mi-hero-slide].is-active {
	z-index: 1;
	visibility: visible;
	opacity: 1;
	transition: opacity 0.45s ease, visibility 0s;
}

/* Scrim: darker towards the copy (left) and under the controls (bottom); the products on the right stay clear. */
.mi-hero-slider [data-mi-hero-slide]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(5, 28, 40, 0.55) 0%, rgba(5, 28, 40, 0.14) 52%, rgba(5, 28, 40, 0) 74%),
		linear-gradient(0deg, rgba(5, 28, 40, 0.72) 0%, rgba(5, 28, 40, 0) 30%);
}

/* Primary buttons carry a decorative arrow (not read out). */
.mi-hero-slider [data-mi-hero-slide] .mi-btn-primary::after {
	content: "→" / "";
	margin-left: 10px;
}

/* Control bar (built by the script). */
.mi-hero__footer {
	position: absolute;
	right: 36px;
	bottom: 24px;
	left: 48px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 24px;
	font-family: var(--mi-font-body, Inter), sans-serif;
}

.mi-hero__topics {
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	max-width: 620px;
}

.mi-hero-slider .mi-hero__topic,
.mi-hero-slider .mi-hero__topic:hover,
.mi-hero-slider .mi-hero__topic:focus {
	position: relative;
	display: block;
	min-height: 48px;
	margin: 0;
	padding: 14px 0 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0;
	text-align: start;
	text-transform: none;
	color: #cfe0e5;
	cursor: pointer;
}

.mi-hero-slider .mi-hero__topic:hover {
	color: #fff;
}

.mi-hero-slider .mi-hero__topic[aria-current="true"] {
	font-weight: 700;
	color: #fff;
}

.mi-hero__rail {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 3px;
	overflow: hidden;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.3);
}

.mi-hero__topic[aria-current="true"] .mi-hero__rail {
	background: rgba(255, 255, 255, 0.5);
}

.mi-hero__fill {
	display: block;
	height: 100%;
	background: #ee977b;
	transform: scaleX(0);
	transform-origin: left;
}

.mi-hero__controls {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
}

.mi-hero__counter {
	margin-right: 6px;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
	white-space: nowrap;
	color: #e5eff2;
}

.mi-hero-slider .mi-hero__control,
.mi-hero-slider .mi-hero__control:hover,
.mi-hero-slider .mi-hero__control:focus {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	background: rgba(8, 35, 48, 0.45);
	box-shadow: none;
	color: #fff;
	cursor: pointer;
}

.mi-hero-slider .mi-hero__control:hover {
	background: rgba(255, 255, 255, 0.18);
}

.mi-hero__control svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mi-hero__play svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
	stroke: none;
}

.mi-hero-slider .mi-hero__topic:focus-visible,
.mi-hero-slider .mi-hero__control:focus-visible,
.mi-hero-slider [data-mi-hero-slide] a:focus-visible {
	outline: 3px solid #e99b81;
	outline-offset: 3px;
}

@media (max-width: 1024px) {
	.mi-hero__footer {
		right: 28px;
		left: 36px;
		gap: 18px;
	}

	.mi-hero__topics {
		gap: 10px;
	}
}

/* Phones: copy on solid teal, the image as a band below it (its top edge fading into the teal), the controls over
 * the band's lower edge, aligned left so Joinchat's floating button never covers them. */
@media (max-width: 767px) {
	.mi-hero-slider [data-mi-hero-slide] img {
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%);
		mask-image: linear-gradient(180deg, transparent 0, #000 30%);
	}

	.mi-hero-slider [data-mi-hero-slide]::before {
		top: auto;
		height: 170px;
		background: linear-gradient(180deg, rgba(5, 28, 40, 0) 0%, rgba(5, 28, 40, 0.9) 100%);
	}

	.mi-hero__footer {
		right: 16px;
		bottom: 14px;
		left: 20px;
		flex-wrap: wrap;
		gap: 10px;
	}

	.mi-hero__topics {
		flex-basis: 100%;
		gap: 10px;
		max-width: none;
	}

	.mi-hero-slider .mi-hero__topic,
	.mi-hero-slider .mi-hero__topic:hover,
	.mi-hero-slider .mi-hero__topic:focus {
		min-height: 44px;
		padding-top: 12px;
		font-size: 11px;
	}

	.mi-hero-slider .mi-hero__control,
	.mi-hero-slider .mi-hero__control:hover,
	.mi-hero-slider .mi-hero__control:focus {
		width: 44px;
		height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mi-hero-slider[data-mi-hero-ready] [data-mi-hero-track] [data-mi-hero-slide],
	.mi-hero-slider[data-mi-hero-ready] [data-mi-hero-track] [data-mi-hero-slide].is-active {
		transition: none;
	}
}

/* Elementor editor: no slider; every slide is listed so each can be edited. */
.elementor-editor-active .mi-hero-slider [data-mi-hero-track] {
	gap: 12px;
}

.elementor-editor-active .mi-hero-slider [data-mi-hero-track] [data-mi-hero-slide] {
	grid-area: auto;
	visibility: visible;
	opacity: 1;
}

/* ---- About Us page (Elementor page "About Us"; root class mi-about; layout, copy and photos live there) ---------
 * Hooks are data-mi-about / data-mi-arrow / data-mi-card* attributes on the atomic elements. */

.mi-about .woocommerce-breadcrumb {
	margin: 0;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 14px;
	color: var(--mi-text, #4a5a63);
}

.mi-about .woocommerce-breadcrumb a {
	color: var(--mi-text, #4a5a63);
	text-decoration: none;
}

.mi-about .woocommerce-breadcrumb a:hover {
	color: var(--mi-primary, #226480);
	text-decoration: underline;
}

.mi-about a:focus-visible {
	outline: 2px solid var(--mi-primary, #226480);
	outline-offset: 3px;
}

/* Headings break into even lines ("Find us in the heart / of Bur Dubai."). */
.mi-about h1,
.mi-about h2 {
	text-wrap: balance;
}

/* Arrow after a link's text (decorative: empty alternative text). */
.mi-about [data-mi-arrow]::after {
	content: "\2192" / "";
	display: inline-block;
	margin-inline-start: 0.5em;
	transition: transform 0.2s;
}

.mi-about [data-mi-arrow]:hover::after,
.mi-about [data-mi-arrow]:focus-visible::after {
	transform: translateX(3px);
}

/* Cards: the bottom link covers the whole card; the card shows the link's focus. */
.elementor .mi-about [data-mi-card-link],
.elementor .mi-about [data-mi-card] .elementor-element:has([data-mi-card-link]) {
	position: static;
}

.mi-about [data-mi-card-link]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.mi-about [data-mi-card]:has([data-mi-card-link]:focus-visible) {
	outline: 2px solid var(--mi-primary, #226480);
	outline-offset: 3px;
}

/* Card photo crops: products toward the equipment on the right; the technician's face, tester and laptop. */
.elementor .mi-about [data-mi-card-image="products"] {
	transform: scale(1.35);
	transform-origin: 100% 62%;
}

.elementor .mi-about [data-mi-card-image="services"] {
	object-position: 50% 42%;
	transform: scale(1.12);
	transform-origin: 72% 42%;
}

/* Narrow tablets: the hero stacks (copy, then the photos at a comfortable width). */
@media (min-width: 768px) and (max-width: 899px) {
	.elementor .mi-about [data-mi-about="hero-grid"] {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.elementor .mi-about [data-mi-about="media"] {
		width: 100%;
		max-width: 620px;
	}
}

/* Tablets: the values heading takes the full row; the three values sit in a row below it. */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor .mi-about [data-mi-about="values-head"] {
		grid-column: 1 / -1;
	}
}

/* Map (the page's Google Maps widget): fills its rounded frame; shorter on smaller screens. */
.elementor .mi-about [data-mi-about="map"] .elementor-widget-google_maps iframe {
	display: block;
	width: 100%;
}

@media (max-width: 1024px) {
	.elementor .mi-about [data-mi-about="map"] .elementor-widget-google_maps.elementor-widget iframe {
		height: 380px;
	}
}

@media (max-width: 767px) {
	.elementor .mi-about [data-mi-about="map"] .elementor-widget-google_maps.elementor-widget iframe {
		height: 320px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mi-about [data-mi-arrow]::after {
		transition: none;
	}

	.elementor .mi-about [data-mi-card] {
		transition: none;
	}

	.elementor .mi-about [data-mi-card]:hover {
		transform: none;
	}
}

/* ---- Contact Us page (Elementor page "Contact Us"; root class mi-contact; layout, copy and photo live there) ------
 * Hooks are data-mi-contact / data-mi-route / data-mi-arrow attributes on the atomic elements. The form is the page's
 * atomic form (fields .mi-input / .mi-label); only its presentation is adjusted here. */

.mi-contact .woocommerce-breadcrumb {
	margin: 0;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 14px;
	color: var(--mi-text, #4a5a63);
}

.mi-contact .woocommerce-breadcrumb a {
	color: var(--mi-text, #4a5a63);
	text-decoration: none;
}

.mi-contact .woocommerce-breadcrumb a:hover {
	color: var(--mi-primary, #226480);
	text-decoration: underline;
}

.mi-contact a:focus-visible,
.mi-contact button:focus-visible {
	outline: 2px solid var(--mi-primary, #226480);
	outline-offset: 3px;
}

/* Arrow after an action's text (decorative: empty alternative text). */
.mi-contact [data-mi-arrow]::after,
.mi-contact [data-mi-contact="form"] button[type="submit"]::after {
	content: "\2192" / "";
	display: inline-block;
	margin-inline-start: 0.5em;
	transition: transform 0.2s;
}

.mi-contact [data-mi-arrow]:hover::after,
.mi-contact [data-mi-arrow]:focus-visible::after,
.mi-contact [data-mi-route]:hover [data-mi-arrow]::after,
.mi-contact [data-mi-route]:focus-visible [data-mi-arrow]::after,
.mi-contact [data-mi-contact="form"] button[type="submit"]:hover::after {
	transform: translateX(3px);
}

/* Map (the page's Google Maps widget) fills the rest of the visit card, so both cards end level. */
.elementor .mi-contact [data-mi-contact="map"] {
	position: relative;
}

.elementor .mi-contact [data-mi-contact="map"] > .elementor-widget-google_maps {
	position: absolute;
	inset: 0;
}

.elementor .mi-contact [data-mi-contact="map"] .elementor-widget-google_maps .elementor-custom-embed {
	height: 100%;
}

.elementor .mi-contact [data-mi-contact="map"] .elementor-widget-google_maps.elementor-widget iframe {
	display: block;
	width: 100%;
	height: 100%;
}

/* Form: aligned with the card's heading (no inner padding); comfortable submit button; invalid fields marked once the
 * visitor has interacted with them. */
.elementor .mi-contact [data-mi-contact="form"] form {
	padding: 0;
}

.elementor .mi-contact [data-mi-contact="form"] button[type="submit"] {
	min-height: 48px;
	font-size: 16px;
}

.elementor .mi-contact [data-mi-contact="form"] .mi-input:user-invalid {
	border-color: var(--mi-coral, #bf4d36);
	box-shadow: 0 0 0 3px rgba(191, 77, 54, 0.14);
}

/* Narrow tablets: the visit card and the form stack before the columns get cramped. */
@media (min-width: 768px) and (max-width: 899px) {
	.elementor .mi-contact [data-mi-contact="main-grid"] {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 899px) {
	.elementor .mi-contact [data-mi-contact="map"] {
		min-height: 300px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mi-contact [data-mi-arrow]::after,
	.mi-contact [data-mi-contact="form"] button[type="submit"]::after {
		transition: none;
	}

	.elementor .mi-contact [data-mi-route] {
		transition: none;
	}

	.elementor .mi-contact [data-mi-route]:hover {
		transform: none;
	}
}

/* ---- Service page banners (Elementor template "Service Page" → "Service Hero"; root class mi-service-hero) ------
 * Text and the photo come from each service page (ACF "Service details" + Featured image); the photo focal point is
 * printed per page as --mi-svc-focus / --mi-svc-focus-mobile by includes/service-hero.php. Hooks are data-mi-svc* /
 * data-mi-arrow / data-mi-whatsapp attributes on the atomic elements. */

.elementor .mi-service-hero [data-mi-svc-photo] {
	object-position: var(--mi-svc-focus, 70% 50%);
}

/* Phones: the photo uses the page's phone focal point. */
@media (max-width: 767px) {
	.elementor .mi-service-hero [data-mi-svc-photo] {
		object-position: var(--mi-svc-focus-mobile, var(--mi-svc-focus, 70% 50%));
	}
}

/* Very narrow phones: the heading's line breaks would leave one-word lines, so it wraps on its own. */
@media (max-width: 379px) {
	.elementor .mi-service-hero h1 {
		white-space: normal;
		text-wrap: pretty;
	}
}

.mi-service-hero a:focus-visible {
	outline: 2px solid var(--mi-white, #fff);
	outline-offset: 3px;
}

/* "← All services" on the dark banner (the kit's link colour would be too dark here). */
.elementor .mi-service-hero [data-mi-svc="back"] a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}

.elementor .mi-service-hero [data-mi-svc="back"] a:hover,
.elementor .mi-service-hero [data-mi-svc="back"] a:focus-visible {
	color: var(--mi-white, #fff);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* An empty descriptor (page without one) takes no space. */
.mi-service-hero [data-mi-svc="descriptor"]:empty {
	display: none;
}

/* Arrow after "Request a Quote" (decorative: empty alternative text). */
.mi-service-hero [data-mi-arrow]::after {
	content: "\2192" / "";
	display: inline-block;
	margin-inline-start: 0.5em;
	transition: transform 0.2s;
}

.mi-service-hero [data-mi-arrow]:hover::after,
.mi-service-hero [data-mi-arrow]:focus-visible::after {
	transform: translateX(3px);
}

/* WhatsApp icon before "WhatsApp us" (the site's icon, in the text colour). */
.elementor .mi-service-hero [data-mi-whatsapp],
.elementor .mi-services-overview [data-mi-whatsapp] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
}

.mi-service-hero [data-mi-whatsapp]::before,
.mi-services-overview [data-mi-whatsapp]::before {
	content: "";
	flex-shrink: 0;
	width: 1.15em;
	height: 1.15em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M380.9%2097.1C339%2055.1%20283.2%2032%20223.9%2032c-122.4%200-222%2099.6-222%20222%200%2039.1%2010.2%2077.3%2029.6%20111L0%20480l117.7-30.9c32.4%2017.7%2068.9%2027%20106.1%2027h.1c122.3%200%20224.1-99.6%20224.1-222%200-59.3-25.2-115-67.1-157zm-157%20341.6c-33.2%200-65.7-8.9-94-25.7l-6.7-4-69.8%2018.3L72%20359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2%200-101.7%2082.8-184.5%20184.6-184.5%2049.3%200%2095.6%2019.2%20130.4%2054.1%2034.8%2034.9%2056.2%2081.2%2056.1%20130.5%200%20101.8-84.9%20184.6-186.6%20184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5%202.8-3.7%205.6-14.3%2018-17.6%2021.8-3.2%203.7-6.5%204.2-12%201.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8%205.7-9.1%2016.3-30.3%201.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7%200-9.7%201.4-14.8%206.9-5.1%205.6-19.4%2019-19.4%2046.3%200%2027.3%2019.9%2053.7%2022.6%2057.4%202.8%203.7%2039.1%2059.7%2094.8%2083.8%2035.2%2015.2%2049%2016.5%2066.6%2013.9%2010.7-1.6%2032.8-13.4%2037.4-26.4%204.6-13%204.6-24.1%203.2-26.4-1.3-2.5-5-3.9-10.5-6.6z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M380.9%2097.1C339%2055.1%20283.2%2032%20223.9%2032c-122.4%200-222%2099.6-222%20222%200%2039.1%2010.2%2077.3%2029.6%20111L0%20480l117.7-30.9c32.4%2017.7%2068.9%2027%20106.1%2027h.1c122.3%200%20224.1-99.6%20224.1-222%200-59.3-25.2-115-67.1-157zm-157%20341.6c-33.2%200-65.7-8.9-94-25.7l-6.7-4-69.8%2018.3L72%20359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2%200-101.7%2082.8-184.5%20184.6-184.5%2049.3%200%2095.6%2019.2%20130.4%2054.1%2034.8%2034.9%2056.2%2081.2%2056.1%20130.5%200%20101.8-84.9%20184.6-186.6%20184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5%202.8-3.7%205.6-14.3%2018-17.6%2021.8-3.2%203.7-6.5%204.2-12%201.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8%205.7-9.1%2016.3-30.3%201.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7%200-9.7%201.4-14.8%206.9-5.1%205.6-19.4%2019-19.4%2046.3%200%2027.3%2019.9%2053.7%2022.6%2057.4%202.8%203.7%2039.1%2059.7%2094.8%2083.8%2035.2%2015.2%2049%2016.5%2066.6%2013.9%2010.7-1.6%2032.8-13.4%2037.4-26.4%204.6-13%204.6-24.1%203.2-26.4-1.3-2.5-5-3.9-10.5-6.6z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
	.mi-service-hero [data-mi-arrow]::after {
		transition: none;
	}
}

/* ---- Service page body (Elementor template "Service Page": the four sections below the banner; root class
 * mi-service-body). The lists come from includes/service-body.php shortcodes, with each service page's own ACF
 * content; the product cards are WooCommerce's own loop (same look as the Shop page cards). */

.mi-service-body a:focus-visible,
.mi-service-body button:focus-visible {
	outline: 2px solid var(--mi-primary, #226480);
	outline-offset: 3px;
}

.mi-service-body [data-mi-svc="lead"]:empty {
	display: none;
}

.mi-service-body [data-mi-arrow]::after,
.mi-service-body .mi-svc-related__link::after {
	content: "\2192" / "";
	display: inline-block;
	margin-inline-start: 0.45em;
	transition: transform 0.2s;
}

.mi-service-body [data-mi-arrow]:hover::after,
.mi-service-body .mi-svc-related__card:hover .mi-svc-related__link::after {
	transform: translateX(3px);
}

/* No products to recommend: the section is left out rather than shown empty. */
.elementor .mi-service-body:has([data-mi-svc-empty]) {
	display: none;
}

/* What's included: icon-led cards; 2 x 2 for four, 3 across for three, five or six. */
.mi-service-body .mi-svc-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mi-service-body .mi-svc-cards:is([data-count="3"], [data-count="5"], [data-count="6"]) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mi-service-body .mi-svc-cards[data-count="1"] {
	grid-template-columns: minmax(0, 1fr);
}

.mi-service-body .mi-svc-card {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin: 0;
	padding: 22px 24px;
	border: 1px solid #dfe8eb;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(14, 42, 56, 0.04);
}

.mi-service-body .mi-svc-card__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 10px;
	background: rgba(34, 100, 128, 0.08);
	color: var(--mi-primary, #226480);
}

.mi-service-body .mi-svc-card__icon .mi-ico {
	width: 26px;
	height: 26px;
}

.mi-service-body .mi-svc-card__body {
	min-width: 0;
}

.mi-service-body .mi-svc-card__title,
.mi-service-body .mi-svc-step__title,
.mi-service-body .mi-svc-related__title {
	margin: 0 0 4px;
	padding: 0;
	font-family: var(--mi-font-heading, "Plus Jakarta Sans"), sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--mi-navy, #0e2a38);
}

.mi-service-body .mi-svc-card__text,
.mi-service-body .mi-svc-step__text,
.mi-service-body .mi-svc-related__text {
	margin: 0;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 15px;
	line-height: 1.55;
	color: var(--mi-text, #4a5a63);
}

/* How it works: numbered steps in one row with fine connectors on desktop. The <ol> numbers the steps for
 * assistive technology; the 01-04 circles are visual. */
.mi-service-body .mi-svc-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mi-service-body .mi-svc-steps[data-count="2"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mi-service-body .mi-svc-steps:is([data-count="3"], [data-count="5"], [data-count="6"]) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mi-service-body .mi-svc-step {
	position: relative;
	margin: 0;
	padding: 0;
}

.mi-service-body .mi-svc-step__num {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 0 16px;
	border-radius: 50%;
	background: #d6e8ee;
	font-family: var(--mi-font-heading, "Plus Jakarta Sans"), sans-serif;
	font-size: 17px;
	font-weight: 700;
	color: var(--mi-navy, #0e2a38);
}

.mi-service-body .mi-svc-steps:is([data-count="2"], [data-count="3"], [data-count="4"]) .mi-svc-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 26px;
	left: 68px;
	right: -8px;
	height: 1px;
	background: #9fc0cb;
}

/* Product cards (WooCommerce loop): equal cards, contained images, two-line titles, price and button aligned. */
.elementor .mi-service-body .woocommerce ul.products.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
}

.elementor .mi-service-body .woocommerce ul.products::before,
.elementor .mi-service-body .woocommerce ul.products::after {
	display: none;
}

.elementor .mi-service-body .woocommerce ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto;
	margin: 0;
	padding: 16px 16px 18px;
	float: none;
	border: 1px solid #dfe8eb;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(14, 42, 56, 0.04);
	transition: box-shadow 0.2s, border-color 0.2s;
}

.elementor .mi-service-body .woocommerce ul.products li.product:hover {
	border-color: #cbdbe0;
	box-shadow: 0 10px 26px rgba(14, 42, 56, 0.08);
}

.elementor .mi-service-body .woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	margin: 0 0 12px;
	overflow: hidden;
	border-radius: 8px;
	background: #fff;
}

.elementor .mi-service-body .woocommerce ul.products li.product .astra-shop-thumbnail-wrap > a.woocommerce-LoopProduct-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.elementor .mi-service-body .woocommerce ul.products li.product .astra-shop-thumbnail-wrap img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
}

/* Astra's hover cart icon duplicates the card's own button. */
.elementor .mi-service-body .woocommerce ul.products li.product .astra-shop-thumbnail-wrap .ast-on-card-button.ast-select-options-trigger {
	display: none;
}

.elementor .mi-service-body .woocommerce ul.products li.product .ast-onsale-card {
	position: absolute;
	top: 0;
	left: 0;
	right: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 4px 10px;
	border-radius: 6px;
	background: var(--mi-coral, #bf4d36);
	box-shadow: none;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
}

.elementor .mi-service-body .woocommerce ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 0;
}

.elementor .mi-service-body .woocommerce ul.products li.product .ast-woo-product-category {
	margin: 0 0 4px;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 12px;
	line-height: 1.4;
	color: #5c6d76;
	text-transform: none;
	opacity: 1;
}

.elementor .mi-service-body .woocommerce ul.products li.product a.ast-loop-product__link {
	color: var(--mi-navy, #0e2a38);
	text-decoration: none;
}

.elementor .mi-service-body .woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	min-height: calc(1.4em * 2);
	margin: 0 0 10px;
	padding: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mi-navy, #0e2a38);
}

.elementor .mi-service-body .woocommerce ul.products li.product a.ast-loop-product__link:hover .woocommerce-loop-product__title {
	color: var(--mi-primary, #226480);
	text-decoration: underline;
}

.elementor .mi-service-body .woocommerce ul.products li.product .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	margin: auto 0 0;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--mi-navy, #0e2a38);
}

.elementor .mi-service-body .woocommerce ul.products li.product .price ins {
	order: 0;
	text-decoration: none;
	color: inherit;
}

.elementor .mi-service-body .woocommerce ul.products li.product .price del {
	order: 1;
	font-size: 13px;
	font-weight: 400;
	color: #6b7b84;
	opacity: 1;
}

.elementor .mi-service-body .woocommerce ul.products li.product .cfvsw_variations_form {
	margin: 8px 0 0;
}

.elementor .mi-service-body .woocommerce ul.products li.product a.button,
.elementor .mi-service-body .woocommerce ul.products li.product a.button:hover,
.elementor .mi-service-body .woocommerce ul.products li.product a.button:focus {
	display: block;
	width: 100%;
	min-height: 44px;
	margin: 12px 0 0;
	padding: 12px 14px;
	border: 0;
	border-radius: 8px;
	background: var(--mi-primary, #226480);
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	color: #fff;
	transition: background-color 0.2s;
}

.elementor .mi-service-body .woocommerce ul.products li.product a.button:hover {
	background: var(--mi-primary-dark, #174a60);
}

.elementor .mi-service-body .woocommerce ul.products li.product a.button.loading {
	opacity: 0.7;
}

.elementor .mi-service-body .woocommerce ul.products li.product a.added_to_cart {
	display: block;
	margin: 8px 0 0;
	padding: 0;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	color: var(--mi-primary, #226480);
}

/* TI Wishlist: its own button, shown as a heart in the card's top-right corner (accessible name kept). */
.elementor .mi-service-body .woocommerce ul.products li.product .tinvwl-loop-button-wrapper {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	margin: 0;
	padding: 0;
}

.elementor .mi-service-body .woocommerce ul.products li.product .tinvwl-loop-button-wrapper .tinv-wishlist-clear,
.elementor .mi-service-body .woocommerce ul.products li.product .tinvwl-loop-button-wrapper .tinvwl-tooltip {
	display: none;
}

.elementor .mi-service-body .woocommerce ul.products li.product .tinvwl-loop-button-wrapper a.tinvwl_add_to_wishlist_button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 1px solid #dfe8eb;
	border-radius: 50%;
	background: #fff;
	color: var(--mi-navy, #0e2a38);
	text-decoration: none;
}

.elementor .mi-service-body .woocommerce ul.products li.product .tinvwl-loop-button-wrapper a.tinvwl_add_to_wishlist_button::before {
	margin: 0;
	font-size: 18px;
	line-height: 1;
}

.elementor .mi-service-body .woocommerce ul.products li.product .tinvwl-loop-button-wrapper a.tinvwl_add_to_wishlist_button:hover,
.elementor .mi-service-body .woocommerce ul.products li.product .tinvwl-loop-button-wrapper a.tinvwl_add_to_wishlist_button.tinvwl-product-in-list {
	border-color: var(--mi-coral, #bf4d36);
	color: var(--mi-coral, #bf4d36);
}

.elementor .mi-service-body .woocommerce ul.products li.product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Explore our other services: photo-led cards; the "Learn more" link covers the card. The photo is the service's
 * Featured image, cropped around its phone focal point (--mi-rel-focus, set per card). */
.mi-service-body .mi-svc-related {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mi-service-body .mi-svc-related[data-count="2"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mi-service-body .mi-svc-related[data-count="1"] {
	grid-template-columns: minmax(0, 1fr);
}

.mi-service-body .mi-svc-related__card {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	border: 1px solid #dfe8eb;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(14, 42, 56, 0.04);
	transition: box-shadow 0.2s, border-color 0.2s;
}

.mi-service-body .mi-svc-related__card:hover {
	border-color: #cbdbe0;
	box-shadow: 0 10px 26px rgba(14, 42, 56, 0.08);
}

.mi-service-body .mi-svc-related__card:has(.mi-svc-related__link:focus-visible) {
	outline: 2px solid var(--mi-primary, #226480);
	outline-offset: 3px;
}

.mi-service-body .mi-svc-related__media {
	aspect-ratio: 2 / 1;
	overflow: hidden;
	background: #0e2a38;
}

.mi-service-body .mi-svc-related__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--mi-rel-focus, 70% 55%);
	transform: scale(1.5);
	transform-origin: var(--mi-rel-focus, 70% 55%);
}

.mi-service-body .mi-svc-related__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 4px;
	padding: 18px 20px 20px;
}

.mi-service-body .mi-svc-related__text {
	font-size: 14.5px;
}

.mi-service-body .mi-svc-related__link {
	align-self: flex-start;
	margin-top: auto;
	padding-top: 12px;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--mi-primary, #226480);
	text-decoration: none;
}

.mi-service-body .mi-svc-related__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.mi-service-body .mi-svc-related__link:focus-visible {
	outline: none;
}

/* Tablet: two-column cards and steps (no connectors). */
@media (max-width: 1024px) {
	.mi-service-body .mi-svc-cards:is([data-count="3"], [data-count="5"], [data-count="6"]),
	.mi-service-body .mi-svc-steps,
	.mi-service-body .mi-svc-steps:is([data-count="3"], [data-count="5"], [data-count="6"]) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mi-service-body .mi-svc-steps {
		gap: 28px 24px;
	}

	.mi-service-body .mi-svc-steps:is([data-count="2"], [data-count="3"], [data-count="4"]) .mi-svc-step:not(:last-child)::after {
		display: none;
	}

	.mi-service-body .mi-svc-card {
		padding: 20px;
	}
}

/* Narrow tablets: products and related services two across. */
@media (max-width: 899px) {
	.elementor .mi-service-body .woocommerce ul.products.products,
	.mi-service-body .mi-svc-related {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Phones: one column; the steps run down the left with a fine connecting line. */
@media (max-width: 767px) {
	.mi-service-body .mi-svc-cards,
	.mi-service-body .mi-svc-cards:is([data-count="3"], [data-count="5"], [data-count="6"]),
	.mi-service-body .mi-svc-steps,
	.mi-service-body .mi-svc-steps:is([data-count="2"], [data-count="3"], [data-count="5"], [data-count="6"]),
	.mi-service-body .mi-svc-related,
	.mi-service-body .mi-svc-related[data-count="2"] {
		grid-template-columns: minmax(0, 1fr);
	}

	.mi-service-body .mi-svc-card {
		gap: 14px;
		padding: 18px;
	}

	.mi-service-body .mi-svc-card__icon {
		width: 44px;
		height: 44px;
	}

	.mi-service-body .mi-svc-card__icon .mi-ico {
		width: 22px;
		height: 22px;
	}

	.mi-service-body .mi-svc-steps {
		gap: 20px;
	}

	.mi-service-body .mi-svc-step {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr);
		gap: 0 16px;
		align-items: start;
	}

	.mi-service-body .mi-svc-step__num {
		width: 44px;
		height: 44px;
		margin: 0;
		font-size: 15px;
	}

	.mi-service-body .mi-svc-step__body {
		padding-top: 10px;
	}

	.mi-service-body .mi-svc-steps .mi-svc-step:not(:last-child)::after,
	.mi-service-body .mi-svc-steps:is([data-count="2"], [data-count="3"], [data-count="4"]) .mi-svc-step:not(:last-child)::after {
		content: "";
		display: block;
		position: absolute;
		top: 48px;
		bottom: -16px;
		left: 21.5px;
		right: auto;
		width: 1px;
		height: auto;
		background: #9fc0cb;
	}

	.elementor .mi-service-body .woocommerce ul.products.products {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.elementor .mi-service-body .woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
		aspect-ratio: 16 / 10;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mi-service-body [data-mi-arrow]::after,
	.mi-service-body .mi-svc-related__link::after,
	.mi-service-body .mi-svc-related__card,
	.elementor .mi-service-body .woocommerce ul.products li.product {
		transition: none;
	}
}

/* Products heading row: heading and advice on the left, "Shop all products" on the right (wraps below on phones). */
.elementor .mi-service-body [data-mi-svc="products-top"] > .e-con:first-child {
	flex: 1 1 30rem;
	width: auto;
}

.elementor .mi-service-body [data-mi-svc="products-top"] > [data-mi-arrow] {
	flex: 0 0 auto;
}

/* ---- Services overview page (Elementor page "Services"; root class mi-services-overview; layout and copy live there)
 * Hooks are data-mi-svo* / data-mi-arrow / data-mi-whatsapp attributes on the atomic elements. */

.mi-services-overview a:focus-visible {
	outline: 2px solid var(--mi-primary, #226480);
	outline-offset: 3px;
}

.mi-services-overview section[aria-labelledby="mi-svo-title"] a:focus-visible {
	outline-color: var(--mi-white, #fff);
}

.mi-services-overview [data-mi-arrow]::after {
	content: "\2192" / "";
	display: inline-block;
	margin-inline-start: 0.5em;
	transition: transform 0.2s;
}

.mi-services-overview [data-mi-arrow]:hover::after,
.mi-services-overview [data-mi-arrow]:focus-visible::after,
.mi-services-overview [data-mi-svo-card]:hover [data-mi-arrow]::after {
	transform: translateX(3px);
}

/* Section head: heading left, supporting line right (wraps below on narrow screens). */
.elementor .mi-services-overview [data-mi-svo="cards-top"] > .e-con:first-child {
	flex: 1 1 26rem;
	width: auto;
}

/* Service cards: the "Explore …" link covers the card; the card shows the link's focus. */
.elementor .mi-services-overview [data-mi-svo-link],
.elementor .mi-services-overview [data-mi-svo-card] .elementor-element:has([data-mi-svo-link]) {
	position: static;
}

.mi-services-overview [data-mi-svo-link]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.mi-services-overview [data-mi-svo-card]:has([data-mi-svo-link]:focus-visible) {
	outline: 2px solid var(--mi-primary, #226480);
	outline-offset: 3px;
}

.mi-services-overview [data-mi-svo-link]:focus-visible {
	outline: none;
}

/* Card photos: each photo cropped toward its equipment (the supplied photos have space on the left for text). */
.elementor .mi-services-overview [data-mi-svo-photo] {
	transform: scale(var(--mi-svo-zoom, 1));
	transform-origin: var(--mi-svo-focus, 50% 50%);
	object-position: var(--mi-svo-focus, 50% 50%);
}

.mi-services-overview [data-mi-svo-photo="network"] {
	--mi-svo-focus: 92% 42%;
	--mi-svo-zoom: 1.3;
}

.mi-services-overview [data-mi-svo-photo="cctv"] {
	--mi-svo-focus: 92% 50%;
	--mi-svo-zoom: 1.3;
}

.mi-services-overview [data-mi-svo-photo="it-support"] {
	--mi-svo-focus: 60% 55%;
	--mi-svo-zoom: 1.05;
}

.mi-services-overview [data-mi-svo-photo="printer"] {
	--mi-svo-focus: 86% 58%;
	--mi-svo-zoom: 1.25;
}

/* How we work: a fine line runs from each step's icon to the next step (desktop only). */
.mi-services-overview [data-mi-svo-step]:not(:last-child) > .e-con:first-child::after {
	content: "";
	flex: 1 1 auto;
	min-width: 16px;
	height: 1px;
	margin-right: -14px;
	background: #9fc0cb;
}

@media (max-width: 1024px) {
	.mi-services-overview [data-mi-svo-step]:not(:last-child) > .e-con:first-child::after {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mi-services-overview [data-mi-arrow]::after {
		transition: none;
	}

	.elementor .mi-services-overview [data-mi-svo-card] {
		transition: none;
	}

	.elementor .mi-services-overview [data-mi-svo-card]:hover {
		transform: none;
	}
}

/* ---- Homepage featured products (Elementor Home page → "Featured"; root class mi-featured) ------------------------
 * The cards are WooCommerce's own [products] loop (Astra markup), restyled here only: same products, prices, sale
 * badges, add-to-cart and TI Wishlist behaviour. Hooks: data-mi-featured / data-mi-arrow. */

.mi-featured a:focus-visible,
.mi-featured button:focus-visible {
	outline: 2px solid var(--mi-primary, #226480);
	outline-offset: 3px;
}

.mi-featured [data-mi-arrow]::after {
	content: "\2192" / "";
	display: inline-block;
	margin-inline-start: 0.5em;
	transition: transform 0.2s;
}

.mi-featured [data-mi-arrow]:hover::after,
.mi-featured [data-mi-arrow]:focus-visible::after {
	transform: translateX(3px);
}

/* Heading block takes the row; the button sits at its right (wraps below on narrow screens). */
.elementor .mi-featured [data-mi-featured="top"] > .e-con:first-child {
	flex: 1 1 26rem;
	width: auto;
}

/* Grid: 4 across on desktop, 3 on tablets, 2 on large phones, 1 on small phones. */
.elementor .mi-featured [data-mi-featured="products"] .woocommerce ul.products.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
}

.elementor .mi-featured [data-mi-featured="products"] .woocommerce ul.products::before,
.elementor .mi-featured [data-mi-featured="products"] .woocommerce ul.products::after {
	display: none;
}

.elementor .mi-featured .woocommerce ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto;
	margin: 0;
	padding: 14px 14px 16px;
	float: none;
	border: 1px solid #dfe8eb;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(14, 42, 56, 0.05);
	transition: box-shadow 0.2s, border-color 0.2s;
}

.elementor .mi-featured .woocommerce ul.products li.product:hover {
	border-color: #cbdbe0;
	box-shadow: 0 12px 28px rgba(14, 42, 56, 0.09);
}

/* Image well: same size on every card, pale background, whole product visible (contain). White product photos are
 * blended into the well (multiply) so they don't show as white rectangles. */
.elementor .mi-featured .woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 13 / 12;
	margin: 0 0 14px;
	padding: 6px;
	overflow: hidden;
	border-radius: 10px;
	background: #f2f5f7;
}

.elementor .mi-featured .woocommerce ul.products li.product .astra-shop-thumbnail-wrap > a.woocommerce-LoopProduct-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.elementor .mi-featured .woocommerce ul.products li.product .astra-shop-thumbnail-wrap img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
	mix-blend-mode: multiply;
	/* Products with wide white margins are scaled up around their centre (includes/featured-products.php). */
	transform: scale(var(--mi-fill, 1));
	transform-origin: var(--mi-fill-origin, 50% 50%);
}

/* Astra's hover cart icon duplicates the card's own button. */
.elementor .mi-featured .woocommerce ul.products li.product .astra-shop-thumbnail-wrap .ast-on-card-button.ast-select-options-trigger {
	display: none;
}

/* Sale badge: WooCommerce/Astra's own (only on products on sale), as a compact rust pill top-left in the image well. */
.elementor .mi-featured .woocommerce ul.products li.product .ast-onsale-card {
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	z-index: 2;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 3px 11px;
	border-radius: 999px;
	background: var(--mi-coral, #bf4d36);
	box-shadow: none;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
	color: #fff;
}

.elementor .mi-featured .woocommerce ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 0 4px;
}

.elementor .mi-featured .woocommerce ul.products li.product .ast-woo-product-category {
	margin: 0 0 4px;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 13px;
	line-height: 1.4;
	color: #5c6d76;
	text-transform: none;
	opacity: 1;
}

.elementor .mi-featured .woocommerce ul.products li.product a.ast-loop-product__link {
	color: var(--mi-navy, #0e2a38);
	text-decoration: none;
}

/* Full product name, wrapping naturally (no clamp: model and compatibility details stay visible). */
.elementor .mi-featured .woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 12px;
	padding: 0;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mi-navy, #0e2a38);
}

.elementor .mi-featured .woocommerce ul.products li.product a.ast-loop-product__link:hover .woocommerce-loop-product__title {
	color: var(--mi-primary, #226480);
	text-decoration: underline;
}

/* Price (WooCommerce's formatted price HTML): current price prominent in teal, the previous price small and muted;
 * pushed to the bottom so prices and buttons line up across a row. */
.elementor .mi-featured .woocommerce ul.products li.product .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	margin: auto 0 0;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mi-primary, #226480);
}

.elementor .mi-featured .woocommerce ul.products li.product .price ins {
	order: 0;
	text-decoration: none;
	color: inherit;
}

.elementor .mi-featured .woocommerce ul.products li.product .price del {
	order: 1;
	font-size: 14px;
	font-weight: 500;
	color: #6b7b84;
	opacity: 1;
}

.elementor .mi-featured .woocommerce ul.products li.product .cfvsw_variations_form {
	margin: 8px 0 0;
}

/* Purchase action: WooCommerce's own button (Add to cart / Select options / Read more), full-width teal. */
.elementor .mi-featured .woocommerce ul.products li.product a.button,
.elementor .mi-featured .woocommerce ul.products li.product a.button:hover,
.elementor .mi-featured .woocommerce ul.products li.product a.button:focus {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	width: 100%;
	min-height: 46px;
	margin: 12px 0 0;
	padding: 11px 14px;
	border: 0;
	border-radius: 8px;
	background: var(--mi-primary, #226480);
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	color: #fff;
	transition: background-color 0.2s;
}

.elementor .mi-featured .woocommerce ul.products li.product a.button:hover {
	background: var(--mi-primary-dark, #174a60);
}

.elementor .mi-featured .woocommerce ul.products li.product a.button:focus-visible {
	outline: 2px solid var(--mi-primary, #226480);
	outline-offset: 3px;
}

.elementor .mi-featured .woocommerce ul.products li.product a.button.loading {
	opacity: 0.7;
}

/* Cart icon on "Add to cart" buttons only (Lucide shopping-cart, in the text colour). */
.elementor .mi-featured .woocommerce ul.products li.product a.button.add_to_cart_button::before {
	content: "";
	flex-shrink: 0;
	width: 1.15em;
	height: 1.15em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") center / contain no-repeat;
}

.elementor .mi-featured .woocommerce ul.products li.product a.added_to_cart {
	display: block;
	margin: 8px 0 0;
	padding: 0;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	color: var(--mi-primary, #226480);
}

/* TI Wishlist: its own button, shown as a compact heart top-right in the image well (accessible name kept; the long
 * "Add to Wishlist" text is visually hidden, not removed). */
.elementor .mi-featured .woocommerce ul.products li.product .tinvwl-loop-button-wrapper {
	position: absolute;
	top: 26px;
	right: 26px;
	z-index: 2;
	margin: 0;
	padding: 0;
}

.elementor .mi-featured .woocommerce ul.products li.product .tinvwl-loop-button-wrapper .tinv-wishlist-clear,
.elementor .mi-featured .woocommerce ul.products li.product .tinvwl-loop-button-wrapper .tinvwl-tooltip {
	display: none;
}

.elementor .mi-featured .woocommerce ul.products li.product .tinvwl-loop-button-wrapper a.tinvwl_add_to_wishlist_button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 1px solid #dfe8eb;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(14, 42, 56, 0.08);
	color: var(--mi-navy, #0e2a38);
	text-decoration: none;
}

.elementor .mi-featured .woocommerce ul.products li.product .tinvwl-loop-button-wrapper a.tinvwl_add_to_wishlist_button::before {
	margin: 0;
	font-size: 18px;
	line-height: 1;
}

.elementor .mi-featured .woocommerce ul.products li.product .tinvwl-loop-button-wrapper a.tinvwl_add_to_wishlist_button:hover,
.elementor .mi-featured .woocommerce ul.products li.product .tinvwl-loop-button-wrapper a.tinvwl_add_to_wishlist_button.tinvwl-product-in-list {
	border-color: var(--mi-coral, #bf4d36);
	color: var(--mi-coral, #bf4d36);
}

.elementor .mi-featured .woocommerce ul.products li.product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

@media (max-width: 1024px) {
	.elementor .mi-featured [data-mi-featured="products"] .woocommerce ul.products.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}
}

@media (max-width: 767px) {
	.elementor .mi-featured [data-mi-featured="products"] .woocommerce ul.products.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
}

/* Small phones: one card per row, so full titles, prices and buttons stay comfortable. */
@media (max-width: 519px) {
	.elementor .mi-featured [data-mi-featured="products"] .woocommerce ul.products.products {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.elementor .mi-featured .woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
		aspect-ratio: 16 / 9;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mi-featured [data-mi-arrow]::after,
	.elementor .mi-featured .woocommerce ul.products li.product,
	.elementor .mi-featured .woocommerce ul.products li.product a.button {
		transition: none;
	}
}

/* ---- Checkout (classic [woocommerce_checkout] page; body class mi-checkout from includes/checkout.php) -----------
 * Two columns from 900px: delivery details card | sticky order summary (heading added inside #order_review, so
 * WooCommerce's own "Your order" heading is hidden). Fields 48px, teal focus ring, coral invalid state. */

body.mi-checkout .entry-header {
	margin-bottom: 20px;
}

body.mi-checkout .entry-title {
	font-family: var(--mi-font-heading, "Plus Jakarta Sans"), sans-serif;
	font-size: clamp(28px, 3vw, 36px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--mi-heading, #0e2a38);
}

/* Reassurance strip */
.entry-content .mi-checkout-assure {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.mi-checkout-assure li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--mi-border, #dce6ea);
	border-radius: 12px;
	background: var(--mi-light, #f3f7f8);
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 14px;
	line-height: 1.45;
	color: var(--mi-text, #4a5a63);
}

.mi-checkout-assure strong {
	display: block;
	margin-bottom: 2px;
	font-size: 15px;
	font-weight: 700;
	color: var(--mi-heading, #0e2a38);
}

.mi-checkout-assure__icon {
	display: inline-flex;
	flex: 0 0 36px;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff;
	color: var(--mi-primary, #226480);
}

.mi-checkout-assure__icon svg {
	width: 20px;
	height: 20px;
}

.mi-checkout-assure a {
	color: var(--mi-primary, #226480);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mi-checkout-assure a:hover {
	color: var(--mi-primary-dark, #1a4f66);
}

/* Notices (e.g. "added to your cart", validation errors) */
body.mi-checkout .woocommerce-notices-wrapper .woocommerce-message,
body.mi-checkout .woocommerce-NoticeGroup .woocommerce-error,
body.mi-checkout .woocommerce > .woocommerce-error {
	margin: 0 0 20px;
	padding: 14px 18px 14px 48px;
	border: 1px solid var(--mi-border, #dce6ea);
	border-left: 4px solid var(--mi-primary, #226480);
	border-radius: 10px;
	background: #fff;
	font-size: 15px;
	line-height: 1.5;
	color: var(--mi-heading, #0e2a38);
}

/* WooCommerce moves focus to new notices (for screen readers); a soft ring instead of the browser's black one. */
body.mi-checkout .woocommerce-message:focus,
body.mi-checkout .woocommerce-error:focus,
body.mi-checkout .woocommerce-info:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(34, 100, 128, 0.2);
}

body.mi-checkout .woocommerce-notices-wrapper .woocommerce-message::before {
	top: 15px;
	left: 18px;
	color: var(--mi-primary, #226480);
}

body.mi-checkout .woocommerce-notices-wrapper .woocommerce-message .button {
	min-height: 0;
	padding: 6px 14px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.4;
}

body.mi-checkout .woocommerce-NoticeGroup .woocommerce-error,
body.mi-checkout .woocommerce > .woocommerce-error {
	border-left-color: var(--mi-coral, #bf4d36);
}

body.mi-checkout .woocommerce-NoticeGroup .woocommerce-error::before,
body.mi-checkout .woocommerce > .woocommerce-error::before {
	top: 15px;
	left: 18px;
	color: var(--mi-coral, #bf4d36);
}

body.mi-checkout .woocommerce-error li {
	margin: 0;
}

body.mi-checkout .woocommerce-error li + li {
	margin-top: 4px;
}

/* Layout */
body.mi-checkout.woocommerce-page form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

body.mi-checkout form.checkout::before,
body.mi-checkout form.checkout::after {
	display: none;
}

body.mi-checkout.woocommerce-page form.checkout > .woocommerce-NoticeGroup {
	grid-column: 1 / -1;
}

body.mi-checkout.woocommerce-page form.checkout #customer_details,
body.mi-checkout.woocommerce-page form.checkout #order_review {
	float: none;
	width: auto;
	margin: 0;
	border: 1px solid var(--mi-border, #dce6ea);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(14, 42, 56, 0.06);
}

body.mi-checkout.woocommerce-page form.checkout #customer_details {
	padding: 28px 28px 8px;
}

body.mi-checkout.woocommerce-page form.checkout #customer_details .col-1,
body.mi-checkout.woocommerce-page form.checkout #customer_details .col-2 {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

body.mi-checkout.woocommerce-page form.checkout #order_review_heading {
	display: none;
}

/* Astra pads the summary with "form #order_review:not(.elementor-widget-… #order_review)" (two ids); the :not(#…)
 * below matches that weight. */
body.mi-checkout.woocommerce-page form.checkout #order_review:not(#mi-checkout-none) {
	padding: 24px;
}

@media (min-width: 900px) {
	body.mi-checkout.woocommerce-page form.checkout {
		grid-template-columns: minmax(0, 1fr) 400px;
		gap: 28px;
	}

	body.mi-checkout.woocommerce-page form.checkout #order_review {
		position: sticky;
		top: 24px;
	}
}

@media (min-width: 1200px) {
	body.mi-checkout.woocommerce-page form.checkout {
		grid-template-columns: minmax(0, 1fr) 440px;
		gap: 32px;
	}

	body.mi-checkout.woocommerce-page form.checkout #customer_details {
		padding: 32px 36px 12px;
	}

	body.mi-checkout.woocommerce-page form.checkout #order_review:not(#mi-checkout-none) {
		padding: 28px;
	}
}

/* Headings (Astra styles "#customer_details h3", hence the id here) */
body.mi-checkout.woocommerce-page form.checkout #customer_details .woocommerce-billing-fields > h3,
body.mi-checkout.woocommerce-page .mi-checkout-summary__title {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	font-family: var(--mi-font-heading, "Plus Jakarta Sans"), sans-serif;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--mi-heading, #0e2a38);
}

body.mi-checkout.woocommerce-page form.checkout .woocommerce-additional-fields > h3 {
	display: none;
}

/* Fields */
body.mi-checkout.woocommerce-page form.checkout .form-row {
	margin: 0 0 18px;
	padding: 0;
}

body.mi-checkout.woocommerce-page form.checkout .form-row-first,
body.mi-checkout.woocommerce-page form.checkout .form-row-last {
	width: calc(50% - 8px);
}

/* !important: WooCommerce's address script shows locale fields with an inline display:block. */
body.mi-checkout.woocommerce-page form.checkout .mi-co-fixed {
	display: none !important;
}

body.mi-checkout.woocommerce-page form.checkout .form-row label {
	margin: 0 0 6px;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mi-heading, #0e2a38);
}

body.mi-checkout.woocommerce-page form.checkout .form-row label .required {
	color: var(--mi-coral, #bf4d36);
	text-decoration: none;
}

body.mi-checkout.woocommerce-page form.checkout .form-row label .optional {
	font-weight: 400;
	color: var(--mi-text, #4a5a63);
}

body.mi-checkout.woocommerce-page form.checkout .form-row input.input-text,
body.mi-checkout.woocommerce-page form.checkout .form-row select,
body.mi-checkout.woocommerce-page form.checkout .form-row textarea {
	width: 100%;
	min-height: 48px;
	padding: 11px 14px;
	border: 1px solid #c5d3d9;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: none;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: var(--mi-heading, #0e2a38);
	transition: border-color 0.15s, box-shadow 0.15s;
}

body.mi-checkout.woocommerce-page form.checkout .form-row select {
	padding-right: 40px;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23226480' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
}

body.mi-checkout.woocommerce-page form.checkout .form-row textarea {
	min-height: 96px;
	resize: vertical;
}

body.mi-checkout.woocommerce-page form.checkout .form-row ::placeholder {
	color: #7b8a91;
	opacity: 1;
}

body.mi-checkout.woocommerce-page form.checkout .form-row input.input-text:hover,
body.mi-checkout.woocommerce-page form.checkout .form-row select:hover,
body.mi-checkout.woocommerce-page form.checkout .form-row textarea:hover {
	border-color: #9fb3bc;
}

body.mi-checkout.woocommerce-page form.checkout .form-row input.input-text:focus,
body.mi-checkout.woocommerce-page form.checkout .form-row select:focus,
body.mi-checkout.woocommerce-page form.checkout .form-row textarea:focus {
	border-color: var(--mi-primary, #226480);
	outline: none;
	box-shadow: 0 0 0 3px rgba(34, 100, 128, 0.18);
}

body.mi-checkout.woocommerce-page form.checkout .form-row.woocommerce-invalid input.input-text,
body.mi-checkout.woocommerce-page form.checkout .form-row.woocommerce-invalid select {
	border-color: var(--mi-coral, #bf4d36);
	box-shadow: 0 0 0 3px rgba(191, 77, 54, 0.12);
}

body.mi-checkout.woocommerce-page form.checkout .form-row.woocommerce-invalid label {
	color: var(--mi-coral, #bf4d36);
}

/* Order summary */
body.mi-checkout.woocommerce-page form.checkout #order_review .shop_table {
	margin: 0 0 20px;
	border: 0;
	border-radius: 0;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 15px;
	color: var(--mi-heading, #0e2a38);
}

body.mi-checkout.woocommerce-page form.checkout #order_review .shop_table thead {
	display: none;
}

body.mi-checkout.woocommerce-page form.checkout #order_review .shop_table th,
body.mi-checkout.woocommerce-page form.checkout #order_review .shop_table td {
	padding: 12px 0;
	border: 0;
	border-top: 1px solid var(--mi-border, #dce6ea);
	background: none;
	vertical-align: middle;
	line-height: 1.45;
}

body.mi-checkout.woocommerce-page form.checkout #order_review .shop_table tbody tr:first-child td {
	border-top: 0;
	padding-top: 0;
}

body.mi-checkout.woocommerce-page form.checkout #order_review .shop_table tfoot th {
	font-weight: 500;
	color: var(--mi-text, #4a5a63);
}

body.mi-checkout.woocommerce-page form.checkout #order_review .shop_table td:last-child,
body.mi-checkout.woocommerce-page form.checkout #order_review .shop_table tfoot td {
	padding-left: 12px;
	text-align: right;
	white-space: nowrap;
}

body.mi-checkout.woocommerce-page form.checkout #order_review .shop_table .woocommerce-shipping-totals td {
	white-space: normal;
}

body.mi-checkout.woocommerce-page form.checkout #order_review .shop_table .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.mi-checkout.woocommerce-page form.checkout #order_review .shop_table .woocommerce-shipping-methods label {
	font-weight: 500;
	color: var(--mi-heading, #0e2a38);
}

body.mi-checkout.woocommerce-page form.checkout #order_review .shop_table .order-total th,
body.mi-checkout.woocommerce-page form.checkout #order_review .shop_table .order-total td {
	padding-top: 16px;
	font-size: 18px;
	font-weight: 800;
	color: var(--mi-heading, #0e2a38);
}

body.mi-checkout.woocommerce-page form.checkout #order_review .shop_table .order-total .amount {
	color: var(--mi-primary, #226480);
}

.mi-checkout-item {
	display: flex;
	gap: 12px;
	align-items: center;
}

.mi-checkout-item__thumb {
	position: relative;
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	padding: 4px;
	border: 1px solid var(--mi-border, #dce6ea);
	border-radius: 10px;
	background: #fff;
}

.mi-checkout-item__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.mi-checkout-item__name {
	font-weight: 600;
	line-height: 1.4;
}

.mi-checkout-item__qty {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 500;
	color: var(--mi-text, #4a5a63);
}

body.mi-checkout.woocommerce-page form.checkout #order_review .product-name .product-quantity {
	font-weight: 500;
	color: var(--mi-text, #4a5a63);
	white-space: nowrap;
}

/* Payment and place order */
body.mi-checkout.woocommerce-page form.checkout #payment {
	border-radius: 0;
	background: none;
}

body.mi-checkout.woocommerce-page form.checkout #payment ul.payment_methods {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
}

body.mi-checkout.woocommerce-page form.checkout #payment ul.payment_methods li {
	margin: 0;
	padding: 14px 16px;
	border: 2px solid var(--mi-primary, #226480);
	border-radius: 10px;
	background: #f3f8fa;
	line-height: 1.4;
}

body.mi-checkout.woocommerce-page form.checkout #payment ul.payment_methods li label {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--mi-heading, #0e2a38);
}

body.mi-checkout.woocommerce-page form.checkout #payment ul.payment_methods li.payment_method_cod label::before {
	content: "";
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--mi-primary, #226480) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

body.mi-checkout.woocommerce-page form.checkout #payment div.payment_box {
	box-sizing: border-box;
	width: auto;
	margin: 6px 0 0;
	padding: 0 0 0 28px;
	background: none;
	font-size: 14px;
	color: var(--mi-text, #4a5a63);
}

body.mi-checkout.woocommerce-page form.checkout #payment div.payment_box::before {
	display: none;
}

body.mi-checkout.woocommerce-page form.checkout #payment div.payment_box p {
	margin: 0;
}

body.mi-checkout.woocommerce-page form.checkout #payment div.form-row.place-order {
	margin: 0;
	padding: 0;
}

body.mi-checkout .woocommerce-privacy-policy-text p,
body.mi-checkout .woocommerce-terms-and-conditions-wrapper {
	font-size: 13px;
	line-height: 1.55;
	color: var(--mi-text, #4a5a63);
}

body.mi-checkout .woocommerce-privacy-policy-text p {
	margin: 0 0 12px;
}

body.mi-checkout .woocommerce-terms-and-conditions-wrapper a,
body.mi-checkout .woocommerce-privacy-policy-text a {
	color: var(--mi-primary, #226480);
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.mi-checkout .woocommerce-terms-and-conditions-wrapper .form-row {
	margin: 0 0 14px;
}

/* The box hangs in the left padding, so the text (and the terms' required "*") wraps as one paragraph. */
body.mi-checkout.woocommerce-page form.checkout #payment .woocommerce-terms-and-conditions-wrapper label.checkbox {
	display: block;
	position: relative;
	padding-left: 28px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--mi-heading, #0e2a38);
}

/* Customer Reviews' consent box sits in the same wrapper (its paragraph needs the row spacing too). */
body.mi-checkout .woocommerce-terms-and-conditions-wrapper .cr-customer-consent {
	margin: 0 0 14px;
}

body.mi-checkout.woocommerce-page form.checkout #payment .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
	position: absolute;
	top: 1px;
	left: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--mi-primary, #226480);
}

body.mi-checkout.woocommerce-page form.checkout #payment #place_order {
	float: none;
	width: 100%;
	min-height: 52px;
	margin: 4px 0 0;
	padding: 14px 20px;
	border: 0;
	border-radius: 10px;
	background: var(--mi-primary, #226480);
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	transition: background-color 0.15s;
}

body.mi-checkout.woocommerce-page form.checkout #payment #place_order:hover {
	background: var(--mi-primary-dark, #1a4f66);
}

body.mi-checkout.woocommerce-page form.checkout #payment #place_order:focus-visible,
body.mi-checkout .woocommerce-notices-wrapper .button:focus-visible {
	outline: 2px solid var(--mi-primary, #226480);
	outline-offset: 3px;
}

/* Loading overlay WooCommerce shows while the totals refresh */
body.mi-checkout.woocommerce-page form.checkout #order_review .blockUI.blockOverlay {
	border-radius: 14px;
}

@media (max-width: 899px) {
	.entry-content .mi-checkout-assure {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.mi-checkout-assure li {
		padding: 12px 14px;
	}
}

@media (max-width: 599px) {
	body.mi-checkout.woocommerce-page form.checkout #customer_details {
		padding: 20px 16px 4px;
	}

	body.mi-checkout.woocommerce-page form.checkout #order_review:not(#mi-checkout-none) {
		padding: 20px 16px;
	}

	body.mi-checkout.woocommerce-page form.checkout .form-row-first,
	body.mi-checkout.woocommerce-page form.checkout .form-row-last {
		float: none;
		width: 100%;
	}

	body.mi-checkout.woocommerce-page form.checkout #customer_details .woocommerce-billing-fields > h3,
	body.mi-checkout.woocommerce-page .mi-checkout-summary__title {
		font-size: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.mi-checkout.woocommerce-page form.checkout .form-row input.input-text,
	body.mi-checkout.woocommerce-page form.checkout .form-row select,
	body.mi-checkout.woocommerce-page form.checkout .form-row textarea,
	body.mi-checkout.woocommerce-page form.checkout #payment #place_order {
		transition: none;
	}
}

/* ---- Legal pages (Privacy, Refund & Returns, Terms: Elementor pages with root class mi-legal; built by
 * build-legal.php). The policy text is a classic Text Editor widget; this sets its reading typography. */

.mi-legal .woocommerce-breadcrumb {
	margin: 0;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 14px;
	color: var(--mi-text, #4a5a63);
}

.mi-legal .woocommerce-breadcrumb a {
	color: var(--mi-text, #4a5a63);
	text-decoration: none;
}

.mi-legal .woocommerce-breadcrumb a:hover {
	color: var(--mi-primary, #226480);
	text-decoration: underline;
}

.mi-legal .elementor-widget-text-editor {
	max-width: 46rem;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 17px;
	line-height: 1.7;
	color: var(--mi-text, #4a5a63);
}

.mi-legal .elementor-widget-text-editor > :first-child,
.mi-legal .elementor-widget-text-editor .elementor-widget-container > :first-child {
	margin-top: 0;
}

.mi-legal .elementor-widget-text-editor h2 {
	margin: 2.2em 0 0.6em;
	padding-top: 1.4em;
	border-top: 1px solid var(--mi-border, #dce6ea);
	font-family: var(--mi-font-heading, "Plus Jakarta Sans"), sans-serif;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--mi-heading, #0e2a38);
}

.mi-legal .elementor-widget-text-editor h3 {
	margin: 1.5em 0 0.4em;
	font-family: var(--mi-font-heading, "Plus Jakarta Sans"), sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--mi-heading, #0e2a38);
}

.mi-legal .elementor-widget-text-editor p {
	margin: 0 0 1em;
}

.mi-legal .elementor-widget-text-editor ul,
.mi-legal .elementor-widget-text-editor ol {
	margin: 0 0 1.2em;
	padding-left: 1.4em;
}

.mi-legal .elementor-widget-text-editor li {
	margin: 0 0 0.45em;
	padding-left: 0.2em;
}

.mi-legal .elementor-widget-text-editor li::marker {
	color: var(--mi-primary, #226480);
	font-weight: 700;
}

.mi-legal .elementor-widget-text-editor strong {
	font-weight: 700;
	color: var(--mi-heading, #0e2a38);
}

.mi-legal .elementor-widget-text-editor a {
	color: var(--mi-primary, #226480);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mi-legal .elementor-widget-text-editor a:hover {
	color: var(--mi-primary-dark, #1a4f66);
}

.mi-legal a:focus-visible {
	outline: 2px solid var(--mi-primary, #226480);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (max-width: 767px) {
	.mi-legal .elementor-widget-text-editor {
		font-size: 16px;
	}

	.mi-legal .elementor-widget-text-editor h2 {
		font-size: 1.3rem;
	}
}

/* ---- Single product page (WooCommerce template + Astra summary; body class mi-pdp, markup changes in
 * includes/product-page.php, gallery thumbnails and quantity buttons in product-page.js) -----------------------------
 * Breadcrumb, then two equal columns: gallery (fixed-height stage + one scrolling row of thumbnails) and summary.
 * The stage height follows the window height so the image, thumbnails, title, price, highlights and Add to cart fit
 * in a 1366×720 window under the sticky header; tabs and related products follow below. One column below 860px. */

.mi-pdp .site-content > .ast-container {
	max-width: 1240px; /* 1200px of content, lined up with the header */
	padding-right: 20px;
	padding-left: 20px;
}

.mi-pdp.ast-plain-container .site-content > .ast-container > #primary {
	margin-top: 0;
	margin-bottom: 56px;
}

.mi-pdp .mi-pdp-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 8px;
	margin: 0;
	padding: 16px 0 14px;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 13px;
	line-height: 1.4;
	color: var(--mi-heading, #0e2a38);
}

.mi-pdp .mi-pdp-crumbs a {
	color: var(--mi-text, #4a5a63);
	text-decoration: none;
}

.mi-pdp .mi-pdp-crumbs a:hover {
	color: var(--mi-primary, #226480);
	text-decoration: underline;
}

.mi-pdp .mi-pdp-crumbs__sep {
	color: #8a9aa3;
}

/* Two columns. Everything else in the product (tabs, related products) spans both. */
.mi-pdp div.product {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: clamp(32px, 4vw, 56px);
	align-items: start;
}

.mi-pdp div.product > * {
	grid-column: 1 / -1;
}

/* Astra sets the 50% column widths with "#content .ast-woocommerce-container div.product div.images"; this is one class more. */
.mi-pdp.woocommerce #content .ast-woocommerce-container div.product > div.images,
.mi-pdp.woocommerce #content .ast-woocommerce-container div.product > div.summary {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	grid-row: 1;
}

.mi-pdp.woocommerce #content .ast-woocommerce-container div.product > div.images {
	grid-column: 1;
}

.mi-pdp.woocommerce #content .ast-woocommerce-container div.product > div.summary {
	grid-column: 2;
}

.mi-pdp div.product > .clear {
	display: none;
}

.mi-pdp div.product > .ast-onsale-card {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	margin: 0;
}

/* ---- Gallery ---- */
.mi-pdp div.product .woocommerce-product-gallery {
	--mi-pdp-stage: clamp(280px, calc(100vh - 340px), 460px);
	position: relative;
}

/* No frame around the main image (as on TP-Link's product pages). */
.mi-pdp div.product .woocommerce-product-gallery__image {
	background: #fff;
	overflow: hidden;
}

/* Whole product visible, centred, never stretched; the stage keeps one height whatever the image proportions. */
.mi-pdp div.product .woocommerce-product-gallery__image > a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--mi-pdp-stage);
	padding: 16px;
	box-sizing: border-box;
}

.mi-pdp.woocommerce div.product div.images .woocommerce-product-gallery__image > a > img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

/* No magnifier button: clicking (or Enter on) the image itself opens the same full-screen gallery. The hover-zoom
 * layer sits over the image link, so it lets clicks through (zoom tracks the pointer on the slide, not the layer). */
.mi-pdp div.product .woocommerce-product-gallery__trigger {
	display: none;
}

.mi-pdp div.product .woocommerce-product-gallery__image .zoomImg {
	pointer-events: none;
}

.mi-pdp div.product .woocommerce-product-gallery__image > a {
	cursor: zoom-in;
}

.mi-pdp div.product .woocommerce-product-gallery__image > a:focus-visible {
	outline: 2px solid var(--mi-primary, #226480);
	outline-offset: -2px;
}

/* One row of thumbnails; extra images scroll sideways (arrows, swipe or shift + wheel) instead of wrapping. */
.mi-pdp .mi-pdp-thumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
}

.mi-pdp.woocommerce div.product div.images .flex-control-thumbs {
	display: flex;
	flex: 1 1 auto;
	gap: 8px;
	min-width: 0;
	margin: 12px 0 0;
	padding: 2px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	list-style: none;
}

.mi-pdp.woocommerce div.product div.images .mi-pdp-thumbs .flex-control-thumbs {
	margin: 0;
}

.mi-pdp.woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar {
	display: none;
}

.mi-pdp.woocommerce div.product div.images .flex-control-thumbs li {
	flex: 0 0 68px;
	width: 68px;
	margin: 0;
	float: none;
	scroll-snap-align: start;
}

/* Thumbnails: a light border, highlighted only on the image being shown; the background stays white in every state
 * (the theme's and kit's button hover/focus colours would otherwise fill it). */
.mi-pdp .mi-pdp-thumbs__btn {
	display: block;
	width: 68px;
	height: 68px;
	margin: 0;
	padding: 5px;
	border: 1px solid var(--mi-border, #dce5e8);
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.mi-pdp .mi-pdp-thumbs__btn:hover,
.mi-pdp .mi-pdp-thumbs__btn:focus,
.mi-pdp .mi-pdp-thumbs__btn:active {
	border-color: var(--mi-border, #dce5e8);
	background: #fff;
	box-shadow: none;
}

.mi-pdp .mi-pdp-thumbs__btn[aria-current="true"] {
	border-color: var(--mi-primary, #226480);
	box-shadow: inset 0 0 0 1px var(--mi-primary, #226480);
}

.mi-pdp .mi-pdp-thumbs__btn:focus-visible,
.mi-pdp .mi-pdp-thumbs__arrow:focus-visible {
	outline: 2px solid var(--mi-primary, #226480);
	outline-offset: 2px;
}

.mi-pdp.woocommerce div.product div.images .flex-control-thumbs li img,
.mi-pdp.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 1;
}

.mi-pdp .mi-pdp-thumbs__arrow {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--mi-border, #dce5e8);
	border-radius: 50%;
	background: #fff;
	color: var(--mi-heading, #0e2a38);
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s;
}

.mi-pdp .mi-pdp-thumbs__arrow:hover,
.mi-pdp .mi-pdp-thumbs__arrow:focus,
.mi-pdp .mi-pdp-thumbs__arrow:active {
	background: #fff;
	box-shadow: none;
}

.mi-pdp .mi-pdp-thumbs__arrow:hover {
	border-color: var(--mi-primary, #226480);
	color: var(--mi-primary, #226480);
}

.mi-pdp .mi-pdp-thumbs__arrow[aria-disabled="true"] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.mi-pdp .mi-pdp-thumbs__arrow .mi-ico {
	width: 20px;
	height: 20px;
}

/* ---- Summary ---- */
.mi-pdp.woocommerce div.product div.summary {
	display: flex;
	flex-direction: column;
	font-family: var(--mi-font-body, Inter), sans-serif;
}

.mi-pdp div.product .mi-pdp-eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 8px;
	margin: 2px 0 8px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mi-pdp div.product .mi-pdp-eyebrow a {
	color: #5c6d76;
	text-decoration: none;
}

.mi-pdp div.product .mi-pdp-eyebrow a.mi-pdp-eyebrow__brand {
	color: var(--mi-primary, #226480);
	font-weight: 700;
}

.mi-pdp div.product .mi-pdp-eyebrow a:hover {
	text-decoration: underline;
}

.mi-pdp div.product .mi-pdp-eyebrow__sep {
	color: #8a9aa3;
}

.mi-pdp.woocommerce div.product .summary .product_title {
	margin: 0 0 10px;
	font-family: var(--mi-font-heading, 'Plus Jakarta Sans'), sans-serif;
	font-size: clamp(22px, 2vw, 28px);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.01em;
	color: var(--mi-heading, #0e2a38);
	overflow-wrap: anywhere;
}

.mi-pdp.woocommerce div.product .summary .woocommerce-product-rating {
	margin: 0 0 8px;
}

.mi-pdp.woocommerce div.product .summary p.price,
.mi-pdp.woocommerce div.product .summary span.price,
.mi-pdp.woocommerce div.product .woocommerce-variation-price .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	margin: 0 0 12px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--mi-navy, #0e2a38);
}

.mi-pdp.woocommerce div.product .summary .price ins {
	order: 0;
	text-decoration: none;
	color: inherit;
	font-weight: 700;
}

.mi-pdp.woocommerce div.product .summary .price del {
	order: 1;
	font-size: 15px;
	font-weight: 500;
	color: #6b7b84;
	opacity: 1;
}

.mi-pdp.woocommerce div.product .summary .woocommerce-product-details__short-description {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--mi-text, #4a5a63);
}

.mi-pdp.woocommerce div.product .summary .woocommerce-product-details__short-description > :last-child {
	margin-bottom: 0;
}

.mi-pdp div.product .mi-pdp-highlights {
	margin: 0 0 12px;
	padding: 10px 0;
	border-top: 1px solid var(--mi-border, #dce5e8);
	border-bottom: 1px solid var(--mi-border, #dce5e8);
	list-style: none;
}

.mi-pdp div.product .mi-pdp-highlights li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 3px 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--mi-heading, #0e2a38);
}

.mi-pdp div.product .mi-pdp-highlights .mi-ico {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	color: var(--mi-primary, #226480);
	stroke-width: 2.5;
}

.mi-pdp.woocommerce div.product .summary .stock {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.mi-pdp.woocommerce div.product .summary .stock::before {
	content: "";
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.mi-pdp.woocommerce div.product .summary .stock.in-stock {
	color: #1f7a45;
}

.mi-pdp.woocommerce div.product .summary .stock.out-of-stock {
	color: var(--mi-coral, #bf4d36);
}

/* Variable products: attribute choices, then the selected variation's price and stock, then the buy row. */
.mi-pdp.woocommerce div.product form.cart .variations {
	margin: 0 0 8px;
}

.mi-pdp.woocommerce div.product form.cart .variations th,
.mi-pdp.woocommerce div.product form.cart .variations td {
	padding: 4px 0;
	vertical-align: middle;
}

.mi-pdp.woocommerce div.product form.cart .variations th label {
	font-size: 14px;
	font-weight: 600;
	color: var(--mi-heading, #0e2a38);
}

.mi-pdp.woocommerce div.product form.cart .woocommerce-variation {
	margin: 0;
}

.mi-pdp.woocommerce div.product form.cart .woocommerce-variation-price .price {
	font-size: 22px;
	margin-bottom: 6px;
}

/* Buy row: quantity, Add to cart, wishlist. */
.mi-pdp.woocommerce div.product form.cart:not(.variations_form),
.mi-pdp.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	margin: 0 0 12px;
}

/* WooCommerce's clearfix pseudo-elements would count as flex items (an empty gap before the quantity). */
.mi-pdp.woocommerce div.product form.cart:not(.variations_form)::before,
.mi-pdp.woocommerce div.product form.cart:not(.variations_form)::after,
.mi-pdp.woocommerce div.product form.cart .woocommerce-variation-add-to-cart::before,
.mi-pdp.woocommerce div.product form.cart .woocommerce-variation-add-to-cart::after {
	display: none;
}

.mi-pdp.woocommerce div.product form.cart.variations_form {
	margin: 0 0 12px;
}

.mi-pdp.woocommerce div.product form.cart div.quantity {
	float: none;
	margin: 0;
}

.mi-pdp.woocommerce div.product form.cart div.quantity .qty {
	height: 48px;
	min-height: 48px;
	border-radius: 8px;
	font-size: 16px;
}

.mi-pdp.woocommerce div.product form.cart div.quantity.mi-pdp-qty {
	display: inline-flex;
	align-items: stretch;
	height: 48px;
	border: 1px solid #c9d6db;
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
}

.mi-pdp.woocommerce div.product form.cart div.quantity.mi-pdp-qty .qty {
	width: 48px;
	height: 46px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-weight: 600;
	text-align: center;
	color: var(--mi-heading, #0e2a38);
	-moz-appearance: textfield;
	appearance: textfield;
}

.mi-pdp.woocommerce div.product form.cart div.quantity.mi-pdp-qty .qty::-webkit-inner-spin-button,
.mi-pdp.woocommerce div.product form.cart div.quantity.mi-pdp-qty .qty::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.mi-pdp.woocommerce div.product form.cart div.quantity.mi-pdp-qty .qty:focus {
	outline: none;
	box-shadow: none;
}

.mi-pdp.woocommerce div.product form.cart div.quantity.mi-pdp-qty:focus-within {
	border-color: var(--mi-primary, #226480);
	box-shadow: 0 0 0 3px rgba(34, 100, 128, 0.18);
}

.mi-pdp .mi-pdp-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--mi-heading, #0e2a38);
	cursor: pointer;
}

.mi-pdp .mi-pdp-qty__btn:hover {
	background: var(--mi-light, #f3f7f8);
	color: var(--mi-primary, #226480);
}

.mi-pdp .mi-pdp-qty__btn:focus-visible {
	outline: 2px solid var(--mi-primary, #226480);
	outline-offset: -2px;
}

.mi-pdp .mi-pdp-qty__btn[aria-disabled="true"] {
	opacity: 0.35;
	cursor: default;
}

.mi-pdp .mi-pdp-qty__btn .mi-ico {
	width: 18px;
	height: 18px;
}

.mi-pdp.woocommerce div.product form.cart .single_add_to_cart_button.button {
	display: inline-flex;
	flex: 1 1 180px;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin: 0;
	padding: 10px 20px;
	border: 0;
	border-radius: 8px;
	background: var(--mi-primary, #226480);
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	transition: background-color 0.2s;
}

.mi-pdp.woocommerce div.product form.cart .single_add_to_cart_button.button:hover {
	background: var(--mi-primary-dark, #174a60);
	color: #fff;
}

.mi-pdp.woocommerce div.product form.cart .single_add_to_cart_button.button:focus-visible {
	outline: 2px solid var(--mi-primary, #226480);
	outline-offset: 3px;
}

/* TI Wishlist: a square heart button at the end of the row (its text stays as the accessible name). */
.mi-pdp.woocommerce div.product form.cart .tinv-wraper.tinvwl-after-add-to-cart {
	display: flex;
	flex: 0 0 48px;
	margin: 0;
}

.mi-pdp.woocommerce div.product form.cart .tinv-wishlist-clear {
	display: none;
}

.mi-pdp.woocommerce div.product form.cart .tinv-wraper a.tinvwl_add_to_wishlist_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0;
	border: 1px solid #c9d6db;
	border-radius: 8px;
	background: #fff;
	color: var(--mi-heading, #0e2a38);
}

.mi-pdp.woocommerce div.product form.cart .tinv-wraper a.tinvwl_add_to_wishlist_button::before {
	margin: 0;
	font-size: 20px;
}

.mi-pdp.woocommerce div.product form.cart .tinv-wraper a.tinvwl_add_to_wishlist_button:hover,
.mi-pdp.woocommerce div.product form.cart .tinv-wraper a.tinvwl_add_to_wishlist_button.tinvwl-product-in-list {
	border-color: var(--mi-coral, #bf4d36);
	color: var(--mi-coral, #bf4d36);
}

.mi-pdp.woocommerce div.product form.cart .tinv-wraper a.tinvwl_add_to_wishlist_button:focus-visible {
	outline: 2px solid var(--mi-primary, #226480);
	outline-offset: 2px;
}

.mi-pdp.woocommerce div.product form.cart .tinv-wraper .tinvwl_add_to_wishlist-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Add to quote (YITH) before the meta line, as a secondary button. YITH sets its colours (inline) and font size with
 * !important, hence the !important here. */
.mi-pdp div.product .summary .yith-ywraq-add-to-quote {
	order: 1;
	margin: 0 0 12px;
}

.mi-pdp div.product .summary .product_meta {
	order: 2;
}

.mi-pdp.woocommerce div.product .summary .add-request-quote-button.button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	padding: 10px 18px;
	border: 1px solid var(--mi-coral, #bf4d36);
	border-radius: 8px;
	background-color: #fff !important;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 15px !important;
	font-weight: 600;
	line-height: 1.2;
	color: var(--mi-coral, #bf4d36) !important;
}

.mi-pdp.woocommerce div.product .summary .add-request-quote-button.button:hover {
	background-color: var(--mi-coral, #bf4d36) !important;
	color: #fff !important;
}

.mi-pdp div.product .summary .yith_ywraq_add_item_response_message,
.mi-pdp div.product .summary .yith_ywraq_add_item_browse_message {
	font-size: 14px;
}

.mi-pdp.woocommerce div.product .summary .product_meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	padding-top: 12px;
	border-top: 1px solid var(--mi-border, #dce5e8);
	font-size: 13px;
	line-height: 1.5;
	color: #5c6d76;
}

.mi-pdp.woocommerce div.product .summary .product_meta > span {
	display: inline;
}

.mi-pdp.woocommerce div.product .summary .product_meta a {
	color: var(--mi-primary, #226480);
}

/* ---- Tabs and related products ---- */
.mi-pdp.woocommerce div.product .woocommerce-tabs {
	margin-top: 40px;
	padding-top: 0;
	border-top: 0;
}

.mi-pdp.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 28px;
	margin: 0 0 22px;
	padding: 0;
	border-bottom: 1px solid var(--mi-border, #dce5e8);
	overflow-x: auto;
	scrollbar-width: none;
}

.mi-pdp.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.mi-pdp.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.mi-pdp.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.mi-pdp.woocommerce div.product .woocommerce-tabs ul.tabs li {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.mi-pdp.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	margin-bottom: -1px;
	padding: 12px 0 11px;
	border-bottom: 2px solid transparent;
	font-family: var(--mi-font-body, Inter), sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #5c6d76;
	white-space: nowrap;
}

.mi-pdp.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--mi-heading, #0e2a38);
}

.mi-pdp.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	border-bottom-color: var(--mi-primary, #226480);
	color: var(--mi-primary, #226480);
}

.mi-pdp.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus-visible {
	outline: 2px solid var(--mi-primary, #226480);
	outline-offset: 2px;
}

.mi-pdp.woocommerce div.product .woocommerce-tabs .panel {
	max-width: 880px;
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
}

.mi-pdp.woocommerce div.product .woocommerce-tabs .panel h2,
.mi-pdp.woocommerce div.product .woocommerce-tabs .panel h3 {
	margin: 1.2em 0 0.5em;
	font-size: 20px;
	line-height: 1.3;
}

.mi-pdp.woocommerce div.product .woocommerce-tabs .panel > :first-child,
.mi-pdp .mi-pdp-overview .woocommerce-product-details__short-description > :first-child {
	margin-top: 0;
}

.mi-pdp div.product .related.products,
.mi-pdp div.product .upsells.products {
	margin-top: 40px;
}

.mi-pdp div.product .related.products > h2,
.mi-pdp div.product .upsells.products > h2 {
	margin-bottom: 18px;
	font-size: 24px;
}

/* ---- Tablet and phone ---- */
@media (max-width: 859px) {
	.mi-pdp div.product {
		grid-template-columns: minmax(0, 1fr);
	}

	.mi-pdp.woocommerce #content .ast-woocommerce-container div.product > div.images,
	.mi-pdp.woocommerce #content .ast-woocommerce-container div.product > div.summary {
		grid-column: 1;
		grid-row: auto;
	}

	.mi-pdp.woocommerce #content .ast-woocommerce-container div.product > div.images {
		margin-bottom: 20px;
	}

	.mi-pdp div.product .woocommerce-product-gallery {
		--mi-pdp-stage: clamp(240px, 80vw, 420px);
	}
}

@media (max-width: 599px) {
	.mi-pdp .site-content > .ast-container {
		padding-right: 16px;
		padding-left: 16px;
	}

	.mi-pdp .mi-pdp-crumbs {
		padding: 10px 0;
		font-size: 12px;
	}

	.mi-pdp.woocommerce div.product div.images .flex-control-thumbs li,
	.mi-pdp .mi-pdp-thumbs__btn {
		flex-basis: 60px;
		width: 60px;
		height: 60px;
	}

	.mi-pdp.woocommerce div.product .summary p.price,
	.mi-pdp.woocommerce div.product .summary span.price {
		font-size: 24px;
	}

	.mi-pdp.woocommerce div.product .woocommerce-tabs {
		margin-top: 28px;
	}

	.mi-pdp.woocommerce div.product .woocommerce-tabs ul.tabs {
		gap: 22px;
	}

	/* Quantity, Add to cart and the heart stay on one row down to 360px. */
	.mi-pdp.woocommerce div.product form.cart .single_add_to_cart_button.button {
		flex-basis: 110px;
		padding-right: 12px;
		padding-left: 12px;
	}
}

/* Touch screens: 44px targets for the arrows and quantity buttons. */
@media (pointer: coarse) {
	.mi-pdp .mi-pdp-thumbs__arrow {
		width: 44px;
		height: 44px;
	}

	.mi-pdp .mi-pdp-qty__btn {
		width: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mi-pdp.woocommerce div.product div.images .flex-control-thumbs {
		scroll-behavior: auto;
	}
}