/* ============================================================================
   LS FABRICATION — HEADER

   Ported from the approved cktruckparts.com build. The Shop mega panel opens
   through :has() and :focus-within; js/header.js carries only the mobile
   drawer, the drawer's Shop accordion, and the touch fallback.
   ========================================================================= */

.et-l--header .ls-header { position: sticky; top: 0; z-index: 500; background-color: var(--ls-bg); border-bottom: 1px solid var(--ls-hairline-faint); padding: 0; }
.admin-bar .et-l--header .ls-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .et-l--header .ls-header { top: 46px; } }
.et-l--header .ls-header .ls-header__bar { display: flex; align-items: center; gap: var(--ls-space-5); width: 100%; max-width: none; padding: 18px var(--ls-space-6); margin: 0; }
.et-l--header .ls-header .ls-header__bar > .et_pb_column { width: auto; margin: 0; display: flex; align-items: center; }
.et-l--header .ls-header .ls-header__bar .et_pb_module { margin-bottom: 0; }
.et-l--header .ls-header .ls-header__bar > .ls-col-search { flex: 1 1 auto; justify-content: flex-end; }
.et-l--header .ls-header .ls-header__bar > .ls-col-nav { flex: 0 0 auto; }
.et-l--header .ls-header__logo { flex: 0 0 auto; line-height: 0; }
.et-l--header .ls-header__logo img { display: block; max-height: 38px; width: auto; }
.et-l--header .ls-header__nav { flex: 0 0 auto; }
.et-l--header .ls-header__nav .et_pb_menu__wrap { justify-content: flex-start; }
.et-l--header .ls-header__nav .et_pb_menu__menu { display: flex !important; }
.et-l--header .ls-header .et_mobile_nav_menu { display: none !important; }
.et-l--header .ls-drawer__nav .et_pb_menu__menu { display: block !important; }
.et-l--header .ls-drawer__nav .et_pb_menu__wrap, .et-l--header .ls-drawer__nav .et_pb_menu__menu, .et-l--header .ls-drawer__nav .et-menu-nav, .et-l--header .ls-drawer__nav .et-menu { width: 100%; justify-content: flex-start; }
.et-l--header .ls-header__nav .et-menu { display: flex; align-items: center; gap: var(--ls-space-1); margin: 0; padding: 0; }
.et-l--header .ls-header__nav .et-menu > li { margin: 0; padding: 0; position: relative; align-self: stretch; display: flex; align-items: center; }
.et-l--header .ls-header__nav .et-menu > li > a { display: flex; align-items: center; position: relative; padding: 9px 13px; border-radius: var(--ls-radius-md); font-family: var(--ls-font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: 0.045em; text-transform: uppercase; line-height: 1; color: var(--ls-text); opacity: 1; transition: color var(--ls-transition), background-color var(--ls-transition); }
.et-l--header .ls-header__nav .et-menu > li > a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; background-color: var(--ls-red); transform: scaleX(0); transform-origin: left center; transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); }
.et-l--header .ls-header__nav .et-menu > li > a:hover::after, .et-l--header .ls-header__nav .et-menu > li:focus-within > a::after, .et-l--header .ls-header__nav .et-menu > li.current-menu-item > a::after { transform: scaleX(1); }
.et-l--header .ls-has-mega > a::before { content: ""; order: 2; width: 8px; height: 8px; margin-left: var(--ls-space-2); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); opacity: 0.75; transition: transform 200ms ease; }
.et-l--header .ls-header:has(.ls-header__nav .ls-has-mega:hover) .ls-header__nav .ls-has-mega > a::before, .et-l--header .ls-header:has(.ls-header__nav .ls-has-mega:focus-within) .ls-header__nav .ls-has-mega > a::before { transform: rotate(-135deg) translate(-3px, -3px); }
.et-l--header .ls-header__nav .et-menu > li.ls-cta > a { background-color: var(--ls-purple); padding: 9px 17px; }
.et-l--header .ls-header__nav .et-menu > li.ls-cta > a:hover { background-color: var(--ls-purple-hover); }
.et-l--header .ls-header__nav .et-menu > li.ls-cta > a::after { display: none; }
.et-l--header .ls-header__nav .et-menu > li.ls-mobile-only { display: none; }
.et-l--header .ls-header .ls-mega { position: absolute; top: 100%; left: var(--ls-space-6); width: calc(100% - (var(--ls-space-6) * 2)); max-width: 880px; margin: 0; padding: 0; display: flex; flex-wrap: wrap; background-color: var(--ls-surface-1); border: 1px solid var(--ls-hairline-faint); border-top: 3px solid var(--ls-red); border-radius: 0 0 var(--ls-radius-xl) var(--ls-radius-xl); box-shadow: var(--ls-shadow-drop); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px); transition: opacity 180ms ease, transform 220ms cubic-bezier(0.4, 0, 0.2, 1), visibility 180ms; z-index: 499; }
/* Bridges the dead zone between the bottom of the Shop link and the top of the panel. Without it the pointer leaves :hover on the way down and the panel closes before you reach it. */
.et-l--header .ls-header .ls-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }
.et-l--header .ls-header:has(.ls-header__nav .ls-has-mega:hover) .ls-mega, .et-l--header .ls-header:has(.ls-header__nav .ls-has-mega:focus-within) .ls-mega, .et-l--header .ls-header .ls-mega:hover, .et-l--header .ls-header .ls-mega:focus-within, .et-l--header .ls-header .ls-mega.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.et-l--header .ls-mega > .et_pb_column { width: auto; margin: 0; }
.et-l--header .ls-mega .ls-mega__col { flex: 1 1 0; min-width: 0; padding: var(--ls-space-5) var(--ls-space-5) var(--ls-space-4); border-right: 1px solid var(--ls-hairline-faint); }
.et-l--header .ls-mega .ls-mega__col:first-child { flex: 1.05 1 0; }
.et-l--header .ls-mega .ls-mega__col:nth-child(3) { border-right: 0; }
.et-l--header .ls-mega .ls-mega__head { margin-bottom: var(--ls-space-3); }
.et-l--header .ls-mega .ls-mega__head h4 { font-family: var(--ls-font-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ls-text-soft); margin: 0; padding-bottom: 9px; border-bottom: 1px solid var(--ls-hairline-faint); }
.et-l--header .ls-mega .et_pb_blurb { margin-bottom: 2px; border-radius: var(--ls-radius-lg); transition: background-color 150ms ease, transform 150ms ease; }
.et-l--header .ls-mega .et_pb_blurb:hover { background-color: var(--ls-surface-raised); transform: translateX(3px); }
.et-l--header .ls-mega .et_pb_blurb_content { display: flex; align-items: center; gap: var(--ls-space-3); max-width: none; padding: 7px var(--ls-space-2); text-align: left; }
.et-l--header .ls-mega .et_pb_main_blurb_image { flex: 0 0 auto; width: 46px; margin: 0; vertical-align: top; }
.et-l--header .ls-mega .et_pb_main_blurb_image img { display: block; width: 46px; height: 34px; object-fit: cover; border-radius: var(--ls-radius-sm); border: 1px solid var(--ls-hairline-faint); transition: border-color 150ms ease; }
.et-l--header .ls-mega .et_pb_blurb:hover .et_pb_main_blurb_image img { border-color: var(--ls-red); }
.et-l--header .ls-mega .et_pb_blurb_container { flex: 1 1 auto; min-width: 0; }
.et-l--header .ls-mega .et_pb_module_header, .et-l--header .ls-mega .et_pb_module_header a { font-family: var(--ls-font-display); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; line-height: 1.15; color: var(--ls-text); padding: 0; }
.et-l--header .ls-mega .et_pb_blurb_description p { font-family: var(--ls-font-body); font-size: 0.71875rem; line-height: 1.2; color: var(--ls-text-soft); margin: 2px 0 0; }
.et-l--header .ls-mega .ls-mega__foot { flex: 0 0 100%; display: flex; align-items: center; gap: var(--ls-space-4); padding: var(--ls-space-4) var(--ls-space-5); border-top: 1px solid var(--ls-hairline-faint); background-color: var(--ls-surface-3); border-radius: 0 0 11px 11px; }
.et-l--header .ls-mega .ls-mega__foot .et_pb_button_module_wrapper { flex: 1 1 auto; margin: 0; }
.et-l--header .ls-mega .ls-mega__foot .et_pb_button { width: 100%; }
.et-l--header .ls-mega .ls-mega__policy { flex: 0 0 auto; margin: 0; }
.et-l--header .ls-mega .ls-mega__policy a { font-size: var(--ls-small); color: var(--ls-text-soft); border-bottom: 1px solid transparent; transition: color var(--ls-transition), border-color var(--ls-transition); }
.et-l--header .ls-mega .ls-mega__policy a:hover { color: var(--ls-text); border-bottom-color: var(--ls-red); }
.et-l--header .ls-header__search { flex: 0 1 340px; min-width: 150px; width: 100%; max-width: 340px; }
.et-l--header .ls-header__search .ls-search { position: relative; display: block; }
.et-l--header .ls-header__search input, .et-l--header .ls-header__search .product-search-field { width: 100%; min-height: var(--ls-control-h-sm); margin: 0; padding: 0 var(--ls-control-pad-x) 0 36px; background-color: var(--ls-surface-2); border: 1px solid var(--ls-hairline-input); border-radius: var(--ls-radius-md); color: var(--ls-text); font-family: var(--ls-font-body); font-size: 0.84375rem; transition: border-color var(--ls-transition), background-color var(--ls-transition); }
.et-l--header .ls-header__search input::placeholder, .et-l--header .ls-header__search .product-search-field::placeholder { color: var(--ls-text-ghost); }
.et-l--header .ls-header__search input:focus, .et-l--header .ls-header__search .product-search-field:focus { outline: none; border-color: var(--ls-red); box-shadow: var(--ls-focus-ring); }
.et-l--header .ls-header__search .ls-search__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ls-text-ghost); pointer-events: none; }
.et-l--header .ls-header__util { flex: 0 0 auto; }
.et-l--header .ls-header__util .ls-util { display: flex; align-items: center; gap: var(--ls-space-1); padding-left: var(--ls-space-2); margin-left: var(--ls-space-1); border-left: 1px solid var(--ls-hairline-faint); }
.et-l--header .ls-header__icon { position: relative; display: grid; place-items: center; width: var(--ls-control-h-sm); height: var(--ls-control-h-sm); border-radius: var(--ls-radius-md); color: var(--ls-text); transition: background-color var(--ls-transition); }
.et-l--header .ls-header__icon:hover { background-color: var(--ls-surface-2); }
.et-l--header .ls-header__icon svg { width: 19px; height: 19px; }
.et-l--header .ls-header__burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: var(--ls-control-h-sm); height: var(--ls-control-h-sm); border: 0; padding: 0; background: none; border-radius: var(--ls-radius-md); cursor: pointer; }
.et-l--header .ls-header__burger span { display: block; width: 19px; height: 2px; margin: 0; border-radius: 2px; background-color: var(--ls-text); }
.et-l--header .ls-scrim { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; transition: opacity 250ms ease, visibility 250ms; z-index: 900; }
.et-l--header .ls-header .ls-drawer { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: 82%; max-width: 320px; margin: 0; padding: 0; background-color: var(--ls-surface-1); border-left: 1px solid var(--ls-hairline-faint); transform: translateX(102%); transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); z-index: 901; display: flex; flex-direction: column; }
.et-l--header .ls-header .ls-drawer > .et_pb_column { display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0; }
.et-l--header .ls-header .ls-drawer .et_pb_module { margin-bottom: 0; }
body.ls-drawer-open .et-l--header .ls-scrim { opacity: 1; visibility: visible; }
body.ls-drawer-open .et-l--header .ls-header .ls-drawer { transform: translateX(0); }
body.ls-drawer-open { overflow: hidden; }
.et-l--header .ls-drawer__top .ls-drawer__topbar { display: flex; align-items: center; justify-content: space-between; padding: var(--ls-space-3) var(--ls-space-4); border-bottom: 1px solid var(--ls-hairline-faint); }
.et-l--header .ls-drawer__top span { font-family: var(--ls-font-display); font-weight: 600; font-size: var(--ls-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ls-text-soft); }
.et-l--header .ls-drawer__close { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--ls-radius-md); background-color: var(--ls-surface-2); color: var(--ls-text); cursor: pointer; }
.et-l--header .ls-drawer__close svg { width: 14px; height: 14px; }
.et-l--header .ls-drawer__nav { flex: 0 0 auto; }
.et-l--header .ls-drawer__sub { flex: 0 0 auto; overflow-y: auto; }
.et-l--header .ls-drawer__foot { margin-top: auto; padding: var(--ls-space-3) var(--ls-space-4); border-top: 1px solid var(--ls-hairline-faint); }
.et-l--header .ls-drawer__foot .ls-drawer__row { display: flex; gap: var(--ls-space-2); margin-top: var(--ls-space-2); }
.et-l--header .ls-drawer__foot .ls-drawer__row a { flex: 1; min-height: var(--ls-btn-h-sm); display: flex; align-items: center; justify-content: center; border: 1px solid var(--ls-hairline); border-radius: var(--ls-radius-md); font-family: var(--ls-font-display); font-weight: 600; font-size: var(--ls-btn-font-sm); letter-spacing: var(--ls-tracking-button); text-transform: uppercase; color: var(--ls-text); }
.et-l--header .ls-drawer__foot .ls-drawer__row a:hover { border-color: var(--ls-red); }
.et-l--header .ls-drawer__foot .ls-drawer__cta { display: flex; align-items: center; justify-content: center; min-height: var(--ls-btn-h-sm); background-color: var(--ls-red); color: var(--ls-text); border-radius: var(--ls-radius-md); font-family: var(--ls-font-display); font-weight: 700; font-size: var(--ls-btn-font-sm); letter-spacing: var(--ls-tracking-button); text-transform: uppercase; }
.et-l--header .ls-drawer__foot .ls-drawer__cta:hover { background-color: var(--ls-bg); box-shadow: inset 0 0 0 1px var(--ls-red); }
.et-l--header .ls-drawer__nav .et-menu { display: flex; flex-direction: column; gap: 0; margin: 0; padding: var(--ls-space-1) 0; }
.et-l--header .ls-drawer__nav .et-menu > li { width: 100%; margin: 0; }
.et-l--header .ls-drawer__nav .et-menu > li > a { display: flex; align-items: center; width: 100%; padding: 13px var(--ls-space-4); border-radius: 0; border-bottom: 1px solid var(--ls-hairline-faint); font-family: var(--ls-font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.045em; text-transform: uppercase; line-height: 1; color: var(--ls-text); }
.et-l--header .ls-drawer__nav .et-menu > li > a::after { display: none; }
.et-l--header .ls-drawer__nav .et-menu > li > a:hover { background-color: var(--ls-surface-2); }
.et-l--header .ls-drawer__nav .et-menu > li.ls-cta > a { background-color: transparent; padding: 13px var(--ls-space-4); }
.et-l--header .ls-drawer__nav .et-menu > li.ls-mobile-only { display: block; }
.et-l--header .ls-drawer__nav .ls-has-mega > a::before { margin-left: auto; }
.et-l--header .ls-drawer__nav .ls-has-mega.is-open > a::before { transform: rotate(-135deg) translate(-3px, -3px); }
.et-l--header .ls-drawer .ls-drawer__sub .ls-sub { max-height: 0; overflow: hidden; background-color: var(--ls-bg); transition: max-height 300ms ease; }
.et-l--header .ls-drawer.is-shop-open .ls-drawer__sub .ls-sub, .et-l--header .ls-drawer:has(.ls-has-mega.is-open) .ls-drawer__sub .ls-sub { max-height: 1400px; }
.et-l--header .ls-drawer__sub .ls-sub__group { font-family: var(--ls-font-display); font-weight: 600; font-size: 0.59375rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ls-text-soft); padding: var(--ls-space-3) var(--ls-space-4) var(--ls-space-1); margin: 0; }
.et-l--header .ls-drawer__sub .ls-sub a { display: flex; align-items: center; gap: var(--ls-space-3); padding: var(--ls-space-2) var(--ls-space-4); font-size: var(--ls-small); color: var(--ls-text-muted); }
.et-l--header .ls-drawer__sub .ls-sub a img { flex: 0 0 auto; width: 52px; height: 38px; object-fit: cover; border-radius: var(--ls-radius-sm); border: 1px solid var(--ls-hairline-faint); transition: border-color 150ms ease; }
.et-l--header .ls-drawer__sub .ls-sub a:hover img, .et-l--header .ls-drawer__sub .ls-sub a:active img { border-color: var(--ls-red); }
.et-l--header .ls-drawer__sub .ls-sub__name { font-family: var(--ls-font-display); font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.02em; line-height: 1.15; color: var(--ls-text); min-width: 0; }
.et-l--header .ls-drawer__sub .ls-sub a:hover { color: var(--ls-text); background-color: var(--ls-surface-2); }
@media (min-width: 981px) { .et-l--header .ls-header .ls-drawer, .et-l--header .ls-scrim { display: none; } }
@media (max-width: 980px) {
.et-l--header .ls-header .ls-header__bar { flex-wrap: wrap; gap: var(--ls-space-3); padding: var(--ls-space-3) var(--ls-space-4); }
.et-l--header .ls-header .ls-header__bar > .et_pb_column { width: auto !important; margin: 0 !important; }
.et-l--header .ls-header .ls-header__bar > .ls-col-nav { display: none; }
.et-l--header .ls-header .ls-mega { display: none; }
.et-l--header .ls-header__burger { display: flex; }
.et-l--header .ls-header__logo img { max-height: 30px; }
.et-l--header .ls-header .ls-header__bar > .ls-col-search { order: 10; flex: 1 1 100%; justify-content: stretch; padding-bottom: var(--ls-space-1); }
.et-l--header .ls-header__search { flex: 1 1 auto; max-width: none; }
.et-l--header .ls-header .ls-header__bar > .ls-col-util { margin-left: auto !important; }
}
@media (max-width: 560px) {
.et-l--header .ls-header__util .ls-util { padding-left: var(--ls-space-1); margin-left: 0; }
.et-l--header .ls-header__logo img { max-height: 26px; }
}
.et-l--header .ls-header a:focus-visible, .et-l--header .ls-header button:focus-visible, .et-l--header .ls-drawer a:focus-visible, .et-l--header .ls-drawer button:focus-visible, .et-l--header .ls-mega a:focus-visible { outline: 2px solid var(--ls-red); outline-offset: 3px; border-radius: var(--ls-radius-sm); }
@media (prefers-reduced-motion: reduce) { .et-l--header .ls-header *, .et-l--header .ls-mega, .et-l--header .ls-header .ls-drawer, .et-l--header .ls-scrim { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }

/* ============================================================================
   OVERRIDES FOR lsfab.com's ADDITIONAL CSS

   Appearance > Additional CSS on live still carries the old site-wide rules —
   `.product-search-field { background-color: white !important; height: 40px }`
   plus a 10px left padding and a 4px radius. Those beat this sheet on
   !important alone, so the header's own field restates them at a higher
   specificity. Delete this block once Additional CSS is absorbed into the
   theme the way it was on staging.
   ========================================================================= */
.et-l--header .ls-header__search .ls-search input.product-search-field,
.et-l--header .ls-header__search .ls-search input[type="text"],
.et-l--header .ls-header__search .ls-search input {
	height: auto !important;
	min-height: var(--ls-control-h-sm);
	padding: 0 var(--ls-control-pad-x) 0 36px !important;
	background-color: var(--ls-surface-2) !important;
	background-image: none !important;
	border: 1px solid var(--ls-hairline-input) !important;
	border-radius: var(--ls-radius-md) !important;
	color: var(--ls-text) !important;
	font-family: var(--ls-font-body) !important;
	font-size: 0.84375rem !important;
	box-shadow: none !important;
}

.et-l--header .ls-header__search .ls-search input:focus {
	border-color: var(--ls-red) !important;
	box-shadow: var(--ls-focus-ring) !important;
	outline: none !important;
}


/* ============================================================================
   DIVI SPECIFICITY LAYER

   On CPT and archive pages Divi loads style-static-cpt.min.css, which carries
   `.et-db #et-boc .et-l .et_pb_section { position: relative }` — one ID plus
   three classes, so it outranks every `.et-l--header ...` rule above and the
   header rendered unstyled there: mega panel in the flow, drawer visible,
   sticky lost, mobile-only items showing on desktop.

   Every rule above is therefore restated here at
   `body.et-db #et-boc .et-l--header.et-l--header ...` — same ID count, one
   more class — so the header wins wherever that sheet loads. The plain rules
   above still stand alone on pages that do not load it. This half is
   generated from the first: regenerate it rather than editing it by hand.
   ========================================================================= */

body.et-db #et-boc .et-l--header.et-l--header .ls-header { position: sticky; top: 0; z-index: 500; background-color: var(--ls-bg); border-bottom: 1px solid var(--ls-hairline-faint); padding: 0; }
body.admin-bar.et-db #et-boc .et-l--header.et-l--header .ls-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar.et-db #et-boc .et-l--header.et-l--header .ls-header { top: 46px; }
}
body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-header__bar { display: flex; align-items: center; gap: var(--ls-space-5); width: 100%; max-width: none; padding: 18px var(--ls-space-6); margin: 0; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-header__bar > .et_pb_column { width: auto; margin: 0; display: flex; align-items: center; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-header__bar .et_pb_module { margin-bottom: 0; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-header__bar > .ls-col-search { flex: 1 1 auto; justify-content: flex-end; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-header__bar > .ls-col-nav { flex: 0 0 auto; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__logo { flex: 0 0 auto; line-height: 0; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__logo img { display: block; max-height: 38px; width: auto; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__nav { flex: 0 0 auto; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__nav .et_pb_menu__wrap { justify-content: flex-start; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__nav .et_pb_menu__menu { display: flex !important; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header .et_mobile_nav_menu { display: none !important; }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__nav .et_pb_menu__menu { display: block !important; }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__nav .et_pb_menu__wrap, body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__nav .et_pb_menu__menu, body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__nav .et-menu-nav, body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__nav .et-menu { width: 100%; justify-content: flex-start; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__nav .et-menu { display: flex; align-items: center; gap: var(--ls-space-1); margin: 0; padding: 0; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__nav .et-menu > li { margin: 0; padding: 0; position: relative; align-self: stretch; display: flex; align-items: center; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__nav .et-menu > li > a { display: flex; align-items: center; position: relative; padding: 9px 13px; border-radius: var(--ls-radius-md); font-family: var(--ls-font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: 0.045em; text-transform: uppercase; line-height: 1; color: var(--ls-text); opacity: 1; transition: color var(--ls-transition), background-color var(--ls-transition); }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__nav .et-menu > li > a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; background-color: var(--ls-red); transform: scaleX(0); transform-origin: left center; transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__nav .et-menu > li > a:hover::after,
body.et-db #et-boc .et-l--header.et-l--header .ls-header__nav .et-menu > li:focus-within > a::after,
body.et-db #et-boc .et-l--header.et-l--header .ls-header__nav .et-menu > li.current-menu-item > a::after { transform: scaleX(1); }
body.et-db #et-boc .et-l--header.et-l--header .ls-has-mega > a::before { content: ""; order: 2; width: 8px; height: 8px; margin-left: var(--ls-space-2); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); opacity: 0.75; transition: transform 200ms ease; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header:has(.ls-header__nav .ls-has-mega:hover) .ls-header__nav .ls-has-mega > a::before,
body.et-db #et-boc .et-l--header.et-l--header .ls-header:has(.ls-header__nav .ls-has-mega:focus-within) .ls-header__nav .ls-has-mega > a::before { transform: rotate(-135deg) translate(-3px, -3px); }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__nav .et-menu > li.ls-cta > a { background-color: var(--ls-purple); padding: 9px 17px; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__nav .et-menu > li.ls-cta > a:hover { background-color: var(--ls-purple-hover); }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__nav .et-menu > li.ls-cta > a::after { display: none; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__nav .et-menu > li.ls-mobile-only { display: none; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-mega { position: absolute; top: 100%; left: var(--ls-space-6); width: calc(100% - (var(--ls-space-6) * 2)); max-width: 880px; margin: 0; padding: 0; display: flex; flex-wrap: wrap; background-color: var(--ls-surface-1); border: 1px solid var(--ls-hairline-faint); border-top: 3px solid var(--ls-red); border-radius: 0 0 var(--ls-radius-xl) var(--ls-radius-xl); box-shadow: var(--ls-shadow-drop); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px); transition: opacity 180ms ease, transform 220ms cubic-bezier(0.4, 0, 0.2, 1), visibility 180ms; z-index: 499; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header:has(.ls-header__nav .ls-has-mega:hover) .ls-mega,
body.et-db #et-boc .et-l--header.et-l--header .ls-header:has(.ls-header__nav .ls-has-mega:focus-within) .ls-mega,
body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-mega:hover,
body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-mega:focus-within,
body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-mega.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
body.et-db #et-boc .et-l--header.et-l--header .ls-mega > .et_pb_column { width: auto; margin: 0; }
body.et-db #et-boc .et-l--header.et-l--header .ls-mega .ls-mega__col { flex: 1 1 0; min-width: 0; padding: var(--ls-space-5) var(--ls-space-5) var(--ls-space-4); border-right: 1px solid var(--ls-hairline-faint); }
body.et-db #et-boc .et-l--header.et-l--header .ls-mega .ls-mega__col:first-child { flex: 1.05 1 0; }
body.et-db #et-boc .et-l--header.et-l--header .ls-mega .ls-mega__col:nth-child(3) { border-right: 0; }
body.et-db #et-boc .et-l--header.et-l--header .ls-mega .ls-mega__head { margin-bottom: var(--ls-space-3); }
body.et-db #et-boc .et-l--header.et-l--header .ls-mega .ls-mega__head h4 { font-family: var(--ls-font-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ls-text-soft); margin: 0; padding-bottom: 9px; border-bottom: 1px solid var(--ls-hairline-faint); }
body.et-db #et-boc .et-l--header.et-l--header .ls-mega .et_pb_blurb { margin-bottom: 2px; border-radius: var(--ls-radius-lg); transition: background-color 150ms ease, transform 150ms ease; }
body.et-db #et-boc .et-l--header.et-l--header .ls-mega .et_pb_blurb:hover { background-color: var(--ls-surface-raised); transform: translateX(3px); }
body.et-db #et-boc .et-l--header.et-l--header .ls-mega .et_pb_blurb_content { display: flex; align-items: center; gap: var(--ls-space-3); max-width: none; padding: 7px var(--ls-space-2); text-align: left; }
body.et-db #et-boc .et-l--header.et-l--header .ls-mega .et_pb_main_blurb_image { flex: 0 0 auto; width: 46px; margin: 0; vertical-align: top; }
body.et-db #et-boc .et-l--header.et-l--header .ls-mega .et_pb_main_blurb_image img { display: block; width: 46px; height: 34px; object-fit: cover; border-radius: var(--ls-radius-sm); border: 1px solid var(--ls-hairline-faint); transition: border-color 150ms ease; }
body.et-db #et-boc .et-l--header.et-l--header .ls-mega .et_pb_blurb:hover .et_pb_main_blurb_image img { border-color: var(--ls-red); }
body.et-db #et-boc .et-l--header.et-l--header .ls-mega .et_pb_blurb_container { flex: 1 1 auto; min-width: 0; }
body.et-db #et-boc .et-l--header.et-l--header .ls-mega .et_pb_module_header,
body.et-db #et-boc .et-l--header.et-l--header .ls-mega .et_pb_module_header a { font-family: var(--ls-font-display); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; line-height: 1.15; color: var(--ls-text); padding: 0; }
body.et-db #et-boc .et-l--header.et-l--header .ls-mega .et_pb_blurb_description p { font-family: var(--ls-font-body); font-size: 0.71875rem; line-height: 1.2; color: var(--ls-text-soft); margin: 2px 0 0; }
body.et-db #et-boc .et-l--header.et-l--header .ls-mega .ls-mega__foot { flex: 0 0 100%; display: flex; align-items: center; gap: var(--ls-space-4); padding: var(--ls-space-4) var(--ls-space-5); border-top: 1px solid var(--ls-hairline-faint); background-color: var(--ls-surface-3); border-radius: 0 0 11px 11px; }
body.et-db #et-boc .et-l--header.et-l--header .ls-mega .ls-mega__foot .et_pb_button_module_wrapper { flex: 1 1 auto; margin: 0; }
body.et-db #et-boc .et-l--header.et-l--header .ls-mega .ls-mega__foot .et_pb_button { width: 100%; }
body.et-db #et-boc .et-l--header.et-l--header .ls-mega .ls-mega__policy { flex: 0 0 auto; margin: 0; }
body.et-db #et-boc .et-l--header.et-l--header .ls-mega .ls-mega__policy a { font-size: var(--ls-small); color: var(--ls-text-soft); border-bottom: 1px solid transparent; transition: color var(--ls-transition), border-color var(--ls-transition); }
body.et-db #et-boc .et-l--header.et-l--header .ls-mega .ls-mega__policy a:hover { color: var(--ls-text); border-bottom-color: var(--ls-red); }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__search { flex: 0 1 340px; min-width: 150px; width: 100%; max-width: 340px; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__search .ls-search { position: relative; display: block; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__search input,
body.et-db #et-boc .et-l--header.et-l--header .ls-header__search .product-search-field { width: 100%; min-height: var(--ls-control-h-sm); margin: 0; padding: 0 var(--ls-control-pad-x) 0 36px; background-color: var(--ls-surface-2); border: 1px solid var(--ls-hairline-input); border-radius: var(--ls-radius-md); color: var(--ls-text); font-family: var(--ls-font-body); font-size: 0.84375rem; transition: border-color var(--ls-transition), background-color var(--ls-transition); }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__search input::placeholder,
body.et-db #et-boc .et-l--header.et-l--header .ls-header__search .product-search-field::placeholder { color: var(--ls-text-ghost); }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__search input:focus,
body.et-db #et-boc .et-l--header.et-l--header .ls-header__search .product-search-field:focus { outline: none; border-color: var(--ls-red); box-shadow: var(--ls-focus-ring); }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__search .ls-search__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ls-text-ghost); pointer-events: none; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__util { flex: 0 0 auto; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__util .ls-util { display: flex; align-items: center; gap: var(--ls-space-1); padding-left: var(--ls-space-2); margin-left: var(--ls-space-1); border-left: 1px solid var(--ls-hairline-faint); }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__icon { position: relative; display: grid; place-items: center; width: var(--ls-control-h-sm); height: var(--ls-control-h-sm); border-radius: var(--ls-radius-md); color: var(--ls-text); transition: background-color var(--ls-transition); }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__icon:hover { background-color: var(--ls-surface-2); }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__icon svg { width: 19px; height: 19px; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: var(--ls-control-h-sm); height: var(--ls-control-h-sm); border: 0; padding: 0; background: none; border-radius: var(--ls-radius-md); cursor: pointer; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__burger span { display: block; width: 19px; height: 2px; margin: 0; border-radius: 2px; background-color: var(--ls-text); }
body.et-db #et-boc .et-l--header.et-l--header .ls-scrim { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; transition: opacity 250ms ease, visibility 250ms; z-index: 900; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-drawer { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: 82%; max-width: 320px; margin: 0; padding: 0; background-color: var(--ls-surface-1); border-left: 1px solid var(--ls-hairline-faint); transform: translateX(102%); transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); z-index: 901; display: flex; flex-direction: column; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-drawer > .et_pb_column { display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-drawer .et_pb_module { margin-bottom: 0; }
body.ls-drawer-open.et-db #et-boc .et-l--header.et-l--header .ls-scrim { opacity: 1; visibility: visible; }
body.ls-drawer-open.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-drawer { transform: translateX(0); }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__top .ls-drawer__topbar { display: flex; align-items: center; justify-content: space-between; padding: var(--ls-space-3) var(--ls-space-4); border-bottom: 1px solid var(--ls-hairline-faint); }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__top span { font-family: var(--ls-font-display); font-weight: 600; font-size: var(--ls-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ls-text-soft); }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__close { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--ls-radius-md); background-color: var(--ls-surface-2); color: var(--ls-text); cursor: pointer; }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__close svg { width: 14px; height: 14px; }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__nav { flex: 0 0 auto; }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__sub { flex: 0 0 auto; overflow-y: auto; }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__foot { margin-top: auto; padding: var(--ls-space-3) var(--ls-space-4); border-top: 1px solid var(--ls-hairline-faint); }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__foot .ls-drawer__row { display: flex; gap: var(--ls-space-2); margin-top: var(--ls-space-2); }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__foot .ls-drawer__row a { flex: 1; min-height: var(--ls-btn-h-sm); display: flex; align-items: center; justify-content: center; border: 1px solid var(--ls-hairline); border-radius: var(--ls-radius-md); font-family: var(--ls-font-display); font-weight: 600; font-size: var(--ls-btn-font-sm); letter-spacing: var(--ls-tracking-button); text-transform: uppercase; color: var(--ls-text); }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__foot .ls-drawer__row a:hover { border-color: var(--ls-red); }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__foot .ls-drawer__cta { display: flex; align-items: center; justify-content: center; min-height: var(--ls-btn-h-sm); background-color: var(--ls-red); color: var(--ls-text); border-radius: var(--ls-radius-md); font-family: var(--ls-font-display); font-weight: 700; font-size: var(--ls-btn-font-sm); letter-spacing: var(--ls-tracking-button); text-transform: uppercase; }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__foot .ls-drawer__cta:hover { background-color: var(--ls-bg); box-shadow: inset 0 0 0 1px var(--ls-red); }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__nav .et-menu { display: flex; flex-direction: column; gap: 0; margin: 0; padding: var(--ls-space-1) 0; }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__nav .et-menu > li { width: 100%; margin: 0; }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__nav .et-menu > li > a { display: flex; align-items: center; width: 100%; padding: 13px var(--ls-space-4); border-radius: 0; border-bottom: 1px solid var(--ls-hairline-faint); font-family: var(--ls-font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.045em; text-transform: uppercase; line-height: 1; color: var(--ls-text); }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__nav .et-menu > li > a::after { display: none; }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__nav .et-menu > li > a:hover { background-color: var(--ls-surface-2); }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__nav .et-menu > li.ls-cta > a { background-color: transparent; padding: 13px var(--ls-space-4); }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__nav .et-menu > li.ls-mobile-only { display: block; }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__nav .ls-has-mega > a::before { margin-left: auto; }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__nav .ls-has-mega.is-open > a::before { transform: rotate(-135deg) translate(-3px, -3px); }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer .ls-drawer__sub .ls-sub { max-height: 0; overflow: hidden; background-color: var(--ls-bg); transition: max-height 300ms ease; }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer.is-shop-open .ls-drawer__sub .ls-sub,
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer:has(.ls-has-mega.is-open) .ls-drawer__sub .ls-sub { max-height: 1400px; }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__sub .ls-sub__group { font-family: var(--ls-font-display); font-weight: 600; font-size: 0.59375rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ls-text-soft); padding: var(--ls-space-3) var(--ls-space-4) var(--ls-space-1); margin: 0; }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__sub .ls-sub a { display: flex; align-items: center; gap: var(--ls-space-3); padding: var(--ls-space-2) var(--ls-space-4); font-size: var(--ls-small); color: var(--ls-text-muted); }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__sub .ls-sub a img { flex: 0 0 auto; width: 52px; height: 38px; object-fit: cover; border-radius: var(--ls-radius-sm); border: 1px solid var(--ls-hairline-faint); transition: border-color 150ms ease; }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__sub .ls-sub a:hover img, body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__sub .ls-sub a:active img { border-color: var(--ls-red); }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__sub .ls-sub__name { font-family: var(--ls-font-display); font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.02em; line-height: 1.15; color: var(--ls-text); min-width: 0; }
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__sub .ls-sub a:hover { color: var(--ls-text); background-color: var(--ls-surface-2); }
@media (min-width: 981px) {
	body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-drawer,
body.et-db #et-boc .et-l--header.et-l--header .ls-scrim { display: none; }
}
@media (max-width: 980px) {
	body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-header__bar { flex-wrap: wrap; gap: var(--ls-space-3); padding: var(--ls-space-3) var(--ls-space-4); }
	body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-header__bar > .et_pb_column { width: auto !important; margin: 0 !important; }
	body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-header__bar > .ls-col-nav { display: none; }
	body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-mega { display: none; }
	body.et-db #et-boc .et-l--header.et-l--header .ls-header__burger { display: flex; }
	body.et-db #et-boc .et-l--header.et-l--header .ls-header__logo img { max-height: 30px; }
	body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-header__bar > .ls-col-search { order: 10; flex: 1 1 100%; justify-content: stretch; padding-bottom: var(--ls-space-1); }
	body.et-db #et-boc .et-l--header.et-l--header .ls-header__search { flex: 1 1 auto; max-width: none; }
	body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-header__bar > .ls-col-util { margin-left: auto !important; }
}
@media (max-width: 560px) {
	body.et-db #et-boc .et-l--header.et-l--header .ls-header__util .ls-util { padding-left: var(--ls-space-1); margin-left: 0; }
	body.et-db #et-boc .et-l--header.et-l--header .ls-header__logo img { max-height: 26px; }
}
body.et-db #et-boc .et-l--header.et-l--header .ls-header a:focus-visible,
body.et-db #et-boc .et-l--header.et-l--header .ls-header button:focus-visible,
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer a:focus-visible,
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer button:focus-visible,
body.et-db #et-boc .et-l--header.et-l--header .ls-mega a:focus-visible { outline: 2px solid var(--ls-red); outline-offset: 3px; border-radius: var(--ls-radius-sm); }
@media (prefers-reduced-motion: reduce) {
	body.et-db #et-boc .et-l--header.et-l--header .ls-header *,
body.et-db #et-boc .et-l--header.et-l--header .ls-mega,
body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-drawer,
body.et-db #et-boc .et-l--header.et-l--header .ls-scrim { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
body.et-db #et-boc .et-l--header.et-l--header .ls-header__search .ls-search input.product-search-field,
body.et-db #et-boc .et-l--header.et-l--header .ls-header__search .ls-search input[type="text"],
body.et-db #et-boc .et-l--header.et-l--header .ls-header__search .ls-search input { height: auto !important; min-height: var(--ls-control-h-sm); padding: 0 var(--ls-control-pad-x) 0 36px !important; background-color: var(--ls-surface-2) !important; background-image: none !important; border: 1px solid var(--ls-hairline-input) !important; border-radius: var(--ls-radius-md) !important; color: var(--ls-text) !important; font-family: var(--ls-font-body) !important; font-size: 0.84375rem !important; box-shadow: none !important; }
body.et-db #et-boc .et-l--header.et-l--header .ls-header__search .ls-search input:focus { border-color: var(--ls-red) !important; box-shadow: var(--ls-focus-ring) !important; outline: none !important; }

/* ============================================================
   MOBILE DRAWER — FULL SCREEN + SCROLLABLE  (31 Aug 2026)
   Appended override. Active under 981px only, where the drawer
   exists. Both halves present — plain + Divi specificity layer —
   per this sheet's convention. Keep them in sync.
   ============================================================ */

@media (max-width: 980px) {

	/* ---------- plain half ---------- */

	/* Edge to edge, no side panel */
	.et-l--header .ls-header .ls-drawer { left: 0; right: 0; width: 100%; max-width: none; border-left: 0; }

	/* The column is the one and only scroll container */
	.et-l--header .ls-header .ls-drawer > .et_pb_column { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

	/* Topbar pinned to the top of the scroll box */
	.et-l--header .ls-drawer__top { position: sticky; top: 0; z-index: 3; flex: 0 0 auto; background-color: var(--ls-surface-1); }

	/* Nav + Shop accordion scroll between the pinned ends.
	   __sub gives up its own scroller so there is only one. */
	.et-l--header .ls-drawer__nav { flex: 0 0 auto; }
	.et-l--header .ls-drawer__sub { flex: 0 0 auto; overflow-y: visible; }

	/* Footer CTA pinned to the bottom. margin-top:auto still holds it
	   down when the content is short; sticky pins it once it isn't. */
	.et-l--header .ls-drawer__foot { position: sticky; bottom: 0; z-index: 3; flex: 0 0 auto; margin-top: auto; background-color: var(--ls-surface-1); padding-bottom: calc(var(--ls-space-3) + env(safe-area-inset-bottom, 0px)); }

	/* Full screen shows all 13 cards at once — 1400px clipped them */
	.et-l--header .ls-drawer.is-shop-open .ls-drawer__sub .ls-sub,
	.et-l--header .ls-drawer:has(.ls-has-mega.is-open) .ls-drawer__sub .ls-sub { max-height: 2400px; }

	/* ---------- Divi specificity layer ---------- */

	body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-drawer { left: 0; right: 0; width: 100%; max-width: none; border-left: 0; }
	body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-drawer > .et_pb_column { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
	body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__top { position: sticky; top: 0; z-index: 3; flex: 0 0 auto; background-color: var(--ls-surface-1); }
	body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__nav { flex: 0 0 auto; }
	body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__sub { flex: 0 0 auto; overflow-y: visible; }
	body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__foot { position: sticky; bottom: 0; z-index: 3; flex: 0 0 auto; margin-top: auto; background-color: var(--ls-surface-1); padding-bottom: calc(var(--ls-space-3) + env(safe-area-inset-bottom, 0px)); }
	body.et-db #et-boc .et-l--header.et-l--header .ls-drawer.is-shop-open .ls-drawer__sub .ls-sub,
	body.et-db #et-boc .et-l--header.et-l--header .ls-drawer:has(.ls-has-mega.is-open) .ls-drawer__sub .ls-sub { max-height: 2400px; }
}

/* ============================================================
   DRAWER LABEL SIZES  (31 Aug 2026)
   The drawer's section labels were set as micro-type — "MENU" at
   11px and the accordion's group headings at 9.5px. On a phone
   they read as noise rather than headings. Both bumped, with the
   tracking pulled back so the wider letter-spacing does not undo
   the size gain. Matches the filter sheet, which now uses
   --ls-small for the same job.
   ============================================================ */

.et-l--header .ls-drawer__top span,
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__top span {
	font-size: var(--ls-small);
	letter-spacing: 0.12em;
}

.et-l--header .ls-drawer__sub .ls-sub__group,
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__sub .ls-sub__group {
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
}

/* Close button: matched to the filter sheet's — a 44px red target rather than
   a 32px grey one. 32px was under the 44px minimum tap target anyway. */

.et-l--header .ls-drawer__close,
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__close {
	width: 44px;
	height: 44px;
	background-color: var(--ls-red);
	color: var(--ls-text);
}
.et-l--header .ls-drawer__close svg,
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__close svg {
	width: 16px;
	height: 16px;
}

/* ============================================================
   MOBILE BAR — SEARCH INLINE  (31 Aug 2026)
   Below 981px the bar used to wrap onto two rows: logo and the
   account / cart / burger cluster on the first, the search field
   full-width on the second (its column carried `flex: 1 1 100%`,
   which is what forced the wrap).

   Now one row — logo | search | burger. `.ls-col-search` carried
   `order: 10`, which is what put it after the utility cluster and
   onto its own line; it is `order: 1` here, between the logo and
   the utilities, so the field genuinely sits in the middle. The account and cart
   icons are hidden here; they live at the bottom of the drawer
   as the ACCOUNT / CART row, which is where they were asked to
   be. Hiding them is also what frees the width for the field.

   Note the drawer's CART link is a plain /cart/ anchor and does
   NOT carry the J Cart trigger class `wc-j-upsellator-show-cart`
   that the hidden header icon had. Mobile now navigates to the
   cart page rather than opening the slide-out. Adding that class
   to the drawer footer module in layout 183054 is the fix if the
   slide-out is wanted there.
   ============================================================ */

@media (max-width: 980px) {

	/* --- plain half --- */
	.et-l--header .ls-header .ls-header__bar { flex-wrap: nowrap !important; }
	.et-l--header .ls-header .ls-header__bar > .ls-col-search {
		order: 1 !important;
		flex: 1 1 auto !important;
		min-width: 0 !important;
	}
	.et-l--header .ls-header .ls-header__bar > .ls-col-util {
		order: 2 !important;
		margin-left: 0 !important;
	}
	.et-l--header .ls-header .ls-header__util .ls-util > .ls-header__icon { display: none !important; }
	.et-l--header .ls-header .ls-header__logo img { max-width: 132px !important; height: auto !important; }

	/* --- Divi specificity layer --- */
	body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-header__bar { flex-wrap: nowrap !important; }
	body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-header__bar > .ls-col-search {
		order: 1 !important;
		flex: 1 1 auto !important;
		min-width: 0 !important;
	}
	body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-header__bar > .ls-col-util {
		order: 2 !important;
		margin-left: 0 !important;
	}
	body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-header__util .ls-util > .ls-header__icon { display: none !important; }
	body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-header__logo img { max-width: 132px !important; height: auto !important; }
}

/* ============================================================
   SHOP ACCORDION — ATTACHED TO ITS OWN ITEM  (1 Sep 2026)
   `ls-drawer__sub` is a separate Divi module that rendered after
   the whole nav module, so the panel always opened below the LAST
   menu item. It only ever looked attached because Shop used to be
   last; once the nav was reordered to Home / Shop / Install /
   Contact Us, tapping SHOP opened a list two rows lower, under
   Contact Us.

   A one-line script in that module (layout 183054, just before
   `<div class="ls-sub">`) now appends the node into the Shop <li>
   on load. The builder cannot nest one module inside another's
   markup, so this is the only way short of hand-writing the menu.

   Divi renders the menu <li> as `display: flex` (row), so the
   anchor and the panel landed side by side, both stretched to the
   panel's full height. The <li> is switched to a column here.
   ============================================================ */

.et-l--header .ls-drawer__nav .et-menu > li.ls-has-mega,
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__nav .et-menu > li.ls-has-mega {
	flex-direction: column;
	align-items: stretch;
}
.et-l--header .ls-drawer__nav .et-menu > li.ls-has-mega > a,
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__nav .et-menu > li.ls-has-mega > a {
	flex: 0 0 auto;
}

/* Moving the panel inside the Shop <li> put its links inside the drawer nav's
   scope, where the menu's own uppercase rule reaches them — the truck labels
   came out as "1947-54 CHEVY/GMC TRUCK". Put the case back; the group headings
   set their own uppercase and are unaffected. */
.et-l--header .ls-drawer__sub .ls-sub a,
.et-l--header .ls-drawer__sub .ls-sub__name,
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__sub .ls-sub a,
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__sub .ls-sub__name {
	text-transform: none !important;
	letter-spacing: 0.02em;
}

/* ============================================================
   DRAWER FOOTER — ICONS ON ACCOUNT / CART  (1 Sep 2026)
   The two outline buttons at the bottom of the drawer now carry
   the same person and cart glyphs the header icons used, added
   as inline SVG in the `ls-drawer__foot` code module in layout
   183054 (see docs/drawer-cta-slot.md for that module's
   markup). Labels are wrapped in <span> so the flex gap sits
   between the glyph and the word.
   ============================================================ */

.et-l--header .ls-drawer__foot .ls-drawer__row a,
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__foot .ls-drawer__row a {
	gap: var(--ls-space-2);
}
.et-l--header .ls-drawer__foot .ls-drawer__row a svg,
body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__foot .ls-drawer__row a svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}