:root {
  color-scheme: light;
  --paper: #f7fbf0;
  --surface: #ffffff;
  --ink: #151815;
  --muted: #747b70;
  --line: #e4edd9;
  --brand: #79c53a;
  --brand-deep: #5d9a24;
  --brand-soft: #f1f9e3;
  --gold: #f1c94b;
  --red: #f04b54;
  --orange: #f48a22;
  --charcoal: #20241f;
  --shadow: 0 16px 36px rgba(73, 109, 31, 0.13);
}

/* App shell and shared UI */

* {
  box-sizing: border-box;
}

html {
  background: #eef5e6;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-width: none;
}

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--ink);
  background: #eef5e6;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
  scrollbar-width: none;
}

html:has(dialog[open]),
body:has(dialog[open]) {
  overflow: hidden;
  overscroll-behavior: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body.category-mode {
  overflow: hidden;
}

button,
input,
select {
  font: inherit;
}

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

button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 2px solid rgba(121, 197, 58, 0.38);
  outline-offset: 2px;
}

.bottom-nav button:focus-visible,
.member-topbar button:focus-visible,
.member-order-grid button:focus-visible,
.member-service-grid button:focus-visible {
  outline: none;
}

[hidden] {
  display: none !important;
}

.cart-icon {
  --cart-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 18 H18 L23 43 H48 L54 27 H23'/%3E%3Ccircle cx='25' cy='52' r='3.5'/%3E%3Ccircle cx='46' cy='52' r='3.5'/%3E%3C/g%3E%3C/svg%3E");
  display: inline-block;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  background: currentColor;
  transform: translateZ(0);
  -webkit-mask: var(--cart-icon-mask) center / contain no-repeat;
  mask: var(--cart-icon-mask) center / contain no-repeat;
}

.panda-ui-icon {
  --panda-ui-icon: none;
  display: inline-block;
  width: 28px;
  height: 28px;
  background-image: var(--panda-ui-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.icon-home { --panda-ui-icon: url("../assets/ui/panda_flat_ui_svg_assets/svg/ic_home_flat.svg"); }
.icon-category { --panda-ui-icon: url("../assets/ui/panda_flat_ui_svg_assets/svg/ic_category_flat.svg"); }
.icon-search { --panda-ui-icon: url("../assets/ui/panda_flat_ui_svg_assets/svg/ic_search_flat.svg"); }
.icon-profile { --panda-ui-icon: url("../assets/ui/panda_flat_ui_svg_assets/svg/ic_profile_flat.svg"); }
.icon-cart { --panda-ui-icon: url("../assets/ui/panda_flat_ui_svg_assets/svg/ic_cart_flat.svg"); }
.icon-favorite { --panda-ui-icon: url("../assets/ui/panda_flat_ui_svg_assets/svg/ic_favorite_flat.svg"); }
.icon-star { --panda-ui-icon: url("../assets/ui/panda_flat_ui_svg_assets/svg/ic_star_flat.svg"); }
.icon-share { --panda-ui-icon: url("../assets/ui/panda_flat_ui_svg_assets/svg/ic_share_flat.svg"); }
.icon-camera { --panda-ui-icon: url("../assets/ui/panda_flat_ui_svg_assets/svg/ic_camera_flat.svg"); }
.icon-upload { --panda-ui-icon: url("../assets/ui/panda_flat_ui_svg_assets/svg/ic_upload_flat.svg"); }
.icon-address { --panda-ui-icon: url("../assets/ui/panda_flat_ui_svg_assets/svg/ic_address_flat.svg"); }
.icon-invoice { --panda-ui-icon: url("../assets/ui/panda_flat_ui_svg_assets/svg/ic_invoice_flat.svg"); }
.icon-service { --panda-ui-icon: url("../assets/ui/panda_flat_ui_svg_assets/svg/ic_service_flat.svg"); }

.cart-icon-btn {
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--brand);
  background: #f8fcf0;
}

.theme-row,
.deal-scroller,
.category-tabs,
.detail-tabs,
.detail-related-scroll,
.top-category-strip,
.sub-filter-row,
.top-category-panel,
.picker-panel,
.side-category-list,
.category-product-list,
.sku-option-list,
.detail-search-results {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.theme-row::-webkit-scrollbar,
.deal-scroller::-webkit-scrollbar,
.category-tabs::-webkit-scrollbar,
.detail-tabs::-webkit-scrollbar,
.detail-related-scroll::-webkit-scrollbar,
.top-category-strip::-webkit-scrollbar,
.sub-filter-row::-webkit-scrollbar,
.top-category-panel::-webkit-scrollbar,
.picker-panel::-webkit-scrollbar,
.side-category-list::-webkit-scrollbar,
.category-product-list::-webkit-scrollbar,
.sku-option-list::-webkit-scrollbar,
.detail-search-results::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.app-shell {
  width: 100%;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0 10px 160px;
  background: linear-gradient(180deg, #fbfff5 0%, #f8fbf1 42%, #ffffff 100%);
  overflow: hidden;
}

body.category-mode .app-shell {
  height: 100dvh;
  min-height: 100dvh;
  padding-bottom: 0;
}

.home-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 0 -10px;
  padding: max(18px, env(safe-area-inset-top)) 10px 18px;
  color: #fff;
  background: #27331f;
}

.home-hero::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(21, 24, 21, 0.08), rgba(21, 24, 21, 0.28)),
    linear-gradient(0deg, rgba(0, 0, 0, 0.22), transparent 52%),
    var(--home-hero-bg, url("https://images.unsplash.com/photo-1569058242253-92a9c755a0ec?auto=format&fit=crop&w=900&q=80")) center/cover;
  content: "";
  transition: opacity 260ms ease, transform 900ms ease;
}

.home-hero.is-changing::before {
  opacity: 0.42;
  transform: scale(1.018);
}

.home-hero > * {
  position: relative;
  z-index: 1;
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.location-pill,
.mini-action,
.bell-btn {
  border: 0;
  color: #fff;
  background: transparent;
}

.location-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0;
  font-size: 16px;
}

.location-pill span {
  font-size: 24px;
}

.location-pill strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.location-pill em {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mini-action {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  font-size: 12px;
  font-weight: 800;
}

.bell-btn {
  position: relative;
  width: 36px;
  height: 42px;
  font-size: 26px;
}

.bell-btn span {
  position: absolute;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

.bell-btn span {
  right: -4px;
  top: 2px;
}

.search-band {
  display: grid;
  grid-template-columns: 40px 1fr 36px 72px;
  align-items: center;
  gap: 0;
  min-height: 52px;
  margin-top: 16px;
  padding: 4px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(73, 109, 31, 0.16);
}

.scan-btn,
.mic-btn {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  color: var(--brand-deep);
  background: #fff;
  font-size: 20px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-left: 4px;
  border-left: 1px solid var(--line);
}

.search-box span {
  font-size: 17px;
}

.search-box input {
  width: 100%;
  min-width: 0;
  height: 38px;
  color: var(--ink);
  border: 0;
  outline: 0;
}

.filter-btn {
  width: 68px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-size: 18px;
  font-weight: 900;
}

.filter-btn[aria-pressed="true"] {
  background: var(--brand-deep);
}

.hero-copy {
  margin-top: 28px;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.24);
}

.hero-copy p,
.hero-copy strong,
.hero-copy span {
  display: block;
  margin: 0;
}

.hero-copy p {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0;
}

.hero-copy strong {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 800;
}

.hero-copy span {
  margin-top: 8px;
  max-width: 320px;
  font-size: 14px;
}

.home-hero-dots {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-top: 12px;
}

.home-hero-dots button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
}

.home-hero-dots button.active {
  width: 18px;
  background: #fff;
}

.theme-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 31%;
  gap: 10px;
  overflow-x: auto;
  margin-top: 22px;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.theme-row article {
  min-height: 112px;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(73, 109, 31, 0.13);
}

.theme-row strong {
  display: block;
  padding: 10px 8px 2px;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: 0;
}

.theme-row img {
  display: block;
  width: 100%;
  height: 70px;
  object-fit: contain;
}

.sticky-search {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 126px 1fr;
  gap: 8px;
  align-items: center;
  margin: 0 -10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
}

.delivery-pill {
  min-width: 0;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--brand);
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.compact-search {
  display: grid;
  grid-template-columns: 30px 1fr 26px 62px;
  align-items: center;
  min-width: 0;
  height: 42px;
  padding-left: 10px;
  border: 2px solid var(--brand);
  border-radius: 999px;
  background: #fff;
  color: var(--brand-deep);
}

.compact-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
}

.compact-search em {
  font-style: normal;
  text-align: center;
}

.compact-search button {
  height: 34px;
  margin-right: 3px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-weight: 900;
}

.deal-board {
  margin-top: -2px;
  padding: 12px;
  border: 2px solid #f3d35c;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff7c7, #fff 40%);
}

.section-head,
.feed-title,
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-head strong,
.feed-title strong {
  display: inline-block;
  font-size: 18px;
}

.section-head span,
.feed-title span {
  display: inline-flex;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #a16c10;
  background: #ffe47a;
  font-size: 13px;
}

.section-head button,
.feed-title button,
.panel-head button {
  border: 0;
  background: transparent;
  color: #8d6a24;
}

.deal-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 38%;
  gap: 10px;
  overflow-x: auto;
  margin-top: 10px;
  scrollbar-width: none;
}

.deal-scroller article {
  position: relative;
  min-height: 188px;
  padding: 8px;
  border-radius: 10px;
  background: #fff;
}

.deal-scroller img {
  width: 100%;
  height: 82px;
  object-fit: contain;
}

.deal-scroller strong {
  display: block;
  min-height: 44px;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.35;
}

.deal-scroller span {
  display: block;
  color: var(--red);
  font-size: 18px;
  font-weight: 900;
}

.deal-scroller button {
  position: absolute;
  right: 6px;
  bottom: 7px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(121, 197, 58, 0.22);
  border-radius: 50%;
  color: var(--brand);
  background: #f8fcf0;
}

.deal-scroller button .cart-icon {
  width: 25px;
  height: 25px;
  color: var(--brand);
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px 8px;
  margin: 18px 0 12px;
}

.quick-grid button {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #202421;
  font-size: 13px;
  line-height: 1.2;
}

.quick-grid img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  background: #eef5eb;
}

.status-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 12px;
  color: #fff;
  background: var(--charcoal);
}

.status-strip strong,
.status-strip span {
  display: block;
}

.status-strip span {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
}

.status-strip button {
  min-width: 58px;
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #d8ff9d;
  background: rgba(255, 255, 255, 0.12);
}

.feed-section {
  margin: 0 -10px;
  padding: 14px 10px 0;
  background: #f5f6f4;
}

.feed-title {
  margin-bottom: 12px;
}

.feed-title strong {
  font-size: 22px;
}

.feed-title span {
  color: #fff;
  background: var(--brand);
}

.category-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 12px;
  scrollbar-width: none;
}

.category-tabs button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
}

.category-tabs button.active {
  border-color: var(--brand);
  color: #fff;
  background: var(--brand);
  font-weight: 800;
}

.product-list {
  column-count: 2;
  column-gap: 10px;
}

.product-card {
  display: inline-block;
  width: 100%;
  margin: 0 0 10px;
  break-inside: avoid;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(73, 109, 31, 0.08);
  cursor: pointer;
}

.product-card.sold-out {
  opacity: 0.62;
}

.product-image {
  width: 100%;
  height: 156px;
  object-fit: contain;
  background: #fff;
}

.product-info {
  padding: 10px;
}

.product-name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  font-size: 16px;
  line-height: 1.28;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.product-meta {
  display: grid;
  gap: 2px;
  margin: 8px 0;
  color: var(--muted);
  font-size: 12px;
}

.stock-tag {
  color: var(--brand-deep);
}

.stock-tag.low {
  color: var(--orange);
}

.stock-tag.sold-out {
  color: var(--muted);
}

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.price {
  color: var(--red);
  font-size: 22px;
  font-weight: 900;
}

.stepper {
  display: grid;
  grid-template-columns: 30px 0 30px;
  align-items: center;
  gap: 0;
}

.stepper button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--red);
  font-size: 18px;
  font-weight: 900;
}

.stepper button:first-child {
  color: var(--brand-deep);
  background: var(--brand-soft);
}

.stepper button:disabled {
  opacity: 0.35;
}

.stepper span {
  width: 0;
  overflow: hidden;
}

.cart-drawer {
  position: fixed;
  right: 0;
  bottom: calc(74px + env(safe-area-inset-bottom));
  left: 0;
  z-index: 30;
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
  pointer-events: none;
}

.cart-summary,
.checkout-btn {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: rgba(43, 43, 37, 0.86);
  box-shadow: var(--shadow);
  pointer-events: auto;
}

.cart-summary {
  display: grid;
  grid-template-columns: 42px 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  text-align: left;
  transition:
    width 180ms ease,
    min-height 180ms ease,
    padding 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.coupon-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff524d, #ffb040);
}

.cart-summary strong {
  font-size: 15px;
}

.timer {
  color: #f4cf70;
  font-size: 12px;
}

.cart-summary em,
.cart-summary small {
  display: none;
}

.cart-summary b {
  min-width: 76px;
  min-height: 40px;
  border-radius: 999px;
  background: var(--brand);
  line-height: 40px;
  text-align: center;
  font-style: normal;
}

body.category-mode.cart-summary-compact .cart-summary {
  width: 172px;
  min-height: 38px;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 6px;
  padding: 4px 7px;
  opacity: 0.9;
  transform: translateY(8px);
}

body.category-mode.cart-summary-compact .coupon-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 16px;
}

body.category-mode.cart-summary-compact .cart-summary strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.category-mode.cart-summary-compact .cart-summary .timer,
body.category-mode.cart-summary-compact .cart-summary b {
  display: none;
}

.cart-panel {
  display: none;
  max-height: min(54dvh, 360px);
  overflow: auto;
  margin-bottom: 10px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
  pointer-events: auto;
}

.cart-panel.open {
  display: block;
}

.cart-items {
  display: grid;
  gap: 0;
}

.cart-item {
  display: grid;
  grid-template-columns: 24px 64px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.cart-item.sold-out {
  opacity: 0.58;
}

.cart-item.invalid {
  margin: 4px -6px;
  padding: 10px 6px;
  border: 1px solid #ffe0e0;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffafa 0%, #fff 100%);
  opacity: 1;
}

.cart-item.invalid .cart-item-img {
  opacity: 0.72;
  filter: grayscale(0.35);
}

.cart-item.invalid .cart-check span {
  background: #f6f1ef;
}

.cart-item.invalid .cart-item-title-row em {
  color: #f04444;
  background: #fff1f1;
}

.cart-panel .cart-item {
  grid-template-columns: 22px 48px minmax(0, 1fr);
  gap: 7px;
}

.cart-panel .cart-check {
  height: 48px;
}

.cart-check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 64px;
  padding: 0;
  border: 0;
  background: transparent;
}

.cart-check span,
.cart-select-all span {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  border: 1.5px solid #cfd8cb;
  border-radius: 50%;
  background: #fff;
}

.cart-check[aria-pressed="true"] span,
.cart-select-all[aria-pressed="true"] span {
  border-color: var(--brand);
  background: var(--brand);
}

.cart-check[aria-pressed="true"] span::after,
.cart-select-all[aria-pressed="true"] span::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(42deg);
}

.cart-item-img {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  background: #f4faed;
}

.cart-item-img[data-fallback-applied="true"] {
  object-fit: contain;
  padding: 8px;
  border: 1px dashed #d5e9c4;
}

.cart-panel .cart-item-img {
  width: 48px;
  height: 48px;
  border-radius: 7px;
}

.cart-item-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.cart-item-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: start;
}

.cart-item p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  font-size: 13.5px;
  font-weight: 900;
  line-height: 1.22;
}

.cart-item-title-row em {
  max-width: 72px;
  overflow: hidden;
  padding: 2px 5px;
  border-radius: 999px;
  color: var(--brand-deep);
  background: var(--brand-soft);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-item-meta {
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-invalid-reason {
  display: -webkit-box;
  overflow: hidden;
  padding: 5px 7px;
  border-radius: 7px;
  color: #b33b3b;
  background: #fff2f1;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cart-item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cart-price-box {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 5px;
  min-width: 0;
}

.cart-price-box strong {
  color: var(--red);
  font-size: 16px;
  line-height: 1;
}

.cart-price-box small {
  color: #a4aaa2;
  font-size: 11px;
  text-decoration: line-through;
}

.cart-price-box span {
  flex-basis: 100%;
  color: #8f988c;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.1;
}

.cart-stepper {
  display: grid;
  grid-template-columns: 30px 28px 30px;
  align-items: center;
  justify-items: center;
  width: 88px;
  min-width: 88px;
  min-height: 28px;
  border: 1px solid #e8eee5;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}

.cart-stepper button {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  border: 0;
  --cart-stepper-line: var(--brand-deep);
  color: transparent;
  background: transparent;
  font-size: 0;
  line-height: 1;
}

.cart-stepper button::before,
.cart-stepper button[data-cart-qty="1"]::after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 1.8px;
  border-radius: 999px;
  background: var(--cart-stepper-line);
  content: "";
  transform: translate(-50%, -50%);
}

.cart-stepper button[data-cart-qty="1"]::after {
  width: 1.8px;
  height: 10px;
}

.cart-stepper button:disabled {
  --cart-stepper-line: #c9d2c4;
}

.cart-stepper span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.cart-remove {
  justify-self: start;
  width: fit-content;
  min-height: 22px;
  margin-top: -2px;
  padding: 0;
  border: 0;
  color: #9aa29a;
  background: transparent;
  font-size: 11px;
}

.empty,
.cart-empty-state {
  padding: 22px 0;
  color: var(--muted);
  text-align: center;
}

.cart-empty-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 28px 12px;
}

.cart-empty-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: var(--brand);
  background: var(--brand-soft);
}

.cart-empty-icon .cart-icon {
  width: 36px;
  height: 36px;
}

.cart-empty-state strong {
  color: var(--ink);
  font-size: 16px;
}

.cart-empty-state p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
}

.cart-empty-state button {
  min-height: 34px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-weight: 900;
}

.bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 25;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 100%;
  min-height: calc(72px + env(safe-area-inset-bottom));
  margin: 0 auto;
  padding: 8px 8px max(8px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
}

.bottom-nav button {
  position: relative;
  display: grid;
  place-items: center;
  gap: 2px;
  border: 0;
  color: #4c514d;
  background: transparent;
  font-size: 0;
}

.bottom-nav button > span {
  font-size: 12px;
}

.bottom-nav .active {
  color: var(--brand);
}

.bottom-nav .panda-ui-icon {
  width: 28px;
  height: 28px;
  transition: transform 140ms ease, filter 140ms ease;
}

.bottom-nav .active .panda-ui-icon {
  filter: saturate(1.12);
  transform: translateY(-1px);
}

.bottom-nav .nav-cart-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 30px;
  font-size: 0;
}

.bottom-nav .nav-cart-icon {
  width: 28px;
  height: 28px;
  color: var(--brand);
}

.bottom-nav .ai-btn {
  width: 58px;
  height: 58px;
  justify-self: center;
  margin-top: -22px;
  border-radius: 50%;
  color: #1b3b18;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.34) 34%, transparent 35%),
    linear-gradient(145deg, #d9ff9a, #8bd24a 46%, #43b85b 100%);
  font-size: 21px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(80, 166, 54, 0.22);
}

.bottom-nav .ai-btn span {
  position: absolute;
  right: -2px;
  bottom: 5px;
  padding: 1px 5px;
  border-radius: 999px;
  color: #fff;
  background: rgba(37, 95, 28, 0.86);
  font-size: 9px;
  font-weight: 900;
}

body.category-mode .bottom-nav {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.category-mode .bottom-nav .ai-btn {
  display: none;
}

.bottom-nav .nav-cart-wrap i {
  position: absolute;
  display: grid;
  z-index: 5;
  box-sizing: border-box;
  right: 0;
  top: -5px;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border: 2px solid #fff;
  color: #fff;
  background: var(--red);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 3px 7px rgba(240, 75, 84, 0.3);
}

.bottom-nav .nav-cart-wrap i[hidden] {
  display: none;
}

.bottom-nav button:last-child em {
  position: absolute;
  display: block;
  min-width: 9px;
  width: 9px;
  height: 9px;
  right: 20px;
  top: 4px;
  padding: 0;
  border-radius: 50%;
  background: var(--red);
}

.app-toast {
  position: fixed;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom));
  z-index: 80;
  max-width: min(76vw, 320px);
  padding: 10px 16px;
  border-radius: 999px;
  color: #fff;
  background: rgba(34, 43, 30, 0.88);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}

.app-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.app-toast.warning {
  max-width: min(86vw, 360px);
  border: 1px solid rgba(255, 210, 112, 0.5);
  color: #2b2415;
  background: rgba(255, 247, 219, 0.96);
  box-shadow: 0 12px 30px rgba(93, 63, 0, 0.16);
}

.app-toast.hidden {
  display: none;
}

.sheet-dialog {
  width: min(100%, 430px);
  max-height: min(84dvh, 720px);
  margin: auto auto 0;
  border: 0;
  border-radius: 22px 22px 0 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 -18px 48px rgba(34, 50, 25, 0.18);
  animation: sheetRise 180ms cubic-bezier(0.2, 0.84, 0.24, 1) both;
}

.sheet-dialog::backdrop {
  background: rgba(10, 16, 12, 0.42);
  backdrop-filter: blur(4px);
}

.sheet-dialog > form {
  max-height: inherit;
  margin: 0;
  overflow-y: auto;
  padding: 14px 16px max(18px, env(safe-area-inset-bottom));
}

.sheet-dialog > form::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: #d8e2d0;
}

.sheet-dialog .panel-head {
  min-height: 36px;
  margin-bottom: 12px;
}

.sheet-dialog .panel-head strong {
  color: #1f291c;
  font-size: 18px;
  line-height: 1.2;
}

.sheet-dialog .panel-head button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  color: #65705f;
  background: #f4f8ef;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(218, 228, 209, 0.82);
}

@keyframes sheetRise {
  from {
    opacity: 0.84;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.checkout-body {
  display: grid;
  gap: 12px;
}

.checkout-address-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(121, 197, 58, 0.18);
  border-radius: 14px;
  background: linear-gradient(135deg, #f7fbf2, #fff);
}

.checkout-address-card div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.checkout-address-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.checkout-address-card strong,
.checkout-address-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-address-card strong {
  color: var(--ink);
  font-size: 15px;
}

.checkout-address-card small {
  color: #6f7a68;
  font-size: 11.5px;
}

.checkout-address-actions {
  display: grid;
  gap: 7px;
}

.checkout-address-card button {
  min-height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  color: var(--brand-deep);
  background: #edf9e8;
  font-size: 12px;
  font-weight: 900;
}

.checkout-address-card button:first-child {
  color: #fff;
  background: var(--brand);
  box-shadow: 0 8px 14px rgba(35, 192, 88, 0.18);
}

.checkout-address-alert {
  display: grid;
  min-height: 34px;
  align-items: center;
  padding: 8px 11px;
  border-radius: 11px;
  color: #8d5c05;
  background: #fff7df;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.checkout-address-alert.mail-required {
  color: #476005;
  background: linear-gradient(135deg, #f4ffe8, #fff7dd);
  border: 1px solid rgba(121, 197, 58, 0.28);
}

.checkout-address-alert[hidden] {
  display: none;
}

.checkout-address-photos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 66px;
  border: 1px solid rgba(218, 228, 209, 0.82);
  border-radius: 14px;
  padding: 9px 10px;
  color: inherit;
  background: #fff;
  text-align: left;
}

.checkout-address-photos > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.checkout-address-photos strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.checkout-address-photos small {
  overflow: hidden;
  color: #7a8574;
  font-size: 11.5px;
  font-weight: 780;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-address-photo-slots {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  gap: 6px;
}

.checkout-address-photo-slots i {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  overflow: hidden;
  border: 1px dashed rgba(121, 197, 58, 0.45);
  border-radius: 10px;
  color: var(--brand-deep);
  background: #f4faef;
  font-style: normal;
}

.checkout-address-photo-slots i.has-photo {
  border-style: solid;
}

.checkout-address-photo-slots i::before {
  content: "+";
  color: rgba(121, 197, 58, 0.8);
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

.checkout-address-photo-slots i.has-photo::before {
  display: none;
}

.checkout-address-photo-slots img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.checkout-address-photo-slots em {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2px 1px;
  color: #fff;
  background: rgba(24, 34, 20, 0.5);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.1;
  text-align: center;
}

.checkout-address-photo-slots i:not(.has-photo) em {
  position: static;
  margin-top: 19px;
  color: #78916a;
  background: transparent;
}

.checkout-body label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.checkout-body input,
.checkout-body select {
  width: 100%;
  min-height: 46px;
  border: 1px solid #e2ebdb;
  border-radius: 13px;
  padding: 0 13px;
  color: var(--ink);
  background: #f8fbf3;
  font-weight: 800;
}

.checkout-body select.is-mail-delivery {
  color: var(--brand-deep);
  background: #f1fae9;
  border-color: rgba(121, 197, 58, 0.42);
  opacity: 1;
}

.checkout-btn {
  margin-top: 12px;
  background: var(--brand);
}

.address-dialog {
  width: min(100%, 430px);
  max-height: min(100dvh, 932px);
  border-radius: 22px 22px 0 0;
  background: #f5f6f4;
}

.address-book-dialog {
  width: min(100%, 430px);
  max-height: min(92dvh, 860px);
  background: #f7f8f5;
}

.address-book-dialog form {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 8px;
  max-height: inherit;
  overflow: hidden;
  padding: 12px 10px max(12px, env(safe-area-inset-bottom));
}

.address-book-dialog form::before {
  margin-bottom: 8px;
}

.address-book-dialog .panel-head {
  min-height: 30px;
  margin-bottom: 0;
}

.address-book-dialog .panel-head strong {
  font-size: 17px;
}

.address-book-dialog .panel-head button {
  width: 30px;
  height: 30px;
}

.address-book-tip {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid rgba(121, 197, 58, 0.18);
  border-radius: 12px;
  background: linear-gradient(135deg, #f2faec, #fff);
}

.address-book-tip strong {
  color: #1f291c;
  font-size: 12.5px;
  font-weight: 950;
}

.address-book-tip span {
  color: #6f7a68;
  font-size: 11.5px;
  font-weight: 760;
  line-height: 1.32;
}

.address-book-list {
  display: grid;
  gap: 7px;
  max-height: min(72dvh, 680px);
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: none;
}

.address-book-list::-webkit-scrollbar {
  display: none;
}

.address-book-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
  border: 1px solid rgba(220, 227, 216, 0.9);
  border-radius: 12px;
  padding: 8px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(37, 49, 30, 0.035);
}

.address-book-card.active {
  border-color: rgba(121, 197, 58, 0.55);
  background: linear-gradient(135deg, #f6fbf0, #fff);
}

.address-book-card header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-column: 1;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.address-book-card h3 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  min-width: 0;
}

.address-book-card h3 span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.address-book-card h3 em,
.address-book-card h3 b {
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 10.5px;
  font-style: normal;
  line-height: 1.3;
}

.address-book-card h3 em {
  color: var(--brand-deep);
  background: #eef9e8;
}

.address-book-card h3 b {
  color: #8a5a00;
  background: #fff3d6;
}

.address-book-actions {
  display: grid;
  grid-column: 2;
  grid-row: 1 / span 4;
  gap: 6px;
  align-self: center;
  justify-self: end;
  width: 72px;
}

.address-book-edit,
.address-book-use {
  width: 100%;
  border: 0;
  border-radius: 999px;
  font-weight: 950;
  line-height: 1.12;
}

.address-book-edit {
  min-height: 28px;
  border: 0;
  padding: 0 8px;
  color: #66715f;
  background: #f3f5f1;
  font-size: 11px;
}

.address-book-card p {
  grid-column: 1;
  overflow: hidden;
  min-width: 0;
  margin: 0;
  color: #1f291c;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.address-book-card small {
  grid-column: 1;
  overflow: hidden;
  min-width: 0;
  color: #7c8675;
  font-size: 11.5px;
  font-weight: 780;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.address-book-meta {
  display: flex;
  grid-column: 1;
  flex-wrap: nowrap;
  gap: 5px;
  overflow: hidden;
  min-width: 0;
}

.address-book-meta span {
  flex: 0 1 auto;
  overflow: hidden;
  max-width: 42%;
  padding: 3px 6px;
  border-radius: 999px;
  color: #61705a;
  background: #f3f6ef;
  font-size: 10.5px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.address-book-use {
  min-height: 34px;
  padding: 0 8px;
  color: var(--brand-deep);
  background: #eef9e8;
  font-size: 11px;
}

.address-book-card.active .address-book-use {
  color: #fff;
  background: var(--brand);
  box-shadow: 0 6px 12px rgba(93, 168, 52, 0.18);
}

.address-book-add {
  min-height: 40px;
  border: 1px dashed rgba(121, 197, 58, 0.48);
  border-radius: 12px;
  color: var(--brand-deep);
  background: #f2faec;
  font-size: 14px;
  font-weight: 950;
}

.address-dialog > form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: min(100dvh, 932px);
  max-height: inherit;
  padding: 0;
  background: #f5f6f4;
}

.address-dialog > form::before {
  display: none;
}

.address-page-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  align-items: center;
  min-height: 66px;
  padding: 6px 14px 8px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 1px 0 rgba(31, 41, 28, 0.04);
}

.address-page-head strong {
  justify-self: center;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: 0;
}

.address-page-head button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #6b7468;
  background: transparent;
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
}

.address-dialog-body {
  display: grid;
  align-content: start;
  gap: 0;
  overflow-y: auto;
  padding: 12px 10px 18px;
  scrollbar-width: none;
}

.address-dialog-body::-webkit-scrollbar {
  display: none;
}

.address-form-card,
.address-default-card {
  overflow: hidden;
  border: 1px solid rgba(222, 229, 218, 0.72);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(49, 62, 42, 0.04);
}

.address-paste-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px;
  gap: 12px;
  align-items: center;
  min-height: 90px;
  padding: 0 0 12px;
  border-bottom: 1px solid #eef1ec;
  background: transparent;
}

.address-paste-card textarea {
  width: 100%;
  min-height: 76px;
  max-height: 118px;
  border: 0;
  border-radius: 13px;
  padding: 13px 14px;
  color: #a6aaa3;
  background: #f1f2f1;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
  outline: none;
  resize: none;
}

.address-paste-card textarea:focus {
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(121, 197, 58, 0.28);
}

.address-paste-card button,
.address-map-card button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), #24c95c);
  box-shadow: 0 8px 14px rgba(35, 192, 88, 0.2);
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.address-paste-card button {
  padding: 0 16px;
}

.address-form-card {
  display: grid;
  padding: 0 14px;
}

.address-main-card {
  padding-top: 12px;
  border-bottom: 0;
  border-radius: 15px 15px 0 0;
}

.address-location-card {
  overflow: visible;
  border-top: 0;
  border-bottom: 0;
  border-radius: 0;
  padding-bottom: 12px;
  box-shadow: none;
}

.address-line-row,
.address-select-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 54px;
  gap: 8px;
  border: 0;
  border-bottom: 1px solid #eef1ec;
  color: inherit;
  background: transparent;
  text-align: left;
}

.address-line-row:last-child,
.address-select-row:last-child {
  border-bottom: 0;
}

.address-line-row > strong,
.address-select-row > strong,
.address-default-card strong {
  color: #20271f;
  font-size: 15px;
  font-weight: 950;
}

.address-line-row input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  font-size: 16px;
  font-weight: 850;
  outline: none;
}

.address-line-row input::placeholder {
  color: #bfc4bd;
  font-weight: 800;
}

.address-contact-row {
  grid-template-columns: 82px minmax(0, 1fr) 128px;
}

.address-gender-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.address-gender-tabs button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  border: 0;
  color: #232c22;
  background: transparent;
  font-size: 15px;
  font-weight: 850;
  white-space: nowrap;
}

.address-gender-tabs button::before {
  content: "";
  flex: 0 0 20px;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 2px solid #d8ddd5;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 4px #fff;
}

.address-gender-tabs button.active::before {
  border-color: var(--brand);
  background: var(--brand);
}

.address-phone-row {
  grid-template-columns: 82px 56px minmax(0, 1fr);
  gap: 6px;
}

.address-code-btn {
  justify-self: start;
  padding: 0;
  min-height: 34px;
  border: 0;
  color: #242c22;
  background: transparent;
  font-size: 16px;
  font-weight: 900;
}

.address-code-btn span {
  color: #6f776b;
  font-size: 12px;
}

.address-code-btn.is-tapped {
  color: var(--brand-deep);
}

.address-address-row {
  grid-template-columns: 82px minmax(0, 1fr) 52px;
}

.address-map-link {
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  color: var(--brand-deep);
  background: #eef9e8;
  font-size: 12px;
  font-weight: 950;
}

.address-select-row {
  width: 100%;
  cursor: pointer;
}

.address-select-row span {
  overflow: hidden;
  color: #b4bab2;
  font-size: 16px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.address-select-row i {
  color: #c5cac2;
  font-size: 34px;
  font-style: normal;
  font-weight: 300;
  line-height: 1;
}

.address-tag-row {
  grid-template-columns: 82px minmax(0, 1fr);
}

.address-tag-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.address-tag-options button {
  min-height: 34px;
  min-width: 58px;
  border: 0;
  border-radius: 4px;
  color: #626b5e;
  background: #f4f5f4;
  font-size: 14px;
  font-weight: 850;
}

.address-tag-options button.active {
  color: var(--brand-deep);
  background: #eef9e8;
  box-shadow: inset 0 0 0 1px rgba(121, 197, 58, 0.3);
}

.address-note-input-row {
  display: none;
  padding: 0 0 12px 82px;
  border-bottom: 0;
}

.address-note-input-row.open {
  display: block;
}

.address-note-input-row input {
  width: 100%;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  padding: 0 12px;
  color: var(--ink);
  background: #f7f8f6;
  font-size: 15px;
  font-weight: 820;
  outline: none;
}

.address-note-input-row input::placeholder {
  color: #b8beb6;
}

.address-map-card {
  display: block;
  height: 216px;
  padding: 14px 0 0;
  border-top: 1px solid #eef1ec;
  background: transparent;
}

.address-map-visual {
  position: relative;
  display: block;
  height: 184px;
  overflow: hidden;
  padding: 14px;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(121, 197, 58, 0.1) 1px, transparent 1px) 0 0 / 25px 25px,
    linear-gradient(rgba(121, 197, 58, 0.1) 1px, transparent 1px) 0 0 / 25px 25px,
    linear-gradient(135deg, #eef8e8, #fff);
}

.address-map-visual > span {
  position: absolute;
  left: 50%;
  top: 44px;
  width: 30px;
  height: 30px;
  border: 7px solid var(--brand);
  border-radius: 50% 50% 50% 0;
  background: #fff;
  box-shadow: 0 8px 18px rgba(73, 109, 31, 0.18);
  transform: translateX(-50%) rotate(-45deg);
}

.address-map-visual strong,
.address-map-visual em,
.address-map-visual small {
  position: absolute;
  left: 14px;
  z-index: 1;
}

.address-map-visual strong {
  top: 14px;
  color: #1f291c;
  font-size: 15px;
  font-style: normal;
  font-weight: 950;
}

.address-map-visual em {
  top: 39px;
  color: #66715f;
  font-size: 12px;
  font-style: normal;
  font-weight: 780;
}

.address-map-visual small {
  right: 14px;
  bottom: 13px;
  color: #66715f;
  font-size: 11.5px;
  font-weight: 800;
}

.address-map-card button {
  position: absolute;
  top: 14px;
  right: 14px;
  min-width: 0;
  min-height: 34px;
  padding: 0 12px;
}

.address-photo-card {
  display: grid;
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid #eef1ec;
  border-bottom: 1px solid #eef1ec;
  background: transparent;
}

.address-photo-copy,
.address-default-card div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.address-photo-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.address-photo-card strong {
  color: var(--ink);
  font-size: 15px;
}

.address-photo-card span,
.address-default-card span {
  color: #81897c;
  font-size: 12.5px;
  font-weight: 760;
  line-height: 1.4;
}

.address-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.address-photo-upload {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 92px;
  place-items: center;
  padding: 0;
  border: 1px dashed rgba(121, 197, 58, 0.55);
  border-radius: 12px;
  color: var(--brand-deep);
  background: #f3faef;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
}

.address-photo-upload span {
  position: relative;
  z-index: 1;
  color: var(--brand-deep);
  font-weight: 900;
}

.address-photo-upload span::before {
  content: "+";
  display: block;
  margin-bottom: 4px;
  color: var(--brand);
  font-size: 24px;
  line-height: 1;
}

.address-photo-upload img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.address-photo-upload.has-photo span {
  align-self: end;
  width: 100%;
  padding: 5px 4px;
  color: #fff;
  background: rgba(23, 31, 20, 0.5);
  font-size: 11px;
}

.address-photo-upload.has-photo span::before {
  display: none;
}

.address-photo-action-dialog {
  width: min(100%, 430px);
  margin: auto auto 0;
  padding: 0;
  border-radius: 22px 22px 0 0;
}

.address-photo-action-dialog form {
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}

.address-photo-action-body {
  display: grid;
  gap: 10px;
}

.address-photo-action-body button {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 68px;
  border: 1px solid #e5edde;
  border-radius: 16px;
  padding: 11px 12px;
  color: var(--ink);
  background: linear-gradient(135deg, #fbfdf8, #fff);
  text-align: left;
}

.address-photo-action-body i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #eef9e8;
}

.address-photo-action-body i::before {
  width: 22px;
  height: 22px;
  background: var(--brand-deep);
  content: "";
}

#addressPhotoCameraBtn i::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5h3.2l1.5-2h6.6l1.5 2H20a1.5 1.5 0 0 1 1.5 1.5v8.2A1.8 1.8 0 0 1 19.7 19H4.3a1.8 1.8 0 0 1-1.8-1.8V9A1.5 1.5 0 0 1 4 7.5Z'/%3E%3Ccircle cx='12' cy='13.2' r='3.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5h3.2l1.5-2h6.6l1.5 2H20a1.5 1.5 0 0 1 1.5 1.5v8.2A1.8 1.8 0 0 1 19.7 19H4.3a1.8 1.8 0 0 1-1.8-1.8V9A1.5 1.5 0 0 1 4 7.5Z'/%3E%3Ccircle cx='12' cy='13.2' r='3.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

#addressPhotoUploadBtn i::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17.5v1.2A1.3 1.3 0 0 0 5.3 20h13.4a1.3 1.3 0 0 0 1.3-1.3v-1.2'/%3E%3Cpath d='M12 15.5V4.5'/%3E%3Cpath d='m7.8 8.8 4.2-4.3 4.2 4.3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17.5v1.2A1.3 1.3 0 0 0 5.3 20h13.4a1.3 1.3 0 0 0 1.3-1.3v-1.2'/%3E%3Cpath d='M12 15.5V4.5'/%3E%3Cpath d='m7.8 8.8 4.2-4.3 4.2 4.3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.address-photo-action-body span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.address-photo-action-body strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
}

.address-photo-action-body small {
  color: #7d8676;
  font-size: 12px;
  font-weight: 780;
  line-height: 1.35;
}

.address-default-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border-top: 0;
  border-radius: 0 0 15px 15px;
  padding: 16px 14px;
  box-shadow: 0 8px 20px rgba(49, 62, 42, 0.04);
}

.address-switch {
  position: relative;
  width: 58px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: #e8ebe7;
  transition: background 160ms ease;
}

.address-switch span {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 9px rgba(22, 31, 18, 0.16);
  transition: transform 160ms ease;
}

.address-switch.active {
  background: var(--brand);
}

.address-switch.active span {
  transform: translateX(24px);
}

.address-save-btn {
  width: calc(100% - 40px);
  min-height: 50px;
  margin: 8px 20px max(16px, env(safe-area-inset-bottom));
  border-radius: 999px;
  font-size: 18px;
  font-weight: 950;
}

.sku-dialog {
  width: 100%;
  max-height: min(78dvh, 680px);
  margin: auto auto 0;
  padding: 0;
  border-radius: 20px 20px 0 0;
  background:
    linear-gradient(180deg, rgba(246, 251, 239, 0.98) 0, #fff 132px),
    #fff;
  box-shadow: 0 -18px 48px rgba(34, 50, 25, 0.2);
}

.sku-dialog::backdrop {
  background: rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(2px);
}

.sku-dialog .panel-head {
  padding: 0 2px 2px;
}

.sku-dialog .panel-head strong {
  font-size: 18px;
  letter-spacing: 0;
}

.sku-dialog .panel-head button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  color: #6f766b;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 0 0 1px rgba(219, 228, 211, 0.86);
}

.sku-body {
  display: grid;
  gap: 12px;
}

.sku-product-head {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(225, 235, 216, 0.9);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
}

.sku-product-head img {
  width: 96px;
  height: 96px;
  border: 1px solid #edf2e8;
  border-radius: 12px;
  object-fit: cover;
  background: #f5f7f3;
}

.sku-product-head div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.sku-product-head strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 16px;
  line-height: 1.25;
}

.sku-product-head span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sku-product-head small {
  width: fit-content;
  padding: 2px 7px;
  border: 1px solid rgba(121, 197, 58, 0.28);
  border-radius: 999px;
  color: var(--brand-deep);
  background: var(--brand-soft);
  font-size: 11px;
  font-weight: 800;
}

.sku-product-head em {
  color: var(--red);
  font-size: 24px;
  font-style: normal;
  font-weight: 900;
}

.sku-product-head del {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.sku-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(226, 235, 218, 0.9);
  border-radius: 14px;
  background: #fff;
}

.sku-qty-row strong,
.sku-select-section h3 {
  margin: 0;
  font-size: 15px;
}

.sku-qty-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sku-qty-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sku-stepper {
  display: grid;
  grid-template-columns: 31px 38px 31px;
  align-items: center;
  flex: 0 0 auto;
  height: 32px;
  overflow: hidden;
  border: 1px solid #dfe9d8;
  border-radius: 999px;
  text-align: center;
  background: #f8fbf3;
}

.sku-stepper button {
  position: relative;
  display: grid;
  width: 31px;
  height: 30px;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--brand-deep);
}

.sku-stepper button::before,
.sku-stepper button[data-sku-qty="1"]::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 1.8px;
  border-radius: 999px;
  background: currentColor;
}

.sku-stepper button[data-sku-qty="1"]::after {
  width: 1.8px;
  height: 10px;
}

.sku-stepper button:disabled {
  color: #bfc9b8;
  background: #f3f6f0;
}

.sku-stepper span {
  min-height: 30px;
  border-inline: 1px solid #e3ebdc;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  line-height: 30px;
  font-weight: 800;
}

.sku-select-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(226, 235, 218, 0.9);
  border-radius: 14px;
  background: #fff;
}

.sku-option-list {
  display: grid;
  gap: 8px;
  max-height: min(34dvh, 268px);
  overflow-y: auto;
  padding-right: 2px;
}

.sku-option-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  gap: 9px;
  align-items: center;
  min-height: 54px;
  padding: 9px 10px 9px 12px;
  border: 1px solid #edf1e8;
  border-radius: 12px;
  color: var(--ink);
  background: #fbfcf8;
  font-size: 14px;
  text-align: left;
}

.sku-option-list button.active {
  border-color: var(--brand);
  color: var(--brand-deep);
  background: linear-gradient(90deg, #f0fae8, #fff);
  box-shadow: 0 0 0 3px rgba(121, 197, 58, 0.12);
}

.sku-option-list button:disabled {
  color: #a1a7a0;
  background: #f0f1f0;
}

.sku-option-list span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sku-option-list b {
  overflow: hidden;
  font-size: 14px;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sku-option-list small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sku-option-list em {
  font-style: normal;
  color: var(--red);
  font-size: 15px;
  font-weight: 900;
}

.sku-option-list i {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1px solid #d9e4d2;
  border-radius: 50%;
  background: #fff;
}

.sku-option-list button.active i {
  border-color: var(--brand);
  background: var(--brand);
}

.sku-option-list button.active i::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.sku-confirm-btn {
  width: 100%;
  min-height: 52px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 10px 18px rgba(93, 154, 36, 0.2);
}

.sku-confirm-btn:disabled {
  opacity: 0.45;
}

.store-dialog {
  width: min(100%, 430px);
  margin: auto auto 0;
  padding: 0;
  border-radius: 22px 22px 0 0;
}

.store-dialog-note {
  margin: -4px 0 12px;
  padding: 9px 12px;
  border-radius: 12px;
  color: #6c785f;
  background: #f7fbf2;
  font-size: 12px;
  font-weight: 800;
}

.store-list {
  display: grid;
  gap: 9px;
  max-height: min(56dvh, 460px);
  overflow-y: auto;
}

.store-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  width: 100%;
  min-height: 62px;
  padding: 11px 12px;
  border: 1px solid #e6edde;
  border-radius: 14px;
  color: var(--ink);
  background: #fbfdf8;
  text-align: left;
}

.store-list button.active {
  border-color: var(--brand);
  background: linear-gradient(90deg, #f0fae8, #fff);
  box-shadow: 0 0 0 3px rgba(121, 197, 58, 0.12);
}

.store-list strong,
.store-list span {
  min-width: 0;
}

.store-list strong {
  font-size: 14px;
}

.store-list span {
  color: var(--muted);
  font-size: 12px;
}

.store-list em {
  grid-row: span 2;
  color: var(--brand-deep);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.add-on-dialog {
  width: min(100%, 430px);
  margin: auto auto 0;
  padding: 0;
  border-radius: 22px 22px 0 0;
}

.detail-search-dialog,
.detail-share-dialog {
  width: 100%;
  margin: auto auto 0;
  padding: 0;
  border-radius: 22px 22px 0 0;
}

.detail-search-field {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin: 10px 0;
  padding: 0 12px;
  border-radius: 999px;
  background: #f5f8f2;
}

.detail-search-field span {
  width: 17px;
  height: 17px;
  background: #9ba39a;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.8'/%3E%3Cpath d='m16.2 16.2 4.1 4.1'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.8'/%3E%3Cpath d='m16.2 16.2 4.1 4.1'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.detail-search-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 14px;
  font-weight: 700;
}

.detail-search-results {
  display: grid;
  gap: 8px;
  max-height: 52vh;
  overflow-y: auto;
}

.detail-search-results button {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 0;
  padding: 8px;
  border-radius: 12px;
  color: var(--ink);
  background: #fbfcfa;
  text-align: left;
}

.detail-search-results img {
  width: 50px;
  height: 50px;
  border-radius: 9px;
  object-fit: cover;
  background: #f3f7ef;
}

.detail-search-results span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.detail-search-results strong,
.detail-search-results small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-search-results strong {
  font-size: 13px;
}

.detail-search-results small,
.detail-search-empty {
  color: var(--muted);
  font-size: 11px;
}

.detail-search-results em {
  color: var(--red);
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
}

.detail-share-preview {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 10px;
  margin: 10px 0 12px;
  padding: 10px;
  border-radius: 14px;
  background: #f7fbf2;
}

.detail-share-preview img {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  object-fit: cover;
  background: #fff;
}

.detail-share-preview div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.detail-share-preview strong,
.detail-share-preview span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-share-preview strong {
  font-size: 14px;
}

.detail-share-preview span {
  color: var(--muted);
  font-size: 12px;
}

.detail-share-preview i {
  width: 48px;
  height: 48px;
  border-radius: 9px;
  background:
    linear-gradient(90deg, #222 2px, transparent 2px) 0 0 / 8px 8px,
    linear-gradient(#222 2px, transparent 2px) 0 0 / 8px 8px,
    #fff;
  box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 7px #222;
}

.detail-share-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.detail-share-actions button {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  border: 0;
  padding: 9px 4px;
  border-radius: 12px;
  color: var(--ink);
  background: #fbfcfa;
  font-size: 11px;
  font-weight: 800;
}

.detail-share-actions i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--brand-deep);
  background: var(--brand-soft);
  font-style: normal;
}

.detail-share-actions button:nth-child(1) i::before { content: "图"; }
.detail-share-actions button:nth-child(2) i::before { content: "码"; }
.detail-share-actions button:nth-child(3) i::before { content: "微"; }
.detail-share-actions button:nth-child(4) i::before { content: "圈"; }

.detail-share-actions span {
  white-space: nowrap;
}

.detail-share-note {
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.add-on-note {
  margin: -4px 0 10px;
  padding: 9px 12px;
  border-radius: 12px;
  color: #61715a;
  background: #f7fbf2;
  font-size: 12px;
  font-weight: 800;
}

.add-on-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  background: #edf9ec;
}

.add-on-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 7px;
  border-radius: 8px;
  background: #fff;
}

.add-on-card img {
  width: 100%;
  aspect-ratio: 1 / 0.78;
  border-radius: 7px;
  object-fit: cover;
  background: #f5f7f3;
}

.add-on-card strong {
  display: -webkit-box;
  min-height: 33px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 12px;
  line-height: 1.35;
}

.add-on-card span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.add-on-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.add-on-card em {
  color: var(--red);
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
}

.add-on-card button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--brand);
}

.add-on-card .cart-icon {
  width: 19px;
  height: 19px;
}

.inline-add-on-panel {
  margin: 0 0 5px;
  padding: 7px;
  border: 1px solid rgba(121, 197, 58, 0.18);
  border-radius: 10px;
  background: linear-gradient(180deg, #eefbe9, #f8fff2);
  box-shadow: 0 8px 18px rgba(73, 109, 31, 0.08);
  animation: inlineAddOnDrop 0.18s ease-out;
}

.inline-add-on-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.inline-add-on-head strong {
  color: #1f3b18;
  font-size: 14px;
  font-weight: 900;
}

.inline-add-on-head button {
  border: 0;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--brand-deep);
  background: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 800;
}

.inline-add-on-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.inline-add-on-card {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 5px;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.inline-add-on-card img {
  width: 100%;
  aspect-ratio: 1 / 0.82;
  border-radius: 7px;
  object-fit: cover;
  background: #f5f7f3;
}

.inline-add-on-card > span {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  padding: 1px 4px;
  border-radius: 999px;
  color: var(--brand-deep);
  background: var(--brand-soft);
  font-size: 10px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inline-add-on-card strong {
  display: -webkit-box;
  width: 7em;
  max-width: 100%;
  min-height: 27px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 10.5px;
  line-height: 1.28;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.inline-add-on-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  align-items: center;
  gap: 3px;
  min-width: 0;
  margin-top: 1px;
}

.inline-add-on-card em {
  min-width: 0;
  overflow: hidden;
  color: var(--red);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inline-add-on-card button {
  position: relative;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  padding: 0;
  border: 1px solid rgba(121, 197, 58, 0.5);
  border-radius: 50%;
  color: var(--brand);
  background: #fff;
  box-shadow: 0 2px 7px rgba(121, 197, 58, 0.16);
  overflow: visible;
}

.inline-add-on-card .cart-icon {
  display: inline-block;
  width: 19px;
  height: 19px;
  padding: 0;
  border-radius: 0;
  color: var(--brand);
}

.product-cart-count {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: var(--red);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 3px 7px rgba(240, 75, 84, 0.28);
  pointer-events: none;
}

.category-add-btn .product-cart-count {
  right: -5px;
  top: -7px;
}

.inline-add-on-card .product-cart-count {
  right: -3px;
  top: -7px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  font-size: 9px;
}

@keyframes inlineAddOnDrop {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.order-list {
  display: grid;
  gap: 10px;
  max-height: min(58dvh, 460px);
  overflow-y: auto;
}

.order-dialog {
  width: min(100%, 430px);
  height: min(92dvh, 860px);
  max-height: min(100dvh, 932px);
  border-radius: 22px 22px 0 0;
  background: #f5f6f4;
}

.order-dialog > form {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: inherit;
  overflow: hidden;
  padding: 0 0 max(18px, env(safe-area-inset-bottom));
  background: #f5f6f4;
  overscroll-behavior: contain;
}

.order-dialog > form::before {
  display: none;
}

.order-dialog .panel-head {
  position: relative;
  flex: 0 0 auto;
  z-index: 6;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  min-height: 58px;
  margin: 0;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
}

.order-dialog .panel-head strong {
  justify-self: center;
  font-size: 22px;
}

.order-dialog .panel-head button {
  width: 40px;
  height: 40px;
  color: #1f2620;
  background: transparent;
  font-size: 34px;
  font-weight: 450;
  box-shadow: none;
}

.order-dialog .order-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  gap: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: #f5f6f4;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.order-dialog .order-list.is-common-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.order-dialog.is-chat-mode .panel-head button[value="close"],
.order-dialog.is-review-mode .panel-head button[value="close"],
.order-dialog.is-receive-confirm .panel-head button[value="close"],
.order-dialog:has(.order-review-page) .panel-head button[value="close"] {
  visibility: hidden;
  pointer-events: none;
}

.order-page-tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  min-height: 58px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(39, 46, 35, 0.05);
}

.order-page-tabs button {
  position: relative;
  display: grid;
  place-items: center;
  border: 0;
  color: #1f2620;
  background: transparent;
  font-size: 13px;
  font-weight: 900;
}

.order-page-tabs button.active {
  color: var(--brand);
}

.order-page-tabs button.active::after {
  position: absolute;
  right: 10px;
  bottom: 0;
  left: 10px;
  height: 4px;
  border-radius: 999px;
  background: var(--brand);
  content: "";
}

.order-page-tabs em {
  position: absolute;
  top: 8px;
  margin-left: 38px;
  color: var(--red);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.order-recent-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
  padding: 12px 14px;
  background: #fff;
}

.order-recent-bar div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.order-recent-bar span {
  color: #252b26;
  font-size: 15px;
  font-weight: 850;
}

.order-recent-bar small {
  color: #8a9288;
  font-size: 12px;
  font-weight: 650;
}

.order-recent-bar > button {
  min-height: 34px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-size: 14px;
  font-weight: 900;
}

.order-pay-strip img {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 10px;
  object-fit: cover;
  background: #fff;
}

.order-common-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
}

.order-common-head button {
  min-height: 32px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-size: 13px;
  font-weight: 850;
}

.order-common-head p {
  margin: 0;
  color: #747d72;
  font-size: 12px;
  line-height: 1.45;
  text-align: right;
}

.order-common-list {
  display: grid;
  flex: 1 1 auto;
  gap: 1px;
  min-height: 0;
  margin-top: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  background: #edf2eb;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.order-common-card {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 42px;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  background: #fff;
}

.order-common-image {
  width: 74px;
  height: 74px;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: #f7faf5;
}

.order-common-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-common-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.order-common-copy strong {
  display: -webkit-box;
  overflow: hidden;
  color: #20251f;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 900;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.order-common-copy span {
  overflow: hidden;
  color: #7e877c;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.order-common-copy p {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}

.order-common-copy em {
  color: var(--red);
  font-size: 18px;
  font-style: normal;
  font-weight: 950;
}

.order-common-copy del {
  color: #9a9f98;
  font-size: 12px;
}

.order-common-cart {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
}

.order-common-cart .cart-icon {
  width: 20px;
  height: 20px;
  background: #fff;
}

.order-common-cart i {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border: 1.5px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: var(--red);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 14px;
}

.order-pay-card {
  display: grid;
  gap: 12px;
  padding: 16px 14px 18px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(37, 45, 34, 0.04);
}

.order-pay-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.order-pay-card header span {
  color: #4f5650;
  font-size: 15px;
  font-weight: 750;
}

.order-pay-card header strong {
  color: var(--brand);
  font-size: 16px;
}

.order-pay-strip {
  display: flex;
  gap: 9px;
  align-items: center;
  overflow: hidden;
  padding: 12px;
  border-radius: 14px;
  background: #f8f8f8;
}

.order-pay-strip b {
  color: #666d66;
  font-size: 15px;
  letter-spacing: 2px;
}

.order-pay-card p {
  margin: 0;
  justify-self: end;
  color: #4f5650;
  font-size: 15px;
  font-weight: 850;
}

.order-pay-card p strong {
  color: #111;
  font-size: 19px;
}

.order-pay-card footer {
  display: grid;
  grid-template-columns: minmax(44px, 1fr) repeat(3, auto);
  gap: 8px;
  align-items: center;
}

.order-pay-card footer button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #e0e3df;
  border-radius: 999px;
  color: #202620;
  background: #fff;
  font-size: 14px;
  font-weight: 850;
  white-space: nowrap;
}

.order-pay-card footer button:first-child {
  justify-self: start;
  border-color: transparent;
  padding-left: 0;
}

.order-pay-card footer .primary {
  border-color: transparent;
  color: #fff;
  background: var(--brand);
}

.order-empty-state {
  padding: 26px 14px;
  color: #767f73;
  background: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 850;
}

.order-flow-page {
  display: grid;
  gap: 10px;
  padding: 10px 0 16px;
}

.order-chat-page {
  gap: 8px;
  padding: 8px 0 14px;
}

.order-flow-back {
  display: inline-grid;
  align-self: start;
  justify-self: start;
  place-items: center;
  min-height: 32px;
  margin-left: 14px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
}

.order-chat-page .order-flow-back {
  height: 32px;
  min-height: 32px;
  margin-left: 8px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 900;
}

.order-detail-card,
.order-confirm-card {
  display: grid;
  gap: 12px;
  margin: 0 10px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(37, 45, 34, 0.04);
}

.order-detail-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.order-detail-card header strong,
.order-confirm-card > strong {
  color: #202620;
  font-size: 18px;
  font-weight: 950;
}

.order-detail-card header span {
  color: #858d84;
  font-size: 12px;
  font-weight: 750;
}

.order-detail-products {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border-radius: 12px;
  background: #edf2eb;
}

.order-detail-products div {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  background: #fbfdf8;
}

.order-detail-products img {
  width: 48px;
  height: 48px;
  border-radius: 9px;
  object-fit: cover;
}

.order-detail-products span {
  overflow: hidden;
  color: #252b26;
  font-size: 14px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-detail-products em {
  color: #6f786c;
  font-size: 13px;
  font-style: normal;
  font-weight: 850;
}

.order-detail-card dl {
  display: grid;
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #edf2eb;
}

.order-detail-card dl div,
.order-confirm-card div {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 12px;
  background: #fbfdf8;
}

.order-detail-card dt,
.order-confirm-card span {
  color: #7e877c;
  font-size: 13px;
  font-weight: 800;
}

.order-detail-card dd,
.order-confirm-card em {
  margin: 0;
  color: #202620;
  font-size: 13px;
  font-style: normal;
  font-weight: 850;
}

.order-confirm-card {
  gap: 10px;
}

.order-confirm-card p {
  margin: 0;
  color: #6f786c;
  font-size: 13px;
  line-height: 1.5;
}

.order-confirm-card.has-error {
  border: 1px solid rgba(240, 75, 84, 0.24);
}

.order-confirm-card ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.order-confirm-card li {
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--red);
  background: #fff3f4;
  font-size: 12px;
  font-weight: 850;
}

.order-after-sale-confirm-card .order-card-products {
  margin: 0;
}

.order-confirm-actions {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 10px;
  margin-top: 2px;
}

.order-confirm-actions button {
  min-height: 42px;
  border: 1px solid #e2eadb;
  border-radius: 999px;
  color: #4f5b49;
  background: #fff;
  font-size: 13px;
  font-weight: 900;
}

.order-confirm-actions button.primary {
  border-color: transparent;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 8px 16px rgba(112, 194, 54, 0.22);
}

.order-payment-page {
  background: #f5f6f4;
}

.order-payment-hero {
  display: grid;
  gap: 8px;
  margin: 0 10px;
  padding: 18px 16px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #80c942 0%, #48b761 58%, #2da760 100%);
  box-shadow: 0 12px 24px rgba(62, 147, 66, 0.16);
}

.order-payment-hero.has-error {
  background: linear-gradient(135deg, #ff8b65, #f05158);
  box-shadow: 0 12px 24px rgba(240, 81, 88, 0.14);
}

.order-payment-hero > span {
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  font-weight: 850;
}

.order-payment-hero > strong {
  font-size: 34px;
  font-weight: 950;
  line-height: 1.05;
}

.order-payment-hero div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.order-payment-hero small,
.order-payment-hero em {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.order-payment-hero em {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.order-payment-hero b {
  font-weight: 950;
}

.order-payment-panel,
.order-payment-alert,
.order-payment-safe {
  display: grid;
  gap: 12px;
  margin: 0 10px;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(37, 45, 34, 0.04);
}

.order-payment-balance-alert,
.order-balance-recharge {
  display: grid;
  gap: 12px;
  margin: 0 10px;
  padding: 14px;
  border: 1px solid rgba(255, 112, 77, 0.16);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff8f4, #fff);
  box-shadow: 0 8px 18px rgba(37, 45, 34, 0.04);
}

.order-payment-balance-alert strong,
.order-balance-recharge strong {
  color: #202620;
  font-size: 16px;
  font-weight: 950;
}

.order-payment-balance-alert p,
.order-balance-recharge p {
  margin: 0;
  color: #735f54;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.5;
}

.order-payment-balance-alert div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.order-payment-balance-alert button {
  min-height: 36px;
  border: 1px solid #f0ded5;
  border-radius: 999px;
  color: #5b4237;
  background: #fff;
  font-size: 13px;
  font-weight: 900;
}

.order-payment-balance-alert .primary {
  border-color: transparent;
  color: #fff;
  background: #ff704d;
}

.order-balance-recharge header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.order-balance-recharge header span {
  color: #8b9289;
  font-size: 12px;
  font-weight: 800;
}

.order-balance-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.order-balance-options button {
  display: grid;
  gap: 5px;
  min-height: 78px;
  padding: 10px 8px;
  border: 1px solid #e5eddc;
  border-radius: 14px;
  background: #fbfdf8;
  text-align: center;
}

.order-balance-options strong {
  color: var(--brand-deep);
  font-size: 18px;
}

.order-balance-options span {
  color: #798373;
  font-size: 11px;
  font-weight: 800;
}

.order-payment-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.order-payment-panel header strong,
.order-payment-alert strong,
.order-payment-safe strong {
  color: #202620;
  font-size: 16px;
  font-weight: 950;
}

.order-payment-panel header span {
  color: #8b9289;
  font-size: 12px;
  font-weight: 800;
}

.order-payment-methods {
  display: grid;
  gap: 8px;
}

.order-payment-methods button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 20px;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 10px;
  border: 1px solid #e8eee3;
  border-radius: 14px;
  color: #202620;
  background: #fbfdf8;
  text-align: left;
}

.order-payment-methods button.active {
  border-color: rgba(121, 197, 58, 0.48);
  background: linear-gradient(180deg, #fbfff4, #fff);
  box-shadow: inset 0 0 0 1px rgba(121, 197, 58, 0.14);
}

.order-payment-methods button.is-insufficient {
  border-color: rgba(255, 112, 77, 0.2);
}

.order-payment-methods button.is-insufficient em {
  color: #c84b30;
  background: #fff0e9;
}

.order-payment-methods i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  color: var(--brand-deep);
  background: var(--brand-soft);
  font-size: 17px;
  font-style: normal;
  font-weight: 950;
}

.order-payment-methods span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.order-payment-methods strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-payment-methods small {
  overflow: hidden;
  color: #7c8578;
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-payment-methods em {
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--brand-deep);
  background: var(--brand-soft);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.order-payment-methods b {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  border: 1.5px solid #cfd8ca;
  border-radius: 50%;
  background: #fff;
}

.order-payment-methods button.active b {
  border-color: var(--brand);
  background: var(--brand);
}

.order-payment-methods button.active b::after {
  position: absolute;
  top: 4px;
  left: 6px;
  width: 5px;
  height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  content: "";
  transform: rotate(45deg);
}

.order-payment-methods .order-payment-more {
  background: #fff;
}

.order-payment-methods .order-payment-more b::before,
.order-payment-methods .order-payment-more b::after {
  position: absolute;
  left: 5px;
  width: 8px;
  height: 1.5px;
  border: 0;
  border-radius: 999px;
  background: #7c8578;
  content: "";
  transform: none;
}

.order-payment-methods .order-payment-more b::before {
  top: 8px;
  transform: rotate(45deg);
}

.order-payment-methods .order-payment-more b::after {
  top: 8px;
  left: 10px;
  transform: rotate(-45deg);
}

.order-payment-methods .order-payment-more.active b {
  border-color: #cfd8ca;
  background: #fff;
}

.order-payment-methods .order-payment-more.active b::before {
  transform: rotate(-45deg);
}

.order-payment-methods .order-payment-more.active b::after {
  transform: rotate(45deg);
}

.order-payment-more-list {
  display: grid;
  gap: 8px;
  padding: 8px 0 0;
}

.order-payment-summary dl {
  display: grid;
  gap: 1px;
  overflow: hidden;
  margin: 0;
  border-radius: 12px;
  background: #edf2eb;
}

.order-payment-summary dl div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: #fbfdf8;
}

.order-payment-summary dt,
.order-payment-summary dd {
  margin: 0;
  font-size: 13px;
  font-weight: 850;
}

.order-payment-summary dt {
  color: #7c8578;
}

.order-payment-summary dd {
  color: #202620;
}

.order-payment-summary dl div:last-child dd {
  color: var(--red);
  font-size: 16px;
  font-weight: 950;
}

.order-payment-alert {
  border: 1px solid rgba(240, 75, 84, 0.16);
  background: #fff8f8;
}

.order-payment-alert p,
.order-payment-safe span {
  margin: 0;
  color: #6f786c;
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.5;
}

.order-payment-alert ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.order-payment-alert li {
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--red);
  background: #fff;
  font-size: 12px;
  font-weight: 850;
}

.order-payment-safe {
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  background: linear-gradient(180deg, #fbfff6, #fff);
}

.order-payment-safe::before {
  display: grid;
  grid-row: span 2;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  color: var(--brand-deep);
  background: var(--brand-soft);
  content: "保";
  font-size: 17px;
  font-weight: 950;
}

.order-payment-success-page {
  min-height: 360px;
  place-items: center;
  padding: 34px 18px 42px;
  background: #f5f6f4;
}

.order-payment-success-page.is-fading .order-payment-success {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
}

.order-payment-success {
  display: grid;
  width: min(100%, 310px);
  justify-items: center;
  gap: 10px;
  padding: 30px 24px 26px;
  border: 1px solid rgba(121, 197, 58, 0.16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(121, 197, 58, 0.14), transparent 48%),
    #fff;
  box-shadow: 0 18px 42px rgba(37, 45, 34, 0.1);
  text-align: center;
  transition: opacity 0.32s ease, transform 0.32s ease;
}

.order-payment-success i {
  position: relative;
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8ad850, #2fb863);
  box-shadow: 0 12px 24px rgba(55, 177, 93, 0.22);
}

.order-payment-success i::after {
  position: absolute;
  top: 18px;
  left: 23px;
  width: 16px;
  height: 27px;
  border-right: 4px solid #fff;
  border-bottom: 4px solid #fff;
  border-radius: 2px;
  content: "";
  transform: rotate(45deg);
}

.order-payment-success strong {
  color: #202620;
  font-size: 22px;
  font-weight: 950;
}

.order-payment-success p {
  max-width: 230px;
  margin: 0;
  color: #6f786c;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}

.order-payment-success div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f5f9f1;
}

.order-payment-success span,
.order-payment-success em {
  color: #4f5b4d;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.order-payment-success em {
  color: var(--red);
  font-size: 13px;
}

.order-payment-actions {
  grid-template-columns: 104px minmax(0, 1fr);
}

.order-payment-actions .primary {
  min-width: 0;
  padding: 0 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-receive-modal-page {
  min-height: 420px;
  place-items: center;
  padding: 24px 16px 34px;
  background:
    radial-gradient(circle at 50% 12%, rgba(121, 197, 58, 0.1), transparent 44%),
    #f5f6f4;
}

.order-receive-check {
  display: grid;
  gap: 12px;
  margin: 0 10px;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(37, 45, 34, 0.04);
}

.order-receive-modal {
  position: relative;
  width: min(100%, 340px);
  margin: 0;
  padding: 18px 16px 14px;
  border: 1px solid rgba(121, 197, 58, 0.14);
  border-radius: 22px;
  box-shadow: 0 18px 42px rgba(37, 45, 34, 0.1);
}

.order-receive-dismiss {
  position: absolute;
  top: 12px;
  left: 12px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #e9eee5;
  border-radius: 50%;
  color: #5d665a;
  background: #fff;
  font-size: 24px;
  line-height: 1;
}

.order-receive-check header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 42px;
  padding: 0 38px;
  text-align: center;
}

.order-receive-check header strong {
  color: #202620;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.2;
}

.order-receive-check header span {
  color: #858d84;
  font-size: 11px;
  font-weight: 800;
}

.order-receive-check p {
  margin: 0;
  color: #6f786c;
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.55;
  text-align: center;
}

.order-receive-products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.order-receive-products span {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.order-receive-products img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  object-fit: cover;
  background: #f5f8f1;
}

.order-receive-products em {
  overflow: hidden;
  color: #4f584d;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-receive-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-items: center;
  padding: 8px;
  border: 1px solid #e5eedc;
  border-radius: 14px;
  background: #fbfdf8;
}

.order-receive-proof img {
  width: 100%;
  aspect-ratio: 1.2;
  border-radius: 10px;
  object-fit: cover;
}

.order-receive-proof span {
  grid-column: 1 / -1;
  color: var(--brand-deep);
  font-size: 12px;
  font-weight: 950;
  text-align: center;
}

.order-auto-receive-note {
  color: #6f786c;
  font-size: 11.5px;
  font-weight: 850;
  text-align: center;
}

.order-auto-receive-note b {
  color: var(--brand-deep);
}

.order-receive-check ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.order-receive-check li {
  position: relative;
  padding: 8px 10px 8px 30px;
  border-radius: 12px;
  color: #384333;
  background: #fbfdf8;
  font-size: 12px;
  font-weight: 850;
}

.order-receive-check li::before {
  position: absolute;
  top: 8px;
  left: 10px;
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--brand);
  content: "✓";
  font-size: 10px;
  font-weight: 950;
}

.order-receive-modal-actions {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px;
  margin-top: 2px;
}

.order-receive-modal-actions button {
  min-height: 38px;
  border: 1px solid #e1e8dc;
  border-radius: 999px;
  color: #202620;
  background: #fff;
  font-size: 13px;
  font-weight: 900;
}

.order-receive-modal-actions .primary {
  border-color: transparent;
  color: #fff;
  background: var(--brand);
}

.order-flow-actions {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  padding: 12px 12px max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(245, 246, 244, 0), #f5f6f4 18%);
}

.order-flow-actions button {
  min-height: 40px;
  border: 1px solid #e0e3df;
  border-radius: 999px;
  color: #202620;
  background: #fff;
  font-size: 14px;
  font-weight: 900;
}

.order-flow-actions .primary {
  border-color: transparent;
  color: #fff;
  background: var(--brand);
}

.order-flow-actions .danger {
  border-color: transparent;
  color: #fff;
  background: var(--red);
}

.order-flow-actions button:disabled,
.order-pay-card footer button:disabled {
  color: #9aa29a;
  background: #edf0ec;
}

.order-review-page {
  display: grid;
  gap: 10px;
  padding: 10px 0 16px;
}

.order-review-card,
.order-review-products {
  display: grid;
  gap: 12px;
  margin: 0 10px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(37, 45, 34, 0.04);
}

.order-review-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.order-review-card header strong,
.order-review-products > strong {
  color: #202620;
  font-size: 18px;
  font-weight: 950;
}

.order-review-card header span {
  color: #858d84;
  font-size: 12px;
  font-weight: 750;
}

.order-review-rating {
  display: grid;
  grid-template-columns: repeat(5, 40px);
  gap: 8px;
}

.order-review-rating button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #cbd3c8;
  background: #f5f8f1;
  font-size: 22px;
  line-height: 1;
}

.order-review-rating button.active {
  color: #ffbf2f;
  background: #fff7df;
}

.order-review-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.order-review-tags button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #e4ebdd;
  border-radius: 999px;
  color: #52604e;
  background: #f8fbf4;
  font-size: 13px;
  font-weight: 850;
}

.order-review-tags button.active {
  border-color: rgba(121, 197, 58, 0.42);
  color: var(--brand-deep);
  background: var(--brand-soft);
}

.order-review-help {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 99, 72, 0.16);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff7f3, #fff);
}

.order-review-help strong {
  color: #32302b;
  font-size: 14px;
  font-weight: 950;
}

.order-review-help span {
  color: #7a6a5e;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.order-review-help div {
  display: flex;
  gap: 8px;
  align-items: center;
}

.order-review-help button {
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #ff704d;
  font-size: 12px;
  font-weight: 900;
}

.order-review-help button + button {
  color: #6a4537;
  background: #ffe9df;
}

.order-review-card textarea {
  width: 100%;
  min-height: 92px;
  resize: none;
  border: 1px solid #e5ecdf;
  border-radius: 12px;
  padding: 12px;
  color: #202620;
  background: #fbfdf8;
  font-size: 14px;
  line-height: 1.45;
  outline: none;
}

.order-review-products > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.order-review-products span {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.order-review-products img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  object-fit: cover;
  background: #f5f8f1;
}

.order-review-products em {
  display: -webkit-box;
  overflow: hidden;
  color: #4f584d;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.order-review-thanks {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 8px 10px 0;
  padding: 24px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fbfff6, #fff);
  box-shadow: 0 10px 24px rgba(63, 80, 54, 0.08);
  text-align: center;
}

.order-review-thanks.needs-help {
  background: linear-gradient(180deg, #fff8f4, #fff);
}

.order-review-thanks i {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--brand);
  font-size: 28px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.order-review-thanks.needs-help i {
  background: #ff704d;
}

.order-review-thanks strong {
  color: #1f291c;
  font-size: 20px;
  font-weight: 950;
}

.order-review-thanks p {
  max-width: 300px;
  margin: 0;
  color: #66705f;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.55;
}

.order-review-thanks span {
  color: #f0a900;
  font-size: 12px;
  font-weight: 900;
}

.order-review-actions {
  position: static;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 10px;
  padding: 0 0 4px;
  background: transparent;
}

.order-review-actions button {
  min-width: 0;
  height: 42px;
  min-height: 42px;
  padding: 0 12px;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

.order-guess-section {
  display: grid;
  gap: 12px;
  padding: 20px 12px 28px;
  background: #f1f1f1;
}

.order-review-recommend-stream {
  margin-top: 2px;
  padding-top: 16px;
}

.order-guess-section h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  color: #303631;
  font-size: 18px;
}

.order-guess-section h3 span {
  width: 72px;
  height: 1px;
  background: #d9ddd7;
}

.order-guess-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.order-guess-card {
  position: relative;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
}

.order-guess-image {
  border: 0;
  padding: 0;
  background: transparent;
}

.order-guess-image img {
  width: 100%;
  aspect-ratio: 1 / 0.92;
  border-radius: 10px;
  object-fit: cover;
  background: #f6f8f4;
}

.order-guess-ribbon {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  padding: 3px 8px;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(90deg, #ff4e22, #ffbe5a);
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-guess-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.order-guess-copy strong {
  display: -webkit-box;
  min-height: 40px;
  overflow: hidden;
  color: #171d19;
  font-size: 15px;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.order-guess-copy span,
.order-guess-copy small {
  overflow: hidden;
  color: #777f76;
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-guess-copy small {
  color: #b18a37;
  font-weight: 850;
}

.order-guess-copy p {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-height: 28px;
  margin: 0;
}

.order-guess-copy em {
  color: var(--red);
  font-size: 19px;
  font-style: normal;
  font-weight: 950;
}

.order-guess-copy del {
  color: #8c948b;
  font-size: 12px;
}

.order-guess-cart {
  position: absolute;
  right: 12px;
  bottom: 14px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 8px 16px rgba(91, 150, 36, 0.2);
}

.order-guess-cart .cart-icon {
  width: 22px;
  height: 22px;
}

.order-list-title {
  margin: 2px 2px -2px;
  color: #6a7563;
  font-size: 12px;
  font-weight: 900;
}

.order-card {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid #e6edde;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfdf8, #fff);
}

.order-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.order-card-top em {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--brand-deep);
  background: var(--brand-soft);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.order-card strong,
.order-card span {
  display: block;
}

.order-card strong {
  color: #1f291c;
  font-size: 15px;
}

.order-card span {
  color: #6b7564;
  font-size: 12.5px;
  line-height: 1.35;
}

.order-card .order-card-meta {
  color: var(--brand-deep);
  font-weight: 900;
}

.order-card .order-review-summary {
  color: #f0a900;
  font-size: 12px;
  font-weight: 900;
}

.order-card-products {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 3px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.order-card-products::-webkit-scrollbar {
  display: none;
}

.order-card-products figure {
  position: relative;
  display: grid;
  flex: 0 0 48px;
  gap: 3px;
  margin: 0;
}

.order-card-products img {
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  padding: 3px;
  border-radius: 10px;
  object-fit: contain;
  background: #f7faf4;
}

.order-card-products figcaption {
  overflow: hidden;
  color: #65705f;
  font-size: 9.5px;
  font-weight: 850;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-card-products figure em {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border: 1.5px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: var(--red);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 950;
  line-height: 14px;
  text-align: center;
}

.order-card-products b {
  display: grid;
  flex: 0 0 34px;
  height: 48px;
  place-items: center;
  border-radius: 10px;
  color: #6c7568;
  background: #f1f5ed;
  font-size: 12px;
  font-weight: 950;
}

.order-delivery-proof-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 52px;
  padding: 8px 9px;
  border: 1px solid rgba(121, 197, 58, 0.22);
  border-radius: 14px;
  background: linear-gradient(135deg, #f4fbef, #fff);
  text-align: left;
}

.order-delivery-proof-strip span {
  display: grid;
  gap: 2px;
}

.order-delivery-proof-strip strong {
  color: #25451f;
  font-size: 13px;
  font-weight: 950;
}

.order-delivery-proof-strip em,
.order-after-sale-left {
  color: #6b7665;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.order-delivery-proof-strip em b,
.order-after-sale-left b {
  color: var(--brand-deep);
  font-weight: 950;
}

.order-delivery-proof-strip i {
  display: flex;
  gap: 4px;
  font-style: normal;
}

.order-delivery-proof-strip img {
  width: 34px;
  height: 34px;
  border: 1.5px solid #fff;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(37, 45, 34, 0.08);
}

.order-mail-tracking {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid rgba(121, 197, 58, 0.22);
  border-radius: 13px;
  color: inherit;
  background: #fff;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.order-mail-tracking span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.order-mail-tracking em {
  color: #738069;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.order-mail-tracking strong {
  overflow: hidden;
  color: #243420;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-mail-tracking b {
  display: grid;
  min-width: 74px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-size: 12px;
  font-weight: 950;
}

.order-card-mail-tracking {
  margin-top: 7px;
  background: linear-gradient(135deg, #fff, #f7fbf2);
}

.order-tracking-mail,
.order-proof-mail-tracking,
.order-receive-mail-tracking {
  background: linear-gradient(135deg, #f7fbf2, #fff);
}

.order-after-sale-left {
  display: block;
  margin: -1px 0 0;
  text-align: right;
}

.order-card-actions,
.order-action-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px;
  margin-top: 3px;
}

.order-card-actions button,
.order-action-row button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  color: #2d3b28;
  background: #f3f8ed;
  font-size: 12px;
  font-weight: 900;
}

.order-action-row button:first-child,
.order-card-actions .primary,
.order-card-actions .contact,
.order-action-row .primary,
.order-card-actions [data-order-after-sale-id],
.order-card-actions [data-order-group-chat-id],
.order-action-row [data-order-after-sale-id],
.order-action-row [data-order-group-chat-id] {
  color: #fff;
  background: var(--brand);
}

.order-tracking-card {
  display: grid;
  gap: 11px;
  margin: 0 12px;
  padding: 10px 0 18px;
  box-sizing: border-box;
}

.order-tracking-hero {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 16px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(76, 133, 39, 0.96), rgba(128, 202, 72, 0.9)),
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.26), transparent 34%);
  box-shadow: 0 12px 26px rgba(73, 109, 31, 0.14);
}

.order-tracking-hero span {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  color: #28531f;
  background: rgba(255, 255, 255, 0.86);
  font-size: 11px;
  font-weight: 900;
}

.order-tracking-hero strong {
  font-size: 20px;
}

.order-tracking-hero small {
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 800;
}

.order-tracking-products {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid #e4eedb;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 22px rgba(47, 76, 37, 0.06);
}

.order-tracking-products header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.order-tracking-products header strong {
  color: #202620;
  font-size: 15px;
  font-weight: 950;
}

.order-tracking-products header span {
  color: #6f7a68;
  font-size: 12px;
  font-weight: 850;
}

.order-tracking-products > div {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding-bottom: 1px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.order-tracking-products > div::-webkit-scrollbar {
  display: none;
}

.order-tracking-products figure {
  position: relative;
  display: grid;
  flex: 0 0 58px;
  gap: 5px;
  margin: 0;
}

.order-tracking-products img {
  width: 58px;
  height: 58px;
  border-radius: 13px;
  object-fit: cover;
  background: #f7faf4;
}

.order-tracking-products figcaption {
  overflow: hidden;
  color: #4f5b49;
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-tracking-products figure em {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 1.5px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: var(--red);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  line-height: 15px;
  text-align: center;
}

.order-tracking-products b {
  display: grid;
  flex: 0 0 42px;
  height: 58px;
  place-items: center;
  border-radius: 13px;
  color: #6c7568;
  background: #f1f5ed;
  font-size: 13px;
  font-weight: 950;
}

.order-delivery-map {
  position: relative;
  min-height: 226px;
  overflow: hidden;
  border: 1px solid #dfe9d8;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.58) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(180deg, rgba(255, 255, 255, 0.66) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(circle at 16% 24%, rgba(121, 197, 58, 0.2), transparent 28%),
    radial-gradient(circle at 80% 22%, rgba(255, 214, 123, 0.24), transparent 25%),
    linear-gradient(135deg, #edf7e8, #f9fbf4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62), 0 12px 28px rgba(41, 74, 32, 0.08);
}

.order-delivery-map.is-mail {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.58) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(180deg, rgba(255, 255, 255, 0.66) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(circle at 20% 22%, rgba(121, 197, 58, 0.19), transparent 28%),
    radial-gradient(circle at 84% 18%, rgba(114, 178, 255, 0.2), transparent 25%),
    linear-gradient(135deg, #eef8ec, #f8fbff);
}

.order-delivery-map::after {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 76px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: inset 0 0 0 1px rgba(218, 229, 211, 0.85);
  content: "";
}

.order-map-road {
  position: absolute;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 0 0 1px rgba(218, 229, 211, 0.75);
}

.road-main {
  left: -18px;
  top: 116px;
  width: 116%;
  height: 24px;
  transform: rotate(-17deg);
}

.road-side-a {
  left: 44px;
  top: -18px;
  width: 22px;
  height: 250px;
  transform: rotate(22deg);
}

.road-side-b {
  right: 76px;
  top: 14px;
  width: 18px;
  height: 230px;
  transform: rotate(-28deg);
}

.order-map-route {
  position: absolute;
  left: 18%;
  top: 61%;
  width: 64%;
  height: 0;
  border-top: 4px solid rgba(121, 197, 58, 0.26);
  border-radius: 999px;
  transform: rotate(-24deg);
  transform-origin: left center;
}

.order-map-route i {
  display: block;
  width: var(--route-fill);
  height: 4px;
  border-radius: inherit;
  background: linear-gradient(90deg, #7bc93d, #28b862);
}

.order-map-pin,
.order-rider-pin {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 950;
}

.order-map-pin {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 16px 16px 16px 5px;
  color: #fff;
  box-shadow: 0 10px 20px rgba(37, 45, 34, 0.16);
  transform: rotate(-45deg);
}

.order-map-pin.store {
  left: 14%;
  top: 57%;
  background: linear-gradient(135deg, #ff9d52, #ff7442);
}

.order-map-pin.home {
  right: 11%;
  top: 22%;
  background: linear-gradient(135deg, #83d44a, #2fb862);
}

.order-map-pin i {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
}

.order-map-pin.store i::before {
  position: absolute;
  left: 2px;
  top: 8px;
  width: 16px;
  height: 10px;
  border-radius: 2px;
  background: #fff;
  content: "";
}

.order-map-pin.store i::after {
  position: absolute;
  left: 1px;
  top: 3px;
  width: 18px;
  height: 9px;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(90deg, #fff 0 20%, rgba(255, 255, 255, 0.72) 20% 40%, #fff 40% 60%, rgba(255, 255, 255, 0.72) 60% 80%, #fff 80%);
  content: "";
}

.order-map-pin.home i::before {
  position: absolute;
  left: 2px;
  top: 8px;
  width: 16px;
  height: 11px;
  border-radius: 2px;
  background: #fff;
  content: "";
}

.order-map-pin.home i::after {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: #fff;
  content: "";
  transform: rotate(45deg);
  transform-origin: center;
}

.order-map-pin em,
.order-rider-pin em {
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  padding: 2px 6px;
  border-radius: 999px;
  color: #3c4638;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 14px rgba(37, 45, 34, 0.12);
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
  transform: translateX(-50%) rotate(45deg);
}

.order-rider-pin {
  left: var(--rider-x);
  top: var(--rider-y);
  width: 46px;
  height: 46px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #202620, #4b5649);
  box-shadow: 0 12px 24px rgba(37, 45, 34, 0.2);
  transform: translate(-50%, -50%);
}

.order-rider-pin i {
  position: relative;
  width: 26px;
  height: 22px;
}

.order-rider-pin i::before {
  position: absolute;
  left: 2px;
  top: 6px;
  width: 20px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 9px 9px 5px 5px;
  content: "";
}

.order-rider-pin i::after {
  position: absolute;
  left: 3px;
  bottom: 0;
  width: 20px;
  height: 8px;
  background:
    radial-gradient(circle at 2px 4px, #fff 0 2.5px, transparent 3px),
    radial-gradient(circle at 18px 4px, #fff 0 2.5px, transparent 3px);
  content: "";
}

.order-rider-pin b {
  position: absolute;
  inset: -7px;
  border: 2px solid rgba(32, 38, 32, 0.14);
  border-radius: 50%;
  content: "";
}

.order-rider-pin em {
  transform: translateX(-50%);
}

.order-map-eta,
.order-map-address {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 20px rgba(48, 72, 42, 0.1);
  backdrop-filter: blur(8px);
}

.order-map-eta {
  left: 12px;
  top: 12px;
}

.order-map-address {
  right: 12px;
  bottom: 12px;
  max-width: 188px;
}

.order-map-eta strong,
.order-map-address strong {
  color: #202620;
  font-size: 14px;
  font-weight: 950;
}

.order-map-eta span,
.order-map-address span {
  color: #6e7968;
  font-size: 11px;
  font-weight: 850;
}

.order-rider-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid #e5eedc;
  border-radius: 15px;
  background: #fbfdf8;
}

.order-rider-card.is-mail {
  background: linear-gradient(135deg, #fbfff8, #f8fbff);
}

.order-rider-card > i {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #202620, #4f5b4d);
  font-style: normal;
  font-weight: 950;
}

.order-rider-card.is-mail > i,
.order-delivery-map.is-mail .order-rider-pin {
  background: linear-gradient(135deg, #77c63c, #35b86c);
}

.order-rider-avatar span {
  position: relative;
  width: 24px;
  height: 20px;
}

.order-rider-avatar span::before {
  position: absolute;
  left: 2px;
  top: 5px;
  width: 18px;
  height: 9px;
  border: 2px solid #fff;
  border-radius: 9px 9px 5px 5px;
  content: "";
}

.order-rider-avatar span::after {
  position: absolute;
  left: 3px;
  bottom: 0;
  width: 18px;
  height: 8px;
  background:
    radial-gradient(circle at 2px 4px, #fff 0 2.3px, transparent 3px),
    radial-gradient(circle at 16px 4px, #fff 0 2.3px, transparent 3px);
  content: "";
}

.order-rider-card div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.order-rider-card strong,
.order-rider-card span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-rider-card strong {
  font-size: 14px;
}

.order-rider-card span {
  color: #707b69;
  font-size: 12px;
}

.order-rider-card button,
.order-rider-card a {
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  display: grid;
  place-items: center;
}

.order-route-list {
  position: relative;
  display: grid;
  gap: 0;
  padding: 4px 0 2px;
}

.order-route-list div {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 40px;
}

.order-route-list div::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e2eadb;
}

.order-route-list div:first-child::before {
  top: 20px;
}

.order-route-list div:last-child::before {
  bottom: 20px;
}

.order-route-list i {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  border: 2px solid #dce8d4;
  border-radius: 50%;
  background: #fff;
}

.order-route-list .done i,
.order-route-list .active i {
  border-color: var(--brand);
  background: var(--brand);
}

.order-route-list .active i {
  box-shadow: 0 0 0 5px rgba(121, 197, 58, 0.16);
}

.order-route-list strong {
  color: #283125;
  font-size: 13px;
}

.order-route-list span {
  color: #8a9385;
  font-size: 12px;
  font-weight: 800;
}

.order-ai-reply {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  padding: 11px;
  border-radius: 15px;
  background: linear-gradient(135deg, #f1fae8, #fff);
}

.order-ai-reply i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: #24491d;
  background: #c8f08b;
  font-style: normal;
  font-weight: 950;
}

.order-ai-reply p {
  margin: 0;
  color: #4f5b49;
  font-size: 12.5px;
  line-height: 1.45;
}

.order-rider-delivery-card,
.order-proof-card {
  display: grid;
  gap: 12px;
  margin: 0 12px;
  padding: 14px;
  border: 1px solid #e4eedb;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(47, 76, 37, 0.06);
}

.order-rider-delivery-card header,
.order-proof-card header {
  display: grid;
  gap: 4px;
}

.order-rider-delivery-card .order-third-party-hero {
  gap: 5px;
  padding: 13px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f3faea, #fff7e8);
}

.order-rider-delivery-card header span {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--brand-deep);
  background: var(--brand-soft);
  font-size: 11px;
  font-weight: 950;
}

.order-rider-delivery-card strong,
.order-proof-card strong {
  color: #202620;
  font-size: 17px;
  font-weight: 950;
}

.order-rider-delivery-card small,
.order-proof-card span {
  color: #707b69;
  font-size: 12px;
  font-weight: 850;
}

.order-third-party-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid #edf1e8;
  border-radius: 15px;
  background: #f8fbf4;
}

.order-third-party-summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.order-third-party-summary span {
  color: #829078;
  font-size: 11px;
  font-weight: 900;
}

.order-third-party-summary strong {
  overflow-wrap: anywhere;
  color: #202620;
  font-size: 13px;
  font-weight: 950;
}

.order-rider-app-bridge {
  display: grid;
  gap: 4px;
  padding: 11px;
  border-radius: 15px;
  background: #fff8ea;
}

.order-rider-app-bridge strong,
.order-rider-proof-title strong {
  color: #263022;
  font-size: 13px;
  font-weight: 950;
}

.order-rider-app-bridge p {
  margin: 0;
  color: #68705f;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.order-rider-sync-list {
  display: grid;
  gap: 8px;
}

.order-rider-sync-list div {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 14px;
  background: #f7faf3;
}

.order-rider-sync-list i {
  display: grid;
  min-height: 28px;
  place-items: center;
  border-radius: 999px;
  color: #25461f;
  background: #dff4c2;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.order-rider-sync-list p {
  margin: 0;
  color: #4f5b49;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.order-rider-sync-list em {
  padding: 4px 7px;
  border-radius: 999px;
  color: #6f7a66;
  background: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.order-rider-check-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.order-rider-check-list span {
  padding: 6px 8px;
  border-radius: 999px;
  color: #3d4a36;
  background: #eef7e5;
  font-size: 11.5px;
  font-weight: 900;
}

.order-rider-proof-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.order-rider-proof-title span {
  color: #7b8575;
  font-size: 11.5px;
  font-weight: 900;
  text-align: right;
}

.order-rider-proof-grid,
.order-proof-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.order-rider-proof-grid figure,
.order-proof-gallery figure {
  display: grid;
  gap: 5px;
  margin: 0;
}

.order-rider-proof-grid img,
.order-proof-gallery img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 13px;
  object-fit: cover;
  background: #f5f8f1;
}

.order-rider-proof-grid figcaption,
.order-proof-gallery figcaption {
  color: #4f5b49;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.order-rider-delivery-card p,
.order-proof-card p {
  margin: 0;
  color: #687363;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.45;
}

.order-proof-card p b {
  color: var(--brand-deep);
}

.track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 12px;
}

.track span {
  min-height: 8px;
  border-radius: 999px;
  background: var(--line);
}

.track span.done {
  background: var(--brand);
}

.order-card-track {
  gap: 5px;
  margin-top: 8px;
}

.order-card-track span,
.order-card-track span.done,
.order-card-track button {
  display: grid;
  gap: 4px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.order-card-track span i,
.order-card-track button i {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: #e5edde;
}

.order-card-track span.done i,
.order-card-track button.done i {
  background: var(--brand);
}

.order-card-track span b,
.order-card-track button b {
  overflow: hidden;
  color: #8a9385;
  font-size: 9px;
  font-weight: 850;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-card-track span.done b,
.order-card-track button.done b {
  color: var(--brand-deep);
}

.order-receive-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(66px, 0.88fr);
  align-items: stretch;
  gap: 5px;
}

.order-receive-flow button {
  min-width: 0;
}

.order-receive-flow button:active {
  transform: translateY(1px);
}

.order-receive-flow button:not(.order-flow-contact) {
  min-height: 44px;
  place-items: center;
  padding: 6px 3px;
  border: 1px solid #e7eee0;
  border-radius: 12px;
  background: #fbfdf8;
}

.order-receive-flow button:not(.order-flow-contact) i {
  width: 16px;
  height: 16px;
  border: 2px solid #dce8d4;
  border-radius: 50%;
  background: #fff;
}

.order-receive-flow button.done:not(.order-flow-contact) i {
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: inset 0 0 0 3px #fff;
}

.order-receive-flow button.current:not(.order-flow-contact) {
  border-color: rgba(121, 197, 58, 0.42);
  background: linear-gradient(180deg, #f8fff1, #fff);
}

.order-receive-flow .order-flow-contact {
  display: grid;
  min-height: 44px;
  place-items: center;
  align-self: stretch;
  padding: 6px 4px;
  border-radius: 12px;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 6px 12px rgba(93, 168, 52, 0.16);
  font-size: 9px;
  font-weight: 950;
  line-height: 1.12;
  white-space: normal;
}

.order-receive-flow .order-flow-contact b {
  color: #fff;
  white-space: normal;
}

.order-receive-flow .order-flow-contact.order-flow-after-sale:not(.active):not(.disabled) {
  border: 1px solid #e7eee0;
  color: #3d4a36;
  background: #fbfdf8;
  box-shadow: none;
}

.order-receive-flow .order-flow-contact.order-flow-after-sale:not(.active):not(.disabled) b {
  color: #3d4a36;
}

.order-receive-flow .order-flow-contact.order-flow-after-sale:not(.active):not(.disabled) i {
  background:
    radial-gradient(circle at 30% 42%, var(--brand) 0 2px, transparent 2.4px),
    radial-gradient(circle at 50% 42%, var(--brand) 0 2px, transparent 2.4px),
    radial-gradient(circle at 70% 42%, var(--brand) 0 2px, transparent 2.4px),
    #eef7e5;
}

.order-receive-flow .order-flow-contact.disabled,
.order-receive-flow .order-flow-contact:disabled {
  color: #9ca39a;
  background: #edf0ea;
  box-shadow: none;
  cursor: not-allowed;
}

.order-receive-flow .order-flow-contact.disabled b,
.order-receive-flow .order-flow-contact:disabled b {
  color: #9ca39a;
}

.order-receive-flow .order-flow-contact i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 42%, #fff 0 2px, transparent 2.4px),
    radial-gradient(circle at 50% 42%, #fff 0 2px, transparent 2.4px),
    radial-gradient(circle at 70% 42%, #fff 0 2px, transparent 2.4px),
    rgba(255, 255, 255, 0.18);
}

.order-receive-flow .order-flow-contact.disabled i,
.order-receive-flow .order-flow-contact:disabled i {
  background:
    radial-gradient(circle at 30% 42%, #a4aba1 0 2px, transparent 2.4px),
    radial-gradient(circle at 50% 42%, #a4aba1 0 2px, transparent 2.4px),
    radial-gradient(circle at 70% 42%, #a4aba1 0 2px, transparent 2.4px),
    rgba(255, 255, 255, 0.52);
}

/* Page containers */

.page-view {
  display: none;
}

.page-view.active {
  display: block;
}

.category-page {
  height: 100dvh;
  margin: 0 -10px;
  overflow: hidden;
  background: #fff;
}

.category-page.active {
  display: flex;
  flex-direction: column;
}

.category-page.is-entering-up {
  animation: pageRiseIn 260ms cubic-bezier(0.18, 0.82, 0.18, 1) both;
}

@keyframes pageRiseIn {
  from {
    opacity: 0.72;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cart page and member center */

.simple-page-header {
  display: grid;
  gap: 4px;
  margin: 0 -10px;
  padding: max(24px, env(safe-area-inset-top)) 18px 18px;
  background: linear-gradient(100deg, #eff9dd 0%, #fffaf2 100%);
}

.simple-page-header strong {
  font-size: 26px;
}

.simple-page-header span {
  color: var(--muted);
}

.cart-page-header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.cart-page-header button {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  color: var(--brand-deep);
  background: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(121, 197, 58, 0.16);
}

.cart-page-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 10px 0 0;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 0 0 1px rgba(121, 197, 58, 0.12);
}

.cart-page-tabs button {
  min-width: 0;
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  color: #667064;
  background: transparent;
  font-size: 12.5px;
  font-weight: 900;
  white-space: nowrap;
}

.cart-page-tabs button.active {
  color: var(--brand-deep);
  background: #fff;
  box-shadow: 0 6px 16px rgba(73, 109, 31, 0.08);
}

.cart-page,
.member-page {
  min-height: calc(100dvh - 160px);
  padding-bottom: 150px;
}

.cart-page {
  margin: 0 -10px;
  padding-right: 10px;
  padding-left: 10px;
  background: linear-gradient(180deg, #fbfff5 0%, #f8fbf1 42%, #fff 100%);
}

.favorite-page {
  min-height: 100dvh;
  margin: 0 -10px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  background: #f6f7f5;
}

.favorite-page-header {
  position: sticky;
  top: 0;
  z-index: 12;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 82px;
  padding: max(12px, env(safe-area-inset-top)) 14px 10px;
  border-bottom: 1px solid #ecefeb;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
}

.favorite-page-header > div {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
}

.favorite-page-header small {
  overflow: hidden;
  max-width: 100%;
  color: #5c645a;
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favorite-page-header strong {
  color: var(--ink);
  font-size: 21px;
  font-weight: 950;
  letter-spacing: 0;
}

.favorite-back-btn,
.favorite-cart-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: transparent;
}

.favorite-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.favorite-manage-btn {
  min-width: 42px;
  min-height: 34px;
  padding: 0 4px;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  font-size: 14px;
  font-weight: 900;
}

.favorite-back-btn span {
  width: 13px;
  height: 13px;
  border: solid currentColor;
  border-width: 0 0 2px 2px;
  transform: rotate(45deg) translate(2px, -1px);
}

.favorite-cart-btn .cart-icon {
  width: 30px;
  height: 30px;
  color: var(--ink);
}

.favorite-cart-btn i {
  position: absolute;
  right: 2px;
  top: 2px;
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: var(--red);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.favorite-cart-btn i[hidden] {
  display: none;
}

.favorite-page-tabs {
  position: sticky;
  top: 82px;
  z-index: 11;
  display: flex;
  gap: 34px;
  min-height: 50px;
  padding: 0 22px;
  border-bottom: 1px solid #ecefeb;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
}

.favorite-page-tabs button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  color: var(--ink);
  background: transparent;
  font-size: 16px;
  font-weight: 900;
}

.favorite-page-tabs button.active {
  color: var(--brand);
}

.favorite-page-tabs button.active::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--brand);
  content: "";
}

.favorite-page-tabs em {
  font-size: 12px;
  font-style: normal;
}

.favorite-page-body {
  min-height: calc(100dvh - 132px);
  padding: 12px 14px 28px;
}

.favorite-manage-mode .favorite-page-body {
  padding-bottom: calc(108px + env(safe-area-inset-bottom));
}

.favorite-page-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 2px 10px;
  color: #828b7d;
  font-size: 12px;
  font-weight: 750;
}

.favorite-page-meta small {
  color: #9aa293;
  font-size: 11px;
}

.favorite-page-list {
  display: grid;
  gap: 10px;
}

.favorite-swipe-row {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  touch-action: pan-y;
}

.favorite-swipe-actions {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(2, 66px);
  width: 132px;
  overflow: hidden;
  border-radius: 0 18px 18px 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.favorite-swipe-row.is-open .favorite-swipe-actions,
.favorite-swipe-row.is-swiping .favorite-swipe-actions {
  opacity: 1;
  pointer-events: auto;
}

.favorite-swipe-actions button {
  border: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.favorite-swipe-share {
  background: #90a784;
}

.favorite-swipe-delete {
  background: var(--red);
}

.favorite-page-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 46px;
  gap: 11px;
  align-items: center;
  padding: 10px;
  border: 1px solid #e8ede4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(47, 65, 36, 0.04);
  transform: translateX(var(--favorite-swipe-x, 0));
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.favorite-swipe-row.is-open .favorite-page-card {
  transform: translateX(-132px);
}

.favorite-swipe-row.is-swiping .favorite-page-card {
  transition: none;
}

.favorite-manage-mode .favorite-swipe-actions {
  display: none;
}

.favorite-manage-mode .favorite-page-card {
  grid-template-columns: 28px 92px minmax(0, 1fr);
  transform: none;
}

.favorite-page-check {
  display: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid #cbd4c4;
  border-radius: 50%;
  background: #fff;
}

.favorite-manage-mode .favorite-page-check {
  display: grid;
}

.favorite-page-check span {
  width: 8px;
  height: 5px;
  border: solid #fff;
  border-width: 0 0 2px 2px;
  opacity: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}

.favorite-page-check.active {
  border-color: var(--brand);
  background: var(--brand);
}

.favorite-page-check.active span {
  opacity: 1;
}

.favorite-page-image {
  width: 92px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: #f4f8ef;
}

.favorite-page-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.favorite-page-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.favorite-page-copy strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.24;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.favorite-page-copy span,
.favorite-page-copy small {
  overflow: hidden;
  color: #7a8373;
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favorite-page-copy small {
  color: var(--brand);
  font-weight: 850;
}

.favorite-page-copy small.sold-out {
  color: #a0a6a0;
}

.favorite-page-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.favorite-page-price em {
  color: var(--red);
  font-size: 18px;
  font-style: normal;
  font-weight: 950;
}

.favorite-page-price del {
  color: #a1a79d;
  font-size: 12px;
}

.favorite-page-actions {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.favorite-manage-mode .favorite-page-actions {
  display: none;
}

.favorite-page-actions button:first-child {
  border: 0;
  color: #8b9483;
  background: transparent;
  font-size: 11px;
  font-weight: 800;
}

.favorite-page-actions button[data-favorite-cart-id] {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 8px 18px rgba(91, 150, 36, 0.22);
}

.favorite-page-actions button[data-favorite-cart-id]:disabled {
  background: #d1d8cc;
  box-shadow: none;
}

.favorite-page-actions .cart-icon {
  width: 22px;
  height: 22px;
}

.favorite-page-actions .product-cart-count {
  right: -4px;
  top: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  font-size: 9px;
}

.favorite-page-empty {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: calc(100dvh - 230px);
  gap: 14px;
  color: #858c82;
  text-align: center;
}

.favorite-empty-art {
  position: relative;
  width: 112px;
  height: 96px;
  margin-bottom: 2px;
}

.favorite-empty-art i,
.favorite-empty-art span {
  position: absolute;
  display: block;
}

.favorite-empty-art i:nth-child(1) {
  left: 34px;
  bottom: 10px;
  width: 22px;
  height: 72px;
  border-radius: 999px 999px 7px 7px;
  background: linear-gradient(180deg, #b9e3cf, #7fbf91);
}

.favorite-empty-art i:nth-child(2) {
  left: 14px;
  bottom: 14px;
  width: 18px;
  height: 44px;
  border-radius: 999px 999px 7px 7px;
  background: #d9efe5;
}

.favorite-empty-art i:nth-child(3) {
  right: 18px;
  bottom: 6px;
  width: 34px;
  height: 42px;
  border-radius: 18px 18px 13px 13px;
  background: linear-gradient(180deg, #ff836d, #ef5c45);
}

.favorite-empty-art span {
  right: 22px;
  bottom: 45px;
  width: 24px;
  height: 18px;
  border-radius: 60% 40% 60% 40%;
  background: #7ed34c;
  transform: rotate(-22deg);
}

.favorite-page-empty strong {
  color: #777f74;
  font-size: 16px;
  font-weight: 850;
}

.favorite-page-empty p {
  max-width: 270px;
  margin: -4px 0 0;
  color: #9aa196;
  font-size: 12px;
  line-height: 1.5;
}

.favorite-page-empty button {
  min-width: 132px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(91, 150, 36, 0.2);
}

.favorite-manage-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: calc(72px + env(safe-area-inset-bottom));
  padding: 10px 16px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
}

.favorite-manage-bar[hidden] {
  display: none;
}

.favorite-select-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  color: var(--ink);
  background: transparent;
  font-size: 14px;
  font-weight: 900;
}

.favorite-select-all-btn span {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 1.5px solid #cbd4c4;
  border-radius: 50%;
  background: #fff;
}

.favorite-select-all-btn span::after {
  width: 8px;
  height: 5px;
  border: solid #fff;
  border-width: 0 0 2px 2px;
  content: "";
  opacity: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}

.favorite-select-all-btn.active span {
  border-color: var(--brand);
  background: var(--brand);
}

.favorite-select-all-btn.active span::after {
  opacity: 1;
}

.favorite-manage-bar div {
  display: grid;
  justify-items: end;
  gap: 2px;
  min-width: 0;
}

.favorite-manage-bar strong {
  color: var(--ink);
  font-size: 13px;
}

.favorite-manage-bar small {
  color: #98a092;
  font-size: 11px;
}

.favorite-delete-selected-btn {
  min-width: 78px;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--red);
  font-size: 15px;
  font-weight: 950;
}

.favorite-delete-selected-btn:disabled {
  color: #fff;
  background: #cfd6ca;
}

.cart-service-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 12px 0 0;
  padding: 12px;
  border: 1px solid rgba(121, 197, 58, 0.16);
  border-radius: 12px;
  background: linear-gradient(120deg, #f4fbeb, #fff);
  box-shadow: 0 8px 22px rgba(73, 109, 31, 0.07);
}

.cart-service-card div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.cart-service-card strong {
  font-size: 14px;
}

.cart-service-card span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-service-card em {
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--brand-deep);
  background: var(--brand-soft);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.cart-invalid-test-btn {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  color: #b33b3b;
  background: #fff0ef;
  font-size: 12px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255, 126, 126, 0.24);
}

.cart-member-card,
.cart-promo-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
}

.cart-member-card {
  color: #1d3f19;
  background: linear-gradient(120deg, #e8f8d9, #f7fff1);
  box-shadow: 0 8px 22px rgba(73, 109, 31, 0.07);
}

.cart-member-card strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-member-card span {
  color: var(--red);
}

.cart-member-card button,
.cart-promo-card button {
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.cart-promo-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
  background: #fff8e8;
}

.cart-promo-card strong {
  padding: 2px 6px;
  border-radius: 999px;
  color: #fff;
  background: var(--orange);
  font-size: 11px;
}

.cart-promo-card span {
  overflow: hidden;
  color: #7c5c1b;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-page-card {
  margin-top: 14px;
  margin-bottom: 128px;
  padding: 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(73, 109, 31, 0.08);
}

.cart-package-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0 8px;
  color: #505850;
  border-bottom: 1px solid var(--line);
}

.cart-panel .cart-package-head {
  padding-top: 0;
}

.cart-package-head strong {
  color: var(--ink);
  font-size: 14px;
}

.cart-package-head span {
  overflow: hidden;
  color: var(--brand-deep);
  font-size: 11.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-page-panel-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}

.cart-select-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0;
  border: 0;
  color: #444c42;
  background: transparent;
  font-size: 13px;
  font-weight: 900;
}

.cart-checkout-bar {
  position: fixed;
  right: 0;
  bottom: calc(84px + env(safe-area-inset-bottom));
  left: 0;
  z-index: 24;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 104px;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 56px;
  margin: 0 auto;
  padding: 7px 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  box-shadow: 0 -12px 30px rgba(73, 109, 31, 0.1);
}

.cart-footer-select-all {
  min-width: 48px;
  justify-content: center;
  font-size: 12px;
}

.cart-checkout-total {
  display: grid;
  grid-template-columns: auto auto;
  gap: 1px 5px;
  align-items: baseline;
  justify-content: end;
  min-width: 0;
  justify-items: end;
}

.cart-checkout-total span {
  color: #6d756d;
  font-size: 12px;
}

.cart-checkout-total strong {
  color: var(--red);
}

.cart-checkout-total em {
  color: var(--red);
  font-size: 18px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.cart-checkout-total small {
  grid-column: 1 / -1;
  overflow: hidden;
  max-width: 214px;
  color: #a4aaa2;
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-checkout-bar .checkout-btn {
  min-height: 40px;
  margin: 0;
  font-size: 14px;
  font-weight: 950;
}

body.cart-mode .bottom-nav .ai-btn {
  width: 44px;
  height: 44px;
  margin-top: -5px;
  background: radial-gradient(circle at 32% 24%, #d9ff9a, #83ce45 44%, #22a75b 100%);
  font-size: 17px;
  box-shadow: 0 7px 16px rgba(79, 158, 58, 0.2);
}

.checkout-btn:disabled {
  background: #cbd5c3;
  box-shadow: none;
  cursor: not-allowed;
}

.checkout-summary {
  display: grid;
  gap: 7px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(121, 197, 58, 0.16);
  border-radius: 14px;
  color: #485044;
  background: linear-gradient(135deg, #f4faeb, #fff);
  font-size: 12px;
}

.checkout-summary strong {
  color: var(--ink);
  font-size: 15px;
}

.checkout-summary span {
  color: var(--muted);
}

.cart-delete-dialog {
  width: min(348px, calc(100% - 48px));
  margin: auto;
  padding: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 52px rgba(27, 38, 21, 0.2);
}

.cart-delete-dialog::backdrop {
  background: rgba(10, 16, 12, 0.42);
  backdrop-filter: blur(3px);
}

.cart-delete-dialog form {
  margin: 0;
  max-height: none;
  overflow: visible;
  padding: 0;
}

.cart-delete-dialog form::before {
  display: none;
}

.cart-delete-body {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 22px 18px 16px;
  text-align: center;
}

.cart-delete-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  color: var(--brand);
  background: linear-gradient(145deg, #f3fae8, #fff);
  box-shadow: inset 0 0 0 1px rgba(121, 197, 58, 0.16);
}

.cart-delete-icon .cart-icon {
  width: 28px;
  height: 28px;
}

.cart-delete-body strong {
  font-size: 18px;
}

.cart-delete-body p {
  display: -webkit-box;
  max-width: 260px;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cart-delete-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
}

.cart-delete-actions button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
}

.cart-delete-actions button:first-child {
  color: #596154;
  background: #f3f6ef;
}

.cart-delete-actions button:last-child {
  color: #fff;
  background: var(--brand);
  box-shadow: 0 8px 18px rgba(93, 154, 36, 0.18);
}

.cart-stock-dialog {
  width: min(100%, 430px);
  max-height: min(82dvh, 690px);
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 22px 22px 0 0;
  background: #fff;
  box-shadow: 0 -18px 48px rgba(34, 50, 25, 0.18);
}

.cart-stock-dialog::backdrop {
  background: rgba(10, 16, 12, 0.42);
  backdrop-filter: blur(3px);
}

.cart-stock-dialog form {
  margin: 0;
}

.cart-stock-body {
  display: grid;
  gap: 10px;
  padding: 0;
}

.cart-stock-body > strong {
  font-size: 18px;
}

.cart-stock-body > p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.cart-stock-list {
  display: grid;
  gap: 8px;
  max-height: min(38dvh, 280px);
  overflow: auto;
  padding-right: 2px;
}

.cart-stock-list article {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 8px;
  border: 1px solid #ffe2df;
  border-radius: 14px;
  background: #fff8f7;
}

.cart-stock-list img {
  width: 50px;
  height: 50px;
  border-radius: 9px;
  object-fit: cover;
  background: #f7f7f0;
}

.cart-stock-list span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.cart-stock-list strong,
.cart-stock-list small,
.cart-stock-list em {
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-stock-list strong {
  color: var(--ink);
  font-size: 13.5px;
  white-space: nowrap;
}

.cart-stock-list small {
  color: #8e9789;
  font-size: 11.5px;
  white-space: nowrap;
}

.cart-stock-list em {
  display: -webkit-box;
  color: #bd4545;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cart-stock-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 2px;
}

.cart-stock-actions button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
}

.cart-stock-actions button:first-child {
  color: #b33b3b;
  background: #fff0ef;
}

.cart-stock-actions button:last-child {
  color: #fff;
  background: var(--brand);
  box-shadow: 0 8px 18px rgba(93, 154, 36, 0.18);
}

/* Product detail page */

body.detail-mode .bottom-nav {
  display: none;
}

body.favorite-mode .bottom-nav,
body.favorite-mode .cart-drawer {
  display: none;
}

body.detail-mode .cart-drawer {
  bottom: calc(78px + env(safe-area-inset-bottom));
}

body.detail-mode {
  overflow: hidden;
}

body.detail-mode .app-shell {
  position: relative;
  background: linear-gradient(180deg, #dfe9d8 0%, #eef5e8 44%, #f6faf2 100%);
  overflow: hidden;
}

.page-view.detail-underlay {
  pointer-events: none;
  filter: blur(10px) saturate(0.92);
  opacity: 0.72;
  transform: scale(0.985);
  transform-origin: center top;
  transition: filter 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.product-detail-page {
  --detail-sheet-shift-y: 44px;
  --detail-sheet-pull-y: 0px;
  --detail-sheet-scale-x: 0.98;
  --detail-sheet-radius: 26px;
  --detail-icon-size: 36px;
  --detail-tabs-opacity: 0;
  --detail-tabs-shift: -6px;
  --detail-topbar-bg-opacity: 0;
  --detail-topbar-shadow-opacity: 0;
  --detail-main-hero-height: 430px;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 30;
  width: 100%;
  min-height: 0;
  margin: 0 auto;
  padding-bottom: 190px;
  border-radius: var(--detail-sheet-radius) var(--detail-sheet-radius) 0 0;
  background: rgba(243, 244, 242, 0.78);
  box-shadow: 0 -14px 34px rgba(42, 63, 31, 0.18);
  overflow-x: clip;
  overflow-y: auto;
  overflow-anchor: none;
  overscroll-behavior: contain;
  transform: translate3d(0, calc(var(--detail-sheet-shift-y) + var(--detail-sheet-pull-y)), 0) scaleX(var(--detail-sheet-scale-x));
  transform-origin: center top;
  transition:
    border-radius 100ms linear,
    opacity 180ms ease;
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  backdrop-filter: blur(18px) saturate(1.05);
  scrollbar-width: none;
  contain: layout paint;
  will-change: transform, border-radius;
}

.product-detail-page::-webkit-scrollbar {
  display: none;
}

.product-detail-page.active {
  animation: detailSheetEnter 300ms cubic-bezier(0.18, 0.86, 0.18, 1);
}

.product-detail-page.is-pulling-down,
.product-detail-page.is-closing-by-pull {
  transform: translate3d(0, calc(var(--detail-sheet-shift-y) + var(--detail-sheet-pull-y)), 0) scaleX(var(--detail-sheet-scale-x));
}

.product-detail-page.is-pulling-down {
  transition: none;
}

.product-detail-page.is-closing-by-pull {
  opacity: 0.72;
  transition: transform 180ms cubic-bezier(0.2, 0.82, 0.2, 1), opacity 180ms ease;
}

.product-detail-page.bundle-buy-mode {
  padding-bottom: 190px;
}

.detail-sheet-dismiss {
  position: sticky;
  top: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  width: 100%;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: var(--detail-sheet-radius) var(--detail-sheet-radius) 0 0;
  background: rgba(243, 244, 242, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  backdrop-filter: blur(18px) saturate(1.05);
}

.detail-sheet-dismiss span {
  width: 36px;
  height: 3px;
  border-radius: 999px;
  background: #c8d2c3;
}

.detail-topbar {
  position: sticky;
  top: 20px;
  z-index: 34;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px 42px;
  align-items: center;
  gap: 4px;
  width: auto;
  padding: 8px 10px;
  margin: 0 5px -52px;
  border-radius: 0 0 16px 16px;
  background: rgba(255, 255, 255, var(--detail-topbar-bg-opacity));
  box-shadow: 0 4px 18px rgba(28, 40, 24, var(--detail-topbar-shadow-opacity));
  pointer-events: none;
  transition: background 160ms ease, box-shadow 160ms ease;
}

.detail-icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--detail-icon-size);
  height: var(--detail-icon-size);
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 5px 14px rgba(28, 40, 24, 0.1);
  font-size: 0;
  line-height: 1;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.detail-icon-btn::before,
.detail-icon-btn::after {
  box-sizing: border-box;
  content: "";
}

.detail-back-btn {
  grid-column: 1;
}

.detail-back-btn::before {
  display: block;
  width: 25px;
  height: 25px;
  background: currentColor;
  transform: translateY(2px);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 8.2 7 7 7-7' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 8.2 7 7 7-7' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.detail-tabs {
  grid-column: 2;
}

.detail-search-btn {
  grid-column: 3;
}

.detail-search-btn::before {
  position: absolute;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.8'/%3E%3Cpath d='m16.2 16.2 4.1 4.1'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.8'/%3E%3Cpath d='m16.2 16.2 4.1 4.1'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.detail-search-btn::after {
  display: none;
}

.detail-share-btn {
  grid-column: 4;
}

.detail-share-btn::before {
  position: absolute;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5.6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10.4 13.6 21 3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5.6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10.4 13.6 21 3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.detail-share-btn::after {
  display: none;
}

.detail-tabs {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 2px;
  overflow-x: auto;
  opacity: var(--detail-tabs-opacity);
  pointer-events: none;
  scrollbar-width: none;
  transform: translateY(var(--detail-tabs-shift));
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}

.product-detail-page.tabs-visible .detail-tabs {
  pointer-events: auto;
}

.product-detail-page.bundle-buy-mode .detail-tabs {
  display: none;
}

.product-detail-page.bundle-buy-mode .detail-share-btn {
  display: none;
}

.product-detail-page.bundle-buy-mode .detail-back-btn {
  color: #5f6b59;
  background: #f3f4f2;
  border: 1px solid #dfe8d7;
  box-shadow: none;
}

.detail-tabs button {
  position: relative;
  flex: 0 0 auto;
  min-width: 44px;
  height: 34px;
  border: 0;
  color: var(--ink);
  background: transparent;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.detail-tabs button.active {
  color: var(--brand);
}

.detail-tabs button.active::after {
  position: absolute;
  right: 10px;
  bottom: 2px;
  left: 10px;
  height: 4px;
  border-radius: 999px;
  background: var(--brand);
  content: "";
}

.product-detail-body {
  display: grid;
  gap: 8px;
  overflow-anchor: none;
}

.product-detail-page.active .product-detail-body {
  contain: layout;
  view-transition-name: detail-product-body;
}

.product-detail-page.active .detail-topbar {
  contain: layout;
  view-transition-name: detail-topbar;
}

.product-detail-page.bundle-buy-mode .product-detail-body {
  padding-top: 0;
}

.detail-gallery {
  display: grid;
  place-items: center;
  min-height: 300px;
  background: #fff;
}

.detail-gallery img {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
}

.detail-main,
.detail-section {
  padding: 14px 16px;
  background: #fff;
}

.detail-price-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.detail-price-row strong {
  color: var(--red);
  font-size: 23px;
  font-weight: 900;
  line-height: 1;
}

.detail-price-row del {
  color: var(--muted);
  font-size: 12px;
}

.detail-stock {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--brand-deep);
  background: var(--brand-soft);
  font-size: 10.5px;
  font-weight: 900;
}

.detail-stock.low {
  color: #b45f00;
  background: #fff3dc;
}

.detail-stock.sold-out {
  color: #8b8f8a;
  background: #f0f1f0;
}

.detail-main h1,
.detail-buy-panel h1 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 5px 0 3px;
  font-size: 17.5px;
  line-height: 1.18;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.detail-main p,
.detail-buy-panel p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.32;
}

.detail-chip-row,
.detail-service-row,
.detail-sku-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.detail-chip-row span,
.detail-service-row span,
.detail-sku-list span {
  padding: 3px 6px;
  border-radius: 7px;
  color: var(--brand-deep);
  background: var(--brand-soft);
  font-size: 11px;
  font-weight: 800;
}

.detail-section h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.detail-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 7px;
}

.detail-info-grid span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px;
  border-radius: 8px;
  background: #f8fbf3;
}

.detail-info-grid strong {
  color: var(--muted);
  font-size: 10.5px;
}

.detail-info-grid em {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-sku-list span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  background: #f8fbf3;
}

.detail-sku-list span.sold-out {
  color: #90968d;
  background: #f0f1f0;
}

.detail-sku-list em {
  color: var(--red);
  font-style: normal;
  font-weight: 900;
}

.detail-action-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 40;
  display: none;
  grid-template-columns: repeat(3, 56px) minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  width: calc(100% - 8px);
  min-height: 72px;
  margin: 0 auto;
  padding: 8px 12px max(10px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
  will-change: transform;
}

body.detail-mode .detail-action-bar {
  display: grid;
}

.detail-cart-shortcut,
.detail-favorite-btn,
.detail-ai-btn,
.detail-add-btn {
  position: relative;
  border: 0;
  overflow: visible;
}

.detail-cart-shortcut,
.detail-favorite-btn,
.detail-ai-btn {
  display: grid;
  place-items: center;
  width: 56px;
  height: 54px;
  align-self: center;
  justify-self: center;
  color: var(--ink);
  background: transparent;
  font-size: 0;
  line-height: 1;
  box-shadow: none;
}

.detail-cart-shortcut .cart-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  color: var(--ink);
  transform: translate(-50%, -50%);
}

.detail-cart-shortcut i {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
  right: 8px;
  top: 8px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: var(--red);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.detail-cart-shortcut i[hidden] {
  display: none;
}

.detail-favorite-btn {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 0;
  transition: color 160ms ease, transform 160ms ease;
}

.detail-favorite-btn::before {
  --favorite-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 52 C21 43 12 34 14 24 C16 15 28 14 32 23 C36 14 48 15 50 24 C52 34 43 43 32 52 Z' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%);
  -webkit-mask: var(--favorite-icon-mask) center / contain no-repeat;
  mask: var(--favorite-icon-mask) center / contain no-repeat;
}

.detail-favorite-btn.active {
  color: var(--red);
}

.detail-favorite-btn.active::before {
  --favorite-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 52 C21 43 12 34 14 24 C16 15 28 14 32 23 C36 14 48 15 50 24 C52 34 43 43 32 52 Z' fill='black'/%3E%3C/svg%3E");
}

.detail-ai-btn {
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  font-size: 0;
  font-weight: 900;
  transition: color 160ms ease, transform 160ms ease;
}

.detail-ai-btn::before {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: currentColor;
  background: transparent;
  box-shadow: none;
  content: "AI";
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.detail-ai-btn::after {
  display: none;
}

.detail-favorite-btn:active,
.detail-ai-btn:active {
  transform: scale(0.96);
}

.detail-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 54px;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: var(--shadow);
}

.detail-add-btn .cart-icon {
  width: 23px;
  height: 23px;
  color: #fff;
}

.detail-add-btn:disabled {
  color: #f3f3f3;
  background: #a6ada0;
}

.detail-add-btn .product-cart-count {
  right: 22px;
  top: -7px;
}

.detail-bundle-action-summary {
  position: absolute;
  right: 14px;
  bottom: calc(100% + 8px);
  left: 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(123, 194, 57, 0.26);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(245, 255, 237, 0.96), rgba(255, 255, 255, 0.94));
  box-shadow: 0 6px 18px rgba(53, 82, 37, 0.08);
}

.product-detail-page.mode-switching .detail-bundle-action-summary:not([hidden]) {
  animation: detailBundleSummaryIn 180ms cubic-bezier(0.2, 0.82, 0.2, 1);
}

.detail-bundle-action-select {
  justify-content: flex-start;
  min-width: 70px;
  padding: 0;
  white-space: nowrap;
}

.detail-bundle-action-total {
  display: grid;
  justify-items: end;
  min-width: 0;
  text-align: right;
}

.detail-bundle-action-total strong {
  display: block;
  width: 100%;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.detail-bundle-action-total b,
.detail-bundle-action-total em {
  color: var(--red);
  font-style: normal;
  font-weight: 950;
}

.detail-bundle-action-total small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
}

.detail-empty {
  padding: 120px 20px;
  color: var(--muted);
  text-align: center;
}

.detail-hero {
  position: relative;
  height: var(--detail-main-hero-height);
  min-height: var(--detail-main-hero-height);
  overflow: hidden;
  background: #fff;
  touch-action: pan-y;
  user-select: none;
}

.detail-hero,
.detail-bundle-hero-panel {
  box-sizing: border-box;
}

.detail-hero-mode-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: transform, opacity;
}

.detail-hero-track {
  display: flex;
  width: 100%;
  height: 100%;
  transform: translate3d(calc(var(--detail-hero-offset, -100%) + var(--detail-hero-drag-x, 0px)), 0, 0);
  transition: transform 280ms cubic-bezier(0.2, 0.82, 0.2, 1);
  will-change: transform;
}

.detail-hero-track.no-transition {
  transition-duration: 0ms !important;
}

.detail-hero-image {
  display: block;
  flex: 0 0 100%;
  min-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fff;
  -webkit-user-drag: none;
}

.detail-hero.is-swiping .detail-hero-track {
  transition-duration: 0ms;
}

.detail-good-pill,
.detail-report-pill,
.detail-page-indicator {
  position: absolute;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: #fff;
  background: rgba(43, 43, 37, 0.62);
  font-weight: 800;
}

.detail-good-pill {
  top: 22px;
  left: 16px;
  padding: 7px 12px;
  font-size: 13px;
}

.detail-report-pill {
  left: 16px;
  bottom: 40px;
  padding: 5px 10px;
  font-size: 12px;
}

.detail-page-indicator {
  right: 12px;
  bottom: 26px;
  gap: 3px;
  padding: 3px;
  font-size: 12px;
}

.detail-page-indicator button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-style: normal;
  line-height: 1;
  white-space: nowrap;
}

.detail-page-indicator button {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 800;
}

.detail-page-indicator-bundle {
  background: rgba(43, 43, 37, 0.5);
}

.detail-page-indicator button.active {
  color: #1f241d;
  background: #fff;
  font-weight: 900;
}

.detail-media-switch {
  position: absolute;
  right: 14px;
  bottom: 64px;
  display: inline-grid;
  grid-template-columns: auto auto;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(43, 43, 37, 0.56);
}

.detail-media-switch button {
  min-width: 42px;
  border: 0;
  padding: 5px 8px;
  color: #fff;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
}

.detail-media-switch button.active {
  color: var(--ink);
  background: #fff;
}

.detail-hero-video-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #111;
}

.detail-hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111;
}

.detail-hero-video-placeholder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.62) saturate(0.95);
  transform: scale(1.04);
}

.detail-hero-video-placeholder span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.detail-hero-video-placeholder span::before {
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid currentColor;
  content: "";
}

.detail-hero-video-placeholder strong,
.detail-hero-video-placeholder em {
  position: relative;
  z-index: 1;
  color: #fff;
  text-align: center;
}

.detail-hero-video-placeholder strong {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 900;
}

.detail-hero-video-placeholder em {
  margin-top: 5px;
  max-width: 78%;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-style: normal;
}

.detail-buy-panel,
.detail-card {
  margin: 0 10px;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(28, 40, 24, 0.05);
  scroll-margin-top: 98px;
}

.detail-buy-panel {
  overflow: hidden;
  margin-top: -4px;
  padding: 0 12px 10px;
}

.detail-buy-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 -12px 8px;
  background: linear-gradient(100deg, #fff 0 50%, #fff0f3 50% 100%);
}

.detail-buy-tabs button {
  position: relative;
  min-height: 46px;
  border: 0;
  color: var(--ink);
  background: transparent;
  font-size: 14px;
  font-weight: 900;
  transition: color 180ms ease, background 180ms ease, box-shadow 220ms ease;
}

.detail-buy-tabs button.active {
  color: var(--brand-deep);
  background: #fff;
  box-shadow: inset 0 -3px 0 var(--brand);
}

.detail-buy-tabs em {
  margin-left: 4px;
  padding: 2px 5px;
  border-radius: 4px;
  color: #fff;
  background: var(--red);
  font-size: 11px;
  font-style: normal;
}

.detail-price-row > span:not(.detail-stock) {
  color: var(--muted);
  font-size: 12px;
}

.detail-member-strip {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 6px;
  margin: 7px 0 7px;
  padding: 7px;
  border-radius: 8px;
  color: #14572f;
  background: linear-gradient(90deg, #d4fae6, #eafff3);
}

.detail-member-strip strong {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  color: #fff;
  background: var(--brand);
  font-size: 13px;
}

.detail-member-strip span {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-member-strip button {
  border: 0;
  border-radius: 999px;
  padding: 4px 8px;
  color: #fff;
  background: var(--brand-deep);
  font-size: 11px;
  font-weight: 900;
}

.detail-date-pill {
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 7px;
  color: var(--ink);
  background: #fff;
  font-size: 11.5px;
}

.detail-related-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.detail-related-foot em {
  min-width: 0;
  color: var(--red);
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.detail-related-foot button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border: 1px solid rgba(121, 197, 58, 0.22);
  border-radius: 50%;
  color: var(--brand);
  background: #f8fcf0;
  overflow: visible;
}

.detail-related-foot .cart-icon {
  width: 22px;
  height: 22px;
}

.detail-related-foot .product-cart-count {
  right: -4px;
  top: -6px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  font-size: 9px;
}

.detail-bundle-hero-panel {
  display: block;
  padding: 0;
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 225, 236, 0.9), transparent 42%),
    radial-gradient(circle at 86% 10%, rgba(210, 246, 255, 0.9), transparent 44%),
    linear-gradient(180deg, #fff4f8 0%, #f9fbff 62%, #f4f5f3 100%);
}

.detail-bundle-hero-copy {
  position: absolute;
  top: 96px;
  right: 26px;
  left: 26px;
  z-index: 1;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.detail-bundle-hero-copy h1 {
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
}

.detail-bundle-hero-copy p {
  margin: 0;
  color: #343833;
  font-size: 14px;
  font-weight: 700;
}

.detail-bundle-hero-strip {
  position: absolute;
  right: 14px;
  bottom: 76px;
  left: 14px;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 158px;
  align-content: stretch;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 16px 34px rgba(125, 91, 102, 0.1);
}

.detail-bundle-hero-strip button {
  display: grid;
  grid-template-rows: minmax(0, auto) 36px;
  gap: 7px;
  min-width: 0;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.detail-bundle-hero-strip img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 2px solid transparent;
  border-radius: 13px;
  object-fit: cover;
  object-position: center;
  background: #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.detail-bundle-hero-strip span {
  display: -webkit-box;
  overflow: hidden;
  min-height: 36px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #3d423b;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.detail-bundle-hero-strip button.selected img,
.detail-bundle-hero-strip button.active img {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(121, 197, 58, 0.15);
  transform: translateY(-1px);
}

.product-detail-page.mode-switching .detail-hero {
  isolation: isolate;
}

.product-detail-page.mode-switching .detail-buy-panel {
  animation: none;
}

.product-detail-page.mode-switching.switching-to-bundle .detail-hero-mode-layer {
  animation: detailHeroSlideFromRight 250ms cubic-bezier(0.2, 0.82, 0.2, 1) both;
}

.product-detail-page.mode-switching.switching-to-single .detail-hero-mode-layer {
  animation: detailHeroSlideFromLeft 250ms cubic-bezier(0.2, 0.82, 0.2, 1) both;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 1ms;
}

::view-transition-old(detail-product-body),
::view-transition-new(detail-product-body),
::view-transition-old(detail-topbar),
::view-transition-new(detail-topbar) {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.2, 0.82, 0.2, 1);
  mix-blend-mode: normal;
}

::view-transition-old(detail-product-body) {
  animation-name: detailModeViewOld;
}

::view-transition-new(detail-product-body) {
  animation-name: detailModeViewNew;
}

::view-transition-old(detail-topbar) {
  animation-name: detailModeChromeOld;
}

::view-transition-new(detail-topbar) {
  animation-name: detailModeChromeNew;
}

@keyframes detailModeContentSwap {
  from {
    opacity: 0.62;
    filter: blur(1px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes detailHeroSlideFromRight {
  from {
    opacity: 0.2;
    transform: translate3d(30px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes detailHeroSlideFromLeft {
  from {
    opacity: 0.2;
    transform: translate3d(-30px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes detailSheetEnter {
  from {
    opacity: 0.5;
    transform: translate3d(0, calc(var(--detail-sheet-shift-y) + 72px), 0) scale(0.982);
  }

  to {
    opacity: 1;
    transform: translate3d(0, var(--detail-sheet-shift-y), 0) scaleX(var(--detail-sheet-scale-x));
  }
}

@keyframes detailBundleSummaryIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes detailModeViewOld {
  from {
    opacity: 1;
    filter: blur(0);
  }
  to {
    opacity: 0.2;
    filter: blur(2px);
  }
}

@keyframes detailModeViewNew {
  from {
    opacity: 0.18;
    filter: blur(2px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes detailModeChromeOld {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.35;
  }
}

@keyframes detailModeChromeNew {
  from {
    opacity: 0.35;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-detail-page.mode-switching .detail-hero,
  .product-detail-page.mode-switching .detail-bundle-hero-panel,
  .product-detail-page.mode-switching .detail-buy-panel,
  .product-detail-page.mode-switching .detail-hero-mode-layer {
    animation: none;
  }

  .detail-buy-tabs button {
    transition-duration: 1ms;
  }
}

.detail-bundle-buy-panel {
  overflow: hidden;
  padding: 0 12px 10px;
}

.detail-bundle-buy-head,
.detail-bundle-total-line {
  margin-inline: 0;
}

.detail-bundle-buy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 0 6px;
}

.detail-bundle-buy-head h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

.detail-bundle-buy-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.detail-bundle-select-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  color: var(--ink);
  background: transparent;
  font-size: 14px;
  font-weight: 800;
}

.detail-bundle-select-all i,
.detail-bundle-check {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid #d8ded4;
  border-radius: 50%;
  background: #fff;
}

.detail-bundle-check {
  margin-top: 22px;
  padding: 0;
}

.detail-bundle-select-all i::after,
.detail-bundle-check::after {
  width: 8px;
  height: 5px;
  border: solid #fff;
  border-width: 0 0 2px 2px;
  content: "";
  opacity: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}

.detail-bundle-select-all.has-selected i,
.detail-bundle-check.active {
  border-color: var(--brand);
  background: var(--brand);
}

.detail-bundle-select-all.has-selected i::after,
.detail-bundle-check.active::after {
  opacity: 1;
}

.detail-bundle-total-line {
  padding: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
  text-align: right;
}

.detail-bundle-total-line b,
.detail-bundle-total-line em {
  color: var(--red);
  font-style: normal;
  font-weight: 900;
}

.detail-bundle-buy-list {
  display: grid;
  margin: 0 -12px;
}

.detail-bundle-buy-row {
  display: grid;
  grid-template-columns: 22px 72px minmax(0, 1fr);
  gap: 7px;
  min-width: 0;
  padding: 7px 12px;
  border-top: 1px solid #eef1eb;
  background: #fff;
}

.detail-bundle-buy-row.active,
.detail-bundle-buy-row.selected {
  background: #fbfff5;
}

.detail-bundle-buy-row.active {
  box-shadow: inset 3px 0 0 var(--brand);
}

.detail-bundle-buy-row > img {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 9px;
  object-fit: cover;
  object-position: center;
  background: #f8fbf3;
}

.detail-bundle-row-info {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
}

.detail-bundle-row-info strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.16;
}

.detail-bundle-row-info strong em {
  margin-right: 5px;
  color: var(--brand);
  font-style: normal;
}

.detail-bundle-row-info p,
.detail-bundle-row-info span {
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-bundle-row-info span {
  color: #b58b31;
  font-weight: 800;
}

.detail-bundle-row-info footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 1px;
}

.detail-bundle-row-info b {
  color: var(--red);
  font-size: 16px;
  line-height: 1;
}

.detail-bundle-row-info del {
  margin-left: 4px;
  color: #8b9088;
  font-size: 11px;
}

.detail-bundle-stepper {
  display: none;
  grid-template-columns: 26px 26px 26px;
  align-items: center;
  justify-items: center;
  overflow: hidden;
  width: 78px;
  min-width: 78px;
  border: 1px solid #edf0e9;
  border-radius: 999px;
  background: #fff;
}

.detail-bundle-buy-row.selected .detail-bundle-stepper {
  display: grid;
  animation: detailBundleStepperPop 160ms ease-out;
}

@keyframes detailBundleStepperPop {
  from {
    opacity: 0;
    transform: translateX(8px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.detail-bundle-stepper button,
.detail-bundle-stepper i {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  min-height: 26px;
  border: 0;
  color: var(--ink);
  background: transparent;
  font-style: normal;
  font-size: 0;
  font-weight: 900;
}

.detail-bundle-stepper button::before,
.detail-bundle-stepper button[data-detail-bundle-qty="1"]::after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 1.7px;
  border-radius: 999px;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%);
}

.detail-bundle-stepper button[data-detail-bundle-qty="1"]::after {
  width: 1.7px;
  height: 9px;
}

.detail-bundle-stepper i {
  color: var(--ink);
  font-size: 13px;
  line-height: 1;
}

.detail-bundle-stepper button:disabled {
  color: #d4d8cf;
}

.detail-promo-card,
.detail-delivery-card {
  display: grid;
  gap: 7px;
  padding: 10px 12px;
}

.detail-video-card {
  padding: 10px 12px;
}

.detail-video-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.detail-video-head h3 {
  margin: 0;
  font-size: 14px;
}

.detail-video-head span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-video-cover,
.detail-video-player {
  width: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: #111;
}

.detail-video-cover {
  position: relative;
  display: grid;
  min-height: 122px;
  padding: 0;
  color: #fff;
  text-align: left;
}

.detail-video-cover img {
  width: 100%;
  height: 132px;
  object-fit: cover;
  opacity: 0.62;
}

.detail-video-cover i {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--brand);
  font-style: normal;
  font-size: 17px;
  transform: translate(-50%, -50%);
}

.detail-video-cover strong,
.detail-video-cover span {
  position: absolute;
  left: 12px;
  right: 12px;
}

.detail-video-cover strong {
  bottom: 26px;
  font-size: 13px;
}

.detail-video-cover span {
  bottom: 8px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 10.5px;
}

.detail-video-player {
  display: block;
  max-height: 180px;
}

.detail-promo-card p,
.detail-delivery-card p {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  margin: 0;
  min-height: 22px;
}

.detail-promo-card strong,
.detail-delivery-card strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.detail-promo-card span,
.detail-delivery-card span {
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.28;
}

.detail-promo-card b {
  margin-right: 4px;
  padding: 1px 4px;
  border-radius: 4px;
  color: var(--red);
  background: #fff1f1;
  font-size: 11px;
}

.detail-promo-card em {
  margin-right: 4px;
  padding: 1px 5px;
  border-radius: 5px;
  color: #fff;
  background: #cbb274;
  font-style: normal;
  font-size: 10.5px;
}

.detail-card {
  padding: 12px;
}

.detail-card h3 {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.25;
}

.detail-nutrition-card p,
.detail-feature-copy p,
.detail-review-card p {
  margin: 0;
  color: #3b4039;
  font-size: 12.5px;
  line-height: 1.45;
}

.detail-nutrition-card small,
.detail-review-card small {
  display: block;
  margin-top: 8px;
  color: #9a9f98;
  font-size: 12px;
  line-height: 1.45;
}

.detail-review-card h3 {
  display: flex;
  align-items: center;
  gap: 4px;
}

.detail-review-card h3 span {
  color: var(--muted);
  font-weight: 500;
}

.detail-review-card h3 em {
  margin-left: auto;
  color: var(--brand);
  font-size: 13px;
  font-style: normal;
}

.detail-review-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.detail-review-tags button {
  padding: 7px 11px;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: #f7f8f6;
  font-size: 13px;
  font-weight: 700;
}

.detail-review-tags button.active {
  color: var(--brand-deep);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px rgba(121, 197, 58, 0.24);
}

.detail-review-list {
  display: grid;
  gap: 10px;
}

.detail-review-card article {
  padding: 12px;
  border-radius: 10px;
  background: #fbfcfa;
}

.detail-review-card article strong {
  display: flex;
  justify-content: space-between;
}

.detail-review-card article strong span {
  color: #f3b431;
}

.detail-review-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 5px 0 6px;
}

.detail-review-item-tags em {
  padding: 3px 6px;
  border-radius: 999px;
  color: var(--brand-deep);
  background: #f0fae8;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.detail-related-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 34%;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 1px 2px 4px;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.detail-related-scroll article {
  display: grid;
  grid-template-rows: auto minmax(34px, auto) 30px;
  gap: 6px;
  min-width: 0;
  scroll-snap-align: start;
}

.detail-feature-icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 10px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(28, 40, 24, 0.08);
}

.detail-feature-icons span {
  padding: 10px 4px;
  color: #9b4a24;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.detail-feature-copy {
  overflow: hidden;
  border-radius: 12px;
  background: #fffaf0;
  text-align: center;
}

.detail-feature-copy strong {
  display: block;
  padding: 14px 12px 0;
  color: #ae4d26;
  font-size: 18px;
  line-height: 1.25;
}

.detail-feature-copy p {
  padding: 6px 14px 0;
  color: #686e66;
}

.detail-feature-copy p:last-of-type {
  padding-bottom: 12px;
}

.detail-feature-copy img {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
}

.detail-feature-copy img + img {
  margin-top: 8px;
}

.detail-related-scroll img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 9px;
  object-fit: cover;
  background: #f8fbf3;
}

.detail-related-scroll strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 34px;
  font-size: 12px;
  line-height: 1.35;
}

.detail-guess-card {
  background: #fbfff6;
}

.detail-guess-head {
  display: grid;
  gap: 3px;
  margin-bottom: 10px;
}

.detail-guess-head h3 {
  margin: 0;
  font-size: 16px;
}

.detail-guess-head > span {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.detail-guess-grid {
  column-count: 2;
  column-gap: 8px;
}

.detail-guess-grid article {
  display: inline-grid;
  width: 100%;
  min-width: 0;
  gap: 5px;
  margin: 0 0 8px;
  padding: 7px;
  break-inside: avoid;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(28, 40, 24, 0.05);
}

.detail-guess-grid img {
  width: 100%;
  aspect-ratio: 1 / 1.08;
  border-radius: 9px;
  object-fit: cover;
  background: #f8fbf3;
}

.detail-guess-grid article:nth-child(3n + 2) img {
  aspect-ratio: 1 / 0.9;
}

.detail-guess-grid strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.25;
}

.detail-guess-grid > article > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-empty-inline {
  color: var(--muted);
  font-size: 13px;
}

.member-page {
  min-height: calc(100dvh - 84px);
  margin: 0 -10px;
  padding: max(10px, env(safe-area-inset-top)) 10px 132px;
  background: linear-gradient(180deg, #f0fae8 0%, #fbfff6 36%, #fff 100%);
}

.member-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
}

.member-topbar button,
.member-profile-card button,
.member-green-card button,
.member-section-head button {
  border: 0;
  font-weight: 900;
}

.member-store-pill {
  min-width: 0;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: #263422;
  background: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  box-shadow: inset 0 0 0 1px rgba(121, 197, 58, 0.12);
}

.member-store-pill span {
  color: var(--brand-deep);
}

.member-topbar > div {
  display: flex;
  gap: 8px;
}

.member-topbar > div button {
  position: relative;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  color: #4b5747;
  background: rgba(255, 255, 255, 0.78);
  font-size: 12px;
}

.member-topbar i {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}

.member-profile-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 10px;
  padding: 15px;
  border-radius: 16px;
  color: #fff;
  background:
    linear-gradient(126deg, rgba(72, 119, 28, 0.96), rgba(121, 197, 58, 0.9)),
    url("../assets/panda-logo.png") right -8px bottom -10px/132px auto no-repeat;
  box-shadow: 0 14px 34px rgba(73, 109, 31, 0.16);
}

.member-profile-card img {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  object-fit: cover;
  background: #fff;
}

.member-profile-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.member-profile-copy strong {
  font-size: 23px;
  line-height: 1.1;
}

.member-profile-copy span,
.member-profile-copy small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.86);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-profile-copy span {
  font-size: 13px;
  font-weight: 900;
}

.member-profile-copy small {
  display: -webkit-box;
  overflow: hidden;
  font-size: 11.5px;
  line-height: 1.28;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.member-profile-card button {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--brand-deep);
  background: rgba(255, 255, 255, 0.9);
}

.member-green-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  color: #314126;
  background: linear-gradient(120deg, #fff7df, #f4fbe7 58%, #fff);
  box-shadow: 0 10px 26px rgba(73, 109, 31, 0.08);
}

.member-green-card div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.member-green-card strong {
  font-size: 16px;
}

.member-green-card span {
  overflow: hidden;
  color: #6a725f;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-green-card b {
  color: var(--red);
}

.member-green-card button,
.member-section-head button {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-size: 12px;
}

.member-assets,
.member-panel,
.member-mini-card,
.member-recommend-section {
  margin-top: 10px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(73, 109, 31, 0.07);
}

.member-assets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 12px 6px;
}

.member-assets button,
.member-order-grid button,
.member-service-grid button,
.member-mini-card,
.member-recommend-image,
.member-recommend-foot button {
  border: 0;
  background: transparent;
}

.member-assets button {
  display: grid;
  gap: 3px;
  place-items: center;
  min-width: 0;
}

.member-assets strong {
  color: #25301f;
  font-size: 18px;
  line-height: 1;
}

.member-assets span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
}

.member-panel,
.member-recommend-section {
  padding: 14px;
}

.member-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.member-section-head strong {
  color: var(--ink);
  font-size: 17px;
}

.member-order-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.member-order-grid button,
.member-service-grid button {
  position: relative;
  display: grid;
  gap: 6px;
  justify-items: center;
  min-width: 0;
  color: #30382f;
  font-size: 11.5px;
  font-weight: 900;
}

.member-order-grid i,
.member-service-grid i {
  --panda-ui-icon: none;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 12px;
  color: transparent;
  background: #f0f8e8;
  background-image: var(--panda-ui-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 27px 27px;
  font-size: 0;
  font-style: normal;
}

.member-order-grid button[data-member-action="pending-pay"] i { --panda-ui-icon: url("../assets/ui/panda_flat_ui_svg_assets/svg/ic_payment_flat.svg"); }
.member-order-grid button[data-member-action="pending-receive"] i { --panda-ui-icon: url("../assets/ui/panda_flat_ui_svg_assets/svg/ic_truck_flat.svg"); }
.member-order-grid button[data-member-action="pending-review"] i { --panda-ui-icon: url("../assets/ui/panda_flat_ui_svg_assets/svg/ic_review_flat.svg"); }
.member-order-grid button[data-member-action="after-sale"] i,
.member-order-grid button[data-member-action="refund"] i { --panda-ui-icon: url("../assets/ui/panda_flat_ui_svg_assets/svg/ic_refund_flat.svg"); }
.member-order-grid button[data-member-action="orders"] i { --panda-ui-icon: url("../assets/ui/panda_flat_ui_svg_assets/svg/ic_orders_flat.svg"); }
.member-service-grid button[data-member-action="address"] i { --panda-ui-icon: url("../assets/ui/panda_flat_ui_svg_assets/svg/ic_address_flat.svg"); }
.member-service-grid button[data-member-action="invoice"] i { --panda-ui-icon: url("../assets/ui/panda_flat_ui_svg_assets/svg/ic_invoice_flat.svg"); }
.member-service-grid button[data-member-action="favorite"] i { --panda-ui-icon: url("../assets/ui/panda_flat_ui_svg_assets/svg/ic_favorite_flat.svg"); }
.member-service-grid button[data-member-action="customer-service"] i { --panda-ui-icon: url("../assets/ui/panda_flat_ui_svg_assets/svg/ic_service_flat.svg"); }
.member-service-grid button[data-member-action="delivery"] i { --panda-ui-icon: url("../assets/ui/panda_flat_ui_svg_assets/svg/ic_delivery_flat.svg"); }
.member-service-grid button[data-member-action="privacy"] i { --panda-ui-icon: url("../assets/ui/panda_flat_ui_svg_assets/svg/ic_security_flat.svg"); }
.member-service-grid button[data-member-action="font"] i { --panda-ui-icon: url("../assets/ui/panda_flat_ui_svg_assets/svg/ic_info_flat.svg"); }
.member-service-grid button[data-member-action="elder"] i { --panda-ui-icon: url("../assets/ui/panda_flat_ui_svg_assets/svg/ic_member_flat.svg"); }

.member-order-grid b {
  position: absolute;
  top: -2px;
  right: 10px;
  display: grid;
  min-width: 17px;
  height: 17px;
  place-items: center;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: var(--red);
  font-size: 10px;
  line-height: 1;
}

.member-order-grid b[hidden],
.member-order-grid b:empty {
  display: none;
}

.member-latest-order {
  overflow: hidden;
  margin-top: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  color: #677160;
  background: #f7faf2;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 8px;
}

.member-split-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.member-mini-card {
  display: grid;
  gap: 5px;
  min-height: 72px;
  padding: 13px;
  text-align: left;
}

.member-mini-card strong {
  color: var(--ink);
  font-size: 15px;
}

.member-mini-card span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-recommend-section > p {
  margin: -5px 0 12px;
  color: var(--muted);
  font-size: 12px;
}

.member-recommend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.member-recommend-card {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.member-recommend-image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: #f4faed;
}

.member-recommend-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-recommend-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.member-recommend-copy span {
  color: var(--brand-deep);
  font-size: 11px;
  font-weight: 900;
}

.member-recommend-copy strong {
  display: -webkit-box;
  overflow: hidden;
  min-height: 34px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.22;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.member-recommend-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-recommend-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.member-recommend-foot em {
  color: var(--red);
  font-size: 18px;
  font-style: normal;
  font-weight: 950;
}

.member-recommend-foot button {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: var(--brand);
  background: var(--brand);
}

.member-recommend-foot .cart-icon {
  width: 22px;
  height: 22px;
  color: #fff;
}

.member-action-dialog {
  width: min(100%, 430px);
  margin: auto auto 0;
  padding: 0;
  border-radius: 22px 22px 0 0;
}

.member-action-dialog form {
  margin: 0;
}

.member-action-body {
  display: grid;
  gap: 12px;
  padding: 0;
}

.member-action-body p {
  margin: 0;
  padding: 13px 14px;
  border: 1px solid rgba(121, 197, 58, 0.14);
  border-radius: 14px;
  color: #5d6759;
  background: linear-gradient(135deg, #f7fbf2, #fff);
  font-size: 14px;
  line-height: 1.55;
}

.member-action-body .checkout-btn {
  min-height: 48px;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 8px 18px rgba(93, 154, 36, 0.18);
}

.member-action-details {
  display: grid;
  gap: 10px;
}

.member-action-list {
  display: grid;
  gap: 8px;
}

.member-action-list div {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid #e6edde;
  border-radius: 14px;
  background: #fbfdf8;
}

.member-action-list strong {
  color: #263020;
  font-size: 14px;
}

.member-action-list span {
  color: #6f7a68;
  font-size: 12px;
  line-height: 1.4;
}

.favorite-panel {
  display: grid;
  gap: 10px;
}

.favorite-filter-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 3px;
  border-radius: 14px;
  background: #f4f8ef;
}

.favorite-filter-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  border: 0;
  border-radius: 11px;
  color: #4d5a47;
  background: transparent;
  font-size: 13px;
  font-weight: 850;
}

.favorite-filter-tabs button.active {
  color: var(--brand);
  background: #fff;
  box-shadow: 0 5px 14px rgba(91, 150, 36, 0.12);
}

.favorite-filter-tabs em {
  color: inherit;
  font-size: 11px;
  font-style: normal;
  opacity: 0.72;
}

.favorite-limit-line {
  color: #87907f;
  font-size: 11px;
  line-height: 1.35;
}

.favorite-product-list {
  display: grid;
  gap: 9px;
  max-height: min(58dvh, 520px);
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: none;
}

.favorite-product-list::-webkit-scrollbar {
  display: none;
}

.favorite-product-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 42px;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid #e7efdd;
  border-radius: 16px;
  background: #fff;
}

.favorite-product-image {
  width: 76px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 0;
  border-radius: 13px;
  background: #f4f8ef;
}

.favorite-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.favorite-product-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.favorite-product-copy strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.favorite-product-copy span,
.favorite-product-copy small {
  overflow: hidden;
  color: #7b8574;
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favorite-product-copy small {
  color: var(--brand);
  font-weight: 800;
}

.favorite-product-copy small.sold-out {
  color: #a0a6a0;
}

.favorite-product-foot {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}

.favorite-product-foot em {
  color: var(--red);
  font-size: 16px;
  font-style: normal;
  font-weight: 950;
}

.favorite-product-foot del {
  color: #9da59a;
  font-size: 11px;
}

.favorite-product-actions {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.favorite-product-actions button:first-child {
  border: 0;
  color: #89927f;
  background: transparent;
  font-size: 11px;
  font-weight: 750;
}

.favorite-product-actions button[data-favorite-cart-id] {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 7px 15px rgba(91, 150, 36, 0.2);
}

.favorite-product-actions button[data-favorite-cart-id]:disabled {
  color: #fff;
  background: #d2d8ce;
  box-shadow: none;
}

.favorite-product-actions .cart-icon {
  width: 20px;
  height: 20px;
}

.favorite-product-actions .product-cart-count {
  right: -4px;
  top: -6px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  font-size: 9px;
}

.favorite-empty-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 28px 16px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 12%, rgba(121, 197, 58, 0.12), transparent 42%),
    #fbfdf8;
  text-align: center;
}

.favorite-empty-state strong {
  color: var(--ink);
  font-size: 15px;
}

.favorite-empty-state span {
  color: #7b8574;
  font-size: 12px;
  line-height: 1.45;
}

.favorite-empty-state button {
  min-width: 112px;
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-size: 13px;
  font-weight: 850;
}

.ai-service-card {
  display: grid;
  gap: 10px;
}

.ai-service-reply {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(238, 249, 226, 0.98), rgba(255, 255, 255, 0.98)),
    radial-gradient(circle at 10% 0, rgba(121, 197, 58, 0.18), transparent 40%);
}

.ai-service-reply i {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  color: #1f4418;
  background: linear-gradient(145deg, #d7ff93, #77c94a);
  font-style: normal;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(76, 151, 43, 0.16);
}

.ai-service-reply p {
  margin: 0;
  color: #4f5b49;
  font-size: 13px;
  line-height: 1.5;
}

.member-action-quick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.member-action-quick button {
  min-height: 38px;
  border: 0;
  border-radius: 12px;
  color: #294522;
  background: #f3f8ed;
  font-size: 12px;
  font-weight: 900;
}

.order-group-chat {
  display: grid;
  gap: 10px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.order-group-summary {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f4faed, #fff);
}

.order-group-summary strong {
  color: #202620;
  font-size: 15px;
  font-weight: 950;
}

.order-group-summary span {
  color: #717b6b;
  font-size: 12px;
  font-weight: 800;
}

.order-chat-products {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid #e5edde;
  border-radius: 15px;
  background: #fff;
}

.order-chat-products header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.order-chat-products header strong {
  color: #202620;
  font-size: 13px;
  font-weight: 950;
}

.order-chat-products header span {
  color: #768170;
  font-size: 11px;
  font-weight: 850;
}

.order-chat-products > div {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 1px 0 0;
  scrollbar-width: none;
}

.order-chat-products > div::-webkit-scrollbar {
  display: none;
}

.order-chat-products figure {
  position: relative;
  display: grid;
  flex: 0 0 54px;
  gap: 3px;
  margin: 0;
  overflow: visible;
}

.order-chat-products img {
  box-sizing: border-box;
  width: 54px;
  height: 54px;
  padding: 3px;
  border-radius: 11px;
  object-fit: contain;
  background: #f7faf4;
}

.order-chat-products figcaption {
  overflow: hidden;
  color: #596354;
  font-size: 9.5px;
  font-weight: 850;
  line-height: 1.12;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-chat-products figure em {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 2;
  min-width: 17px;
  height: 17px;
  border: 1.5px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: var(--red);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  line-height: 14px;
  text-align: center;
}

.order-group-members {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.order-group-members div {
  display: grid;
  gap: 4px;
  justify-items: center;
  min-width: 0;
  padding: 9px 5px;
  border: 1px solid #e5edde;
  border-radius: 14px;
  background: #fff;
}

.order-group-members i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--brand);
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.order-group-members strong,
.order-group-members span {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-group-members strong {
  color: #202620;
  font-size: 11.5px;
  font-weight: 950;
}

.order-group-members span {
  color: #7b8475;
  font-size: 10px;
  font-weight: 800;
}

.order-group-messages {
  display: grid;
  gap: 8px;
}

.order-group-messages div {
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border-radius: 14px;
  background: #f7faf4;
}

.order-group-messages strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--brand-deep);
  font-size: 12px;
  font-weight: 950;
}

.order-group-messages strong em {
  color: #9aa394;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.order-group-messages p {
  margin: 0;
  padding: 0;
  border: 0;
  color: #4f5b49;
  background: transparent;
  font-size: 12.5px;
  line-height: 1.45;
}

.order-group-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.order-group-quick button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  color: #294522;
  background: #eef8e7;
  font-size: 11.5px;
  font-weight: 950;
}

.order-group-quick button.primary {
  color: #fff;
  background: var(--brand);
  box-shadow: 0 8px 16px rgba(112, 194, 54, 0.18);
}

.order-group-quick button:disabled {
  color: #879083;
  background: #edf0ea;
  box-shadow: none;
}

.order-group-chat.after-sale .order-group-summary {
  background: linear-gradient(135deg, #fff8ef, #fff);
}

.order-group-closed {
  display: grid;
  gap: 10px;
  margin: 0 12px;
  padding: 16px;
  border: 1px solid #e4eadf;
  border-radius: 18px;
  background: #fff;
}

.order-group-closed strong {
  color: #202620;
  font-size: 17px;
  font-weight: 950;
}

.order-group-closed p {
  margin: 0;
  color: #6f786c;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.5;
}

.order-group-closed button {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-size: 13px;
  font-weight: 950;
}

.category-header {
  position: sticky;
  top: 0;
  z-index: 18;
  padding: max(10px, env(safe-area-inset-top)) 6px 5px;
  background: linear-gradient(100deg, #eff9dd 0%, #fffaf2 100%);
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 30px;
  padding: 0 4px 7px;
}

.category-store-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  color: #263422;
  background: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  font-weight: 850;
  box-shadow: inset 0 0 0 1px rgba(121, 197, 58, 0.12);
}

.category-store-pill span {
  overflow: hidden;
  max-width: 13em;
  color: var(--brand-deep);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-search,
.picker-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  color: #9aa19a;
  background: #fff;
  box-shadow: 0 8px 18px rgba(73, 109, 31, 0.06);
}

.search-icon {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 1.8px solid currentColor;
  border-radius: 50%;
  color: #9aa49c;
  box-sizing: border-box;
}

.search-icon::after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: -2px;
  width: 6px;
  height: 1.8px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(45deg);
  transform-origin: center;
}

.category-search:focus-within .search-icon,
.picker-search:focus-within .search-icon {
  color: var(--brand);
}

.ai-search-wrap {
  position: relative;
  z-index: 16;
}

.ai-search-wrap.is-open {
  z-index: 35;
}

.ai-search-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: min(360px, 62dvh);
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #e8eee8;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 34px rgba(73, 109, 31, 0.16);
  -webkit-overflow-scrolling: touch;
}

.ai-search-panel.hidden {
  display: none;
}

.ai-search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.ai-search-head strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--brand-deep);
  font-size: 14px;
}

.ai-search-head strong::before {
  content: "AI";
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 20px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #79c53a, #5b6dff 55%, #a83cf1);
  font-size: 11px;
  font-weight: 900;
}

.ai-search-head span {
  color: var(--muted);
  font-size: 12px;
}

.ai-search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.ai-search-chips button {
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  color: #5d8d22;
  background: #f1f9e3;
  font-size: 12px;
}

.ai-search-products {
  display: grid;
  gap: 7px;
}

.ai-search-product {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 7px;
  border: 0;
  border-radius: 10px;
  color: var(--ink);
  background: #f8faf8;
  text-align: left;
}

.ai-search-product img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  background: #fff;
}

.ai-search-product strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 13px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.ai-search-product span {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-search-product em {
  color: var(--red);
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
}

.ai-search-empty {
  padding: 10px 4px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.category-search input,
.picker-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 15px;
}

.top-category-wrap {
  position: relative;
  z-index: 20;
}

.top-category-shell {
  display: grid;
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
  padding-top: 6px;
}

.top-category-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(100% / 7);
  gap: 0;
  padding: 5px 0 2px;
  overflow-x: auto;
  scroll-padding-inline: 45%;
  scrollbar-width: none;
}

.top-category-strip button {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 10.5px;
  line-height: 1.14;
}

.top-category-strip img {
  width: 39px;
  height: 39px;
  border-radius: 50%;
  object-fit: cover;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.top-category-strip span {
  display: inline-block;
  box-sizing: border-box;
  max-width: 6em;
  overflow: hidden;
  padding: 0 1px;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  vertical-align: top;
}

.top-category-strip button.active {
  color: var(--ink);
  font-weight: 900;
}

.top-category-strip button.active span {
  max-width: none;
  overflow: visible;
  padding: 1px 1px 2px;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-size: inherit;
  font-weight: 900;
  line-height: inherit;
  box-shadow: 0 1px 4px rgba(93, 154, 36, 0.12);
}

.picker-grid button.active span {
  box-sizing: border-box;
  max-width: 100%;
  padding: 1px 6px;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-weight: 900;
}

.top-category-strip button.active img,
.picker-grid button.active img {
  outline-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(121, 197, 58, 0.15);
  transform: translateY(-1px);
}

.top-category-toggle {
  position: absolute;
  top: 6px;
  right: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 24px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  color: var(--brand-deep);
  background: rgba(255, 255, 255, 0.92);
  font-size: 0;
  line-height: 1;
  box-shadow:
    -8px 0 14px rgba(246, 252, 247, 0.95),
    inset 0 0 0 1px rgba(121, 197, 58, 0.16);
  transition:
    color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.top-category-toggle.active {
  color: #fff;
  background: var(--brand);
  box-shadow:
    -8px 0 14px rgba(246, 252, 247, 0.95),
    0 6px 14px rgba(121, 197, 58, 0.24);
}

.top-category-toggle::before,
.tier3-toggle::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translate(-1px, -2px);
  transform-origin: center;
  transition: transform 160ms ease;
}

.top-category-toggle.active::before,
.tier3-toggle.active::before {
  transform: rotate(-135deg) translate(-1px, -2px);
}

.top-category-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 24;
  display: block;
  max-height: min(64dvh, calc(100dvh - 118px));
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 8px 9px 8px;
  border: 1px solid #e6eee6;
  border-radius: 0 0 16px 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 34px rgba(73, 109, 31, 0.16);
  -webkit-overflow-scrolling: touch;
  animation: topCategoryPanelIn 180ms cubic-bezier(0.18, 0.82, 0.18, 1) both;
  will-change: transform, opacity;
}

.top-category-panel.is-swipe-closing {
  transform: translateY(var(--swipe-close-y, 0));
  transition: none;
}

.top-category-panel.is-closing-up {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-26px) scaleY(0.96);
  transform-origin: center top;
  transition:
    transform 180ms cubic-bezier(0.36, 0, 0.66, -0.18),
    opacity 160ms ease;
}

.top-category-panel.hidden {
  display: none;
}

.top-category-panel .picker-section:first-child {
  margin-top: 0;
}

.top-category-panel .picker-section {
  margin-top: 8px;
}

.top-category-panel .picker-section h2 {
  margin-bottom: 5px;
  font-size: 13.5px;
}

.top-category-panel .picker-grid {
  gap: 5px 3px;
}

.top-category-panel .picker-grid button {
  gap: 1px;
  font-size: 10.8px;
  line-height: 1.1;
}

.top-category-panel .picker-grid img {
  width: 36px;
  height: 36px;
}

.top-category-panel button.active span {
  padding: 1px 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-weight: 900;
}

.top-category-collapse {
  position: sticky;
  bottom: -8px;
  z-index: 2;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1px;
  width: calc(100% + 18px);
  min-height: 34px;
  margin: 6px -9px -8px;
  padding: 2px 14px 6px;
  border: 0;
  border-radius: 0 0 16px 16px;
  color: #748074;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), #fff 46%),
    #fff;
  box-shadow: 0 -10px 22px rgba(73, 109, 31, 0.07);
  touch-action: none;
}

.top-category-collapse span {
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--brand);
  border-left: 2px solid var(--brand);
  border-radius: 2px 0 0;
  transform: rotate(45deg) translateY(2px);
}

.top-category-collapse strong {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.category-layout {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  overflow: hidden;
}

.side-category-list {
  align-self: stretch;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  background: #f4f5f4;
  scrollbar-width: none;
}

.side-category-list button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: 0 3px;
  border: 0;
  color: #5d645d;
  background: transparent;
  font-size: 12.5px;
  font-weight: 650;
  text-align: center;
}

.side-category-name {
  display: block;
  max-width: 6em;
  overflow: hidden;
  line-height: 1.15;
  text-overflow: clip;
  white-space: nowrap;
}

.side-category-badge {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 12px;
  height: 12px;
  padding: 0 2px;
  border-radius: 3px;
  color: #fff;
  font-size: 8.5px;
  font-style: normal;
  font-weight: 900;
  line-height: 12px;
}

.side-category-badge.hot {
  background: linear-gradient(135deg, #ff3d48, #ff7a32);
}

.side-category-badge.discount {
  background: linear-gradient(135deg, #ff8a1f, #f0b431);
}

.side-category-badge.new {
  background: linear-gradient(135deg, #79c53a, #a7df68);
}

.side-category-badge.cold {
  background: linear-gradient(135deg, #1d7df2, #3fb6ff);
}

.side-category-badge.pick {
  background: linear-gradient(135deg, #7b63f5, #4f8dff);
}

.side-category-list button.active {
  color: var(--brand-deep);
  background: #fff;
  font-weight: 800;
}

.side-category-list button.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 3px;
  height: 18px;
  border-radius: 999px;
  background: var(--brand);
}

.category-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 6px 6px 0 7px;
  overflow: hidden;
  background: #fff;
}

.category-banner {
  display: grid;
  align-content: center;
  gap: 4px;
  flex: 0 0 auto;
  aspect-ratio: 3 / 1;
  min-height: 92px;
  max-height: 118px;
  padding: 12px 13px;
  border-radius: 8px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(103, 13, 18, 0.9), rgba(217, 74, 39, 0.18)),
    url("https://images.unsplash.com/photo-1597079954631-9c37a47a9768?auto=format&fit=crop&w=700&q=80") center/cover;
  overflow: hidden;
  transition:
    max-height 180ms ease,
    min-height 180ms ease,
    padding 180ms ease,
    opacity 160ms ease;
}

.category-banner.collapsed {
  max-height: 0;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  pointer-events: none;
}

.category-banner strong {
  font-size: 18px;
  line-height: 1.1;
}

.category-banner span {
  font-size: 12.5px;
}

.category-banner button {
  justify-self: start;
  min-height: 24px;
  margin-top: 3px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  color: #9a5422;
  background: #fff3d7;
}

.tier3-filter-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 5px;
  align-items: center;
  flex: 0 0 auto;
  padding: 6px 0 5px;
}

.sub-filter-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.sub-filter-row button {
  min-height: 27px;
  padding: 0 11px;
  border: 0;
  border-radius: 6px;
  color: #505750;
  background: #f7f7f7;
  font-size: 12.5px;
}

.sub-filter-row button.active {
  color: var(--brand);
  background: var(--brand-soft);
  font-weight: 900;
}

.tier3-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 27px;
  border: 0;
  border-radius: 6px;
  color: #626a62;
  background: #f7f7f7;
  font-size: 0;
  line-height: 1;
  box-shadow: -8px 0 14px rgba(255, 255, 255, 0.95);
}

.tier3-toggle.active {
  color: var(--brand);
  background: var(--brand-soft);
}

.tier3-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  flex: 0 0 auto;
  margin: -3px 0 6px;
  padding: 8px;
  border: 1px solid #edf0ec;
  border-radius: 8px;
  background: #fbfcfa;
  box-shadow: 0 8px 18px rgba(73, 109, 31, 0.08);
}

.tier3-panel.hidden {
  display: none;
}

.tier3-panel button {
  min-width: 0;
  min-height: 29px;
  border: 0;
  border-radius: 6px;
  color: #505750;
  background: #f4f6f3;
  font-size: 12.5px;
}

.tier3-panel button.active {
  color: var(--brand);
  background: var(--brand-soft);
  font-weight: 900;
}

.sort-row {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  min-height: 26px;
  color: #5a615a;
  font-size: 12.5px;
}

.sort-row span,
.sort-row button {
  white-space: nowrap;
}

.category-product-list {
  position: relative;
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-right: 4px;
  padding-bottom: 104px;
  scrollbar-width: none;
  overflow-anchor: none;
}

.category-product-list.is-switching-section {
  overflow-y: hidden;
  -webkit-overflow-scrolling: auto;
}

.category-empty-state {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 24px 18px;
  color: #7c857c;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.category-product-section {
  scroll-margin-top: 8px;
  overflow-anchor: none;
}

.category-section-title {
  display: none;
}

.sold-out-section .category-section-title {
  color: #8a938a;
}

.category-bottom-hint {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: 60px;
  padding: 10px 8px 18px;
  color: #8a938a;
  font-size: 13px;
  text-align: center;
}

.category-bottom-hint strong {
  color: var(--brand-deep);
  font-size: 14px;
}

.category-product-list.bottom-ready .category-bottom-hint {
  color: var(--brand);
}

.category-product-list.bottom-ready .category-bottom-hint strong {
  color: var(--brand);
}

.sort-row button {
  border: 0;
  border-radius: 999px;
  padding: 3px 7px;
  background: transparent;
  color: #5a615a;
}

.sort-row button.active {
  color: var(--brand);
  background: var(--brand-soft);
  font-weight: 900;
}

.category-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  box-sizing: border-box;
  height: 118px;
  padding: 5px 0;
  border-top: 1px solid #edf0ec;
  cursor: pointer;
}

.category-item.sold-out {
  opacity: 0.62;
}

.category-item.search-target-highlight {
  animation: searchTargetPulse 1.8s ease;
}

@keyframes searchTargetPulse {
  0%,
  100% {
    background: transparent;
    box-shadow: inset 0 0 0 0 rgba(121, 197, 58, 0);
  }

  18%,
  72% {
    background: rgba(121, 197, 58, 0.08);
    box-shadow: inset 0 0 0 1px rgba(121, 197, 58, 0.2);
  }
}

.category-item > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.category-item img {
  display: block;
  align-self: start;
  width: 92px;
  height: 92px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 7px;
  background: #fff;
  color: transparent;
}

.category-item img[data-fallback-applied="true"] {
  padding: 13px;
  border: 1px dashed #d6e8c8;
  background: #f4faed;
  object-fit: contain;
}

.category-item h3 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: 0 0 auto;
  min-height: 33px;
  max-height: 33px;
  margin: 0;
  font-size: 14.2px;
  line-height: 1.16;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.category-item p {
  flex: 0 0 auto;
  overflow: hidden;
  height: 13px;
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-tags {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 2px;
  min-width: 0;
  height: 16px;
  min-height: 16px;
  overflow: hidden;
}

.category-tags span {
  overflow: hidden;
  max-width: 68px;
  padding: 1px 3px;
  border-radius: 4px;
  color: #d24b4c;
  background: #fff0f0;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-buy-row {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: 32px;
  margin-top: 1px;
}

.category-price-stack {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.category-price {
  color: var(--red);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.category-price small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  text-decoration: line-through;
}

.category-stock {
  width: fit-content;
  max-width: 86px;
  overflow: hidden;
  padding: 1px 5px;
  border-radius: 999px;
  color: var(--brand-deep);
  background: #f1f9e3;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-stock.low {
  color: #b45f00;
  background: #fff3dc;
}

.category-stock.sold-out {
  color: #8b8f8a;
  background: #f0f1f0;
}

.category-add-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border: 1px solid rgba(121, 197, 58, 0.22);
  border-radius: 50%;
  color: var(--brand);
  background: #f8fcf0;
  overflow: visible;
}

.category-add-btn .cart-icon {
  width: 22px;
  height: 22px;
  transform-origin: center;
}

.category-add-btn:disabled {
  border-color: transparent;
  color: #8c918b;
  background: #e5e7e5;
  font-size: 12px;
  font-weight: 900;
}

.cart-flyer {
  position: fixed;
  z-index: 120;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 16px 30px rgba(43, 43, 37, 0.24);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  contain: layout paint;
  will-change: transform, opacity;
}

.bottom-nav button.cart-target-pop {
  animation: cartTargetPop 360ms cubic-bezier(0.18, 0.86, 0.24, 1);
}

@keyframes cartTargetPop {
  0% {
    transform: scale(1);
  }

  52% {
    transform: scale(1.16);
  }

  100% {
    transform: scale(1);
  }
}

.category-picker {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  align-items: start;
  width: 100%;
  margin: 0 auto;
  pointer-events: none;
}

.category-picker.hidden {
  display: none;
}

.picker-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  pointer-events: auto;
}

.picker-panel {
  position: relative;
  z-index: 1;
  max-height: min(76dvh, calc(100dvh - 96px));
  overflow: auto;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px;
  border-radius: 0 0 16px 16px;
  background: #fff;
  pointer-events: auto;
  animation: categoryDrop 180ms ease-out;
  box-shadow: 0 18px 40px rgba(73, 109, 31, 0.18);
  will-change: transform, opacity;
}

.category-picker.is-closing-up .picker-scrim {
  opacity: 0;
  transition: opacity 190ms ease;
}

.picker-panel.is-swipe-closing {
  transform: translateY(var(--swipe-close-y, 0));
  transition: none;
}

.picker-panel.is-closing-up {
  opacity: 0;
  transform: translateY(-104%);
  transition:
    transform 190ms cubic-bezier(0.36, 0, 0.66, -0.18),
    opacity 170ms ease;
}

.picker-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 82px;
  pointer-events: none;
  background: linear-gradient(100deg, #eff9dd 0%, #fffaf2 100%);
}

.picker-search,
.picker-section {
  position: relative;
  z-index: 1;
}

.picker-section {
  margin-top: 10px;
}

.picker-section h2 {
  margin: 0 0 6px;
  font-size: 14px;
}

.picker-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px 4px;
}

.picker-grid button {
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #151815;
  font-size: 11.2px;
  line-height: 1.15;
}

.picker-grid img {
  width: 39px;
  height: 39px;
  border-radius: 50%;
  object-fit: cover;
  background: #f2f5f1;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.picker-grid span {
  max-width: 6em;
  overflow: hidden;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
}

.picker-grid button.active img {
  box-shadow: 0 0 0 3px rgba(121, 197, 58, 0.14);
}

.picker-collapse {
  position: sticky;
  bottom: -10px;
  z-index: 72;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1px;
  width: calc(100% + 24px);
  min-height: 40px;
  margin: 10px -12px -10px;
  padding: 3px 18px 7px;
  border: 0;
  border-radius: 0 0 16px 16px;
  color: #788078;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), #fff 42%),
    #fff;
  box-shadow: 0 -12px 28px rgba(73, 109, 31, 0.08);
  touch-action: none;
}

.picker-collapse span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 18px;
  color: var(--brand);
  font-size: 22px;
  line-height: 1;
}

.picker-collapse strong {
  font-size: 12px;
  font-weight: 600;
}

@keyframes categoryDrop {
  from {
    opacity: 0.25;
    transform: translateY(34px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes topCategoryPanelIn {
  from {
    opacity: 0.35;
    transform: translateY(22px) scaleY(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

/* Mobile visual polish: keep the H5 light, but make the real-phone UI feel like an app. */
@media (max-width: 759px) {
  body {
    font-size: 16px;
  }

  .app-shell {
    width: 100%;
    padding-right: 10px;
    padding-left: 10px;
    overflow-x: clip;
  }

  .home-hero,
  .simple-page-header,
  .category-page {
    margin-right: -10px;
    margin-left: -10px;
  }

  .quick-grid img,
  .picker-grid img {
    width: 39px;
    height: 39px;
  }

  .picker-grid {
    gap: 7px 4px;
  }

  .picker-grid button {
    gap: 2px;
    min-height: 0;
    font-size: 12px;
    line-height: 1.16;
  }

  .picker-section h2 {
    margin-bottom: 10px;
    font-size: 16px;
  }

  .picker-panel {
    padding-right: 14px;
    padding-left: 14px;
    border-radius: 0 0 20px 20px;
  }

  .category-search input,
  .search-box input,
  .compact-search input,
  .detail-search-field input,
  .address-dialog-body input,
  .address-dialog-body textarea,
  .checkout-body input,
  .checkout-body select,
  .picker-search input {
    font-size: 16px;
  }

  .top-category-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 6px;
  }

  .top-category-strip {
    grid-auto-columns: calc(100% / 7);
    gap: 0;
    padding: 5px 0 2px;
  }

  .top-category-strip button {
    gap: 3px;
    min-height: 0;
    font-size: 10.5px;
    line-height: 1.14;
  }

  .top-category-strip img {
    width: 39px;
    height: 39px;
  }

  .top-category-toggle {
    width: 24px;
    height: 44px;
    border-radius: 10px;
  }

  .top-category-panel {
    padding: 12px 12px 10px;
    border-radius: 0 0 20px 20px;
  }

  .top-category-panel .picker-section {
    margin-top: 12px;
  }

  .top-category-panel .picker-section h2 {
    margin-bottom: 9px;
    font-size: 15.5px;
  }

  .top-category-panel .picker-grid {
    gap: 5px 3px;
  }

  .top-category-panel .picker-grid button {
    gap: 1px;
    min-height: 0;
    font-size: 11.5px;
    line-height: 1.12;
  }

  .top-category-panel .picker-grid img {
    width: 36px;
    height: 36px;
  }

  .category-layout {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .side-category-list button {
    min-height: 44px;
    padding: 0 3px;
    font-size: 13px;
  }

  .side-category-badge {
    min-width: 14px;
    height: 14px;
    font-size: 9.5px;
    line-height: 14px;
  }

  .category-content {
    padding: 6px 6px 0 7px;
  }

  .category-banner {
    min-height: 92px;
    max-height: 118px;
    padding: 12px 13px;
    border-radius: 8px;
  }

  .category-banner strong {
    font-size: 18px;
  }

  .category-banner span {
    font-size: 12.5px;
  }

  .tier3-filter-shell {
    grid-template-columns: minmax(0, 1fr) 32px;
    gap: 5px;
    padding: 6px 0 5px;
  }

  .sub-filter-row {
    gap: 8px;
  }

  .sub-filter-row button,
  .tier3-panel button {
    min-height: 28px;
    padding: 0 11px;
    border-radius: 7px;
    font-size: 13px;
  }

  .tier3-toggle {
    width: 32px;
    height: 28px;
    border-radius: 7px;
  }

  .sort-row {
    min-height: 26px;
    font-size: 13px;
  }

  .category-section-title {
    padding: 7px 0;
    font-size: 14.5px;
  }

  .category-item {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 7px;
    height: 118px;
    padding: 5px 0;
  }

  .category-item img {
    width: 92px;
    height: 92px;
    border-radius: 7px;
  }

  .category-item h3 {
    min-height: 35px;
    max-height: 35px;
    font-size: 15px;
    line-height: 1.17;
  }

  .category-item p {
    height: 14px;
    font-size: 11.5px;
  }

  .category-tags {
    height: 16px;
    min-height: 16px;
    gap: 2px;
  }

  .category-tags span {
    max-width: 72px;
    padding: 1px 3px;
    font-size: 10.5px;
  }

  .category-buy-row {
    height: 32px;
    margin-top: 1px;
  }

  .category-price {
    font-size: 19px;
  }

  .category-price small {
    font-size: 13px;
  }

  .category-stock {
    max-width: 92px;
    padding: 1px 5px;
    font-size: 10.8px;
  }

  .category-add-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }

  .category-add-btn .cart-icon {
    width: 22px;
    height: 22px;
  }

  .bottom-nav {
    width: 100%;
    min-height: calc(78px + env(safe-area-inset-bottom));
    padding-top: 9px;
  }

  .bottom-nav button {
    gap: 4px;
    font-size: 27px;
  }

  .bottom-nav span {
    font-size: 13px;
  }

  .bottom-nav .nav-cart-icon {
    width: 28px;
    height: 28px;
  }

  .bottom-nav .ai-btn {
    width: 62px;
    height: 62px;
    margin-top: -24px;
  }

  .bottom-nav .nav-cart-wrap i {
    min-width: 18px;
    height: 18px;
    font-size: 10.5px;
  }

  .simple-page-header {
    padding-right: 20px;
    padding-left: 20px;
  }

  .simple-page-header strong {
    font-size: 30px;
  }

  .simple-page-header span {
    font-size: 15px;
  }

  .cart-page {
    padding-right: 12px;
    padding-left: 12px;
  }

  .cart-page-tabs {
    gap: 7px;
    padding: 5px;
  }

  .cart-page-tabs button {
    min-height: 38px;
    font-size: 13.5px;
  }

  .cart-service-card {
    padding: 14px;
    border-radius: 16px;
  }

  .cart-service-card strong {
    font-size: 15.5px;
  }

  .cart-service-card span {
    font-size: 12.5px;
  }

  .cart-member-card,
  .cart-promo-card {
    padding: 12px 14px;
    border-radius: 16px;
  }

  .cart-member-card strong {
    font-size: 14.5px;
  }

  .cart-page-card {
    padding: 14px;
    border-radius: 16px;
  }

  .cart-package-head strong {
    font-size: 15.5px;
  }

  .cart-package-head span {
    font-size: 12.5px;
  }

  .cart-item {
    grid-template-columns: 28px 72px minmax(0, 1fr);
    gap: 10px;
    padding: 12px 0;
  }

  .cart-check {
    width: 28px;
    height: 72px;
  }

  .cart-check span,
  .cart-select-all span {
    width: 20px;
    height: 20px;
  }

  .cart-item-img {
    width: 72px;
    height: 72px;
    border-radius: 10px;
  }

  .cart-item p {
    font-size: 15.5px;
    line-height: 1.25;
  }

  .cart-item-title-row em {
    font-size: 11px;
  }

  .cart-item-meta {
    font-size: 12.5px;
  }

  .cart-price-box strong {
    font-size: 18px;
  }

  .cart-price-box small,
  .cart-price-box span {
    font-size: 11.5px;
  }

  .cart-stepper {
    grid-template-columns: 34px 32px 34px;
    width: 100px;
    min-width: 100px;
    min-height: 32px;
  }

  .cart-stepper button {
    width: 34px;
    height: 32px;
  }

  .cart-stepper span {
    width: 32px;
    height: 32px;
  }

  .cart-checkout-bar {
    width: 100%;
    grid-template-columns: auto minmax(0, 1fr) 112px;
    min-height: 60px;
  }

  .cart-checkout-total span,
  .cart-footer-select-all {
    font-size: 13px;
  }

  .cart-checkout-total em {
    font-size: 20px;
  }

  .cart-checkout-total small {
    font-size: 10px;
  }

  .cart-checkout-bar .checkout-btn {
    min-height: 44px;
    font-size: 15px;
  }

  body.cart-mode .bottom-nav .ai-btn {
    width: 48px;
    height: 48px;
    margin-top: -8px;
    font-size: 18px;
  }

  .detail-main h1,
  .detail-buy-panel h1 {
    font-size: 19px;
    line-height: 1.22;
  }

  .detail-main p,
  .detail-buy-panel p {
    font-size: 13px;
  }

  .detail-price-row strong {
    font-size: 26px;
  }

  .detail-stock,
  .detail-chip-row span,
  .detail-service-row span,
  .detail-sku-list span {
    font-size: 12px;
  }

  .detail-buy-tabs button {
    min-height: 50px;
    font-size: 15.5px;
  }

  .detail-card {
    border-radius: 16px;
  }

  .detail-add-btn {
    min-height: 56px;
    font-size: 17px;
  }
}

@media (min-width: 760px) {
  body {
    padding: 18px 0;
  }

  .app-shell,
  .bottom-nav,
  .cart-drawer,
  .cart-checkout-bar,
  .category-picker,
  .sku-dialog,
  .detail-search-dialog,
  .detail-share-dialog {
    max-width: 430px;
  }

  .product-detail-page,
  .detail-action-bar {
    max-width: 422px;
  }

  .app-shell,
  .bottom-nav,
  .cart-drawer {
    border-radius: 24px;
  }

  .bottom-nav {
    bottom: 18px;
  }

  .cart-drawer {
    bottom: 104px;
  }

  .detail-topbar {
    top: 10px;
  }
}