/*
 * Bespoke Selections - light mobile menu
 * Overrides the theme's dark mobile panel (style.css "Mobile nav").
 * Loaded after style.css so equal-specificity rules here win.
 */

.mobile-on .desktop-nav ul {
    background: #fff;
}

/* the open phone / tablet menu: a line all round, top included */
.mobile-on .desktop-nav > ul {
    border: 1px solid #4B4E52;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.mobile-on .desktop-nav ul li a {
    color: #4B4E53;
    border-bottom: 1px solid #4B4E52;
}

.mobile-on .desktop-nav ul li a:hover,
.mobile-on .desktop-nav ul li a.active {
    background: #EFEEEA;
    color: #4B4E53;
}

/* sub menu (Catalogues) */
.mobile-on .desktop-nav ul li ul {
    border-bottom: 1px solid #4B4E52;
}

.mobile-on .desktop-nav ul li .mn-sub {
    background: #F7F6F3;
}

.mobile-on .desktop-nav ul li .mn-sub li a {
    color: #4B4E53 !important;
    background: transparent;
}

.mobile-on .desktop-nav ul li .mn-sub li a:hover,
.mobile-on .desktop-nav ul li .mn-sub li a.active {
    background: #EFEEEA !important;
    color: #4B4E53 !important;
}

/* dropdown arrow: graphite instead of white */
.mobile-on .mn-has-sub > .mn-has-sub-icon,
.mobile-on .inner-nav ul li a:hover .mn-has-sub-icon,
.mobile-on .inner-nav ul li a.active .mn-has-sub-icon {
    border-color: rgba(75, 78, 83, 0.25) !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9px" height="5px"><path fill-rule="evenodd" fill="rgb(75, 78, 83)" d="M8.886,0.631 L8.336,0.117 C8.263,0.049 8.178,0.015 8.083,0.015 C7.988,0.015 7.903,0.049 7.830,0.117 L4.506,3.155 L1.183,0.117 C1.109,0.049 1.025,0.015 0.930,0.015 C0.834,0.015 0.750,0.049 0.677,0.117 L0.127,0.631 C0.053,0.699 0.017,0.778 0.017,0.867 C0.017,0.956 0.053,1.035 0.127,1.103 L4.253,4.892 C4.327,4.960 4.411,4.994 4.506,4.994 C4.602,4.994 4.686,4.960 4.759,4.892 L8.886,1.103 C8.959,1.035 8.996,0.956 8.996,0.867 C8.996,0.778 8.959,0.699 8.886,0.631 L8.886,0.631 Z"/></svg>') !important;
}

.mobile-on .js-opened > .mn-has-sub > .mn-has-sub-icon {
    border-color: rgba(75, 78, 83, 0.45) !important;
}

/* menu button: graphite, no fade when open */
.mobile-nav,
.mobile-nav:hover,
.mobile-nav.active {
    color: #4B4E53;
    opacity: 1;
}

.mobile-nav.active {
    background: #EFEEEA;
}

/* keyboard focus outline: graphite instead of the theme's green */
a:focus.focus-visible,
button:focus.focus-visible,
div:focus.focus-visible,
.mobile-nav:focus.focus-visible {
    -moz-outline: 2px dotted #4B4E53 !important;
    outline: 2px dotted #4B4E53 !important;
}
/* Hero banners: zoom out on phones - a shorter box crops less of the landscape image */
@media (max-width: 767.98px) {
    #home.home-section .min-height-100vh {
        min-height: 62vh !important;
    }

    /* home tagline sits above the scroll-down arrow instead of under it */
    #home h5.hs-line-5 {
        bottom: 52px !important;
    }

    #home .scroll-down-wrap {
        bottom: 4px;
    }
}

/* Site menu (also inline on the older pages; kept here so new pages get it automatically) */
.main-nav .inner-nav.site-nav ul li a {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.main-nav .inner-nav.site-nav ul li a.active {
    font-weight: 600;
    -webkit-text-stroke: 0.4px currentColor;
}

@media (min-width: 1025px) {
    .main-nav .inner-nav.site-nav ul li a,
    .main-nav .inner-nav.site-nav ul li a:hover,
    .main-nav .inner-nav.site-nav ul li a.active {
        color: #4B4E53;
    }

    .main-nav .inner-nav.site-nav ul li {
        margin-left: 34px;
    }

    /* Catalogues dropdown: light panel */
    .main-nav .inner-nav.site-nav .mn-sub {
        width: 240px;
        background: #fff;
        border: 1px solid #4B4E52;
        border-radius: 0;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
    }

    .main-nav .inner-nav.site-nav ul li .mn-sub li a {
        padding: 14px 18px;
        font-size: 14px;
        color: #4B4E53 !important;
        -webkit-text-stroke: 0;
    }

    .main-nav .inner-nav.site-nav ul li .mn-sub li a:hover,
    .main-nav .inner-nav.site-nav ul li .mn-sub li a.active {
        background: #EFEEEA;
        color: #4B4E53 !important;
    }
}

/* Curated Collections repeated as the first item of its own drop-down: only needed on touch
   screens, where a tap on the menu item opens the drop-down; with a mouse the item itself is the link */
@media (min-width: 1025px) and (hover: hover) {
    .main-nav .inner-nav.site-nav .mn-sub .mn-sub-parent {
        display: none;
    }
}

/* Compact bar after scrolling: the logo image has wide transparent margins (the lettering is
   ~40% of its height), so it can be taller than the 65px bar and still sit inside it */
@media (min-width: 1025px) {
    .nav-logo-wrap .logo.small-height img {
        height: 84px;
        max-height: none !important;
    }
}

@media (min-width: 1025px) and (max-width: 1279.98px) {
    .main-nav .inner-nav.site-nav ul li {
        margin-left: 20px;
    }

    .main-nav .inner-nav.site-nav ul li a {
        font-size: 14px;
        letter-spacing: 0.04em;
    }
}