/* One geometry for every public page. This file is loaded after page-level CSS. */
:root {
  --front-visual-bottom-inset: 0px;
}

body.front-frame-page > .front-app-frame .public-bottom-nav,
.public-bottom-nav {
  position: fixed !important;
  left: 50% !important;
  bottom: max(12px, calc(8px + env(safe-area-inset-bottom))) !important;
  z-index: 8000 !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 3px !important;
  width: min(356px, calc(100vw - 28px)) !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 4px !important;
  overflow: hidden !important;
  border: 1px solid rgba(31, 38, 47, .1) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 12px 30px rgba(31, 38, 47, .14) !important;
  transform: translate3d(-50%, 0, 0) !important;
  -webkit-transform: translate3d(-50%, 0, 0) !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.front-frame-page > .front-app-frame .public-bottom-nav a,
.public-bottom-nav a {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-rows: 19px 12px !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 3px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #858b93 !important;
  font-size: 10px !important;
  font-weight: 720 !important;
  line-height: 12px !important;
  white-space: nowrap !important;
  transform: none !important;
}

body.front-frame-page > .front-app-frame .public-bottom-nav a.active,
.public-bottom-nav a.active {
  background: var(--subsite-button-color, #24282e) !important;
  color: var(--subsite-text-color, #fff) !important;
}

.public-bottom-nav .public-nav-icon {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  object-fit: contain !important;
  opacity: .78;
}

.public-bottom-nav a.active .public-nav-icon {
  filter: brightness(0) invert(1) !important;
  opacity: 1;
}

.public-bottom-nav a[data-public-nav="home"] .public-nav-icon {
  transition: opacity .16s ease, transform .2s ease;
}

.public-bottom-nav a[data-public-nav="home"].public-nav-top-action .public-nav-icon {
  transform: translateY(-1px);
}

.public-bottom-nav a span {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.front-frame-page > .front-app-frame.user-subpage.has-public-bottom-nav .user-page-shell {
  padding-bottom: calc(104px + env(safe-area-inset-bottom) + var(--front-visual-bottom-inset, 0px)) !important;
}

/* Keep every public page above Safari's expanded bottom toolbar. */
body.front-frame-page > .front-app-frame.has-public-bottom-nav .front-page-layer > main {
  padding-bottom: calc(104px + env(safe-area-inset-bottom) + var(--front-visual-bottom-inset, 0px)) !important;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-bottom-bar,
body.front-frame-page > .front-app-frame.user-subpage .front-action-dock {
  bottom: calc(max(12px, calc(8px + env(safe-area-inset-bottom))) + var(--front-visual-bottom-inset, 0px)) !important;
}

/* Product actions stay anchored to the safe-area edge while browser chrome expands or collapses. */
body.front-frame-page > .front-app-frame.product-detail-page .product-bottom-bar {
  position: fixed !important;
  top: auto !important;
  bottom: max(12px, calc(8px + env(safe-area-inset-bottom))) !important;
  transform: translate3d(-50%, 0, 0) !important;
  will-change: transform;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-detail-shell {
  padding-bottom: calc(104px + env(safe-area-inset-bottom) + var(--front-visual-bottom-inset, 0px)) !important;
}

body.front-frame-page[data-user-collection="cart"] > .front-app-frame.user-subpage .user-list-content,
body.front-frame-page[data-user-collection="favorites"] > .front-app-frame.user-subpage .user-list-content {
  padding-bottom: calc(108px + env(safe-area-inset-bottom) + var(--front-visual-bottom-inset, 0px)) !important;
}

body.front-frame-page > .front-app-frame.has-public-bottom-nav .home-more-menu,
body.front-frame-page > .front-app-frame.has-public-bottom-nav .quick-float,
body.front-frame-page > .front-app-frame.has-public-bottom-nav .quick-float-link,
body.front-frame-page > .front-app-frame.has-public-bottom-nav .incentive-float,
body.front-frame-page > .front-app-frame.has-public-bottom-nav .preview-top-rocket {
  bottom: calc(76px + env(safe-area-inset-bottom) + var(--front-visual-bottom-inset, 0px)) !important;
}

body.front-frame-page > .front-app-frame:not(.has-public-bottom-nav) .home-more-menu,
body.front-frame-page > .front-app-frame:not(.has-public-bottom-nav) .quick-float,
body.front-frame-page > .front-app-frame:not(.has-public-bottom-nav) .quick-float-link,
body.front-frame-page > .front-app-frame:not(.has-public-bottom-nav) .incentive-float,
body.front-frame-page > .front-app-frame:not(.has-public-bottom-nav) .preview-top-rocket {
  bottom: calc(18px + env(safe-area-inset-bottom) + var(--front-visual-bottom-inset, 0px)) !important;
}

body.front-frame-page > .front-app-frame .notice-float {
  bottom: calc(86px + env(safe-area-inset-bottom) + var(--front-visual-bottom-inset, 0px)) !important;
}

body.front-frame-page > .front-app-frame.has-public-bottom-nav .product-load-tip {
  bottom: calc(104px + env(safe-area-inset-bottom) + var(--front-visual-bottom-inset, 0px)) !important;
}

body.front-frame-page > .front-app-frame .sheet-modal,
body.front-frame-page > .front-app-frame.user-subpage .user-order-sheet-layer,
body.front-frame-page > .front-app-frame.buyer-page .buyer-forgot-sheet {
  box-sizing: border-box !important;
  padding-bottom: var(--front-visual-bottom-inset, 0px) !important;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-image-viewer {
  padding-bottom: calc(74px + var(--front-visual-bottom-inset, 0px)) !important;
}

/* Product dialogs are viewport layers and must always cover the fixed action capsule. */
body.front-frame-page > .front-app-frame.product-detail-page > .modal {
  z-index: 9000 !important;
  box-sizing: border-box !important;
}

body.front-frame-page > .front-app-frame.product-detail-page > .product-image-modal {
  z-index: 9100 !important;
}

/* Order sheets keep their original bottom-drawer geometry and render over navigation. */
body.front-frame-page > .front-app-frame.user-subpage.has-public-bottom-nav .user-order-sheet-layer {
  z-index: 9000 !important;
  padding-bottom: 0 !important;
}

body.front-frame-page > .user-order-sheet-layer {
  z-index: 9000 !important;
  padding-bottom: 0 !important;
}

body.front-frame-page > .front-app-frame.product-detail-page .image-viewer-bottom-close {
  bottom: calc(16px + var(--front-visual-bottom-inset, 0px)) !important;
}

body.front-frame-page > .tutorial-image-viewer {
  z-index: 9200 !important;
  padding-bottom: max(12px, calc(env(safe-area-inset-bottom) + var(--front-visual-bottom-inset, 0px))) !important;
}

@media (max-width: 340px) {
  body.front-frame-page > .front-app-frame .public-bottom-nav,
  .public-bottom-nav { width: calc(100vw - 20px) !important; }
}

@media (max-width: 699px) {
  body.front-frame-page > .front-app-frame .public-bottom-nav,
  .public-bottom-nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* 底栏新版图标：取消黑色选中块，使用选中/未选中 SVG 直接表达状态。 */
.public-bottom-nav a,
body.front-frame-page > .front-app-frame .public-bottom-nav a {
  background: transparent !important;
  color: #8a8e93 !important;
  transition: color .2s ease, transform .2s ease, background-color .2s ease;
}

.public-bottom-nav a.active,
body.front-frame-page > .front-app-frame .public-bottom-nav a.active {
  background: transparent !important;
  color: #6f4de4 !important;
  box-shadow: none !important;
}

.public-bottom-nav .public-nav-icon,
body.front-frame-page > .front-app-frame .public-bottom-nav .public-nav-icon {
  filter: none !important;
  opacity: 1 !important;
  transform: translateY(0) scale(1);
  transition: opacity .2s ease, transform .24s cubic-bezier(.22, .8, .22, 1);
}

.public-bottom-nav a[data-public-nav="home"] .public-nav-icon { content: url("/assets/nav-icons/bottom/home-unselected.svg"); }
.public-bottom-nav a[data-public-nav="tutorial"] .public-nav-icon { content: url("/assets/nav-icons/bottom/tutorial-unselected.svg"); }
.public-bottom-nav a[data-public-nav="orders"] .public-nav-icon { content: url("/assets/nav-icons/bottom/order-unselected.svg"); }
.public-bottom-nav a[data-public-nav="user"] .public-nav-icon { content: url("/assets/nav-icons/bottom/user-unselected.svg"); }

.public-bottom-nav a.active[data-public-nav="home"] .public-nav-icon { content: url("/assets/nav-icons/bottom/home-selected.svg"); }
.public-bottom-nav a.active[data-public-nav="tutorial"] .public-nav-icon { content: url("/assets/nav-icons/bottom/tutorial-selected.svg"); }
.public-bottom-nav a.active[data-public-nav="orders"] .public-nav-icon { content: url("/assets/nav-icons/bottom/order-selected.svg"); }
.public-bottom-nav a.active[data-public-nav="user"] .public-nav-icon { content: url("/assets/nav-icons/bottom/user-selected.svg"); }

.public-bottom-nav a.active .public-nav-icon {
  filter: none !important;
  animation: publicNavIconSelect .26s cubic-bezier(.22, .8, .22, 1) both;
}

.public-bottom-nav a[data-public-nav="home"].public-nav-top-action .public-nav-icon,
body.front-frame-page > .front-app-frame .public-bottom-nav a[data-public-nav="home"].public-nav-top-action .public-nav-icon {
  content: url("/assets/nav-icons/bottom/back-to-top.svg");
  filter: none !important;
}

.public-bottom-nav a.active span {
  font-weight: 780;
}

@keyframes publicNavIconSelect {
  0% { opacity: .35; transform: translateY(3px) scale(.78); }
  70% { opacity: 1; transform: translateY(-1px) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}