@import '../../styles/variables.scss';
@import '../../styles/mixins.scss';

// 积分商城 V2 — 对齐原型 docs/design/mp-05-mall-v2.html

.mall-page {
  padding-bottom: calc(var(--tk-tabbar-space) + env(safe-area-inset-bottom));
  background: $bg;
}

/* ─── 积分卡片区 ─── */
.mall-header {
  padding: 0 var(--tk-page-padding);
  padding-top: var(--tk-gap-sm);
}

/* ─── 可滚动内容区 ─── */
.mall-content {
  padding: 0 var(--tk-page-padding) var(--tk-gap-lg);
}

/* ─── 快捷操作 ─── */
.mall-actions {
  display: flex;
  justify-content: space-around;
  padding: var(--tk-section-gap) 0;
}

.mall-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: $sp-xs;
  @include touch-feedback;

  &-icon {
    width: 52px;
    height: 52px;
    border-radius: 26px;
    @include flex-center;

    &--checkin {
      background: $acc;
      box-shadow: 0 4px 12px rgba(91, 122, 94, 0.3);
    }
    &--history {
      background: $wrn;
      box-shadow: 0 4px 12px rgba(196, 135, 58, 0.3);
    }
  }

  &-icon-text {
    font-size: 22px;
    color: $white;
    line-height: 1;
  }

  &-label {
    font-size: var(--tk-font-micro);
    color: $tx2;
    font-weight: 500;
  }
}

/* ─── 分割线 ─── */
.mall-divider {
  height: 1px;
  background: $bd;
  margin-bottom: $sp-md;
}

/* ─── 分类标签 ─── */
.mall-tabs {
  margin-bottom: $sp-section;
}

/* ─── 商品网格 ─── */
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: $sp-sm;
}

// 长者模式
.elder-mode .mall-page {
  .mall-action-label {
    font-size: 14px;
  }
}