/* ==========================================================================
   Meditherapie - mobile header / off-canvas menu panel
   --------------------------------------------------------------------------
   Everything below is scoped inside .header-mobile, which the theme sets to
   display:none on desktop. Nothing here can reach the desktop header, so no
   media query is needed and the 991px / 1024px breakpoint question goes away.

   Contested rules carry !important AND an id in the selector (#navigation-mobile,
   #customer-mobile), because styles-m.css uses !important and head_includes
   block 4 sits at (0,6,2). An id beats both regardless of load order.
   ========================================================================== */

/* -- 1. The panel ---------------------------------------------------------- */

.header-mobile .sidebar-nav-mobile {
    width: 85% !important;
    max-width: 320px !important;
    padding: 0 !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    box-shadow: 2px 0 14px rgba(0, 0, 0, .18);
}

/* keep it off-screen while closed, whatever width it now is */
.header-mobile .sidebar-nav-mobile {
    left: -100% !important;
}

.show-sidebar-nav .header-mobile .sidebar-nav-mobile {
    left: 0 !important;
}

/* -- 2. Menu / Account tabs ------------------------------------------------ */

.header-mobile .sidebar-nav-mobile > nav {
    padding: 8px 18px 0 !important;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.header-mobile .nav-tabs {
    border-bottom: 1px solid #ececec;
}

.header-mobile .nav-tabs > a {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0px;
    flex: 1 1 0;
    text-align: center;
    padding: 12px 0 11px !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6b6b6b;
    border-bottom: 2px solid transparent;
}

.header-mobile .nav-tabs > a.active {
    color: #b0490f;
    border-bottom-color: #f27533;
}

.header-mobile .tab-content-mobile {
    padding: 0 !important;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

/* -- 3. Menu rows ---------------------------------------------------------- */

#navigation-mobile > ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

#navigation-mobile > ul > li.sm_megamenu_lv1 {
    position: relative;
    border-bottom: 1px solid #ececec;
    float: none !important;
    width: 100% !important;
}

#navigation-mobile > ul > li.sm_megamenu_lv1 > a.sm_megamenu_head {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 48px;
    padding: 12px 48px 12px 18px !important;
    color: #2d2d2d;
    line-height: 1.3;
}

#navigation-mobile span.sm_megamenu_title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    color: inherit;
    background: none !important;
}

/* current page */
#navigation-mobile > ul > li.sm_megamenu_actived > a.sm_megamenu_head {
    background: #fdf1ea !important;   /* replaces the theme's #20b038 green */
    color: #b0490f !important;
    -webkit-box-shadow: inset 3px 0 0 #f27533;
    box-shadow: inset 3px 0 0 #f27533;
}

/* tap feedback */
#navigation-mobile > ul > li.sm_megamenu_lv1 > a.sm_megamenu_head:hover,
#navigation-mobile > ul > li.sm_megamenu_lv1 > a.sm_megamenu_head:focus,
#navigation-mobile > ul > li.sm_megamenu_lv1 > a.sm_megamenu_head:active {
    background: #fdf1ea !important;   /* replaces the theme's #20b038 green */
    color: #b0490f !important;
    text-decoration: none;
}

/* -- 4. Submenu toggle ----------------------------------------------------- */

#navigation-mobile .btn-submobile {
    position: absolute !important;
    top: 0;
    right: 0;
    width: 48px !important;
    height: 48px !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 2;
}

#navigation-mobile .btn-submobile:before {
    -webkit-transition: -webkit-transform .2s ease;
    transition: transform .2s ease;
}

#navigation-mobile li.parent-active > .btn-submobile:before {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

#navigation-mobile li.parent-active > a.sm_megamenu_head {
    color: #b0490f;
}

#navigation-mobile .sm-megamenu-child {
    background: #fafafa;
    border-top: 1px solid #ececec;
}

#navigation-mobile .sm-megamenu-child a {
    display: block !important;
    min-height: 42px;
    padding: 11px 18px 11px 34px !important;
    font-size: 12.5px;
    line-height: 1.4;
    color: #6b6b6b;
    border-bottom: 1px solid #f2f2f2;
}

#navigation-mobile .sm-megamenu-child a:hover,
#navigation-mobile .sm-megamenu-child a:active {
    background: #fdf1ea;
    color: #b0490f;
    text-decoration: none;
}

/* -- 5. Account tab -------------------------------------------------------- */

/* undo the desktop dropdown shell (head_includes block 4) on mobile only */
#customer-mobile .customer-welcome .customer-menu {
    position: static !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    background: none !important;
}

#customer-mobile .customer-welcome .customer-menu .header.links {
    padding: 0 !important;   /* was 0 0 58px - the dead space at the bottom */
    margin: 0 !important;
}

#customer-mobile ul.header.links {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

/* greeting - no box, no arrow */
#customer-mobile .customer-welcome > .greet.welcome,
#customer-mobile .customer-welcome > .customer-name {
    padding: 16px 18px 8px !important;
    margin: 0 !important;
    cursor: default;
}

#customer-mobile .customer-welcome > .greet.welcome span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6b6b6b;
}

#customer-mobile .customer-welcome > .greet.welcome:after,
#customer-mobile .customer-welcome > .customer-name:after,
#customer-mobile .customer-welcome .action.switch:after {
    display: none !important;
    content: none !important;
}

/* account rows */
#customer-mobile ul.header.links li a {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 46px;
    padding: 0 18px !important;
    border-bottom: 1px solid #ececec;
    font-size: 13px;
    font-weight: 500;
    color: #2d2d2d;
    line-height: 1.3;
}

#customer-mobile ul.header.links li a:hover,
#customer-mobile ul.header.links li a:active {
    background: #fdf1ea;
    color: #b0490f;
    text-decoration: none;
}

/* wish list count as a badge */
#customer-mobile li.link.wishlist a .counter.qty {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin: 0 0 0 auto !important;
    border-radius: 10px;
    background: #c2541a;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

#customer-mobile li.link.wishlist a .counter.qty:before,
#customer-mobile li.link.wishlist a .counter.qty:after {
    content: none !important;
}

/* Sign Out (signed in) / Login (signed out) as a full-width button */
#customer-mobile li.link.authorization-link {
    padding: 14px 18px 16px !important;
    border-top: 1px solid #ececec;
    background: #ffffff;
}

#customer-mobile li.link.authorization-link a {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 16px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 4px;
    background: #c2541a !important;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.2 !important;
}

#customer-mobile li.link.authorization-link a:hover,
#customer-mobile li.link.authorization-link a:active {
    background: #a8480f !important;
    color: #ffffff !important;
}


/* -- 6. Duplicate account list ---------------------------------------------
   #customer-mobile renders the account links TWICE: once inside
   .customer-welcome .customer-menu (5 links) and once as a second
   ul.header.links (7 links). On mobile both are visible, so every link and
   both Sign Out buttons appear twice. Keep the greeting from the first
   block, hide its link list, and show the fuller second list with Sign Out
   pushed to the end.
   -------------------------------------------------------------------------- */

#customer-mobile .customer-welcome .customer-menu .header.links {
    display: none !important;
}

#customer-mobile > ul.header.links:last-of-type {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

#customer-mobile > ul.header.links:last-of-type > li.link.authorization-link:not(:first-child) {
    -webkit-box-ordinal-group: 100;
    -ms-flex-order: 99;
    order: 99;
}