/*
 * H5 / 微信小程序共用的移动端壳层规则。
 * 仅处理安全区、动态视口、触控和可访问性，不改变后台装修模块结构。
 */
:root {
  --h5-shell-width: 620px;
  --h5-tabbar-height: 68px;
  --h5-safe-top: env(safe-area-inset-top, 0px);
  --h5-safe-bottom: env(safe-area-inset-bottom, 0px);
  --h5-touch-target: 44px;
}

html {
  min-height: 100%;
  background: #e8dfd5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-bottom: calc(var(--h5-tabbar-height) + var(--h5-safe-bottom) + 12px);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
}

.app-shell {
  width: min(100%, var(--h5-shell-width));
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
}

.app-shell main {
  padding-bottom: calc(var(--h5-tabbar-height) + var(--h5-safe-bottom) + 12px);
}

.app-shell .page {
  min-height: calc(100vh - var(--h5-tabbar-height) - var(--h5-safe-bottom));
  min-height: calc(100dvh - var(--h5-tabbar-height) - var(--h5-safe-bottom));
}

.app-shell img,
.app-shell video,
.app-shell iframe {
  max-width: 100%;
}

.app-shell input,
.app-shell select,
.app-shell textarea {
  font-size: 16px;
}

.app-shell button,
.app-shell a,
.app-shell input,
.app-shell select,
.app-shell textarea,
.app-shell [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

.app-shell button,
.app-shell a,
.app-shell [role="button"] {
  touch-action: manipulation;
}

.app-shell button:focus-visible,
.app-shell a:focus-visible,
.app-shell input:focus-visible,
.app-shell select:focus-visible,
.app-shell textarea:focus-visible,
.app-shell [role="button"]:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 2px;
}

/* 顶部状态栏安全区：普通子页面、自定义推广页和个人中心使用同一规则。 */
.app-shell .subpage-bar {
  height: auto;
  min-height: calc(51px + var(--h5-safe-top));
  padding-top: var(--h5-safe-top);
}

.app-shell .promotion-titlebar {
  height: auto;
  min-height: calc(78px + var(--h5-safe-top));
  padding-top: var(--h5-safe-top);
}

.app-shell #page-home {
  /* 首页搜索栏在安全区之外再保留一段呼吸空间。 */
  padding-top: calc(var(--h5-safe-top) + 12px);
}

.app-shell #page-mine .member-header {
  min-height: calc(170px + var(--h5-safe-top));
  padding-top: calc(28px + var(--h5-safe-top));
}

.app-shell .page > .page-heading:first-child {
  padding-top: calc(38px + var(--h5-safe-top));
}

.app-shell .filter-tabs {
  top: var(--h5-safe-top);
}

/* 底部导航的 68px 内容区之外，额外保留设备 Home 条安全区。 */
.bottom-nav {
  width: min(100%, var(--h5-shell-width));
  height: calc(var(--h5-tabbar-height) + var(--h5-safe-bottom));
  padding-bottom: var(--h5-safe-bottom);
}

.product-detail-action,
.checkout-submit-bar {
  width: min(100%, var(--h5-shell-width));
  bottom: calc(var(--h5-tabbar-height) + var(--h5-safe-bottom));
}

.product-detail {
  padding-bottom: calc(137px + var(--h5-safe-bottom));
}

.checkout-page {
  padding-bottom: calc(76px + var(--h5-safe-bottom));
}

/* 高频小控件提供不低于 44px 的真实触控区域。 */
.app-shell .add-button,
.app-shell .sheet-close {
  width: var(--h5-touch-target);
  height: var(--h5-touch-target);
}

.app-shell .stepper button {
  width: var(--h5-touch-target);
  height: var(--h5-touch-target);
}

.app-shell .filter-tabs button,
.app-shell .orders-toolbar button,
.app-shell .address-actions button,
.app-shell .address-import-actions button,
.app-shell .customer-filters button,
.app-shell .page-action,
.app-shell .inline-action {
  min-height: var(--h5-touch-target);
}

@media (max-width: 380px) {
  .app-shell .product-grid {
    gap: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .app-shell .product-body {
    padding: 11px;
  }

  .app-shell .stepper button {
    width: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .app-shell *,
  .app-shell *::before,
  .app-shell *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}