/* ==========================================================================
   JLS Computers — Header v2
   Utilities row (wishlist, account, quote, cart), account dropdown, mini cart
   preview and the mobile drawer. Uses the jls-ui tokens; "html body"
   prefixes out-rank style.css and the Customizer's Additional CSS.
   ========================================================================== */

/* ---------- Utilities row ---------- */
html body .jls-hdr { gap: 14px; }
html body .jls-hdr > a, html body .jls-hdr .jls-hacct__btn, html body .jls-hdr .jls-hdr__signin { min-height: 40px; }

html body .jls-hdr .jls-hdr__icon {
	position: relative; justify-content: center; width: 40px; height: 40px; padding: 0;
	border-radius: 11px; color: var(--a-ink) !important;
}
html body .jls-hdr .jls-hdr__icon:hover { background: var(--a-navy-50); color: var(--a-navy) !important; }

html body .jls-hdr .jls-hdr__signin { padding: 0 10px; border-radius: 11px; color: var(--a-ink) !important; font-weight: 600; }
html body .jls-hdr .jls-hdr__signin:hover { background: var(--a-navy-50); color: var(--a-navy) !important; }

/* Quote pill (from JLS Quote Manager) — align with the rest */
html body .jls-hdr .jlsqm-header-btn { min-height: 40px; padding: 0 14px; border-radius: 11px; box-sizing: border-box; }

/* ---------- Account ---------- */
.jls-hacct { position: relative; }
html body .jls-hdr .jls-hacct__btn { gap: 8px; padding: 0 8px 0 4px; border-radius: 999px; color: var(--a-ink) !important; font-weight: 600; }
html body .jls-hdr .jls-hacct__btn:hover, .jls-hacct.is-open .jls-hacct__btn { background: var(--a-navy-50); }
.jls-hacct__avatar {
	display: inline-grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
	background: linear-gradient(140deg, #2C5697, #1F3361); color: #fff;
	font: 700 12.5px/1 var(--jls-font-heading); letter-spacing: .02em;
}
.jls-hacct__avatar--lg { width: 40px; height: 40px; font-size: 14px; }
.jls-hacct__chev { display: inline-flex; color: var(--a-muted); transition: transform .15s; }
.jls-hacct.is-open .jls-hacct__chev { transform: rotate(180deg); }

/* Shared dropdown panel */
.jls-hacct__menu, .jls-minicart {
	position: absolute; top: calc(100% + 10px); right: 0; z-index: 1000;
	background: #fff; border: 1px solid var(--a-line); border-radius: 16px;
	box-shadow: 0 18px 50px rgba(21, 32, 58, .18);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .16s, transform .16s, visibility .16s;
	text-align: left;
}
.jls-hacct__menu::before, .jls-minicart::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover bridge */
.jls-hacct.is-open .jls-hacct__menu, .jls-hacct:focus-within .jls-hacct__menu,
.jls-hcart.is-open .jls-minicart, .jls-hcart:focus-within .jls-minicart { opacity: 1; visibility: visible; transform: none; }

.jls-hacct__menu { width: 260px; padding: 8px; }
.jls-hacct__who { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--a-line-2); }
.jls-hacct__who strong { display: block; font-size: 14px; color: var(--a-ink); line-height: 1.3; }
.jls-hacct__who small { display: block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--a-muted); }
.jls-hacct__menu ul { list-style: none; margin: 0; padding: 0; }
.jls-hacct__menu li { margin: 0; }
html body .jls-hacct__menu a {
	display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px;
	color: var(--a-ink) !important; font-size: 14px; font-weight: 500; text-decoration: none !important;
}
html body .jls-hacct__menu a svg { color: var(--a-muted); }
html body .jls-hacct__menu a:hover { background: var(--a-soft); color: var(--a-navy) !important; }
html body .jls-hacct__menu a:hover svg { color: var(--a-navy); }
html body .jls-hacct__menu .jls-hacct__out { margin-top: 4px; border-top: 1px solid var(--a-line-2); border-radius: 0 0 10px 10px; padding-top: 11px; color: var(--a-muted) !important; }

/* ---------- Cart button ---------- */
.jls-hcart { position: relative; }
html body .jls-hdr .jls-cart-btn {
	position: relative; gap: 8px; min-height: 40px; padding: 0 16px 0 14px; box-sizing: border-box;
	border-radius: 11px; background: var(--a-navy) !important; color: #fff !important; font-weight: 600 !important;
	box-shadow: 0 4px 12px rgba(44, 86, 151, .22);
}
html body .jls-hdr .jls-cart-btn:hover, .jls-hcart.is-open .jls-cart-btn { background: var(--a-navy-600, #23477E) !important; }
html body .jls-hdr .jls-cart-count {
	display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box;
	border-radius: 999px; background: #fff; color: var(--a-navy);
	font: 700 12px/1 var(--jls-font, "Inter", sans-serif);
}
html body .jls-hdr .jls-cart-count.is-zero { background: rgba(255, 255, 255, .18); color: #fff; }

/* ---------- Mini cart ---------- */
.jls-minicart { width: 380px; }
.jls-minicart__body { padding: 16px; font-family: var(--jls-font, "Inter", sans-serif); }
.jls-minicart__head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 10px; }
.jls-minicart__head strong { font: 800 16px/1.2 var(--jls-font-heading); color: var(--a-ink); }
.jls-minicart__head span { font-size: 13px; color: var(--a-muted); }
.jls-minicart__items { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; }
.jls-minicart__items li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 2px; border-top: 1px solid var(--a-line-2); }
.jls-minicart__items li:first-child { border-top: 0; }
html body .jls-minicart__img { flex: 0 0 auto; display: block; width: 52px; height: 52px; padding: 4px; box-sizing: border-box; border: 1px solid var(--a-line); border-radius: 10px; background: #fff; overflow: hidden; }
html body .jls-minicart__img img { display: block; width: 100% !important; height: 100% !important; object-fit: contain; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; background: none !important; aspect-ratio: auto !important; }
.jls-minicart__info { flex: 1 1 auto; min-width: 0; }
html body .jls-minicart__info a {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--a-ink) !important; text-decoration: none !important;
}
html body .jls-minicart__info a:hover { color: var(--a-navy) !important; }
.jls-minicart__info small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--a-muted); }
.jls-minicart__info small .woocommerce-Price-amount { color: var(--a-ink); font-weight: 600; }
html body .jls-minicart a.jls-minicart__remove {
	flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 8px;
	color: #A7B0C4 !important; background: none !important; font-size: 0; text-decoration: none !important;
}
html body .jls-minicart a.jls-minicart__remove:hover { background: var(--a-red-50, #FDECEA) !important; color: var(--a-red, #B42318) !important; }
.jls-minicart__more { margin: 4px 2px 0; font-size: 12.5px; color: var(--a-muted); }

.jls-minicart__ship { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--a-soft); font-size: 13px; color: var(--a-ink); }
.jls-minicart__ship > span:first-child { display: flex; align-items: center; gap: 8px; }
.jls-minicart__ship svg { flex: 0 0 auto; color: var(--a-navy); }
.jls-minicart__ship.is-free { background: #EAF6EF; }
.jls-minicart__ship.is-free svg { color: #1B7F4B; }
.jls-minicart__ship .woocommerce-Price-amount { color: var(--a-navy); }
.jls-minicart__bar { display: block; height: 5px; margin-top: 8px; border-radius: 99px; background: #DCE3EF; overflow: hidden; }
.jls-minicart__bar i { display: block; height: 100%; border-radius: inherit; background: var(--a-navy); }
.jls-minicart__ship.is-free .jls-minicart__bar i { background: #1B7F4B; }

.jls-minicart__total { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 2px 12px; font-size: 14px; color: var(--a-muted); }
.jls-minicart__total strong { font: 800 18px/1 var(--jls-font-heading); color: var(--a-ink); }
.jls-minicart__total strong .woocommerce-Price-amount, .jls-minicart__total strong bdi { font: inherit; color: inherit; }
.jls-minicart__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jls-minicart__actions .jls-btn { justify-content: center; }

.jls-minicart__empty { padding: 14px 8px 6px; text-align: center; }
.jls-minicart__empty-ico { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 15px; background: var(--a-navy-50); color: var(--a-navy); }
.jls-minicart__empty strong { display: block; font: 800 16px/1.3 var(--jls-font-heading); color: var(--a-ink); }
.jls-minicart__empty p { margin: 4px 0 14px; font-size: 13px; color: var(--a-muted); }

/* WooCommerce fades the cart while removing */
.jls-minicart .blockUI.blockOverlay { border-radius: 16px; }

/* Dropdowns are desktop-only; phones go straight to the account/cart pages. */
@media (max-width: 959px), (hover: none) {
	.jls-hacct__menu, .jls-minicart { display: none !important; }
	.jls-hacct__chev { display: none; }
}

/* ---------- Tablet / phone sizing ---------- */
@media (max-width: 959px) {
	html body .jls-hdr { gap: 6px; }
	html body .jls-hdr .jls-hacct__btn { padding: 0 4px; }
}
@media (max-width: 640px) {
	html body .jls-hdr .jls-cart-btn { padding: 0 10px; gap: 6px; }
	html body .jls-hdr .jls-hdr__icon { width: 38px; height: 38px; }
	.jls-hacct__avatar { width: 30px; height: 30px; font-size: 12px; }
}

/* ==========================================================================
   Mobile drawer (Max Mega Menu panel, < 960px)
   ========================================================================== */
.jls-drawer-head, .jls-drawer-foot, .jls-drawer-backdrop { display: none; }

@media (max-width: 959px) {
	html.jls-drawer-open, html.jls-drawer-open body { overflow: hidden; }
	html.jls-drawer-open body { position: fixed; left: 0; right: 0; width: 100%; }

	.jls-drawer-backdrop {
		display: block; position: fixed; inset: 0; z-index: 100000;
		background: transparent; visibility: hidden;
	}
	html.jls-drawer-open .jls-drawer-backdrop { visibility: visible; }
	/* The sticky header is its own stacking context, so lift it above the
	   click-catcher; the dimming comes from the panel's shadow instead. */
	html.jls-drawer-open .site-header { z-index: 100001 !important; }

	/* The panel itself */
	html body #mega-menu-wrap-primary.jls-nav-open #mega-menu-primary {
		position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; z-index: 100001 !important;
		width: min(88vw, 380px) !important; max-width: none !important; margin: 0 !important;
		padding: 156px 0 76px !important; box-sizing: border-box !important;
		overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
		background: #fff !important; box-shadow: 0 0 0 100vmax rgba(21, 32, 58, .5), 18px 0 50px rgba(21, 32, 58, .25) !important;
		animation: jls-drawer-in .22s ease;
	}
	@keyframes jls-drawer-in { from { transform: translateX(-100%); } to { transform: none; } }

	html body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
		display: flex !important; align-items: center; justify-content: space-between;
		min-height: 52px; padding: 0 20px !important; border-bottom: 1px solid var(--a-line-2, #EEF1F5) !important;
		color: var(--a-ink) !important; font-family: var(--jls-font, "Inter", sans-serif) !important;
		font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
		line-height: 1.3 !important; background: none !important; text-decoration: none !important;
	}
	html body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link { color: var(--a-navy) !important; background: var(--a-soft) !important; }
	html body #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item ul.mega-sub-menu { background: var(--a-soft) !important; padding: 4px 0 8px !important; }
	html body #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item ul.mega-sub-menu a.mega-menu-link {
		min-height: 44px; display: flex !important; align-items: center;
		padding: 0 20px 0 32px !important; border: 0 !important;
		color: #3D4864 !important; font-size: 14px !important; font-weight: 500 !important; text-transform: none !important; background: none !important; text-decoration: none !important;
	}
	html body #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item ul.mega-sub-menu a.mega-menu-link:hover { color: var(--a-navy) !important; }

	/* Drawer header: title, close, quick links */
	.jls-drawer-head {
		display: block; position: fixed; top: 0; left: 0; z-index: 100002;
		width: min(88vw, 380px); box-sizing: border-box; padding: 14px 16px 14px 20px;
		background: radial-gradient(130% 140% at 100% 0%, #2C5697 0%, #1F3361 55%, #15203A 100%); color: #fff;
		transform: translateX(-105%); transition: transform .22s ease;
	}
	html.jls-drawer-open .jls-drawer-head { transform: none; }
	.jls-drawer-head__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
	.jls-drawer-head__top strong { font: 800 20px/1 var(--jls-font-heading); letter-spacing: var(--jls-heading-tracking, 0); }
	html body .jls-drawer-head__close {
		display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0 !important; border-radius: 12px;
		background: rgba(255, 255, 255, .12) !important; color: #fff !important; cursor: pointer;
	}
	.jls-drawer-head__quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
	html body .jls-drawer-head__quick a {
		display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 2px 8px; border-radius: 12px;
		background: rgba(255, 255, 255, .1); color: #fff !important; text-decoration: none !important;
		font: 600 11.5px/1.2 var(--jls-font, "Inter", sans-serif); text-align: center;
	}
	html body .jls-drawer-head__quick a:active { background: rgba(255, 255, 255, .2); }

	/* Drawer footer */
	.jls-drawer-foot {
		display: flex; gap: 8px; position: fixed; bottom: 0; left: 0; z-index: 100002;
		width: min(88vw, 380px); box-sizing: border-box; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: #fff; border-top: 1px solid var(--a-line);
		transform: translateX(-105%); transition: transform .22s ease;
	}
	html.jls-drawer-open .jls-drawer-foot { transform: none; }
	html body .jls-drawer-foot a {
		flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px;
		border: 1px solid var(--a-line); border-radius: 12px; color: var(--a-ink) !important;
		font: 600 13.5px/1 var(--jls-font, "Inter", sans-serif); text-decoration: none !important;
	}
	html body .jls-drawer-foot a[href*="wa.me"] { background: #E9F7EF; border-color: #CDEBD9; color: #157347 !important; }

	/* Hamburger */
	html body .jls-mobile-menu-btn { width: 40px; height: 40px; padding: 0 !important; border-radius: 11px; color: var(--a-ink) !important; }
	html body .jls-mobile-menu-btn[aria-expanded="true"] { background: var(--a-navy-50) !important; }
}

@media (prefers-reduced-motion: reduce) {
	.jls-hacct__menu, .jls-minicart, .jls-drawer-head, .jls-drawer-foot, .jls-drawer-backdrop { transition: none; }
	html body #mega-menu-wrap-primary.jls-nav-open #mega-menu-primary { animation: none; }
}