/*
Theme Name: mohoUI
Theme URI: http://206.189.142.193/moho
Description: Custom child theme for Moho UI development. Parent: "Moho Base" (an editable copy of Storefront). Put custom CSS in support.css (it loads last, so your rules win); build larger changes against the Moho Base parent.
Author: Moho
Template: moho-base
Version: 1.0.0
*/

/* =========================================================================
   Header  (markup: header.php)
   Font: Georama (enqueued in functions.php)
   Sized to the 1512px design: 73px side gutter, 126px bar, 36px item gaps.
   ========================================================================= */
:root {
	--mohoui-gutter: 73px;
	--mohoui-header-h: 126px;
	--mohoui-header-h-s: 84px; /* fixed header once scrolled */
	--mohoui-dark: #1e1a17;
	--mohoui-line: rgba(255, 255, 255, .22);
	--mohoui-title-font: "Beautique Display", Georgia, serif;
	--mohoui-plum: #5f1b47;
}

/* Focus, site-wide: no outline when clicking/tapping (Storefront draws a 2px outline
   on every focused link/button/input). Keyboard users still get a plum outline on
   links and buttons via :focus-visible. Form fields never get one (they show a caret). */
html { -webkit-tap-highlight-color: transparent; }
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
input[type="button"]:focus:not(:focus-visible),
input[type="submit"]:focus:not(:focus-visible) { outline: none; }
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible { outline: 2px solid var(--mohoui-plum); outline-offset: 2px; }
input:focus,
select:focus,
textarea:focus { outline: none; }

.mohoui-header,
.mohoui-header *,
.mohoui-hero,
.mohoui-hero * { font-family: "Georama", sans-serif; }

.site-header.mohoui-header {
	position: relative;
	z-index: 50;
	margin: 0;
	padding: 0 var(--mohoui-gutter);
	background: var(--mohoui-dark);
	border: 0;
	color: #fff;
}

/* Transparent header over a hero (product category pages get this body class) */
.mohoui-header-overlay .site-header.mohoui-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
}
.admin-bar.mohoui-header-overlay .site-header.mohoui-header { top: 32px; }

.mohoui-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	box-sizing: border-box;
	max-width: 1366px;
	height: var(--mohoui-header-h);
	margin: 0 auto;
	border-bottom: 1px solid var(--mohoui-line);
}

/* Logo */
.mohoui-logo { justify-self: start; display: block; line-height: 0; }
.mohoui-logo img { display: block; width: 75px; height: 76px; }

/* Primary menu — centred on the page (site-header prefix beats the parent's float/width rules) */
.site-header.mohoui-header .main-navigation {
	justify-self: center;
	width: max-content;
	margin: 0;
	padding: 0;
	float: none;
	clear: none;
	background: transparent;
}
.mohoui-header .main-navigation ul.menu,
.mohoui-header .main-navigation ul.nav-menu {
	display: flex;
	align-items: center;
	gap: 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mohoui-header .main-navigation ul.menu > li,
.mohoui-header .main-navigation ul.nav-menu > li { margin: 0; padding: 0; }
.mohoui-header .main-navigation ul.menu > li > a,
.mohoui-header .main-navigation ul.nav-menu > li > a {
	display: inline-flex;
	white-space: nowrap;
	align-items: center;
	padding: 10px 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0;
	color: #fff;
	text-decoration: none;
	background: transparent;
}
.mohoui-header .main-navigation ul.menu > li > a:hover,
.mohoui-header .main-navigation ul.menu > li > a:focus { color: #fff; opacity: .75; }

/* Chevron (replaces the triangle caret from mu-plugins/moho-header/menu.css) */
.mohoui-header .main-navigation ul.menu > li.menu-item-has-children > a::after,
.mohoui-header .main-navigation ul.nav-menu > li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	position: static;
	width: 5px;
	height: 5px;
	margin: -4px 1px 0 10px;
	border: 0;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: 1;
}

/* Dropdown panels */
.mohoui-header .main-navigation ul.menu ul.sub-menu,
.mohoui-header .main-navigation ul.nav-menu ul.sub-menu {
	top: 100%;
	background: #fff;
	border: 0;
	border-radius: 2px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
	min-width: 250px;
}
.mohoui-header .main-navigation ul.menu ul.sub-menu li a,
.mohoui-header .main-navigation ul.nav-menu ul.sub-menu li a { color: #2b2b2b; font-size: 15px; }

/* Right-hand actions */
.mohoui-header__actions {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 36px;
}
.mohoui-call {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	height: 40px;
	box-sizing: border-box;
	padding: 0 20px 0 21px;
	border: 1px solid rgba(255, 255, 255, .6);
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .03em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s ease;
}
.mohoui-call:hover,
.mohoui-call:focus { background: rgba(255, 255, 255, .12); color: #fff; }
.mohoui-call img { display: block; width: 22px; height: 22px; }

.mohoui-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
	line-height: 0;
}
.mohoui-icon:hover,
.mohoui-icon:focus { background: transparent; opacity: .75; }
.mohoui-icon img { display: block; }

/* Cart badge (only rendered when the cart has items) */
.mohoui-cart-count {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: 8px;
	background: #fff;
	color: var(--mohoui-dark);
	font-size: 10px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
}

/* Search panel */
.mohoui-search {
	box-sizing: border-box;
	max-width: 1366px;
	margin: 0 auto;
	padding: 16px 0;
}
.mohoui-search[hidden] { display: none; }
.mohoui-search form { display: flex; gap: 8px; margin: 0; }
.mohoui-search input[type="search"] {
	flex: 1;
	height: 44px;
	padding: 0 16px;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 0;
	background: rgba(0, 0, 0, .25);
	color: #fff;
	font-size: 16px;
	box-shadow: none;
}
.mohoui-search input[type="search"]::placeholder { color: rgba(255, 255, 255, .65); }
.mohoui-search button[type="submit"] {
	height: 44px;
	padding: 0 24px;
	border: 1px solid #fff;
	border-radius: 0;
	background: #fff;
	color: var(--mohoui-dark);
	font-weight: 500;
}
.mohoui-search .screen-reader-text { display: none; }

/* =========================================================================
   Light header — pages without the hero banner (header.php adds
   .mohoui-header--light). White bar, dark text; the white SVG icons and logo
   are tinted to #333 with a CSS filter.
   ========================================================================= */
.site-header.mohoui-header--light { background: #fff; color: #333; }
.mohoui-header--light .mohoui-header__inner { border-bottom-color: #e3e3e3; }
.mohoui-header--light .mohoui-logo img,
.mohoui-header--light .mohoui-icon img,
.mohoui-header--light .mohoui-call img { filter: brightness(0) invert(.2); }
.mohoui-header--light .main-navigation ul.menu > li > a,
.mohoui-header--light .main-navigation ul.nav-menu > li > a,
.mohoui-header--light .main-navigation ul.menu > li > a:hover,
.mohoui-header--light .main-navigation ul.menu > li > a:focus, /* a focused link (e.g. after Back) stays dark on the white header */
.mohoui-header--light .main-navigation ul.menu > li.current-menu-item > a { color: #333; }
.mohoui-header--light .mohoui-call { border-color: #b5b5b5; color: #222; }
.mohoui-header--light .mohoui-call:hover,
.mohoui-header--light .mohoui-call:focus { background: #f4f4f4; color: #222; }
.mohoui-header--light .mohoui-cart-count { background: var(--mohoui-plum); color: #fff; }
.mohoui-header--light .mohoui-search { background: #fff; }
.mohoui-header--light .mohoui-search input[type="search"] { border-color: #cfcfcf; background: #fff; color: #222; }
.mohoui-header--light .mohoui-search input[type="search"]::placeholder { color: #999; }
.mohoui-header--light .mohoui-search button[type="submit"] { border-color: #222; background: #222; color: #fff; }

/* Breadcrumb under the light header */
.storefront-breadcrumb {
	margin: 0;
	padding: 22px var(--mohoui-gutter) 0;
	background: transparent;
}
.storefront-breadcrumb > .col-full { max-width: 1366px; margin: 0 auto; padding: 0; }
.storefront-breadcrumb .woocommerce-breadcrumb {
	margin: 0;
	padding: 0;
	font-family: "Georama", sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: #222;
}
.storefront-breadcrumb .woocommerce-breadcrumb a { color: #9a9a9a; text-decoration: none; }
.storefront-breadcrumb .woocommerce-breadcrumb a:hover,
.storefront-breadcrumb .woocommerce-breadcrumb a:focus { color: #222; }
.storefront-breadcrumb .woocommerce-breadcrumb a:first-of-type::before { content: none; display: none; }
/* Storefront hides the "/" (text-indent -9999px) for an icon we removed; show the slash at every width */
.storefront-breadcrumb .breadcrumb-separator { width: auto; margin: 0 10px; padding: 0; text-indent: 0; color: #9a9a9a; }
.storefront-breadcrumb .breadcrumb-separator::before,
.storefront-breadcrumb .breadcrumb-separator::after { content: none; }

@media (max-width: 767px) {
	.site-header.mohoui-header--light .main-navigation .menu-toggle,
	.site-header.mohoui-header--light .main-navigation .menu-toggle:hover,
	.site-header.mohoui-header--light .main-navigation .menu-toggle:focus,
	.site-header.mohoui-header--light .main-navigation .menu-toggle span { color: #333; }
	.site-header.mohoui-header--light .main-navigation.toggled .primary-navigation { background: #fff; border-bottom: 1px solid #e3e3e3; }
	.storefront-breadcrumb { padding-top: 16px; }
	.storefront-breadcrumb .woocommerce-breadcrumb { font-size: 13px; line-height: 1.7; }
	/* Storefront hides the "/" on phones (width 0, text-indent -9999px) for an icon we removed; show the slash again */
	.storefront-breadcrumb .woocommerce-breadcrumb .breadcrumb-separator { display: inline; width: auto; margin: 0 6px; text-indent: 0; }
}

/* =========================================================================
   Home hero  (markup: mohoui_category_hero() in functions.php, motion: hero.js)
   -------------------------------------------------------------------------
   Layers: media (image, pinned by hero.js) < content (scrolls).
   The content column holds three blocks; the hero is as tall as the content,
   and the image stays pinned for that whole distance.
   Without JS the image simply covers the first screen.
   ========================================================================= */
@font-face {
	font-family: "Beautique Display";
	src: url("assets/fonts/BeautiqueDisplay-Medium.woff2") format("woff2"),
		url("assets/fonts/BeautiqueDisplay-Medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

.mohoui-hero {
	position: relative;
	background: #000;
	color: #fff;
}
.mohoui-hero__media {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	min-height: 560px;
	overflow: hidden;
}
.mohoui-hero__img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	will-change: transform;
}
.mohoui-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, .12) 30%, rgba(0, 0, 0, .12) 100%);
	pointer-events: none;
}

.mohoui-hero__content { position: relative; z-index: 2; }

/* Breadcrumb under the header (scrolls with the text) */
.mohoui-hero__top {
	position: absolute;
	z-index: 3;
	top: var(--mohoui-header-h);
	left: 0;
	right: 0;
	box-sizing: border-box;
	max-width: calc(1366px + 2 * var(--mohoui-gutter));
	margin: 0 auto;
	padding: 22px var(--mohoui-gutter) 0;
}
.mohoui-breadcrumb { font-size: 16px; line-height: 1.4; color: #fff; }
.mohoui-breadcrumb a { color: rgba(255, 255, 255, .6); text-decoration: none; }
.mohoui-breadcrumb a:hover,
.mohoui-breadcrumb a:focus { color: #fff; }
.mohoui-breadcrumb .sep { margin: 0 10px; color: rgba(255, 255, 255, .6); }

/* Block 1 — Range / title, one full screen */
.mohoui-hero__body {
	height: 100vh;
	min-height: 560px;
	box-sizing: border-box;
	padding: 30px var(--mohoui-gutter) 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
/* Step mode (hero.js adds .is-steps): a one-screen stage pinned by GSAP; the
   three text blocks become stacked layers that cross-fade over the image. */
.mohoui-hero.is-steps { height: 100vh; min-height: 560px; overflow: hidden; }
.mohoui-hero.is-steps .mohoui-hero__media { height: 100%; }
.mohoui-hero.is-steps .mohoui-hero__content { position: absolute; inset: 0; }
.mohoui-hero.is-steps .mohoui-hero__body,
.mohoui-hero.is-steps .mohoui-hero__statement,
.mohoui-hero.is-steps .mohoui-hero__story {
	position: absolute;
	inset: 0;
	margin: 0 auto;
}
.mohoui-hero.is-steps .mohoui-hero__body { height: auto; min-height: 0; }
.mohoui-hero.is-steps .mohoui-hero__statement {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--mohoui-gutter);
}
.mohoui-hero.is-steps .mohoui-hero__story {
	align-content: center;
	padding: 0 var(--mohoui-gutter);
}
@media (max-width: 1023px) {
	.mohoui-hero.is-steps .mohoui-hero__story { padding-top: 0; padding-bottom: 0; }
}
@media (max-width: 767px) {
	.mohoui-hero.is-steps .mohoui-hero__statement { padding-top: 0; }
	.mohoui-hero.is-steps .mohoui-hero__story { padding: 0 var(--mohoui-gutter); }
}

/* Text intro on load (CSS, so the title never stays hidden if scripts stall) */
@keyframes mohoui-rise {
	from { opacity: 0; transform: translateY(40px); }
	to   { opacity: 1; transform: none; }
}
@media all { /* banners animate on every phone, "reduce motion" or not (client request) */
	.mohoui-hero__body > * { animation: mohoui-rise 1.1s cubic-bezier(.215, .61, .355, 1) .15s both; }
	.mohoui-hero__body > * + * { animation-delay: .27s; }
}

.mohoui-hero__eyebrow {
	font-size: 18px;
	font-weight: 400;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1;
	margin-bottom: 6px;
}
.mohoui-hero .mohoui-hero__title,
.mohoui-hero .mohoui-display {
	margin: 0;
	font-family: var(--mohoui-title-font);
	font-weight: 500;
	letter-spacing: -.01em;
	color: #fff;
}
.mohoui-hero .mohoui-hero__title { font-size: 54px; line-height: 1.2; }
.mohoui-hero .mohoui-display { font-size: 54px; line-height: 1.24; }

/* Block 2 — centred statement */
.mohoui-hero__statement {
	max-width: calc(800px + 2 * var(--mohoui-gutter));
	margin: 0 auto;
	padding: 170px var(--mohoui-gutter) 0;
	text-align: center;
}

/* Block 3 — heading left, paragraph right */
.mohoui-hero__story {
	display: grid;
	grid-template-columns: 1fr 480px;
	grid-template-rows: auto auto;
	column-gap: 80px;
	row-gap: 80px;
	max-width: calc(1366px + 2 * var(--mohoui-gutter));
	box-sizing: border-box;
	margin: 0 auto;
	padding: 640px var(--mohoui-gutter) 160px;
}
.mohoui-hero__story h2 { grid-column: 1; max-width: 760px; }
.mohoui-hero__story p {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
	color: rgba(255, 255, 255, .92);
}

/* =========================================================================
   Range cards under the home hero  (markup: mohoui_range_cards())
   Three 428×150 images with labels; the active card's label becomes a pill.
   ========================================================================= */
.mohoui-ranges {
	box-sizing: border-box;
	max-width: calc(1366px + 2 * var(--mohoui-gutter));
	margin: 0 auto;
	padding: 80px var(--mohoui-gutter);
	background: #fff;
	scroll-margin-top: 0;
}
.mohoui-ranges__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 41px;
}
.mohoui-range {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: #333;
}
.mohoui-range:hover,
.mohoui-range:focus { color: #000; }
.mohoui-range__img {
	display: block;
	width: 100%;
	aspect-ratio: 428 / 150;
	overflow: hidden;
	background: #eee;
}
.mohoui-range__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.215, .61, .355, 1);
}
.mohoui-range:hover .mohoui-range__img img { transform: scale(1.05); }
/* Selected card: dimmed image with a round check mark in the centre */
.mohoui-range__img { position: relative; }
.mohoui-range.is-active .mohoui-range__img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .35);
}
.mohoui-range__check {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	box-sizing: border-box;
	height: 52px;
	border-radius: 50%;
	border: 1px solid #fff;
	background: rgba(255, 255, 255, .18);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: #fff;
	transform: translate(-50%, -50%);
	animation: mohoui-check-in .35s cubic-bezier(.215, .61, .355, 1) both;
}
.mohoui-range__check svg { display: block; }
@keyframes mohoui-check-in {
	from { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
	to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.mohoui-range__label {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 32px;
	margin-top: 19px;
	padding: 0 12px;
	font-family: "Georama", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	transition: background .2s ease, color .2s ease;
}
.mohoui-ranges__nav { display: none; }

/* =========================================================================
   Home product grid  (toolbar: mohoui_shop_toolbar(); cards: moho-swatches markup)
   Scoped to the home grid and the Related / Upsell products on product pages.
   Card order is set with flex `order`:
   image → colour swatches → title → description → divider → price.
   ========================================================================= */
.mohoui-home #content > .col-full {
	box-sizing: border-box;
	max-width: calc(1366px + 2 * var(--mohoui-gutter));
	padding: 0 var(--mohoui-gutter);
	margin: 0 auto;
}
.mohoui-home .site-content { padding-top: 0; }
.mohoui-home .site-main { margin-bottom: 80px; }
.mohoui-home .woocommerce-products-header { display: none; }

/* Toolbar */
.mohoui-toolbar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 36px 0 0;
	margin: 0 0 30px;
	border-top: 1px solid #e3e3e3;
	font-family: "Georama", sans-serif;
	color: #333;
}
.mohoui-toolbar__count { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 16px; }
.mohoui-toolbar__num { font-size: 26px; font-weight: 300; color: #222; letter-spacing: .01em; }
.mohoui-toolbar__sep { width: 1px; height: 32px; background: #e3e3e3; }
/* Selected range: plum title centred on the toolbar row; "Reset" link at the right end */
.mohoui-toolbar .mohoui-toolbar__active {
	position: absolute;
	left: 50%;
	bottom: 5px;
	margin: 0;
	color: var(--mohoui-plum);
	font-family: var(--mohoui-title-font);
	font-size: 28px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	transform: translateX(-50%);
}
/* Icon + "Reset filter" (phones: "Reset"), styled like the drawer's reset link */
.mohoui-toolbar__reset {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
	padding: 4px 0;
	color: #333;
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s ease;
}
.mohoui-toolbar__reset:hover,
.mohoui-toolbar__reset:focus { color: var(--mohoui-plum); }
.mohoui-toolbar__reset svg { display: block; flex: 0 0 auto; }
.mohoui-toolbar__filter {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 4px 0;
	border: 0;
	background: transparent;
	color: #333;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	cursor: pointer;
}
.mohoui-toolbar__filter:hover,
.mohoui-toolbar__filter:focus,
.mohoui-toolbar__filter[aria-expanded="true"] { background: transparent; color: var(--mohoui-plum); }
.mohoui-toolbar__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	box-sizing: border-box;
	border-radius: 10px;
	background: var(--mohoui-plum);
	color: #fff;
	font-size: 12px;
	line-height: 1;
}

/* Filter drawer  (markup: wp_footer in functions.php, behaviour: header.js) */
.mohoui-drawer {
	position: fixed;
	inset: 0;
	z-index: 9999;
	visibility: hidden;
	pointer-events: none;
	font-family: "Georama", sans-serif;
	transition: visibility 0s linear .45s;
}
.mohoui-drawer.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.mohoui-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	transition: opacity .45s ease;
}
.mohoui-drawer.is-open .mohoui-drawer__backdrop { opacity: 1; }
.mohoui-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(684px, 100vw);
	box-sizing: border-box;
	padding: 40px;
	overflow-y: auto;
	background: #fff;
	color: #333;
	transform: translateX(100%);
	transition: transform .45s cubic-bezier(.215, .61, .355, 1);
	outline: none;
}
.mohoui-drawer.is-open .mohoui-drawer__panel { transform: none; }
.mohoui-drawer.is-instant,
.mohoui-drawer.is-instant * { transition: none !important; }
html.mohoui-drawer-lock { overflow: hidden; }

.mohoui-drawer__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 0 0 24px auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--mohoui-plum);
	color: #fff;
	cursor: pointer;
}
.mohoui-drawer__close:hover,
.mohoui-drawer__close:focus { background: #000; color: #fff; }
.mohoui-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 24px;
	margin-bottom: 44px;
	border-bottom: 1px solid #e3e3e3;
}
.mohoui-drawer__head h2 {
	margin: 0;
	font-family: "Georama", sans-serif;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--mohoui-plum);
}
.mohoui-drawer__reset {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: #333;
	text-decoration: none;
	white-space: nowrap;
}
.mohoui-drawer__reset:hover,
.mohoui-drawer__reset:focus { color: var(--mohoui-plum); }

.mohoui-drawer__group + .mohoui-drawer__group { margin-top: 44px; }
.mohoui-drawer__group h3 {
	margin: 0 0 24px;
	font-family: "Georama", sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
	color: #333;
}
.mohoui-chips { display: flex; flex-wrap: wrap; gap: 15px; }
.mohoui-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 42px;
	box-sizing: border-box;
	padding: 0 10px;
	border: 1px solid #cfcfcf;
	color: #333;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.mohoui-chip:hover,
.mohoui-chip:focus { border-color: #333; color: #111; }
.mohoui-chip.is-active { border-color: var(--mohoui-plum); background: var(--mohoui-plum); color: #fff; }
.mohoui-chip__dot {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	border-radius: 50%;
	background-image: linear-gradient(135deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .18) 100%);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.mohoui-chip.is-active .mohoui-chip__dot { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 0 0 1px rgba(255, 255, 255, .7); }

@media (max-width: 767px) {
	.mohoui-drawer__panel { padding: 24px 20px; }
	.mohoui-drawer__head h2 { font-size: 22px; }
	.mohoui-drawer__head { margin-bottom: 32px; }
	.mohoui-chips { gap: 10px; }
}

/* Grid */
:is(.mohoui-home, .single-product .related, .single-product .upsells) ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 30px;
	row-gap: 36px;
	margin: 0;
	padding: 0;
}
:is(.mohoui-home, .single-product .related, .single-product .upsells) ul.products::before,
:is(.mohoui-home, .single-product .related, .single-product .upsells) ul.products::after { content: none; display: none; }
/* !important: Storefront sizes cards with `.site-main ul.products.columns-N li.product` */
:is(.mohoui-home, .single-product .related, .single-product .upsells) ul.products li.product {
	width: auto !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	padding: 0;
	text-align: left;
}
:is(.mohoui-home, .single-product .related, .single-product .upsells) ul.products li.product > a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

/* 1. Image — application photo on top, product photo revealed on hover / swatch pick */
:is(.mohoui-home, .single-product .related, .single-product .upsells) ul.products .mohoui-card-media {
	order: 1;
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0 0 20px;
	overflow: hidden;
	background: #f3f2f0;
}
:is(.mohoui-home, .single-product .related, .single-product .upsells) ul.products li.product .mohoui-card-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain; /* product shots are cut-outs */
}
:is(.mohoui-home, .single-product .related, .single-product .upsells) ul.products li.product .mohoui-card-media .mohoui-app-img {
	z-index: 1;
	object-fit: cover;
	transition: opacity .45s ease;
}
:is(.mohoui-home, .single-product .related, .single-product .upsells) ul.products li.product > a:hover .mohoui-app-img,
:is(.mohoui-home, .single-product .related, .single-product .upsells) ul.products li.product > a:focus-visible .mohoui-app-img,
:is(.mohoui-home, .single-product .related, .single-product .upsells) ul.products li.product.is-swatched .mohoui-app-img { opacity: 0; }

/* 2. Colour swatches — 18px circles */
:is(.mohoui-home, .single-product .related, .single-product .upsells) ul.products ul.moho-loop-swatches {
	order: 2;
	justify-content: flex-start;
	gap: 12px;
	margin: 0 0 16px;
}
:is(.mohoui-home, .single-product .related, .single-product .upsells) ul.products .moho-loop-chip {
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-clip: border-box;
	background-image: linear-gradient(135deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .18) 100%) !important;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
:is(.mohoui-home, .single-product .related, .single-product .upsells) ul.products .moho-loop-swatch:hover .moho-loop-chip { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 0 0 2px #fff, 0 0 0 3px #999; }
:is(.mohoui-home, .single-product .related, .single-product .upsells) ul.products .moho-loop-swatch.active .moho-loop-chip { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 0 0 2px #fff, 0 0 0 3px #222; }

/* 3. Title */
:is(.mohoui-home, .single-product .related, .single-product .upsells) ul.products li.product .woocommerce-loop-product__title {
	order: 3;
	margin: 0 0 6px;
	padding: 0;
	font-family: "Georama", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--mohoui-plum);
}

/* 4. Description, divider, price */
:is(.mohoui-home, .single-product .related, .single-product .upsells) ul.products .moho-loop-meta {
	order: 4;
	flex: 1;
	display: flex;
	flex-direction: column;
	margin: 0;
}
:is(.mohoui-home, .single-product .related, .single-product .upsells) ul.products .moho-loop-sku { display: none; }
:is(.mohoui-home, .single-product .related, .single-product .upsells) ul.products .moho-loop-shortdesc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 16px;
	font-family: "Georama", sans-serif;
	font-size: 15px;
	line-height: 1.3;
	color: #4a4a4a;
}
:is(.mohoui-home, .single-product .related, .single-product .upsells) ul.products .moho-loop-price {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid #e3e3e3;
	font-family: "Georama", sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
	color: #111;
}
:is(.mohoui-home, .single-product .related, .single-product .upsells) ul.products .moho-loop-price del { font-size: .75em; color: #999; font-weight: 400; }
:is(.mohoui-home, .single-product .related, .single-product .upsells) ul.products .moho-loop-price ins { text-decoration: none; }

/* =========================================================================
   Single product page — variable products  (behaviour: product.js)
   The summary and the cart form use display:contents so their pieces become
   cells of one grid: gallery left, options right, price bar across the bottom.
   Overrides mu-plugins/moho-gallery (stacked gallery + sticky summary) and
   moho-swatches / moho-compat styling for this page.
   ========================================================================= */
.single-product #content > .col-full {
	box-sizing: border-box;
	max-width: calc(1366px + 2 * var(--mohoui-gutter));
	padding: 0 var(--mohoui-gutter);
	margin: 0 auto;
}
.single-product .site-content { padding-top: 0; }
.single-product .storefront-breadcrumb { padding-bottom: 22px; }

.single-product div.product.product-type-variable .moho-product-top {
	--mohoui-gallery-h: 620px;
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 421px;
	grid-template-rows: auto auto auto auto auto 1fr auto;
	grid-template-areas:
		"gallery title"
		"gallery desc"
		"gallery opts"
		"gallery compat"
		"gallery delivery"
		"gallery ."
		"bar bar";
	column-gap: 58px;
	padding: 56px 0 70px;
	margin: 0 0 60px;
}
/* Full-bleed grey panel behind the top section */
.single-product div.product.product-type-variable .moho-product-top::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	background: #f1f1f1;
}
.single-product div.product.product-type-variable .moho-product-top > .summary.entry-summary,
.single-product div.product.product-type-variable .moho-product-top form.variations_form {
	display: contents;
}
.single-product div.product.product-type-variable .moho-product-top > .images.woocommerce-product-gallery {
	grid-area: gallery;
	align-self: start;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

/* Right column */
.single-product div.product.product-type-variable .product_title {
	grid-area: title;
	margin: 0 0 10px;
	font-family: var(--mohoui-title-font);
	font-size: 36px;
	font-weight: 500;
	line-height: 1.15;
	color: #222;
}
.single-product div.product.product-type-variable .woocommerce-product-details__short-description {
	grid-area: desc;
	margin: 0 0 34px;
	font-family: "Georama", sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
	color: #555;
}
.single-product div.product.product-type-variable .woocommerce-product-details__short-description p { margin: 0; }
.single-product div.product.product-type-variable .summary > p.price,
.single-product div.product.product-type-variable .product_meta,
.single-product div.product.product-type-variable form.variations_form > template { display: none; }

/* Colour + size pickers */
.single-product div.product.product-type-variable table.variations {
	grid-area: opts;
	display: block;
	margin: 0;
	padding: 0 0 32px;
	border: 0;
	border-bottom: 1px solid #dcdcdc;
	background: transparent;
}
.single-product div.product.product-type-variable table.variations tbody,
.single-product div.product.product-type-variable table.variations tr,
.single-product div.product.product-type-variable table.variations th,
.single-product div.product.product-type-variable table.variations td {
	display: block;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	text-align: left;
}
.single-product div.product.product-type-variable table.variations tr + tr { margin-top: 36px; }
.single-product div.product.product-type-variable table.variations th label {
	display: block;
	margin: 0 0 16px;
	font-family: "Georama", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	color: #333;
}
.single-product div.product.product-type-variable .moho-swatches { gap: 16px; margin: 0; }
.single-product div.product.product-type-variable .moho-swatch--color {
	width: 35px;
	height: 35px;
	padding: 4px;
	border: 1px solid #cfcfcf;
	border-radius: 50%;
	background: #fff;
	box-shadow: none;
}
.single-product div.product.product-type-variable .moho-swatch--color .moho-swatch__chip {
	border: 0;
	border-radius: 50%;
	background-image: linear-gradient(135deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .18) 100%) !important;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.single-product div.product.product-type-variable .moho-swatch--color.selected {
	border-color: var(--mohoui-plum);
	box-shadow: 0 0 0 1px var(--mohoui-plum);
}
.single-product div.product.product-type-variable .moho-swatch--label {
	height: 43px;
	min-width: 0;
	padding: 0 20px;
	border: 1px solid #b9b9b9;
	border-radius: 0;
	background: transparent;
	color: #333;
	font-family: "Georama", sans-serif;
	font-size: 16px;
	box-shadow: none;
}
.single-product div.product.product-type-variable .moho-swatch--label.selected {
	border-color: var(--mohoui-plum);
	box-shadow: 0 0 0 1px var(--mohoui-plum);
	background: transparent;
	color: var(--mohoui-plum);
}
.single-product div.product.product-type-variable .moho-swatch:hover { border-color: #777; }

/* Compatible Accessories */
.single-product div.product.product-type-variable .moho-compat-cta {
	grid-area: compat;
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 32px 0;
	border-bottom: 1px solid #dcdcdc;
}
.single-product div.product.product-type-variable .moho-compat-open {
	height: 54px;
	padding: 0 20px;
	border: 1px solid #cfcfcf;
	border-radius: 0;
	background: #fff;
	color: #333;
	font-family: "Georama", sans-serif;
	font-size: 16px;
	font-weight: 400;
	cursor: pointer;
}
.single-product div.product.product-type-variable .moho-compat-open:hover { border-color: #888; }
.single-product div.product.product-type-variable .moho-compat-i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	box-sizing: border-box;
	border: 1.4px solid #333;
	border-radius: 50%;
	background: transparent;
	color: #333;
	font-family: Georgia, serif;
	font-size: 13px;
	line-height: 1;
}

/* Delivery & installation pincode */
.mohoui-delivery { grid-area: delivery; padding: 34px 0 0; font-family: "Georama", sans-serif; }
.mohoui-delivery h3 { margin: 0 0 6px; font-family: inherit; font-size: 20px; font-weight: 400; line-height: 1.3; color: #333; }
.mohoui-delivery > p { max-width: 330px; margin: 0 0 20px; font-size: 16px; font-weight: 300; line-height: 1.35; color: #8f8f8f; }
.mohoui-pincode { margin: 0; }
.mohoui-pincode input {
	width: 218px;
	max-width: 100%;
	height: 54px;
	box-sizing: border-box;
	padding: 0 20px;
	border: 1px solid #9c9c9c;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #222;
	font-family: inherit;
	font-size: 16px;
	letter-spacing: .04em;
}
.mohoui-pincode input::placeholder { color: #9c9c9c; letter-spacing: 0; }
.mohoui-pincode input:focus { outline: none; border-color: var(--mohoui-plum); }
.mohoui-delivery .mohoui-pincode__msg { min-height: 1.4em; margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: #555; }
.mohoui-pincode__msg.is-ok { color: #2e7d32; }
.mohoui-pincode__msg.is-no,
.mohoui-pincode__msg.is-error { color: #b3261e; }

/* Price bar */
.single-product div.product.product-type-variable .single_variation_wrap {
	grid-area: bar;
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 90px;
	margin-top: 64px;
	padding: 0 35px;
	background: #fff;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
}
/* The price bar (this same element, in .moho-product-top) is pinned to the bottom of the
   screen from page load to the end of the page, stopping on top of the footer; product.js
   adds .is-docked and sets bottom (footer stop), and left/width on tablet and desktop. */
.single-product div.product.product-type-variable .single_variation_wrap.is-docked {
	position: fixed;
	bottom: 16px;
	margin-top: 0;
	z-index: 90;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .16);
	animation: mohoui-bar-dock .45s cubic-bezier(.22, 1, .36, 1);
}
/* the section (isolated) and the summary (sticky) hold the bar in their own layers, so lift
   them over the sections below (still under the header) */
body.mohoui-bar-docked .moho-product-top { z-index: 40; }
body.mohoui-bar-docked .moho-product-top .summary { z-index: 1; }
/* room above the footer for the bar to rest in */
body.mohoui-bar-docked .site-footer { margin-top: var(--mohoui-bar-h, 122px); }
/* Tablet and desktop: no wishlist heart in the price bar (client request). */
@media (min-width: 768px) {
	.single-product div.product.product-type-variable .single_variation_wrap .mohoui-wish-btn { display: none !important; }
}
/* Phones: a slim bar along the bottom edge – price, quantity, Add to cart and Buy now
   in one row (the tax note and wishlist stay in the full bar). */
@media (max-width: 767px) {
	.single-product div.product.product-type-variable .single_variation_wrap.is-docked {
		left: 0;
		right: 0;
		bottom: 0;
		flex-wrap: nowrap;
		align-items: center;
		gap: 6px;
		min-height: 0;
		margin: 0;
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -6px 24px rgba(0, 0, 0, .12);
	}
	.single-product div.product.product-type-variable .single_variation_wrap.is-docked .single_variation { flex: 1 1 auto; min-width: 0; width: auto; }
	.single-product div.product.product-type-variable .single_variation_wrap.is-docked .moho-tax-note,
	.single-product div.product.product-type-variable .single_variation_wrap.is-docked .mohoui-wish-btn { display: none !important; }
	.single-product div.product.product-type-variable .single_variation_wrap.is-docked .woocommerce-variation-add-to-cart { flex: 0 0 auto; display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; width: auto; min-width: 0; margin: 0; padding: 0; }
	.single-product div.product.product-type-variable .single_variation_wrap.is-docked .woocommerce-variation-add-to-cart::before,
	.single-product div.product.product-type-variable .single_variation_wrap.is-docked .woocommerce-variation-add-to-cart::after { display: none; } /* WooCommerce clearfix: not flex items here */
	.single-product div.product.product-type-variable .single_variation_wrap.is-docked .mohoui-qty { flex: 0 0 60px; width: 60px; height: 28px; margin: 0; }
	.single-product div.product.product-type-variable .single_variation_wrap.is-docked .mohoui-qty__btn { flex: 0 0 20px; width: 20px; }
	.single-product div.product.product-type-variable .single_variation_wrap.is-docked .mohoui-qty__btn::before,
	.single-product div.product.product-type-variable .single_variation_wrap.is-docked .mohoui-qty__btn--plus::after { width: 9px; height: 1.2px; } /* smaller − / + for the slim bar */
	.single-product div.product .single_variation_wrap.is-docked .mohoui-qty input.qty { min-width: 0; width: 20px; font-size: 12px; }
	.single-product div.product.product-type-variable .single_variation_wrap.is-docked .single_add_to_cart_button,
	.single-product div.product.product-type-variable .single_variation_wrap.is-docked .mohoui-buy-now { flex: 0 0 auto; width: auto; min-width: 0; height: 28px; margin: 0; padding: 0 9px; font-size: 10px; letter-spacing: 0; white-space: nowrap; }
	.single-product div.product.product-type-variable .single_variation_wrap.is-docked .woocommerce-variation-price .price { font-size: 20px; white-space: nowrap; } /* slim bar: smaller price */
	.single-product div.product.product-type-variable .single_variation_wrap.is-docked .mohoui-buy-now { margin-right: 10px; } /* 10px extra space after Buy now (client request) */
}
/* one sticky bar only, on every screen: Storefront's own add-to-cart bar is not needed */
.single-product .storefront-sticky-add-to-cart { display: none !important; }
@keyframes mohoui-bar-dock {
	from { transform: translateY(24px); opacity: 0; }
	to { transform: none; opacity: 1; }
}
@media not all { /* reduce-motion overrides switched off (client request) */
	.single-product div.product.product-type-variable .single_variation_wrap.is-docked { animation: none; }
}
.single-product div.product.product-type-variable .single_variation { flex: 1; margin: 0; }
.single-product div.product.product-type-variable .woocommerce-variation-description { display: none; }
.single-product div.product.product-type-variable .woocommerce-variation-price { display: flex; align-items: baseline; gap: 16px; }
.single-product div.product.product-type-variable .woocommerce-variation-price .price {
	margin: 0;
	font-family: "Georama", sans-serif;
	font-size: 32px;
	font-weight: 500;
	line-height: 1;
	color: #111;
}
.single-product div.product.product-type-variable .woocommerce-variation-price .moho-tax-note { margin: 0; font-size: 15px; font-weight: 300; color: #8f8f8f; }
.single-product div.product.product-type-variable .woocommerce-variation-availability p { margin: 6px 0 0; font-size: 14px; }
.single-product div.product.product-type-variable .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0;
}
.single-product div.product.product-type-variable .quantity { float: none; margin: 0; }
.mohoui-qty {
	display: flex;
	align-items: center;
	width: 161px;
	height: 40px;
	box-sizing: border-box;
	border: 1px solid #b9b9b9;
	background: #fff;
}
.single-product div.product .mohoui-qty input.qty {
	flex: 1;
	width: 40px;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	text-align: center;
	font-family: "Georama", sans-serif;
	font-size: 16px;
	color: #222;
	-moz-appearance: textfield;
}
.mohoui-qty input.qty::-webkit-outer-spin-button,
.mohoui-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mohoui-qty__btn {
	position: relative;
	width: 34px;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: #333;
	cursor: pointer;
}
.mohoui-qty__btn:hover,
.mohoui-qty__btn:focus { background: #f4f4f4; color: #000; }
.mohoui-qty__btn::before,
.mohoui-qty__btn--plus::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 1.3px;
	background: currentColor;
	transform: translate(-50%, -50%);
}
.single-product .mohoui-qty .mohoui-qty__btn--plus::after { display: block; transform: translate(-50%, -50%) rotate(90deg); }

.single-product div.product.product-type-variable .single_add_to_cart_button,
.single-product div.product.product-type-variable .mohoui-buy-now {
	float: none;
	width: 181px;
	height: 40px;
	margin: 0;
	padding: 0 12px;
	border-radius: 0;
	font-family: "Georama", sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .01em;
	line-height: 1;
	text-transform: uppercase;
}
.single-product div.product.product-type-variable .single_add_to_cart_button {
	border: 1px solid var(--mohoui-plum);
	background: var(--mohoui-plum);
	color: #fff;
}
.single-product div.product.product-type-variable .single_add_to_cart_button:hover { background: #4a1438; border-color: #4a1438; color: #fff; }
.single-product div.product.product-type-variable .mohoui-buy-now {
	border: 1px solid #b9b9b9;
	background: #fff;
	color: #222;
}
.single-product div.product.product-type-variable .mohoui-buy-now:hover { border-color: #222; background: #fff; color: #000; }
.single-product div.product.product-type-variable .single_add_to_cart_button.disabled,
.single-product div.product.product-type-variable .mohoui-buy-now.disabled { opacity: .45; cursor: not-allowed; }

/* Gallery slider (3D model first when present, then photos) */
.single-product .woocommerce-product-gallery.mohoui-slider { position: relative; }
.single-product .mohoui-slider .woocommerce-product-gallery__wrapper {
	display: flex !important;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.single-product .mohoui-slider .woocommerce-product-gallery__wrapper::-webkit-scrollbar { display: none; }
.single-product .mohoui-slider .woocommerce-product-gallery__wrapper > * {
	flex: 0 0 100%;
	width: 100% !important;
	height: var(--mohoui-gallery-h, 560px);
	margin: 0 !important;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}
/* body…div.images prefix: beats moho-gallery's display:block / height:auto on slides, links and images */
body.single-product div.product div.images.mohoui-slider .woocommerce-product-gallery__image:not(.moho-3d-hidden) {
	display: flex !important;
	align-items: center;
	justify-content: center;
}
body.single-product div.product div.images.mohoui-slider .woocommerce-product-gallery__image a { display: block; width: 100%; height: 100%; }
body.single-product div.product div.images.mohoui-slider .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100% !important;
	object-fit: contain;
	pointer-events: none;
}
/* The image the 3D model replaces: moho-gallery's display:block !important would otherwise keep it as an extra slide */
body.single-product div.product div.images.mohoui-slider .woocommerce-product-gallery__wrapper > div.moho-3d-hidden { display: none !important; }
.single-product .mohoui-slider #moho-3d-viewer {
	min-height: 0;
	aspect-ratio: auto;
	background: transparent;
	--poster-color: transparent;
	--progress-bar-color: var(--mohoui-plum);
	--progress-bar-height: 2px;
}
.single-product .mohoui-slider #moho-3d-viewer .moho-3d-hint { background: rgba(255, 255, 255, .85); }
.mohoui-slider__arrow {
	position: absolute;
	z-index: 2;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid #d6d6d6;
	border-radius: 0;
	background: #fff;
	color: #333;
	transform: translateY(-50%);
	cursor: pointer;
	transition: opacity .2s ease, border-color .2s ease;
}
.mohoui-slider__arrow:hover,
.mohoui-slider__arrow:focus { border-color: var(--mohoui-plum); background: #fff; color: var(--mohoui-plum); }
.mohoui-slider__arrow--prev { left: 0; }
.mohoui-slider__arrow--next { right: 0; }
.mohoui-slider__arrow--next svg { transform: rotate(180deg); }
.mohoui-slider__arrow:disabled { opacity: .3; cursor: default; }
.mohoui-slider.is-single .mohoui-slider__arrow { display: none; }

@media (max-width: 1100px) {
	.single-product div.product.product-type-variable .moho-product-top { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 36px; --mohoui-gallery-h: 480px; }
	.single-product div.product.product-type-variable .single_variation_wrap { flex-wrap: wrap; padding: 20px 24px; }
}
@media (max-width: 767px) {
	.single-product div.product.product-type-variable .moho-product-top {
		--mohoui-gallery-h: 340px;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-template-areas: "gallery" "title" "desc" "opts" "compat" "delivery" "bar";
		padding: 28px 20px 44px; /* phones: the grey panel is clipped to the content width, so pad inside it */
	}
	.single-product div.product.product-type-variable .images.woocommerce-product-gallery { margin-bottom: 24px !important; }
	.single-product div.product.product-type-variable .product_title { font-size: 28px; }
	.single-product div.product.product-type-variable .single_variation_wrap { margin-top: 32px; padding: 20px 16px; gap: 16px; }
	.single-product div.product.product-type-variable .woocommerce-variation-add-to-cart { flex-wrap: wrap; gap: 12px; width: 100%; }
	.single-product div.product.product-type-variable .single_add_to_cart_button,
	.single-product div.product.product-type-variable .mohoui-buy-now { flex: 1 1 140px; width: auto; }
	.mohoui-qty { width: 100%; }
	.single-product div.product.product-type-variable .woocommerce-variation-price .price { font-size: 26px; }
	/* Phones: "Inclusive of all taxes" on its own line under the price */
	.single-product div.product.product-type-variable .woocommerce-variation-price { flex-direction: column; align-items: flex-start; gap: 6px; }
	.single-product div.product.product-type-variable .woocommerce-variation-price .moho-tax-note { font-size: 13px; }
	.mohoui-slider__arrow { width: 36px; height: 36px; }
}

/* Product head band  (markup: mohoui_product_head() in functions.php) */
.single-product div.product .mohoui-product-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 421px;
	column-gap: 58px;
	align-items: start;
	padding: 40px 0 56px;
	font-family: "Georama", sans-serif;
}
.single-product div.product .mohoui-product-head .product_title {
	margin: 0 0 18px;
	font-family: var(--mohoui-title-font);
	font-size: 48px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--mohoui-plum);
}
.mohoui-product-head__desc p { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.5; color: #333; }
.mohoui-product-head__aside { padding-top: 14px; }
.mohoui-share {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 0 auto;
	padding: 4px 0;
	border: 0;
	background: transparent;
	color: #333;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	cursor: pointer;
}
.mohoui-share:hover,
.mohoui-share:focus { background: transparent; color: var(--mohoui-plum); }
.mohoui-share svg { display: block; flex: 0 0 auto; }
.mohoui-product-head__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: baseline;
	gap: 6px 14px;
	margin: 14px 0 0;
	padding-top: 16px;
	border-top: 1px solid #dcdcdc;
	font-size: 16px;
	font-weight: 300;
	color: #333;
}
.mohoui-product-head__meta strong,
.mohoui-product-head__meta a { font-weight: 600; color: var(--mohoui-plum); text-decoration: none; }
.mohoui-product-head__meta a:hover,
.mohoui-product-head__meta a:focus { text-decoration: underline; }
.mohoui-product-head__sep { color: #333; font-weight: 300; }
@media (max-width: 1100px) {
	.single-product div.product .mohoui-product-head { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 36px; }
}
@media (max-width: 767px) {
	.single-product div.product .mohoui-product-head { grid-template-columns: minmax(0, 1fr); padding: 24px 0 28px; }
	.single-product div.product .mohoui-product-head .product_title { margin-bottom: 10px; font-size: 32px; }
	.mohoui-product-head__desc p { font-size: 15px; }
	.mohoui-product-head__aside { display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; gap: 16px; padding-top: 18px; }
	.mohoui-share { margin: 0; font-size: 14px; }
	.mohoui-product-head__meta { flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; padding: 0; border-top: 0; font-size: 14px; }
	.mohoui-product-head__sep { display: none; }
}

/* "Items Required for Install" panel (moho-compat modal) as a right-hand drawer:
   white header (title, quantity note, × ), grey list of accessory rows. */
#moho-compat-modal.moho-compat-modal {
	display: block;
	padding: 0;
	font-family: "Georama", sans-serif;
}
#moho-compat-modal.moho-compat-modal[hidden] { display: none; }
#moho-compat-modal .moho-compat-backdrop { background: rgba(0, 0, 0, .45); animation: mohoui-fade .35s ease both; }
#moho-compat-modal .moho-compat-dialog {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(684px, 100vw);
	max-width: none;
	max-height: none;
	padding: 0;
	overflow-y: auto;
	background: #f1f1f1;
	box-shadow: none;
	animation: mohoui-slide-in .45s cubic-bezier(.215, .61, .355, 1) both;
}
@keyframes mohoui-slide-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes mohoui-fade { from { opacity: 0; } to { opacity: 1; } }
#moho-compat-modal .moho-compat-close {
	position: absolute;
	top: 40px;
	right: 40px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--mohoui-plum);
	color: transparent;
	font-size: 0;
	cursor: pointer;
}
/* × drawn as one SVG background (button ::after is hidden by another stylesheet) */
#moho-compat-modal .moho-compat-close {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M1 1l12 12M13 1L1 13' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
}
#moho-compat-modal .moho-compat-close::before,
#moho-compat-modal .moho-compat-close::after { content: none; display: none; }
#moho-compat-modal .moho-compat-close:hover { background-color: #000; }
#moho-compat-modal .moho-compat-dialog h3 {
	margin: 0;
	padding: 36px 100px 6px 40px;
	background: #fff;
	font-family: "Georama", sans-serif;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--mohoui-plum);
}
#moho-compat-modal .moho-compat-qtynote {
	margin: 0;
	padding: 0 40px 40px;
	background: #fff;
	font-size: 16px;
	font-weight: 300;
	color: #333;
}
#moho-compat-modal .moho-compat-msg { margin: 0; padding: 0 40px; background: #fff; font-size: 15px; }
#moho-compat-modal .moho-compat-msg:empty { display: none; }
#moho-compat-modal .moho-compat-msg:not(:empty) { margin-top: -24px; padding-bottom: 24px; }
#moho-compat-modal .moho-compat-msg a { color: var(--mohoui-plum); }
#moho-compat-modal .moho-compat-list { display: flex; flex-direction: column; gap: 40px; padding: 40px; }

/* Accessory row: image | name, SKU / divider / price + button */
#moho-compat-modal .moho-compat-item {
	display: grid;
	grid-template-columns: 145px minmax(0, 1fr) auto;
	grid-template-rows: auto auto 1fr;
	column-gap: 20px;
	align-items: start;
	padding: 0;
	border: 0;
}
#moho-compat-modal .moho-compat-img {
	grid-column: 1;
	grid-row: 1 / 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 145px;
	height: 116px;
	padding: 10px;
	box-sizing: border-box;
	background: #fff;
}
#moho-compat-modal .moho-compat-img img { width: 100%; height: 100%; object-fit: contain; margin: 0; }
#moho-compat-modal .moho-compat-info { display: contents; }
#moho-compat-modal .moho-compat-name {
	grid-column: 2 / 4;
	grid-row: 1;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.35;
	color: #333;
}
#moho-compat-modal .moho-compat-sku {
	grid-column: 2 / 4;
	grid-row: 2;
	margin: 4px 0 14px;
	font-size: 14px;
	font-weight: 300;
	color: #9a9a9a;
	text-transform: uppercase;
}
#moho-compat-modal .moho-compat-price,
#moho-compat-modal .moho-compat-act {
	grid-row: 3;
	align-self: stretch;
	display: flex;
	align-items: center;
	padding-top: 20px;
	border-top: 1px solid #dcdcdc;
}
#moho-compat-modal .moho-compat-price { grid-column: 2; font-size: 18px; font-weight: 500; color: #111; }
#moho-compat-modal .moho-compat-act { grid-column: 3; justify-content: flex-end; }
#moho-compat-modal .moho-compat-add {
	width: 139px;
	height: 40px;
	padding: 0;
	border: 1px solid #a9a9a9;
	border-radius: 0;
	background: transparent;
	color: #222;
	font-family: "Georama", sans-serif;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: .01em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
#moho-compat-modal .moho-compat-add:hover { border-color: var(--mohoui-plum); background: var(--mohoui-plum); color: #fff; }
#moho-compat-modal .moho-compat-add:disabled { opacity: .6; cursor: default; }
#moho-compat-modal .moho-compat-na { font-size: 14px; color: #999; }
@media not all { /* reduce-motion overrides switched off (client request) */
	#moho-compat-modal .moho-compat-dialog,
	#moho-compat-modal .moho-compat-backdrop { animation: none; }
}
@media (max-width: 767px) {
	#moho-compat-modal .moho-compat-close { top: 20px; right: 16px; }
	#moho-compat-modal .moho-compat-dialog h3 { padding: 22px 60px 6px 20px; font-size: 22px; }
	#moho-compat-modal .moho-compat-qtynote { padding: 0 20px 24px; font-size: 14px; }
	#moho-compat-modal .moho-compat-msg { padding: 0 20px; }
	#moho-compat-modal .moho-compat-list { gap: 28px; padding: 24px 20px; }
	#moho-compat-modal .moho-compat-item { grid-template-columns: 96px minmax(0, 1fr) auto; column-gap: 14px; }
	#moho-compat-modal .moho-compat-img { width: 96px; height: 80px; padding: 6px; }
	#moho-compat-modal .moho-compat-name { font-size: 14px; }
	#moho-compat-modal .moho-compat-sku { font-size: 12px; margin-bottom: 10px; }
	#moho-compat-modal .moho-compat-price,
	#moho-compat-modal .moho-compat-act { padding-top: 12px; }
	#moho-compat-modal .moho-compat-price { font-size: 16px; }
	#moho-compat-modal .moho-compat-add { width: 112px; height: 36px; font-size: 13px; }
}

/* Product info accordion  (markup: woocommerce/single-product/tabs/tabs.php, behaviour: product.js)
   Full content width; sizes follow the design (drawing boxes 422px, spec table 828px). */
.mohoui-accordion {
	clear: both;
	margin: 0 0 100px;
	font-family: "Georama", sans-serif;
}
.mohoui-accordion__item { border-bottom: 1px solid #e3e3e3; }
.mohoui-accordion .mohoui-accordion__heading { margin: 0; padding: 0; font-size: inherit; }
.mohoui-accordion__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 46px 0 44px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--mohoui-plum);
	font-family: var(--mohoui-title-font);
	font-size: 30px;
	font-weight: 500;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
}
.mohoui-accordion__toggle:hover,
.mohoui-accordion__toggle:focus { background: transparent; color: var(--mohoui-plum); }
.mohoui-accordion__toggle:focus-visible { outline: 2px solid var(--mohoui-plum); outline-offset: 4px; }
.mohoui-accordion__icon { position: relative; flex: 0 0 auto; width: 18px; height: 18px; }
.mohoui-accordion__icon::before,
.mohoui-accordion__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 18px;
	height: 1.5px;
	background: #222;
	transform: translateY(-50%);
	transition: transform .25s ease, opacity .25s ease;
}
.mohoui-accordion__icon::after { transform: translateY(-50%) rotate(90deg); }
.mohoui-accordion__item.is-open .mohoui-accordion__icon::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.mohoui-accordion__inner {
	padding: 0 0 56px;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity .35s ease .08s, transform .45s cubic-bezier(.215, .61, .355, 1);
}
.mohoui-accordion__item.is-open .mohoui-accordion__inner { opacity: 1; transform: none; }
@media not all { /* reduce-motion overrides switched off (client request) */ .mohoui-accordion__inner { transition: none; } }
.mohoui-accordion__panel[hidden] { display: none; }
/* WooCommerce / moho-tech-spec repeat the section name as an <h2> inside each panel */
.mohoui-accordion__inner > h2 { display: none; }

/* Description */
.mohoui-accordion__panel p {
	margin: 0 0 1.6em;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.9;
	color: #444;
}
.mohoui-accordion__panel p:last-child { margin-bottom: 0; }

/* Spec / attribute tables: grey label column, bordered cells */
.mohoui-accordion table.shop_attributes,
.mohoui-accordion table.woocommerce-product-attributes {
	width: 828px;
	max-width: 100%;
	margin: 0;
	border: 1px solid #dcdcdc;
	border-collapse: collapse;
	background: #fff;
}
.mohoui-accordion table.shop_attributes th,
.mohoui-accordion table.shop_attributes td {
	width: auto;
	height: 74px;
	padding: 0 20px;
	border: 1px solid #dcdcdc;
	background: #fff;
	font-family: "Georama", sans-serif;
	font-size: 15px;
	font-weight: 300;
	font-style: normal;
	line-height: 1.4;
	text-align: center;
	vertical-align: middle;
	color: #333;
}
.mohoui-accordion table.shop_attributes th { width: 322px; background: #f1f1f1; font-weight: 400; }
.mohoui-accordion table.shop_attributes td p { margin: 0; padding: 0; font-size: inherit; line-height: inherit; color: inherit; }

/* Line drawings */
.mohoui-drawings {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 422px));
	gap: 47px;
	margin-top: 50px;
}
.mohoui-drawings img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 422 / 287;
	object-fit: contain;
	border: 1px solid #dcdcdc;
	background: #fff;
}

/* Installation & Support Documents */
.mohoui-docs { display: flex; flex-wrap: wrap; gap: 47px; margin: 0; padding: 0; list-style: none; }
.mohoui-docs li { margin: 0; }
.mohoui-docs a {
	display: flex;
	align-items: center;
	gap: 24px;
	width: 300px;
	min-height: 124px;
	box-sizing: border-box;
	padding: 20px 36px;
	border: 1px solid #dcdcdc;
	color: #444;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.4;
	text-decoration: none;
	transition: border-color .15s ease;
}
.mohoui-docs a:hover,
.mohoui-docs a:focus { border-color: var(--mohoui-plum); color: #222; }
.mohoui-docs img { flex: 0 0 auto; width: 31px; height: 40px; }
.mohoui-accordion__panel p.mohoui-docs-empty { color: #8f8f8f; }

@media (max-width: 1100px) {
	.mohoui-drawings { gap: 24px; }
	.mohoui-docs { gap: 24px; }
}
@media (max-width: 767px) {
	.mohoui-accordion__toggle { font-size: 22px; padding: 26px 0 24px; }
	.mohoui-accordion__inner { padding-bottom: 36px; }
	.mohoui-drawings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
	.mohoui-accordion table.shop_attributes th,
	.mohoui-accordion table.shop_attributes td { height: 56px; padding: 0 10px; font-size: 14px; }
	.mohoui-accordion table.shop_attributes th { width: 40%; }
	.mohoui-docs { gap: 12px; }
	.mohoui-docs a { width: 100%; min-height: 90px; padding: 16px 20px; }
}

/* Showcase slider under the accordion  (markup: functions.php, behaviour: product.js) */
.mohoui-showcase {
	position: relative;
	clear: both;
	margin: 0 0 100px;
}
.mohoui-showcase__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.mohoui-showcase__track::-webkit-scrollbar { display: none; }
.mohoui-showcase__slide {
	flex: 0 0 100%;
	aspect-ratio: 1366 / 664;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	background: #e9e9e9;
}
.mohoui-showcase__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mohoui-showcase__nav {
	position: absolute;
	right: 48px;
	bottom: 48px;
	display: flex;
	gap: 8px;
}
.mohoui-showcase__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1.5px solid #fff;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.mohoui-showcase__arrow:hover,
.mohoui-showcase__arrow:focus { background: #fff; color: #222; }
.mohoui-showcase__arrow:disabled { opacity: .45; background: transparent; color: #fff; cursor: default; }
.mohoui-showcase__arrow--next svg { transform: rotate(180deg); }
@media (max-width: 767px) {
	.mohoui-showcase { margin-bottom: 60px; }
	.mohoui-showcase__slide { aspect-ratio: 4 / 3; }
	.mohoui-showcase__nav { right: 16px; bottom: 16px; }
	.mohoui-showcase__arrow { width: 40px; height: 40px; }
}

/* Floating "Back to filters" / "Back to top" — phones only (markup: wp_footer, behaviour: header.js) */
.mohoui-float { display: none; }
@media (max-width: 767px) {
	.mohoui-float {
		position: fixed;
		z-index: 900;
		right: 16px;
		bottom: 24px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(12px);
		pointer-events: none;
		transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
	}
	.mohoui-float.is-visible {
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
		transition-delay: 0s;
	}
	html.mohoui-drawer-lock .mohoui-float { opacity: 0; visibility: hidden; pointer-events: none; }
	.mohoui-float__btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 1px solid #d6d6d6;
		border-radius: 4px;
		background: #fff;
		color: #141414;
		font-family: "Georama", sans-serif;
		font-size: 8px;
		font-weight: 400;
		line-height: 1.15;
		text-align: center;
		cursor: pointer;
	}
	.mohoui-float__btn:hover,
	.mohoui-float__btn:focus { background: #fff; color: var(--mohoui-plum); border-color: var(--mohoui-plum); }
	.mohoui-float__btn svg { display: block; flex: 0 0 auto; }
}

/* Related / upsell products on product pages (cards share the home grid styles above) */
.single-product .related.products,
.single-product .upsells.products { clear: both; margin: 0 0 100px; }
.single-product div.product .related.products > h2,
.single-product div.product .upsells.products > h2 {
	margin: 0 0 46px;
	font-family: var(--mohoui-title-font);
	font-size: 40px;
	font-weight: 500;
	line-height: 1.15;
	text-align: left;
	color: var(--mohoui-plum);
}
.mohoui-related__next svg { transform: rotate(180deg); }
@media (max-width: 767px) {
	.single-product div.product .related.products > h2,
	.single-product div.product .upsells.products > h2 { margin-bottom: 24px; padding: 0 8px; font-size: 30px; }
	/* Phones: sideways slider, one card at a time, arrows below (product.js) */
	body.single-product :is(.related, .upsells) ul.products {
		display: flex;
		gap: calc(2 * (var(--mohoui-gutter) + 8px));
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: calc(var(--mohoui-gutter) + 8px);
		margin: 0 calc(-1 * var(--mohoui-gutter));
		padding: 0 calc(var(--mohoui-gutter) + 8px); /* cards sit 24px from the screen edges */
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}
	body.single-product :is(.related, .upsells) ul.products::-webkit-scrollbar { display: none; }
	body.single-product :is(.related, .upsells) ul.products li.product {
		flex: 0 0 100%; /* full width of the track: exactly one card visible */
		scroll-snap-align: start;
	}
	.mohoui-related__nav.mohoui-ranges__nav { padding: 22px 8px 0; }
	.single-product .related.products,
	.single-product .upsells.products { margin-bottom: 60px; }
}

/* =========================================================================
   Home banner  (Moho Home template — markup: inc/home.php, slider: home.js)
   Full-screen Swiper fade slider; each slide is an image or a muted video.
   ========================================================================= */
.mohoui-banner {
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 560px;
	overflow: hidden;
	background: #1e1a17;
	color: #fff;
	font-family: "Georama", sans-serif;
}
.mohoui-banner__swiper,
.mohoui-banner .swiper-wrapper,
.mohoui-banner__slide { width: 100%; height: 100%; }
.mohoui-banner.is-static .mohoui-banner__slide:not(:first-child) { display: none; }
.mohoui-banner__media { position: absolute; inset: 0; }
.mohoui-banner__media picture { display: block; width: 100%; height: 100%; } /* image slide with a phone image */
.mohoui-banner__img,
.mohoui-banner__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Shade: a little at the top for the header, more at the bottom for the text */
.mohoui-banner__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .35) 100%);
	pointer-events: none;
}

.mohoui-banner__content { /* bottom left on every screen (client request) */
	position: absolute;
	z-index: 2;
	left: var(--mohoui-gutter);
	bottom: 116px;
	width: min(900px, calc(100% - 2 * var(--mohoui-gutter)));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}
@media (min-width: 768px) {
	.mohoui-banner__content.is-phone-only { display: none; } /* slide text set to "phones only" */
}
@media (max-width: 767px) {
	.mohoui-banner__content.is-desktop-only { display: none; } /* replaced by the slide's phone text */
}
.mohoui-banner .mohoui-banner__title {
	margin: 0 0 12px;
	font-family: var(--mohoui-title-font);
	font-size: 40px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.015em;
	color: #fff;
}
.mohoui-banner__sub {
	margin: 0 0 24px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #fff;
}
.mohoui-banner .mohoui-banner__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 154px;
	height: 36px;
	box-sizing: border-box;
	padding: 0 22px;
	border: 1px solid #fff;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .25s ease, color .25s ease;
}
.mohoui-banner .mohoui-banner__btn:hover,
.mohoui-banner .mohoui-banner__btn:focus { background: #fff; color: #1e1a17; }

/* Text rises in on the visible slide */
@media all { /* banners animate on every phone, "reduce motion" or not (client request) */
	.mohoui-banner .swiper-slide .mohoui-banner__content > * { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.215, .61, .355, 1); }
	.mohoui-banner .swiper-slide-active .mohoui-banner__content > * { opacity: 1; transform: none; }
	.mohoui-banner .swiper-slide-active .mohoui-banner__content > :nth-child(1) { transition-delay: .35s; }
	.mohoui-banner .swiper-slide-active .mohoui-banner__content > :nth-child(2) { transition-delay: .5s; }
	.mohoui-banner .swiper-slide-active .mohoui-banner__content > :nth-child(3) { transition-delay: .65s; }
	.mohoui-banner.is-static .mohoui-banner__content > * { opacity: 1; transform: none; }
}

/* Timed captions over a video slide (home.js sets .is-on / .is-out from the video's time).
   Centred on the video. Each caption's words rise out of masks, sharpening from a blur;
   on the way out they lift and soften away. Timings are short to fit the video's scenes. */
.mohoui-banner__captions {
	position: absolute;
	z-index: 2;
	inset: 0;
	pointer-events: none;
}
.mohoui-banner .mohoui-banner__cap {
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(8.6em, calc(100% - 2 * var(--mohoui-gutter))); /* "Transform your" fits (7.5em), "…daily" wraps (10em): breaks like the design */
	margin: 0;
	transform: translate(-50%, -50%);
	font-family: var(--mohoui-title-font);
	font-size: clamp(30px, 3.1vw, 48px);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -.01em;
	text-align: center;
	color: #fff;
	text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
	visibility: hidden;
}
.mohoui-banner .mohoui-banner__cap.is-on,
.mohoui-banner .mohoui-banner__cap.is-out { visibility: visible; }
.mohoui-banner__cap .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.mohoui-banner__cap .w > span {
	display: inline-block;
	transform: translateY(105%);
	opacity: 0;
	filter: blur(8px);
}
.mohoui-banner__cap.is-on .w > span {
	transform: none;
	opacity: 1;
	filter: blur(0);
	transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .7s ease, filter .8s ease;
	transition-delay: calc(.05s + var(--i, 0) * 60ms);
}
.mohoui-banner__cap.is-out .w > span {
	transform: translateY(-45%);
	opacity: 0;
	filter: blur(6px);
	transition: transform .45s cubic-bezier(.7, 0, .84, 0), opacity .4s ease, filter .4s ease;
	transition-delay: calc(var(--i, 0) * 25ms);
}
@media (max-width: 767px) {
	.mohoui-banner .mohoui-banner__cap { font-size: 28px; }
}


/* Banner pagination — phones only (home.js), modelled on hindware.com: small dots; the
   current slide is a ring whose white line fills as the slide plays. */
.mohoui-banner__dots { display: none; }
@media (max-width: 767px) {
	.mohoui-banner .mohoui-banner__dots.swiper-pagination-bullets { /* beats Swiper's own (CDN) .swiper-pagination-bullets.swiper-pagination-horizontal */
		position: absolute;
		z-index: 3;
		left: 0;
		right: 0;
		bottom: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
	}
	.mohoui-banner .mohoui-banner__dots.swiper-pagination-bullets .swiper-pagination-bullet { /* beats Swiper's 4px side margins */
		position: relative;
		box-sizing: border-box;
		width: 7px;
		height: 7px;
		margin: 0;
		border: 1px solid transparent;
		border-radius: 50%;
		background: rgba(255, 255, 255, .55);
		opacity: 1;
		cursor: pointer;
		transition: width .3s ease, height .3s ease, background-color .3s ease, border-color .3s ease;
	}
	.mohoui-banner .mohoui-banner__dots.swiper-pagination-bullets .swiper-pagination-bullet-active {
		width: 20px;
		height: 20px;
		border-color: rgba(255, 255, 255, .5);
		background: transparent;
	}
	.mohoui-banner__dots svg {
		position: absolute;
		inset: -1px;
		width: calc(100% + 2px);
		height: calc(100% + 2px);
		transform: rotate(-90deg); /* fill starts at 12 o'clock */
		opacity: 0;
	}
	.mohoui-banner__dots .swiper-pagination-bullet-active svg { opacity: 1; }
	.mohoui-banner__dots circle {
		fill: none;
		stroke: #fff;
		stroke-width: 2;
		stroke-dasharray: 62.83;
		stroke-dashoffset: 62.83;
	}
}
/* Arrows (bottom right) */
.mohoui-banner__nav {
	position: absolute;
	z-index: 3;
	right: 35px;
	bottom: 72px;
	display: flex;
	gap: 4px;
}
.mohoui-banner__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1.5px solid #fff;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.mohoui-banner__arrow--prev { border-color: rgba(255, 255, 255, .45); color: rgba(255, 255, 255, .7); }
.mohoui-banner__arrow:hover,
.mohoui-banner__arrow:focus-visible { border-color: #fff; background: #fff; color: #1e1a17; }
.mohoui-banner__arrow--next svg { transform: rotate(180deg); }

/* Scroll cue (bottom left): mouse outline with a moving dot */
.mohoui-banner__scroll {
	position: absolute;
	z-index: 3;
	left: 36px;
	bottom: 73px;
	width: 26px;
	height: 50px;
	padding: 0;
	border: 1.5px solid #fff;
	border-radius: 13px;
	background: transparent;
	cursor: pointer;
}
.mohoui-banner__scroll:hover,
.mohoui-banner__scroll:focus { background: transparent; }
.mohoui-banner__scroll span {
	position: absolute;
	top: 8px;
	left: 50%;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 50%;
	background: #fff;
}
@media all { /* animations on for everyone, "reduce motion" or not (client request) */
	.mohoui-banner__scroll span { animation: mohoui-scroll-dot 1.8s ease-in-out infinite; }
}
@keyframes mohoui-scroll-dot {
	0%   { transform: translateY(0); opacity: 1; }
	70%  { transform: translateY(16px); opacity: 0; }
	100% { transform: translateY(0); opacity: 0; }
}

@media (max-width: 767px) {
	.mohoui-banner__content { bottom: 104px; }
	.mohoui-banner .mohoui-banner__title { margin-bottom: 12px; font-size: 36px; }
	.mohoui-banner__sub { margin-bottom: 18px; font-size: 17px; line-height: 1.25; } /* the line above the button: a little bigger on phones */
	.mohoui-banner .mohoui-banner__btn { min-width: 124px; height: 30px; padding: 0 16px; font-size: 12px; } /* smaller button on phones */
	.mohoui-banner__nav { display: none; } /* phones: dot pagination instead (below) */
	.mohoui-banner__scroll { left: 16px; bottom: 28px; width: 22px; height: 38px; }
	.mohoui-banner__scroll span { top: 6px; }
}

/* =========================================================================
   Home intro  (below the banner — markup: inc/home.php, fill: home.js)
   The heading fills plum over light grey line by line as it scrolls in.
   ========================================================================= */
.page-template-template-home .site-content { padding-top: 0; }
.page-template-template-home #content > .col-full {
	box-sizing: border-box;
	max-width: calc(1366px + 2 * var(--mohoui-gutter));
	padding: 0 var(--mohoui-gutter);
	margin: 0 auto;
}
.page-template-template-home .site-main { margin-bottom: 0; }

.mohoui-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 375px);
	gap: 60px;
	padding: 110px 0 120px;
}
.mohoui-intro__eyebrow {
	margin: 0 0 44px;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #8a8a8a;
}
.mohoui-intro .mohoui-intro__heading {
	max-width: 780px;
	margin: 0;
	font-family: var(--mohoui-title-font);
	font-size: 48px;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: 0;
	color: var(--mohoui-plum);
}
/* Fill lines (built by home.js) */
.mohoui-intro__heading.is-filling { color: #d3d3d3; }
.mohoui-fill-line {
	--fill-pos: -16;
	--fill-to: var(--mohoui-plum);
	--fill-from: #d3d3d3;
	display: block;
	color: transparent;
	background-image: linear-gradient(97deg,
		var(--fill-to) 0%,
		var(--fill-to) calc((var(--fill-pos) - 8) * 1%),
		var(--fill-from) calc((var(--fill-pos) + 8) * 1%),
		var(--fill-from) 100%);
	-webkit-background-clip: text;
	background-clip: text;
}
.mohoui-intro__aside { padding-top: 174px; }
.mohoui-intro__aside p {
	margin: 0 0 40px;
	font-size: 16px;
	line-height: 1.65;
	color: #333;
}
.mohoui-intro .mohoui-intro__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 154px;
	height: 36px;
	padding: 0 22px;
	box-sizing: border-box;
	border: 1px solid #bbb;
	border-radius: 0;
	background: transparent;
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	color: #333;
	transition: border-color .25s, background-color .25s, color .25s;
}
.mohoui-intro .mohoui-intro__btn:hover,
.mohoui-intro .mohoui-intro__btn:focus-visible { border-color: var(--mohoui-plum); background: var(--mohoui-plum); color: #fff; }

@media (max-width: 1100px) {
	.mohoui-intro { grid-template-columns: 1fr; gap: 32px; padding: 80px 0; }
	.mohoui-intro__aside { max-width: 560px; padding-top: 0; }
	.mohoui-intro .mohoui-intro__heading { font-size: 40px; }
}
@media (max-width: 767px) {
	.mohoui-intro { padding: 56px 0 64px; gap: 28px; }
	.mohoui-intro__eyebrow { margin-bottom: 22px; font-size: 13px; }
	.mohoui-intro .mohoui-intro__heading { font-size: 30px; line-height: 1.2; }
	.mohoui-intro__aside p { margin-bottom: 28px; font-size: 15px; }
}

/* =========================================================================
   Home "Discover the range" stack  (markup: inc/home.php, motion: home.js)
   Full-screen panels; with GSAP each one pins while the next slides over it.
   ========================================================================= */
.page-template-template-home #page { overflow-x: clip; } /* full-bleed panels vs. scrollbar width */

.mohoui-stack { padding-top: 58px; }
.mohoui-stack .mohoui-stack__heading {
	margin: 0 0 50px;
	font-family: var(--mohoui-title-font);
	font-size: 48px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0;
	text-align: center;
	color: var(--mohoui-plum);
}
.mohoui-stack__panels {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background: #141210; /* shows around a panel as it sinks back */
}
.mohoui-stack__panel {
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 560px;
	background: #141210;
	overflow: hidden;
}
.mohoui-stack__inner {
	position: absolute;
	inset: 0;
	overflow: hidden;
	transform-origin: 50% 0;
	will-change: transform;
}
.mohoui-stack__media,
.mohoui-stack__shade { position: absolute; inset: 0; }
.mohoui-stack__media::after { /* keeps the white text readable on light photos */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.18) 38%, rgba(0,0,0,0) 62%);
}
.mohoui-stack__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 50%;
	will-change: transform;
}
.mohoui-stack__picture { display: block; width: 100%; height: 100%; } /* wraps the img when a phone image is set */
.mohoui-stack__shade { z-index: 2; background: #000; opacity: 0; pointer-events: none; }

.mohoui-stack__content {
	position: absolute;
	z-index: 1;
	top: 120px;
	left: var(--mohoui-gutter);
	max-width: 460px;
	color: #fff;
}
.mohoui-stack .mohoui-stack__title {
	margin: 0 0 18px;
	font-family: var(--mohoui-title-font);
	font-size: 48px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0;
	color: #fff;
}
.mohoui-stack__mask { display: block; overflow: hidden; padding-bottom: .08em; }
.mohoui-stack__mask > span { display: block; }
.mohoui-stack__text {
	margin: 0 0 44px;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255,255,255,.92);
}
.mohoui-stack .mohoui-stack__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 24px;
	box-sizing: border-box;
	border: 1px solid rgba(255,255,255,.9);
	border-radius: 0;
	background: transparent;
	font-size: 14px;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	transition: background-color .3s, color .3s, border-color .3s;
}
.mohoui-stack .mohoui-stack__btn:hover,
.mohoui-stack .mohoui-stack__btn:focus-visible { background: #fff; border-color: #fff; color: #222; }

/* Before the script runs, text that will be animated stays hidden only when motion is on. */
.mohoui-stack.is-animated .mohoui-stack__text,
.mohoui-stack.is-animated .mohoui-stack__btn { opacity: 0; }

@media (max-width: 767px) {
	.mohoui-stack { padding-top: 44px; }
	.mohoui-stack .mohoui-stack__heading { margin-bottom: 32px; font-size: 32px; }
	.mohoui-stack__content { top: auto; bottom: 96px; right: var(--mohoui-gutter); max-width: none; } /* bottom left on phones */
	.mohoui-stack .mohoui-stack__title { margin-bottom: 12px; font-size: 34px; }
	.mohoui-stack__text { margin-bottom: 28px; font-size: 14px; }
	.mohoui-stack .mohoui-stack__btn { height: 34px; padding: 0 18px; font-size: 13px; }
	.mohoui-stack__img { object-position: 68% 50%; }
	.mohoui-stack__picture.has-mobile .mohoui-stack__img { object-position: 50% 50%; } /* portrait phone photo: centred */
	.mohoui-stack__media::after { background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,0) 65%); } /* dark at the bottom, behind the text */
}

/* =========================================================================
   Home values row  (markup: inc/home.php, slider + reveal: home.js)
   Five columns on desktop; on phones a one-at-a-time Swiper with dots.
   ========================================================================= */
.mohoui-values {
	box-sizing: border-box;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 108px var(--mohoui-gutter) 112px;
	background: #f4f4f4;
	text-align: center;
}
.mohoui-values__eyebrow {
	margin: 0 0 6px;
	font-size: 15px;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #8a8a8a;
}
.mohoui-values .mohoui-values__heading {
	margin: 0 0 58px;
	font-family: var(--mohoui-title-font);
	font-size: 48px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--mohoui-plum);
}
.mohoui-values__swiper { max-width: 1366px; margin: 0 auto; }
.mohoui-values__swiper:not(.swiper-initialized) .mohoui-values__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 40px;
	transform: none;
}
.mohoui-values__item { box-sizing: border-box; height: auto; }
.mohoui-values__icon {
	display: block;
	width: auto;
	height: 52px;
	margin: 0 auto 38px;
	overflow: visible;
}
.mohoui-values .mohoui-values__title {
	margin: 0 0 14px;
	font-family: inherit;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
	color: #222;
}
.mohoui-values__text {
	max-width: 230px;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.4;
	color: #333;
}
.mohoui-values__dots { display: none; }

@media (max-width: 1100px) {
	.mohoui-values .mohoui-values__heading { font-size: 40px; }
	.mohoui-values__swiper:not(.swiper-initialized) .mohoui-values__list { gap: 24px; }
	.mohoui-values .mohoui-values__title { font-size: 16px; }
	.mohoui-values__text { font-size: 14px; }
}
@media (max-width: 767px) {
	.mohoui-values { padding: 60px 16px 48px; }
	.mohoui-values .mohoui-values__heading { margin-bottom: 36px; font-size: 30px; line-height: 1.2; }
	.mohoui-values__eyebrow { font-size: 13px; }
	.mohoui-values__swiper:not(.swiper-initialized) .mohoui-values__list { grid-template-columns: 1fr; gap: 44px; }
	.mohoui-values__icon { margin-bottom: 26px; }
	.mohoui-values__text { max-width: 260px; }
	.mohoui-values__dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: 30px;
	}
	.mohoui-values__dots .swiper-pagination-bullet {
		width: 8px;
		height: 8px;
		margin: 0 !important;
		background: #c4c4c4;
		opacity: 1;
		transition: width .3s, background-color .3s;
	}
	.mohoui-values__dots .swiper-pagination-bullet-active { width: 22px; border-radius: 4px; background: var(--mohoui-plum); }
}

/* =========================================================================
   Home "Crafting the Art of Living"  (markup: inc/home.php, slider: home.js)
   Plum band; wide slides with the next one peeking in on the right.
   ========================================================================= */
.mohoui-art {
	box-sizing: border-box;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 112px 0 112px;
	overflow: hidden;
	background: #66204a;
	color: #fff;
}
.mohoui-art__inner {
	box-sizing: border-box;
	max-width: calc(1366px + 2 * var(--mohoui-gutter));
	margin: 0 auto;
	padding: 0 var(--mohoui-gutter);
}
.mohoui-art__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
}
.mohoui-art .mohoui-art__heading {
	margin: 0;
	font-family: var(--mohoui-title-font);
	font-size: 48px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0;
	color: #fff;
}
.mohoui-art__nav { display: flex; gap: 8px; flex-shrink: 0; }
.mohoui-art .mohoui-art__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(255,255,255,.9);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background-color .3s, color .3s, opacity .3s;
}
.mohoui-art__arrow--next svg { transform: scaleX(-1); }
.mohoui-art .mohoui-art__arrow:hover,
.mohoui-art .mohoui-art__arrow:focus-visible { background: #fff; color: #66204a; }
.mohoui-art .mohoui-art__arrow.swiper-button-disabled { opacity: .4; cursor: default; background: transparent; color: #fff; }

/* Left edge on the content column, right edge on the screen edge (the last slide ends flush right). */
.mohoui-art__swiper { overflow: visible; margin-right: calc((100% - 100vw) / 2); }
.mohoui-art .mohoui-art__slide {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 79%;
	max-width: 1080px;
	aspect-ratio: 1080 / 500;
	overflow: hidden;
	background: #4a1736;
	color: #fff;
	text-decoration: none;
	cursor: grab;
}
.mohoui-art .mohoui-art__slide:active { cursor: grabbing; }
.mohoui-art__frame { position: absolute; inset: 0; display: block; overflow: hidden; } /* the photo's box (phones: 4:5, text below) */
.mohoui-art__picture { display: block; width: 100%; height: 100%; }
.mohoui-art__media {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -14%; /* room for the 10% parallax drift (data-swiper-parallax) */
	right: -14%;
}
.mohoui-art__media::after { /* legibility for the label and the text */
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 28%),
		linear-gradient(300deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 45%);
}
.mohoui-art__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.mohoui-art__slide:hover .mohoui-art__img { transform: scale(1.04); }
.mohoui-art .mohoui-art__title {
	position: absolute;
	z-index: 1;
	top: 46px;
	left: 50px;
	margin: 0;
	font-family: inherit;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #fff;
}
.mohoui-art__text {
	position: absolute;
	z-index: 1;
	right: 50px;
	bottom: 44px;
	width: 300px;
	margin: 0;
	font-size: 16px;
	line-height: 1.62;
	color: #fff;
} /* shown on every slide, the peeking one included */

@media (max-width: 1100px) {
	.mohoui-art { padding: 80px 0; }
	.mohoui-art .mohoui-art__heading { font-size: 40px; }
	.mohoui-art__text { width: 260px; font-size: 15px; }
}
@media (max-width: 767px) {
	.mohoui-art { padding: 56px 0 60px; }
	.mohoui-art__head { margin-bottom: 26px; }
	.mohoui-art .mohoui-art__heading { font-size: 30px; }
	.mohoui-art .mohoui-art__arrow { width: 38px; height: 38px; }
	/* Photo on top (4:5), label and text below it on the plum band. */
	.mohoui-art .mohoui-art__slide { width: 88%; aspect-ratio: auto; overflow: visible; background: transparent; }
	.mohoui-art__frame { position: relative; inset: auto; aspect-ratio: 1080 / 1348; background: #4a1736; }
	.mohoui-art__media::after { content: none; }
	.mohoui-art .mohoui-art__title { position: static; margin: 22px 0 10px; font-size: 18px; }
	.mohoui-art__text { position: static; width: auto; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .85); }
}

/* =========================================================================
   Home "New launches"  (markup: inc/home.php, slider + motion: home.js)
   Four portrait cards; hover reveals subtitle + arrow. Phones: Swiper with dots.
   ========================================================================= */
.mohoui-launch { padding: 84px 0 96px; }
.mohoui-launch__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 50px;
}
.mohoui-launch__eyebrow {
	margin: 0 0 6px;
	font-size: 15px;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #8a8a8a;
}
.mohoui-launch .mohoui-launch__heading {
	margin: 0;
	font-family: var(--mohoui-title-font);
	font-size: 48px;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: 0;
	color: var(--mohoui-plum);
}
.mohoui-launch__word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.mohoui-launch__word > span { display: inline-block; }
.mohoui-launch .mohoui-launch__all {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: 108px;
	height: 36px;
	margin-bottom: 10px;
	padding: 0 22px;
	box-sizing: border-box;
	border: 1px solid #bbb;
	font-size: 14px;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	color: #333;
	transition: background-color .3s, border-color .3s, color .3s;
}
.mohoui-launch .mohoui-launch__all:hover,
.mohoui-launch .mohoui-launch__all:focus-visible { border-color: var(--mohoui-plum); background: var(--mohoui-plum); color: #fff; }

.mohoui-launch__swiper:not(.swiper-initialized) .mohoui-launch__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
	transform: none;
}
.mohoui-launch .mohoui-launch__card {
	position: relative;
	display: block;
	box-sizing: border-box;
	aspect-ratio: 319 / 482;
	height: auto;
	overflow: hidden;
	background: #1d1a18;
	color: #fff;
	text-decoration: none;
}
.mohoui-launch__media { position: absolute; inset: 0; overflow: hidden; }
.mohoui-launch__media::after { /* resting fade; a deeper one joins on hover */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 32%);
	transition: opacity .6s;
}
.mohoui-launch__media::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 34%, rgba(0,0,0,0) 55%);
	opacity: 0;
	transition: opacity .6s;
}
.mohoui-launch__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.001);
	transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
}
.mohoui-launch__body {
	position: absolute;
	z-index: 2;
	left: 20px;
	right: 20px;
	bottom: 26px;
	display: flex;
	align-items: flex-end;
	gap: 16px;
}
.mohoui-launch__copy { flex: 1; min-width: 0; }
.mohoui-launch .mohoui-launch__title {
	margin: 0;
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: #fff;
}
.mohoui-launch__sub {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .55s cubic-bezier(.2, .7, .2, 1);
}
.mohoui-launch__sub > p {
	min-height: 0;
	margin: 0;
	overflow: hidden;
	font-size: 16px;
	line-height: 1.3;
	color: #fff;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .45s, transform .55s cubic-bezier(.2, .7, .2, 1);
}
.mohoui-launch__sub > p::before { content: ""; display: block; height: 10px; } /* gap under the title, collapses too */
.mohoui-launch__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fff;
	color: #222;
	opacity: 0;
	transform: scale(.4) rotate(-45deg);
	transition: opacity .4s, transform .55s cubic-bezier(.3, 1.6, .5, 1), background-color .3s, color .3s;
}

/* Hover (mouse) — and always on touch screens, where there is no hover. */
.mohoui-launch__card:hover .mohoui-launch__img,
.mohoui-launch__card:focus-visible .mohoui-launch__img { transform: scale(1.07); }
.mohoui-launch__card:hover .mohoui-launch__media::before,
.mohoui-launch__card:focus-visible .mohoui-launch__media::before { opacity: 1; }
.mohoui-launch__card:hover .mohoui-launch__sub,
.mohoui-launch__card:focus-visible .mohoui-launch__sub { grid-template-rows: 1fr; }
.mohoui-launch__card:hover .mohoui-launch__sub > p,
.mohoui-launch__card:focus-visible .mohoui-launch__sub > p { opacity: 1; transform: none; transition-delay: .08s; }
.mohoui-launch__card:hover .mohoui-launch__go,
.mohoui-launch__card:focus-visible .mohoui-launch__go { opacity: 1; transform: none; transition-delay: .12s; }
.mohoui-launch__card .mohoui-launch__go:hover { background: var(--mohoui-plum); color: #fff; }
@media (hover: none) {
	.mohoui-launch__media::before { opacity: 1; }
	.mohoui-launch__sub { grid-template-rows: 1fr; }
	.mohoui-launch__sub > p { opacity: 1; transform: none; }
	.mohoui-launch__go { opacity: 1; transform: none; }
}

.mohoui-launch__dots { display: none; }

@media (max-width: 1100px) {
	.mohoui-launch .mohoui-launch__heading { font-size: 40px; }
	.mohoui-launch__swiper:not(.swiper-initialized) .mohoui-launch__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 767px) {
	.mohoui-launch { padding: 56px 0 60px; }
	.mohoui-launch__head { flex-wrap: wrap; align-items: flex-start; margin-bottom: 28px; }
	.mohoui-launch__eyebrow { font-size: 13px; }
	.mohoui-launch .mohoui-launch__heading { font-size: 30px; line-height: 1.2; }
	.mohoui-launch .mohoui-launch__all { margin-bottom: 0; height: 34px; font-size: 13px; }
	.mohoui-launch__swiper:not(.swiper-initialized) .mohoui-launch__list { grid-template-columns: 1fr; }
	.mohoui-launch__dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: 24px;
	}
	.mohoui-launch__dots .swiper-pagination-bullet {
		width: 8px;
		height: 8px;
		margin: 0 !important;
		background: #c4c4c4;
		opacity: 1;
		transition: width .3s, background-color .3s;
	}
	.mohoui-launch__dots .swiper-pagination-bullet-active { width: 22px; border-radius: 4px; background: var(--mohoui-plum); }
}

/* =========================================================================
   Home video banner, brand story, manufacturing  (markup: inc/home.php, motion: home.js)
   ========================================================================= */
/* Shared text block */
.mohoui-more__eyebrow {
	margin: 0 0 6px;
	font-size: 15px;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #8a8a8a;
}
.mohoui-more .mohoui-more__heading,
.mohoui-story .mohoui-more__heading,
.mohoui-make .mohoui-more__heading {
	margin: 0;
	font-family: var(--mohoui-title-font);
	font-size: 48px;
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: 0;
	color: var(--mohoui-plum);
}
.mohoui-more__text p {
	margin: 0 0 26px;
	font-size: 16px;
	line-height: 1.62;
	color: #333;
}
.mohoui-more__text p:last-child { margin-bottom: 0; }
.mohoui-more__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 24px;
	box-sizing: border-box;
	border: 1px solid #bbb;
	font-size: 14px;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	color: #333;
	transition: background-color .3s, border-color .3s, color .3s;
}
.mohoui-more__btn:hover,
.mohoui-more__btn:focus-visible { border-color: var(--mohoui-plum); background: var(--mohoui-plum); color: #fff; }
.mohoui-more__media { position: relative; overflow: hidden; background: #1d1a18; }
.mohoui-more__img { display: block; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.mohoui-more__word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.mohoui-more__word > span { display: inline-block; }
.mohoui-story__heading.is-filling { color: #d3d3d3; }

/* Video banner */
.mohoui-film {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}
.mohoui-film__frame {
	position: relative;
	width: 100%;
	height: min(51.06vw, 100vh); /* 1512 × 772, never taller than the screen; width always full */
	overflow: hidden;
	background: #1d1a18;
}
.mohoui-film__img { display: block; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.mohoui-film__video { display: block; width: 100%; height: 100%; object-fit: cover; background: #1d1a18; cursor: pointer; will-change: transform; } /* plays on scroll into view (home.js) */
.mohoui-film .mohoui-film__play {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	width: 92px;
	height: 92px;
	margin: -46px 0 0 -46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: scale .4s cubic-bezier(.3, 1.6, .5, 1);
}
.mohoui-film .mohoui-film__play svg { display: block; position: relative; z-index: 1; }
.mohoui-film__play::before,
.mohoui-film__play::after { /* soft pulse rings */
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.7);
	animation: mohoui-film-ring 2.6s cubic-bezier(.2, .6, .3, 1) infinite;
}
.mohoui-film__play::after { animation-delay: 1.3s; }
@keyframes mohoui-film-ring {
	0%   { transform: scale(1); opacity: .8; }
	100% { transform: scale(1.9); opacity: 0; }
}
.mohoui-film .mohoui-film__play:hover { scale: 1.08; }
.mohoui-film__player {
	position: absolute;
	z-index: 3;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
	object-fit: cover;
	cursor: pointer; /* click to pause */
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease, visibility 0s linear .5s;
}
/* Playing: video fades in over the poster, play button bows out. Paused: the reverse. */
.mohoui-film.is-playing .mohoui-film__player { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.mohoui-film .mohoui-film__play { transition: scale .4s cubic-bezier(.3, 1.6, .5, 1), opacity .35s ease; }
.mohoui-film.is-playing .mohoui-film__play { opacity: 0; scale: .8; pointer-events: none; }
.mohoui-film.is-playing.is-embed .mohoui-film__play { display: none; }
@media not all { /* reduce-motion overrides switched off (client request) */
	.mohoui-film__play::before, .mohoui-film__play::after { animation: none; opacity: 0; }
}

/* Brand story */
.mohoui-story {
	display: grid;
	grid-template-columns: minmax(0, 752fr) minmax(0, 614fr);
	align-items: center;
	padding: 80px 0;
}
.mohoui-story__media { aspect-ratio: 4 / 5; max-height: 85vh; } /* shorter than the 752 x 1120 design (client request); the photo crops to fit */
.mohoui-story__media .mohoui-more__img { height: 116%; margin-top: -8%; } /* room for the parallax drift */
.mohoui-story__copy { padding-left: 159px; max-width: 560px; box-sizing: border-box; }
.mohoui-story .mohoui-story__heading { max-width: 400px; margin-bottom: 44px; font-size: 44px; letter-spacing: -.03em; } /* breaks as in the design */
.mohoui-story .mohoui-more__text { max-width: 382px; }
.mohoui-story .mohoui-more__btn { margin-top: 50px; }

/* Manufacturing */
.mohoui-make {
	display: grid;
	grid-template-columns: minmax(0, 409fr) minmax(0, 957fr);
	padding: 80px 0 90px;
}
.mohoui-make__copy {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	padding-right: 40px;
}
.mohoui-make .mohoui-make__heading { max-width: 300px; }
.mohoui-make .mohoui-more__text { max-width: 320px; }
.mohoui-make .mohoui-more__btn { margin-top: 30px; }
.mohoui-make__media { aspect-ratio: 957 / 542; }
.mohoui-make__media .mohoui-more__img { width: 112%; max-width: none; } /* room for the pan */

@media (max-width: 1100px) {
	.mohoui-more .mohoui-more__heading,
	.mohoui-story .mohoui-more__heading,
	.mohoui-make .mohoui-more__heading { font-size: 40px; }
	.mohoui-story__copy { padding-left: 56px; }
}
@media (max-width: 767px) {
	.mohoui-more__eyebrow { font-size: 13px; }
	.mohoui-more .mohoui-more__heading,
	.mohoui-story .mohoui-more__heading,
	.mohoui-make .mohoui-more__heading { font-size: 32px; line-height: 1.12; }
	.mohoui-more__text p { margin-bottom: 18px; font-size: 15px; }
	.mohoui-film__frame { height: 125vw; max-height: 100svh; } /* 4:5 */
	.mohoui-film .mohoui-film__play { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
	.mohoui-film .mohoui-film__play svg { width: 72px; height: 72px; }
	.mohoui-story { grid-template-columns: 1fr; gap: 36px; padding: 56px 0; }
	.mohoui-story__copy { padding-left: 0; max-width: none; }
	.mohoui-story .mohoui-story__heading { margin-bottom: 24px; }
	.mohoui-story .mohoui-more__btn { margin-top: 30px; }
	.mohoui-make { grid-template-columns: 1fr; padding: 24px 0 64px; }
	.mohoui-make__copy { display: contents; }
	.mohoui-make__top { order: 1; margin-bottom: 28px; }
	.mohoui-make__media { order: 2; }
	.mohoui-make__bottom { order: 3; margin-top: 28px; }
}

/* =========================================================================
   Mega menu  (markup: inc/mega-menu.php, behaviour: assets/mega-menu.js)
   Desktop: full-width white panel under the header, three columns split by thin
   rules (as on thermaxglobal.com) — intro text | icon links | photo card — and a
   grey strip of extra links along the bottom.
   ========================================================================= */
.site-header.mohoui-header { transition: background-color .3s ease; }
/* Open panel: white header bar, also over a transparent (overlay) header */
.site-header.mohoui-header.is-mega-open,
.mohoui-header-overlay .site-header.mohoui-header.is-mega-open { background: #fff; }
.mohoui-mega { display: none; }

@media (min-width: 768px) {
	/* the panel replaces the small dropdown */
	.mohoui-header .main-navigation ul.menu > li.mohoui-has-mega > ul.sub-menu { display: none !important; }
	.mohoui-header .main-navigation ul.menu > li.is-mega-active > a { color: var(--mohoui-plum) !important; opacity: 1; box-shadow: inset 0 -2px 0 var(--mohoui-plum); }
	.mohoui-header .main-navigation ul.menu > li.is-mega-active > a::after { transform: rotate(225deg); margin-top: 3px; }
	.mohoui-header .main-navigation ul.menu > li.menu-item-has-children > a::after { transition: transform .3s, margin .3s; }

	.mohoui-mega {
		display: block;
		position: absolute;
		z-index: 49;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border-top: 1px solid #ececec;
		box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .22);
		clip-path: inset(0 0 100% 0);
		transition: clip-path .5s cubic-bezier(.7, 0, .2, 1);
	}
	.mohoui-mega[hidden] { display: none; }
	.mohoui-mega.is-open { clip-path: inset(0 0 -60px 0); } /* -60px keeps the shadow */
	.mohoui-mega.is-swap { transition: none; }
	.mohoui-mega__inner {
		display: grid;
		grid-template-columns: minmax(0, 31fr) minmax(0, 34fr) minmax(0, 35fr);
		box-sizing: border-box;
		max-width: calc(1366px + 2 * var(--mohoui-gutter));
		min-height: 330px;
		margin: 0 auto;
		padding: 0 var(--mohoui-gutter);
	}
	.mohoui-mega__col { padding: 44px 40px 44px; }
	.mohoui-mega__intro { padding-left: 0; padding-top: 60px; }
	.mohoui-mega__nav,
	.mohoui-mega__spot { border-left: 1px solid #e6e6e6; }
	.mohoui-mega__spot { padding-right: 0; }

	/* columns and rows rise in */
	.mohoui-mega__col,
	.mohoui-mega__list > li {
		opacity: 0;
		transform: translateY(12px);
		transition: opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
	}
	.mohoui-mega.is-open .mohoui-mega__col,
	.mohoui-mega.is-open .mohoui-mega__list > li { opacity: 1; transform: none; }
	.mohoui-mega.is-open .mohoui-mega__intro { transition-delay: .12s; }
	.mohoui-mega.is-open .mohoui-mega__nav { transition-delay: .18s; }
	.mohoui-mega.is-open .mohoui-mega__spot { transition-delay: .26s; }
	.mohoui-mega.is-open .mohoui-mega__list > li { transition-delay: calc(.22s + var(--i, 0) * .06s); }
	.mohoui-mega.is-swap .mohoui-mega__col,
	.mohoui-mega.is-swap .mohoui-mega__list > li { transition-delay: calc(var(--i, 0) * .04s); }

	.mohoui-mega a { text-decoration: none; }

	/* left: intro */
	.mohoui-mega .mohoui-mega__title {
		margin: 0 0 14px;
		font-family: var(--mohoui-title-font);
		font-size: 34px;
		font-weight: 500;
		line-height: 1.1;
		color: var(--mohoui-plum);
	}
	.mohoui-mega .mohoui-mega__text {
		max-width: 340px;
		margin: 0 0 24px;
		font-size: 14px;
		line-height: 1.6;
		color: #444;
	}
	.mohoui-mega .mohoui-mega__all {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		padding-bottom: 4px;
		border-bottom: 1px solid currentColor;
		font-size: 13px;
		letter-spacing: .04em;
		text-transform: uppercase;
		color: #222;
		transition: color .25s, gap .3s;
	}
	.mohoui-mega .mohoui-mega__all:hover,
	.mohoui-mega .mohoui-mega__all:focus-visible { gap: 14px; color: var(--mohoui-plum); }

	/* centre: links with line icons */
	.mohoui-mega__list { margin: 0; padding: 0; list-style: none; }
	.mohoui-mega__list > li { margin: 0; border-bottom: 1px solid #ececec; }
	.mohoui-mega .mohoui-mega__item {
		display: flex;
		align-items: center;
		gap: 16px;
		padding: 12px 0;
		font-size: 15px;
		font-weight: 500;
		line-height: 1.3;
		color: #222;
		transition: color .25s, padding .35s cubic-bezier(.2, .7, .2, 1);
	}
	.mohoui-mega__icon { flex-shrink: 0; width: 40px; height: 40px; color: #3a3a3a; transition: color .25s, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
	.mohoui-mega__chev { flex-shrink: 0; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
	.mohoui-mega .mohoui-mega__item:hover,
	.mohoui-mega .mohoui-mega__item:focus-visible { padding-left: 6px; color: var(--mohoui-plum); }
	.mohoui-mega__item:hover .mohoui-mega__icon,
	.mohoui-mega__item:focus-visible .mohoui-mega__icon { color: var(--mohoui-plum); transform: scale(1.08); }

	/* right: photo card with a frosted label band */
	.mohoui-mega .mohoui-mega__card {
		position: relative;
		display: block;
		aspect-ratio: 380 / 300;
		overflow: hidden;
		border-radius: 4px;
		background: #eee;
		color: #141414;
	}
	.mohoui-mega__img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transform: scale(1.1);
		transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
	}
	.mohoui-mega.is-open .mohoui-mega__img { transform: scale(1); }
	.mohoui-mega .mohoui-mega__card:hover .mohoui-mega__img { transform: scale(1.05); }
	.mohoui-mega__card-label {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 58px;
		background: rgba(246, 246, 246, .78);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		font-size: 17px;
		color: #141414;
		transition: background-color .3s, color .3s;
	}
	.mohoui-mega__card:hover .mohoui-mega__card-label { background: rgba(255, 255, 255, .92); color: var(--mohoui-plum); }

	/* bottom strip: extra links */
	.mohoui-mega__bar { background: #f6f6f6; border-top: 1px solid #e6e6e6; }
	.mohoui-mega__links {
		display: flex;
		flex-wrap: wrap;
		gap: 12px 56px;
		box-sizing: border-box;
		max-width: calc(1366px + 2 * var(--mohoui-gutter));
		margin: 0 auto;
		padding: 18px var(--mohoui-gutter);
		list-style: none;
	}
	.mohoui-mega__links > li {
		margin: 0;
		opacity: 0;
		transform: translateY(8px);
		transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
	}
	.mohoui-mega.is-open .mohoui-mega__links > li { opacity: 1; transform: none; transition-delay: calc(.32s + var(--i, 0) * .05s); }
	.mohoui-mega.is-swap .mohoui-mega__links > li { transition-delay: 0s; }
	.mohoui-mega .mohoui-mega__links a {
		display: inline-flex;
		align-items: center;
		gap: 12px;
		font-size: 15px;
		color: #141414;
		transition: color .25s;
	}
	.mohoui-mega__links .mohoui-mega__icon { width: 26px; height: 26px; }
	.mohoui-mega .mohoui-mega__links a:hover,
	.mohoui-mega .mohoui-mega__links a:focus-visible { color: var(--mohoui-plum); }
	.mohoui-mega__links a:hover span,
	.mohoui-mega__links a:focus-visible span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
	.mohoui-mega__links a:hover .mohoui-mega__icon { color: var(--mohoui-plum); }
}
@media (min-width: 768px) and (max-width: 1100px) {
	.mohoui-mega__col { padding: 34px 24px; }
	.mohoui-mega__intro { padding-left: 0; }
	.mohoui-mega__spot { padding-right: 0; }
	.mohoui-mega .mohoui-mega__title { font-size: 28px; }
}
@media not all { /* reduce-motion overrides switched off (client request) */
	.mohoui-mega, .mohoui-mega__col, .mohoui-mega__list > li, .mohoui-mega__img { transition: none !important; }
}

/* =========================================================================
   Mobile menu drawer  (markup: inc/mega-menu.php, behaviour: assets/mega-menu.js)
   Off-canvas from the right; accordion sub-menus with the mega-menu line icons.
   ========================================================================= */
.mohoui-drawer-nav { display: none; }
@media (max-width: 767px) {
	/* the drawer replaces Storefront's drop-down list */
	.site-header.mohoui-header .main-navigation .primary-navigation { display: none !important; }
	.mohoui-drawer-open,
	.mohoui-drawer-open body { overflow: hidden; }

	.mohoui-drawer-nav { display: block; position: fixed; z-index: 9999; inset: 0; }
	.mohoui-drawer-nav[hidden] { display: none; }
	.mohoui-drawer-nav,
	.mohoui-drawer-nav * { font-family: "Georama", sans-serif; box-sizing: border-box; }
	.mohoui-drawer-nav__backdrop {
		position: absolute;
		inset: 0;
		background: rgba(20, 16, 14, .5);
		opacity: 0;
		transition: opacity .4s ease;
	}
	.mohoui-drawer-nav__panel-wrap {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		width: min(88vw, 380px);
		background: #fff;
		color: #222;
		box-shadow: -20px 0 40px rgba(0, 0, 0, .18);
		transform: translateX(100%);
		transition: transform .45s cubic-bezier(.7, 0, .2, 1);
	}
	.mohoui-drawer-nav.is-open .mohoui-drawer-nav__backdrop { opacity: 1; }
	.mohoui-drawer-nav.is-open .mohoui-drawer-nav__panel-wrap { transform: none; transition-timing-function: cubic-bezier(.2, .8, .2, 1); }

	.mohoui-drawer-nav__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-shrink: 0;
		height: 76px;
		padding: 0 16px 0 20px;
		border-bottom: 1px solid #ececec;
	}
	.mohoui-drawer-nav__logo { display: block; line-height: 0; }
	.mohoui-drawer-nav__logo img,
	.mohoui-drawer-nav__foot img { filter: brightness(0) invert(.2); }
	.mohoui-drawer-nav__logo img { width: 44px; height: auto; }
	.mohoui-drawer-nav .mohoui-drawer-nav__close {
		position: relative;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: #222;
		cursor: pointer;
	}
	.mohoui-drawer-nav__close span::before,
	.mohoui-drawer-nav__close span::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 18px;
		height: 1.5px;
		margin: -.75px 0 0 -9px;
		background: currentColor;
		transform: rotate(45deg);
		transition: transform .4s cubic-bezier(.3, 1.6, .5, 1);
	}
	.mohoui-drawer-nav__close span::after { transform: rotate(-45deg); }
	.mohoui-drawer-nav__close:active span::before { transform: rotate(135deg); }
	.mohoui-drawer-nav__close:active span::after { transform: rotate(45deg); }

	.mohoui-drawer-nav__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 24px; }
	.mohoui-drawer-nav__list { margin: 0; padding: 0; list-style: none; }
	.mohoui-drawer-nav__item { margin: 0; border-bottom: 1px solid #ececec; }
	.mohoui-drawer-nav__sub .mohoui-drawer-nav__item { border-bottom: 0; }

	/* entrance: items fade in after the panel */
	.mohoui-drawer-nav__body > .mohoui-drawer-nav__list > .mohoui-drawer-nav__item,
	.mohoui-drawer-nav__foot > * {
		opacity: 0;
		transform: translateX(24px);
		transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
	}
	.mohoui-drawer-nav.is-open .mohoui-drawer-nav__body > .mohoui-drawer-nav__list > .mohoui-drawer-nav__item,
	.mohoui-drawer-nav.is-open .mohoui-drawer-nav__foot > * {
		opacity: 1;
		transform: none;
		transition-delay: calc(.18s + var(--i, 0) * .05s);
	}
	.mohoui-drawer-nav.is-open .mohoui-drawer-nav__foot > * { transition-delay: .42s; }

	.mohoui-drawer-nav__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
	.mohoui-drawer-nav__row > a,
	.mohoui-drawer-nav__row > span,
	.mohoui-drawer-nav .mohoui-drawer-nav__label {
		flex: 1;
		display: flex;
		align-items: center;
		gap: 14px;
		min-height: 58px;
		padding: 0;
		border: 0;
		background: transparent;
		font-size: 19px;
		font-weight: 400;
		line-height: 1.2;
		text-align: left;
		text-decoration: none;
		color: #1d1a18;
		cursor: pointer;
	}
	.mohoui-drawer-nav .mohoui-drawer-nav__toggle {
		position: relative;
		flex-shrink: 0;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 1px solid #ddd;
		border-radius: 50%;
		background: transparent;
		color: #1d1a18;
		cursor: pointer;
		transition: background-color .3s, border-color .3s, color .3s;
	}
	.mohoui-drawer-nav__toggle span {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 7px;
		height: 7px;
		margin: -5px 0 0 -3.5px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		transition: transform .4s cubic-bezier(.2, .7, .2, 1), margin .4s;
	}
	.mohoui-drawer-nav__item.is-expanded > .mohoui-drawer-nav__row .mohoui-drawer-nav__toggle { border-color: var(--mohoui-plum); background: var(--mohoui-plum); color: #fff; }
	.mohoui-drawer-nav__item.is-expanded > .mohoui-drawer-nav__row .mohoui-drawer-nav__toggle span { transform: rotate(225deg); margin-top: -1px; }
	.mohoui-drawer-nav__item.is-expanded > .mohoui-drawer-nav__row > .mohoui-drawer-nav__label,
	.mohoui-drawer-nav__item.is-expanded > .mohoui-drawer-nav__row > a { color: var(--mohoui-plum); }

	/* inner dropdown (accordion) */
	.mohoui-drawer-nav__panel {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1);
	}
	.mohoui-drawer-nav__panel > div { min-height: 0; overflow: hidden; }
	.mohoui-drawer-nav__item.is-expanded > .mohoui-drawer-nav__panel { grid-template-rows: 1fr; }
	.mohoui-drawer-nav__sub { padding: 2px 0 14px; }
	.mohoui-drawer-nav__sub .mohoui-drawer-nav__item {
		opacity: 0;
		transform: translateY(-6px);
		transition: opacity .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1);
	}
	.mohoui-drawer-nav__item.is-expanded > .mohoui-drawer-nav__panel .mohoui-drawer-nav__sub .mohoui-drawer-nav__item {
		opacity: 1;
		transform: none;
		transition-delay: calc(.1s + var(--i, 0) * .05s);
	}
	.mohoui-drawer-nav__sub .mohoui-drawer-nav__row > a,
	.mohoui-drawer-nav__sub .mohoui-drawer-nav__row > span {
		min-height: 48px;
		padding: 0 12px;
		border-radius: 4px;
		background: #f6f6f6;
		margin-top: 6px;
		font-size: 16px;
	}
	.mohoui-drawer-nav__sub .mohoui-mega__icon { width: 30px; height: 30px; color: #3a3a3a; }
	.mohoui-drawer-nav__sub .mohoui-drawer-nav__row > a:active { background: #ececec; }

	.mohoui-drawer-nav__foot {
		display: flex;
		flex-direction: column;
		gap: 12px;
		flex-shrink: 0;
		padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
		border-top: 1px solid #ececec;
		background: #fafafa;
	}
	.mohoui-drawer-nav .mohoui-drawer-nav__shop {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 44px;
		background: var(--mohoui-plum);
		font-size: 14px;
		letter-spacing: .04em;
		text-transform: uppercase;
		text-decoration: none;
		color: #fff;
	}
	.mohoui-drawer-nav .mohoui-drawer-nav__call,
	.mohoui-drawer-nav .mohoui-drawer-nav__account {
		display: flex;
		align-items: center;
		gap: 10px;
		font-size: 15px;
		text-decoration: none;
		color: #333;
	}
}
@media not all { /* reduce-motion overrides switched off (client request) */
	.mohoui-drawer-nav *, .mohoui-drawer-nav__panel-wrap, .mohoui-drawer-nav__backdrop { transition: none !important; }
}

/* =========================================================================
   Contact page  (template-contact.php, logic: inc/contact.php, behaviour: assets/contact.js)
   Intro, then customer care + offices (left, sticky) and the request form (right).
   ========================================================================= */
.page-template-template-contact #content > .col-full {
	box-sizing: border-box;
	max-width: calc(1366px + 2 * var(--mohoui-gutter));
	padding: 0 var(--mohoui-gutter);
	margin: 0 auto;
}
/* the complaint band sits right above the footer (no gap from the theme's content margins) */
.page-template-template-contact .site-main,
.page-template-template-contact .content-area { margin-bottom: 0; }
.mohoui-contact-page { --mc-line: #e2dcd6; --mc-err: #b8382f; }

/* Intro */
.mohoui-contact-page .mc-intro { padding: 36px 0 56px; max-width: 760px; }
.mohoui-contact-page .mc-eyebrow { margin: 0 0 10px; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: #8a8a8a; }
.mohoui-contact-page .mc-title {
	margin: 0 0 18px;
	font-family: var(--mohoui-title-font);
	font-size: 56px;
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -.01em;
	color: var(--mohoui-plum);
}
.mohoui-contact-page .mc-lead { margin: 0; max-width: 620px; font-size: 17px; line-height: 1.65; color: #444; }

.mohoui-contact-page .mc-layout {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 56px;
	align-items: start;
}

/* Entrance */
@media all { /* animations on for everyone, "reduce motion" or not (client request) */
	.mohoui-contact-page .mc-intro > *, .mohoui-contact-page .mc-info > *, .mohoui-contact-page .mc-form-wrap { animation: mc-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
	.mohoui-contact-page .mc-intro > :nth-child(2) { animation-delay: .08s; }
	.mohoui-contact-page .mc-intro > :nth-child(3) { animation-delay: .16s; }
	.mohoui-contact-page .mc-info > :nth-child(1) { animation-delay: .22s; }
	.mohoui-contact-page .mc-info > :nth-child(2) { animation-delay: .3s; }
	.mohoui-contact-page .mc-info > :nth-child(3) { animation-delay: .38s; }
	.mohoui-contact-page .mc-form-wrap { animation-delay: .3s; }
}
@keyframes mc-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Left: details */
.mohoui-contact-page .mc-info { position: sticky; top: 32px; display: flex; flex-direction: column; gap: 14px; }
.admin-bar .mohoui-contact-page .mc-info { top: 64px; }
.mohoui-contact-page .mc-card { border-radius: 8px; }
.mohoui-contact-page .mc-card--care {
	padding: 30px 30px 26px;
	background: var(--mohoui-plum);
	background-image: radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 55%);
	color: #fff;
}
.mohoui-contact-page .mc-card__eyebrow { margin: 0 0 18px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.mohoui-contact-page .mc-big {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	border-top: 1px solid rgba(255, 255, 255, .16);
	color: #fff;
	text-decoration: none;
	font-size: 22px;
	line-height: 1.25;
	word-break: break-word;
}
.mohoui-contact-page .mc-big:first-of-type { border-top: 0; padding-top: 0; }
.mohoui-contact-page .mc-big small { display: block; margin-bottom: 3px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .65); }
.mohoui-contact-page .mc-big:last-child { font-size: 17px; }
.mohoui-contact-page .mc-big__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	transition: background-color .3s, transform .4s cubic-bezier(.3, 1.6, .5, 1);
}
.mohoui-contact-page .mc-big:hover .mc-big__icon { background: #fff; color: var(--mohoui-plum); transform: scale(1.06); }

.mohoui-contact-page .mc-office { padding: 28px 30px; border: 1px solid var(--mc-line); background: #fff; }
.mohoui-contact-page .mc-office__title {
	margin: 0 0 18px;
	font-family: var(--mohoui-title-font);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.15;
	color: var(--mohoui-plum);
}
.mohoui-contact-page .mc-lines { margin: 0; padding: 0; list-style: none; }
.mohoui-contact-page .mc-lines li { display: flex; gap: 14px; margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: #333; }
.mohoui-contact-page .mc-lines li:last-child { margin-bottom: 0; }
.mohoui-contact-page .mc-lines .mc-ci { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; color: var(--mohoui-plum); }
.mohoui-contact-page .mc-lines a { color: #333; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s, color .25s; }
.mohoui-contact-page .mc-lines a:hover { color: var(--mohoui-plum); background-size: 100% 1px; }
.mohoui-contact-page .mc-sep { margin: 0 6px; color: #aaa; }
.mohoui-contact-page .mc-lines .mc-map {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	background: none;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mohoui-plum);
}
.mohoui-contact-page .mc-map .mc-ci { width: 14px; height: 14px; margin: 0; transition: transform .3s; }
.mohoui-contact-page .mc-map:hover .mc-ci { transform: translateX(4px); }
.mohoui-contact-page .mc-lines li > span { display: flex; flex-direction: column; align-items: flex-start; }
.mohoui-contact-page .mc-lines li:nth-child(2) > span { flex-direction: row; flex-wrap: wrap; }

/* Right: form */
.mohoui-contact-page .mc-form-wrap { position: relative; padding: 44px 44px 40px; border-radius: 8px; background: #f7f4f1; scroll-margin-top: 24px; }
.mohoui-contact-page .mc-form__head { margin-bottom: 30px; }
.mohoui-contact-page .mc-form__title {
	margin: 0 0 8px;
	font-family: var(--mohoui-title-font);
	font-size: 34px;
	font-weight: 500;
	line-height: 1.15;
	color: #1d1a18;
}
.mohoui-contact-page .mc-form__sub { margin: 0; font-size: 14px; color: #777; }
.mohoui-contact-page .mc-req { color: var(--mohoui-plum); }
.mohoui-contact-page .mc-banner { margin: 16px 0 0; padding: 12px 16px; border-radius: 6px; font-size: 14px; }
.mohoui-contact-page .mc-banner--error { background: #fbeceb; color: var(--mc-err); }
.mohoui-contact-page .mc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mohoui-contact-page .mc-step { margin: 0 0 34px; padding: 0; border: 0; min-width: 0; background: none; }
.mohoui-contact-page .mc-step legend {
	background: none;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0 0 18px;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #1d1a18;
}
.mohoui-contact-page .mc-step legend::after { content: ""; flex: 1; height: 1px; background: var(--mc-line); }
.mohoui-contact-page .mc-step__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--mohoui-plum);
	font-size: 11px;
	letter-spacing: 0;
	color: #fff;
}
.mohoui-contact-page .mc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.mohoui-contact-page .mc-field { position: relative; min-width: 0; }
.mohoui-contact-page .mc-field--wide { grid-column: 1 / -1; }
.mohoui-contact-page .mc-field[hidden] { display: none; }
.mohoui-contact-page .mc-field.is-shown { animation: mc-rise .45s cubic-bezier(.2, .7, .2, 1) both; }

.mohoui-contact-page .mc-input {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 58px;
	margin: 0;
	padding: 24px 16px 8px;
	border: 1px solid var(--mc-line);
	border-radius: 6px;
	background: #fff;
	box-shadow: none;
	font: inherit;
	font-size: 15px;
	line-height: 1.3;
	color: #1d1a18;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .2s, box-shadow .25s;
}
.mohoui-contact-page .mc-input:hover { border-color: #c9bfb6; }
.mohoui-contact-page .mc-input:focus { border-color: var(--mohoui-plum); box-shadow: 0 0 0 3px rgba(95, 27, 71, .12); outline: none; }
.mohoui-contact-page .mc-field > .mc-input + label {
	position: absolute;
	top: 19px;
	left: 17px;
	right: 40px;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #7a7470;
	pointer-events: none;
	transform-origin: 0 0;
	transition: transform .2s cubic-bezier(.2, .7, .2, 1), color .2s;
}
.mohoui-contact-page .mc-field.is-focus > .mc-input + label,
.mohoui-contact-page .mc-field.is-filled > .mc-input + label,
.mohoui-contact-page .mc-field > input.mc-input:not(:placeholder-shown) + label,
.mohoui-contact-page .mc-field > textarea.mc-input:not(:placeholder-shown) + label,
.mohoui-contact-page .mc-field > .mc-input[type="date"] + label { transform: translateY(-11px) scale(.78); color: #8a8a8a; letter-spacing: .02em; }
.mohoui-contact-page .mc-field.is-focus > .mc-input + label { color: var(--mohoui-plum); }
.mohoui-contact-page .mc-input[type="date"] { color: #1d1a18; }
.mohoui-contact-page .mc-input[type="date"]:not(:focus):invalid,
.mohoui-contact-page .mc-field:not(.is-filled) > .mc-input[type="date"]:not(:focus) { color: #aaa; }
.mohoui-contact-page .mc-field--select .mc-input { padding-right: 40px; cursor: pointer; }
.mohoui-contact-page .mc-caret { position: absolute; top: 25px; right: 17px; color: #6d6763; pointer-events: none; transition: transform .25s; }
.mohoui-contact-page .mc-field--select.is-focus .mc-caret { transform: rotate(180deg); color: var(--mohoui-plum); }
.mohoui-contact-page .mc-field--area .mc-input { height: auto; min-height: 160px; padding-top: 28px; resize: vertical; }
.mohoui-contact-page .mc-hint { margin: 6px 2px 0; font-size: 12.5px; color: #8a8a8a; }
.mohoui-contact-page .mc-count { margin: 6px 2px 0; font-size: 12px; text-align: right; color: #8a8a8a; }
.mohoui-contact-page .mc-count.is-near { color: #b86b1b; }
/* (the parent theme styles [role=alert] as a pink box; errors here are plain text) */
.mohoui-contact-page .mc-error { margin: 0; padding: 0; border: 0; background: none; font-size: 12.5px; color: var(--mc-err); }
.mohoui-contact-page .mc-error:empty { display: none; }
.mohoui-contact-page .mc-field.is-invalid .mc-error { margin: 6px 2px 0; }
.mohoui-contact-page .mc-field.is-invalid .mc-input { border-color: var(--mc-err); }
.mohoui-contact-page .mc-field.is-invalid .mc-input:focus { box-shadow: 0 0 0 3px rgba(184, 56, 47, .12); }
.mohoui-contact-page .mc-field.is-invalid > .mc-input + label { color: var(--mc-err); }
.mohoui-contact-page .mc-field.is-invalid .mc-hint { display: none; }

.mohoui-contact-page .mc-label { margin: 0 0 12px; font-size: 14px; color: #3a3632; }
.mohoui-contact-page .mc-opt { color: #8a8a8a; }

/* Complaint chips */
.mohoui-contact-page .mc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.mohoui-contact-page .mc-chip { position: relative; margin: 0; cursor: pointer; }
.mohoui-contact-page .mc-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mohoui-contact-page .mc-chip span {
	display: inline-flex;
	align-items: center;
	gap: 0;
	padding: 10px 16px;
	border: 1px solid var(--mc-line);
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
	line-height: 1.2;
	color: #3a3632;
	transition: background-color .25s, border-color .25s, color .25s, gap .25s, padding .25s;
}
.mohoui-contact-page .mc-chip .mc-ci { flex-shrink: 0; width: 0; height: 16px; overflow: hidden; opacity: 0; transition: width .25s, opacity .2s; }
.mohoui-contact-page .mc-chip:hover span { border-color: var(--mohoui-plum); }
.mohoui-contact-page .mc-chip input:checked + span { gap: 6px; padding-left: 12px; border-color: var(--mohoui-plum); background: var(--mohoui-plum); color: #fff; }
.mohoui-contact-page .mc-chip input:checked + span .mc-ci { width: 16px; opacity: 1; }
.mohoui-contact-page .mc-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(95, 27, 71, .2); }
.mohoui-contact-page .mc-field.is-invalid .mc-chip span { border-color: #e3b5b1; }

/* Photo drop zone */
.mohoui-contact-page .mc-drop {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 26px 20px;
	border: 1.5px dashed #cbbfb6;
	border-radius: 8px;
	background: #fff;
	text-align: center;
	cursor: pointer;
	transition: border-color .25s, background-color .25s, transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.mohoui-contact-page .mc-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.mohoui-contact-page .mc-drop__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 4px; border-radius: 50%; background: rgba(95, 27, 71, .08); color: var(--mohoui-plum); }
.mohoui-contact-page .mc-drop__text { font-size: 15px; color: #3a3632; }
.mohoui-contact-page .mc-drop__text u { color: var(--mohoui-plum); text-underline-offset: 3px; }
.mohoui-contact-page .mc-drop__note { font-size: 12.5px; color: #8a8a8a; }
.mohoui-contact-page .mc-drop:hover, .mohoui-contact-page .mc-drop.is-drag { border-color: var(--mohoui-plum); background: #fdfbfa; }
.mohoui-contact-page .mc-drop.is-drag { transform: scale(1.01); }
.mohoui-contact-page .mc-drop.is-full { opacity: .5; pointer-events: none; }
.mohoui-contact-page .mc-thumbs { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.mohoui-contact-page .mc-thumb {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 8px 10px 8px 8px;
	border: 1px solid var(--mc-line);
	border-radius: 8px;
	background: #fff;
	animation: mc-rise .4s cubic-bezier(.2, .7, .2, 1) both;
}
.mohoui-contact-page .mc-thumb img { width: 52px; height: 52px; border-radius: 4px; object-fit: cover; }
.mohoui-contact-page .mc-thumb__meta { display: flex; flex-direction: column; font-size: 13px; color: #333; }
.mohoui-contact-page .mc-thumb__meta small { font-size: 12px; color: #8a8a8a; }
.mohoui-contact-page .mc-thumb__rm {
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f2eeea;
	font-size: 18px;
	line-height: 1;
	color: #555;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}
.mohoui-contact-page .mc-thumb__rm:hover { background: var(--mc-err); color: #fff; }
.mohoui-contact-page .mc-static { margin: 0; padding: 16px; border-radius: 6px; background: rgba(255, 255, 255, .6); font-size: 15px; color: #3a3632; }

/* Submit */
.mohoui-contact-page .mc-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding-top: 6px; }
.mohoui-contact-page .mc-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 56px;
	padding: 0 30px;
	border: 0;
	border-radius: 0;
	background: var(--mohoui-plum);
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	overflow: hidden;
	transition: background-color .3s, box-shadow .3s;
}
.mohoui-contact-page .mc-btn::before { /* sheen on hover */
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 40%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
	transform: skewX(-18deg);
	transition: left .7s cubic-bezier(.2, .7, .2, 1);
}
.mohoui-contact-page .mc-btn:hover::before { left: 120%; }
.mohoui-contact-page .mc-btn:hover { background: #4d1539; box-shadow: 0 10px 24px -10px rgba(95, 27, 71, .6); }
.mohoui-contact-page .mc-btn .mc-ci { width: 18px; height: 18px; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.mohoui-contact-page .mc-btn:hover .mc-ci { transform: translateX(4px); }
.mohoui-contact-page .mc-btn__spin { display: none; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: mc-spin .8s linear infinite; }
.mohoui-contact-page .mc-form.is-sending .mc-btn__spin { display: inline-block; }
.mohoui-contact-page .mc-form.is-sending .mc-btn .mc-ci { display: none; }
.mohoui-contact-page .mc-form.is-sending .mc-btn { cursor: progress; }
@keyframes mc-spin { to { transform: rotate(360deg); } }
.mohoui-contact-page .mc-status { margin: 0; font-size: 14px; color: var(--mc-err); }
.mohoui-contact-page .mc-form { transition: opacity .35s, transform .35s; }
.mohoui-contact-page .mc-form.is-leaving { opacity: 0; transform: translateY(-10px); }

/* Thank-you */
.mohoui-contact-page .mc-done { padding: 40px 10px 20px; text-align: center; outline: none; }
.mohoui-contact-page .mc-done__mark { color: var(--mohoui-plum); }
.mohoui-contact-page .mc-done__mark circle { stroke-dasharray: 214; stroke-dashoffset: 214; transition: stroke-dashoffset .9s cubic-bezier(.65, 0, .35, 1); }
.mohoui-contact-page .mc-done__mark path { stroke-dasharray: 48; stroke-dashoffset: 48; transition: stroke-dashoffset .5s cubic-bezier(.65, 0, .35, 1) .7s; }
.mohoui-contact-page .mc-done.is-in .mc-done__mark circle,
.mohoui-contact-page .mc-done.is-in .mc-done__mark path,
.mohoui-contact-page .mc-form-wrap:not(.mc-js) .mc-done__mark * { stroke-dashoffset: 0; } /* no-JS result page */
.mohoui-contact-page .mc-done__title { margin: 18px 0 10px; font-family: var(--mohoui-title-font); font-size: 36px; font-weight: 500; color: var(--mohoui-plum); }
.mohoui-contact-page .mc-done__text { max-width: 460px; margin: 0 auto 10px; font-size: 16px; line-height: 1.6; color: #333; }
.mohoui-contact-page .mc-done__more { margin: 0 0 22px; font-size: 14px; color: #777; }
.mohoui-contact-page .mc-done__more a { color: var(--mohoui-plum); }
.mohoui-contact-page .mc-link { padding: 0 0 3px; border: 0; border-bottom: 1px solid currentColor; background: none; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #1d1a18; cursor: pointer; }
.mohoui-contact-page .mc-link:hover { color: var(--mohoui-plum); }
.mohoui-contact-page .mc-extra { margin-top: 80px; }

@media (max-width: 1100px) {
	.mohoui-contact-page .mc-layout { grid-template-columns: 1fr; gap: 40px; }
	.mohoui-contact-page .mc-info { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mohoui-contact-page .mc-info > :last-child { grid-column: 1 / -1; } /* Corporate | Customer care, then Registered full width */
}
@media (max-width: 767px) {
	.mohoui-contact-page .mc-intro { padding: 18px 0 32px; }
	.mohoui-contact-page .mc-eyebrow { font-size: 13px; }
	.mohoui-contact-page .mc-title { font-size: 38px; }
	.mohoui-contact-page .mc-lead { font-size: 15px; }
	.mohoui-contact-page .mc-info { grid-template-columns: 1fr; gap: 14px; }
	.mohoui-contact-page .mc-card--care, .mohoui-contact-page .mc-office { padding: 24px 20px; }
	.mohoui-contact-page .mc-big { font-size: 20px; }
	.mohoui-contact-page .mc-big:last-child { font-size: 15px; }
	.mohoui-contact-page .mc-form-wrap { margin: 0 -16px; padding: 30px 16px 28px; border-radius: 0; }
	.mohoui-contact-page .mc-form__title { font-size: 28px; }
	.mohoui-contact-page .mc-grid { grid-template-columns: 1fr; gap: 14px; }
	.mohoui-contact-page .mc-chip span { padding: 9px 13px; font-size: 13.5px; }
	.mohoui-contact-page .mc-submit { flex-direction: column; align-items: stretch; }
	.mohoui-contact-page .mc-btn { justify-content: center; }
}


/* Complaint band (before the footer): links to Supreme's complaint form */
.mohoui-contact-page .mc-complaint {
	position: relative;
	box-sizing: border-box;
	width: 100vw;
	margin: 110px 0 0 calc(50% - 50vw);
	padding: 76px var(--mohoui-gutter);
	overflow: hidden;
	background: #4a1438;
	background-image:
		radial-gradient(60% 120% at 100% 0%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 60%),
		radial-gradient(50% 90% at 0% 100%, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 60%),
		linear-gradient(120deg, #5f1b47 0%, #3f1130 100%);
	color: #fff;
}
.mohoui-contact-page .mc-complaint::after { /* fine line motif */
	content: "";
	position: absolute;
	right: -120px;
	top: -120px;
	width: 420px;
	height: 420px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 50%;
	box-shadow: 0 0 0 40px rgba(255, 255, 255, .03), 0 0 0 80px rgba(255, 255, 255, .02);
	pointer-events: none;
}
.mohoui-contact-page .mc-complaint__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 40px 48px;
	max-width: 1366px;
	margin: 0 auto;
}
.mohoui-contact-page .mc-complaint__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: start;
	width: 76px;
	height: 76px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	color: #fff;
}
.mohoui-contact-page .mc-complaint__eyebrow { margin: 0 0 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.mohoui-contact-page .mc-complaint__title {
	margin: 0 0 14px;
	font-family: var(--mohoui-title-font);
	font-size: 44px;
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -.01em;
	color: #fff;
}
.mohoui-contact-page .mc-complaint__text { max-width: 620px; margin: 0; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .85); }
.mohoui-contact-page .mc-complaint__action { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.mohoui-contact-page .mc-complaint__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	height: 58px;
	padding: 0 30px;
	overflow: hidden;
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--mohoui-plum);
	box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .55);
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s;
}
.mohoui-contact-page .mc-complaint__btn::before { /* sheen */
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 40%;
	background: linear-gradient(100deg, rgba(95, 27, 71, 0), rgba(95, 27, 71, .12), rgba(95, 27, 71, 0));
	transform: skewX(-18deg);
	transition: left .8s cubic-bezier(.2, .7, .2, 1);
}
.mohoui-contact-page .mc-complaint__btn svg { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.mohoui-contact-page .mc-complaint__btn:hover,
.mohoui-contact-page .mc-complaint__btn:focus-visible { transform: translateY(-3px); box-shadow: 0 20px 36px -14px rgba(0, 0, 0, .6); color: var(--mohoui-plum); }
.mohoui-contact-page .mc-complaint__btn:hover::before { left: 120%; }
.mohoui-contact-page .mc-complaint__btn:hover svg,
.mohoui-contact-page .mc-complaint__btn:focus-visible svg { transform: translate(3px, -3px); }
.mohoui-contact-page .mc-complaint__btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.mohoui-contact-page .mc-complaint__note { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, .65); text-align: right; }

/* reveal (assets/contact.js adds .is-pending, then .is-in on scroll) */
.mohoui-contact-page .mc-complaint.is-pending .mc-complaint__inner > * { opacity: 0; transform: translateY(22px); }
.mohoui-contact-page .mc-complaint.is-in .mc-complaint__inner > * { opacity: 1; transform: none; transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.mohoui-contact-page .mc-complaint.is-in .mc-complaint__copy { transition-delay: .1s; }
.mohoui-contact-page .mc-complaint.is-in .mc-complaint__action { transition-delay: .25s; }

@media (max-width: 1100px) {
	.mohoui-contact-page .mc-complaint__inner { grid-template-columns: auto minmax(0, 1fr); }
	.mohoui-contact-page .mc-complaint__action { grid-column: 2; align-items: flex-start; }
	.mohoui-contact-page .mc-complaint__note { text-align: left; }
}
@media (max-width: 767px) {
	.mohoui-contact-page .mc-complaint { margin-top: 64px; padding: 52px 16px 56px; }
	.mohoui-contact-page .mc-complaint__inner { grid-template-columns: 1fr; gap: 22px; }
	.mohoui-contact-page .mc-complaint__badge { width: 60px; height: 60px; }
	.mohoui-contact-page .mc-complaint__title { font-size: 32px; }
	.mohoui-contact-page .mc-complaint__text { font-size: 15px; }
	.mohoui-contact-page .mc-complaint__action { grid-column: auto; align-items: stretch; }
	.mohoui-contact-page .mc-complaint__btn { justify-content: center; white-space: normal; text-align: center; }
	.mohoui-contact-page .mc-complaint::after { right: -200px; top: -200px; }
}
@media not all { /* reduce-motion overrides switched off (client request) */
	.mohoui-contact-page .mc-complaint * { transition: none !important; }
}
/* =========================================================================
   Page banner  (inner pages — markup: inc/page-hero.php, motion: assets/page-hero.js)
   Full-screen photo under the transparent header, breadcrumb top-left, centred
   eyebrow + heading.
   ========================================================================= */
.mohoui-page-hero {
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 560px;
	max-height: 1100px;
	overflow: hidden;
	background: #1d1a18;
	color: #fff;
}
.mohoui-page-hero__media { position: absolute; inset: 0; will-change: transform; }
.mohoui-page-hero__media::after { /* keeps the header, breadcrumb and heading readable */
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .18) 28%, rgba(0, 0, 0, .18) 68%, rgba(0, 0, 0, .45) 100%),
		rgba(0, 0, 0, .12);
}
.mohoui-page-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mohoui-page-hero__media picture { display: block; width: 100%; height: 100%; } /* when a phone image is set */
.mohoui-page-hero__crumbs { z-index: 3; }
.mohoui-page-hero__content {
	position: absolute;
	z-index: 2;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: var(--mohoui-header-h) var(--mohoui-gutter) 40px;
	text-align: center;
	will-change: transform, opacity;
}
.mohoui-page-hero .mohoui-page-hero__eyebrow {
	margin: 0 0 12px;
	font-size: 16px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .88);
}
.mohoui-page-hero .mohoui-page-hero__title {
	margin: 0;
	overflow: hidden;
	padding-bottom: .08em;
	font-family: var(--mohoui-title-font);
	font-size: 64px;
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -.01em;
	color: #fff;
	text-shadow: 0 2px 30px rgba(0, 0, 0, .25);
}
.mohoui-page-hero__title > span { display: inline-block; }

/* Entrance: photo settles from a slow zoom; breadcrumb, eyebrow and heading rise in. */
@media all { /* banners animate on every phone, "reduce motion" or not (client request) */
	.mohoui-page-hero__img { animation: mph-zoom 2.6s cubic-bezier(.2, .7, .2, 1) both; }
	.mohoui-page-hero__crumbs { animation: mph-fade .9s ease .5s both; }
	.mohoui-page-hero__eyebrow { animation: mph-rise .9s cubic-bezier(.2, .7, .2, 1) .25s both; }
	.mohoui-page-hero__title > span { animation: mph-mask 1.2s cubic-bezier(.2, .8, .2, 1) .35s both; }
}
@keyframes mph-zoom { from { transform: scale(1.14); } to { transform: none; } }
@keyframes mph-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mph-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes mph-mask { from { transform: translateY(110%); } to { transform: none; } }

/* The banner carries the page title: hide the theme's own title (and the policy
   pages' in-content title) so each page keeps a single heading. */
.mohoui-has-page-hero .hentry > .entry-header,
.mohoui-has-page-hero .moho-policy .mp-title { display: none; }
.mohoui-has-page-hero .content-area { margin-top: 56px; }
.mohoui-has-page-hero .mohoui-contact-page .mc-intro { padding-top: 0; }

@media (max-width: 767px) {
	.mohoui-page-hero { height: 72vh; height: 72svh; min-height: 460px; }
	.mohoui-page-hero .mohoui-page-hero__eyebrow { margin-bottom: 8px; font-size: 13px; }
	.mohoui-page-hero .mohoui-page-hero__title { font-size: 38px; line-height: 1.1; }
	.mohoui-page-hero .mohoui-page-hero__crumbs { font-size: 13px; }
	.mohoui-has-page-hero .content-area { margin-top: 36px; }
}

/* =========================================================================
   About page  (template-about.php, content: inc/about.php, motion: assets/about.js)
   ========================================================================= */
.page-template-template-about.mohoui-has-page-hero .content-area { margin-top: 0; } /* the band meets the banner */
.page-template-template-about .site-main { margin-bottom: 0; }
.page-template-template-about #content > .col-full {
	box-sizing: border-box;
	max-width: calc(1366px + 2 * var(--mohoui-gutter));
	padding: 0 var(--mohoui-gutter);
	margin: 0 auto;
}


/* 0. Intro under the banner — heading, text and kitchen photo left; tall shower photo right */
.ma-intro { padding: 96px 0 112px; }
.ma-intro__inner {
	display: grid;
	grid-template-columns: minmax(0, 530fr) minmax(0, 733fr);
	column-gap: 103px;
	align-items: stretch;
	max-width: 1366px;
	margin: 0 auto;
}
.ma-intro__left { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.ma-intro .ma-intro__title {
	margin: 0 0 18px;
	font-family: var(--mohoui-title-font);
	font-size: 46px;
	font-weight: 500;
	line-height: 1.18;
	letter-spacing: -.01em;
	color: var(--mohoui-plum);
}
.ma-intro__copy p { margin: 0 0 26px; font-size: 16px; line-height: 1.65; color: #333; }
.ma-intro__copy p:last-child { margin-bottom: 0; }
.ma-intro__media { position: relative; overflow: hidden; background: #ece9e6; }
.ma-intro__media--small { aspect-ratio: 530 / 576; }
/* At least 733 × 937, and as tall as the left column so both photos end on one line
   (the spacer keeps the proportion; the photo fills the box). */
.ma-intro__media--tall { align-self: stretch; }
.ma-intro__media--tall::before { content: ""; display: block; padding-top: 127.83%; }
.ma-intro__media--tall .ma-intro__img { position: absolute; top: -6%; left: 0; margin-top: 0; }
.ma-intro__img { display: block; width: 100%; height: 112%; margin-top: -6%; object-fit: cover; will-change: transform; } /* room for the parallax drift */

@media (max-width: 1100px) {
	.ma-intro { padding: 80px 0 96px; }
	.ma-intro__inner { column-gap: 48px; }
	.ma-intro .ma-intro__title { font-size: 38px; }
	.ma-intro__copy p { font-size: 15px; }
}
@media (max-width: 767px) {
	.ma-intro { padding: 56px 0 64px; }
	.ma-intro__inner { grid-template-columns: 1fr; row-gap: 20px; }
	.ma-intro__left { gap: 36px; }
	.ma-intro .ma-intro__title { font-size: 32px; }
}
/* 1. Built on decades of expertise — plum band */
.ma-legacy {
	position: relative;
	box-sizing: border-box;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 112px var(--mohoui-gutter) 120px;
	overflow: hidden;
	background: #66204a;
	color: #fff;
}
.ma-legacy__inner {
	display: grid;
	grid-template-columns: minmax(0, 818fr) minmax(0, 548fr);
	align-items: start;
	max-width: 1366px;
	margin: 0 auto;
}
.ma-legacy__logo { display: block; width: 145px; height: auto; margin: 6px 0 26px; }
.ma-legacy .ma-legacy__title {
	max-width: 420px;
	margin: 0;
	font-family: var(--mohoui-title-font);
	font-size: 46px;
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -.01em;
	color: #fff;
}
.ma-legacy__text p { margin: 0 0 26px; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .88); }
.ma-legacy__text p:last-child { margin-bottom: 0; }
.ma-legacy__media {
	position: relative;
	max-width: 1366px;
	aspect-ratio: 1366 / 655;
	margin: 64px auto 0;
	overflow: hidden;
	background: #4a1736;
}
.ma-legacy__img { display: block; width: 100%; height: 116%; margin-top: -8%; object-fit: cover; will-change: transform; } /* room for the parallax drift */
.ma-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.ma-word > span { display: inline-block; }
.ma-extra { padding: 80px 0; }

/* 2. Design that belongs in the way we live — photo left, text right, icon row */
.ma-design { padding: 100px 0 112px; }
.ma-design__inner {
	display: grid;
	grid-template-columns: minmax(0, 835fr) minmax(0, 457fr);
	column-gap: 74px;
	align-items: center;
	max-width: 1366px;
	margin: 0 auto;
}
.ma-design__media { position: relative; aspect-ratio: 835 / 502; overflow: hidden; background: #e9e6e8; }
.ma-design__img { display: block; width: 100%; height: 112%; margin-top: -6%; object-fit: cover; will-change: transform; } /* room for the parallax drift */
.ma-design .ma-design__title {
	margin: 0 0 40px;
	font-family: var(--mohoui-title-font);
	font-size: 46px;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--mohoui-plum);
}
.ma-design__copy p { margin: 0 0 26px; font-size: 16px; line-height: 1.65; color: #333; }
.ma-design__copy p:last-child { margin-bottom: 0; }
.ma-features {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px;
	max-width: 1366px;
	margin: 108px auto 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
.ma-feature { margin: 0; }
.ma-feature .mohoui-values__icon { margin-bottom: 44px; }
.ma-design .ma-feature__title {
	margin: 0 0 12px;
	font-family: inherit;
	font-size: 18px;
	font-weight: 600; /* semi-bold (client request) */
	line-height: 1.3;
	letter-spacing: 0;
	color: #222;
}
.ma-feature__text { max-width: 270px; margin: 0 auto; font-size: 15px; line-height: 1.4; color: #333; }

/* 3. The people behind every Moho product — full-width photo, white panels in two corners */
.ma-people {
	--ma-edge: max(var(--mohoui-gutter), calc(50vw - 683px)); /* lines the panel text up with the page content */
	position: relative;
	box-sizing: border-box;
	width: 100vw;
	height: max(560px, min(49.87vw, 100vh)); /* 1512 × 754 */
	margin-left: calc(50% - 50vw);
	overflow: hidden;
	background: #2a2a2a;
}
.ma-people--plain { height: auto; padding: 80px 0; background: #fff; }
.ma-people__media { position: absolute; inset: 0; overflow: hidden; }
.ma-people__img { display: block; width: 100%; height: 112%; margin-top: -6%; object-fit: cover; will-change: transform; } /* room for the parallax drift */
.ma-people__head,
.ma-people__text { position: relative; z-index: 1; box-sizing: border-box; background: #fff; }
.ma-people__head {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(var(--ma-edge) + 490px); /* fits "every Moho product." on one line at 46px */
	padding: 38px 36px 44px var(--ma-edge);
}
.ma-people__eyebrow {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #8a8a8a;
}
.ma-people .ma-people__title {
	margin: 0;
	font-family: var(--mohoui-title-font);
	font-size: 46px;
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -.01em;
	color: var(--mohoui-plum);
}
.ma-people__text {
	position: absolute;
	right: 0;
	bottom: 0;
	width: max(33.2%, 440px);
	padding: 34px var(--ma-edge) 36px 40px;
}
.ma-people__text p { margin: 0 0 26px; font-size: 16px; line-height: 1.65; color: #333; }
.ma-people__text p:last-child { margin-bottom: 0; }
.ma-people--plain .ma-people__head,
.ma-people--plain .ma-people__text { position: static; width: auto; max-width: 1366px; margin: 0 auto; padding: 0 var(--mohoui-gutter); }

/* 4. The Moho Vision — heading left, eye centre, text + button right */
.ma-vision { padding: 150px 0 140px; }
.ma-vision__inner {
	display: grid;
	grid-template-columns: minmax(0, 420fr) 238px minmax(0, 372fr); /* "Designed in India." fits one line at 48px */
	column-gap: 80px;
	align-items: center;
	max-width: 1190px;
	margin: 0 auto;
}
.ma-vision__head { align-self: start; padding-top: 2px; }
.ma-vision__eyebrow {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #8a8a8a;
}
.ma-vision .ma-vision__title {
	margin: 0;
	font-family: var(--mohoui-title-font);
	font-size: 48px;
	font-weight: 500;
	line-height: 1.22;
	letter-spacing: -.01em;
	color: var(--mohoui-plum);
}
.ma-vision__eye { display: flex; justify-content: center; }
.ma-vision__svg { display: block; width: 238px; height: auto; overflow: visible; }
.ma-vision__copy p { margin: 0 0 26px; font-size: 16px; line-height: 1.65; color: #333; }
.ma-vision__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-top: 14px;
	padding: 10px 24px;
	overflow: hidden;
	border: 1px solid #c9c9c9;
	font-size: 14px;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	color: #333;
	transition: color .45s cubic-bezier(.7, 0, .2, 1), border-color .45s;
}
.ma-vision__btn::before { /* plum fill sweeping in from the left on hover */
	content: "";
	position: absolute;
	inset: 0;
	background: var(--mohoui-plum);
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform .45s cubic-bezier(.7, 0, .2, 1);
}
.ma-vision__btn span { position: relative; }
.ma-vision__btn:hover,
.ma-vision__btn:focus-visible { color: #fff; border-color: var(--mohoui-plum); }
.ma-vision__btn:hover::before,
.ma-vision__btn:focus-visible::before { transform: scaleX(1); transform-origin: 0 50%; }

@media (max-width: 1100px) {
	.ma-vision { padding: 110px 0 100px; }
	.ma-vision__inner { grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr); column-gap: 44px; }
	.ma-vision .ma-vision__title { font-size: 38px; }
	.ma-vision__svg { width: 180px; }
	.ma-vision__copy p { font-size: 15px; }
}
@media (max-width: 767px) {
	.ma-vision { padding: 64px 0 72px; }
	.ma-vision__inner { grid-template-columns: 1fr; row-gap: 40px; }
	.ma-vision .ma-vision__title { font-size: 32px; }
	.ma-vision__svg { width: 150px; }
}

@media (max-width: 1100px) {
	.ma-people .ma-people__title { font-size: 38px; }
	.ma-people__head { width: calc(var(--ma-edge) + 420px); padding: 30px 32px 36px var(--ma-edge); }
	.ma-people__text { width: max(45%, 400px); padding: 28px var(--ma-edge) 30px 32px; }
	.ma-people__text p { font-size: 15px; }
}
@media (max-width: 767px) {
	.ma-people { display: flex; flex-direction: column; height: auto; padding: 0 0 64px; background: #fff; }
	.ma-people__head { position: static; order: 1; width: auto; padding: 0 16px 28px; }
	.ma-people .ma-people__title { font-size: 32px; }
	.ma-people__media { position: relative; order: 2; inset: auto; aspect-ratio: 4 / 3; }
	.ma-people__text { position: static; order: 3; width: auto; padding: 28px 16px 0; }
}

@media (max-width: 1100px) {
	.ma-design__inner { column-gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.ma-design .ma-design__title { font-size: 38px; margin-bottom: 28px; }
	.ma-features { gap: 24px; margin-top: 80px; }
	.ma-design .ma-feature__title { font-size: 16px; }
	.ma-feature__text { font-size: 14px; }
}
@media (max-width: 767px) {
	.ma-design { padding: 56px 0 64px; }
	.ma-design__inner { grid-template-columns: 1fr; row-gap: 36px; }
	.ma-design .ma-design__title { font-size: 32px; margin-bottom: 22px; }
	.ma-design__copy p { font-size: 15px; }
	.ma-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 20px; margin-top: 56px; }
	.ma-feature .mohoui-values__icon { height: 44px; margin-bottom: 22px; }
}

@media (max-width: 1100px) {
	.ma-legacy__inner { grid-template-columns: 1fr; row-gap: 32px; }
	.ma-legacy__text { max-width: 620px; }
}
@media (max-width: 767px) {
	.ma-legacy { padding: 64px 16px 72px; }
	.ma-legacy__logo { width: 120px; margin-bottom: 20px; }
	.ma-legacy .ma-legacy__title { font-size: 34px; }
	.ma-legacy__text p { font-size: 15px; }
	.ma-legacy__media { margin-top: 40px; aspect-ratio: 4 / 3; }
}

/* =========================================================================
   Footer  (markup: footer.php, newsletter handler: functions.php)
   ========================================================================= */
.site-footer.mohoui-footer {
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0 var(--mohoui-gutter);
	background: #1c1b1c;
	color: #fff;
	font-family: "Georama", sans-serif;
}
.mohoui-footer a { text-decoration: none; }
.mohoui-footer__backdrop {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 284px;
	height: auto;
	pointer-events: none;
	user-select: none;
}
.mohoui-footer__inner { position: relative; max-width: 1366px; margin: 0 auto; }

/* CTA row */
.mohoui-footer__cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
	align-items: center;
	padding: 84px 0 96px;
	border-bottom: 1px solid #333;
}
.mohoui-footer__cta::before {
	content: "";
	grid-column: 2;
	grid-row: 1;
	align-self: stretch;
	margin: 46px 0 20px;
	background: #3a393a;
}
.mohoui-footer__cta-col { text-align: center; padding: 0 24px; }
.mohoui-footer__cta-col:first-child { grid-column: 1; grid-row: 1; }
.mohoui-footer__cta-col:last-child { grid-column: 3; grid-row: 1; }
.mohoui-footer .mohoui-footer__title {
	margin: 0 0 26px;
	font-family: var(--mohoui-title-font);
	font-size: 48px;
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -.01em;
	color: #fff;
}
.mohoui-footer__cta-col p {
	max-width: 350px;
	margin: 0 auto 40px;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
	color: #b5b5b5;
}
.site-footer.mohoui-footer .mohoui-footer__cta a.mohoui-footer__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 250px;
	height: 53px;
	box-sizing: border-box;
	border: 1px solid #8a898a;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .01em;
	text-transform: uppercase;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.site-footer.mohoui-footer .mohoui-footer__cta a.mohoui-footer__btn:hover,
.site-footer.mohoui-footer .mohoui-footer__cta a.mohoui-footer__btn:focus { background: #fff; border-color: #fff; color: #1c1b1c; }

.mohoui-footer__news {
	display: flex;
	width: 385px;
	max-width: 100%;
	height: 54px;
	margin: 0 auto;
}
.mohoui-footer__news input[type="email"] {
	flex: 1;
	min-width: 0;
	height: 100%;
	box-sizing: border-box;
	padding: 0 20px;
	border: 1px solid #5c5b5c;
	border-right: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
}
.mohoui-footer__news input[type="email"]::placeholder { color: #9a999a; }
.mohoui-footer__news input[type="email"]:focus { outline: none; border-color: #bbb; }
.mohoui-footer__news button {
	height: 100%;
	padding: 0 20px;
	border: 1px solid #fff;
	border-radius: 0;
	background: #fff;
	color: #1c1b1c;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
}
.mohoui-footer__news button:hover,
.mohoui-footer__news button:focus { background: #e9e9e9; color: #1c1b1c; }
.mohoui-footer__cta-col .mohoui-footer__msg { margin: 14px auto 0; font-size: 14px; color: #d8c38f; }
.mohoui-footer__cta-col .mohoui-footer__msg.is-error { color: #f1a3a3; }

/* Main row */
.mohoui-footer__main {
	display: grid;
	grid-template-columns: 475px 304px 308px 1fr;
	padding: 98px 0 70px;
	border-bottom: 1px solid #333;
}
.mohoui-footer__brand img { display: block; width: 88px; height: 88px; margin: 0 0 32px; }
.mohoui-footer__brand p { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.65; color: #cfcfcf; }
.mohoui-footer__col h3 {
	margin: 8px 0 34px;
	font-family: "Georama", sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
}
.mohoui-footer__col ul { margin: 0; padding: 0; list-style: none; }
.mohoui-footer__col li { margin: 0 0 11px; }
.site-footer.mohoui-footer .mohoui-footer__col li a { font-size: 16px; font-weight: 300; line-height: 1.3; color: #bdbdbd; transition: color .15s ease; }
.site-footer.mohoui-footer .mohoui-footer__col li a:hover,
.site-footer.mohoui-footer .mohoui-footer__col li a:focus { color: #fff; }
.mohoui-footer__col .mohoui-footer__social { display: flex; gap: 10px; }
.mohoui-footer__social li { margin: 0; }
.mohoui-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	box-sizing: border-box;
	border: 1px solid #4a494a;
	transition: border-color .15s ease, background .15s ease;
}
.mohoui-footer__social a:hover,
.mohoui-footer__social a:focus { border-color: #fff; background: rgba(255, 255, 255, .06); }
.mohoui-footer__social img { display: block; width: 20px; height: 20px; }

/* Legal row */
.mohoui-footer__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 40px 0 100px;
	font-size: 14px;
	color: #a5a5a5;
}
.mohoui-footer__legal p { margin: 0; }
.mohoui-footer__credit { margin-left: 14px; padding-left: 14px; border-left: 1px solid #4a4a4a; } /* "Site by DV" */
.mohoui-footer__legal ul { display: flex; gap: 52px; margin: 0; padding: 0; list-style: none; }
.site-footer.mohoui-footer .mohoui-footer__legal a { color: #a5a5a5; }
.site-footer.mohoui-footer .mohoui-footer__legal a:hover,
.site-footer.mohoui-footer .mohoui-footer__legal a:focus { color: #fff; }

@media (max-width: 1200px) {
	.mohoui-footer__main { grid-template-columns: 1.4fr 1fr 1fr 1fr; column-gap: 24px; }
}
@media (max-width: 900px) {
	.mohoui-footer__cta { grid-template-columns: minmax(0, 1fr); row-gap: 64px; padding: 64px 0; }
	.mohoui-footer__cta::before { display: none; }
	.mohoui-footer__cta-col:first-child,
	.mohoui-footer__cta-col:last-child { grid-column: 1; grid-row: auto; }
	.mohoui-footer__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 48px; padding: 64px 0 48px; }
	.mohoui-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
	.mohoui-footer .mohoui-footer__title { font-size: 34px; }
	.mohoui-footer__cta-col { padding: 0; }
	.mohoui-footer__legal { flex-direction: column; align-items: flex-start; padding-bottom: 48px; }
	.mohoui-footer__legal ul { gap: 28px; }
	.mohoui-footer__credit { display: block; margin: 8px 0 0; padding: 0; border: 0; }
	.mohoui-footer__backdrop { width: 180px; }
}

/* =========================================================================
   Tablet / mobile
   ========================================================================= */
@media (max-width: 1200px) {
	:root { --mohoui-gutter: 32px; }
	.mohoui-header .main-navigation ul.menu { gap: 24px; }
	.mohoui-header__actions { gap: 24px; }
	:is(.mohoui-home, .single-product .related, .single-product .upsells) ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
	.mohoui-call span { display: none; }
	.mohoui-call { padding: 0 9px; }
	.mohoui-hero .mohoui-display { font-size: 46px; }
	.mohoui-hero__story { grid-template-columns: 1fr; padding-top: 420px; row-gap: 40px; }
	.mohoui-hero__story p { grid-column: 1; max-width: 560px; }
}
/* Header layout (desktop bar, 768px and up): logo on the left; the menu sits on the
   right, just before the call button and icons, with a small gap. Smaller screens
   tighten spacing below. */
@media (min-width: 768px) {
	.mohoui-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 40px; }
	.site-header.mohoui-header .main-navigation { justify-self: end; }
}
@media (min-width: 768px) and (max-width: 960px) {
	.mohoui-header__inner { column-gap: 24px; }
	.mohoui-logo img { width: 56px; height: auto; }
	.mohoui-header .main-navigation ul.menu { gap: 16px; }
	.mohoui-header .main-navigation ul.menu > li > a { font-size: 14px; }
	.mohoui-header .main-navigation ul.menu > li.menu-item-has-children > a::after { margin-left: 7px; }
	.mohoui-header__actions { gap: 16px; }
	.mohoui-call { padding: 0 8px; }
}
@media (max-width: 767px) {
	:root { --mohoui-gutter: 16px; --mohoui-header-h: 76px; --mohoui-header-h-s: 64px; }
	.mohoui-header__inner { grid-template-columns: auto 1fr auto; column-gap: 12px; }
	.mohoui-logo img { width: 48px; height: auto; }
	.site-header.mohoui-header .main-navigation { justify-self: end; grid-column: 3; grid-row: 1; width: auto; }
	.mohoui-header__actions { grid-column: 2; grid-row: 1; gap: 14px; }
	.mohoui-call { border: 0; padding: 0; height: auto; }
	/* Smaller icons on phones */
	.mohoui-call img { width: 19px; height: 19px; }
	.mohoui-header .mohoui-search-toggle img { width: 16px; height: auto; }
	.mohoui-header .mohoui-wishlist img { width: 17px; height: auto; }
	.mohoui-header .mohoui-cart img { width: 19px; height: 19px; }
	.mohoui-header .mohoui-account img { width: 16px; height: 16px; }
	.mohoui-cart-count { top: -5px; right: -7px; min-width: 14px; height: 14px; font-size: 9px; line-height: 14px; }
	.mohoui-header .main-navigation .menu-toggle {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		height: 30px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: #fff;
		font-family: "Georama", sans-serif;
		font-size: 12px;
		font-weight: 500;
		line-height: 1;
	}
	.mohoui-header .main-navigation .menu-toggle:hover,
	.mohoui-header .main-navigation .menu-toggle:focus { color: #fff; background: transparent; opacity: .8; }
	/* Storefront's dark pseudo-element bars, replaced by the inline .mohoui-burger icon */
	.mohoui-header .main-navigation .menu-toggle::before,
	.mohoui-header .main-navigation .menu-toggle::after,
	.mohoui-header .main-navigation .menu-toggle span::before,
	.mohoui-header .main-navigation .menu-toggle span::after { content: none; display: none; }
	.mohoui-header .main-navigation .menu-toggle span { position: static; display: block; color: #fff; }
	.mohoui-burger { display: block; flex: 0 0 auto; }
	.mohoui-header .main-navigation .primary-navigation { display: none; }
	.mohoui-header .main-navigation.toggled .primary-navigation {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: var(--mohoui-header-h);
		padding: 8px var(--mohoui-gutter) 16px;
		background: var(--mohoui-dark);
	}
	.mohoui-header .main-navigation ul.menu { display: block; }
	.mohoui-header .main-navigation ul.menu > li > a { padding: 12px 0; }
	.mohoui-header .main-navigation ul.menu ul.sub-menu { position: static; box-shadow: none; }
	.mohoui-hero__eyebrow { font-size: 14px; }
	.mohoui-hero .mohoui-hero__title { font-size: 40px; }
	.mohoui-hero .mohoui-display { font-size: 32px; }
	.mohoui-hero__statement { padding-top: 120px; }
	.mohoui-hero__story { padding: 280px var(--mohoui-gutter) 100px; row-gap: 28px; }
	.mohoui-hero__story p { font-size: 15px; }
	.mohoui-ranges { padding: 48px var(--mohoui-gutter); }
	/* Range cards: swipeable row, ~1.1 cards visible (next card peeks in), arrows below */
	.mohoui-ranges { padding-left: 0; padding-right: 0; }
	.mohoui-ranges__grid {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: var(--mohoui-gutter);
		padding: 0 var(--mohoui-gutter);
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}
	.mohoui-ranges__grid::-webkit-scrollbar { display: none; }
	.mohoui-ranges__grid > .mohoui-range { flex: 0 0 calc((100vw - var(--mohoui-gutter) - 14px) / 1.1); scroll-snap-align: start; }
	.mohoui-ranges__grid::after { content: ""; flex: 0 0 2px; }
	.mohoui-range__label { margin-top: 12px; font-size: 14px; text-align: center; }
	.mohoui-ranges__arrow svg { width: 7px; height: 12px; }
	.mohoui-range__check { width: 40px; height: 40px; }
	.mohoui-range__check svg { width: 16px; height: 13px; }
	.mohoui-ranges__nav { display: flex; justify-content: flex-end; gap: 10px; padding: 22px var(--mohoui-gutter) 0; }
	.mohoui-ranges__arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		padding: 0;
		border: 1px solid #cfcfcf;
		border-radius: 0;
		background: #fff;
		color: #333;
		cursor: pointer;
	}
	.mohoui-ranges__arrow:hover,
	.mohoui-ranges__arrow:focus { border-color: var(--mohoui-plum); background: #fff; color: var(--mohoui-plum); }
	.mohoui-ranges__arrow:disabled { opacity: .35; cursor: default; }
	:is(.mohoui-home, .single-product .related, .single-product .upsells) ul.products { grid-template-columns: minmax(0, 1fr); row-gap: 40px; } /* one card per row on phones */
	/* Phones: product photo only — no lifestyle photo, no hover swap */
	:is(.mohoui-home, .single-product .related, .single-product .upsells) ul.products li.product .mohoui-card-media .mohoui-app-img { display: none; }
	.mohoui-toolbar { flex-wrap: wrap; gap: 12px; row-gap: 14px; padding-top: 22px; margin-bottom: 20px; }
	.mohoui-toolbar__count { gap: 6px; font-size: 14px; }
	.mohoui-toolbar__num { font-size: 21px; }
	.mohoui-toolbar__sep { height: 24px; }
	.mohoui-toolbar__filter { gap: 8px; font-size: 14px; }
	.mohoui-toolbar__filter svg { width: 15px; height: 13px; }
	.mohoui-toolbar .mohoui-toolbar__active { position: static; transform: none; order: 5; flex: 1 0 100%; text-align: center; font-size: 20px; }
	.mohoui-toolbar__reset { gap: 6px; font-size: 14px; }
	.mohoui-toolbar__reset-more { display: none; }
}

/* =========================================================================
   Fixed header  (scroll behaviour: assets/mega-menu.js, top of the file)
   The header stays at the top while scrolling up and down. Scrolled (.is-scrolled):
   a slimmer white bar with dark text (it also gets .mohoui-header--light) and a soft
   shadow; at the top of the page it returns to its original look.
   ========================================================================= */
.site-header.mohoui-header,
.mohoui-header-overlay .site-header.mohoui-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	transition: background-color .3s ease, box-shadow .3s ease;
}
.admin-bar .site-header.mohoui-header,
.admin-bar.mohoui-header-overlay .site-header.mohoui-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .site-header.mohoui-header,
	.admin-bar.mohoui-header-overlay .site-header.mohoui-header { top: 46px; }
}
@media (max-width: 600px) { /* the admin bar scrolls away on small screens */
	.admin-bar .site-header.mohoui-header,
	.admin-bar.mohoui-header-overlay .site-header.mohoui-header { top: 0; }
}
/* Jump links (#contact-form, #newsletter…) stop below the fixed header. */
html { scroll-padding-top: calc(var(--mohoui-header-h-s) + 16px); }
/* Pages without a full-screen banner: keep the content clear of the fixed header. */
body:not(.mohoui-header-overlay) #page { padding-top: var(--mohoui-header-h); }

.mohoui-header__inner { transition: height .35s cubic-bezier(.2, .7, .2, 1), border-color .3s ease; }
.mohoui-logo img { transition: width .35s cubic-bezier(.2, .7, .2, 1), height .35s cubic-bezier(.2, .7, .2, 1); }
.site-header.mohoui-header.is-scrolled { background: #fff; box-shadow: 0 8px 28px -16px rgba(0, 0, 0, .25); }
.site-header.mohoui-header.is-scrolled .mohoui-header__inner { height: var(--mohoui-header-h-s); border-bottom-color: transparent; }
.site-header.mohoui-header.is-scrolled .mohoui-logo img { width: 54px; height: 55px; }
@media (max-width: 960px) {
	.site-header.mohoui-header.is-scrolled .mohoui-logo img { width: 46px; height: auto; }
}
@media (max-width: 767px) {
	.site-header.mohoui-header.is-scrolled .mohoui-logo img { width: 40px; height: auto; }
}

/* Sticky columns stop below the fixed (scrolled) header instead of under it. */
.mohoui-contact-page .mc-info { top: calc(var(--mohoui-header-h-s) + 24px); }
@media (min-width: 768px) {
	body.single-product.woocommerce div.product .moho-product-top > .summary.entry-summary { top: calc(var(--mohoui-header-h-s) + 24px); } /* beats moho-gallery */
}
html body.woocommerce-cart .wc-block-components-sidebar, /* beat support.css */
html body.woocommerce-account .woocommerce-MyAccount-navigation { top: calc(var(--mohoui-header-h-s) + 24px); }

/* Header: My account (person) and Wishlist (heart) icons hidden on phones only (the phone
   menu lists them instead); desktop keeps them. Remove to bring them back. */
@media (max-width: 767px) {
	.site-header.mohoui-header .mohoui-account,
	.site-header.mohoui-header .mohoui-wishlist { display: none !important; }
}

/* Header logo = the gold footer logo (header.php): keep its gold on the white / scrolled
   header (no dark-grey tint) and its own proportions. */
.mohoui-logo img { height: auto; }
.mohoui-header--light .mohoui-logo img { filter: none; }
.site-header.mohoui-header.is-scrolled .mohoui-logo img { height: auto; }