/*
 * TJL Mobile Header -- 1.4.1
 *
 * Everything below is inside @media (max-width: 767px), which is Elementor's
 * own mobile breakpoint for this site (post-74.css switches at 767px). Desktop
 * and tablet render exactly as before.
 *
 * Targets, for reference:
 *   post 74   "primary header"        -> .nxt-normal-header .elementor-74
 *     a855b11   purple timings bar          e6740b9  login/register (profile)
 *     26fc990   nav band                    75881c8c logo + menu row
 *     1ac91fa4  logo image widget           a472fef / 115ab3f9  menu wrapper
 *     3bbd0a7   The Plus navigation menu
 *   post 4884 "primary header sticky" -> .nxt-sticky-header .elementor-4884
 *   post 3853 "gold coin mega menu"   -> .elementor-3853 (inside the mobile panel)
 *
 * Round-2 features (drawer, account sheet, overlay, alignment) are each gated
 * on a body class emitted by tjl_mh_body_class(), so Settings -> TJL Mobile
 * Header can switch any of them off without touching this file. The round-1
 * redesign below is deliberately NOT gated -- it is the shipped baseline, not
 * an option, and the plugin's master switch is its off position.
 *
 *   .tjl-mh-align          centre the profile + menu buttons
 *   .tjl-mh-drawer         menu opens as a slide-out drawer
 *   .tjl-mh-drawer-left|right   which edge it comes from
 *   .tjl-mh-acct           tap-to-open account sheet when logged in
 *   .tjl-mh-overlay        header floats over the hero
 */

/* The scrim is created by the JS only while a mobile panel is open, but belt
   and braces: it is inert above the breakpoint whatever the JS does. */
@media (min-width: 768px) {
	.tjl-mh-scrim,
	.tjl-mh-drawer-close {
		display: none !important;
	}
}

@media (max-width: 767px) {

/* ==========================================================================
   1. Purple bar -- one line, timings only
   The Login/Signup widget is lifted out of the flex flow (see §2), which is
   what was forcing the second row.
   ========================================================================== */

#nxt-header .elementor-74 .elementor-element.elementor-element-a855b11 {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	overflow: visible;
}

#nxt-header .elementor-74 .elementor-element.elementor-element-a855b11 > .e-con-inner {
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 8px 14px;
	min-width: 0;
}

/* The gem icon keeps its intrinsic width; the heading takes the rest and
   truncates rather than ever wrapping to a second line. */
#nxt-header .elementor-74 .elementor-element.elementor-element-940276e {
	flex: 0 0 auto;
}

#nxt-header .elementor-74 .elementor-element.elementor-element-4261448 {
	flex: 0 1 auto;
	min-width: 0;
}

#nxt-header .elementor-74 .elementor-element.elementor-element-4261448 .elementor-heading-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: 0.6px;
}

/* ==========================================================================
   2. Profile button -- the Login/Signup trigger, as a circle in the logo row
   The widget stays where it is in the DOM (so The Plus's by-id click handler
   and its position:fixed modal keep working untouched) and is positioned
   against the purple bar, which is position:relative with z-index 999.
   ========================================================================== */

#nxt-header .elementor-74 .elementor-element.elementor-element-e6740b9 {
	position: absolute;
	left: 14px;
	top: 100%;
	margin-top: 28px;
	width: auto;
	max-width: none;
	z-index: 5;
}

/* The Plus ships `margin-top:-8px` on this container, which is why the 44px
   trigger hangs 8px above its own widget box and lands 8px high in the row.
   Zeroing it is the whole of the profile half of the alignment fix. */
body.tjl-mh-align #nxt-header .elementor-74 .elementor-element-e6740b9 > .elementor-widget-container {
	margin-top: 0;
}

#nxt-header .elementor-74 .elementor-element-e6740b9 .tp-wp-lrcf,
#nxt-header .elementor-74 .elementor-element-e6740b9 .tp-lr-comm-wrap,
#nxt-header .elementor-74 .elementor-element-e6740b9 .tp-ursp-page-wrapper {
	line-height: 0;
	width: auto;
}

/* font-size:0 collapses the bare "Login/Signup" text node, which has no
   element of its own to hide; the icon gets its size back below. */
#nxt-header .elementor-74 .elementor-element-e6740b9 .tp-ursp-btn.tp-ursp-trigger,
#nxt-header .elementor-74 .elementor-element-e6740b9 .after_login_btn_main,
#nxt-header .tjl-mh-profile {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	border-radius: 50%;
	border: 1px solid rgba(132, 65, 192, 0.22);
	background: #fff;
	box-shadow: 0 2px 10px rgba(47, 54, 61, 0.10);
	color: #8441c0;
	font-size: 0;
	line-height: 0;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

#nxt-header .elementor-74 .elementor-element-e6740b9 .tp-ursp-btn.tp-ursp-trigger i,
#nxt-header .tjl-mh-profile i {
	font-size: 17px;
	line-height: 1;
	margin: 0;
	color: inherit;
}

/* Logged in, the widget renders a different subtree entirely: `.tp-wp-lrcf`
   gains `aflp` and the trigger becomes `.after_login_btn_main`, carrying an
   avatar and the display name. Same circle, avatar filling it, name collapsed
   by the shared `font-size:0` above. Ungated: a logged-in customer gets the
   circle whether or not the tap-to-open sheet is switched on. */
#nxt-header .elementor-74 .elementor-element-e6740b9 .tp-wp-lrcf.aflp,
#nxt-header .elementor-74 .elementor-element-e6740b9 .after_login_btn_wrapper {
	width: 44px;
	max-width: 44px;
	line-height: 0;
}

#nxt-header .elementor-74 .elementor-element-e6740b9 .after_login_btn_main {
	overflow: hidden;
}

/* `font-size:0` has to be repeated here, not just inherited from the button.
   The widget's After Login typography control writes its selector as
   `.after_login_btn_wrapper *`, so it sets an explicit font-size on this span
   and inheritance never reaches it -- leaving the display name occupying
   ~52px of the flex line and pushing the avatar out of its own circle. */
#nxt-header .elementor-74 .elementor-element-e6740b9 .after_login_btn_main span.elementor-button-text {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 0;
	line-height: 0;
}

/* The plugin ships `width:40px` and `margin-right:15px` on the avatar, which
   would sit it off-centre inside a 44px disc. */
#nxt-header .elementor-74 .elementor-element-e6740b9 .after_login_btn_main .avatar,
#nxt-header .tjl-mh-profile img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	border-radius: 50%;
	object-fit: cover;
}

/* Taken out of the flex line entirely, so the avatar fills the disc whatever
   the sibling text node is doing. The button is already position:relative. */
#nxt-header .elementor-74 .elementor-element-e6740b9 .after_login_btn_main .avatar {
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
}

/* ==========================================================================
   3. Logo row -- [profile] [logo] [menu], nothing else, no white cards
   Both flanking boxes are 72px wide, so the logo's own box is centred on the
   viewport rather than merely centred in the space left over.
   ========================================================================== */

#nxt-header .elementor-74 .elementor-element.elementor-element-26fc990 {
	--flex-direction: row;
	--gap: 0px 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
}

#nxt-header .elementor-74 .elementor-element.elementor-element-26fc990 > .e-con-inner {
	padding: 0;
}

/* The only positioned ancestor in the row: the mobile menu panel resolves its
   left/right/top against this box, so it stays full-width and drops below the
   whole header even though its own wrapper is only 72px wide. */
#nxt-header .elementor-74 .elementor-element.elementor-element-75881c8c {
	position: relative;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	min-height: 100px;
	padding-left: 72px;
	background-color: transparent;
}

#nxt-header .elementor-74 .elementor-element.elementor-element-1ac91fa4 {
	flex: 1 1 auto;
	width: auto;
	max-width: none;
	text-align: center;
}

#nxt-header .elementor-74 .elementor-element.elementor-element-1ac91fa4 > .elementor-widget-container {
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

#nxt-header .elementor-74 .elementor-element.elementor-element-1ac91fa4 img {
	width: 140px;
	max-width: 100%;
	border-radius: 0;
}

/* The logo sits in a line box, and a line box carries ~7px of descender space
   below the picture -- so the widget measures 91.5px, the widget centres on the
   row, and the picture itself lands 3.5px above centre. On the home page the
   image is wrapped in an inline-block <a>, which re-creates the same line box
   one level up, so both the anchor and the container have to go block and the
   container's line box has to be collapsed. Blocks all the way down, then
   `margin:0 auto` restores the centring that `text-align:center` was doing. */
body.tjl-mh-align #nxt-header .elementor-74 .elementor-element.elementor-element-1ac91fa4 > .elementor-widget-container,
body.tjl-mh-align #nxt-header .elementor-74 .elementor-element.elementor-element-1ac91fa4 a {
	display: block;
	line-height: 0;
}

body.tjl-mh-align #nxt-header .elementor-74 .elementor-element.elementor-element-1ac91fa4 img {
	display: block;
	margin: 0 auto;
}

/* Menu wrapper: 72px, transparent, no frosted card, and explicitly static so
   it cannot become the panel's containing block. */
#nxt-header .elementor-74 .elementor-element.elementor-element-a472fef {
	position: static;
	flex: 0 0 72px;
	width: 72px;
	min-width: 72px;
	align-self: stretch;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	background-color: transparent;
}

#nxt-header .elementor-74 .elementor-element.elementor-element-115ab3f9 {
	position: static;
	width: 72px;
	min-width: 72px;
	align-self: stretch;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

/* The nav widget is stretched to the full height of the logo row on purpose.
   The Plus positions the dropdown panel at top:100% of this widget (Elementor
   makes every .elementor-widget position:relative), so making the widget as
   tall as the row is what drops the panel below the whole header instead of
   below the 44px button -- no hard-coded offset to drift. */
#nxt-header .elementor-74 .elementor-element.elementor-element-75881c8c > .e-con-inner {
	min-height: 100px;
	align-items: center;
	flex-wrap: nowrap;
}

#nxt-header .elementor-74 .elementor-element.elementor-element-3bbd0a7 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

#nxt-header .elementor-74 .elementor-element.elementor-element-3bbd0a7 > .elementor-widget-container {
	width: 100%;
}

/* ==========================================================================
   4. The hamburger -- a circle that matches the profile button
   Applies to both header templates, hence the loose scope under #nxt-header.
   ========================================================================== */

#nxt-header .plus-navigation-wrap,
#nxt-header .plus-navigation-inner {
	position: static;
}

/* The nav widget is stretched to the row height (§3), but these three wrappers
   inside it stayed 44px tall and anchored to the top of that box, which is why
   the toggle sat 28px above the logo's centre line. Stretching the chain makes
   the circle centre on the row instead of on the first 44px of it. */
body.tjl-mh-align #nxt-header .plus-navigation-wrap,
body.tjl-mh-align #nxt-header .plus-navigation-inner,
body.tjl-mh-align #nxt-header .plus-mobile-nav-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

#nxt-header .plus-mobile-nav-toggle.mobile-toggle {
	justify-content: center;
	align-items: center;
}

#nxt-header .mobile-plus-toggle-menu {
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(132, 65, 192, 0.22);
	background: #fff;
	box-shadow: 0 2px 10px rgba(47, 54, 61, 0.10);
	-webkit-tap-highlight-color: transparent;
}

#nxt-header .mobile-plus-toggle-menu ul.toggle-lines {
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
}

#nxt-header .mobile-plus-toggle-menu ul.toggle-lines li.toggle-line {
	background: #8441c0;
}

#nxt-header .mobile-plus-toggle-menu:not(.plus-collapsed) ul.toggle-lines li.toggle-line {
	background: #e4097f;
}

/* ==========================================================================
   5. The mobile menu panel
   Replaces The Plus's flat #dedede slab. Its own rule is
   `.plus-mobile-menu .navbar-nav li a {padding:10px 10px!important}` -- a
   descendant selector, so !important is required to beat it, and it is the
   reason product links inside the mega menu were drawing a stray 1px rule
   across their titles (see §6).
   ========================================================================== */

#nxt-header .plus-navigation-wrap .plus-mobile-menu-content {
	top: 100%;
	left: 0;
	right: 0;
	z-index: 20;
	padding: 4px 0 8px;
	background: #fff;
	border-top: 1px solid rgba(132, 65, 192, 0.12);
	border-radius: 0 0 18px 18px;
	box-shadow: 0 18px 38px rgba(47, 54, 61, 0.14);
	max-height: calc(100vh - 150px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

/* ---- Slide-out drawer -----------------------------------------------------
   The Plus animates this panel with jQuery slideUp/slideDown, which writes
   `display`, `height`, `overflow`, `padding-top/bottom` and `margin-top/bottom`
   as inline styles, and a separate resize handler writes `left` and `width`.
   Inline declarations lose to `!important` in an author stylesheet, so every
   property the plugin touches is reclaimed that way and the drawer is driven
   purely off the `in` class, which The Plus adds on open and removes on close.
   The panel therefore stays `display:block` at all times and is hidden by
   transform + visibility instead, which is what makes the close animate. */
body.tjl-mh-drawer #nxt-header .plus-navigation-wrap .plus-mobile-menu-content {
	position: fixed !important;
	top: 0 !important;
	bottom: 0 !important;
	height: auto !important;
	width: min(86vw, var(--tjl-mh-drawer-w, 360px)) !important;
	max-width: none !important;
	min-width: 0 !important;
	max-height: none;
	margin: 0 !important;
	padding: 0 0 calc(28px + env(safe-area-inset-bottom)) !important;
	display: block !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: #fff;
	border: 0;
	border-radius: 0;
	box-shadow: 0 0 46px rgba(47, 54, 61, 0.22);
	z-index: 100003;
	visibility: hidden;
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.32s;
}

body.tjl-mh-drawer-right #nxt-header .plus-navigation-wrap .plus-mobile-menu-content {
	left: auto !important;
	right: 0 !important;
	transform: translateX(100%);
}

body.tjl-mh-drawer-left #nxt-header .plus-navigation-wrap .plus-mobile-menu-content {
	right: auto !important;
	left: 0 !important;
	transform: translateX(-100%);
}

body.tjl-mh-drawer #nxt-header .plus-navigation-wrap .plus-mobile-menu-content.in {
	transform: none;
	visibility: visible;
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
}

/* ---- Drawer head: brand band + close ------------------------------------
   Sticky, not absolute: the drawer scrolls, and a close affordance that
   scrolls out of reach is not one. The band is the brand purple so the drawer
   opens on something that belongs to Taqwa rather than on a white void with a
   cross in the corner. */
body.tjl-mh-drawer #nxt-header .plus-mobile-menu-content > .tjl-mh-drawer-head {
	position: sticky;
	top: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	gap: 12px;
	padding: 16px 14px 16px 18px;
	margin: 0 0 2px;
	background: linear-gradient(135deg, #4b2470 0%, #8441c0 58%, #9c55cd 100%);
	box-shadow: 0 10px 24px rgba(75, 36, 112, 0.18);
}

/* With the brand block off there is nothing to balance the close against, so
   it keeps the right-hand corner on its own rather than centring. */
body.tjl-mh-drawer #nxt-header .plus-mobile-menu-content > .tjl-mh-drawer-head.is-bare {
	justify-content: flex-end;
	padding: 10px 14px;
}

body.tjl-mh-drawer #nxt-header .tjl-mh-brandlink {
	display: block;
	flex: 0 1 auto;
	min-width: 0;
	line-height: 0;
	border: 0;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

/* THE white rounded panel, and the only one in this file: 25px radius, sized
   by its own padding so it hugs the logo and extends nowhere else. The logo is
   purple-on-transparent artwork and the band behind it is purple, so this is
   what keeps the wordmark legible -- it is a backing for the logo, not a card
   for the head. */
body.tjl-mh-drawer #nxt-header .tjl-mh-logo-plate {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 9px 15px;
	border-radius: 25px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(27, 14, 40, 0.16);
}

/* height-driven, width:auto: the attachment is 450x300, and constraining the
   height is what keeps the wordmark the same size whatever image is swapped in
   behind it. */
body.tjl-mh-drawer #nxt-header .tjl-mh-logo-plate img {
	display: block;
	width: auto;
	height: 48px;
	max-width: 100%;
	border-radius: 0;
}

/* A translucent disc rather than a bare glyph: it has to read as a target
   against a gradient that is light at one corner and dark at the other. */
body.tjl-mh-drawer #nxt-header .plus-mobile-menu-content .tjl-mh-drawer-close {
	display: flex;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

body.tjl-mh-drawer #nxt-header .tjl-mh-drawer-close .tjl-mh-x {
	position: relative;
	display: block;
	width: 38px;
	height: 38px;
}

body.tjl-mh-drawer #nxt-header .tjl-mh-drawer-close .tjl-mh-x::before,
body.tjl-mh-drawer #nxt-header .tjl-mh-drawer-close .tjl-mh-x::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 17px;
	height: 2px;
	margin: -1px 0 0 -8.5px;
	border-radius: 2px;
	background: #fff;
}

body.tjl-mh-drawer #nxt-header .tjl-mh-drawer-close .tjl-mh-x::before {
	transform: rotate(45deg);
}

body.tjl-mh-drawer #nxt-header .tjl-mh-drawer-close .tjl-mh-x::after {
	transform: rotate(-45deg);
}

/* ---- Section labels ------------------------------------------------------
   The nine top-level items were one unbroken run of identical rows. These are
   injected <li>s (see mobile-header.js), so they sit in the same <ul> and must
   explicitly undo the row treatment rather than inherit it. */
body.tjl-mh-groups #nxt-header .plus-mobile-menu .navbar-nav > li.tjl-mh-group {
	display: block;
	padding: 20px 20px 7px;
	margin: 6px 0 0;
	border: 0;
	border-top: 1px solid rgba(132, 65, 192, 0.14);
	background: linear-gradient(180deg, rgba(132, 65, 192, 0.055) 0%, rgba(132, 65, 192, 0) 100%);
	font-family: Jost, sans-serif;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 1.7px;
	text-transform: uppercase;
	color: #8441c0;
}

/* The first label follows the brand band, which is already a hard break. */
body.tjl-mh-groups #nxt-header .plus-mobile-menu .navbar-nav > li.tjl-mh-group:first-child {
	margin-top: 0;
	border-top: 0;
}

#nxt-header .plus-mobile-menu-content .nav > li > a,
#nxt-header .plus-mobile-menu .navbar-nav > li > a {
	display: flex !important;
	align-items: center;
	min-height: 54px;
	padding: 14px 52px 14px 20px !important;
	border-bottom: 1px solid rgba(132, 65, 192, 0.09);
	font-family: Jost, sans-serif;
	font-size: 16.5px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0.2px;
	color: #2f363d;
}

/* A label closes the group above it, so the row before one must not also draw
   a rule -- two lines 6px apart is the thing that made the old list look
   accidental rather than grouped. */
body.tjl-mh-groups #nxt-header .plus-mobile-menu .navbar-nav > li:has(+ li.tjl-mh-group) > a {
	border-bottom: 0;
}

#nxt-header .plus-mobile-menu .navbar-nav > li:last-child > a {
	border-bottom: 0;
}

#nxt-header .plus-mobile-menu .navbar-nav > li.current-menu-item > a,
#nxt-header .plus-mobile-menu .navbar-nav > li.current-menu-ancestor > a,
#nxt-header .plus-mobile-menu .navbar-nav > li.current_page_item > a {
	position: relative;
	padding-left: 20px !important;
	font-weight: 600;
	color: #e4097f;
}

/* An accent rule as well as the colour: pink-on-white alone is a weak "you are
   here" at 16px, and three items can carry the ancestor class at once. */
#nxt-header .plus-mobile-menu .navbar-nav > li.current-menu-item > a::before,
#nxt-header .plus-mobile-menu .navbar-nav > li.current-menu-ancestor > a::before,
#nxt-header .plus-mobile-menu .navbar-nav > li.current_page_item > a::before {
	content: "";
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 0;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: #e4097f;
}

/* Dropdown caret: brand purple, aligned with the row's right padding, and it
   turns over when its branch is open. */
#nxt-header .plus-navigation-wrap .plus-mobile-menu .navbar-nav li.dropdown > a:after {
	right: 20px;
	color: #8441c0;
	transition: transform 0.25s ease;
}

#nxt-header .plus-navigation-wrap .plus-mobile-menu .navbar-nav li.dropdown.open-menu > a:after {
	transform: translateY(-50%) rotate(180deg);
}

/* Submenu: tinted, inset, hung off a purple rule so it reads as a branch
   rather than as more top-level rows. */
#nxt-header .plus-mobile-menu .navbar-nav .dropdown-menu {
	width: auto !important;
	min-width: 0;
	box-sizing: border-box;
	margin: 2px 14px 8px 20px;
	padding: 4px 0;
	border-left: 3px solid rgba(132, 65, 192, 0.35);
	border-radius: 0 12px 12px 0;
	background: rgba(132, 65, 192, 0.05);
}

#nxt-header .plus-mobile-menu .navbar-nav .dropdown-menu > li > a {
	padding: 12px 16px 12px 16px !important;
	border-bottom: 1px solid rgba(132, 65, 192, 0.09);
	font-family: Jost, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.35;
	color: #4a5159;
}

#nxt-header .plus-mobile-menu .navbar-nav .dropdown-menu > li:last-child > a {
	border-bottom: 0;
}

#nxt-header .plus-mobile-menu .navbar-nav .dropdown-menu > li.current-menu-item > a {
	color: #e4097f;
	font-weight: 500;
}

/* The side-cart plugin injects an empty list item here; the floating cart
   bubble already covers that job on every screen. */
#nxt-header .plus-mobile-menu .navbar-nav > li.xoo-wsc-menu-item {
	display: none;
}

/* ---- Drawer foot ---------------------------------------------------------
   Nine rows leave about 400px of empty white below the last item on a 844px
   screen. This closes the list off with the store's hours and its social
   links, both read back out of widgets that already exist (see tjl_mh_foot).
   `margin-top:auto` is what pins it to the bottom when the menu is short and
   lets it follow the last row when the menu is long -- the panel is a column
   flexbox for this one reason. */
body.tjl-mh-foot #nxt-header .plus-navigation-wrap .plus-mobile-menu-content {
	display: flex !important;
	flex-direction: column;
}

body.tjl-mh-foot #nxt-header .plus-mobile-menu-content > .tjl-mh-drawer-foot {
	margin-top: auto;
	padding: 22px 20px 6px;
	border-top: 1px solid rgba(132, 65, 192, 0.14);
	background: linear-gradient(180deg, rgba(132, 65, 192, 0) 0%, rgba(132, 65, 192, 0.06) 100%);
	text-align: center;
}

body.tjl-mh-foot #nxt-header .tjl-mh-foot-hours {
	margin: 0 0 16px;
	font-family: Jost, sans-serif;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.3px;
	color: #6a5a7a;
}

body.tjl-mh-foot #nxt-header .tjl-mh-foot-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

body.tjl-mh-foot #nxt-header .tjl-mh-foot-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: #8441c0;
	color: #fff;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.2s ease;
}

body.tjl-mh-foot #nxt-header .tjl-mh-foot-social a:active {
	background: #e4097f;
}

body.tjl-mh-foot #nxt-header .tjl-mh-foot-social svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* ==========================================================================
   6. Gold Coins mega menu (template post 3853) inside the panel
   ========================================================================== */

/* The `li a {border-bottom:1px solid #aaa}` leak -- this is what drew a line
   through "Taqwa Gold Coin (20 gms)". */
#nxt-header .plus-mobile-menu .elementor-3853 a {
	border-bottom: 0 !important;
}

#nxt-header .plus-mobile-menu .elementor-3853 .post-title a,
#nxt-header .plus-mobile-menu .elementor-3853 a.product-image {
	padding: 0 !important;
	display: block;
}

/* A mega-menu branch is a card, not a list of links, so it does not take the
   tinted "this is a sub-level" treatment -- the card itself carries that job.
   Two rules, not one selector list: :has() is the general case, and an invalid
   selector would take the whole list down with it, so the id form stands alone
   as the guaranteed one for the Gold Coins item that exists today. */
#nxt-header .plus-mobile-menu .navbar-nav li#menu-item-3993 > .dropdown-menu {
	margin: 0;
	padding: 0;
	border-left: 0;
	border-radius: 0;
	background: transparent;
}

#nxt-header .plus-mobile-menu .navbar-nav li > .dropdown-menu:has(> li.menu-item-object-plus-mega-menu) {
	margin: 0;
	padding: 0;
	border-left: 0;
	border-radius: 0;
	background: transparent;
}

#nxt-header .plus-mobile-menu .navbar-nav li.menu-item-object-plus-mega-menu {
	display: block;
	padding: 4px 12px 10px;
}

#nxt-header .plus-mobile-menu .elementor-3853 .elementor-element.elementor-element-aae6bb5 {
	--padding-top: 22px;
	--padding-bottom: 20px;
	--padding-left: 14px;
	--padding-right: 14px;
	border-radius: 14px;
	background-color: #faf7fd;
	border: 1px solid rgba(132, 65, 192, 0.12);
}

#nxt-header .plus-mobile-menu .elementor-3853 .elementor-element-c35bbd9 .elementor-heading-title {
	font-size: 24px;
	line-height: 1.15;
}

#nxt-header .plus-mobile-menu .elementor-3853 .elementor-element-fdf0253 .elementor-heading-title {
	text-align: center;
	font-size: 14.5px;
	line-height: 1.55;
}

#nxt-header .plus-mobile-menu .elementor-3853 .elementor-element-6895c91 .elementor-button {
	padding: 12px 26px !important;
	font-size: 13px;
}

/* Carousel: the prev/next arrows are 60px discs anchored at -65px, so on a
   390px screen they sit half off-canvas. Swipe is the control here. */
#nxt-header .plus-mobile-menu .elementor-3853 .slick-nav {
	display: none !important;
}

#nxt-header .plus-mobile-menu .elementor-3853 .slick-list {
	padding: 0 !important;
}

#nxt-header .plus-mobile-menu .elementor-3853 .slick-track {
	margin: 14px 0 2px !important;
}

/* Two-up on a phone, so a dimmed off-centre slide reads as a defect rather
   than as emphasis. */
#nxt-header .plus-mobile-menu .elementor-3853 .slick-slide {
	opacity: 1;
}

#nxt-header .plus-mobile-menu .elementor-3853 .post-content-bottom {
	padding-top: 4px;
}

/* A fixed two-line box for the title keeps the price baselines of adjacent
   cards on the same line whether a name wraps or not. */
#nxt-header .plus-mobile-menu .elementor-3853 h3.post-title {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	margin: 0 0 4px;
	line-height: 1.3;
}

#nxt-header .plus-mobile-menu .elementor-3853 h3.post-title a {
	font-family: Jost, sans-serif;
	font-size: 13.5px;
	line-height: 1.3;
	color: #5a2e86;
}

#nxt-header .plus-mobile-menu .elementor-3853 .wrapper-cart-price {
	margin-top: 2px;
}

#nxt-header .plus-mobile-menu .elementor-3853 .wrapper-cart-price .price,
#nxt-header .plus-mobile-menu .elementor-3853 .wrapper-cart-price .price .amount {
	font-family: Jost, sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #2f363d;
}

/* ==========================================================================
   7. Scrolled sticky bar (template post 4884)
   Same two circles. The profile button here is injected by mobile-header.js,
   because the sticky template has no login widget of its own; it re-fires the
   real trigger in the normal header, whose modal is position:fixed.
   ========================================================================== */

/* The template stacks this bar column-reverse with a 20px gap on phones --
   harmless while the menu toggle was its only visible child, but it would put
   the injected profile button on a second row. */
#nxt-header .nxt-sticky-header .elementor-4884 .elementor-element.elementor-element-6a85786a {
	--flex-direction: row;
	--gap: 0px 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--align-items: center;
	position: relative;
	background-color: transparent;
	border-bottom: 1px solid rgba(132, 65, 192, 0.10);
	box-shadow: 0 6px 18px rgba(47, 54, 61, 0.07);
}

/* The frost lives on a pseudo-element rather than on the bar itself. A
   `backdrop-filter` makes its element the containing block for every
   `position:fixed` descendant, which would pin the sticky header's drawer
   inside this 57px bar instead of to the viewport. The pseudo-element carries
   the same effect and contains nothing. */
#nxt-header .nxt-sticky-header .elementor-4884 .elementor-element-6a85786a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: rgba(255, 255, 255, 0.88);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	pointer-events: none;
}

#nxt-header .nxt-sticky-header .elementor-4884 .elementor-element-6a85786a > .e-con-inner {
	position: relative;
	z-index: 1;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 0;
	padding: 6px 14px;
}

#nxt-header .nxt-sticky-header .elementor-4884 .elementor-element.elementor-element-16852c2d,
#nxt-header .nxt-sticky-header .elementor-4884 .elementor-element.elementor-element-3b38869d {
	--flex-direction: row;
	--justify-content: flex-end;
	flex: 1 1 auto;
	min-width: 0;
}

/* The frosted pill now belongs to the bar itself, so the inner wrapper that
   used to carry it goes flat -- one frosted surface, not two. */
#nxt-header .nxt-sticky-header .elementor-4884 .elementor-element.elementor-element-6e1f537b {
	position: static;
	width: auto;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

#nxt-header .tjl-mh-profile {
	flex: 0 0 44px;
}

/* ==========================================================================
   8. Scrim and scroll lock -- shared by the drawer and the account sheet
   One overlay serves both, so the two panels read as one system rather than
   as two unrelated widgets that happen to be on the same screen.
   ========================================================================== */

/* One scrim per panel, inserted as that panel's preceding sibling, so the two
   always share a stacking context. See the note in mobile-header.js for why a
   single body-level scrim cannot work: the drawer is capped at z-index 99 by
   three Elementor containers above it, so its own z-index is never compared
   against anything outside that chain. */
.tjl-mh-scrim {
	position: fixed;
	inset: 0;
	z-index: 100002;
	background: rgba(27, 14, 40, 0.46);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
	-webkit-tap-highlight-color: transparent;
}

.tjl-mh-scrim.is-on {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease, visibility 0s linear 0s;
}

html.tjl-mh-locked,
html.tjl-mh-locked body {
	overflow: hidden !important;
}

/* ==========================================================================
   9. Account sheet -- the logged-in panel, as a bottom sheet
   The widget only opens this list on `:hover`, which never fires on a touch
   screen, so the logged-in profile button does nothing on a phone. The JS adds
   `tjl-mh-acct-open` on tap; forcing `display:block` here means the hover rule
   has nothing left to decide and the open/close can animate.

   A bottom sheet rather than a panel anchored under the circle: it needs no
   anchor arithmetic, so it is identical whether it was opened from the header
   or from the scrolled sticky bar, and it gives full-width 50px rows.

   Everything about how this list LOOKS -- colour, type, spacing, avatar --
   is an Elementor control on the widget (Style > After Login Panel). Only
   placement and the tap-to-open behaviour are decided here.
   ========================================================================== */

body.tjl-mh-acct #nxt-header .elementor-element-e6740b9 .tp-user-login {
	position: fixed !important;
	top: auto !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	display: block !important;
	box-sizing: border-box;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 10px 0 calc(10px + env(safe-area-inset-bottom)) !important;
	background: #fff;
	border: 0 !important;
	border-radius: 20px 20px 0 0;
	box-shadow: 0 -18px 46px rgba(47, 54, 61, 0.20);
	z-index: 100004;
	transform: translateY(100%);
	visibility: hidden;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s;
}

body.tjl-mh-acct #nxt-header .after_login_btn_wrapper.tjl-mh-acct-open .tp-user-login {
	transform: none;
	visibility: visible;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
}

/* Grab handle -- the convention that says "this sheet came from the bottom". */
body.tjl-mh-acct #nxt-header .elementor-element-e6740b9 .tp-user-login::before {
	content: "";
	display: block;
	width: 38px;
	height: 4px;
	margin: 2px auto 12px;
	border-radius: 2px;
	background: rgba(132, 65, 192, 0.25);
}

body.tjl-mh-acct #nxt-header .elementor-element-e6740b9 .tp-user-login ul.tp-list {
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0 !important;
	text-align: left;
}

body.tjl-mh-acct #nxt-header .elementor-element-e6740b9 .tp-user-login ul.tp-list > li {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid rgba(132, 65, 192, 0.10);
	text-align: left;
	justify-content: flex-start;
}

body.tjl-mh-acct #nxt-header .elementor-element-e6740b9 .tp-user-login ul.tp-list > li:last-child {
	border-bottom: 0;
}

body.tjl-mh-acct #nxt-header .elementor-element-e6740b9 .tp-user-login ul.tp-list > li.after_login_panel_link > a {
	display: flex;
	align-items: center;
	min-height: 50px;
	padding: 0 22px;
	font-family: Jost, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.2px;
	color: #2f363d;
	text-decoration: none;
}

/* "My Downloads" has no `loop_url_link` in the repeater, so it renders as a
   bare text node with no anchor. It still has to look like the rows around it
   rather than like a caption. Its own rule, not a selector list: an engine
   without `:has()` must drop only this one. */
body.tjl-mh-acct #nxt-header .elementor-element-e6740b9 .tp-user-login ul.tp-list > li.after_login_panel_link:not(:has(> a)) {
	display: flex;
	align-items: center;
	min-height: 50px;
	padding: 0 22px;
	font-family: Jost, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.2px;
	color: #2f363d;
}

body.tjl-mh-acct #nxt-header .elementor-element-e6740b9 .tp-user-login ul.tp-list > li.tp-user-logged-out {
	padding: 14px 22px 6px;
	border-bottom: 0;
}

body.tjl-mh-acct #nxt-header .elementor-element-e6740b9 .tp-user-login ul.tp-list > li.tp-user-logged-out .tp-button {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 0 18px;
	border: 0;
	border-radius: 12px;
	background: #e4097f;
	font-family: Jost, sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.3px;
	line-height: 1;
	color: #fff;
	text-decoration: none;
}

/* ==========================================================================
   10. Header overlaid on the hero
   Nexter's own idiom for this is `#nxt-header.nxt-trans-overlay`, which is how
   desktop already renders on every page. Its declarations are reproduced here
   rather than the class being added by JS, so there is no reflow between first
   paint and the script running -- and so the admin-bar offset can use 46px,
   which is the bar's real height below 783px (the theme's own rule hard-codes
   the desktop 32px).
   ========================================================================== */

body.tjl-mh-overlay #nxt-header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	z-index: 10;
}

body.tjl-mh-overlay.admin-bar #nxt-header {
	top: 46px;
}

/* The hero is a video, so what sits behind the logo changes frame by frame and
   cannot be designed against. This is a gradient veil, not the white card that
   round 1 removed: strongest at the top and gone by the bottom of the header,
   so the logo keeps reading as overlaid rather than as sitting on a panel.
   `z-index:-1` puts it behind the header's children but in front of the header's
   own (transparent) background. Switchable: "Soften the hero behind the logo". */
body.tjl-mh-overlay.tjl-mh-overlay-scrim #nxt-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.95) 0%,
		rgba(255, 255, 255, 0.80) 52%,
		rgba(255, 255, 255, 0) 100%
	);
	pointer-events: none;
}

/* The white panel behind the logo, and the answer to the contrast problem the
   gradient veil above only half solved.
   
   The hero is a video: on a frame with pale signage the purple wordmark, and
   especially the 9px "Gold | Silver | Diamonds | Gemstones" line under it,
   all but vanish. A veil across the whole header cannot fix that without
   washing out the video everywhere; a panel sized to the logo can.

   `width: fit-content` is what keeps it hugging the logo -- the widget's own
   box is full width, so without it this would paint a white band from edge to
   edge, which is exactly what the earlier round removed. 25px radius, per
   instruction, and nowhere else on the header. */
body.tjl-mh-overlay.tjl-mh-logo-card #nxt-header .elementor-74 .elementor-element-1ac91fa4 > .elementor-widget-container {
	width: fit-content;
	/* A little top offset so the panel's upper corners clear the purple bar
	   rather than butting against it -- at 9px of padding the radius was being
	   swallowed by the bar's edge and the panel read as a square. */
	margin: 7px auto 0;
	padding: 7px 16px;
	border-radius: 25px;
	background: #fff;
	box-shadow: 0 6px 20px rgba(27, 14, 40, 0.18);
}

/* The anchor and the image were both forced to `display:block` in round 1 to
   kill the line-box descender (HANDOVER_3 §5); inside a fit-content box they
   must not also stretch it. */
body.tjl-mh-overlay.tjl-mh-logo-card #nxt-header .elementor-74 .elementor-element-1ac91fa4 > .elementor-widget-container > a,
body.tjl-mh-overlay.tjl-mh-logo-card #nxt-header .elementor-74 .elementor-element-1ac91fa4 > .elementor-widget-container > img {
	width: auto;
	margin: 0;
}

/* The sticky bar carries no logo, so this is the normal header only -- but the
   selector is scoped to .elementor-74 anyway, in case 4884 ever gains one. */

/* The hero card would otherwise start 27px down and sit under the header. The
   value is a setting (Hero top spacing) because it is the one number here that
   is a judgement call rather than a measurement. */
body.tjl-mh-overlay.home .elementor-18 > .elementor-element.elementor-element-19fd515d {
	--padding-top: var(--tjl-mh-hero-pad, 164px);
}

/* ==========================================================================
   11. Stacking while a panel is open
   Last in the file on purpose: §10 sets `z-index:10` on #nxt-header at the
   same specificity, so source order is what decides the tie.
   ========================================================================== */

/* Lift the header's two stacking contexts over the rest of the page while a
   panel is open -- notably the side-cart bubble, which sits at z-index 9999997
   at body level and would otherwise float on top of the open drawer. Both go
   back to 10 the moment the panel closes. */
html.tjl-mh-panel-open #nxt-header {
	z-index: 10000000;
}

/* The sticky bar is lifted only for the drawer. The account sheet lives in the
   normal header inside the purple bar's z-index:999 context, which already
   outranks the sticky bar's 10 -- lifting the bar as well would float it, and
   its share of the scrim, above the open sheet. */
html.tjl-mh-drawer-open #nxt-header .nxt-sticky-header {
	z-index: 10000000;
}

/* The purple bar is a sibling of the nav band at z-index 999 against the nav
   band's 99, so it paints over a full-height drawer and over that drawer's
   scrim. It only has to outrank the nav band while the menu is closed, so it
   is demoted for exactly as long as the drawer is open. */
html.tjl-mh-drawer-open #nxt-header .elementor-74 .elementor-element.elementor-element-a855b11 {
	z-index: 1;
}

/* The account sheet's scrim lives inside the login widget, because that is the
   only way to share the sheet's stacking context -- but the widget is itself a
   context at z-index:5 inside the purple bar, so the scrim could not reach the
   bar's own text or the nav band and the header ended up half-dimmed. Lifting
   the widget to the top of the bar's context for as long as the sheet is open
   puts everything except the sheet behind the scrim. */
html.tjl-mh-sheet-open #nxt-header .elementor-74 .elementor-element.elementor-element-e6740b9 {
	z-index: 10000;
}

} /* end @media (max-width: 767px) */