/* C101 Header Overflow Fix 1.0.1
 * Keeps the Theme Builder header's dropdowns inside the viewport so the page
 * never scrolls sideways. Positioning is done by assets/c101-header-overflow-fix.js;
 * this file holds the width cap, the phone header fit and a header-only safety net.
 */

/* 1. Desktop dropdowns can never be wider than the viewport. */
.et_pb_menu_0_tb_header .et-menu-nav li ul.sub-menu {
	max-width: calc(100vw - 16px);
	box-sizing: border-box;
	/* Divi animates "all"; keep the fade but never animate position, so the
	 * script's measurements are exact and menus don't slide when re-placed. */
	transition-property: opacity, visibility, transform !important;
}

/* 2. Keyboard users: open a dropdown while a link inside it has keyboard focus
 *    (Divi only opens on hover). :focus-visible keeps mouse clicks unaffected. */
.et_pb_menu_0_tb_header .et-menu-nav li:has(:focus-visible) > ul.sub-menu {
	visibility: visible;
	opacity: 1;
}

/* 3. Safety net only (the JS is the real fix): if the script has not run yet,
 *    a closed dropdown laid out past the edge cannot widen the page.
 *    clip (not hidden) creates no scroll box and leaves vertical overflow visible. */
.et-l--header {
	overflow-x: clip;
}

/* 4. Very narrow phones (< 360px): the logo + account icon + cart + hamburger
 *    row was 17px wider than a 320px screen. Trim the row's side padding and let
 *    the logo shrink a little instead. Phone menu behaviour is unchanged. */
@media (max-width: 359px) {
	/* 1.0.1: selectors out-rank the Theme Builder's later
	 * ".et_pb_section_0_tb_header .et_pb_column_3_tb_header{flex:0 0 auto!important}" and
	 * ".et_pb_row_1_tb_header.et_pb_row{padding-left/right:30px!important}". */
	html body .et-l--header .et_pb_section_0_tb_header .et_pb_row_1_tb_header.et_pb_row {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}
	html body .et-l--header .et_pb_section_0_tb_header .et_pb_column_3_tb_header {
		flex: 0 1 auto !important;
		flex-shrink: 1 !important;
		min-width: 0 !important;
		max-width: 160px !important; /* never larger than its normal 160px */
	}
	html body .et-l--header .et_pb_column_3_tb_header .et_pb_image_0_tb_header,
	html body .et-l--header .et_pb_column_3_tb_header .et_pb_image_wrap,
	html body .et-l--header .et_pb_column_3_tb_header img {
		max-width: 100% !important;
		height: auto;
	}
}