/**
 * Mobile off-canvas navigation - visual refinement only.
 *
 * VapeMeet used only as a visual/layout reference (proportions/rhythm) -
 * no VapeMeet markup, copy or assets are used. Menu content itself
 * (HOME, ON SALE, VAPES + its submenu, SUPPORT + its submenu, BRANDS,
 * Login/Register) is completely unchanged - this file only restyles the
 * existing drawer.
 *
 * Read-only investigation before writing this file confirmed the
 * following already work correctly and are NOT touched by this CSS:
 *  - Open/close triggers, outside-click close, hash-link close
 *    (assets/js/custom.js, vapeoza.navigation.init - toggles .toggled on
 *    .bwp-offcanvas-menu, .open on .menu-toggle, .mobile-menu-visible on
 *    <body>).
 *  - The dark translucent overlay already exists:
 *    body.mobile-menu-visible:before{background-color:rgba(0,0,0,.5);
 *    position:fixed;inset:0;z-index:10} (template.css ~12696).
 *  - Background-scroll lock and its restore-on-close already exist:
 *    body.mobile-menu-visible{overflow-y:hidden} (same block), removed
 *    automatically when the class is removed on close.
 * None of the above required any change, so none of it was touched -
 * this avoids any risk of reintroducing a historical touch/scroll
 * regression.
 *
 * HOTFIX 1 (external browser validation found 4 problems with the first
 * pass):
 *  1. Drawer was only ~360px at a 477px viewport (max-width:360px was
 *     tighter than 90% of most real phone widths, so it was always the
 *     binding constraint) - now max-width:430px, and width switched from
 *     90% to 90vw to remove any dependency on the fixed element's
 *     containing block.
 *  2./3. VAPES and SUPPORT could both end up expanded, rendered BESIDE
 *     their parent row instead of below it. Root cause: making
 *     li.level-0 a flex row (for the chevron column) also turned the
 *     <ul class="sub-menu"> - a third, later DOM sibling of <a> and
 *     .dropdown-symbol inside the same <li> - into a flex item in that
 *     same row once .sub-menu.toggled{display:block!important}
 *     (template.css ~12654) made it visible, since flex's default
 *     flex-direction is row. Fixed by adding flex-wrap:wrap to the <li>
 *     and giving <a> + .dropdown-symbol flex-basis values that sum to
 *     exactly 100% of the row, so .sub-menu (flex-basis:100%) has no
 *     room left and wraps onto its own full-width line below - this
 *     also fixes symptom 4 (chevron drifting to the middle), which was
 *     a side effect of the same bug once three flex items shared one
 *     row.
 *     Mutual exclusion (only one of VAPES/SUPPORT open at a time) did
 *     NOT already exist in custom.js as the first pass assumed -
 *     submenuToggleHandler only toggles the clicked item's own submenu,
 *     with no logic to close others. Added in a new, separate child-
 *     theme script (mobile-offcanvas.js) rather than editing the parent
 *     theme's custom.js.
 *
 * Per owner decision, this pass does NOT add a logo/account-icon/
 * cart-icon row inside the drawer (none exists today; those are
 * separate JS/AJAX-wired components in the collapsed, non-sticky mobile
 * top bar). Only the existing close button is restyled to look
 * "boxed". The existing Login/Register row (a real, functional link -
 * not rebuilt) is restyled to match the new row rhythm.
 */

/* Drawer: 90vw with a ~430px max-width (was width:90%/max-width:360px -
   360px was tighter than 90% of most real phone widths so it was always
   the binding constraint; 90vw avoids any ambiguity about which
   containing block a fixed-position element's % width resolves against).
   Position/transform/overlay/scroll-lock are unchanged. */
.bwp-offcanvas-menu {
	width: 90vw;
	max-width: 430px;
}

/* Close button: same 30x30 box/position, now visibly "boxed". */
.bwp-offcanvas-menu .mobile-menu-close {
	background-color: #F6F6F6;
	border-radius: 8px;
}

/* Top-level nav rows: full-width horizontal rows, ~54px tall, with a
   #E5E5E5 divider between rows, text left-aligned with consistent
   padding. The <a> and (for VAPES/SUPPORT) the .dropdown-symbol become
   flex siblings inside the <li> so the chevron sits in its own
   right-hand column instead of being nudged left:10px over the link
   text. HOME/ON SALE/BRANDS have no .dropdown-symbol element at all
   (confirmed in the live markup), so they render as plain full-width
   rows with no chevron - nothing to hide, nothing added. */
/* HOTFIX 2 (mobile drawer): the <li> is now the ONLY element allowed to
   render the horizontal row divider - the single :last-child rule was
   removed (it duplicated the base rule's own value on the same element,
   which is harmless in isolation but is exactly the kind of redundancy
   this hotfix is meant to eliminate) and the <a> below now explicitly
   resets border/shadow/underline so nothing on the link itself can ever
   draw a second, text-width-sized line under items like BRANDS that
   have no chevron and no submenu. */
.bwp-offcanvas-menu .bwp-dropdown .bwp-dropdown-ul > li.level-0 {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
	border-bottom: 1px solid #E5E5E5;
}
/* <a> + .dropdown-symbol flex-basis values sum to exactly 100%, filling
   the row completely so .sub-menu (100% wide) has no room left in it and
   wraps to its own line below - see HOTFIX 1 note above. */
.bwp-offcanvas-menu .bwp-dropdown .bwp-dropdown-ul > li.level-0 > a {
	display: flex;
	align-items: center;
	flex: 0 1 100%;
	min-height: 54px;
	padding: 0 16px;
	font-size: var(--font-size-body, 14px);
	font-weight: 500;
	text-align: left;
	text-decoration: none !important;
	box-sizing: border-box;
	border: none !important;
	box-shadow: none !important;
	background-image: none !important;
}
.bwp-offcanvas-menu .bwp-dropdown .bwp-dropdown-ul > li.level-0 > a:before,
.bwp-offcanvas-menu .bwp-dropdown .bwp-dropdown-ul > li.level-0 > a:after {
	display: none !important;
	content: none !important;
}
.bwp-offcanvas-menu .bwp-dropdown .bwp-dropdown-ul > li.level-0.menu-item-has-children > a {
	flex-basis: calc(100% - 44px);
	width: auto;
}
.bwp-offcanvas-menu .bwp-dropdown .bwp-dropdown-ul > li.level-0 .dropdown-symbol {
	position: static;
	left: auto;
	flex: 0 0 44px;
	width: 44px;
	min-height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-left: 1px solid #E5E5E5;
	font-size: 16px;
	box-sizing: border-box;
}

/* Submenu: always a separate full-width block below the parent row
   (never beside it - flex-basis:100% has no room left in the parent
   row above, so it wraps). Collapsed by default (the existing
   .sub-menu{display:none} / .sub-menu.toggled{display:block!important}
   rules in template.css are unchanged); links get their own shorter
   row height, a light divider and left indentation. */
.bwp-offcanvas-menu .bwp-dropdown .sub-menu {
	flex: 0 0 100%;
	width: 100%;
	box-sizing: border-box;
}
.bwp-offcanvas-menu .bwp-dropdown .sub-menu li {
	border-bottom: 1px solid #E5E5E5;
}
.bwp-offcanvas-menu .bwp-dropdown .sub-menu li:last-child {
	border-bottom: none;
}
.bwp-offcanvas-menu .bwp-dropdown .sub-menu li > a {
	display: flex;
	align-items: center;
	min-height: 46px;
	padding: 0 16px 0 32px;
	font-size: calc(var(--font-size-body, 14px) - 1px);
	font-weight: 400;
}

/* Account row (Login / Register): match the same row rhythm as the menu
   list above it. Icon/text/link/href are unchanged - visual only. */
.bwp-offcanvas-menu .bwp-component-account-icon-text .login-side {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 54px;
	padding: 0 16px;
	border-top: 1px solid #E5E5E5;
	font-size: var(--font-size-body, 14px);
	font-weight: 500;
}

/* Mobile sticky header (owner-approved, frozen-component change explicitly
   requested by the owner). Global, unconditional enqueue,
   mobile/tablet (<=767px) ONLY - header.bwp-header.bwp-mobile is a
   genuinely separate DOM element from header.bwp-header.bwp-desktop (both
   always rendered by the parent theme's own header_front_output() device
   loop, shown/hidden per viewport by its own responsive CSS), so desktop
   is structurally unaffected regardless of viewport width.

   Deliberately NOT a reactivation of the theme's own native sticky-header
   mechanism (enable_sticky_header theme_mod + custom.js's
   vapeoza.stickyHeader module): that mechanism is wired through one
   GLOBAL setting read once per device in the parent theme's PHP loop, so
   enabling it would apply to the desktop header too, with no per-device
   filter available to prevent that. This rule reuses only that
   mechanism's own proven values for visual consistency - the exact
   z-index (9, so the mobile offcanvas menu above, z-index:10, still
   opens correctly over this header) and the exact shadow value
   (0 1px 3px rgba(0,0,0,.1), template.css:359) - not its machinery.

   position:sticky, not fixed: confirmed no ancestor between <body> and
   this header (body, #page/.hfeed, .page-wrapper) sets overflow or
   transform anywhere in the parent or child theme CSS, so sticky works
   natively - no JS needed, and unlike fixed it keeps the header in
   normal document flow, so there is no layout jump and no compensating
   top-padding is needed anywhere on the page. */
@media (max-width: 767px) {
	header.bwp-header.bwp-mobile {
		position: sticky;
		top: 0;
		z-index: 9;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}
}