/* mega-menu-v2.css - rewritten 2026-10-19 for the two-row header (see the Header section in styles.css).
   Styles the db-mega-menu flex component's markup (mega-menu-v2-* classes - keep them) and the phone menu panel that db.js builds from it.
   Breakpoints: phone layout is the default; "tablet and up" = (min-width: 768px) and (min-height: 501px), (min-width: 768px) and (hover: hover),
   so a phone turned sideways keeps the phone menu. Same for 992px and 1200px. */

/* ---------- Menu row (768px and up) ---------- */
.db-hdr .mega-menu-v2-navbar {display:block; width:100%;}
/* Items spread evenly across the row (up to 1200px) at every width the menu row shows */
.db-hdr .mega-menu-v2-navbar-parent-cat-listing {display:flex; flex-wrap:wrap; justify-content:space-around; max-width:1200px; height:auto; margin:0 auto; padding:0; overflow:visible; list-style:none;}
.db-hdr .mega-menu-v2-navbar-parent-cat-listing > li {position:static; display:flex; align-items:center; float:none; width:auto; height:auto; margin:0; padding:0; background:none;}
.db-hdr .mega-menu-v2-navbar-parent-cat-listing > li > a {display:block; padding:0 5px; font-family:var(--font-primary); font-size:calc(clamp(14px, calc(1.6vw + 2px), 16px) * var(--db-nav-scale, 1)); font-weight:var(--font-weight-regular); line-height:44px; color:var(--color-header-link); white-space:nowrap;} /* tablets: text grows from 14px at 768px to 16px at about 880px; --db-nav-scale (styles.css) adds the text size mode, up to 125% */
.db-hdr .mega-menu-v2-navbar-parent-cat-listing > li > a:is(:hover, :focus) {color:var(--color-header-link); text-decoration:none;}
.db-hdr .mega-menu-v2-navbar-parent-cat-listing > li > a:focus-visible {outline:2px solid var(--color-white); outline-offset:-4px;}
/* Highlight = the open item only (a focused item does not stay highlighted after its flyout closes; keyboard focus shows its own outline) */
.db-hdr .mega-menu-v2-navbar-parent-cat-listing > li.hover-state-active {background-color:var(--color-header-link-active-bg); box-shadow:inset 0 -4px 0 var(--color-header-link-hover);}

@media (min-width: 992px) and (min-height: 501px), (min-width: 992px) and (hover: hover) {
	.db-hdr .mega-menu-v2-navbar-parent-cat-listing > li {padding:0 4px;}
	.db-hdr .mega-menu-v2-navbar-parent-cat-listing > li > a {padding:0 8px; font-size:calc(16px * var(--db-nav-scale, 1));}
}
@media (min-width: 1200px) and (min-height: 501px), (min-width: 1200px) and (hover: hover) {
	.db-hdr .mega-menu-v2-navbar-parent-cat-listing > li {padding:0 8px;}
	.db-hdr .mega-menu-v2-navbar-parent-cat-listing > li > a {font-size:calc(18px * var(--db-nav-scale, 1));}
}

/* ---------- Flyouts ----------
   Open when the item has .hover-state-active (mouse hover from the component, tap and keyboard from db.js / the component).
   They drop from the bottom of the header across its full width and scroll inside themselves when taller than the screen
   (db.js keeps --db-hdr-bottom up to date). Tablets: links only. Desktop: links and the bottom images. Wide: also the right-side image. */
.db-hdr .mega-menu-v2-flyout-wrapper {display:none; position:absolute; top:100%; left:0; right:0; z-index:5; width:auto; max-width:none; height:auto; margin:0; padding:24px 0 28px; border:0; border-top:1px solid var(--border-medium); background-color:var(--color-white); color:var(--text-body); text-align:left; box-shadow:0 8px 16px rgba(0,0,0,.25); max-height:calc(100vh - var(--db-hdr-bottom, 160px) - 8px); max-height:calc(100dvh - var(--db-hdr-bottom, 160px) - 8px); overflow-y:auto; overscroll-behavior:contain;}
.db-hdr .mega-menu-v2-navbar-parent-cat-listing > li.hover-state-active > .mega-menu-v2-flyout-wrapper {display:block;}
/* A flyout taller than the screen (db.js adds .is-scrolling) gets extra space at the bottom, so its last links can scroll clear of the chat and accessibility buttons */
.db-hdr .mega-menu-v2-flyout-wrapper.is-scrolling {padding-bottom:112px;}
/* The component's arrow button shows only while it has keyboard focus - keep it beside the label instead of on top of it */
.db-hdr .db-mega-menu .db-mega-menu__toggle:focus {position:static;}
.db-hdr .mega-menu-v2-flyout-container {display:flex; gap:32px; width:var(--container-width); max-width:1200px; height:auto; margin:0 auto; padding:0;}
.db-hdr .mega-menu-v2-flyout-wrapper.designers .mega-menu-v2-flyout-container {flex-direction:column; gap:0;}
.db-hdr .mega-menu-v2-flyout-left-side {flex:1 1 auto; min-width:0; float:none; width:auto;}
.db-hdr .mega-menu-v2-flyout-right-side {display:none; flex:0 0 auto; max-width:280px; float:none;}
.db-hdr .mega-menu-v2-flyout-right-side img {display:block; width:auto; max-width:100%; height:auto; max-height:400px;}
.db-hdr .mega-menu-v2-flyout-links-wrapper {display:flex; flex-wrap:wrap; gap:8px 32px; width:auto; height:auto; min-height:0;}
.db-hdr .mega-menu-v2-flyout-links-list {flex:1 1 180px; float:none; width:auto; margin:0; padding:0; list-style:none;}
/* Designers: one long A-Z run split into even newspaper-style columns (the component splits the names into several lists of 16) */
.db-hdr .mega-menu-v2-flyout-links-wrapper.designers {display:block; column-count:3; column-gap:32px;}
.db-hdr .mega-menu-v2-flyout-links-list.designers {display:block; width:auto;}
.db-hdr .mega-menu-v2-flyout-links-list.designers li {break-inside:avoid;}
.db-hdr .mega-menu-v2-flyout-links-list li {margin:0;}
.db-hdr .mega-menu-v2-flyout-links-list li a {display:inline-block; padding:4px 0; font-family:var(--font-primary); font-size:var(--font-size-sm); font-weight:var(--font-weight-regular); line-height:1.35; color:var(--text-body);}
.db-hdr .mega-menu-v2-flyout-links-list li a:is(:hover, :focus) {color:var(--color-menu-link-hover); text-decoration:none;}
.db-hdr .mega-menu-v2-flyout-links-list li a:focus-visible {outline:2px solid var(--color-focus); outline-offset:2px;}
.db-hdr .mega-menu-v2-flyout-links-list li.mega-menu-v2-flyout-links-header {margin:20px 0 6px; font-family:var(--font-primary); font-size:var(--font-size-md); font-weight:var(--font-weight-bold); color:var(--text-body); text-transform:uppercase;}
.db-hdr .mega-menu-v2-flyout-links-list li.mega-menu-v2-flyout-links-header a {padding:0; font-size:inherit; font-weight:inherit; color:inherit;}
.db-hdr .mega-menu-v2-flyout-links-list li.mega-menu-v2-flyout-links-header:first-child,
.db-hdr .mega-menu-v2-flyout-links-list li.first-links-header {margin-top:0;}
.db-hdr .mega-menu-v2-flyout-links-list li.view-all-designers-link a {color:var(--brand-red-deep); text-transform:uppercase;}
.db-hdr .mega-menu-v2-flyout-bottom-creative-wrapper,
.db-hdr .mega-menu-v2-flyout-designers-logo-bar,
.db-hdr .mega-menu-v2-flyout-bottom-bar {display:none;}

/* Close button - added to each flyout by db.js; stays at the top right while the flyout scrolls */
.db-flyout-close {position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin:-12px 12px -32px auto; padding:0; border:0; border-radius:50%; background-color:var(--color-white); color:var(--text-body); cursor:pointer;}
.db-flyout-close:hover {background-color:var(--surface-muted);}
.db-flyout-close:focus-visible {outline:2px solid var(--color-focus); outline-offset:0;}

@media (min-width: 992px) and (min-height: 501px), (min-width: 992px) and (hover: hover) {
	.db-hdr .mega-menu-v2-flyout-links-list li a {font-size:var(--font-size-md);}
	.db-hdr .mega-menu-v2-flyout-links-list.designers li a {font-size:var(--font-size-sm);}
	.db-hdr .mega-menu-v2-flyout-links-wrapper.designers {column-count:4;}
	/* One row: the images shrink to share the width (the two 420px images wrapped onto two rows when the right-side image took space) */
	.db-hdr .mega-menu-v2-flyout-bottom-creative-wrapper {display:flex; flex-wrap:nowrap; gap:16px; margin-top:24px;}
	.db-hdr .mega-menu-v2-flyout-bottom-creative-wrapper a {flex:0 1 420px; min-width:0;}
	.db-hdr .mega-menu-v2-flyout-bottom-creative-wrapper a:has(.mega-menu-bottom-creative-three-images) {flex-basis:265px;}
	.db-hdr .mega-menu-v2-flyout-bottom-creative-wrapper a:has(.mega-menu-bottom-creative-one-image) {flex:1 1 auto;} /* a single wide image fills the row, as before */
	.db-hdr .mega-menu-v2-flyout-bottom-creative-wrapper img {display:block; width:100%; max-width:none; height:auto; margin:0 !important;}
	.db-hdr .mega-menu-v2-flyout-designers-logo-bar {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-top:24px; padding-top:16px; border-top:1px solid var(--border-light);}
	.db-hdr .mega-menu-v2-designers-flyout-logo {display:block; flex:0 1 140px; width:auto !important; margin:0; position:static;}
	.db-hdr .mega-menu-v2-designers-flyout-logo img {display:block; width:100%; height:auto;}
}
@media (min-width: 1200px) and (min-height: 501px), (min-width: 1200px) and (hover: hover) {
	.db-hdr .mega-menu-v2-flyout-right-side {display:block;}
	.db-hdr .mega-menu-v2-flyout-links-wrapper.designers {column-count:5;}
}

/* ---------- Phone menu panel (built by db.js generateMobileNavPanel) ----------
   Slides in from the left under the header (db.js sets --db-hdr-bottom and the margin-left values).
   Width: 90% of the screen, up to 420px (on wide phones and small windows a full-width panel put the category arrows far from the names).
   Height: as tall as its list, up to the bottom of the screen less 80px for the chat and accessibility buttons; longer lists scroll inside it. */
:root {--db-panel-w:min(90vw, 420px);}
.mega-menu-v2-mobile-nav-panel,
.mega-menu-v2-second-level-mobile-nav-panel {position:fixed; top:var(--db-hdr-bottom, 56px); left:0; z-index:1001; display:flex; flex-direction:column; width:var(--db-panel-w); height:auto; max-height:calc(100vh - var(--db-hdr-bottom, 56px) - 80px); max-height:calc(100dvh - var(--db-hdr-bottom, 56px) - 80px); padding:0; box-shadow:0 8px 16px rgba(0,0,0,.3); transition:margin .4s ease-in-out;}
.mega-menu-v2-mobile-nav-panel {margin-left:calc(-1 * var(--db-panel-w) - 24px); background-color:var(--color-white);}
.mega-menu-v2-second-level-mobile-nav-panel {width:calc(var(--db-panel-w) * 5 / 6); margin-left:var(--db-panel-w); background-color:var(--surface-muted);} /* opens beside a 1/6 strip of the main list, ending where the main panel ends */
@media (prefers-reduced-motion: reduce) {.mega-menu-v2-mobile-nav-panel, .mega-menu-v2-second-level-mobile-nav-panel {transition:none;}}
.mobile-nav-panel-top-border {flex:none; width:100%; height:6px; background-color:var(--brand-maroon);}
.mobile-nav-panel-inner-wrapper {flex:1 1 auto; min-height:0; width:100%; height:auto; padding:0; overflow-y:auto; overscroll-behavior:contain;}
.mobile-nav-panel-inner-wrapper > ul {margin:0; padding:0; list-style:none;}
.mobile-nav-panel-inner-wrapper > ul > li {position:relative; display:flex; align-items:center; width:100%; min-height:50px; height:auto; padding:0 0 0 16px; border-bottom:1px solid var(--border-light); text-align:left; cursor:pointer;}
.mobile-nav-panel-inner-wrapper > ul > li a {flex:1 1 auto; display:block; padding:14px 0; font-family:var(--font-primary); font-size:var(--font-size-md); font-weight:var(--font-weight-bold); line-height:1.35; color:var(--color-black);}
.mobile-nav-panel-inner-wrapper > ul > li .drill-down {flex:none; display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px; margin:0; padding:0; border:0; border-left:1px solid var(--border-light); background:none; font-size:var(--font-size-lg); color:var(--text-subtle); cursor:pointer;}
/* Bootstrap draws an outline on every focused link and button, including after a mouse click (Firefox showed it on the clicked row). Keep it for keyboard focus only. */
.mobile-nav-panel-inner-wrapper :is(a, button):focus:not(:focus-visible),
.db-hdr :is(a, button):focus:not(:focus-visible) {outline:none;}
.mobile-nav-panel-inner-wrapper > ul > li .drill-down:focus-visible,
.mobile-nav-panel-inner-wrapper > ul > li a:focus-visible,
.db-panel-back:focus-visible {outline:2px solid var(--color-focus); outline-offset:-2px;}
.mobile-nav-panel-inner-wrapper li.mobile-nav-panel-active-li,
.mega-menu-v2-second-level-mobile-nav-panel ul li.second-level-mobile-nav-panel-active-li {background-color:var(--brand-maroon);}
/* White on maroon - also wins over the site-wide link hover color, which sticks after a tap on phones */
.mobile-nav-panel-inner-wrapper li.mobile-nav-panel-active-li a,
.mobile-nav-panel-inner-wrapper li.mobile-nav-panel-active-li .drill-down,
.mega-menu-v2-second-level-mobile-nav-panel ul li.second-level-mobile-nav-panel-active-li a {color:var(--color-white);}
.mega-menu-v2-second-level-mobile-nav-panel ul li {border-bottom-color:var(--border-medium);}
.mega-menu-v2-second-level-mobile-nav-panel ul li.second-level-mobile-nav-panel-drilled-down-category {padding:0; gap:4px; font-family:var(--font-primary); font-size:var(--font-size-md); font-weight:var(--font-weight-bold); color:var(--color-black); border-bottom:1px solid var(--color-black); cursor:auto;}
.db-panel-back {display:inline-flex; align-items:center; gap:4px; min-height:50px; padding:0 12px 0 16px; border:0; background:none; font-size:var(--font-size-sm); font-weight:var(--font-weight-bold); color:var(--brand-red-deep); cursor:pointer;}