/* ===================== JJILL TOP NAV DESKTOP CHANGES ===================== */
@media (min-width: 992px) {
/* =====================================================================
MAIN CONTAINER
Two rows:
Row 1 = Search + Stores / Account / Bag
Row 2 = Primary categories
Left gutter reserved for JJill logo
===================================================================== */
header.header-ui-new:not(.checkout-header) > .container {
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
max-width: 1600px;
margin: 0 auto !important;
/* Align search + NEW ARRIVALS to QA1 reference */
padding: 0 30px 0 144px !important;
box-sizing: border-box !important;
}
header.header-ui-new:not(.checkout-header) > .container::before,
header.header-ui-new:not(.checkout-header) > .container::after {
content: none !important;
display: none !important;
}
/* Row ordering */
header.header-ui-new:not(.checkout-header)
> .container > .largeView {
order: 1;
}
header.header-ui-new:not(.checkout-header)
> .container > ul {
order: 2;
}
/* =====================================================================
JJILL LOGO
===================================================================== */
header.header-ui-new:not(.checkout-header)
> .container > ul > li.logoimg {
position: absolute !important;
left: 30px !important;
top: 0 !important;
bottom: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100px !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
header.header-ui-new:not(.checkout-header)
> .container > ul > li.logoimg
.contentRecommendationWidget,
header.header-ui-new:not(.checkout-header)
> .container > ul > li.logoimg a {
display: flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
header.header-ui-new:not(.checkout-header)
> .container > ul > li.logoimg img {
display: block !important;
width: auto !important;
max-width: 90px !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* =====================================================================
TOP ROW
Search + Stores / My Account / Bag
===================================================================== */
header.header-ui-new:not(.checkout-header)
> .container > .largeView {
position: static !important;
right: auto !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
header.header-ui-new:not(.checkout-header)
> .container > .largeView
.signIn-storeLocator-link {
position: relative !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
header.header-ui-new:not(.checkout-header)
> .container > .largeView
ul.header-new {
display: flex !important;
flex-flow: row nowrap !important;
align-items: center !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 5px 0 !important;
list-style: none !important;
}
/* Utility links */
header.header-ui-new:not(.checkout-header)
> .container > .largeView
ul.header-new > li {
float: none !important;
width: auto !important;
margin: 0 0 0 26px !important;
padding: 0 !important;
left: auto !important;
}
/* =====================================================================
SEARCH
===================================================================== */
header.header-ui-new:not(.checkout-header)
> .container > .largeView
ul.header-new > li#search-tooltip2 {
order: -1 !important;
flex: 0 0 400px !important;
width: 400px !important;
max-width: 400px !important;
min-width: 0 !important;
margin: 0 auto 0 0 !important;
padding: 0 !important;
left: 0 !important;
top: auto !important;
}
header.header-ui-new:not(.checkout-header)
> .container > .largeView
#search-tooltip2 #search_icon_popup {
position: static !important;
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
header.header-ui-new:not(.checkout-header)
> .container > .largeView
#search-tooltip2 .popover-content {
position: relative !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Search positioning anchor */
header.header-ui-new:not(.checkout-header)
> .container > .largeView
#search-tooltip2 #searchBox {
display: 'flex';
alignItems: 'center';
flex: '1 1 0';
minWidth: 0;
maxWidth: 400;
.parent > * {
flex: 1;
width: 100%;
min-width: 0;
}
}
/* Search input - same dimensions focused/unfocused */
header.header-ui-new:not(.checkout-header)
> .container > .largeView
#search-tooltip2 #SimpleSearchForm_SearchTerm,
header.header-ui-new:not(.checkout-header)
> .container > .largeView
#search-tooltip2 #SimpleSearchForm_SearchTerm:focus,
header.header-ui-new:not(.checkout-header)
> .container > .largeView
#search-tooltip2 #SimpleSearchForm_SearchTerm:active {
display: block !important;
width: 100% !important;
height: 27px !important;
line-height: 27px !important;
padding: 0 34px 0 8px !important;
border: 1px solid #707070 !important;
border-radius: 0 !important;
background: #fff !important;
outline: none !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
/* =====================================================================
SEARCH LENS
Always display right-side lens
===================================================================== */
/* Hide legacy left lens */
header.header-ui-new:not(.checkout-header)
> .container > .largeView
#search-tooltip2 .search-all-header.left {
display: none !important;
}
/* Always show right lens */
header.header-ui-new:not(.checkout-header)
> .container > .largeView
#search-tooltip2 .search-all-header.right {
display: block !important;
position: absolute !important;
right: 0 !important;
left: auto !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 32px !important;
height: 27px !important;
margin: 0 !important;
z-index: 2;
}
header.header-ui-new:not(.checkout-header)
> .container > .largeView
#search-tooltip2
.search-all-header.right .fa-search {
position: absolute !important;
right: 8px !important;
left: auto !important;
top: 50% !important;
transform: translateY(-50%) !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
/* =====================================================================
BOTTOM ROW - PRIMARY NAV
===================================================================== */
header.header-ui-new:not(.checkout-header)
> .container > ul {
display: flex !important;
flex-flow: row nowrap !important;
justify-content: flex-start !important;
align-items: center !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
header.header-ui-new:not(.checkout-header)
> .container > ul
> li:not(.logoimg):not(.col-xs-12) {
float: none !important;
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
/*
IMPORTANT:
Keep vertical geometry fixed so category does not jump upward
on mouse hover.
*/
margin: 0 32px 0 0 !important;
padding: 0 !important;
line-height: 46px !important;
text-align: left !important;
/* Do NOT force relative positioning here:
dropdown code may rely on existing positioning */
}
/* First category starts at exact same X as search */
header.header-ui-new:not(.checkout-header)
> .container > ul
> li:not(.logoimg):not(.col-xs-12):first-of-type {
margin-left: 0 !important;
padding-left: 0 !important;
}
/* =====================================================================
TOP-LEVEL CATEGORY LINKS
Prevent upward movement / geometry change on hover
===================================================================== */
header.header-ui-new:not(.checkout-header)
> .container > ul
> li:not(.logoimg):not(.col-xs-12)
> a.toplevel.main-menu-link {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
height: 46px !important;
line-height: 46px !important;
white-space: nowrap !important;
/*
Reserve underline space BEFORE hover.
Hover only changes border color, so no vertical shift.
*/
border-bottom: 3px solid transparent !important;
box-sizing: border-box !important;
top: auto !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
transform: none !important;
}
/* Hover/focus/open category:
same dimensions, only visual state changes */
header.header-ui-new:not(.checkout-header)
> .container > ul
> li:not(.logoimg):not(.col-xs-12)
> a.toplevel.main-menu-link:hover,
header.header-ui-new:not(.checkout-header)
> .container > ul
> li:not(.logoimg):not(.col-xs-12)
> a.toplevel.main-menu-link:focus,
header.header-ui-new:not(.checkout-header)
> .container > ul
> li:not(.logoimg):not(.col-xs-12)
> a.toplevel.main-menu-link.selected,
header.header-ui-new:not(.checkout-header)
> .container > ul
> li:not(.logoimg):not(.col-xs-12)
> a.toplevel.main-menu-link.active {
margin: 0 !important;
padding: 0 !important;
height: 46px !important;
line-height: 46px !important;
top: auto !important;
border-bottom-color: #474747 !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
transform: none !important;
}
header.header-ui-new:not(.checkout-header)
> .container > ul
> li:not(.logoimg):not(.col-xs-12)
.left_espot > a {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
height: 46px !important;
line-height: 46px !important;
border-bottom: 3px solid transparent !important;
box-sizing: border-box !important;
top: auto !important;
transform: none !important;
}
header.header-ui-new:not(.checkout-header)
> .container > ul
> li:not(.logoimg):not(.col-xs-12)
.left_espot > a:hover,
header.header-ui-new:not(.checkout-header)
> .container > ul
> li:not(.logoimg):not(.col-xs-12)
.left_espot > a:focus {
margin: 0 !important;
padding: 0 !important;
height: 46px !important;
line-height: 46px !important;
border-bottom-color: #474747 !important;
top: auto !important;
transform: none !important;
}
header.header-ui-new:not(.checkout-header)
> .container > ul
> li:not(.logoimg):not(.col-xs-12)
a.toplevel.main-menu-link > img {
display: inline-block !important;
width: 15px !important;
height: auto !important;
margin: 0 5px 0 0 !important;
vertical-align: middle !important;
flex: 0 0 auto !important;
}
/* Desktop: hide mobile header-tools row */
header.header-ui-new:not(.checkout-header)
> .container > ul > li.col-xs-12 {
display: none !important;
}
header.header-ui-new:not(.checkout-header)
.main-menu-item,
header.header-ui-new:not(.checkout-header)
.main-menu-item ul,
header.header-ui-new:not(.checkout-header)
.main-menu-item a,
header.header-ui-new:not(.checkout-header)
.main-menu-item ul a {
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
transform: none !important;
opacity: 1 !important;
}
/* Prevent moves-out animation on desktop */
header.header-ui-new:not(.checkout-header)
.main-menu-item.moves-out > li > a,
header.header-ui-new:not(.checkout-header)
.main-menu-item.moves-out > li
.left_espot > a {
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
transform: none !important;
opacity: 1 !important;
}
/* Remove delayed visibility animation */
header.header-ui-new:not(.checkout-header)
.main-menu-item.nav-is-visible {
visibility: visible !important;
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
}
/* Prevent desktop subnav slide animation */
header.header-ui-new:not(.checkout-header)
.main-menu-item ul.is-hidden {
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
transform: none !important;
}
/* =====================================================================
STICKY HEADER
Cancel original compressed fixed-header geometry
===================================================================== */
header.header-ui-new.fixed {
position: fixed !important;
top: 0 !important;
left: 0;
width: 100% !important;
z-index: 1000;
padding-top: 15px !important;
}
header.header-ui-new.fixed .store-locator-link,
header.header-ui-new.fixed .signIn-reg-link {
display: inline !important;
}
/* Logo should not shrink in sticky state */
header.header-ui-new.fixed
.logoimg img {
width: auto !important;
max-width: 90px !important;
margin-top: 0 !important;
}
/* Search keeps same size/position in sticky mode */
header.header-ui-new.fixed
.header-new #search-tooltip2 {
order: -1 !important;
flex: 0 0 400px !important;
width: 400px !important;
max-width: 400px !important;
margin: 0 auto 0 0 !important;
top: auto !important;
}
header.header-ui-new.fixed
.header-new #search-tooltip2
.popover-content {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Prevent sticky state from pushing categories down/up */
header.header-ui-new.fixed
> .container > ul
> li:not(.logoimg):not(.col-xs-12) {
margin-top: 0 !important;
padding-top: 0 !important;
line-height: 46px !important;
}
header.header-ui-new.fixed
> .container > ul
> li:not(.logoimg):not(.col-xs-12)
> a.toplevel.main-menu-link {
height: 46px !important;
line-height: 46px !important;
margin: 0 !important;
padding: 0 !important;
top: auto !important;
}
/* Original sticky CSS adds margin-top to .header-new li */
header.header-ui-new.fixed
.header-new > li {
margin-top: 0 !important;
}
header {
padding: 15px 5px 5px !important;
}
/* Increase vertical space between search row and top categories */
header.header-ui-new:not(.checkout-header)
> .container > .largeView {
margin-bottom: 10px !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
header.header-ui-new:not(.checkout-header) > .container {
display: flex !important; flex-direction: column !important; position: relative !important;
width: 100% !important; max-width: none !important; margin: 0 !important;
padding: 92px 0 0 0 !important; box-sizing: border-box;
}
header.header-ui-new:not(.checkout-header) > .container::before,
header.header-ui-new:not(.checkout-header) > .container::after { content: none !important; display: none !important; }
header.header-ui-new:not(.checkout-header) > .container > ul.row > li.logoimg { display: none !important; } /* desktop logo hidden; logo lives in the tools bar */
header.header-ui-new:not(.checkout-header) > .container > ul.row > li.col-xs-12 {
display: block !important; position: absolute !important; top: 0; left: 0; width: 100% !important; margin: 0 !important; padding: 0 !important; order: 0;
}
header.header-ui-new:not(.checkout-header) > .container > ul.row > li.col-xs-12 .visible-xs-inline { display: inline-block !important; }
header.header-ui-new:not(.checkout-header) > .container > ul.row > li.col-xs-12 .mob-menu-close { display: none !important; } /* close-X only while drawer open */
/* flex bar: MENU + STORES left (vertically centred), logo ABSOLUTELY centred, BAG absolute right.
(The base padding-top layout drops MENU/STORES below the logo at this width, so we center with flex.) */
header.header-ui-new:not(.checkout-header) > .container > ul.row > li.col-xs-12 .header-tools {
display: flex !important; align-items: center !important; position: relative !important; min-height: 92px !important; padding: 0 16px !important; margin: 0 !important;
}
header.header-ui-new:not(.checkout-header) > .container > ul.row > li.col-xs-12 .header-tools > li {
float: none !important; width: auto !important; padding: 0 !important; margin: 0 22px 0 0 !important; text-align: center !important;
}
header.header-ui-new:not(.checkout-header) > .container > ul.row > li.col-xs-12 .header-tools > li.logoimg {
position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important;
}
header.header-ui-new:not(.checkout-header) > .container > ul.row > li.col-xs-12 .header-tools > li.logoimg img { max-width: 120px !important; width: auto !important; width: 60px !important; margin-top: -5px;}
header.header-ui-new:not(.checkout-header) > .container > ul.row > li.col-xs-12 .header-tools .menu-title { font-size: 11px !important; display: block !important; }
header.header-ui-new:not(.checkout-header) > .container > ul.row > li.col-xs-12 .header-tools .fa-bars { font-size: 23px !important; }
header.header-ui-new:not(.checkout-header) > .container > ul.row > li.col-xs-12 .header-tools > li.stores { font-size: 11px !important; }
/* ---- SEARCH row (from .largeView): full width; only the search field + the BAG survive ---- */
header.header-ui-new:not(.checkout-header) > .container > .largeView {
order: 1 !important; position: static !important; right: auto !important; width: 100% !important; margin: 0 !important;
}
header.header-ui-new:not(.checkout-header) > .container > .largeView .signIn-storeLocator-link { position: static !important; width: 100% !important; }
header.header-ui-new:not(.checkout-header) > .container > .largeView ul.header-new {
display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
}
/* hide EVERY header-new by default, then re-show just the search + the bag cluster */
header.header-ui-new:not(.checkout-header) > .container > .largeView ul.header-new > li { display: none !important; float: none !important; width: 100% !important; margin: 0 !important; }
header.header-ui-new:not(.checkout-header) > .container > .largeView ul.header-new > li#search-tooltip2 { display: block !important; width: 100% !important; padding: 0 !important; float: none !important; background: #eee !important; }
header.header-ui-new:not(.checkout-header) > .container > .largeView ul.header-new > li:has(#Mini_Shopping_Cart_Wrapper) { display: block !important; position: static !important; }
/* inside the bag cluster hide its DUPLICATE MENU/STORES/logo, keep only the mini-cart */
header.header-ui-new:not(.checkout-header) > .container > .largeView .global-login-view > li:not(:has(#Mini_Shopping_Cart_Wrapper)) { display: none !important; }
/* neutralise the base `.pos-relative` li's so the cart anchors to .container, not a mid-strip */
header.header-ui-new:not(.checkout-header) > .container > .largeView .global-login-view > li { position: static !important; }
/* lift the mini-cart (BAG) into the top bar, right side (verified at runtime: anchors to .container) */
header.header-ui-new:not(.checkout-header) > .container > .largeView #Mini_Shopping_Cart_Wrapper { position: absolute !important; top: 28px !important; right: 16px !important; z-index: 6 !important; }
header.header-ui-new:not(.checkout-header) > .container > .largeView #search-tooltip2 { float: none !important; }
header.header-ui-new:not(.checkout-header) > .container > .largeView #search-tooltip2 #search_icon_popup { display: block !important; position: static !important; width: 100% !important; margin: 0 !important; }
header.header-ui-new:not(.checkout-header) > .container > .largeView #search-tooltip2 .popover-content { width: 100% !important; padding: 0 !important; margin: 0 !important; }
header.header-ui-new:not(.checkout-header) > .container > .largeView #search-tooltip2 #searchBox { position: relative !important; width: 100% !important; margin: 0 !important; float: none !important; }
header.header-ui-new:not(.checkout-header) > .container > .largeView #search-tooltip2 [id^="searchTermWrapper"] { width: 100% !important; }
header.header-ui-new:not(.checkout-header) > .container > .largeView #search-tooltip2 #SimpleSearchForm_SearchTerm {
border: 0 !important; width: 100% !important; height: 38px !important; line-height: 38px !important;
background: #eee !important; padding: 0 36px 0 14px !important; box-sizing: border-box;
}
header.header-ui-new:not(.checkout-header) > .container > .largeView #search-tooltip2 .search-all-header:not(.right) { display: none !important; }
header.header-ui-new:not(.checkout-header) > .container > .largeView #search-tooltip2 .search-all-header.right {
position: absolute !important; right: 0 !important; top: 0 !important; left: auto !important; transform: none !important; margin: 0 !important;
}
header.header-ui-new:not(.checkout-header) > .container > .largeView #search-tooltip2 .search-all-header.right .fa-search { position: absolute !important; top: 11px !important; right: 14px !important; left: auto !important; }
/* ---- NAV STRIP: the desktop category as a horizontal scroll row below the search ---- */
header.header-ui-new:not(.checkout-header) > .container > ul.row {
order: 2 !important; display: flex !important; flex-flow: row nowrap !important; align-items: center;
width: 100% !important; margin: 0 !important; padding: 8px 12px !important;
overflow-x: auto !important; -webkit-overflow-scrolling: touch; border-top: 1px solid #e8e8e8; list-style: none;
}
/* each category li: force-VISIBLE (overrides base .hidden-xs), shrink to content, never wrap */
header.header-ui-new:not(.checkout-header) > .container > ul.row > li:not(.col-xs-12):not(.logoimg) {
display: block !important; float: none !important; flex: 0 0 auto !important; width: auto !important; max-width: none !important;
margin: 0 22px 0 0 !important; padding: 0 !important; line-height: normal !important; text-align: left !important; position: static;
}
header.header-ui-new:not(.checkout-header) > .container > ul.row > li a.toplevel.main-menu-link {
display: inline-flex !important; align-items: center !important; white-space: nowrap !important; padding: 0 !important; margin: 0 !important; line-height: normal !important;
}
header.header-ui-new:not(.checkout-header) > .container > ul.row > li a.toplevel.main-menu-link > img { width: 15px !important; height: auto !important; margin: 0 5px 0 0 !important; }
/* category mega-flyouts are desktop hover panels — suppress them in the strip (tap follows the link) */
header.header-ui-new:not(.checkout-header) > .container > ul.row > li .sub-nav { display: none !important; }
/* ---- HAMBURGER DRAWER slide-in (replicated from base <768 so it works at this range) ---- */
.visible-xs:has(> .menu-links.header-new) { display: block !important; }
.menu-links { display: none; top: auto; position: fixed; width: 81.33333333%; z-index: 3; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.menu-links li { padding: 0; }
.menu-links li a { padding: 20px; font-size: 14px; }
.menu-links li > a, .menu-links li .left_espot > a { border-bottom: 1px solid #737373; }
.other-links { background-color: #fff !important; }
.main-menu-item, .main-menu-item ul {
position: absolute; width: 100%; overflow-x: hidden; overflow-y: auto; top: 0; left: 0; z-index: 1;
transform: translateX(0); transition: transform .3s;
}
.main-menu-item { visibility: hidden; transition: visibility 0 .3s; }
.main-menu-item.nav-is-visible { visibility: visible; transition: visibility 0 0; overflow: hidden; position: relative; background-color: #f5f5f5; }
.main-menu-item ul.is-hidden { transform: translateX(100%); }
.main-menu-item a, .main-menu-item ul a {
display: block; line-height: 50px; padding: 0 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: transform .3s, opacity .3s;
}
.main-menu-item a { position: relative; }
.main-menu-item .navLink.selected + ul { height: 100%; }
.moves-out > li > a, .moves-out > li .left_espot > a { transform: translateX(-100%); opacity: 0; }
.main-menu-item.nav-is-visible.moves-out + ul { display: none; }
.main-menu-item .fa-angle-right { position: relative; top: 10px; font-size: 24px; }
.header-tools.open .logoimg .mob-menu-close { display: block !important; position: absolute; top: 8px; left: 23px; }
.header-tools.open > li:not(.logoimg) { display: none !important; }
.header-tools.open + .menu-links { display: block; }
header.header-ui-new:not(.checkout-header) > .container > .largeView #search-tooltip2 #search_icon_popup { display: flex !important; align-items: center !important; min-height: 52px !important; }
header.header-ui-new:not(.checkout-header) > .container > .largeView #search-tooltip2 .popover-content { padding: 0 14px !important; margin: 0 !important; width: 100% !important; }
header.header-ui-new:not(.checkout-header) > .container > .largeView #search-tooltip2 #searchBox { width: 100% !important; }
header.header-ui-new:not(.checkout-header) > .container > .largeView #search-tooltip2 #SimpleSearchForm_SearchTerm {
background: #fff !important; border: 0 !important; height: 30px !important; line-height: 30px !important;
padding: 10px 34px 10px 10px !important; width: 100% !important; box-sizing: border-box;
}
header.header-ui-new:not(.checkout-header) > .container > .largeView #search-tooltip2 .search-all-header.right {
position: absolute !important; top: 50% !important; left: auto !important; transform: translateY(-50%) !important;
}
header.header-ui-new:not(.checkout-header) > .container > .largeView #search-tooltip2 .search-all-header.right .fa-search {
position: static !important; top: auto !important; right: auto !important; left: auto !important;
}
header.header-ui-new:not(.checkout-header) > .container { position: relative !important; }
header.header-ui-new:not(.checkout-header) .largeView .signIn-storeLocator-link { position: static !important; }
header.header-ui-new:not(.checkout-header) .largeView ul.header-new > li:has(#Mini_Shopping_Cart_Wrapper) { display: block !important; position: static !important; }
header.header-ui-new:not(.checkout-header) .largeView .global-login-view { position: static !important; }
header.header-ui-new:not(.checkout-header) .largeView .global-login-view > li { position: static !important; }
header.header-ui-new:not(.checkout-header) .largeView .global-login-view > li:not(:has(#Mini_Shopping_Cart_Wrapper)) { display: none !important; }
header.header-ui-new:not(.checkout-header) .largeView #Mini_Shopping_Cart_Wrapper { position: absolute !important; top: 8px !important; right: 14px !important; z-index: 20 !important; }
/* Hide duplicate BAG next to STORES */
header.header-ui-new .header-tools > li.mobile-bag {
display: none !important;
}
/* Search positioning container */
header.header-ui-new #search-tooltip2 #searchBox {
position: relative !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Search input */
header.header-ui-new
#search-tooltip2
#SimpleSearchForm_SearchTerm,
header.header-ui-new
#search-tooltip2
#SimpleSearchForm_SearchTerm:focus,
header.header-ui-new
#search-tooltip2
#SimpleSearchForm_SearchTerm:active {
width: 100% !important;
height: 30px !important;
line-height: 30px !important;
padding: 0 40px 0 10px !important;
box-sizing: border-box !important;
outline: none !important;
box-shadow: none !important;
}
/* Hide old left-side search lens */
header.header-ui-new
#search-tooltip2
.search-all-header.left {
display: none !important;
}
/* ALWAYS display right-side lens */
header.header-ui-new
#search-tooltip2
.search-all-header.right {
display: flex !important;
position: absolute !important;
top: 0 !important;
right: 4px !important;
left: auto !important;
width: 32px !important;
height: 30px !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
z-index: 10 !important;
}
/* Magnifying glass */
header.header-ui-new
#search-tooltip2
.search-all-header.right
.fa-search {
display: block !important;
position: static !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
font-size: 14px !important;
line-height: 1 !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Drawer-open header area */
body:has(.main-menu-item.nav-is-visible)
header.header-ui-new:not(.checkout-header)
> .container > ul.row > li.col-xs-12 {
display: block !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 66.6667% !important;
height: 80px !important;
margin: 0 !important;
padding: 0 !important;
background: #f5f5f5 !important;
border-bottom: 1px solid #737373 !important;
z-index: 1002 !important;
}
/* Keep the tools wrapper visible */
body:has(.main-menu-item.nav-is-visible)
header.header-ui-new:not(.checkout-header)
> .container > ul.row > li.col-xs-12
.header-tools {
display: block !important;
position: relative !important;
width: 100% !important;
height: 80px !important;
min-height: 80px !important;
margin: 0 !important;
padding: 0 !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Hide normal tablet controls */
body:has(.main-menu-item.nav-is-visible)
header.header-ui-new:not(.checkout-header)
> .container > ul.row > li.col-xs-12
.header-tools > li:not(.logoimg) {
display: none !important;
}
/* Show and center JJill logo */
body:has(.main-menu-item.nav-is-visible)
header.header-ui-new:not(.checkout-header)
> .container > ul.row > li.col-xs-12
.header-tools > li.logoimg {
display: flex !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 80px !important;
align-items: center !important;
justify-content: center !important;
transform: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 1003 !important;
}
body:has(.main-menu-item.nav-is-visible)
header.header-ui-new:not(.checkout-header)
> .container > ul.row > li.col-xs-12
.header-tools > li.logoimg a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 80px !important;
margin: 0 !important;
padding: 0 !important;
}
body:has(.main-menu-item.nav-is-visible)
header.header-ui-new:not(.checkout-header)
> .container > ul.row > li.col-xs-12
.header-tools > li.logoimg img {
display: block !important;
width: 60px !important;
max-width: 60px !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Show close X */
body:has(.main-menu-item.nav-is-visible)
header.header-ui-new:not(.checkout-header)
> .container > ul.row > li.col-xs-12
.header-tools
.logoimg
.mob-menu-close {
display: flex !important;
position: absolute !important;
left: 18px !important;
top: 50% !important;
width: 40px !important;
height: 40px !important;
transform: translateY(-50%) !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 1004 !important;
}
body:has(.main-menu-item.nav-is-visible)
header.header-ui-new:not(.checkout-header)
> .container > ul.row > li.col-xs-12
.header-tools
.logoimg
.mob-menu-close .fa-times {
display: block !important;
font-size: 22px !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Match drawer width to header */
body:has(.main-menu-item.nav-is-visible)
.menu-links {
width: 66.6667% !important;
max-width: 66.6667% !important;
}
/* Fine-tune JJill logo position inside open iPad drawer */
body:has(.main-menu-item.nav-is-visible)
header.header-ui-new:not(.checkout-header)
> .container > ul.row > li.col-xs-12
.header-tools > li.logoimg img {
transform: translateX(-8px) !important;
}
body:has(.main-menu-item.nav-is-visible)
header.header-ui-new:not(.checkout-header)
.largeView {
display: none !important;
}
body:has(.main-menu-item.nav-is-visible)
header.header-ui-new:not(.checkout-header)
> .container > ul.row
> li:not(.col-xs-12):not(.logoimg) {
display: none !important;
}
body:has(.main-menu-item.nav-is-visible)
header.header-ui-new:not(.checkout-header)
> .container > ul.row > li.col-xs-12 {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 66.6667% !important;
margin: 0 !important;
padding: 0 !important;
}
body:has(.main-menu-item.nav-is-visible)
header.header-ui-new:not(.checkout-header)
.header-tools {
position: relative !important;
width: 100% !important;
height: 80px !important;
min-height: 80px !important;
margin: 0 !important;
padding: 0 !important;
}
body:has(.main-menu-item.nav-is-visible)
.header-tools.open + .menu-links {
display: block !important;
position: relative !important;
top: auto !important;
bottom: auto !important;
left: 0 !important;
right: auto !important;
width: 66.6667% !important;
max-width: 66.6667% !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
z-index: 30 !important;
margin-top: -1px !important;
}
/* First menu row starts immediately */
body:has(.main-menu-item.nav-is-visible)
.menu-links .main-menu-item,
body:has(.main-menu-item.nav-is-visible)
.menu-links .main-menu-item > li:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Align "0 items" and chevron on right side */
.menu-links .item-count {
position: absolute !important;
right: 35px !important;
left: auto !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
/* Align right chevron */
.menu-links .item-count + .fa-angle-right {
position: absolute !important;
right: 15px !important;
left: auto !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin: 0 !important;
padding: 0 !important;
}
/*ipad mini fix */
.menu-links .header-new{
margin-top: -30px !important;
}
/* Fix for ECP-5242 | iPad - excessive spacing */
header.header-ui-new:not(.checkout-header) > .container > .largeView ul.header-new {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
height: auto !important;
}
}