feat：详情也调整优化

2026-09-22 16:50:58 +08:00
1 parent 4bf7b52918
commit e93946c971
@@ -55,6 +55,14 @@ const STROKE_ICONS = {
  food: '<path d="M6.6 3.6v5M9.4 3.6v5"/><path d="M8 3.6v16.8"/><path d="M6.6 8.6h2.8"/><path d="M16.4 3.6c1.7 0 2.8 1.3 2.8 3.1 0 1.9-1.1 3.1-2.8 3.1s-2.8-1.2-2.8-3.1c0-1.8 1.1-3.1 2.8-3.1z"/><path d="M16.4 9.8v10.6"/>',
  bed: '<path d="M3.6 18.6V6.4"/><path d="M3.6 15h16.8v3.6"/><path d="M20.4 15v-2.6a1.6 1.6 0 0 0-1.6-1.6h-7V15"/><circle cx="7.6" cy="12.1" r="1.7"/>',
  peak: '<path d="M2.8 19.2 9 8.4l3.6 6.2 2.2-3.4 6.4 8z"/>',
+  table:
+    '<ellipse cx="12" cy="8.4" rx="8.6" ry="3.2"/><path d="M12 11.6v8"/><path d="M8.6 19.6h6.8"/>',
+  hotspring:
+    '<path d="M3.4 15.2c1.7 0 1.7 1.5 3.4 1.5s1.7-1.5 3.4-1.5 1.7 1.5 3.4 1.5 1.7-1.5 3.4-1.5 1.7 1.5 3.4 1.5"/><path d="M3.4 19.3c1.7 0 1.7 1.5 3.4 1.5s1.7-1.5 3.4-1.5 1.7 1.5 3.4 1.5 1.7-1.5 3.4-1.5 1.7 1.5 3.4 1.5"/><path d="M8 11.8c-1.5-1.7 1-2.7.2-4.6"/><path d="M12 11.8c-1.5-1.7 1-2.7.2-4.6"/><path d="M16 11.8c-1.5-1.7 1-2.7.2-4.6"/>',
+  fuel:
+    '<rect x="3.2" y="3.6" width="9.8" height="16.8" rx="1.7"/><rect x="5.8" y="6.4" width="4.6" height="4" rx="1"/><path d="M13 10h2.4a2 2 0 0 1 2 2v6.4a1.7 1.7 0 0 0 3.4 0V12"/>',
+  cart:
+    '<path d="M3.2 4.6h2.4l2.7 9.9h9.5l2.1-7.3H6.5"/><circle cx="9.6" cy="19.2" r="1.6"/><circle cx="17" cy="19.2" r="1.6"/>',
  people:
    '<circle cx="9.2" cy="8.4" r="3.2"/><path d="M3.6 19.4a5.6 5.6 0 0 1 11.2 0"/><path d="M15.8 5.6a3.2 3.2 0 0 1 0 6"/><path d="M17.4 14.8a5.6 5.6 0 0 1 3 4.6"/>',
 };
@@ -90,6 +98,10 @@ const MATRIX = {
  food: ["brandDeep", "accent", "white", "brand"],
  bed: ["accent", "brand", "white", "brandDeep"],
  peak: ["accent", "brand", "white"],
+  table: ["white", "accent", "brandDeep"],
+  hotspring: ["white", "accent", "brandDeep"],
+  fuel: ["white", "accent", "brandDeep"],
+  cart: ["white", "accent", "brandDeep"],
  people: ["ink3", "brand", "white", "brandDeep"],
  wx: ["white"],
 };
@@ -4,10 +4,11 @@
 * 使用位置：权益中心 / 我的权益 / 详情页「到店权益」
 * 四行固定顺序：类型 / 价格 / 规格·适用 / 有效期·名额
 * 价格两形态互斥：金额型 = 优惠价大字 + 划线原价 + 右端折扣标；折扣型（price.rate）= 折扣大字。
- * ①行＝类型短名（2 字，`BENEFIT_TYPE_SHORT`）＋ 右端商家名胶囊（`merchant_name`，超 8 字截断），详情页不加胶囊。
+ * ①行＝类型名（权益 `type_label` → 商家 `type_label` → 板块 2 字短名）＋ 类型图标（`type_icon` → `type_label` 反查 → 板块图标）
+ * ＋ 右端商家名胶囊（`merchant_name`，超 8 字截断），详情页不加胶囊。
 */
 import { computed } from "vue";
-import { BENEFIT_STATUS, BENEFIT_TYPE_ICON, BENEFIT_TYPE_SHORT } from "@/constant";
+import { BENEFIT_ICON_ALIAS, BENEFIT_LABEL_ICON, BENEFIT_STATUS, BENEFIT_TYPE_ICON, BENEFIT_TYPE_SHORT } from "@/constant";
 import { discountLabel, dotDate, rateText, yuanText } from "@/utils";
 import { goDetail } from "@/utils/nav";

@@ -15,6 +16,8 @@ const props = defineProps({
  benefit: { type: Object, required: true },
  /** center 权益中心 | mine 我的权益 | detail 详情页到店权益 */
  mode: { type: String, default: "center" },
+  /** 所属商家的 type_label（详情页由 merchant 传入，优先于板块短名） */
+  typeLabel: { type: String, default: "" },
 });

 const emit = defineEmits(["action", "tap"]);
@@ -29,14 +32,39 @@ const isClaimed = computed(() => status.value === BENEFIT_STATUS.CLAIMED);

 /** 权益类型键：详情页走接口的 section_key，权益中心仍是本地 type，两者取其一 */
 const typeKey = computed(() => b.value.section_key || b.value.type || "");
-const typeLabel = computed(() => BENEFIT_TYPE_SHORT[typeKey.value] || "权益");
-const typeIcon = computed(() => BENEFIT_TYPE_ICON[typeKey.value] || "gift");
+/**
+ * ①行类型名：权益自带 type_label 最优先 —— 同一商家下权益类型可能不同
+ * （如云从朵花既有「住宿」又有「温泉」），不能只跟商家的分类走；
+ * 其次回落商家 type_label（详情页传入）、板块 2 字短名。
+ */
+const typeLabel = computed(() => {
+  const own = String(b.value.type_label || "").trim();
+  if (own) return own;
+  const fromMerchant = String(props.typeLabel || "").trim();
+  return fromMerchant || BENEFIT_TYPE_SHORT[typeKey.value] || "权益";
+});
+/** ①行图标：type_icon → 权益 type_label → 商家 type_label → 板块兜底 */
+const typeIcon = computed(() => {
+  const byIcon = BENEFIT_ICON_ALIAS[String(b.value.type_icon || "").trim().toLowerCase()];
+  if (byIcon) return byIcon;
+  for (const label of [b.value.type_label, props.typeLabel]) {
+    const hit = BENEFIT_LABEL_ICON[String(label || "").trim()];
+    if (hit) return hit;
+  }
+  return BENEFIT_TYPE_ICON[typeKey.value] || "gift";
+});

 const deal = computed(() => yuanText(b.value.price?.deal));
 const original = computed(() => yuanText(b.value.price?.original));
 const pct = computed(() => discountLabel(b.value.price?.deal, b.value.price?.original));
 const rate = computed(() => rateText(b.value.price));
 const isRate = computed(() => !!rate.value);
+/** 折扣型文案偏长（如「每升优惠0.20元」）时降字号，避免溢出信息区 */
+const rateCls = computed(() =>
+  rate.value.length > 5
+    ? "text-[17px] font-bold tracking-[-0.3px]"
+    : "text-display font-extrabold tracking-[-1px]"
+);
 const spec = computed(() => b.value.price?.spec || "");
 const hasPrice = computed(() => isRate.value || !!deal.value);

@@ -147,7 +175,7 @@ const onTap = () => {
      <!-- ② 价格：金额型 = 优惠价 + 划线原价 + 折扣标；折扣型 = 门市价 + 折扣大字 -->
      <view v-if="hasPrice" class="flex items-baseline gap-[6px] mt-2 leading-none whitespace-nowrap">
        <template v-if="isRate">
-          <text class="text-display font-extrabold tracking-[-1px]" :class="priceNumCls">{{ rate }}</text>
+          <text :class="[rateCls, priceNumCls]">{{ rate }}</text>
        </template>
        <template v-else>
          <text class="text-[15px] font-bold" :class="priceNumCls">¥</text>
@@ -56,7 +56,7 @@ export const BENEFIT_TYPE_SHORT = {
  general: "通用",
 };

-/** 权益类型 → 卡片类型行图标 */
+/** 权益类型 → 卡片类型行图标（板块级兜底） */
 export const BENEFIT_TYPE_ICON = {
  scenic: "peak",
  stay: "bed",
@@ -65,6 +65,73 @@ export const BENEFIT_TYPE_ICON = {
  general: "gift",
 };

+/**
+ * 权益 `type_label`（中文，接口字段）→ 卡片类型行图标
+ * 同一商家下权益类型可能不同（如云从朵花既有「住宿」又有「温泉」），故按权益自己的标签取图标。
+ */
+export const BENEFIT_LABEL_ICON = {
+  住宿: "bed",
+  美食: "food",
+  餐饮: "food",
+  宴席: "table",
+  景区: "peak",
+  温泉: "hotspring",
+  加油: "fuel",
+  商超: "cart",
+  特产: "ticket",
+  通用: "gift",
+};
+
+/** 权益 `type_icon`（英文，接口字段）→ 本地图标名，兼容常见写法 */
+export const BENEFIT_ICON_ALIAS = {
+  bed: "bed",
+  hotel: "bed",
+  room: "bed",
+  stay: "bed",
+  sleep: "bed",
+  lodging: "bed",
+  food: "food",
+  meal: "food",
+  restaurant: "food",
+  dining: "food",
+  eat: "food",
+  table: "table",
+  banquet: "table",
+  feast: "table",
+  dinner: "table",
+  peak: "peak",
+  scenic: "peak",
+  mountain: "peak",
+  view: "peak",
+  spot: "peak",
+  hotspring: "hotspring",
+  hot_spring: "hotspring",
+  "hot-spring": "hotspring",
+  "hot spring": "hotspring",
+  spring: "hotspring",
+  spa: "hotspring",
+  onsen: "hotspring",
+  fuel: "fuel",
+  gas: "fuel",
+  gas_station: "fuel",
+  "gas-station": "fuel",
+  oil: "fuel",
+  petrol: "fuel",
+  gasoline: "fuel",
+  station: "fuel",
+  cart: "cart",
+  shop: "cart",
+  store: "cart",
+  market: "cart",
+  supermarket: "cart",
+  super_market: "cart",
+  mall: "cart",
+  shopping: "cart",
+  ticket: "ticket",
+  specialty: "ticket",
+  gift: "gift",
+};
+
 /** 我的权益状态子分段（全部 / 可使用 / 已失效） */
 export const BENEFIT_SUB_TABS = [
  { key: "all", label: "全部" },
@@ -72,7 +139,7 @@ export const BENEFIT_SUB_TABS = [
  { key: "invalid", label: "已失效" },
 ];

-/** 板块 key → 详情页介绍卡标题（接口不提供，前端按 section_key 派生） */
+/** 板块 key → 详情页介绍卡标题（type_label 缺失时的兜底；正常取 type_label + 介绍） */
 export const SECTION_INTRO_TITLE = {
  scenic: "景区介绍",
  stay: "酒店介绍",
@@ -4,7 +4,7 @@
 * 数据来自 GET /v1/merchants/:id/detail —— 一次返回「商家 + 到店权益 + 同类推荐」。
 * 区块顺序：
 *   头图 swiper → 白面板【名称 + 类型徽标 / 营业时间 / 地址条（内嵌复制钮）】
- *   → 介绍卡（标题按 section_key 命名）→ 联系方式 → 到店权益（品牌染色卡）
+ *   → 介绍卡（标题取 type_label + 介绍）→ 联系方式 → 到店权益（品牌染色卡）
 *   → 附近同类推荐 → 底部留白
 * 不展示：tags 标签、设施服务、地图导航（数据无经纬度）。
 */
@@ -39,7 +39,11 @@ const images = computed(() => {
  );
 });
 const badge = computed(() => merchant.value?.type_label || "");
-const introTitle = computed(() => SECTION_INTRO_TITLE[merchant.value?.section_key] || "介绍");
+const introTitle = computed(() => {
+  const type = String(merchant.value?.type_label || "").trim();
+  if (type) return `${type}介绍`;
+  return SECTION_INTRO_TITLE[merchant.value?.section_key] || "介绍";
+});
 const addressText = computed(() => merchant.value?.address || "");
 const phone = computed(() => merchant.value?.contact_phone || "");
 const businessHours = computed(() => merchant.value?.business_hours || "");
@@ -190,7 +194,7 @@ onShareAppMessage(() => ({
        </view>
      </view>

-      <!-- 介绍卡（标题按板块命名） -->
+      <!-- 介绍卡（标题取 type_label + 介绍） -->
      <view v-if="merchant.description" :class="CARD">
        <view class="flex items-center gap-2 text-[16px] font-bold tracking-[-0.3px] text-ink deco-titledot">
          {{ introTitle }}
@@ -222,7 +226,7 @@ onShareAppMessage(() => ({
          到店权益
        </view>
        <BenefitCard v-for="benefit in shownBenefits" :key="benefit.id" :benefit="benefit" mode="detail"
-          @action="onClaimBenefit" />
+          :type-label="merchant.type_label" @action="onClaimBenefit" />

        <view v-if="collapsibleBenefit"
          class="mt-[11px] h-[34px] rounded-full flex items-center justify-center gap-[3px] text-cap font-semibold text-brand-deep bg-brand-soft border-[0.5px] border-brand-line"
@@ -245,9 +249,11 @@ onShareAppMessage(() => ({
              @click="goRelated(rec)">
              <image class="block w-[154px] h-[102px] rounded-[16px] shadow-[0_8px_20px_rgba(8,30,22,0.14)]"
                :src="rec.main_image_url" mode="aspectFill" />
-              <view
-                class="absolute left-0 right-0 bottom-0 px-[10px] pt-[22px] pb-[9px] rounded-b-[16px] text-white text-[11.5px] font-semibold line-clamp-1 scrim-rec">
-                {{ rec.name }}
+              <!-- 名称最多两行：外层留渐变与内边距，内层 clamp + 硬裁 32px（2 × 16px 行高），绝不溢到卡片外 -->
+              <view class="absolute left-0 right-0 bottom-0 px-[10px] pt-[22px] pb-[9px] rounded-b-[16px] scrim-rec">
+                <view class="text-white text-[11.5px] leading-[16px] font-semibold max-h-[32px] overflow-hidden line-clamp-2">
+                  {{ rec.name }}
+                </view>
              </view>
            </view>
          </view>
@@ -72,6 +72,18 @@
 .ai-peak.t-accent{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjRkY4QTNEJyBzdHJva2Utd2lkdGg9JzEuOScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cGF0aCBkPSJNMi44IDE5LjIgOSA4LjRsMy42IDYuMiAyLjItMy40IDYuNCA4eiIvPjwvc3ZnPg==")}
 .ai-peak.t-brand{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDBCNTc4JyBzdHJva2Utd2lkdGg9JzEuOScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cGF0aCBkPSJNMi44IDE5LjIgOSA4LjRsMy42IDYuMiAyLjItMy40IDYuNCA4eiIvPjwvc3ZnPg==")}
 .ai-peak.t-white{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjRkZGRkZGJyBzdHJva2Utd2lkdGg9JzEuOScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cGF0aCBkPSJNMi44IDE5LjIgOSA4LjRsMy42IDYuMiAyLjItMy40IDYuNCA4eiIvPjwvc3ZnPg==")}
+.ai-table.t-white{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjRkZGRkZGJyBzdHJva2Utd2lkdGg9JzEuOScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48ZWxsaXBzZSBjeD0iMTIiIGN5PSI4LjQiIHJ4PSI4LjYiIHJ5PSIzLjIiLz48cGF0aCBkPSJNMTIgMTEuNnY4Ii8+PHBhdGggZD0iTTguNiAxOS42aDYuOCIvPjwvc3ZnPg==")}
+.ai-table.t-accent{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjRkY4QTNEJyBzdHJva2Utd2lkdGg9JzEuOScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48ZWxsaXBzZSBjeD0iMTIiIGN5PSI4LjQiIHJ4PSI4LjYiIHJ5PSIzLjIiLz48cGF0aCBkPSJNMTIgMTEuNnY4Ii8+PHBhdGggZD0iTTguNiAxOS42aDYuOCIvPjwvc3ZnPg==")}
+.ai-table.t-brandDeep{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDA5QTY3JyBzdHJva2Utd2lkdGg9JzEuOScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48ZWxsaXBzZSBjeD0iMTIiIGN5PSI4LjQiIHJ4PSI4LjYiIHJ5PSIzLjIiLz48cGF0aCBkPSJNMTIgMTEuNnY4Ii8+PHBhdGggZD0iTTguNiAxOS42aDYuOCIvPjwvc3ZnPg==")}
+.ai-hotspring.t-white{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjRkZGRkZGJyBzdHJva2Utd2lkdGg9JzEuOScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cGF0aCBkPSJNMy40IDE1LjJjMS43IDAgMS43IDEuNSAzLjQgMS41czEuNy0xLjUgMy40LTEuNSAxLjcgMS41IDMuNCAxLjUgMS43LTEuNSAzLjQtMS41IDEuNyAxLjUgMy40IDEuNSIvPjxwYXRoIGQ9Ik0zLjQgMTkuM2MxLjcgMCAxLjcgMS41IDMuNCAxLjVzMS43LTEuNSAzLjQtMS41IDEuNyAxLjUgMy40IDEuNSAxLjctMS41IDMuNC0xLjUgMS43IDEuNSAzLjQgMS41Ii8+PHBhdGggZD0iTTggMTEuOGMtMS41LTEuNyAxLTIuNy4yLTQuNiIvPjxwYXRoIGQ9Ik0xMiAxMS44Yy0xLjUtMS43IDEtMi43LjItNC42Ii8+PHBhdGggZD0iTTE2IDExLjhjLTEuNS0xLjcgMS0yLjcuMi00LjYiLz48L3N2Zz4=")}
+.ai-hotspring.t-accent{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjRkY4QTNEJyBzdHJva2Utd2lkdGg9JzEuOScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cGF0aCBkPSJNMy40IDE1LjJjMS43IDAgMS43IDEuNSAzLjQgMS41czEuNy0xLjUgMy40LTEuNSAxLjcgMS41IDMuNCAxLjUgMS43LTEuNSAzLjQtMS41IDEuNyAxLjUgMy40IDEuNSIvPjxwYXRoIGQ9Ik0zLjQgMTkuM2MxLjcgMCAxLjcgMS41IDMuNCAxLjVzMS43LTEuNSAzLjQtMS41IDEuNyAxLjUgMy40IDEuNSAxLjctMS41IDMuNC0xLjUgMS43IDEuNSAzLjQgMS41Ii8+PHBhdGggZD0iTTggMTEuOGMtMS41LTEuNyAxLTIuNy4yLTQuNiIvPjxwYXRoIGQ9Ik0xMiAxMS44Yy0xLjUtMS43IDEtMi43LjItNC42Ii8+PHBhdGggZD0iTTE2IDExLjhjLTEuNS0xLjcgMS0yLjcuMi00LjYiLz48L3N2Zz4=")}
+.ai-hotspring.t-brandDeep{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDA5QTY3JyBzdHJva2Utd2lkdGg9JzEuOScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cGF0aCBkPSJNMy40IDE1LjJjMS43IDAgMS43IDEuNSAzLjQgMS41czEuNy0xLjUgMy40LTEuNSAxLjcgMS41IDMuNCAxLjUgMS43LTEuNSAzLjQtMS41IDEuNyAxLjUgMy40IDEuNSIvPjxwYXRoIGQ9Ik0zLjQgMTkuM2MxLjcgMCAxLjcgMS41IDMuNCAxLjVzMS43LTEuNSAzLjQtMS41IDEuNyAxLjUgMy40IDEuNSAxLjctMS41IDMuNC0xLjUgMS43IDEuNSAzLjQgMS41Ii8+PHBhdGggZD0iTTggMTEuOGMtMS41LTEuNyAxLTIuNy4yLTQuNiIvPjxwYXRoIGQ9Ik0xMiAxMS44Yy0xLjUtMS43IDEtMi43LjItNC42Ii8+PHBhdGggZD0iTTE2IDExLjhjLTEuNS0xLjcgMS0yLjcuMi00LjYiLz48L3N2Zz4=")}
+.ai-fuel.t-white{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjRkZGRkZGJyBzdHJva2Utd2lkdGg9JzEuOScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cmVjdCB4PSIzLjIiIHk9IjMuNiIgd2lkdGg9IjkuOCIgaGVpZ2h0PSIxNi44IiByeD0iMS43Ii8+PHJlY3QgeD0iNS44IiB5PSI2LjQiIHdpZHRoPSI0LjYiIGhlaWdodD0iNCIgcng9IjEiLz48cGF0aCBkPSJNMTMgMTBoMi40YTIgMiAwIDAgMSAyIDJ2Ni40YTEuNyAxLjcgMCAwIDAgMy40IDBWMTIiLz48L3N2Zz4=")}
+.ai-fuel.t-accent{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjRkY4QTNEJyBzdHJva2Utd2lkdGg9JzEuOScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cmVjdCB4PSIzLjIiIHk9IjMuNiIgd2lkdGg9IjkuOCIgaGVpZ2h0PSIxNi44IiByeD0iMS43Ii8+PHJlY3QgeD0iNS44IiB5PSI2LjQiIHdpZHRoPSI0LjYiIGhlaWdodD0iNCIgcng9IjEiLz48cGF0aCBkPSJNMTMgMTBoMi40YTIgMiAwIDAgMSAyIDJ2Ni40YTEuNyAxLjcgMCAwIDAgMy40IDBWMTIiLz48L3N2Zz4=")}
+.ai-fuel.t-brandDeep{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDA5QTY3JyBzdHJva2Utd2lkdGg9JzEuOScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cmVjdCB4PSIzLjIiIHk9IjMuNiIgd2lkdGg9IjkuOCIgaGVpZ2h0PSIxNi44IiByeD0iMS43Ii8+PHJlY3QgeD0iNS44IiB5PSI2LjQiIHdpZHRoPSI0LjYiIGhlaWdodD0iNCIgcng9IjEiLz48cGF0aCBkPSJNMTMgMTBoMi40YTIgMiAwIDAgMSAyIDJ2Ni40YTEuNyAxLjcgMCAwIDAgMy40IDBWMTIiLz48L3N2Zz4=")}
+.ai-cart.t-white{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjRkZGRkZGJyBzdHJva2Utd2lkdGg9JzEuOScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cGF0aCBkPSJNMy4yIDQuNmgyLjRsMi43IDkuOWg5LjVsMi4xLTcuM0g2LjUiLz48Y2lyY2xlIGN4PSI5LjYiIGN5PSIxOS4yIiByPSIxLjYiLz48Y2lyY2xlIGN4PSIxNyIgY3k9IjE5LjIiIHI9IjEuNiIvPjwvc3ZnPg==")}
+.ai-cart.t-accent{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjRkY4QTNEJyBzdHJva2Utd2lkdGg9JzEuOScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cGF0aCBkPSJNMy4yIDQuNmgyLjRsMi43IDkuOWg5LjVsMi4xLTcuM0g2LjUiLz48Y2lyY2xlIGN4PSI5LjYiIGN5PSIxOS4yIiByPSIxLjYiLz48Y2lyY2xlIGN4PSIxNyIgY3k9IjE5LjIiIHI9IjEuNiIvPjwvc3ZnPg==")}
+.ai-cart.t-brandDeep{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDA5QTY3JyBzdHJva2Utd2lkdGg9JzEuOScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cGF0aCBkPSJNMy4yIDQuNmgyLjRsMi43IDkuOWg5LjVsMi4xLTcuM0g2LjUiLz48Y2lyY2xlIGN4PSI5LjYiIGN5PSIxOS4yIiByPSIxLjYiLz48Y2lyY2xlIGN4PSIxNyIgY3k9IjE5LjIiIHI9IjEuNiIvPjwvc3ZnPg==")}
 .ai-people.t-ink3{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjOUNBM0FGJyBzdHJva2Utd2lkdGg9JzEuOScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48Y2lyY2xlIGN4PSI5LjIiIGN5PSI4LjQiIHI9IjMuMiIvPjxwYXRoIGQ9Ik0zLjYgMTkuNGE1LjYgNS42IDAgMCAxIDExLjIgMCIvPjxwYXRoIGQ9Ik0xNS44IDUuNmEzLjIgMy4yIDAgMCAxIDAgNiIvPjxwYXRoIGQ9Ik0xNy40IDE0LjhhNS42IDUuNiAwIDAgMSAzIDQuNiIvPjwvc3ZnPg==")}
 .ai-people.t-brand{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDBCNTc4JyBzdHJva2Utd2lkdGg9JzEuOScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48Y2lyY2xlIGN4PSI5LjIiIGN5PSI4LjQiIHI9IjMuMiIvPjxwYXRoIGQ9Ik0zLjYgMTkuNGE1LjYgNS42IDAgMCAxIDExLjIgMCIvPjxwYXRoIGQ9Ik0xNS44IDUuNmEzLjIgMy4yIDAgMCAxIDAgNiIvPjxwYXRoIGQ9Ik0xNy40IDE0LjhhNS42IDUuNiAwIDAgMSAzIDQuNiIvPjwvc3ZnPg==")}
 .ai-people.t-white{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjRkZGRkZGJyBzdHJva2Utd2lkdGg9JzEuOScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48Y2lyY2xlIGN4PSI5LjIiIGN5PSI4LjQiIHI9IjMuMiIvPjxwYXRoIGQ9Ik0zLjYgMTkuNGE1LjYgNS42IDAgMCAxIDExLjIgMCIvPjxwYXRoIGQ9Ik0xNS44IDUuNmEzLjIgMy4yIDAgMCAxIDAgNiIvPjxwYXRoIGQ9Ik0xNy40IDE0LjhhNS42IDUuNiAwIDAgMSAzIDQuNiIvPjwvc3ZnPg==")}