/* * Shop dropdown in the main menu, loaded by includes/shopMenu.php, which * describes how the dropdown is put together. * * Most rules are keyed to the Shop item's id, 65758. If that item is ever * deleted and added again, replace the id here and in js/shop-menu.js. * * WP Rocket's Remove Unused CSS keeps this file whole, because it is on the * safelist in shopMenu.php: the mobile script adds the "All ..." links and * the open state after the page loads, where Remove Unused CSS cannot see * them. The file is printed after the theme's own stylesheet, which sits in * the footer, so these rules still come last in the used CSS. Every page * carries it, so after editing it, clear Used CSS for the whole site. */ /* Palette sampled from the mockup: panel #0e171d, accent #5bb6d1, badge #d9a52e, sale #ffd46b, card #16282f, aside #192c36, rule #283036. Type is floored at 16px per the client's standing rule. */ #mega-menu-item-65758 > ul.mega-sub-menu{ background:#0e171d!important;border:0!important;border-radius:0!important; box-shadow:none!important;padding:22px 18px 20px!important} /* Text links underline on hover. The boxed elements are excluded and shift background instead, further down. */ #mega-sub-menu-65758 a, #mega-sub-menu-65758 a.mega-menu-link{text-decoration:none!important} #mega-sub-menu-65758 a.mega-menu-link:hover, #mega-sub-menu-65758 a.mega-menu-link:focus-visible, #mega-sub-menu-65758 .mpw-mm-help__link:hover, #mega-sub-menu-65758 .mpw-mm-help__link:focus-visible, #mega-sub-menu-65758 .mpw-mm-footbar__sale:hover, #mega-sub-menu-65758 .mpw-mm-footbar__sale:focus-visible{ text-decoration:underline!important;text-underline-offset:3px} #mega-sub-menu-65758 a.mega-menu-link{ font-size:16px!important;line-height:1.5!important;height:auto!important; padding:4px 0!important;margin:0!important;color:#fff!important; font-weight:400!important;text-transform:none!important;letter-spacing:0!important; background:none!important} #mega-sub-menu-65758 .mega-menu-column > ul.mega-sub-menu > li.mpw-mm-head > a.mega-menu-link{ font-size:18px!important;font-weight:700!important;padding:0 0 10px!important} #mega-sub-menu-65758 .mega-menu-column > ul.mega-sub-menu > li > ul.mega-sub-menu > li > a.mega-menu-link{ font-size:16px!important;padding:5px 0!important} #mega-sub-menu-65758 .mega-menu-column > ul.mega-sub-menu > li.mpw-mm-head + li.mpw-mm-head{ margin-top:26px!important} /* inline-block keeps the arrow outside the hover underline. */ #mega-sub-menu-65758 li.mpw-mm-head > a.mega-menu-link::after{ content:"\2192"!important;display:inline-block!important;opacity:.55; font-weight:400;margin-left:7px;text-decoration:none!important} #mega-sub-menu-65758 li.mpw-mm-strong > a.mega-menu-link{font-weight:700!important} /* The "All ..." links the mobile script adds to each group. The heading is the link to that page on desktop. */ #mega-sub-menu-65758 li.mpw-mm-all{display:none!important} .mpw-mm-div{border-left:1px solid #283036!important;padding-left:26px!important} li.mpw-acc > ul.mega-sub-menu{column-count:2;column-gap:22px} /* Group labels such as "Browse by Brand" are menu items with no URL, which Mega Menu renders without an href. pointer-events needs !important because Mega Menu's own rules turn it back on in an open panel, which brings back the hand cursor and the hover underline. */ #mega-sub-menu-65758 li.mpw-menu-label > a.mega-menu-link{ font-size:16px!important;letter-spacing:.1em!important; text-transform:uppercase!important;color:#afc2cc!important; padding:18px 0 4px!important;pointer-events:none!important;font-weight:400!important} /* Boxed elements: background shift on hover, no underline. */ .mpw-mm-card,.mpw-mm-rating,.mpw-mm-help__btn{ transition:background-color 120ms ease,border-color 120ms ease} .mpw-mm-card:hover,.mpw-mm-card:focus-visible, .mpw-mm-rating:hover,.mpw-mm-rating:focus-visible, .mpw-mm-help__btn:hover,.mpw-mm-help__btn:focus-visible{ text-decoration:none!important} .mpw-mm-card{display:block;padding:14px 16px;margin:16px 0 6px; background:#16282f;border-left:3px solid #5bb6d1;border-radius:2px} .mpw-mm-card:hover,.mpw-mm-card:focus-visible{background:#1e3742} .mpw-mm-card__title{display:block;font-size:16px;font-weight:700;color:#fff} .mpw-mm-card__copy{display:block;margin-top:6px;font-size:16px; color:#afc2cc;line-height:1.45} .mpw-mm-badge{display:inline-block;margin-left:8px;padding:2px 9px; border-radius:999px;background:#d9a52e;color:#12222a;font-size:16px; font-weight:700;letter-spacing:.04em;text-transform:uppercase} /* margin-right keeps it off the next column's rule. The label wraps: at four columns it is wider than the column, and kept to one line it pushed the arrow out past the border. */ .mpw-mm-rating{display:flex;align-items:center;justify-content:space-between; gap:12px;margin:28px 26px 0 0;padding:14px 16px;border:1px solid #2a4552; border-radius:2px;font-size:16px;font-weight:600;color:#fff!important; white-space:normal} .mpw-mm-rating:hover,.mpw-mm-rating:focus-visible{background:#16282f;border-color:#3d6b7d} .mpw-mm-help{padding:20px;background:#192c36;border-radius:2px} .mpw-mm-help__title{margin:0 0 10px;font-size:18px;font-weight:700; line-height:1.3;color:#fff} .mpw-mm-help__copy{margin:0 0 16px;font-size:16px;line-height:1.5;color:#cfdbe2} .mpw-mm-help__btn{display:block;padding:12px 16px;text-align:center; background:#5bb6d1;color:#0e171d!important;font-weight:700;font-size:16px; border-radius:2px} .mpw-mm-help__btn:hover,.mpw-mm-help__btn:focus-visible{background:#7fcbe0} .mpw-mm-help__link{display:block;margin-top:14px;text-align:center; font-size:16px;color:#fff!important} /* Mega Menu floats its grid columns, so this row needs clearing or its box starts part way up the panel. */ .mpw-mm-foot{clear:both!important;margin-top:44px!important; padding-top:18px!important;border-top:1px solid #283036!important} .mpw-mm-footbar{display:flex;align-items:baseline;justify-content:space-between; gap:24px;width:100%} .mpw-mm-footbar__sale{color:#ffd46b!important;font-weight:700;font-size:16px; letter-spacing:.06em;text-transform:uppercase} .mpw-mm-footbar__note{font-size:16px;color:#afc2cc} /* ---- 1000px to 1199px: two columns instead of four ---- Mega Menu floats its grid columns, so halving the width wraps them two per row in DOM order: home + commercial, then parts + the help panel. */ @media only screen and (min-width:1000px) and (max-width:1199px){ #mega-sub-menu-65758 li.mpw-mm-row > ul.mega-sub-menu > li.mega-menu-column{ width:50%!important} /* Without this the third column floats up into whatever space is left beside the second one instead of starting a new row. */ #mega-sub-menu-65758 li.mpw-mm-row > ul.mega-sub-menu > li.mega-menu-column:nth-child(odd){ clear:left!important} /* the third column now starts a row, so it loses the dividing rule */ #mega-sub-menu-65758 li.mpw-mm-row > ul.mega-sub-menu > li.mega-menu-column:nth-child(3){ border-left:0!important;padding-left:0!important} #mega-sub-menu-65758 li.mpw-mm-row > ul.mega-sub-menu > li.mega-menu-column:nth-child(n+3){ padding-top:34px!important} /* Two columns make the panel about 810px tall, taller than a tablet held sideways, and Mai's sticky header held it in place, so the bottom of the panel could not be scrolled into view. At these widths the header scrolls with the page instead. */ body.has-sticky-header{--site-header-position:relative;--site-header-top:auto} } /* ---- mobile, below Mega Menu's 999px breakpoint ---- */ @media only screen and (max-width:999px){ /* stacked columns need no rule and no side inset, but do need air above */ .mpw-mm-div{border-left:0!important;padding-left:0!important; padding-top:24px!important} /* single column lists when the panel is already one column wide */ li.mpw-acc > ul.mega-sub-menu{column-count:1} .mpw-mm-footbar{flex-direction:column;align-items:flex-start;gap:10px} .mpw-mm-rating{margin-right:0} /* custom.css gives every mobile menu link a translucent background on hover, focus, when open and on the current page. On a phone that stays on whatever was tapped last, so it is switched off here for the whole mobile menu, not just this panel. Keyboard focus keeps it. */ #mega-menu-wrap-header-right #mega-menu-header-right a.mega-menu-link:hover, #mega-menu-wrap-header-right #mega-menu-header-right a.mega-menu-link:focus, #mega-menu-wrap-header-right #mega-menu-header-right a.mega-menu-link:focus-within, #mega-menu-wrap-header-right #mega-menu-header-right .mega-menu-item:hover > a.mega-menu-link, #mega-menu-wrap-header-right #mega-menu-header-right .mega-menu-item:focus-within > a.mega-menu-link, #mega-menu-wrap-header-right #mega-menu-header-right .mega-menu-item.mega-toggle-on > a.mega-menu-link, #mega-menu-wrap-header-right #mega-menu-header-right .mega-current-menu-item > a.mega-menu-link, #mega-menu-wrap-header-right #mega-menu-header-right .mega-current-menu-ancestor > a.mega-menu-link, #mega-menu-wrap-header-right #mega-menu-header-right .mega-current-page-ancestor > a.mega-menu-link, #mega-menu-wrap-header-right #mega-menu-header-right .mega-current-menu-parent > a.mega-menu-link{ background-color:transparent!important} #mega-menu-wrap-header-right #mega-menu-header-right .mega-menu-item > a.mega-menu-link:focus-visible{ background-color:rgba(255,255,255,.12)!important} /* The hover underline would stay on a tapped heading for as long as its group is open. */ #mega-sub-menu-65758 a.mega-menu-link:hover, #mega-sub-menu-65758 .mpw-mm-help__link:hover, #mega-sub-menu-65758 .mpw-mm-footbar__sale:hover{ text-decoration:none!important} /* In columns one and two the heading owns the whole column, so closing it closes the promo block and the links below it as well. Column three holds four separate headings and keeps per heading behaviour. */ li.mpw-col-grouped > ul.mega-sub-menu > li.mpw-mm-head:not(.mpw-open) ~ li{ display:none!important} /* The groups with children start closed. Tapping anywhere on the heading opens or closes the group (see the script below), and Mega Menu's indicator becomes the plus/minus that shows which. The page the heading links to on desktop is the "All ..." link at the top of the group. */ #mega-sub-menu-65758 li.mpw-mm-all{display:block!important} #mega-sub-menu-65758 li.mpw-mm-all > a.mega-menu-link::after{ content:"\2192"!important;display:inline-block!important;opacity:.55; margin-left:7px} #mega-sub-menu-65758 li.mpw-mm-head.mega-menu-item-has-children > ul.mega-sub-menu{ display:none!important} #mega-sub-menu-65758 li.mpw-mm-head.mega-menu-item-has-children.mpw-open > ul.mega-sub-menu{ display:block!important} #mega-sub-menu-65758 li.mpw-mm-head.mega-menu-item-has-children > a.mega-menu-link::after{ display:none!important} #mega-sub-menu-65758 li.mpw-mm-head.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator{ display:inline-block!important;width:44px;height:32px;line-height:32px; text-align:center;cursor:pointer;vertical-align:middle} #mega-sub-menu-65758 li.mpw-mm-head.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator::after{ content:"\002B"!important;font-size:22px;font-weight:400;opacity:.8} #mega-sub-menu-65758 li.mpw-mm-head.mega-menu-item-has-children.mpw-open > a.mega-menu-link > span.mega-indicator::after{ content:"\2212"!important} }