/* alternate design */
.mobile-app.toolbar {
  display: none;
}
body.mobile-app {
  margin-bottom: 55px;
}
body.mobile-app div.nav-container {
  top: 0;
  z-index: 10;
}
body.mobile-app div.nav-container nav.navigation.navigation-mobile {
  top: 59px;
}
body.mobile-app footer.page-footer.container {
  margin-bottom: 100px;
}
body.mobile-app footer.page-footer.container a#backtotop {
  bottom: 140px;
}
body.mobile-app.checkout-cart-index[data-attribute-hasdevicebutton='false'] div.column.main div.cart-container {
  /*ul.checkout-methods-items,
                    div.checkout.methods.overlay {*/
}
body.mobile-app.checkout-cart-index[data-attribute-hasdevicebutton='false'] div.column.main div.cart-container div.checkout.methods.trigger {
  margin-bottom: 75px !important;
}
body.mobile-app.checkout-cart-index[data-attribute-hasdevicebutton='true'] div.column.main div.cart-container {
  /*ul.checkout-methods-items,
                    div.checkout.methods.overlay {*/
}
body.mobile-app.checkout-cart-index[data-attribute-hasdevicebutton='true'] div.column.main div.cart-container div.checkout.methods.trigger {
  margin-bottom: 55px !important;
}
body.mobile-app iframe#launcher {
  bottom: 70px !important;
  right: -6px !important;
}
body.mobile-app .mobile-app.toolbar {
  display: block;
  position: fixed;
  bottom: 0;
  margin: 0;
  width: 100vw;
  height: 55px;
  background: #fff;
  z-index: 1000;
  padding: 0;
  border-top: #f3f3f3 solid 1px;
  /* NOTE: I've added support for device specific info (via appToolbar.js), so that we can further finetune UX in a granular way. I don't have any rules to add at this time (10/29/24), but providing some selectors below for reference for when we are ready to do this */
}
body.mobile-app .mobile-app.toolbar.no-button {
  height: 75px;
}
body.mobile-app .mobile-app.toolbar.pre-load {
  opacity: 0;
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options {
  margin: 0 auto;
  padding: 0;
  display: flex;
  height: 100%;
  width: 75%;
  max-width: 500px;
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option {
  display: inline-grid;
  width: 100%;
  text-align: center;
  list-style: none;
  position: relative;
  /* toggling font icons based on active/click states of parent .toolbar-option elements */
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.account ul.header.links li.customer-welcome {
  display: none;
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.account ul.header.links li.customer-welcome + .authorization-link {
  display: none;
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.account ul.header.links li.authorization-link {
  opacity: 0;
  /*a[href*='logout'] {
                                        display: none;
                                    }*/
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option:hover > a,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option:hover span {
  color: unset;
  cursor: pointer;
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option > a,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option span {
  position: absolute;
  bottom: 0;
  top: 16%;
  left: 0;
  right: 0;
  opacity: 0.6;
  font-size: 0.6em;
  color: #000;
  text-decoration: unset;
  /*&:hover {
                                color: unset;
                                cursor: pointer;
                                opacity: 1;
                            }*/
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option > a:before,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option span:before {
  display: block;
  font-size: 2.7em;
  font-family: FontAwesome;
  content: '';
  height: 27px;
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option > a[data-attribute-role='home'],
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option span[data-attribute-role='home'] {
  /*&:active, &:hover, &.active {
                                    &:before {
                                        content: '\e820b'
                                    }
                                }*/
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option > a[data-attribute-role='home']:before,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option span[data-attribute-role='home']:before {
  content: '\e648';
  font-family: Pe-icon-7-stroke;
  /* alternate design */
  content: '\e820';
  font-family: icons-blank-theme;
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option > a[data-attribute-role='shop']:before,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option span[data-attribute-role='shop']:before {
  content: '\e609';
  font-family: icons-blank-theme;
  font-size: 3.7em;
  margin-top: -5px;
  margin-bottom: 5px;
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option > a[data-attribute-role='cart'],
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option span[data-attribute-role='cart'] {
  /*&:active, &:hover, &.active {
                                    &:before {
                                        content: '\e638b'
                                    }
                                }*/
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option > a[data-attribute-role='cart']:before,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option span[data-attribute-role='cart']:before {
  content: '\f290';
  margin-top: 3.5px;
  margin-bottom: -3.5px;
  /* alternate design */
  content: '\e615';
  font-family: Pe-icon-7-stroke;
  margin-top: 0;
  margin-bottom: 0;
  /* alternate design */
  content: '4';
  font-family: nasa-font;
  font-size: 2.2em;
  margin-top: 2px;
  margin-bottom: -2px;
  /* alternate design */
  content: '\e638';
  font-family: 'icons-blank-theme';
  font-size: 2.7em;
  position: relative;
  bottom: 1px;
  margin-top: unset;
  margin-bottom: unset;
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option > a[data-attribute-role='account'],
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option span[data-attribute-role='account'] {
  /*&:active, &:hover, &.active {
                                    &:before {
                                        content: '\e711b'
                                    }
                                }*/
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option > a[data-attribute-role='account']:before,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option span[data-attribute-role='account']:before {
  content: '\e702';
  font-family: icons-blank-theme;
  margin-top: -6px;
  margin-bottom: 6px;
  /* alternate design */
  content: '\e711';
  margin-top: unset;
  margin-bottom: unset;
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option > a[data-attribute-role='promo']:before,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option span[data-attribute-role='promo']:before {
  content: '\f299';
  font-family: 'FontAwesome';
  font-size: 2.7em;
  color: forestgreen;
  position: relative;
  bottom: 1px;
  margin-top: unset;
  margin-bottom: unset;
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option > a[data-attribute-role='settings'],
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option span[data-attribute-role='settings'] {
  /*&:active, &:hover, &.active {
                                    &:before {
                                        content: '\e652b';
                                    }
                                }*/
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option > a[data-attribute-role='settings']:before,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option span[data-attribute-role='settings']:before {
  content: '\e606';
  font-size: 3.65em;
  margin-top: -8px;
  margin-bottom: 8px;
  /* alternate design */
  content: '\e666';
  font-family: Pe-icon-7-stroke;
  font-size: 2.55em;
  margin-top: 0;
  margin-bottom: 0;
  /* alternate design */
  content: '\e652';
  font-family: icons-blank-theme;
  font-size: 2.7em;
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option > a label,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option span label {
  font-weight: 100;
}
@media (max-width: 340px) {
  body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option > a,
  body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option span {
    transform: scale(0.8);
  }
}
@media (max-width: 279px) {
  body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option > a,
  body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option span {
    transform: scale(0.7);
  }
}
@media (max-width: 240px) {
  body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option > a label,
  body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option span label {
    display: none;
  }
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.home {
  /*&:active, &:hover, &.active {*/
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.home.active > a,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.home.selected > a,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.home.active span,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.home.selected span {
  opacity: 1;
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.home.active > a:before,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.home.selected > a:before,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.home.active span:before,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.home.selected span:before {
  content: '\e820b';
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.shop {
  /*&:active, &:hover, &.active {*/
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.shop.selected > a,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.shop.selected span {
  opacity: 1;
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.shop.selected > a:before,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.shop.selected span:before {
  font-weight: 700;
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.cart {
  /*&:active, &:hover, &.active {*/
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.cart.active > a,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.cart.selected > a,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.cart.active span,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.cart.selected span {
  opacity: 1;
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.cart.active > a:before,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.cart.selected > a:before,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.cart.active span:before,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.cart.selected span:before {
  content: '\e638b';
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.account {
  /*&:active, &:hover, &.active {*/
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.account:has(a.logged-in) > a:before,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.account:has(a.logged-in) span:before {
  content: '\e711b';
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.account.active > a,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.account.selected > a,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.account.active span,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.account.selected span {
  opacity: 1;
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.account.active > a:before,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.account.selected > a:before,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.account.active span:before,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.account.selected span:before {
  content: '\e711b';
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.settings.selected > a,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.settings.selected span {
  opacity: 1;
}
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.settings.selected > a:before,
body.mobile-app .mobile-app.toolbar ul.toolbar-options li.toolbar-option.settings.selected span:before {
  content: '\e652b';
}
/* hiding the settings button if using mobile app but NOT MobiLoud */
body.mobile-app:not(.mobiloud) li.toolbar-option.settings {
  display: none !important;
}
/*@supports (padding-bottom: env(safe-area-inset-bottom)) {
    body.mobile-app .mobile-app.toolbar {
        padding-bottom: ~"calc(env(safe-area-inset-bottom) + 55px)";
    }
}*/