/* ==========================================
   JS BEAUTY STOREFRONT FOOTER LAYOUT V77
   Keeps the shared footer at the viewport bottom on short pages
   without changing its visual design or long-page flow.
========================================== */
html {
  min-height: 100%;
}

body.jsb-storefront-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body.jsb-storefront-shell > .store-footer {
  margin-top: auto !important;
  flex: 0 0 auto;
  width: 100%;
}

/* Normal page content keeps its natural height; the footer consumes only
   the remaining viewport space when a page is shorter than the screen. */
body.jsb-storefront-shell > main {
  flex: 0 0 auto;
  width: 100%;
}

/* Fixed mobile navigation is outside document flow; keep footer placement
   independent of it and preserve safe-area behavior handled by nav CSS. */
@supports not (height: 100dvh) {
  body.jsb-storefront-shell {
    min-height: 100vh;
  }
}