/* LPJ Storefront: the menu bar and menu on every page. Written for phones first, then desktops.
   Rules sit under ids because the site's Additional CSS prints after this file and would win otherwise. */
@font-face {
	font-family: "LPJ Menu";
	font-weight: 100 900;
	font-display: swap;
	src: url(/wp-content/uploads/elementor/google-fonts/fonts/raleway-1ptug8zys_skggpnyc0itw.woff2) format("woff2");
}
:root {
	--lpjb-top: var(--wp-admin--admin-bar--height, 0px);
	--lpjb-line: rgba(0, 0, 0, .16);
	--lpjb-text: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	--lpjb-menu: "LPJ Menu", "Raleway", sans-serif;
	--lpjb-slide: cubic-bezier(.22, .61, .36, 1);
}
@media (max-width: 600px) {
	/* WordPress's own admin bar scrolls away at this size */
	:root { --lpjb-top: 0px; }
}

/* The theme's header keeps its place in the page, because the home page effects are measured from it */
#ast-desktop-header, #ast-mobile-header { visibility: hidden !important; }

html.lpjb-open { overflow: hidden; }
html.lpjb-open #ht-ctc-chat { display: none !important; }
/* The open menu reaches this link at some widths, and would leave part of the word showing */
html.lpjb-open #lpjb-bar .lpjb-links a:first-child { visibility: hidden; }

.lpjb-sprite { position: absolute; }

/* The loading screen leaves as soon as it is told to, instead of taking a further second */
.loaded #loftloader-wrapper { transition: opacity .0001s .3s, transform .0001s .3s !important; }
.loaded #loftloader-wrapper #loader, .loaded #loftloader-wrapper .loader-close-button { transition: all .1s ease-out !important; }
.loaded #loftloader-wrapper .loader-section.section-fade { transition: opacity .25s ease !important; }

/* Bar */
#lpjb-bar {
	position: fixed;
	top: var(--lpjb-top);
	right: 0;
	left: 0;
	z-index: 99990; /* Under the theme's phone menu, so it opens over the bar */
	display: grid;
	grid-template-columns: 44px 1fr 44px;
	align-items: center;
	box-sizing: border-box;
	height: 56px;
	margin: 0;
	padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
	background: #fff;
	color: #000;
	font: 400 14px/1 var(--lpjb-text);
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
}
#lpjb-bar a, #lpjb-bar button { color: inherit; text-decoration: none; }
#lpjb-bar img { display: block; filter: invert(1); }
#lpjb-bar svg { display: block; fill: currentColor; }
#lpjb-bar :focus-visible, #lpjb-menu :focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }

#lpjb-bar .lpjb-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0 0 0 -10px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font: inherit;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}
#lpjb-bar .lpjb-lines { display: block; flex: none; width: 24px; }
#lpjb-bar .lpjb-lines span { display: block; height: 1.5px; background: currentColor; }
#lpjb-bar .lpjb-lines span + span { margin-top: 7px; }
#lpjb-bar .lpjb-word, #lpjb-bar .lpjb-links { display: none; }
#lpjb-bar .lpjb-word { font-weight: 400; }
#lpjb-bar .lpjb-logo { justify-self: center; }
#lpjb-bar .lpjb-logo img { width: 42px; height: 42px; }
#lpjb-bar .lpjb-wa { display: grid; place-items: center; justify-self: end; width: 44px; height: 44px; margin-right: -10px; }
#lpjb-bar .lpjb-wa svg { width: 21px; height: 21px; }

/* Home screen on phones: clear, because the video plays full screen behind it */
@media (max-width: 921px) {
	#lpjb-bar.is-home { background: transparent; color: #fff; pointer-events: none; }
	#lpjb-bar.is-home a, #lpjb-bar.is-home button { pointer-events: auto; }
	#lpjb-bar.is-home img { filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .85)); }
	#lpjb-bar.is-home .lpjb-lines, #lpjb-bar.is-home svg { filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .85)); }

	/* The bar's button replaces the green chat bubble */
	#ht-ctc-chat { display: none !important; }

	/* The theme's phone menu opens with its close button and logo exactly over the bar's */
	html #ast-mobile-popup .ast-mobile-popup-header { align-items: flex-start; padding: 3px 0 0 3px; }
	html #ast-hf-mobile-menu > .menu-item-1792 { top: 7px; left: calc(50% - 21px); width: 42px; }
	html #ast-hf-mobile-menu > .menu-item-1792 > a { width: 42px; height: 42px; }
}

/* Shop and product pages: the bar takes up its own space, and the sort row pins beneath it */
.lpj-page #lpjb-bar { position: sticky; right: auto; left: auto; }
.lpj-page .lpj-controls { top: calc(var(--lpj-top) + 56px); }
@media (max-height: 500px) {
	.lpj-page .lpj-controls { position: static; }
}

/* Menu */
#lpjb-scrim {
	position: fixed;
	inset: 0;
	z-index: 100001;
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility .3s;
}
html.lpjb-open #lpjb-scrim { opacity: 1; visibility: visible; }
#lpjb-menu {
	position: fixed;
	top: var(--lpjb-top);
	bottom: 0;
	left: 0;
	z-index: 100002;
	display: none;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	background: #fff;
	color: #000;
	font: 400 14.5px/20px var(--lpjb-text);
	text-align: left;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	transform: translateX(-100%);
	visibility: hidden;
	transition: transform .38s var(--lpjb-slide), visibility .38s;
}
#lpjb-menu.is-ready { display: block; }
/* Shown at once on opening, so the close button can take keyboard focus */
html.lpjb-open #lpjb-menu { transform: none; visibility: visible; transition: transform .38s var(--lpjb-slide), visibility 0s; }
#lpjb-menu *, #lpjb-menu *::before { box-sizing: border-box; }
#lpjb-menu a, #lpjb-menu button { color: inherit; text-decoration: none; }
#lpjb-menu ul { margin: 0; padding: 0; list-style: none; }
#lpjb-menu li { margin: 0; padding: 0; }
#lpjb-menu img { display: block; max-width: 100%; }

#lpjb-menu .lpjb-head { position: relative; height: 67px; }
#lpjb-menu .lpjb-close {
	position: absolute;
	top: 3px;
	left: 3px;
	display: block;
	width: 50px;
	height: 50px;
	min-height: 0;
	margin: 0;
	padding: 10px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	cursor: pointer;
}
#lpjb-menu .lpjb-close svg { display: block; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; }
#lpjb-menu .lpjb-home { position: absolute; top: 7px; left: calc(50% - 21px); display: block; width: 42px; height: 42px; }
#lpjb-menu .lpjb-home img { width: 100%; height: 100%; filter: invert(1); }
#lpjb-menu .lpjb-body { padding: 10px 24px 24px; }

#lpjb-menu .lpjb-main a { display: block; padding: 11px 0; font: 300 32px/1.2 var(--lpjb-menu); }
#lpjb-menu .lpjb-watches {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 20'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l9 9-9 9'/%3E%3C/svg%3E") right center / 11px 20px no-repeat;
}
#lpjb-menu .lpjb-contact { margin-top: 30px; }
#lpjb-menu .lpjb-contact a { display: flex; align-items: center; gap: 14px; padding: 9px 0; }
#lpjb-menu .lpjb-contact svg { flex: none; width: 18px; height: 18px; fill: currentColor; }
#lpjb-menu .lpjb-social { display: flex; gap: 2px; margin: 41px 0 0 -10px; }
#lpjb-menu .lpjb-social a { display: block; padding: 10px; }
#lpjb-menu .lpjb-social svg { display: block; width: 20px; height: 20px; fill: currentColor; }

#lpjb-menu .lpjb-brands { display: none; padding: 10px 24px 24px; }
#lpjb-menu .lpjb-back {
	display: block;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 6px 0 14px 22px;
	border: 0;
	border-radius: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 20'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' d='M10 1l-9 9 9 9'/%3E%3C/svg%3E") left 11px / 10px 18px no-repeat;
	box-shadow: none;
	font: 300 24px/1.2 var(--lpjb-menu);
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	cursor: pointer;
}
#lpjb-menu .lpjb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--lpjb-line); }
#lpjb-menu .lpjb-grid li { border-bottom: 1px solid var(--lpjb-line); }
#lpjb-menu .lpjb-grid li:nth-child(odd) { border-right: 1px solid var(--lpjb-line); }
#lpjb-menu .lpjb-grid a { display: block; padding: 12px 6px 14px; font: 500 15px/1.3 var(--lpjb-menu); text-align: center; }
#lpjb-menu .lpjb-grid img { width: 136px; height: auto; aspect-ratio: 1; margin: 0 auto 6px; object-fit: contain; }
#lpjb-menu .lpjb-all {
	display: inline-block;
	margin-top: 18px;
	padding: 0 0 8px;
	font: 500 13px/16px var(--lpjb-text);
	letter-spacing: 2px;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
	text-transform: uppercase;
}

/* Phones, after tapping Watches: the brand tiles take the place of the links */
@media (max-width: 921px) {
	#lpjb-menu.is-watches .lpjb-body { display: none; }
	#lpjb-menu.is-watches .lpjb-brands { display: block; }
	#lpjb-menu .lpjb-back { position: relative; }
}
@media (max-width: 921px) and (prefers-reduced-motion: no-preference) {
	#lpjb-menu.is-watches .lpjb-brands { animation: lpjb-forward .26s ease; }
	#lpjb-menu:not(.is-watches) .lpjb-body { animation: lpjb-backward .26s ease; }
}
@keyframes lpjb-forward { from { opacity: 0; transform: translateX(24px); } }
@keyframes lpjb-backward { from { opacity: 0; transform: translateX(-24px); } }

/* Desktops */
@media (min-width: 922px) {
	/* The home page chapters and video sizes all follow this one height */
	html { --lpj-h: calc(72px + var(--wp-admin--admin-bar--height, 0px)) !important; }
	html body:not(.home):not(.ast-header-break-point) .site-content,
	html body.admin-bar:not(.home):not(.ast-header-break-point) .site-content { padding-top: calc(75px + var(--wp-admin--admin-bar--height, 0px)) !important; }

	#lpjb-bar {
		grid-template-columns: 1fr auto 1fr;
		height: 72px;
		padding: 0 max(5%, calc((100% - 1560px) / 2));
	}
	#lpjb-bar.is-home { background: #000; color: #fff; }
	#lpjb-bar.is-home img { filter: none; }
	#lpjb-bar .lpjb-toggle { justify-self: start; width: auto; margin: 0; }
	#lpjb-bar .lpjb-word { display: block; }
	#lpjb-bar .lpjb-logo img { width: 50px; height: 50px; }
	#lpjb-bar .lpjb-wa { display: none; }
	#lpjb-bar .lpjb-links { display: flex; align-items: center; justify-self: end; gap: 20px; }
	#lpjb-bar .lpjb-links a { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
	#lpjb-bar .lpjb-links svg { width: 16px; height: 16px; }
	.lpj-page .lpj-controls { top: calc(var(--lpj-top) + 72px); }

	/* Menu and brands side by side, both running the full height of the screen */
	#lpjb-menu { width: min(960px, calc(100vw - 56px)); }
	#lpjb-menu.is-ready { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
	#lpjb-menu .lpjb-side { display: grid; grid-template-rows: 72px 1fr; min-height: 0; border-right: 1px solid var(--lpjb-line); }
	#lpjb-menu .lpjb-head { height: 72px; }
	#lpjb-menu .lpjb-close { top: 11px; left: 25px; }
	#lpjb-menu .lpjb-home { top: 11px; left: calc(50% - 25px); width: 50px; height: 50px; }
	#lpjb-menu .lpjb-body { display: flex; flex-direction: column; padding: 18px 36px 36px 40px; }
	#lpjb-menu .lpjb-main a { font-size: 34px; }
	#lpjb-menu .lpjb-watches { background: none; }
	#lpjb-menu .lpjb-contact { margin-top: auto; padding-top: 30px; }
	#lpjb-menu .lpjb-social { margin-top: 20px; }

	#lpjb-menu .lpjb-brands { display: flex; flex-direction: column; align-items: flex-start; min-height: 0; padding: 72px 44px 36px; }
	#lpjb-menu .lpjb-back { display: none; }
	#lpjb-menu .lpjb-grid { flex: 1; width: 100%; min-height: 0; grid-auto-rows: 1fr; }
	#lpjb-menu .lpjb-grid a { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 8px; }
	#lpjb-menu .lpjb-grid img { width: min(164px, calc((100vh - 308px) / 3)); }
	#lpjb-menu .lpjb-all { margin-top: 20px; }
}
@media (min-width: 1100px) {
	#lpjb-bar { padding: 0 max(8%, calc((100% - 1560px) / 2)); }
	#lpjb-bar .lpjb-links { gap: 32px; }
}
@media (min-width: 922px) and (max-height: 700px) {
	#lpjb-menu .lpjb-body { padding-top: 6px; padding-bottom: 20px; }
	#lpjb-menu .lpjb-main a { padding: 7px 0; font-size: 28px; }
	#lpjb-menu .lpjb-contact a { padding: 5px 0; }
	#lpjb-menu .lpjb-contact { padding-top: 16px; }
	#lpjb-menu .lpjb-social { margin-top: 6px; }
	#lpjb-menu .lpjb-brands { padding-bottom: 20px; }
	#lpjb-menu .lpjb-grid img { width: max(84px, calc((100vh - 270px) / 3)); }
	#lpjb-menu .lpjb-all { margin-top: 12px; }
}

/* Mouse and trackpad only, so taps never leave a stuck hover state */
@media (hover: hover) {
	#lpjb-bar .lpjb-links a:hover, #lpjb-menu .lpjb-main a:hover, #lpjb-menu .lpjb-contact a:hover {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 3px;
	}
	#lpjb-menu .lpjb-main a:hover { text-underline-offset: 6px; }
	#lpjb-menu .lpjb-grid img { transition: transform .4s ease; }
	#lpjb-menu .lpjb-grid a:hover img { transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
	#lpjb-menu, html.lpjb-open #lpjb-menu, #lpjb-scrim, #lpjb-menu .lpjb-grid img { transition: none; }
}