/* Anchor the dropdown to its own toggle instead of the page, and push it
   above neighboring header icons (cart/wishlist/nav) so it stops
   overlapping them. loaded after the theme's own CSS, !important is a
   deliberate, scoped override for this one known-broken component. */
.login-toggle.hbe-toggle {
	position: relative !important;
}

.login-toggle.hbe-toggle .login-box.box {
	position: absolute !important;
	top: 100% !important;
	right: 0 !important;
	left: auto !important;
	z-index: 99999 !important;
	margin-top: 8px !important;
}

/* The actual reported bug: the account name/email sits in `.info`, a flex
   item next to the avatar inside `.user` (display:flex). Flex items don't
   wrap text by default — they size to the content's intrinsic width unless
   given min-width:0 — so a long, unbroken email address pushes past the
   panel's edge instead of wrapping onto a second line. */
.login-box.box .user .info {
	min-width: 0 !important;
}

.login-box.box .user .info span {
	display: block;
	overflow-wrap: break-word !important;
	word-break: break-word !important;
}

/* The theme hardcodes width: 280px on .box (shared by .login-box, .cart-box,
   .language-box) with no matching width override in its own <=767px media
   query (only padding is reduced there) — so on narrow viewports the panel
   still tries to render at a fixed 280px, anchored right:0 to a toggle that
   sits well inside a header narrower than that, spilling past both screen
   edges. Fluid on purpose, not a fixed breakpoint: continuously re-fits to
   the current viewport width, so it self-corrects on resize and on
   orientation change (portrait <-> landscape) without separate rules per
   device size. Stays the theme's original 280px whenever there's room. */
.cart-box,
.language-box,
.login-box,
.box {
	width: min( 280px, calc( 100vw - 32px ) ) !important;
	max-width: calc( 100vw - 32px );
}

/* Mobile scroll-stutter root cause, confirmed live via a debug overlay
   (getComputedStyle on the real device, not guessed): the theme groups
   `.my-account-nav-wrapper` into the same "Header cart" selector as
   `.mini-cart .cart-box` at a <=1023px breakpoint —
   `.mini-cart .cart-box, .my-account-nav-wrapper { position:fixed; ...;
   min-height:100%; }` — almost certainly a copy/paste grouping mistake,
   since the account nav wrapper has its own separate, correct
   `.my-account-nav-wrapper { height:0; overflow:hidden; }` collapsed
   state elsewhere for when it's closed. `min-height` always wins over a
   smaller `height`, so that stray `min-height:100%` (100% of a `position:
   fixed` element's containing block = 100vh) forces this wrapper to be a
   full-viewport-tall, position:fixed box on every mobile page, at all
   times, whether or not the panel is actually open (`.active`) — recomputed
   on every scroll frame as the browser's address bar collapses/expands,
   which is exactly what was causing the stutter on every mobile browser,
   not just Safari. Its `.active` (genuinely open) state sets its own
   real `height:100vh` already (theme style.css ~line 2369) and is
   untouched by this rule via :not(.active). */
.my-account-nav-wrapper:not(.active) {
	min-height: 0 !important;
	height: 0 !important;
}

/* The actual, confirmed second scroll container (found via a live
   getComputedStyle scan on a real device — html.scrollHeight=4118 vs
   #wrap acting as its own scrollable box: clientHeight=956 (exactly one
   viewport), scrollHeight=4110). Root cause: the theme's `#wrap { height:
   100%; overflow-x: hidden; }` sets only overflow-x — per the CSS
   overflow spec, when one axis is `hidden` and the other would otherwise
   be `visible`, the browser is REQUIRED to silently promote the other
   axis to `auto`. So `#wrap` gets an `overflow-y: auto` nobody wrote,
   and because `height:100%` caps its own box to exactly one viewport tall
   while it contains virtually the entire page, it becomes a second,
   independently-scrollable region duplicating the real page scroll —
   exactly the "two scrollbars, big one takes over" behavior reported.
   Fix: stop capping #wrap to one viewport at all. Once it's free to grow
   to its actual content height (the original, correct behavior for a
   plain content wrapper), there is nothing left inside it to overflow,
   so the overflow-y:auto promotion becomes harmless — no second scroll
   context can form regardless of what the browser computes it to.

   min-height (not height:auto) deliberately: the theme likely intended
   #wrap to fill at least one viewport on short pages (a sticky-footer
   technique, matching how body/html correctly use min-height:100%
   elsewhere in this same stylesheet) — #wrap{height:100%} looks like the
   one inconsistent copy/paste that should have matched that pattern.
   min-height keeps that short-page behavior (never caps the box, only
   sets a floor) while letting long pages grow past one viewport freely,
   which is what actually stops the overflow from ever triggering. */
#wrap {
	height: auto !important;
	min-height: 100% !important;
	overflow-y: hidden !important;
}