#body-wrapper > .black-overlay {position:fixed; top:0; left:0;width:100%; height:100%; display:none; background-color:rgba(0,0,0,.5); z-index:1;}

.mega-menu-v2-mobile-nav-panel {width:90%; height:100%; position:fixed; top:70px; left:0; padding-bottom:90px; margin-left:-100%; z-index:1000; background-color:#fff; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out;}
.mobile-nav-panel-top-border {width:100%; height:8px; background-color:#3f060b;}
.mobile-nav-panel-inner-wrapper {width:100%; height:100%; padding:19px 0; overflow-y:scroll;}
.mobile-nav-panel-inner-wrapper > ul {margin:-12px 0 0 0; padding:0;}
.mobile-nav-panel-inner-wrapper > ul > li {position:relative; width:100%; height:50px; padding:13px 16px 0 16px; border-bottom:1px solid #d3d3d3; text-align:left; cursor:pointer;}
.mobile-nav-panel-inner-wrapper > ul > li a {font-family:'Lato', sans-serif; font-size:14px; font-weight:700; color:#000;}
.mobile-nav-panel-inner-wrapper > ul > li .drill-down {position:absolute; top:14px; right:16px; font-size:22px; color:#c4c7c8;}
.mobile-nav-panel-inner-wrapper li.mobile-nav-panel-active-li {background-color:#3f060b; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out;}
.mobile-nav-panel-inner-wrapper li.mobile-nav-panel-active-li a {color:#c4c7c8; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out;}



.mega-menu-v2-second-level-mobile-nav-panel {width:90%; height:100%; position:fixed; top:70px; left:0; padding-bottom:90px; margin-left:90%; z-index:1000; background-color:#ededed; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out;}
.mega-menu-v2-second-level-mobile-nav-panel ul {margin:-12px 0 0 0; padding:0;}
.mega-menu-v2-second-level-mobile-nav-panel ul li {position:relative; width:100%; height:50px; padding:13px 16px 0 16px; border-bottom:1px solid #bcbcbc; text-align:left; cursor:pointer;}
.mega-menu-v2-second-level-mobile-nav-panel ul li.second-level-mobile-nav-panel-drilled-down-category {font-family:'Lato', sans-serif; font-size:14px; font-weight:700; color:#000; border-bottom:1px solid #000; cursor:auto;}
.mega-menu-v2-second-level-mobile-nav-panel ul li.second-level-mobile-nav-panel-active-li {background-color:#3f060b; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out;}
.mega-menu-v2-second-level-mobile-nav-panel ul li a {font-family:'Lato', sans-serif; font-size:14px; font-weight:700; color:#000;}
.mega-menu-v2-second-level-mobile-nav-panel ul li.second-level-mobile-nav-panel-active-li a {color:#c4c7c8; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out;}


.mobile-bars-active-state-square {display:none; z-index:500; position:absolute; top:0; left:0; width:58px; height:70px; background-color:#3f060b;}
.body-wrapper-click .mobile-bars-active-state-square {display:block; background-color:#3f060b;}
.mobile-bars {z-index:2000; cursor:pointer;}
.search-account-basket-wrapper .search-icon {cursor:pointer;}
.mobile-bars.mobile-active {background:transparent !important;}
.tablet-and-phone-header-logo {display:none;}
.background-header-wrapper div.logo {position:relative; top:-15px;}
.mega-menu-v2-navbar {display:inline-block;}
.mega-menu-v2-navbar-parent-cat-listing {height:74px; overflow:hidden;}
.mega-menu-v2-navbar-parent-cat-listing > li {float:left; width:auto; height:100px; padding:20px 10px; margin:0 0 0 15px;}
.mega-menu-v2-navbar-parent-cat-listing > li:first-of-type {margin-left:0; background:transparent;}
.mega-menu-v2-navbar-parent-cat-listing > li.hover-state-active {background:rgba(65,8,13,0.75);}
.mega-menu-v2-navbar-parent-cat-listing > li > a {font-size:18px; font-family:'Lato', sans-serif; color:#fefffc; font-weight:300;}
.mega-menu-v2-flyout-wrapper {display:none; position:absolute; top:72px; left:50%; width:100%; max-width:1200px; height:auto; padding:30px 0; margin-left:-600px; border:1px solid #000; background-color:#ffffff; z-index:5000;}
.mega-menu-v2-navbar-parent-cat-listing > li.hover-state-active .mega-menu-v2-flyout-wrapper {display:block;}
.mega-menu-v2-flyout-container {width:1170px; height:auto; margin:0 auto; position:relative;}
.mega-menu-v2-flyout-left-side {float:left;}
.mega-menu-v2-flyout-right-side {float:right;}
.mega-menu-v2-flyout-links-wrapper {width:927px; height:370px;}
.mega-menu-v2-flyout-links-wrapper.designers {width:100%;}
.mega-menu-v2-flyout-links-list {float:left; width:33%;}
.mega-menu-v2-flyout-links-list.designers {width:14%;}
.mega-menu-v2-flyout-links-list li {margin-bottom:10px;}
.mega-menu-v2-flyout-links-list li a {font-size:15px; font-family:'Lato', sans-serif; color:#000; font-weight:400;}
.mega-menu-v2-flyout-links-list li a:hover {color:#721416;}
.mega-menu-v2-flyout-links-list.designers li {margin-bottom:5px;}
.mega-menu-v2-flyout-links-list.designers li a {font-size:12px;}
.mega-menu-v2-flyout-links-list li.mega-menu-v2-flyout-links-header {margin:24px 0 12px 0;}
.mega-menu-v2-flyout-links-list li.mega-menu-v2-flyout-links-header.first-links-header {margin-top:0;}
.mega-menu-v2-flyout-links-list li.mega-menu-v2-flyout-links-header, .mega-menu-v2-flyout-links-list li.mega-menu-v2-flyout-links-header a {font-size:18px; font-family:'Lato', sans-serif; color:#000; font-weight:700; text-transform:uppercase;}
.mega-menu-v2-flyout-links-list li.mega-menu-v2-flyout-links-header a:hover {color:#721416;}
.mega-menu-v2-flyout-links-list li.view-all-designers-link {}
.mega-menu-v2-flyout-links-list li.view-all-designers-link a {text-transform:uppercase; color:#800017;}
.mega-menu-v2-flyout-links-list li:first-of-type {margin-top:0;}
.mega-menu-v2-flyout-bottom-creative-wrapper {margin-top:30px;}
.mega-menu-v2-flyout-bottom-creative-wrapper img {}
.mega-menu-bottom-creative-one-image {width:100%;}
.mega-menu-bottom-creative-two-images {display:inline-block; max-width:420px; margin-right:4% !important;}
.mega-menu-bottom-creative-three-images {display:inline-block; max-width:265px; margin-right:4% !important;}
.mega-menu-v2-flyout-right-creative-wrapper {}
.mega-menu-v2-flyout-right-creative-wrapper img {}
.mega-menu-v2-flyout-bottom-bar {position:absolute; bottom:-12px; left:0; width:100%; height:12px; background-image:url('../graphics/flyout-bottom-background-fade-v2.png'); background-repeat:repeat-x; background-position:left bottom;}
.mega-menu-v2-flyout-designers-logo-bar {clear:both; width:100%; padding-top:10px;}
.mega-menu-v2-designers-flyout-logo {display:inline-block;}
.designer-logo-1 {}
.designer-logo-2 {margin-left:43px;}
.designer-logo-3 {margin-left:43px;}
.designer-logo-4 {margin-left:43px;}
.designer-logo-5 {margin-left:43px;}
.designer-logo-6 {margin-left:43px;}
.background-header-wrapper.sticky-enabled {position:fixed; top:0; left:0; height:74px;}
.background-header-wrapper.sticky-enabled .newletterBanner {display:none;}
.search-active .search-bar {margin:0 !important;}
.search-active .sticky-enabled .search-bar.tablet-desktop-search {position:relative; top:-5px;}

.background-header-wrapper.checkout {height:130px;}
.background-header-wrapper.checkout.sticky-enabled {height:89px;}
.background-header-wrapper.checkout .width-sticky-nav {height:0;}
.background-header-wrapper.checkout .width-sticky-nav div.logo {top:5px;}
.background-header-wrapper.checkout .width-sticky-nav .checkout-steps {position:relative; top:-67px; display:block; width:920px; margin:0 auto;}

_:-ms-fullscreen, :root .search-icon {padding-right:0;}
_:-ms-fullscreen, :root .item-left-side {padding-right:0;}


@media all and (max-width: 1421px){
	.mega-menu-v2-navbar-parent-cat-listing {height:72px;}
	.mega-menu-v2-navbar-parent-cat-listing > li {margin-left:5px;}
	.mega-menu-v2-flyout-wrapper {top:70px;}
}

@media all and (max-width: 1400px){
	.background-header-wrapper.checkout .width-sticky-nav .checkout-steps {margin:0 0 0 50px; display:inline-block; top:-44px;}
	_:-ms-fullscreen, :root .background-header-wrapper.checkout .width-sticky-nav .checkout-steps {top:-5px;}
}

@media all and (max-width: 1300px){
	.mega-menu-v2-navbar-parent-cat-listing > li {padding:20px 5px;}
}

@media all and (max-width: 1220px){
	.mega-menu-v2-flyout-container {width:100%; padding:0 20px;}
	.mega-menu-v2-flyout-left-side {width:100%;}
	.mega-menu-v2-flyout-right-side {display:none;}
	.mega-menu-v2-flyout-links-wrapper {width:100%;}
	.mega-menu-v2-flyout-links-list li a {font-size:14px;}
	.mega-menu-v2-flyout-links-list li.mega-menu-v2-flyout-links-header, .mega-menu-v2-flyout-links-list li.mega-menu-v2-flyout-links-header a {font-size:16px;}
	.mega-menu-v2-flyout-bottom-creative-wrapper {text-align:center;}
	.mega-menu-v2-flyout-bottom-creative-wrapper img {margin:0 auto;}
	.mega-menu-v2-designers-flyout-logo {margin:0;}
	.designer-logo-1 {width:12%;}
	.designer-logo-2 {width:12%;}
	.designer-logo-3 {width:12%;}
	.designer-logo-4 {width:20%;}
	.designer-logo-5 {width:20%;}
	.designer-logo-6 {width:20%;}
}

@media all and (max-width: 1200px){
	.mega-menu-v2-flyout-wrapper {left:0; margin-left:0;}
	.background-header-wrapper.checkout .width-sticky-nav .checkout-steps {margin-left:0;}
}

@media all and (max-width: 1190px){
	.desktop-header-logo {display:none;}
	.tablet-and-phone-header-logo {display:inline-block; margin:0 15px; position:relative; top:-20px;}
	.mega-menu-v2-navbar-parent-cat-listing {height:69px;}
	.mega-menu-v2-flyout-wrapper {top:67px;}
	.mobile-bars {padding:0 0 0 10px !important;}
	.sticky-enabled .mega-menu-v2-navbar {display:none;}
	.sticky-enabled .mobile-bars {position:relative; top:-10px; display:inline-block; width:33%; text-align:left;}
	.sticky-enabled .desktop-header-logo {position:static !important; display:inline-block; width:33%; text-align:center; margin:10px 0 0 0 !important;}
	.sticky-enabled .desktop-header-logo img {display:block; max-width:170px; margin:0 auto;}
	.sticky-enabled .tablet-and-phone-header-logo {display:none; width:33%; text-align:right;}
	.sticky-enabled .search-account-basket-wrapper {margin:24px 10px 0 0 !important;}
	.search-active .sticky-enabled .search-bar.tablet-desktop-search {top:0;}
	.background-header-wrapper.checkout .tablet-and-phone-header-logo {top:25px;}
	.background-header-wrapper.checkout .width-sticky-nav .checkout-steps {top:-24px;}

	_:-ms-fullscreen, :root .background-header-wrapper.checkout .tablet-and-phone-header-logo {top:-15px;}
}

@media all and (max-width: 1120px){
	.mega-menu-v2-flyout-wrapper.designers {padding-bottom:0;}
	.mega-menu-v2-flyout-links-wrapper.designers {height:300px;}
	.mega-menu-v2-designers-flyout-logo {text-align:center;}
	.mega-menu-v2-designers-flyout-logo {width:13% !important; margin-left:2%;}
	.mega-menu-v2-flyout-designers-logo-bar a:first-of-type {margin-left:0;}
	.designer-logo-4 {position:relative; top:-10px;}
	.designer-logo-5 {position:relative; top:-15px;}
	.designer-logo-6 {position:relative; top:-15px;}
}

@media all and (max-width: 990px){
	.background-header-wrapper.checkout .width-sticky-nav .checkout-steps {width:90%;}
}

@media all and (max-width: 987px){
	.mega-menu-v2-navbar-parent-cat-listing > li > a {font-size:14px;}
	.designer-logo-4 {top:-20px;}
	.designer-logo-5 {top:-20px;}
	.designer-logo-6 {top:-20px;}
}

@media all and (max-width: 980px){
	.mega-menu-bottom-creative-two-images {display:inline-block; max-width:47%; margin-right:2% !important;}
	.mega-menu-bottom-creative-three-images {display:inline-block; max-width:30%; margin-right:3% !important;}
}


@media all and (max-width: 820px){
	.tablet-and-phone-header-logo {margin:0 10px;}
	.mega-menu-v2-navbar-parent-cat-listing > li > a {font-size:13px;}
}

@media all and (max-width: 787px){
	.mega-menu-v2-navbar {display:none !important;}
	.mobile-bars {position:relative; top:-10px; display:inline-block; width:33%; text-align:left;}
	.mobile-bars i {font-size:30px !important;}
	.mobile-bars .fa-bars {position:static;}
	.desktop-header-logo {position:static !important; display:inline-block; width:33%; height:auto !important; text-align:center; margin:10px 0 0 0 !important;}
	.desktop-header-logo img {display:block !important; max-width:170px; max-height:44.5px; padding:0 !important; margin:0 auto;}
	.tablet-and-phone-header-logo {display:none; width:33%; text-align:right;}
	.search-account-basket-wrapper {margin:24px 10px 0 0 !important;}
	.search-account-basket-wrapper .search-icon {padding-right:15px;}
	.search-account-basket-wrapper .item-left-side {padding-right:5px;}
	.search-active .search-bar.tablet-desktop-search {top:-30px !important; z-index:999;}

	.background-header-wrapper.checkout .mobile-bars {display:none;}
	.background-header-wrapper.checkout .desktop-header-logo {display:none;}
	.background-header-wrapper.checkout .tablet-and-phone-header-logo {display:inline-block;}
	.background-header-wrapper.checkout .width-sticky-nav .checkout-steps {margin-left:30px;}
	.background-header-wrapper.checkout .width-sticky-nav .checkout-steps .no-small-view {display:none;}

	_:-ms-fullscreen, :root .background-header-wrapper.checkout .tablet-and-phone-header-logo {top:25px;}
	_:-ms-fullscreen, :root .background-header-wrapper.checkout .width-sticky-nav .checkout-steps {top:-25px;}
}

@media all and (max-width: 767px){
	.background-header-wrapper.checkout {height:89px;}
}

@media all and (max-width: 499px){
	.mobile-bars {width:30% !important;}
}

@media all and (max-width: 450px){
	.background-header-wrapper.checkout .width-sticky-nav .checkout-steps {top:-4px;}

	_:-ms-fullscreen, :root .background-header-wrapper.checkout .width-sticky-nav .checkout-steps {top:-5px;}
}

@media all and (max-width: 440px){
	.mobile-bars {width:25% !important;}
}

@media all and (max-width: 395px){
	.mobile-bars {width:20% !important;}
	.desktop-header-logo {margin-top:15px !important;}
	.desktop-header-logo img {max-width:150px !important; max-height:39.2667px !important;}
	.sticky-enabled .search-account-basket-wrapper {margin-top:20px !important;}
}

@media all and (max-width: 360px){
	.mobile-bars {width:15% !important;}
}

/* Fix: nav text vertical centering in the top-level navbar. 
   Rather than changing li height (which affected flyout positioning
   since .mega-menu-v2-flyout-wrapper uses top:72px relative to the li),
   apply line-height only to the direct anchor text so it centers
   within the ul's overflow:hidden clipping window. */
@media all and (max-width: 1421px) {
    .mega-menu-v2-navbar-parent-cat-listing > li > a {
        line-height: 32px;
    }
}
@media all and (max-width: 1190px) {
    .mega-menu-v2-navbar-parent-cat-listing > li > a {
        line-height: 29px;
    }
}

/* Fix: vertical-align:middle didn't produce simple centering because
   .width-sticky-nav (82.5px) is taller than the visible dark bar
   (69px, matching .mega-menu-v2-navbar) - some other sibling inflates
   the line box. Switch to deterministic absolute positioning instead,
   calculated from actual measured rects: bar spans 0-69px within
   .width-sticky-nav (which is position:relative), logo is 34px tall,
   so top = (69-34)/2 = 17.5px centers it exactly. */
@media all and (max-width: 1190px) {
    .background-header-wrapper:not(.checkout) .tablet-and-phone-header-logo {
        position: absolute;
        top: 17.5px;
        left: 15px;
    }
    .background-header-wrapper:not(.checkout) .mega-menu-v2-navbar {
        margin-left: 70px;
    }
}

/* Fix: checkout-steps vertical centering at <=787px (iPhone portrait
   and similar). .width-sticky-nav always starts exactly at the dark
   bar's top regardless of whether the grey promo banner above it is
   present, so one constant value works for the whole range: dark bar
   is 89px tall, checkout-steps (icon-only, labels hidden here) is
   54px tall, so top=(89-54)/2=17.5 centers it. left:65px clears the
   logo; margin-left:0 cancels the original 30px rule so it doesn't
   stack with left (caused horizontal overflow in an earlier attempt);
   width uses calc() to keep the original 90% right edge while
   starting further right. */
@media all and (max-width: 787px) {
    .background-header-wrapper.checkout .width-sticky-nav .checkout-steps {
        position: absolute;
        top: 17.5px;
        left: 65px;
        margin-left: 0;
        width: calc(90% - 35px);
    }
}

/* Checkout header at 788-1190px (tablet/iPhone landscape), non-sticky.
   Logo and checkout-steps only needed vertical correction here -
   horizontal position was already fine. Switched to position:absolute
   for reliable placement (relative top:25px - the original rule -
   depends on natural in-flow position, which is what made this
   inconsistent; same lesson as the general-page logo fix earlier).
   Dark bar is always 89px (.width-sticky-nav always starts exactly
   at the bar's top), center=44.5:
   logo: was center=57 (top=40,h=34) -> target top=44.5-17=27.5
   checkout-steps: was center=23 (top=-24,h=94) -> target top=44.5-47=-2.5 */
@media all and (min-width: 788px) and (max-width: 1190px) {
    .background-header-wrapper.checkout .tablet-and-phone-header-logo {
        position: absolute;
        top: 27.5px;
        left: 15px;
    }
    .background-header-wrapper.checkout .width-sticky-nav .checkout-steps {
        position: absolute;
        top: -2.5px;
        left: 63px;
    }
}

/* Sticky+checkout header at 788-1190px: hamburger and full wordmark
   logo swap in on scroll (lines ~133-138) but aren't checkout-aware,
   so they show on checkout pages where they shouldn't (checkout never
   needs site nav). Hide both, re-show the small icon logo (overriding
   its unconditional sticky hide), and show checkout-steps alongside
   it - reusing the exact non-sticky checkout top/left values, since
   the sticky bar is also 89px tall (.background-header-wrapper
   .checkout.sticky-enabled, confirmed in source) and non-sticky
   checkout at this same width already hides hamburger/full-logo too,
   so the available layout is identical in both states. */
@media all and (min-width: 788px) and (max-width: 1190px) {
    .background-header-wrapper.checkout.sticky-enabled .mobile-bars {
        display: none;
    }
    .background-header-wrapper.checkout.sticky-enabled .desktop-header-logo {
        display: none;
    }
    .background-header-wrapper.checkout.sticky-enabled .tablet-and-phone-header-logo {
        display: inline-block;
        position: absolute;
        top: 27.5px;
        left: 15px;
    }
    .background-header-wrapper.checkout.sticky-enabled .checkout-steps {
        position: absolute;
        top: -2.5px;
        left: 63px;
    }
}

/* Sticky (non-checkout) header at 788-1190px landscape/tablet.
   Never actually applied earlier today - confirmed missing via file
   search (only the checkout-sticky and non-sticky :not(.checkout)
   versions made it in). Re-adding with the original measured numbers
   (bar=74px, center=37):
   mobile-bars: was center=7.5 (top=-10,h=35) -> target top=37-17.5=19.5
   desktop-header-logo: was center=49.25 (top=27,h=44.5) -> target
   top=37-22.25=14.75
   !important added proactively on desktop-header-logo's position,
   learned from the 768-787px fix: .sticky-enabled .desktop-header-logo
   has position:static!important at <=1190px (confirmed in source),
   which would otherwise silently block position:absolute from taking
   effect, same trap as before. .mobile-bars doesn't need !important -
   its competing rule (line 134) has no !important on position, and
   our 4-class selector already wins on specificity alone. */
@media all and (min-width: 788px) and (max-width: 1190px) {
    .background-header-wrapper:not(.checkout).sticky-enabled .mobile-bars {
        position: absolute;
        top: 19.5px;
        left: 0;
    }
    .background-header-wrapper:not(.checkout).sticky-enabled .desktop-header-logo {
        position: absolute !important;
        top: 14.75px;
        left: 33%;
    }
}