/** Shopify CDN: Minification failed

Line 1581:42 Unexpected "{"

**/
.nav-slider li.slick-slide {
    display: block;
}

.bodyflowfixed {
    overflow: hidden;
}

/* new css start here  */
body.mobile_nav_opened,
html.overflow_hidden {
    overflow: hidden !important;
    position: relative;
}

/* body.mobile_nav_opened {
    position:fixed!important;
} */
.mobile_navigation_wrap {
    position: fixed;
    left: 0;
    background: #eeeeee;
    width: 100%;
    max-width: calc(100% - 30px);
    padding: 0px;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transition: all ease 0.35s;
    overflow: auto;
    z-index: 9991;
    height: 100%;
}

/* .mobile_navigation_wrap.noScroll {
    overflow: hidden;
} */
.mobile_menu_overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(105, 105, 105, 0.4);
    z-index: 9990;
    display: none;
}

body.mobile_nav_opened .mobile_menu_overlay {
    display: block;
}

body.mobile_nav_opened .mobile_navigation_wrap {
   transform: translateX(0%);
    -webkit-transform: translateX(0%);
}

.mobile_navigation_wrap .mobile_main_nav_list .m-menu {
    position: absolute;
    left: 0;
    max-width: 100%;
    width: 100%;
    top: 36px;
    height: calc(100% + 0px) !important;
    -moz-transform: translate3d(105, 0, 0);
    -o-transform: translate3d(105, 0, 0);
    -ms-transform: translate3d(105%, 0, 0);
    -webkit-transform: translate3d(105, 0, 0);
    transform: translate3d(105%, 0, 0);
    -moz-transition: transform 0.35s;
    -o-transition: transform 0.35s;
    -webkit-transition: transform 0.35s;
    transition: transform 0.35s;
    z-index: 111;
    overflow: hidden;
    background-color: #fff;
}

.mobile_navigation_wrap .mobile_main_nav_list .m-menu__checkbox:checked+.m-menu {
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translateZ(0);
}

.mobile_navigation_wrap ul.mobile_main_nav_list {
    padding: 58px 0 24px;
    background: #fff;
}

.mobile_navigation_wrap ul.mobile_main_nav_list>li {
    padding: 0 16px;
}

.mobile_navigation_wrap ul.mobile_main_nav_list>li>label,
.mobile_navigation_wrap ul.mobile_main_nav_list>li>a {
    position: relative;
    background: #f5f5f5;
    border: 0;
    margin: 4px 0 0px;
    padding: 0 12px 0 12px;
    background-repeat: no-repeat;
    background-size: 73px auto;
    background-position: right bottom;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 23px;
    min-height: 73px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #000;
    cursor: pointer;
    font-family: Muli, Lato;
    width: 100%;
}

.mobile_navigation_wrap ul.mobile_main_nav_list>li.custonM-gift-guide>label {
    background-size: cover;
    background-position: center center;
    color: #fff;
}

.mobile_navigation_wrap .m-menu__checkbox {
    display: none;
    width: auto;
    margin-right: 0.5rem;
}

.mobile_navigation_wrap .mobile_main_nav_list .m-menu ul li {
    padding: 0 16px;
}

.mobile_navigation_wrap .mobile_main_nav_list .m-menu ul li a {
    display: block;
    text-align: left;
    line-height: 39px;
    text-decoration: none;
    color: #000;
    cursor: pointer;
    border-bottom: 1px solid #e8e8e8;
    position: relative;
    font-size: 13px;
    font-family: Muli, Lato;
    width: 100%;
    line-height: 50px;
}

.mobile_navigation_wrap .mobile-nav-menu {
    min-height: 100%;
    position: relative;
    display: block;
    overflow: hidden;
}

.mobile_navigation_wrap .m-menu__header {
    margin: 0 16px;
    height: 50px;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -ms-flex-pack: space-around;
    -webkit-align-items: center;
    align-items: center;
    border-bottom: 1px solid #e8e8e8;
    position: relative;
}

.mobile_navigation_wrap .m-menu__header span {
    font-size: 1.2rem;
    font-weight: 400;
    text-align: left;
    width: 100%;
    padding-left: 16px;
    color: #727272;
}

.mobile_navigation_wrap .m-menu .m-menu label.m-menu__toggle {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    border-bottom: 0;
    padding: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.mobile_navigation_wrap .m-menu ul span.headr-bdg {
    margin-left: 8px;
}

.mobile_navigation_wrap ul.nav_shipping_list {
    background: #eee;
    margin-top: 0px;
    padding-top: 15px;
    padding-bottom: 50px;
    height: auto;
}

.mobile_navigation_wrap ul.nav_shipping_list li {
    padding: 0 16px;
}

.mobile_navigation_wrap ul.nav_shipping_list li a {
    line-height: 40px;
    border: 0;
    display: block;
    text-align: left;
    text-decoration: none;
    color: #000;
    cursor: pointer;
    position: relative;
    font-size: 13px;
    font-family: Muli, Lato;
    width: 100%;
}

.mobile_navigation_wrap ul.nav_shipping_list li .ship-to-button--mobile {
    margin-left: 0;
    padding-top: 10px;
}

body.header_sticky .headerSection,
body.header_sticky .headerSection .mobile-navigation-wrapper {
    background: #fff;
}

body.pys_index.header_sticky a.nav-brand svg path {
    fill: #000;
}

body.pys_index.header_sticky li.desktop-search svg path {
    fill: #000;
}

body.pys_index.header_sticky .wk-icon svg path {
    stroke: #000 !important;
}

.header_sticky .mobile-navigation-wrapper a#cartopennavmov svg path {
    fill: #000 !important;
    stroke: unset;
}

body.header_sticky .menu-btn {
    top: 57px;
}

.nav-slider li.slick-slide {
    display: block;
}

.bodyflowfixed {
    overflow: hidden;
}

.mds-top-bar .slick-track {
    display: flex;
}

.mds-top-bar-container,
.mds-top-bar {
    max-width: 100%;
}

i.icon-swym-wishlist {
    font-family: "swym-font";
    font-style: normal;
    vertical-align: middle;
}

i.icon-swym-wishlist+span {
    vertical-align: middle;
}

i.icon-swym-wishlist:after {
    content: "";
    font-size: 130%;
    line-height: 18px;
    text-align: center;
    display: inline;
}

/*content rendered after swym is ready to avoid showing block/invalid chars*/
.swym-ready i.icon-swym-wishlist:after {
    content: "\f004";
}

.headerSection header.header_Nav {
    z-index: 111 !important;
}

.pys_index header.header_Nav {
    position: fixed;
    top: 0px;
    background: unset;
}

header.header_Nav {
    border-bottom: none;
    width: 100%;
    transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) !important;
    left: 0;
}

body .desktop-top-header-bar-nav {
    width: 100%;
    height: 35px;
    padding: 0;
    justify-content: center;
    align-items: center;
    background: #f4f4f4;
    position: relative;
    z-index: 9;
    display: flex;
    overflow: hidden;
}

header.header_Nav nav.page-width,
.desktop-top-header-bar-nav .page-width {
    max-width: 100%;
    padding: 0 62px;
}

body .desktop-top-header-bar-nav * {
    color: #000 !important;
}

.top-bar-navm {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 33px;
}

body .top-bar-first-sect {
    right: 0;
    left: unset;
    position: absolute;
}

.top-bar-first-sect ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

header.header_Nav li.nav-mobile__item {
    display: flex;
}

.ship-to-button {
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    font-family: Muli, Lato;
    text-decoration: none;
    position: relative;
    transition:
        opacity 0.4s,
        visibility 0.4s;
    padding: 0;
}

.ship-to-button .ship-to-button__flag {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin-right: 8px;
    background-size: cover;
    line-height: unset;
}

.top-bar-navm .top-bar-middle-box-nav {
    width: 100%;
    text-align: center;
}

.mds-animated-banner__slider-container {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 35px;
    overflow: hidden;
    position: relative;
}

.mds-animated-banner__slider-container>div {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.mds-animated-banner__content {
    display: block;
    opacity: 0;
    position: absolute;
    visibility: hidden;

    margin: 0;
    text-align: center;
    transition: 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
}

.mds-animated-banner__content.-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.mds-animated-banner__content.-next {
    transform: translateY(110%);
}

header.header_Nav .top-bar-navm p.promo-bar__content.p1 {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
}

body .mobile-navigation-wrapper,
.headerSection div.mobile-navigation-wrapper {
    padding: 10px 0;
    display: block;
    transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.mobile_menu_overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(105, 105, 105, 0.4);
    z-index: 9990;
    display: none;
}

.mobile-nav-menu {
    vertical-align: middle;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.mobile-navigation-wrapper .hamburger {
    display: flex;
    align-items: center;
    width: auto;
    height: auto;
    color: currentColor;
    transition: height 0.3s ease-in-out;
}

.mobile-navigation-wrapper .mobile-nav-menu .hamburger div.ham {
    top: 0;
    padding: 0;
    height: auto;
    width: 20px;
    transform: rotate(0);
    transition: 0.5s ease-in-out;
    cursor: pointer;
}

.mobile-nav-menu .hamburger div.ham .mobile-nav-trigger {
    border-radius: 5px;
    cursor: pointer;
    height: 20px;
    margin: 0;
    position: relative;
    width: 20px;
    display: block;
}

.mobile-nav-menu .hamburger div.ham .mobile-nav-trigger__hamburger {
    height: 100%;
    position: absolute;
    transition:
        width 0.25s ease-in-out,
        height 0.25s ease-in-out,
        opacity 0.25s ease-in-out,
        background-color 0.25s ease-in-out;
    width: 100%;
    opacity: 0;
}

.mobile-logo-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0 !important;
}

.mobile-navigation-wrapper nav {
    display: flex;
    justify-content: space-between;
    position: relative;
    height: 63px;
}

.mobile-logo-nav .nav-brand {
    line-height: 35px;
    padding: 0;
    color: #343a40;
    font-size: 22px;
    text-decoration: none !important;
    display: flex;
    transition: 0.73s !important;
}

a.nav-brand svg {
    width: 221px;
    height: 28.707px;
}

.mobile-cart-icon-nav {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.mobile-cart-icon-nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
}

.mobile-cart-icon-nav ul li {
    display: inline-flex;
    align-items: center;
}

.mobile-cart-icon-nav ul li:nth-child(1) {
    padding-top: 2px;
    order: 2;
}

li.desktop-search {
    padding-right: 20px;
}

.mobile-cart-icon-nav ul li:nth-child(2) {
    order: 1;
}

.mobile-cart-icon-nav ul li:last-child {
    order: 3;
}

.mobile-cart-icon-nav a {
    color: #33496e;
    line-height: 15px;
    font-size: 14px;
}

li.search-icon-nav-m button,
.headerSection .nav-action-icons__items svg,
.mobile-cart-icon-nav ul li svg {
    display: block;
}

header.header_Nav svg {
    transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) !important;
}

.pys_index .mobile-cart-icon-nav .wk-icon svg path {
    stroke: #fff;
}

li.desktop-search>span {
    cursor: pointer;
}

html body .mobile-cart-icon-nav ul li svg {
    width: 20px;
    height: 20px;
}

body.pys_index:not(.header_sticky) svg.icon--bag path {
    fill: #fff !important;
}

body.pys_index button.menu-btn,
.new-pages-materials button.menu-btn {
    color: #fff;
}

.menu-btn {
    width: 24px;
    height: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border: none;
    background: transparent;
    cursor: pointer;
    position: absolute;
    z-index: 9999;
    left: 62px;
    top: 67px;
    transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) !important;
}

.menu-bar {
    width: 100%;
    height: 1px;
    background: #000;
    border-radius: 2px;
    transition: all 0.3s ease;
    /* background: transparent; */
}

body.pys_index button.menu-btn .menu-bar,
.new-pages-materials button.menu-btn .menu-bar {
    background-color: #fff;
}

.mobile_menu_overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(105, 105, 105, 0.4);
    z-index: 9990;
    display: none;
}

body .mobile_navigation_wrap {
    background: #fff;
    max-width: 480px;
    position: fixed;
    left: 0;
    width: 100%;
    padding: 0px;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    /* visibility: hidden; */
    transition: transform ease 0.35s, visibility 0s linear 0.35s;
    overflow: auto;
    z-index: 9991;
    height: 100%;
    top: 0;
}

.mobile-nav-menu-wrapper {
    margin-top: 117px;
    height: calc(100% - 117px);
    overflow: auto;
    border-top: 1px solid #e1e1e1;
}

body.mobile_nav_opened .mobile_navigation_wrap {
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
    visibility: visible;
    transition: transform ease 0.35s, visibility 0s linear 0s;
}

.mobile_navigation_wrap .mobile-nav-menu {
    min-height: 100%;
    position: relative;
    display: block;
    overflow: hidden;
}

.m-menu.navmm {
    overflow-x: hidden !important;
}

body .m-menu.navmm .mobile-nav-trigger_cross {
    display: none;
}

body .mobile_navigation_wrap ul.mobile_main_nav_list {
    min-height: 634px;
    padding: 40px 0;
    background: #fff;
    padding-top: 24px;
    list-style: none;
    margin: 0;
}

body .mobile_navigation_wrap ul.mobile_main_nav_list>li {
    display: flex;
    flex-direction: column;
    padding: 0 62px;
}

body .mobile_navigation_wrap ul.mobile_main_nav_list>li>label {
    padding-left: 0;
}

body .mobile_navigation_wrap ul.mobile_main_nav_list>li>label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 16px;
}

body .mobile_navigation_wrap ul.mobile_main_nav_list>li>label,
body .mobile_navigation_wrap ul.mobile_main_nav_list>li>a {
    background: unset !important;
    margin-top: 16px;
    min-height: 41px;
    padding: 0 0;
    color: #000;
    font-size: 20px;
    font-style: normal;
    line-height: 20.8px;
}

body .mobile_navigation_wrap ul.mobile_main_nav_list>li>label,
body .mobile_navigation_wrap ul.mobile_main_nav_list>li>a,
.m-menu__header span {
    font-family: juanalight, serif;
    font-weight: 400 !important;
}

span.headr-bdg {
    border: 1px solid #d2d2d2;
    color: #000;
    font-size: 11px;
    line-height: 18px;
    padding: 2px 10px;
    border-radius: 3px;
    /* background: linear-gradient(#000, #000) no-repeat 0 100% / 0 1px; */
    transition: background-size 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
    margin-left: 8px;
}

.mobile_navigation_wrap ul.mobile_main_nav_list>li>label,
.mobile_navigation_wrap ul.mobile_main_nav_list>li>a {
    position: relative;
    border: 0;
    margin: 4px 0 0px;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
}

.mobile_navigation_wrap ul.mobile_main_nav_list>li >label>span,
.mobile_navigation_wrap ul.mobile_main_nav_list>li >a>span,
body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul li span.nested_menu_text {
    background: linear-gradient(#000, #000) no-repeat 0 100% / 0 1px;
    transition: background-size 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.mobile_navigation_wrap ul.mobile_main_nav_list>li svg {
    transition: opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
    opacity: 0;
}

header.header_Nav svg {
    transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) !important;
}

.mobile_navigation_wrap .m-menu__checkbox {
    display: none;
    width: auto;
    margin-right: 0.5rem;
}

.mobile_navigation_wrap .mobile_main_nav_list .m-menu {
    position: absolute;
    left: 0;
    max-width: 100%;
    width: 100%;
    top: 36px;
    height: calc(100% + 0px) !important;
    -moz-transform: translate3d(105, 0, 0);
    -o-transform: translate3d(105, 0, 0);
    -ms-transform: translate3d(105%, 0, 0);
    -webkit-transform: translate3d(105, 0, 0);
    transform: translate3d(105%, 0, 0);
    -moz-transition: transform 0.35s;
    -o-transition: transform 0.35s;
    -webkit-transition: transform 0.35s;
    transition: transform 0.35s;
    z-index: 111;
    overflow: hidden;
    background-color: #fff;
}

html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu {
    top: -2px;
}

body .mobile_navigation_wrap .mobile_main_nav_list .m-menu {
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    -webkit-transform: translateX(105%);
    transform: translateX(105%);
}

body .mobile_navigation_wrap ul.nav_shipping_list {
    background: #fff;
    border-top: 1px solid #e0e0e0;
    padding-top: 40px;
    position: relative;
    margin: 0;
    padding-left: 62px;
    padding-right: 62px;
    padding-bottom: 50px;
    height: auto;
}

body .mobile_navigation_wrap ul.nav_shipping_list li {
    padding: 0;
}

.mobile_navigation_wrap ul.nav_shipping_list li a {
    line-height: 40px;
    border: 0;
    display: block;
    text-align: left;
    text-decoration: none;
    color: #000;
    cursor: pointer;
    position: relative;
    font-size: 13px;
    font-family: Muli, Lato;
    width: 100%;
}

body .mobile_navigation_wrap ul.nav_shipping_list li.nav-mobile__item.nav_shipping_text {
    display: none;
}

.menu-btn.open .menu-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.menu-btn.open .menu-bar:nth-child(2) {
    opacity: 0;
}

.menu-btn.open .menu-bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

body.pys_index.header_sticky button.menu-btn,
body.mobile_nav_opened button.menu-btn,
body .mobile-navigation-wrapper:hover~button.menu-btn {
    color: #000 !important;
}

body.pys_index.header_sticky button.menu-btn .menu-bar,
body.mobile_nav_opened button.menu-btn .menu-bar,
body .mobile-navigation-wrapper:hover~button.menu-btn .menu-bar {
    background-color: #000 !important;
}

.mobile_navigation_wrap ul.mobile_main_nav_list>li.item_disable,
body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul li.item_disable {
    opacity: 0.6;
}

.mobile_navigation_wrap ul.mobile_main_nav_list>li.item_active svg {
    opacity: 1;
}

.mobile_navigation_wrap ul.mobile_main_nav_list>li.item_active span,
body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul li.item_active span.nested_menu_text {
    background-size: 100% 1px;
}

body .mobile_navigation_wrap .mobile_main_nav_list .m-menu {
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    -webkit-transform: translateX(105%);
    transform: translateX(105%);
}

body .mobile_navigation_wrap .mobile_main_nav_list .m-menu__checkbox:checked+.m-menu {
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translateX(0);
}

.mobile-nav-menu-wrapper.noScroll {
    overflow: hidden !important;
}

.no-scroll-animate {
    scroll-behavior: auto !important;
}

html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul li,
html body .mobile_navigation_wrap .m-menu__header {
    padding-left: 62px;
    padding-right: 62px;
    margin: 0;
}

body .mobile_navigation_wrap .m-menu .m-menu label.m-menu__toggle {
    position: unset;
    width: auto;
    align-items: center;
}

body label.m-menu__toggle svg {
    height: 14px;
    width: 19px;
    stroke: unset;
}

.mobile_navigation_wrap ul.mobile_main_nav_list>li .m-menu__header svg {
    opacity: 1;
}

label.m-menu__toggle:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    cursor: pointer;
}

body .mobile_navigation_wrap .m-menu__header span {
    background: unset !important;
    text-align: left;
    width: 100%;
    padding-left: 10px;
    color: #000;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 20.8px;
}

.mobile_navigation_wrap .mobile_main_nav_list .m-menu ul {
    padding: 24px 0;
}

body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul li {
    padding: 5px 16px;
}

body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul li a {
    border: 0;
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20.8px;
    line-height: 41px;
    display: block;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    width: 100%;
    font-family: Lato;
}

body .mobile_navigation_wrap .m-menu__header {
    height: 65px;
}

.mobile-navigation-wrapper:hover {
    background: #fff !important;
}

.mobile-navigation-wrapper:hover button.menu-btn {
    color: #000;
}

.mobile-navigation-wrapper:hover button.menu-btn .menu-bar {
    background-color: #000;
}

.mobile-navigation-wrapper:hover a.nav-brand svg path,
.mobile-navigation-wrapper:hover .mobile-nav-trigger__hamburger svg path,
.mobile-navigation-wrapper:hover li.desktop-search svg path,
.mobile-navigation-wrapper:hover li.search-icon-nav-m svg path,
.mobile-navigation-wrapper:hover a#cartopennavmov svg path {
    fill: #000 !important;
}

body .mobile-navigation-wrapper:hover .mobile-cart-icon-nav .wk-icon svg path {
    stroke: #000 !important;
}

.mobile-nav-menu .mobile_menu_mask {
    display: none;
}

a.wk-button.wk-align-center.wk-align-content-center wk-counter.wk-floating {
    display: none;
}

a.wk-button.wk-align-center.wk-align-content-center.wk-selected wk-counter.wk-floating {
    display: block;
}

.mobile-navigation-wrapper .btn-cart-trigger__count {
    margin-left: 0;
    transition: opacity 0.4s;
    font-size: 13px;
    line-height: normal;
    color: #fff;
    position: absolute;
    width: 17px;
    height: 18px;
    top: -8px;
    right: -17px;
    min-width: 18px;
    background: #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

a.btn-cart-trigger {
    position: relative;
}

.search_bar_closer {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: transparent;
    pointer-events: none;
    z-index: 3;
    transition: background-color 0.3s;
    display: block !important;
}

.search-bar-body-class-open .search_bar_closer {
    background-color: #0000004d;
    pointer-events: auto;
}

body .mobile_navigation_wrap ul.mobile_main_nav_list>li>label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 16px;
}

li.custonM-our-maison span {
    color: #0a265d !important;
}

li.custonM-our-maison span {
    color: #0a265d !important;
}

li.custonM-our-maison .m-menu ul li span {
    color: #000 !important;
}
body.header_sticky #cartpopupboxnav.activenav .modal-header-nav button.cart-close-mobile-btn {
    top: 55px;
}
@media (min-width: 768px) {
    .mobile-nav-menu li.search-icon-nav-m {
        display: none;
    }

    body.header_sticky .headerSection a.nav-brand svg {
        transform: scale(0.7);
    }

    body.header_sticky .mobile-navigation-wrapper nav {
        height: 43px;
    }
}

@media (max-width: 991px) {
    body .mobile_navigation_wrap ul.nav_shipping_list {
        padding-left: 20px;
        padding-right: 20px;
    }

    .mobile_navigation_wrap ul.mobile_main_nav_list>li .m-menu__header svg {
        opacity: 1;
    }

    label.m-menu__toggle svg {
        left: -5px;
    }

    .mobile_navigation_wrap .m-menu__header span.true {
        line-height: unset;
    }

    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul li,
    html body .mobile_navigation_wrap .m-menu__header {
        padding-left: 20px;
        padding-right: 20px;
    }

    body .mobile_navigation_wrap .m-menu .m-menu label.m-menu__toggle {
        position: absolute;
        width: 100%;
        height: 100%;
        padding-left: 21px;
    }

    html body .mobile_navigation_wrap .m-menu__header {
        padding-left: 45px;
        padding-right: 20px;
    }

    .mobile_navigation_wrap ul.mobile_main_nav_list>li span,
    body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul li span.nested_menu_text {
        background: unset;
    }

    body:not(.pys_index) .mobile-nav-menu-wrapper,
    .mobile-nav-menu-wrapper {
        margin-top: 92px;
        height: calc(100% - 92px);
    }

    .mobile-nav-menu .m-menu.navmm {
        height: unset !important;
        position: unset;
        max-width: unset;
        transform: unset;
        background: #fff;
        overflow: unset;
    }

    .mobile-nav-menu .m-menu.navmm:not(.second_menu_opened) {
        overflow-y: auto;
    }

    .mobile_navigation_wrap ul.mobile_main_nav_list>li svg {
        transition: opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
        opacity: 1;
    }
        html body .headerSection div.mobile-navigation-wrapper  {
        padding: 18px 0px;
                /* max-width: 480px; */
    }
        html body.pys_index .headerSection:not(.is-scrolled) header.header_Nav .mobile-navigation-wrapper {
        background: #fff !important;
    }
}

@media (max-width: 991px) {
    .overflow_hide.searchfilter_open header.header_Nav {
    background: #fff;
}
    .searchfilter_open {
        overflow: hidden;
        height: 100vh;
    }

    body .mobile-navigation-wrapper .btn-cart-trigger__count {
        top: -6px;
        bottom: auto;
        right: -11px;
        min-width: unset;
        font-size: 10px;
        width: 14px;
        height: 14px;
        line-height: 1;
    }

    .search-bar-body-class-open li.search-icon-nav-m {
        opacity: 0;
        pointer-events: none;
    }

    .search-bar-body-class-open button.menu-btn,
    .search-bar-body-class-open .mobile-navigation-wrapper .hamburger {
        display: none;
    }

    .menu-btn {
        width: 20px;
        height: 20px;
        left: 20px;
        top: 21px;
    }

    .menu-btn.open .menu-bar:nth-child(1) {
        transform: translateY(5px) rotate(45deg);
    }

    .menu-btn.open .menu-bar:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .mobile-cart-icon-nav wishlist-link .wk-counter {
        min-width: 7px;
        height: 7px;
        top: -8px;
    }

    body .desktop-top-header-bar-nav {
        height: 33px;
    }

    body .mobile-navigation-wrapper li.search-icon-nav-m {
        margin-left: 15px;
        margin-top: 5px;
    }

    body .mobile-navigation-wrapper li.search-icon-nav-m {
        margin-left: 15px;
        margin-top: 5px;
    }

    header.header_Nav nav.page-width,
    .desktop-top-header-bar-nav .page-width {
        padding: 0 20px;
    }

    li.search-icon-nav-m button {
        border: 0;
        background: transparent;
        padding: 0;
        cursor: pointer;
        color: #34486f;
        fill: #000;
        width: 15px;
        height: auto;
    }

    li.search-icon-nav-m button.btn-search>svg {
        width: 16px;
        height: 16px;
    }

    .mobile-navigation-wrapper .mobile-nav-menu {
        flex-direction: row;
        align-items: center;
    }

    body:not(.pys_index) li.search-icon-nav-m svg path,
    li.search-icon-nav-m svg path {
        fill: #000;
    }

    body .mobile-navigation-wrapper .mobile-logo-nav {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 0 !important;
    }

    a.nav-brand svg {
        width: 142px;
        height: 18px;
    }

    li.desktop-search {
        padding-right: 20px;
        display: none !important;
    }

    .mobile-navigation-wrapper nav {
        height: auto;
        position: unset;
    }

    .menu-btn {
        width: 20px;
        height: 20px;
        left: 20px;
        top: 21px !important;
    }

    div.mobile-navigation-wrapper {
        position: relative;
    }

    html body div.mobile-navigation-wrapper {
        padding: 18px 0;
    }

    div .mobile-cart-icon-nav wishlist-link .wk-button {
        margin-right: 13px;
    }

    .mobile-cart-icon-nav wk-icon.wk-icon svg {
        width: 19px !important;
        height: 19px !important;
    }

    body .mobile-cart-icon-nav ul li span.btn-cart-trigger__icon {
        padding: 0;
        display: block;
    }

    html body .mobile-cart-icon-nav ul li svg.icon--bag {
        width: 19px;
        height: 19px;
    }

    .top-bar-navm {
        line-height: normal;
        display: flex;
        justify-content: center;
    }

    .top-bar-first-sect,
    .nav-action-icons-nav {
        display: none;
    }

    header.header_Nav .top-bar-navm p.promo-bar__content.p1 {
        font-size: 10px;
    }

    form.search-result-form input {
        border-color: #cbcbcb !important;
    }

    body.pys_index.ss__autocomplete--active button.closeSearchResults {
        display: block;
    }

    body.pys_index.ss__autocomplete--active form.search-result-form {
        max-width: calc(100% - 28px);
    }


    body.pys_index.ss__autocomplete--active .ss__autocomplete--target.ss__autocomplete--custom {
        height: calc(100% - 53px) !important;
        max-height: calc(100% - 53px) !important;
        overflow: auto;
        min-height: inherit !important;
        position: absolute !important;
    }

    body.pys_index .searchResultMain .search-results-wrapper {
        position: static;
    }

    body.pys_index.ss__autocomplete--active .searchResultMain {
        height: calc(100dvh - 81px);
    }

    body.pys_index .ss__autocomplete--custom .ss__autocomplete.ss__autocomplete--overflow .ss__autocomplete__content .ss__results {
        overflow-y: auto;
        max-height: calc(100vh - 281px);
    }

    body.pys_index .searchResultMain {
        top: 81px;
        transform: translate(0px, 0%);
    }

    body.pys_index .searchHeader {
        padding: 6px 0 12px;
    }

    body.pys_index .ss__autocomplete--target.ss__autocomplete--custom {
        top: 0;
        transform: translateY(-150%);
        position: fixed !important;
        visibility: hidden;
        transition: transform 0.3s ease-in-out, visibility 0s linear 0.3s;
        border: 0;
    }

    body.pys_index.ss__autocomplete--active .ss__autocomplete--target.ss__autocomplete--custom {
        transform: translate(0);
        top: 53px;
        visibility: visible;
        transition: transform 0.3s ease-in-out, visibility 0s linear 0s;
    }

    body.pys_index.ss__autocomplete--active {
        overflow: hidden !important;
        height: 100dvh;
        position: fixed !important;
        -webkit-overflow-scrolling: touch;
    }

    body.body_scroll_down.ss__autocomplete--active .headerSection {
        transform: none;
    }

    body.body_scroll_down.pys_index.ss__autocomplete--active .searchResultMain {
        transform: none;
    }

    body.pys_index button.closeSearchResults {
        display: none;
    }

    body.pys_index form.search-result-form {
        max-width: 100%;
    }

    body.pys_index .headerSection .mobile-navigation-wrapper {
        background: #fff;
    }

    body.pys_index:not(.mobile_sticky_only) a.nav-brand svg path {
        fill: #000;
    }

    body.pys_index .wk-icon svg path {
        stroke: #000 !important;
    }

    body.pys_index .mobile-navigation-wrapper a#cartopennavmov svg path {
        fill: #000 !important;
    }

    body.pys_index button.menu-btn .menu-bar {
        background-color: #000 !important;
    }

    body.pys_index .custom_scroll {
        margin-top: 100px;
    }

    body.body_scroll_down.pys_index .searchResultMain {
        transform: translateY(-172px);
        transition: transform 0.3s;
    }

    body.pys_index li.search-icon-nav-m {
        opacity: 0;
    }

    body.pys_index .searchResultMain {
        z-index: 9;
    }

    body.pys_index .mobile-navigation-wrapper .mobile-logo-nav {
        /* margin-top: 2.5px; */
    }

    span.search-svg-icon {
        display: flex;
    }

    .mobile-navigation-wrapper .mobile-nav-menu .hamburger div.ham {
        width: 18px;
    }

    span.search-svg-icon svg path {
        fill: #757782;
    }

    header.header_Nav {
        position: relative !important;
    }

    body .headerSection {
        position: fixed !important;
        width: 100%;
        z-index: 99;
        top: 0;
    }

    .shopify-section-group-header-group.headerSection {
        transition: transform 0.3s;
    }

    body.body_scroll_down .shopify-section-group-header-group.headerSection {
        transform: translateY(-100px);
    }

    body .mobile_navigation_wrap ul.mobile_main_nav_list>li {
        padding: 0 20px;
    }
}

@media (max-width: 479px) {
    .mobile_navigation_wrap .m-menu__header span {
        padding-left: 22px;
    }
}

@media (max-width: 991px) {

html body.new-pages-materials .headerSection {
    box-shadow: unset;
}
    body.mobile_sticky_only .headerSection.nav-down,
    body:not(.pys_index) .headerSection {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .account_tabs_wrap {
        flex-wrap: wrap;
    }

    .account_tabs_wrap ul.tabMenu {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }

    .account_tabs_content {
        max-width: 100%;
        flex: 0 0 100%;
    }

    .account_tabs_wrap .order_title>h2,
    .order_title>p {
        font-size: 16px;
    }

    .account_details h2 {
        font-size: 16px;
        margin: 0 0 10px;
    }

    .account_details p {
        font-size: 14px;
    }

    .addresses h2 {
        font-size: 16px;
    }

    .customer.addresses form>.field {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 991px) {
    body .mobile_navigation_wrap ul.mobile_main_nav_list {
        position: relative;
    }

    .mobile_navigation_wrap .mobile_main_nav_list .m-menu {
        height: auto !important;
        min-height: 100%;
    }
}

/* new css 30-07-2026 */
body.pys_collection header.header_Nav,
  body.pys_product header.header_Nav {
    position: fixed;
    top: 0;
    background: unset;
  }
  /* Pull content up so the hero sits behind the floating header (this inline
     block loads after base.css, so it beats the body:not(.pys_index)
     #MainContent margins at equal specificity). */
  body.pys_product main#MainContent {
   margin-top: var(--mds-header-clear, 83px) !important;
  }
  /* Collection: reserve clearance equal to the resting header height (set via JS
     as --mds-header-clear) so the feature tile / product grid starts BELOW the
     transparent header instead of hiding under it — the header floats cleanly
     over the page background when not scrolled. PDP stays full-bleed (0). */
  body.pys_collection main#MainContent ,  {
    margin-top: var(--mds-header-clear, 83px) !important;
  }
  /* No drop shadow anywhere on the glass header — base.css hangs shadows on
     several wrappers (and only strips them on scroll). The glass ::before
     keeps a faint inset specular only. */
  html body .headerSection,
  html body .headerSection,
  html body header.header_Nav,
  html body header.header_Nav .desktop-navigation-wrapper,
  html body header.header_Nav .mobile-navigation-wrapper {
    /* box-shadow: none !important; */
  }
  /* GLOBAL liquid-glass header: every page shows the glass at rest EXCEPT
     the homepage (pys_index) and PDP (pys_product), which stay fully
     transparent over their imagery and pick up the same glass once
     scrolled (.header_sticky). Glass lives on a ::before layer, NOT the
     header element itself — backdrop-filter on the header would make it
     the containing block for the position:fixed megamenu and trap the
     dropdown. The element backgrounds are neutralised so the glass layer
     owns the surface (theme.liquid/base.css paint them white on scroll). */
  html body header.header_Nav,
  html body .headerSection,
  html body.header_sticky .headerSection,
  html body.header_sticky header.header_Nav,
  html body.header_sticky .headerSection .mobile-navigation-wrapper,
  html body header.header_Nav .mobile-navigation-wrapper {
    background: transparent !important;
    border: none;
  }
  html body.pys_product:not(.header_sticky) header.header_Nav .mobile-navigation-wrapper {
    background: #fff !important;
}

  @media (min-width: 992px) {
    /* Drop the desktop nav bar's hairline bottom border (base.css adds it at
       >=991px) so the floating header reads as a clean glass bar. */
    html body header.header_Nav .desktop-navigation-wrapper {
      border-bottom: none;
    }
  }
  /* The glass layer ALWAYS exists (invisible, blur at zero) so its arrival
     can be gradual — a state-rendered ::before pops in with no transition
     possible. Scrolling past the threshold fades it in while the blur
     itself ramps 0→7px: the header MATERIALISES rather than jumping. */
  header.header_Nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.28));
    -webkit-backdrop-filter: blur(0px) saturate(100%) contrast(1);
    backdrop-filter: blur(0px) saturate(100%) contrast(1);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6);
    opacity: 0;
    transition: opacity 0.5s ease, backdrop-filter 0.5s ease, -webkit-backdrop-filter 0.5s ease;
    pointer-events: none;
  }
 
  body:not(.pys_index):not(.pys_product) header.header_Nav::before,
  body.header_sticky header.header_Nav::before,
  .headerSection.is-scrolled header.header_Nav::before
  {
    opacity: 1;
    -webkit-backdrop-filter: blur(7px) saturate(175%) contrast(1.04);
    backdrop-filter: blur(7px) saturate(175%) contrast(1.04);
  }
   @media (min-width:991px){
header.header_Nav:hover::before {

}

   }

  /* ── Mid-gesture glass ─────────────────────────────────────────────
     body.header_sticky deliberately lands only at touchend — flipping a
     BODY class mid-drag restyles the whole page (~100ms) and janks the
     gesture (theme.liquid). So while the finger was down the header sat
     transparent over scrolled content. The scroll JS (below the header
     markup) mirrors the same state onto the SECTION root instead: that
     subtree restyle never touches the moving page content, so it's cheap
     enough to land live during the drag. These mirrors make the chrome
     answer to EITHER signal — the #id out-specifies every unscrolled
     white-icon rule in base.css. */
  body.pys_index .headerSection.is-scrolled a.nav-brand svg path,
  body.pys_index .headerSection.is-scrolled li.desktop-search svg path,
  body.pys_index .headerSection.is-scrolled a#cartopennavmov svg path,
  body.pys_index .headerSection.is-scrolled svg.icon--bag path,
  body.pys_index .headerSection.is-scrolled .hamburger div.ham svg path,
  body.pys_index .headerSection.is-scrolled li.search-icon-nav-m svg path {
    fill: #000;
  }
  body.pys_index .headerSection.is-scrolled .wk-icon svg path {
    stroke: #000 !important;
  }
  body.pys_index .headerSection.is-scrolled .mobile-nav-menu .hamburger div.ham .mobile-nav-trigger__hamburger-child {
    background: #000;
  }
  body.pys_index .headerSection.is-scrolled button.menu-btn {
    color: #000 !important;
  }
  body.pys_index .headerSection.is-scrolled button.menu-btn .menu-bar {
    background-color: #000 !important;
  }
      span.nested_menu_text {
        font-family: 'Muli';
    }
  /* Homepage mobile AT-TOP state: solid WHITE bar (the default look), not
     transparent-over-video — the blanket transparent !important above killed
     base.css's homepage white, which is why the strip loaded see-through.
     Keyed to the live .is-scrolled mirror: white at rest, dissolves into the
     glass once past the 30%-viewport threshold, returns on the way back up.
     The #id + !important out-ranks the neutralisation rules.
     MOBILE-SCOPED: .mobile-navigation-wrapper is ALSO the desktop bar in
     this theme (desktop nav rides the drawer chrome), and unscoped this
     painted the desktop homepage white at rest — desktop stays transparent
     over the hero like it always was. */
     body.pys_collection main#MainContent {
    margin-top: var(--mds-header-clear, 96px) !important;
}
  @media (max-width: 991.98px) {

     body.pys_collection main#MainContent {
    margin-top: var(--mds-header-clear, 60px) !important;
  }
  body.pys_product main#MainContent {
    margin-top: var(--mds-header-clear, 60px) !important;
  }
    html body.pys_index .headerSection header.header_Nav .mobile-navigation-wrapper {
      transition: background 0.4s ease;
    }
    html body.pys_index .headerSection:not(.is-scrolled) header.header_Nav .mobile-navigation-wrapper {
      background: #fff !important;
    }
  }
  /* The PDP's ≤749px glass bar (base.css keys it on pys_product.header_sticky)
     rides the same mirror so it also materialises mid-drag. */
  @media (max-width: 749px) {
          html body.pys_product:not(.header_sticky) header.header_Nav .mobile-navigation-wrapper {
    background: transparent !important;
}
span.nested_menu_text {
    font-size: 14px;
}
    body.pys_product .headerSection.is-scrolled header.header_Nav .mobile-navigation-wrapper::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(165deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.28));
        -webkit-backdrop-filter: blur(7px) saturate(175%) contrast(1.04);
        backdrop-filter: blur(7px) saturate(175%) contrast(1.04);
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7);
        pointer-events: none;
    }
  }

  /* ==========================================================================
     Desktop nav drawer: side-by-side flyout columns (>=992px).
     Level 1 stays visible and clickable; checking a submenu checkbox reveals
     its panel in a column to the RIGHT of the drawer instead of sliding over
     the parent list (that slide-over stays the mobile behavior, <992px).

     Positioning model: .mobile_navigation_wrap carries a transform (the
     open/close slide), which makes it the containing block for position:fixed
     descendants. The panels therefore use position:fixed to escape the inner
     scrollers (.mobile-nav-menu-wrapper / .navmm) without touching their
     overflow — only the wrap's own overflow can clip them, so it is set to
     visible here (the wrapper keeps handling the level-1 scroll).
     Panels reveal with a left-to-right clip-path wipe; the checked state's
     negative right inset keeps an open level-3 column inside the visible
     region of its level-2 parent.
     ========================================================================== */
  /* Deeper backdrop while the menu is open — pulls focus onto the drawer.
     The token isn't defined in this theme (yet); the fallback is the value. */
  body.mobile_nav_opened .mobile_menu_overlay {
    background: var(--color-surface-overlay-75, rgba(0, 0, 0, 0.75));
  }
  /* Keyboard access: the checkbox-hack panels need focusable inputs. Visually
     hidden instead of display:none so Tab reaches them and Space toggles the
     panel; the focus ring is painted on the row's label. */
  html body .mobile_navigation_wrap .m-menu__checkbox {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
    clip-path: inset(50%);
  }
  html body .mobile_navigation_wrap li:has(> .m-menu__checkbox:focus-visible) > label,
  html body .mobile_navigation_wrap li:has(> .m-menu__checkbox:focus-visible) > a {
    outline: 2px solid #000;
    outline-offset: -2px;
  }
  /* Lazily-fetched grid content (see loadNavGrid): items inserted under an
     already-open panel would render directly at their final state, so this
     class holds them at the entrance's starting pose for one frame — its
     removal plays the normal staggered fade-up. */
  html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul.nav-grid-enter > li {
    opacity: 0 !important;
    transform: translateY(14px) !important;
    transition: none !important;
  }
  /* Charms grid arrives flat with every group's products — only the active
     group's cards may occupy the grid (hidden must beat any display rule). */
  html body .mobile_navigation_wrap ul.charms-products-grid > li[hidden] {
    display: none !important;
  }
  /* Page scroll HARD-LOCKS while the drawer is open: drawer-internal
     scrolling must never bleed into the page, whose scroll handlers
     (header_sticky / body_scroll_down / FilterStickyActive) restyle
     <body> and stutter the drawer. Handlers are also guarded in JS. */
  html:has(body.mobile_nav_opened),
  body.mobile_nav_opened {
    overflow: hidden !important;
  }
  /* (scrollbar-gutter: stable removed with the curtain footer: the
     permanently reserved gutter painted as a visible bar beside the
     full-width mega-menu flyouts. Trade-off: the drawer's scroll lock
     drops the scrollbar again, so the page behind can shift ~15px at
     open/close — transient, vs. a permanent strip in every flyout.) */
  /* The homepage reserved 35px (33px mobile) of top margin for the old
     promo bar under its fixed transparent header — with the bar floating
     bottom-right now, that margin painted as a white strip above the hero. */
  body.pys_index main#MainContent {
    margin-top: 0 !important;
  }
  /* Promo toast — the old fixed top promo bar, reborn as a dismissible
     glassmorphism card bottom-right. Dismissal (the X) lasts the current
     page view only; it returns on refresh/navigation. */
  .mds-promo-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1500; /* above page chrome, below menu overlay (9990+), drawer (9991) and cart (9995) */
    max-width: calc(100vw - 40px); /* sized by the widest message, viewport-capped */
    padding: 4px 46px 4px 18px;
    /* opaque enough that text never fights the page behind the glass */
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.66));
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), inset 0 1px 1px rgba(255, 255, 255, 0.7);
    transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); /* smooth both out AND back in when yielding */
  }
  .mds-promo-toast.is-dismissed {
    display: none;
  }
  /* The toast always yields to overlapping floating UI: the menu and cart
     drawers via class hooks, and anything else the JS probe finds occupying
     its spot — sticky add-to-carts, newsletter/app popups and their dim
     overlays, chat launchers, any sliding flyout (.is-yielding). It slides
     DOWN out of the viewport to make room, and rises back when clear. */
  body.mobile_nav_opened .mds-promo-toast,
  html.cart-open .mds-promo-toast,
  html.menu_drawer_open .mds-promo-toast,
  .mds-promo-toast.is-yielding {
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 28px));
  }
  /* ALL slides share one grid cell, so the card sizes itself to the WIDEST
     message and never resizes between rotations; each message stays on one
     line (nowrap), and shorter ones sit centred in the fixed width. */
  .mds-promo-toast .mds-animated-banner__slider-container {
    position: relative;
    display: grid;
    min-width: 220px;
    min-height: 20px;
    overflow: hidden;
  }
  .mds-promo-toast .mds-animated-banner__content {
    grid-area: 1 / 1;
    position: relative;
    inset: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .mds-promo-toast p.promo-bar__content.p1,
  .mds-promo-toast .promo-bar__content {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: #000 !important;
    white-space: nowrap;
    /* single line always — ellipsis only when the viewport itself can't fit */
    max-width: calc(100vw - 120px);
    /* overflow: hidden;
    text-overflow: ellipsis; */
  }
  .mds-promo-toast a,
  .mds-promo-toast p,
  .mds-promo-toast span {
    color: #000 !important;
    text-decoration: none;
  }
  /* Messages that still overflow one line auto-scroll to their end before
     the rotator switches — JS measures the overflow and sets the shift and
     duration; clipping moves to the container so the text can travel. */
  .mds-promo-toast .promo-bar__content.is-scrolling {
    overflow: visible;
    text-overflow: clip;
    animation: mds-promo-scroll var(--promo-dur, 2s) ease-in-out 0.9s forwards;
  }
  .mds-promo-toast .mds-animated-banner__content:has(.promo-bar__content.is-scrolling) {
    justify-content: flex-start;
  }
  @keyframes mds-promo-scroll {
    to {
      transform: translateX(var(--promo-shift, 0px));
    }
  }
  @media (max-width: 991.98px) {
    /* Mobile: centred at the bottom instead of pinned bottom-right. */
    .mds-promo-toast {
      right: auto;
      left: 50%;
      transform: translateX(-50%);
      width: max-content;
    }
    /* Yielded slide-out keeps the centring translate. */
    body.mobile_nav_opened .mds-promo-toast,
    html.cart-open .mds-promo-toast,
    html.menu_drawer_open .mds-promo-toast,
    .mds-promo-toast.is-yielding {
      transform: translateX(-50%) translateY(calc(100% + 28px));
    }
    .mds-promo-toast p.promo-bar__content.p1,
    .mds-promo-toast .promo-bar__content {
      font-size: 12px;
    }
  }
  .mds-promo-toast__close {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #000;
    cursor: pointer;
  }
  /* Caption row: title + badges share one line inside every card/row (badges
     used to stack under the title in column layouts). */
  html body .mobile_navigation_wrap .nav-card-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 8px;
    min-width: 0;
    flex-direction: column;
    text-align:center;
  }
  /* Peek header's link to the full collection page (both viewports). The
     z-index lifts it above the header's full-cover back-toggle on mobile. */
  html body .mobile_navigation_wrap .m-menu__header a.peek-view-all {
    margin-left: auto;
    padding-left: 12px;
    font-size: 14px;
    color: #000;
    text-decoration: underline;
    text-underline-offset: 3px;
    position: relative;
    z-index: 1;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  @media (min-width: 992px) {
    html body .mobile_navigation_wrap {
      overflow: visible;
    }
    /* The promo bar no longer occupies the header's top 35px — every
       clearance that budgeted for it shifts up by exactly that much. */
    html body .mobile-nav-menu-wrapper,
    html body .pys_collection .mobile-nav-menu-wrapper {
      margin-top: 82px;
      height: calc(100% - 82px);
    }
    html body.header_sticky .mobile-nav-menu-wrapper {
      margin-top: 62px;
      height: calc(100% - 62px);
    }
    html body .menu-btn {
      top: 32px;
    }
    html body.header_sticky .menu-btn {
      top: 22px;
    }
    /* Breathing room between the last menu item and the utility-links
       separator — matched to the shipping list's own 40px top padding so the
       space above and below the line reads evenly. */
    html body .mobile_navigation_wrap ul.mobile_main_nav_list {
      padding-bottom: 40px;
    }
    /* Hovering one LEVEL-1 menu item fades the others; the hovered one keeps
       full black. Only the top-level rows fade — flyout panel content is a
       descendant of the li, not targeted by these direct-child selectors, so
       cards/products never dim. While a flyout is open the pointer is still
       inside that item's DOM branch (the fixed panel is its child), so the
       open item's row stays solid and its siblings stay faded. */
    html body .mobile_navigation_wrap ul.mobile_main_nav_list > li > a,
    html body .mobile_navigation_wrap ul.mobile_main_nav_list > li > label {
      transition: opacity 0.25s ease;
    }
    /* Gate on :has(), not ul:hover — the ul's box includes its padding and
       the blank space around rows, so a bare ul:hover greys everything the
       moment the cursor ENTERS the drawer. Dim only while an actual row is
       under the cursor, or while a flyout is open (its checkbox is checked),
       so siblings stay faded while browsing a panel. */
    /* The hovered row and the open row are excluded IN the dim selector
       (:not) rather than un-dimmed by a competing rule — the :has() gate
       raised this rule's specificity, so a separate opacity:1 rule would
       lose to it and grey out the hovered item too. (While the pointer is
       inside a flyout, li:hover still holds: the fixed panel is that li's
       DOM child.) */
    html body .mobile_navigation_wrap ul.mobile_main_nav_list:has(> li > a:hover, > li > label:hover, > li > .m-menu__checkbox:checked) > li:not(:hover):not(:has(> .m-menu__checkbox:checked)) > a,
    html body .mobile_navigation_wrap ul.mobile_main_nav_list:has(> li > a:hover, > li > label:hover, > li > .m-menu__checkbox:checked) > li:not(:hover):not(:has(> .m-menu__checkbox:checked)) > label {
      opacity: 0.35;
    }
    /* Level-2 panel: EVERY flyout spans the rest of the viewport beside the
       480px drawer — one consistent full-width panel for lists and product
       grids alike. Geometry is !important on purpose: legacy rules reposition
       these panels with ID specificity (navigation-desk.css .is-activenav
       .m-menu top:36px) and !important transform pins (base.css
       custonM-animation travel path). */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu {
    position: fixed !important;
    left: 100% !important;
    top: 0 !important;
    width: calc(100vw - 480px) !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0;
    display: flex;
    flex-direction: column;
    background-color: #f4f4f4;
    border-left: 1px solid #e1e1e1;
    overflow: visible;
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 0.6s;
    z-index: -1;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu__checkbox:checked + .m-menu {
    visibility: visible;
    transform: translateX(0);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }
    /* Compact flyouts — menus listed in mds_compact_menus (markup below) keep
       the original column width instead of going full-screen; their card
       grids auto-fit 2-up inside it. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu.m-menu--compact {
      width: min(620px, calc(100vw - 500px)) !important;
      max-width: 620px !important;
    }
    /* Phone Cases + Wallets run 15% slimmer than the standard compact column. */
    html body .mobile_navigation_wrap .mobile_main_nav_list li.custonM-phone-cases > .m-menu.m-menu--compact,
    html body .mobile_navigation_wrap .mobile_main_nav_list li.custonM-wallets > .m-menu.m-menu--compact {
      width: min(527px, calc(100vw - 500px)) !important;
      max-width: 527px !important;
    }
    /* Applied by JS to BOTH panels of a same-width branch switch: the slide
       transitions are suppressed so the panel surface appears to hold still
       while only the content swaps (the card entrance animates the new grid
       in). Width CHANGES keep the full fly-back/fly-out choreography. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu.m-menu--swap {
      transition: none !important;
    }
    /* Same-width switch, phase 1: the outgoing panel's items drop and fade —
       the reverse of their entrance — before the surfaces swap and the new
       grid cascades in. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--cards-exit ul > li {
    opacity: 0 !important;
    transform: translateY(14px) !important;
    transition: opacity 0.22s ease, transform 0.22s ease !important;
    transition-delay: 0s !important;
    }
    /* Stacked flyouts (mds_stacked_menus): single-column cards inside the
       compact width — feature image full-width on top, text underneath.
       The list divides the panel height into EQUAL rows so every tile fits
       the viewport with no scrolling: images flex to fill their row's share
       and crop via object-fit (taller with 3 items, shorter with 6). */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--stacked > ul {
      display: grid;
      grid-template-columns: 1fr;
      grid-auto-rows: 1fr;
      align-content: stretch;
      gap: 20px;
      padding-top: 16px;
      padding-bottom: 32px;
      overflow: hidden; /* fits by design — never scrolls */
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--stacked > ul > li {
      min-height: 0;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--stacked > ul > li > a {
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      gap: 10px;
      padding: 0;
      height: 100%;
      min-height: 0;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--stacked > ul .nav-flyout-thumb {
      width: 100%;
      flex: 1 1 auto;
      min-height: 0;
      height: auto;
      aspect-ratio: auto;
      padding: 0;
      border-radius: 0;
    }
    /* The drawer's top strip (above .mobile-nav-menu-wrapper's margin-top)
       is only backed by the wrap's own background, which negative-z panels
       paint ABOVE — cover it so a sliding panel never shows through there. */
    html body .mobile_navigation_wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 82px;
    background: #fff;
    z-index: 0;
    }
    html body.header_sticky .mobile_navigation_wrap::before {
      height: 62px;
    }
    /* The wrapper spans the drawer's full height below the strip — opaque so
       panels sliding beneath never ghost through the area under the list on
       tall screens. */
    html body .mobile_navigation_wrap .mobile-nav-menu-wrapper {
      background: #fff;
    }
    /* Level-3: with full-width level-2 panels there is no room beside them,
       so a sub-collection list is a TAKEOVER — it slides in from the right
       over the level-2 content (its restored back arrow returns). */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu .m-menu {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: none !important;
    border-left: 0;
    transform: translateX(100%);
    z-index: 2;
    }
    /* Closing the drawer must take open columns with it: the panels hang off
       the drawer's RIGHT edge, so at translateX(-100%) a still-checked column
       would sit exactly at the viewport's left edge, fully visible. Wipe them
       closed in sync with the drawer's exit (checkbox state is reset by JS
       after the transition). */
    html body:not(.mobile_nav_opened) .mobile_navigation_wrap .mobile_main_nav_list .m-menu {
  transform: translateX(-100%) !important;
    visibility: hidden !important;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 0.6s !important;
    }
    /* Level-3 takeovers exit rightward (their closed side), not across L2. */
    html body:not(.mobile_nav_opened) .mobile_navigation_wrap .mobile_main_nav_list .m-menu .m-menu {
          transform: translateX(100%) !important;

    }
    /* Sequence the exit: while a column is still checked, hold the drawer in
       place for the length of the column's slide-back, THEN let it slide out. */
    html body:not(.mobile_nav_opened) .mobile_navigation_wrap:has(.m-menu__checkbox:checked) {
      transition-delay: 0.6s;
    }
    /* The backdrop must be ALWAYS-RENDERED for any fade to run: base.css only
       does that at <=767px, so on desktop the overlay was toggling
       display:none -> block — and transitions never fire across a display
       toggle, which is why it popped in fully black no matter the duration.
       Mirror the mobile pattern: always block, transparent + click-through at
       rest, colored + interactive while open. */
    html body .mobile_menu_overlay {
      display: block !important;
      background: transparent;
      pointer-events: none;
    }
    html body.mobile_nav_opened .mobile_menu_overlay {
  background: var(--color-surface-overlay-75, rgba(0, 0, 0, 0.75));
    pointer-events: auto;
    transition: background-color 0.8s ease;
    }
    /* And it fades out over the whole exit instead of cutting away: paced to
       the drawer alone, or stretched across the flyout-retract + drawer
       sequence when a column is still open. */
    html body:not(.mobile_nav_opened) .mobile_menu_overlay {
      transition: background-color 0.45s ease;
    }
    html body:not(.mobile_nav_opened):has(.mobile_navigation_wrap .m-menu__checkbox:checked) .mobile_menu_overlay {
      transition: background-color 0.7s ease 0.35s;
    }
    /* Hover feedback: underline the hovered row only — no dimming of the
       other items (the old JS spotlight was removed; it strobed while
       scrolling the flyout grids). */
    html body .mobile_navigation_wrap ul.mobile_main_nav_list > li:hover > label span,
    html body .mobile_navigation_wrap ul.mobile_main_nav_list > li:hover > a span,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul li:hover span.nested_menu_text {
      background-size: 100% 1px;
    }
    /* Level-1 chevrons reveal on hover (base.css keyed them to the removed
       item_active class). Peek-capable leaf items carry the same chevron in
       their <a>, laid out like the branch labels. */
    html body .mobile_navigation_wrap ul.mobile_main_nav_list > li:hover > label svg,
    html body .mobile_navigation_wrap ul.mobile_main_nav_list > li:hover > a svg {
      opacity: 1;
    }
    html body .mobile_navigation_wrap ul.mobile_main_nav_list > li.custom_sales_nav > a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 16px;
    }
    /* Panel header: title only — no back arrow, the parent column is visible. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu .m-menu__header {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      height: auto;
      margin: 0;
      padding: 44px 40px 16px;
      border: 0;
      background: #f4f4f4;
      position: relative;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu .m-menu__header label.m-menu__toggle,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu .m-menu__header > svg {
      display: none;
    }
    /* ...except level-3 takeovers: they COVER the level-2 content, so the
       back arrow returns (the whole header is the close target). */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu .m-menu .m-menu__header > svg {
      display: block;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu .m-menu .m-menu__header {
      cursor: pointer;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu .m-menu__header span {
      padding-left: 0;
    }
    /* Panel list scrolls on its own; rows are flex so thumbnails line up.
       Plain link lists stay a readable column inside the full-width panel
       (the card grids lift this cap themselves). */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul {
      flex: 1 1 auto;
      overflow-y: auto;
      margin: 0;
      padding: 8px 40px 48px;
      max-width: 620px;
      background: #f4f4f4;
      /* Scrolls without a visible scrollbar. */
      scrollbar-width: none;
      -ms-overflow-style: none;
      /* Programmatic resets must be instant (a legacy global smooth-scroll
         rule would otherwise animate the back-to-top on reopen). */
      scroll-behavior: auto !important;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul::-webkit-scrollbar {
      display: none;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul li {
      padding: 0;
      position: static; /* a positioned row would become the level-3 panel's containing block */
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul li a,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul li label.third_layer_title {
      display: flex;
      align-items: center;
      gap: 16px;
      width: 100%;
      margin: 0;
      padding: 8px 0;
      border: 0;
      color: #000;
      font-size: 16px;
      line-height: 1.3;
      cursor: pointer;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul li label.third_layer_title > svg {
      margin-left: auto;
      flex: 0 0 auto;
      opacity: 0.4;
      transition: opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul li:hover label.third_layer_title > svg,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul li:has(> .third_layer_menu_checked:checked) label.third_layer_title > svg {
      opacity: 1;
    }
    /* Keep the open branch marked while the pointer is in its flyout column. */
    html body .mobile_navigation_wrap ul.mobile_main_nav_list > li:has(> .m-menu__checkbox:checked) > label svg,
    html body .mobile_navigation_wrap ul.mobile_main_nav_list > li:has(> .m-menu__checkbox:checked) > a svg {
      opacity: 1;
    }
    html body .mobile_navigation_wrap ul.mobile_main_nav_list > li:has(> .m-menu__checkbox:checked) > label>span,
    html body .mobile_navigation_wrap ul.mobile_main_nav_list > li:hover > a>span
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul li:has(> .third_layer_menu_checked:checked) span.nested_menu_text {
      background-size: 100% 1px;
    }
    /* Collection / first-product thumbnails. Inner padding matches the panel
       background so the inset reads as seamless breathing room around the
       image rather than a framed tile. */
    html body .mobile_navigation_wrap .nav-flyout-thumb {
      flex: 0 0 auto;
      display: block;
      width: 64px;
      height: 64px;
      overflow: hidden;
      border-radius: 2px;
      background: #f4f4f4;
      padding: 10px;
      box-sizing: border-box;
    }
    html body .mobile_navigation_wrap .menu-our-maison  .nav-flyout-thumb img{
    object-fit:cover;
    }
    html body .mobile_navigation_wrap .nav-flyout-thumb img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    li.customheader_sale.menu-new span.nav-flyout-thumb {
    max-width: 157.85px;
}

        html body .mobile_navigation_wrap .menu-stores .nav-flyout-thumb img {
    object-fit: cover;
}
    /* Product-card grids: FULL-WIDTH flyout lists whose rows carry thumbnails
       (Bags families, collection menus, level-3 lists) and full-width peek
       panels share one card language — square product shot with breathing
       room, title centred underneath. COMPACT menus (mds_compact_menus) keep
       the original inline rows — thumb beside text — and text-only menus
       keep the plain list column. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--peek:not(.m-menu--compact) > ul,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu:not(.m-menu--compact):not(.m-menu--feature) > ul:has(.nav-flyout-thumb) {
      display: grid;
      /* Cards never shrink below ~220px — the column count steps down with
         the viewport (4 on a 16" MacBook, 3 on 13-14", 2 on iPad landscape)
         and overflow wraps to the next row. The max() floor of one-fifth of
         the row CAPS the count at 5, so ultrawide screens get bigger cards
         instead of more columns. auto-fill (not auto-fit) keeps card size
         consistent when a row is short. */
      grid-template-columns: repeat(auto-fill, minmax(max(220px, calc((100% - 72px) / 5)), 1fr));
      gap: 28px 18px;
      align-content: start;
      max-width: none;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--peek:not(.m-menu--compact) > ul span.nested_menu_text,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu:not(.m-menu--compact) > ul:has(.nav-flyout-thumb) span.nested_menu_text {
      font-size: 14px;
    }
    /* Card entrances: each product fades up with a slight stagger while its
       panel glides open (--card-i is the item's index, set inline; the min()
       caps the stagger so deep rows don't lag behind the fold). */
    /* Item entrances — grids, stacked tiles AND compact rows all cascade in
       (compact rows previously popped instantly, which clashed with the
       switch's exit animation). */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--peek:not(.m-menu--compact) > ul > li,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu:not(.m-menu--compact) > ul:has(.nav-flyout-thumb) > li,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--stacked > ul > li,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--compact > ul > li {
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu__checkbox:checked + .m-menu--peek:not(.m-menu--compact) > ul > li,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu__checkbox:checked + .m-menu:not(.m-menu--compact) > ul:has(.nav-flyout-thumb) > li,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu__checkbox:checked + .m-menu--stacked > ul > li,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu__checkbox:checked + .m-menu--compact > ul > li {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
      transition-delay: calc(0.25s + min(var(--card-i, 0), 14) * 0.045s);
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu:not(.m-menu--compact):not(.m-menu--feature) > ul:has(.nav-flyout-thumb) > li > a,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu:not(.m-menu--compact):not(.m-menu--feature) > ul:has(.nav-flyout-thumb) > li > label.third_layer_title,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--peek:not(.m-menu--compact) > ul > li > a {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 10px;
      padding: 0;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu:not(.m-menu--compact):not(.m-menu--feature) > ul:has(.nav-flyout-thumb) .nav-flyout-thumb,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--peek:not(.m-menu--compact) > ul .nav-flyout-thumb {
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
      padding: 35px;
    }
    /* Bags panel: a 2x2 grid — header confined to the family-grid zone
       (row 1, left), family grid below it, and the category column spanning
       BOTH rows so its left border runs to the very top of the panel.
       The split wrapper dissolves (display: contents) so its children sit
       directly in the panel grid. Each column scrolls independently. */
    html body .mobile_navigation_wrap .mobile_main_nav_list li.custonM-bags > .m-menu {
      display: grid;
      /* Category column at ~15% (220px floor so names never wrap) — the
         family grid gets the rest. */
      grid-template-columns: minmax(0, 1fr) max(15%, 220px);
      grid-template-rows: auto minmax(0, 1fr);
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list li.custonM-bags > .m-menu > .m-menu__header {
      grid-column: 1;
      grid-row: 1;
    }
    /* Desktop: All Bags lives at the end of the category column, not the header. */
    html body .mobile_navigation_wrap .mobile_main_nav_list li.custonM-bags > .m-menu > .m-menu__header a.peek-view-all {
      display: none;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .bags-panel-split {
      display: contents;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .bags-panel-split > .bags-panel-divider {
      display: none;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .bags-panel-split > ul.bags-family-grid {
      grid-column: 1;
      grid-row: 2;
      min-height: 0;
      max-width: none; /* the generic panel-list 620px cap must not squeeze the grid */
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(max(220px, calc((100% - 72px) / 5)), 1fr));
      gap: 28px 18px;
      align-content: start;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .bags-panel-split > ul.bags-category-list {
      grid-column: 2;
      grid-row: 1 / -1;
      min-width: 0;
      min-height: 0;
      border-left: 1px solid #c4c4c4;
      display: flex;
      flex-direction: column;
      padding-top: 44px; /* optically aligns the first category with the header title */
      padding-left: 28px; /* tighter gutters suit the narrow column */
      padding-right: 28px;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .bags-panel-split > ul.bags-category-list > li {
      flex: 0 0 auto;
    }
    /* The "All ..." link sits directly under the category rows as part of
       the list, distinguished only by its underline. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .bags-panel-split > ul.bags-category-list > li.bags-category-viewall .nested_menu_text {
      text-decoration: underline;
      text-underline-offset: 3px;
      /* already permanently underlined — no gradient hover-underline on top */
      background: none !important;
    }
    /* Hover preview: the hovered category's collection feature image rises
       into the slot beneath the list (JS feeds the src from
       data-cat-preview and toggles .is-visible). */
    html body .mobile_navigation_wrap .mobile_main_nav_list .bags-panel-split > ul.bags-category-list > li.bags-category-preview {
      margin-top: auto;
      padding-top: 24px;
      opacity: 1;
      transform: none;
      transition: none;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .bags-panel-split > ul.bags-category-list > li.bags-category-preview img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 5;
      object-fit: cover;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .bags-panel-split > ul.bags-category-list > li.bags-category-preview.is-visible img {
      opacity: 1;
      transform: translateY(0);
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .bags-panel-split > ul.bags-category-list > li > a {
      padding: 14px 0;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .bags-panel-split span.nested_menu_text {
      font-size: 14px;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .bags-panel-split > ul.bags-family-grid > li > a {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 10px;
      padding: 0;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .bags-panel-split > ul.bags-family-grid .nav-flyout-thumb {
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
      padding: 35px;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .bags-panel-split > ul > li {
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu__checkbox:checked + .m-menu .bags-panel-split > ul > li {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
      transition-delay: calc(0.25s + min(var(--card-i, 0), 14) * 0.045s);
    }
    /* Charms flyout (mds_charms_menus): FULL-WIDTH like the classic peek —
       the left grid keeps the big group cards (JS-built, one per family),
       and a separated right column shows the CLICKED group's products as a
       2-up grid. Same 2x2 panel grid as Bags: header row 1 left, group grid
       below, right column spanning both rows so its border runs to the top. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu.m-menu--charms {
      display: grid;
      /* The right track is sized by the products column itself — 0 wide
         until a group is picked, so first paint is the classic full-width
         group grid; picking a group animates the column open and the grid
         visibly pushes across to make room. */
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-rows: auto minmax(0, 1fr);
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms > .m-menu__header {
      grid-column: 1;
      grid-row: 1;
    }
    /* Left group grid scrolls internally (scrollbar hidden, as everywhere);
       overscroll-behavior keeps a boundary hit from chaining into the
       drawer behind it. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .bags-panel-split > ul.charms-groups-grid {
      overflow-y: auto;
      scrollbar-width: none;
      overscroll-behavior: contain;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .bags-panel-split > ul.charms-groups-grid::-webkit-scrollbar {
      display: none;
    }
    /* Group CARDS are buttons dressed exactly like the peek card anchors —
       the active one underlines its title. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .charms-groups-grid > li > button {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 10px;
      width: 100%;
      padding: 0;
      margin: 0;
      border: 0;
      background: none;
      font-family: inherit;
      color: #000;
      cursor: pointer;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .charms-groups-grid > li > button.is-active .nested_menu_text {
      text-decoration: underline;
      text-underline-offset: 3px;
      background: none !important;
    }
    /* Single-product groups are <a>s (direct links), multi-product groups
       are <button>s — one inherited font stack so titles can't diverge. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .charms-groups-grid > li > a,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .charms-groups-grid > li > button {
      font: inherit;
      color: #000;
      text-decoration: none;
      letter-spacing: normal;
    }
    /* The mobile sub-panel chrome dissolves on desktop: the wrapper flattens
       (contents — the nested .m-menu takeover rules find no box to position)
       so the products ul takes its own grid slot, and the back header
       disappears. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .charms-sub-panel {
      display: contents !important;
    }
    /* The footer bar (Back | View All) is mobile chrome — desktop keeps
       View All in the panel header and closes via hover. */
    html body .mobile_navigation_wrap .m-menu .panel-footer-bar {
      display: none !important;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .charms-sub-panel > .m-menu__header {
      display: none !important;
    }
    /* Right column: the picked group's products, 2-up, bordered off from
       the group grid with the divider running to the panel top (grid-row
       1/-1). COLLAPSED (width 0, clipped, invisible border) until a group
       is chosen — then it eases open while the group grid reflows across,
       and the cards play their usual cascade into the new column. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .bags-panel-split ul.charms-products-grid {
      grid-column: 2;
      grid-row: 1 / -1;
      width: 0;
      min-width: 0;
      min-height: 0;
      border-left: 1px solid transparent;
      display: grid;
      /* !important: the sub-panel wrapper is itself a .m-menu, so the
         generic ".m-menu > ul:has(.nav-flyout-thumb)" card rule (heavier
         :not()/:has() specificity) matches this ul too and would impose
         its 220px auto-fill template — 1-per-row at column width. */
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 24px 16px;
      align-content: start;
      padding: 44px 0 40px; /* top aligns optically with the header title */
      overflow: hidden;
      scrollbar-width: none;
      max-width: none;
      visibility: visible; /* the flattened sub-panel shell still passes down its .m-menu visibility:hidden */
      /* a boundary hit must NOT chain the scroll into the group grid/panel behind */
      overscroll-behavior: contain;
      /* this transition runs on CLOSE (leaving has-selection) — brisker
         than the open below: enter with ceremony, exit with efficiency */
      transition: width 0.28s cubic-bezier(0.65, 0, 0.35, 1), padding 0.28s cubic-bezier(0.65, 0, 0.35, 1), border-color 0.15s ease;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .bags-panel-split.has-selection ul.charms-products-grid {
      /* Viewport-computed, NOT % — a percentage is circular inside this
         auto-sized track (track fits item, item's % resolves against
         track) and balloons. 34% of the panel (100vw minus drawer),
         floored for narrow screens, capped for ultrawide. */
      width: clamp(300px, calc((100vw - 480px) * 0.34), 480px);
      padding: 44px 28px 40px;
      border-left-color: #c4c4c4;
      overflow-y: auto;
      /* the OPEN transition — quicker than before, still slower than close */
      transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), padding 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease 0.08s;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .bags-panel-split ul.charms-products-grid::-webkit-scrollbar {
      display: none;
    }
    /* Entrance stagger for the column's cards (they sit too deep for the
       generic .bags-panel-split > ul > li rules to reach). */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .charms-products-grid > li {
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu__checkbox:checked + .m-menu--charms .charms-products-grid > li {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
      transition-delay: calc(0.25s + min(var(--card-i, 0), 14) * 0.045s);
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .charms-products-grid > li > a {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 10px;
      padding: 0;
      /* same face as the group cards — the legacy link font (Lato) leaked
         into these deeper-nested anchors */
      font: inherit;
      color: #000;
      text-decoration: none;
      letter-spacing: normal;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .charms-products-grid > li {
      padding: 0;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .charms-products-grid .nav-flyout-thumb {
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
      padding: 18px; /* smaller cards, tighter breathing room than the 35px grid cards */
    }
    /* Feature flyouts (mds_feature_menus, e.g. Our Maison): editorial
       masonry in a CONTAINED window (not the full remaining viewport) —
       first child is a hero banner across the panel, the rest a 3-column
       grid; text underneath, left-aligned. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu.m-menu--feature {
      width: min(880px, calc(100vw - 520px)) !important;
      max-width: 880px !important;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--feature > ul {
      display: grid;
      /* 1 / 2 / 1 rhythm: full-width banner, a 2-up pair, banner again... */
      grid-template-columns: 1fr 1fr;
      gap: 28px 18px;
      align-content: start;
      max-width: none;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--feature > ul > li:nth-child(3n + 1) {
      grid-column: 1 / -1;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--feature > ul > li > a {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 10px;
      padding: 0;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--feature > ul .nav-flyout-thumb {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      padding: 0;
      border-radius: 0;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--feature > ul > li:nth-child(3n + 1) .nav-flyout-thumb {
      aspect-ratio: 21 / 7;
    }
    
  }
  html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu.m-menu--feature:has(.menu-new)>ul {
    grid-template-columns: 1fr;
}

html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--feature:has(.menu-new) > ul > li .nav-flyout-thumb {
    aspect-ratio: unset;
}
  /* Charms LEFT grid: FIXED column counts per viewport width (not
     auto-fill). The count therefore CANNOT change while the products
     column animates open — the cards compress fluidly (fr tracks follow
     the width transition) instead of the grid snapping to a different
     column count mid-animation. */
  @media (min-width: 992px) and (max-width: 1199.98px) {
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .bags-panel-split > ul.charms-groups-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  /* 13"–14" class screens: 3-up; 15" class: 4-up — held STATIC through
     the column squeeze. */
  @media (min-width: 1200px) and (max-width: 1499.98px) {
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .bags-panel-split > ul.charms-groups-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 1500px) and (max-width: 1699.98px) {
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .bags-panel-split > ul.charms-groups-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  /* 16-inch laptops (~1728px) and up: 5-up keeps the cards from ballooning. */
  @media (min-width: 1700px) {
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .bags-panel-split > ul.charms-groups-grid {
      grid-template-columns: repeat(5, 1fr);
    }
  }
  /* (No count change on open — the columns are STATIC per viewport and the
     open squeeze only compresses card widths. Dropping a column on click
     re-wrapped the rows and lost the user's place in the grid.) */
  /* Charms RIGHT (products) column: on 13" and smaller the open column is
     too narrow for the 2-up — single column. !important matches the base
     rule's (which guards against the generic .m-menu ul card template);
     source order after it lets this win. */
  @media (min-width: 992px) and (max-width: 1499.98px) {
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .bags-panel-split ul.charms-products-grid {
      grid-template-columns: repeat(1, 1fr) !important;
    }
  }
  /* ==========================================================================
     Mobile (<992px): the slide-over interaction stays, restyled to match the
     desktop flyouts — grey panels, product thumbnails in the rows, Bags as a
     2-up card grid with the staggered entrance, gentler easing. Peek panels
     stay desktop-only: those leaf items simply navigate on tap.
     ========================================================================== */
  @media (max-width: 991.98px) {
      li.customheader_sale.menu-new span.nav-flyout-thumb {
      max-width: 120px;
      }
    /* The homepage's persistent search bar (.searchResultMain holds the
       .searchHeader / ss__autocomplete__input) budgeted 33px for the old
       promo bar (top: 81px) — align it to the header's bottom edge now
       that the bar floats bottom-right. 57px = 18px top padding + ~21px
       logo row + 18px bottom padding, the same symmetric thickness every
       other page uses (the homepage's 9px bottom-padding squeeze in
       base.css is gone). */
    html body.pys_index .searchResultMain {
      /* 2px tucked UNDER the header's bottom edge (not flush): flush seams
         open into a hairline gap whenever the row height drifts a pixel. */
      top: 55px;
      /* Top-of-page only: the bar rides the same scroll state as the header
         glass. This (visible-state) transition IS the entrance — crossing
         the 30% mark on the way up, the bar glides down from under the
         header with the theme's soft quint-out while the bar whitens, and
         has fully landed by the time the page reaches the top. Visibility
         is instant on show, delayed on hide so the exit fade finishes. */
      transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
    }
    /* Scrolled: the search bar steps aside instead of following sticky.
       :not(.ss__autocomplete--active) guards the open search UI — it must
       never vanish under the user mid-search. The .is-scrolled mirror makes
       it react live during a touch-drag too (header_sticky waits for
       touchend — see the mid-gesture glass block above). */
    html body.pys_index.header_sticky:not(.ss__autocomplete--active) .searchResultMain,
    html body.pys_index:not(.ss__autocomplete--active) .headerSection.is-scrolled .searchResultMain {
      /* opacity: 0;
      transform: translateY(-14px); 
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s; */
    }
    /* No seam line above the homepage search bar. Theme rules are already
       scoped out (base.css .searchHeader border-top); this also covers the
       SearchSpring bundle's runtime styling of its own wrappers. The input
       keeps its full pill border — only containers are hit. */
    html body.pys_index .searchResultMain,
    html body.pys_index .searchResultMain > *,
    html body.pys_index .searchResultMain .searchHeader,
    html body.pys_index .searchResultMain .searchHeader > form {
      border-top: 0 !important;
      box-shadow: none !important;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu {
      background-color: #f4f4f4;
      transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
      /* Panels scroll internally — the legacy wrapper-scroll machinery never
         reaches content taller than the viewport (Bags was unscrollable).
         overscroll-behavior: a boundary hit must not chain into the panel or
         drawer behind (which also drags absolute sub-panels along with it). */
      /* The PANEL no longer scrolls — its content region does (rule below).
         That frees the footer bar to pin absolutely to the panel's bottom,
         motionless at every scroll position and every content height. */
      overflow: hidden !important;
      display: flex;
      flex-direction: column;
    }
    /* The scroll region: the panel's content block (ul, or the split for
       Bags/Charms) fills the space between header and bottom edge and
       scrolls internally. Bottom padding keeps the last rows clear of the
       overlaid footer bar. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu > ul,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu > .bags-panel-split {
      flex: 1 1 auto;
      min-height: 0;
      /* the flex-stretch fills the panel height — grid rows must pack at
         the top, not distribute across the empty space (short groups were
         spreading their rows panel-high) */
      align-content: start;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch; /* native momentum — never main-thread crawl */
      scroll-snap-type: none !important; /* insurance against legacy carousel snap leaking in */
      padding-bottom: 110px !important; /* clearance under the pinned footer bar */
      will-change: scroll-position; /* ask for compositor (off-main-thread) scrolling */
    }
    /* Pre-raster the grid content as its own compositor layer — a fling then
       slides a cached texture instead of re-rasterising rows as they enter
       the viewport (the remaining stagger source when the main thread is
       idle). Applied to content uls only — NEVER to .bags-panel-split, whose
       fixed sub-panel child would re-anchor to it. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul.peek-grid,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul.bags-family-grid,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul.charms-products-grid,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul.bags-category-list {
      transform: translateZ(0);
    }
    /* ── Single slim drawer header ─────────────────────────────────────
       The old chrome stacked two header zones (92px strip with the X, then
       each panel's own header row below it). Consolidated: one 64px strip —
       panel back + title on the LEFT (where the X sat), the X gliding to
       the far right once the drawer lands. */
    html body:not(.pys_index) .mobile-nav-menu-wrapper,
    html body .mobile-nav-menu-wrapper,
    html body.header_sticky .mobile-nav-menu-wrapper {
      margin-top: 64px !important;
      height: calc(100% - 64px) !important;
    }
    /* .m-menu.navmm (the legacy list container — every panel's fixed
       containing block, since it carries the legacy slide transform) is
       pinned to the drawer's TRUE top: base.css offsets it (-33px promo
       hack, absolute inside the 64px-margined wrapper), which is what kept
       pushing panel headers into a second row below the X strip. */
    html body .headerSection .mobile-nav-menu .m-menu.navmm {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      /* fixed boxes shrink-wrap without an explicit width — navmm must
         span the full drawer or every panel inherits the shrunken box */
      width: 100% !important;
      height: 100% !important;
      max-width: 100% !important;
      /* navmm's legacy grey (#eee) showed as a strip below the list
         content — the drawer canvas is white */
      background: #fff !important;
    }
    /* The legacy close-row at navmm's top — a ~90px white bar whose svg is
       opacity:0 — was the mystery white band. Dead chrome; gone. */
    html body .m-menu.navmm .mobile-nav-trigger_cross {
      display: none !important;
    }
    /* List view: clear the 64px X strip, then a small head start. */
    html body .mobile_navigation_wrap ul.mobile_main_nav_list {
      padding-top: calc(64px + 24px);
    }
    /* Separator under the X strip — same height + line as the closed mobile
       header, so the strip reads as the header bar it replaces. Drawn on
       navmm (a fixed box, so absolute resolves to it) BELOW the fixed panels
       (z-index 5): open panels cover it with their own sticky-header border. */
    html body .headerSection .mobile-nav-menu .m-menu.navmm::before {
      content: "";
      position: absolute;
      top: 64px;
      left: 0;
      right: 0;
      height: 1px;
      background: #e0e0e0;
      z-index: 1;
      pointer-events: none;
    }

    /* Burger→X morphs in place, THEN the X glides to the drawer's far right
       and centres in the 64px strip — [Back left] · [title centre] · [X right].
       left (not right): the button's own 0.3s all-transition tweens
       left:20px → the calc, so the glide animates both ways; a left→right
       property switch would jump. */
    /* Faux motion blur for the X's glide: CSS has no directional blur, so a
       velocity-matched pulse stands in — blur plus a slight trailing stretch,
       peaking early (the quint-out ease is fastest at the start) and decaying
       into the landing. Hand-shaped percentages on a linear clock keep the
       peak glued to the ease's fast phase; delay + duration mirror the
       left/top transition exactly. The close direction runs no animation —
       its short return glide stays crisp. */
    @keyframes mds-x-glide-blur {
      0% { filter: blur(0); transform: scaleX(1); }
      14% { filter: blur(2.5px); transform: scaleX(1.16); }
      55% { filter: blur(0.7px); transform: scaleX(1.05); }
      100% { filter: blur(0); transform: scaleX(1); }
    }
    html body.mobile_nav_opened .menu-btn {
      left: calc(100% - 40px); /* 20px box + 20px edge inset */
      top: 22px; /* (64px strip − 20px box) / 2 → X centre = title centre = 32px */
      /* Sequenced, not simultaneous: the burger→X morph and the drawer
         slide-in (~0.4s) play out IN PLACE first — the 0.45s delay holds the
         X still through both, then it glides across. Closing needs no delay:
         the closed state falls back to the button's base 0.3s all-transition,
         so the X returns while it un-morphs and lands as the burger. */
      transition: left 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.45s, top 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.45s !important;
      transform-origin: left center; /* the stretch trails the rightward travel */
      animation: mds-x-glide-blur 0.5s linear 0.45s both;
    }
    /* Panels own the full drawer height now — their header IS the strip.
       FIXED, not absolute: absolute anchored panels to (and clipped them
       inside) the inner wrapper that starts 64px down, which is exactly the
       leftover "second header section". Fixed resolves to the transformed
       drawer wrap itself, so top 0 is the drawer's very top — X strip
       included. z-index lifts panels over the drawer's own icon bar; the X
       stays on top at 9999. Nested sub-panels resolve to their transformed
       parent panel and keep covering exactly it. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu {
      position: fixed !important;
      left: 0 !important;
      top: 0 !important;
      width: 100% !important;
      max-width: none !important;
      height: 100% !important;
      z-index: 5;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu .m-menu__header {
      position: sticky; /* pinned while the panel scrolls beneath */
      top: 0;
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 14px;
      min-height: 60px;
      margin: 0;
      padding: 0 64px 0 20px; /* right side clears the relocated X */
      background: #f4f4f4;
      border-top: 0;
      border-bottom: 1px solid #e0e0e0;
    }
    /* Back lives in the header strip — left slot, before the centred title.
       position:relative (never static): the label's :after tap-cover
       (base.css, absolute 100%/100%) would otherwise anchor to the sticky
       header and swallow every tap in the strip, title and X included. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu .m-menu__header label.m-menu__toggle {
      display: flex;
      position: relative;
      align-items: center;
      justify-content: flex-start;
      flex: 0 0 auto;
      width: auto;
      height: 100%;
      margin: 0 auto 0 0; /* auto right margin pins the arrow hard-left even if another in-flow child appears */
      padding: 0 12px 0 0; /* widen the tap target rightward; arrow keeps the 20px gutter */
      cursor: pointer;
    }
    /* Title dead-centre of the row — absolutely positioned against the
       sticky header so no legacy flex/margin rule can drag or shrink it.
       The max-width keeps it clear of the back arrow and the X. span.enwarr
       is the New Arrivals branch's title (unstyled elsewhere) — without it
       here that one panel's title sat in-flow beside the arrow. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu .m-menu__header span.true,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu .m-menu__header span.enwarr {
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%);
      margin: 0;
      width: auto !important;
      max-width: calc(100% - 160px);
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* View All leaves the header on mobile — it floats as a sticky pill
       that rides the bottom of the panel as you scroll (the ::after
       full-cover back target keeps the rest of the header tappable). */
    html body .mobile_navigation_wrap .m-menu__header a.peek-view-all {
      display: none;
    }
    /* Footer bar: [ Back | View All ] 50/50 (or a lone full-width Back on
       panels without a View All). Sticky at the panel's bottom; the last
       row of content always clears it at scroll end via the top margin. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu .panel-footer-bar {
      /* ABSOLUTE against the (non-scrolling) panel: pinned to its bottom
         edge in the same spot throughout — short lists, long lists,
         mid-scroll, always. Content passes beneath the glass buttons. */
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 4;
      display: flex;
      justify-content: flex-start; /* a lone Back pins bottom-LEFT in its 50% slot */
      gap: 10px;
      margin: 0;
      padding: 12px 16px 16px;
    }
    /* Each button: outlined, glassmorphism fill (toast translucency),
       square corners, no shadow, black text. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu .panel-footer-bar > a,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu .panel-footer-bar > label {
      /* no grow: a lone Back (deepest level) keeps its 50% slot bottom-left,
         as if the split were still there with an empty View All half —
         width pinned hard so no legacy label/anchor rule can stretch it */
      flex: 0 1 calc(50% - 5px);
      width: calc(50% - 5px);
      max-width: calc(50% - 5px);
      box-sizing: border-box;
      display: block;
      margin: 0;
      padding: 15px 12px;
      text-align: center;
      /* Glassmorphism (same family as the cart upsell / promo toast):
         translucent fill + blur + white hairline rim, zero shadows. The
         blur strip is only ~46px tall; if drawer scroll jank ever returns
         on-device, the known-smooth fallback is the old flat fill
         rgba(255,255,255,0.94) with no backdrop-filter. */
      /* Smoked a touch: grey-tinted frost + slight brightness drop on the
         pane so the button never disappears over white/light card grids —
         the white rim pops harder against it. */
      background: rgba(240, 240, 240, 0.55);
      -webkit-backdrop-filter: blur(16px) saturate(160%) brightness(0.95);
      backdrop-filter: blur(16px) saturate(160%) brightness(0.95);
      /* Prominent glass rim: near-solid white border + inset speculars (a
         strong top-edge catch, faint underside bounce) — light reflection,
         not a drop shadow; nothing is cast outside the button. */
      border: 1px solid rgba(255, 255, 255, 0.95);
      color: #000;
      font-size: 14px;
      line-height: 1;
      text-decoration: none;
      cursor: pointer;
      border-radius: 0;
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.85), inset 0 -1px 1px rgba(255, 255, 255, 0.35);
    }
    /* Charms: ONE persistent bar across both levels. It layers above the
       products sub-panel (z6) so nothing re-animates on drill-in; Back
       swaps to the sub's twin label (visually identical, so the switch is
       invisible) and View All fades away, leaving Back alone in its half. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .panel-footer-bar {
      z-index: 7;
    }
    /* Back moved up to the header strip — the footer keeps only View All,
       now full width. display:none !important also beats the charms :has()
       rule that re-shows the sub-level twin Back. The bar container goes
       click-through so its transparent padding can't eat taps aimed at the
       last grid row; View All re-arms its own pointer events (the charms
       sub-level fade rule still wins and disables it while faded). */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu .panel-footer-bar {
      pointer-events: none;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu .panel-footer-bar > label.panel-footer-back,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu .panel-footer-bar > label.panel-footer-back--sub {
      display: none !important;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu .panel-footer-bar > a {
      flex: 1 1 100%;
      width: 100%;
      max-width: 100%;
      pointer-events: auto;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .panel-footer-bar > label.panel-footer-back--sub {
      display: none;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms:has(.charms-sub-checkbox:checked) .panel-footer-bar > label.panel-footer-back:not(.panel-footer-back--sub) {
      display: none;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms:has(.charms-sub-checkbox:checked) .panel-footer-bar > label.panel-footer-back--sub {
      display: block;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu .panel-footer-bar > a.peek-view-all--float {
      transition: opacity 0.3s ease;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms:has(.charms-sub-checkbox:checked) .panel-footer-bar > a.peek-view-all--float {
      opacity: 0;
      pointer-events: none;
    }
    /* Chevrons: far-right for every item that has one (base layout's
       space-between handles it — the leaf <a>s get it here too). */
    html body .mobile_navigation_wrap ul.mobile_main_nav_list > li.custom_sales_nav > a {
      justify-content: space-between;
      padding-right: 16px;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu__checkbox:checked + .m-menu {
      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu .m-menu__header {
      background: #f4f4f4;
    }
    /* Half the legacy 24px top padding (base.css "…​.m-menu ul") on every
       panel grid — the sticky 64px header already provides the visual gap,
       so the cards start closer to it instead of losing a band of dead
       space. Sides/bottom keep their legacy values. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul {
      padding-top: 12px;
    }
    /* Rows carry the same thumbnails as desktop. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul li a,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul li label.third_layer_title {
      display: flex;
      align-items: center;
      gap: 14px;
      padding-top: 8px;
      padding-bottom: 8px;
      line-height: 1.3;
    }
    html body .mobile_navigation_wrap .nav-flyout-thumb {
      flex: 0 0 auto;
      display: block;
      width: 56px;
      height: 56px;
      overflow: hidden;
      border-radius: 2px;
      background: #f4f4f4;
      padding: 8px;
      box-sizing: border-box;
    }
    html body .mobile_navigation_wrap .nav-flyout-thumb img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    html body .mobile_navigation_wrap .menu-stores .nav-flyout-thumb img {
    object-fit: cover;
}
    /* Bags: 2-up feature-image cards, entrance staggered like desktop. The
       desktop split stacks vertically here — family grid, then categories as
       plain rows; the divider hides. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .bags-panel-split {
      display: block;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .bags-panel-split > .bags-panel-divider,
    html body .mobile_navigation_wrap .mobile_main_nav_list .bags-panel-split .bags-category-preview {
      display: none;
    }
    /* ONE declaration lays out BOTH charm levels (groups grid and the
       products drill-in) plus the bags families — identical by definition. */
    html body .mobile_navigation_wrap .mobile_main_nav_list ul.bags-family-grid,
    html body .mobile_navigation_wrap .mobile_main_nav_list ul.charms-products-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0px 16px;
      padding-left: 20px;
      padding-right: 20px;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .bags-panel-split > ul > li {
      padding: 0;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu__checkbox:checked + .m-menu .bags-panel-split > ul > li {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
      transition-delay: calc(0.2s + min(var(--card-i, 0), 14) * 0.045s);
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list ul.bags-family-grid > li > a,
    html body .mobile_navigation_wrap .mobile_main_nav_list ul.charms-products-grid > li > a {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 8px;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list ul.bags-family-grid .nav-flyout-thumb,
    html body .mobile_navigation_wrap .mobile_main_nav_list ul.charms-products-grid .nav-flyout-thumb {
        width: calc(100% - 40px);
        height: auto;
        aspect-ratio: 1 / 1;
        padding: 0;
        text-align: center;
        margin-bottom: 20px;
    }
    /* Bags categories on mobile: divider line above, padding aligned with
       the other flyout content (20px gutters), and no duplicate All Bags —
       it lives in the header row here. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .bags-panel-split > ul.bags-category-list {
      border-top: 1px solid #c4c4c4;
      margin: 24px 20px 0;
      padding: 24px 0 8px;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .bags-panel-split > ul.bags-category-list > li {
      padding-left: 0;
      padding-right: 0;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .bags-panel-split > ul.bags-category-list > li.bags-category-viewall {
      display: none;
    }
    /* Charms on mobile: group CARDS 2-up exactly like the bags grid (the
       shared classes carry that), then the selected group's products in a
       divided section below — tapping a group card populates it and scrolls
       it into view. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .charms-groups-grid > li > button {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 8px;
      width: 100%;
      padding: 0;
      margin: 0;
      border: 0;
      background: none;
      font-family: inherit;
      color: #000;
      cursor: pointer;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .charms-groups-grid > li > button.is-active .nested_menu_text {
      text-decoration: underline;
      text-underline-offset: 3px;
      background: none !important;
    }
    /* The products live in a REAL sub-panel here — it slides in over the
       group grid exactly like third-level takeovers (same checkbox
       machinery), with its back-arrow header returning to the groups.
       Geometry: fixed-in-transform resolves against the parent panel's box
       but lays out at its scroll canvas TOP (like absolute) — so the JS
       resets the parent's scroll when opening, and the panels' overscroll
       containment keeps the parent pinned while the overlay is up. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .charms-sub-panel {
      background: #f4f4f4;
      position: fixed !important;
      /* JS anchors this to the parent's CURRENT scroll offset when opening
         (the overlay lays out at canvas top otherwise), then normalises
         scroll + anchor together once covered — net zero on screen. */
      top: var(--charms-sub-top, 0px) !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      /* MUST outrank the parent panel's sticky header (z3) and floating
         View All bar (z4) — at z2 the PARENT'S back arrow painted through
         in the strip, so "back" closed the whole panel instead of the
         sub-panel. */
      z-index: 6;
      /* Hidden while closed: a PAINTED fixed element inside a scroller can
         demote the parent panel to main-thread (stuttery) scrolling — the
         0.4s delay keeps the slide-OUT visible before it hides. */
      visibility: hidden;
      transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 0.4s;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .charms-sub-checkbox:checked + .charms-sub-panel {
      visibility: visible;
      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
    /* (no product-grid-specific layout here on purpose: the products ul
       carries .bags-family-grid, so the SAME rules that lay out the groups
       grid — 2-up columns, gaps, gutters, card anchors, thumbs — lay out
       the products identically. One definition, zero drift.)
       TWO deeper-nesting exceptions, PROVEN by the computed-style dump: the
       split's li reset and font don't reach lis one level down in the
       sub-panel, so the legacy row padding (5px 20px — squeezing cards
       187→147px) and link font (16px Lato vs 15px Muli) leaked in. */
    html body .mobile_navigation_wrap .mobile_main_nav_list ul.charms-products-grid > li {
      padding: 0;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list ul.charms-products-grid > li > a {
      font: inherit;
      color: #000;
      text-decoration: none;
      letter-spacing: normal;
      padding: 0;
    }
    /* ONE shared tile geometry for BOTH charm grids — groups and products
       render identically (14px = the larger-image look). */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .charms-groups-grid .nav-flyout-thumb,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .charms-products-grid .nav-flyout-thumb {
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
      padding: 14px;
    }
    /* One explicit title size for BOTH lists — group cards are <button>s and
       product cards are <a>s, so without this they inherit different type. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .charms-groups-grid .nested_menu_text,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .charms-products-grid .nested_menu_text {
      font-size: 14px;
      line-height: 1.4;
    }
    /* Same normalisation at the card element itself: single-product groups
       are <a>s (direct links), multi-product groups are <button>s — force
       one inherited font stack so they can't diverge. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .charms-groups-grid > li > a,
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--charms .charms-groups-grid > li > button {
      font: inherit;
      color: #000;
      text-decoration: none;
      letter-spacing: normal;
    }
    /* Item entrances on mobile — EVERY flyout list cascades in like desktop
       (rows, stacked tiles, grids, peeks; menu-specific rules below only
       fine-tune timing where they also match). */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu ul > li {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu__checkbox:checked + .m-menu ul > li {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
      transition-delay: calc(0.15s + min(var(--card-i, 0), 14) * 0.04s);
    }
    /* Feature menus (Our Maison) on mobile: STACKED single-column cards —
       image full-width, text underneath — the stacked menus' design
       language (Stores/New) instead of the old hero + 2-up rhythm. Desktop
       keeps the editorial masonry (its rules live in the desktop block). */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--feature > ul {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      padding-left: 20px;
      padding-right: 20px;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--feature > ul > li {
      padding: 0;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--feature > ul > li > a {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 8px;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--feature > ul .nav-flyout-thumb {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      padding: 0;
      border-radius: 0;
    }
    /* Stacked menus (Stores, New) keep their tile design on mobile too —
       image full-width on top, text underneath — instead of inline rows. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--stacked > ul > li > a {
      flex-direction: column;
      gap: 10px;
      justify-content: center;
      text-align: center;
      align-items: center;

    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--stacked > ul .nav-flyout-thumb {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 10;
      padding: 0;
      border-radius: 0;
    }
    /* Collection peek panels slide over like any submenu on mobile: 2-up
       card grid with the staggered entrance, scrolling inside the panel
       (the legacy wrapper-scroll machinery can't reach an absolute panel
       this tall). Tap opens; the header's View all reaches the page. */
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--peek {
      overflow-y: auto !important;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--peek > ul {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px 16px;
      padding: 24px 20px 64px;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--peek > ul > li {
      padding: 0;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu__checkbox:checked + .m-menu--peek > ul > li {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
      transition-delay: calc(0.2s + min(var(--card-i, 0), 14) * 0.045s);
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--peek > ul > li > a {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 8px;
    }
    html body .mobile_navigation_wrap .mobile_main_nav_list .m-menu--peek > ul .nav-flyout-thumb {
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
      padding: 20px;
    }
  }
  @media (max-width: 767px) {
       .mds-promo-toast p.promo-bar__content.p1,
    .mds-promo-toast .promo-bar__content {
      font-size: 12px;
    }
.mds-promo-toast {
opacity: 0;
visibility: hidden;
}

body.mobile-announcement-visible .mds-promo-toast {
opacity: 1;
visibility: visible;
}
}




body.pys_collection header.header_Nav .mobile-navigation-wrapper {
           /* box-shadow: none !important; */
}