/* QRS-278: phone drawer like the user dashboard drawer (react-modern-drawer: right side,
   min(80vw, 320px), rgba(36,36,36,.9) with a 6px blur, a dark overlay, the logo at the top,
   upper-case Raleway items with a line under each).
   Only in Themify's mobile mode (body.mobile_menu_active, 900px and down). phone-drawer.js moves
   the panel to <body> in this mode, because the sticky header has a filter and a backdrop-filter,
   which would make it the box for a fixed panel. The old rules (style.css and functions.php)
   used position:absolute with top/right offsets; the rules here replace them. */

/* Parts that only the drawer shows. */
body:not(.mobile_menu_active) .qr-drawer-only {
	display: none !important;
}

body.mobile_menu_active #mobile-menu {
	position: fixed !important;
	inset: 0 0 0 auto !important;
	z-index: 100001 !important;
	box-sizing: border-box;
	width: min(80vw, 320px) !important;
	height: 100% !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 24px 0 max(24px, env(safe-area-inset-bottom)) !important;
	border: 0 !important;
	background: rgba(36, 36, 36, 0.9) !important;
	-webkit-backdrop-filter: blur(6px) !important;
	backdrop-filter: blur(6px) !important;
	box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45) !important;
	color: #fff;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.4s ease, visibility 0s linear 0.4s !important;
}
body.mobile_menu_active #mobile-menu.sidemenu-on {
	transform: none;
	visibility: visible;
	transition: transform 0.4s ease !important;
}
body.mobile_menu_active .body-overlay {
	position: fixed !important;
	inset: 0 !important;
	z-index: 100000 !important;
	background: rgba(0, 0, 0, 0.3) !important;
}
html.qr-drawer-open,
html.qr-drawer-open body {
	overflow: hidden !important;
}

/* The account and cart icons are in the header on phones, not in the drawer. */
body.mobile_menu_active #mobile-menu .header-icons {
	display: none !important;
}

/* Head: the logo, and the close button at the top right. */
body.mobile_menu_active #mobile-menu .qr-drawer__head {
	display: flex;
	justify-content: center;
	margin: 0 0 32px;
	padding: 0 56px;
}
body.mobile_menu_active #mobile-menu .qr-drawer__logo {
	display: block;
	line-height: 0;
}
body.mobile_menu_active #mobile-menu .qr-drawer__logo img {
	display: block;
	width: auto;
	height: 65px;
}
body.mobile_menu_active #mobile-menu #menu-icon-close {
	position: absolute !important;
	top: 16px !important;
	right: 12px !important;
	left: auto !important;
	display: block !important;
	width: 44px !important;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50%;
	background: transparent !important;
	opacity: 1 !important;
	cursor: pointer;
}
body.mobile_menu_active #mobile-menu #menu-icon-close::before,
body.mobile_menu_active #mobile-menu #menu-icon-close::after {
	content: '' !important;
	position: absolute !important;
	top: 21px !important;
	left: 11px !important;
	width: 22px !important;
	height: 2px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 1px;
	background: #fff !important;
	transform: rotate(45deg) !important;
}
body.mobile_menu_active #mobile-menu #menu-icon-close::after {
	transform: rotate(-45deg) !important;
}
body.mobile_menu_active #mobile-menu #menu-icon-close:hover {
	background: rgba(255, 255, 255, 0.1) !important;
}

/* Items: the menu (MY PRODUCTS when signed in, then the store pages) and the account part. */
body.mobile_menu_active #mobile-menu #main-nav-wrap,
body.mobile_menu_active #mobile-menu #main-nav,
body.mobile_menu_active #mobile-menu .qr-drawer__account {
	display: block !important;
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: transparent !important;
}
body.mobile_menu_active #mobile-menu #main-nav > li,
body.mobile_menu_active #mobile-menu .qr-drawer__account > li {
	display: block !important;
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(204, 204, 204, 0.4) !important;
	list-style: none !important;
}
body.mobile_menu_active #mobile-menu #main-nav > li::after {
	content: none !important;
}
body.mobile_menu_active #mobile-menu #main-nav > li > a,
body.mobile_menu_active #mobile-menu .qr-drawer__account > li > a {
	display: block !important;
	margin: 0 !important;
	padding: 16px !important;
	border: 0 !important;
	background: transparent !important;
	color: #fff !important;
	font-family: Raleway, sans-serif !important;
	font-size: 17px !important;
	font-weight: 500 !important;
	line-height: 28px !important;
	letter-spacing: 0.02em !important;
	text-align: left !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
}
body.mobile_menu_active #mobile-menu #main-nav > li > a:hover,
body.mobile_menu_active #mobile-menu .qr-drawer__account > li > a:hover {
	background: rgba(255, 255, 255, 0.08) !important;
}
body.mobile_menu_active #mobile-menu #main-nav > li.current-menu-item > a,
body.mobile_menu_active #mobile-menu #main-nav > li.current_page_item > a {
	box-shadow: inset 3px 0 0 #fff;
	background: rgba(255, 255, 255, 0.08) !important;
}
/* Sub-menus (none today) stay readable. */
body.mobile_menu_active #mobile-menu #main-nav .sub-menu {
	position: static !important;
	padding: 0 0 8px 16px !important;
	background: transparent !important;
	box-shadow: none !important;
}
body.mobile_menu_active #mobile-menu .qr-drawer__account > li > a.qr-drawer__signout {
	color: #ff8a8a !important;
}
body.mobile_menu_active #mobile-menu a:focus-visible {
	outline: 2px solid #fff !important;
	outline-offset: -4px !important;
}

/* Sign-out confirmation (same look as the account centre dialog). */
.qr-drawer-dialog {
	width: min(360px, calc(100vw - 32px));
	max-width: none;
	margin: auto;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 24px;
	background: rgba(28, 28, 28, 0.94);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
	color: #fff;
}
.qr-drawer-dialog::backdrop {
	background: rgba(0, 0, 0, 0.6);
}
.qr-drawer-dialog__box {
	padding: 26px 22px 22px;
	text-align: left;
}
.qr-drawer-dialog .qr-drawer-dialog__title {
	margin: 0 0 8px;
	padding: 0;
	color: #fff;
	font-family: Raleway, sans-serif !important;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
}
.qr-drawer-dialog .qr-drawer-dialog__text {
	margin: 0 0 20px;
	color: rgba(255, 255, 255, 0.75);
	font-family: Inter, sans-serif !important;
	font-size: 14px;
	line-height: 1.5;
}
.qr-drawer-dialog__actions {
	display: flex;
	gap: 12px;
}
.qr-drawer-dialog .qr-drawer-dialog__cancel,
.qr-drawer-dialog .qr-drawer-dialog__confirm {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	min-height: 48px;
	margin: 0;
	padding: 12px 14px;
	border-radius: 12px;
	font-family: Raleway, sans-serif !important;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
}
.qr-drawer-dialog .qr-drawer-dialog__cancel {
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: transparent;
	color: #fff;
}
.qr-drawer-dialog .qr-drawer-dialog__confirm {
	border: 0;
	background: #e5484d;
	color: #fff;
}
.qr-drawer-dialog .qr-drawer-dialog__confirm:hover {
	background: #cf3b40;
	color: #fff;
}
.qr-drawer-dialog :is(button, a):focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	body.mobile_menu_active #mobile-menu,
	body.mobile_menu_active #mobile-menu.sidemenu-on {
		transition: none !important;
	}
}