/* 扁平化图标 */
.icon-flat {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.2em;
  flex-shrink: 0;
}

.icon-flat.icon-sm {
  width: 18px;
  height: 18px;
}

.icon-flat.icon-md {
  width: 22px;
  height: 22px;
}

.icon-flat.icon-lg {
  width: 28px;
  height: 28px;
}

.icon-flat.icon-xl {
  width: 40px;
  height: 40px;
}

.icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: linear-gradient(145deg, var(--gold-soft) 0%, #fff 100%);
  border-radius: 12px;
}

.icon-box.icon-box-sm {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.icon-box.icon-box-md {
  width: 48px;
  height: 48px;
}

.icon-box.icon-box-lg {
  width: 56px;
  height: 56px;
  border-radius: 14px;
}

.icon-box .icon-flat {
  width: 32px;
  height: 32px;
}

.product-thumb.icon-box .icon-flat,
.home-product-thumb.icon-box .icon-flat {
  width: 48px;
  height: 48px;
}

.icon-box-sm .icon-flat {
  width: 22px;
  height: 22px;
}

.icon-box-lg .icon-flat {
  width: 28px;
  height: 28px;
}

.product-thumb.icon-box,
.home-product-thumb.icon-box,
.feed-product-thumb.icon-box {
  aspect-ratio: 1;
  width: 100%;
  height: auto;
  border-radius: 0;
  background: linear-gradient(180deg, var(--surface-2) 0%, #fff 100%);
  color: var(--accent);
}

.cdi-strip-icon.icon-box {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: #fff;
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.card-icon .icon-flat {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.menu-icon .icon-flat {
  width: 18px;
  height: 18px;
}

.menu-icon-accent .icon-flat {
  color: var(--accent);
}

.topbar-icon-btn .icon-flat {
  width: 20px;
  height: 20px;
  color: var(--ink-soft);
}

.tabbar-item .icon-flat {
  width: 24px;
  height: 24px;
}

.search-bar .icon-flat {
  color: var(--ink-muted);
}

.cdi-mall-back .icon-flat {
  color: var(--ink-soft);
}

.cdi-cart-line-icon.icon-box-sm {
  flex-shrink: 0;
}

.quick-cat .icon-box {
  width: 44px;
  height: 44px;
  margin-bottom: 2px;
  color: var(--accent-dark);
}

.category-nav-item .icon-box {
  width: 32px;
  height: 32px;
  margin-bottom: 2px;
  border-radius: 10px;
  transition:
    color 0.22s,
    background 0.22s,
    transform 0.22s var(--ease-out);
}

.category-nav-item.active .icon-box {
  color: var(--accent);
  background: linear-gradient(145deg, #fff6ee, #fff);
  transform: scale(1.05);
}

.brand-badge .icon-flat {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

.icon-spin-wrap {
  display: inline-flex;
  color: var(--accent);
}

.icon-spin-wrap .icon-flat {
  width: 44px;
  height: 44px;
  animation: icon-spin 0.9s linear infinite;
}

@keyframes icon-spin {
  to {
    transform: rotate(360deg);
  }
}

.cdi-sheet-close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.cdi-sheet-close .icon-flat {
  width: 22px;
  height: 22px;
}

.cdi-pay-name .icon-wrap {
  vertical-align: middle;
  margin-right: 6px;
}

.cdi-cart-bar-btn .icon-wrap {
  color: var(--accent);
}

.link-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.menu-item > [data-icon] {
  display: inline-flex;
  flex-shrink: 0;
}

.menu-chevron {
  display: inline-flex;
  align-items: center;
}

.menu-chevron .icon-flat {
  width: 18px;
  height: 18px;
  color: var(--ink-muted);
}