:::note
然后点生成转化令牌填到下面,插件里面第一行是账户id，第二行是令牌，点生成新令牌出来的
:::

:::warning
保存就好了
:::

:::danger
不要开网页翻译,尤其是“谷歌”，否则页面不一致，和教程不一样
:::

如何在我们OA系统解析？

弹出后，一一对应解析，

存在就更新，不存在就新增

前面的类型，一定要一样，类型和值，全部解析完成，去shopify添加，橙云默认全部不开。

默认这个，不要动，默认只解析@和www记录，@是主域名

{% comment %}
  限时促销横幅：黄底、橙色顶标、双色主标题、蓝色倒计时胶囊 + 底部双层波浪（SVG 平移动画）
{% endcomment %}

{% liquid
  assign pbc_uid = 'pbc-' | append: section.id
  assign end_iso = section.settings.countdown_end | strip
  assign pbc_wave_kf_back = 'pbc-wvb-' | append: section.id | replace: '--', '-' | replace: '__', '-' | handleize
  assign pbc_wave_kf_front = 'pbc-wvf-' | append: section.id | replace: '--', '-' | replace: '__', '-' | handleize
  assign pbc_pulse_kf = 'pbc-pulse-' | append: section.id | replace: '--', '-' | replace: '__', '-' | handleize
  assign pbc_pulse_peak = section.settings.suffix_pulse_peak_pct | default: 112 | times: 0.01
%}

<div class="pbc-section color-{{ section.settings.color_scheme }}" style="
  --pbc-bg: {{ section.settings.bg_color }};
  --pbc-badge-orange: {{ section.settings.badge_orange }};
  --pbc-badge-orange-text: {{ section.settings.badge_orange_text }};
  --pbc-head-blue: {{ section.settings.headline_blue }};
  --pbc-head-red: {{ section.settings.headline_red }};
  --pbc-sub-color: {{ section.settings.subhead_color }};
  --pbc-count-bg: {{ section.settings.countdown_pill_bg }};
  --pbc-count-text: {{ section.settings.countdown_pill_text }};
  --pbc-wave-back: {{ section.settings.wave_color_back }};
  --pbc-wave-front: {{ section.settings.wave_color_front }};
">
  <div class="pbc" id="{{ pbc_uid }}">
    <div class="pbc__inner page-width">
      {% if section.settings.top_badge_text != blank %}
        <div class="pbc__pill pbc__pill--top">
          <span class="pbc__pill-text">{{ section.settings.top_badge_text | escape }}</span>
        </div>
      {% endif %}

      <h2 class="pbc__headline">
        {% if section.settings.headline_prefix != blank %}
          <span class="pbc__headline-part pbc__headline-part--blue">{{ section.settings.headline_prefix | escape }}</span>
        {% endif %}
        {% if section.settings.headline_suffix != blank %}
          <span class="pbc__headline-part pbc__headline-part--red">{{ section.settings.headline_suffix | escape }}</span>
        {% endif %}
      </h2>

      {% if section.settings.subheadline != blank %}
        <p class="pbc__sub">{{ section.settings.subheadline | escape }}</p>
      {% endif %}

      <div
        class="pbc__pill pbc__pill--countdown"
        data-pbc-mode="{{ section.settings.countdown_mode | default: 'fixed_minutes' }}"
        data-pbc-duration-min="{{ section.settings.countdown_minutes | default: 30 }}"
        data-pbc-persist="{% if section.settings.countdown_persist %}true{% else %}false{% endif %}"
        data-pbc-storage-key="pbc-end-{{ section.id }}"
        data-pbc-end="{{ end_iso | escape }}"
      >
        <span class="pbc__count-label">{{ section.settings.countdown_prefix | escape }}</span>
        <strong class="pbc__count-value" data-pbc-display aria-live="polite">——</strong>
      </div>
    </div>

    <div class="pbc__waves" aria-hidden="true">
      <div class="pbc__wave-layer pbc__wave-layer--back">
        <svg class="pbc__wave-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 96" preserveAspectRatio="none">
          <path
            fill="var(--pbc-wave-back)"
            d="M0,56 C200,16 400,96 600,56 C800,16 1000,96 1200,56 L1200,96 L0,96 Z"
          />
          <path
            fill="var(--pbc-wave-back)"
            transform="translate(1200, 0)"
            d="M0,56 C200,16 400,96 600,56 C800,16 1000,96 1200,56 L1200,96 L0,96 Z"
          />
        </svg>
      </div>
      <div class="pbc__wave-layer pbc__wave-layer--front">
        <svg class="pbc__wave-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 96" preserveAspectRatio="none">
          <path
            fill="var(--pbc-wave-front)"
            d="M0,48 C240,8 480,88 720,48 C960,8 1200,88 1440,48 L1440,96 L0,96 Z"
          />
          <path
            fill="var(--pbc-wave-front)"
            transform="translate(1440, 0)"
            d="M0,48 C240,8 480,88 720,48 C960,8 1200,88 1440,48 L1440,96 L0,96 Z"
          />
        </svg>
      </div>
    </div>
  </div>
</div>

<style>
  #shopify-section-{{ section.id }} .pbc__wave-layer--back {
    animation: {{ pbc_wave_kf_back }} 18s linear infinite;
  }
  #shopify-section-{{ section.id }} .pbc__wave-layer--front {
    animation: {{ pbc_wave_kf_front }} 11s linear infinite reverse;
  }
  @keyframes {{ pbc_wave_kf_back }} {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(-50%, 0, 0);
    }
  }
  @keyframes {{ pbc_wave_kf_front }} {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(-50%, 0, 0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    {% if section.settings.force_wave_motion %}
      #shopify-section-{{ section.id }} .pbc__wave-layer--back {
        animation: {{ pbc_wave_kf_back }} 18s linear infinite !important;
      }
      #shopify-section-{{ section.id }} .pbc__wave-layer--front {
        animation: {{ pbc_wave_kf_front }} 11s linear infinite reverse !important;
      }
    {% else %}
      #shopify-section-{{ section.id }} .pbc__wave-layer--back,
      #shopify-section-{{ section.id }} .pbc__wave-layer--front {
        animation: none !important;
      }
    {% endif %}
  }
  {% if section.settings.enable_suffix_pulse %}
    #shopify-section-{{ section.id }} .pbc__headline-part--red {
      animation: {{ pbc_pulse_kf }} {{ section.settings.suffix_pulse_seconds }}s ease-in-out infinite;
      transform-origin: center center;
      will-change: transform;
    }
    @keyframes {{ pbc_pulse_kf }} {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale({{ pbc_pulse_peak }});
      }
    }
    @media (prefers-reduced-motion: reduce) {
      {% if section.settings.force_suffix_pulse %}
        #shopify-section-{{ section.id }} .pbc__headline-part--red {
          animation: {{ pbc_pulse_kf }} {{ section.settings.suffix_pulse_seconds }}s ease-in-out infinite !important;
        }
      {% else %}
        #shopify-section-{{ section.id }} .pbc__headline-part--red {
          animation: none !important;
        }
      {% endif %}
    }
  {% endif %}
</style>

<script>
  (function () {
    var root = document.getElementById('{{ pbc_uid }}');
    if (!root) return;
    var pill = root.querySelector('.pbc__pill--countdown');
    var el = root.querySelector('[data-pbc-display]');
    if (!pill || !el) return;

    var mode = pill.getAttribute('data-pbc-mode') || 'fixed_minutes';
    var endAttr = pill.getAttribute('data-pbc-end');
    var durationMin = parseInt(pill.getAttribute('data-pbc-duration-min'), 10);
    var persist = pill.getAttribute('data-pbc-persist') === 'true';
    var storageKey = pill.getAttribute('data-pbc-storage-key') || '';

    if (!durationMin || durationMin < 1) durationMin = 30;

    var endMs;

    if (mode === 'end_datetime') {
      endMs = endAttr ? Date.parse(endAttr) : NaN;
    } else {
      var msLeft = durationMin * 60 * 1000;
      var now = Date.now();
      if (persist && storageKey && typeof localStorage !== 'undefined') {
        try {
          var stored = localStorage.getItem(storageKey);
          if (stored) {
            var parsed = parseInt(stored, 10);
            if (!isNaN(parsed) && parsed > now) {
              endMs = parsed;
            } else {
              localStorage.removeItem(storageKey);
            }
          }
        } catch (e) {}
      }
      if (typeof endMs !== 'number' || isNaN(endMs)) {
        endMs = now + msLeft;
        if (persist && storageKey && typeof localStorage !== 'undefined') {
          try {
            localStorage.setItem(storageKey, String(endMs));
          } catch (e) {}
        }
      }
    }

    function pad(n) {
      return (n < 10 ? '0' : '') + n;
    }

    function formatRemain(ms) {
      if (ms <= 0) return '已结束';
      var totalSec = Math.floor(ms / 1000);
      var days = Math.floor(totalSec / 86400);
      totalSec %= 86400;
      var h = Math.floor(totalSec / 3600);
      totalSec %= 3600;
      var m = Math.floor(totalSec / 60);
      var s = totalSec % 60;
      /* 不足 1 小时（且当日小时数为 0）不显示 h；否则显示 h、m、s */
      var msOnly = pad(m) + 'm ' + pad(s) + 's';
      var hms = pad(h) + 'h ' + pad(m) + 'm ' + pad(s) + 's';
      if (days > 0) {
        return h > 0 ? days + 'd ' + hms : days + 'd ' + msOnly;
      }
      return h > 0 ? hms : msOnly;
    }

    function tick() {
      if (mode === 'end_datetime') {
        if (!endAttr || isNaN(endMs)) {
          el.textContent = '请在设置中填写结束时间';
          return;
        }
      }

      var left = endMs - Date.now();
      if (isNaN(left)) {
        el.textContent = '时间格式有误';
        return;
      }
      el.textContent = formatRemain(left);
      if (left <= 0) return;
      setTimeout(tick, 1000);
    }

    tick();
  })();
</script>

{% stylesheet %}
  .pbc-section {
    position: relative;
    overflow: hidden;
  }

  .pbc {
    position: relative;
    background: var(--pbc-bg, #fff176);
    padding: clamp(1.25rem, 4vw, 2rem) 0 clamp(3.25rem, 8vw, 4.5rem);
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', 'Segoe UI', sans-serif;
  }

  .pbc__inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 52rem;
    margin: 0 auto;
    padding-inline: 0.75rem;
  }

  .pbc__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.02em;
  }

  .pbc__pill--top {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-style: normal;
    font-weight: 800;
    background: var(--pbc-badge-orange, #c2410c);
    color: var(--pbc-badge-orange-text, #ffffff);
    padding: 0.5rem 1.25rem;
    font-size: clamp(0.9rem, 3vw, 1.1rem);
    margin-bottom: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.25;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: none;
    text-shadow: none;
    -webkit-font-smoothing: antialiased;
  }

  .pbc__pill-text {
    white-space: nowrap;
  }

  .pbc__headline {
    margin: 0 0 0.35rem;
    font-size: clamp(2rem, 8vw, 3.75rem);
    line-height: 1.05;
    font-weight: 700;
    font-style: italic;
    letter-spacing: -0.02em;
  }

  .pbc__headline-part {
    display: inline-block;
    margin: 0 0.15em;
  }

  .pbc__headline-part--blue {
    color: var(--pbc-head-blue, #1e3a8a);
    text-shadow: none;
  }

  .pbc__headline-part--red {
    color: var(--pbc-head-red, #b91c1c);
    text-shadow: none;
  }

  .pbc__sub {
    margin: 0 0 0.85rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: clamp(0.78rem, 2.4vw, 1.05rem);
    font-weight: 800;
    font-style: normal;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pbc-sub-color, #0f172a);
    text-shadow: none;
    line-height: 1.35;
  }

  .pbc__pill--countdown {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-style: normal;
    background: var(--pbc-count-bg, #172554);
    color: var(--pbc-count-text, #ffffff);
    padding: 0.65rem 1.3rem;
    font-size: clamp(1rem, 3.2vw, 1.25rem);
    gap: 0.45rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    text-shadow: none;
    line-height: 1.35;
    border: 1px solid rgba(255, 255, 255, 0.12);
    -webkit-font-smoothing: antialiased;
  }

  .pbc__count-label {
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    text-transform: uppercase;
    opacity: 1;
  }

  .pbc__count-value {
    font-style: normal;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    word-break: keep-all;
    letter-spacing: 0.02em;
  }

  .pbc__waves {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(52px, 12vw, 72px);
    pointer-events: none;
    z-index: 1;
  }

  .pbc__wave-layer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200%;
    height: 100%;
    margin: 0;
    will-change: transform;
    backface-visibility: hidden;
  }

  .pbc__wave-layer--back {
    opacity: 0.45;
    z-index: 1;
  }

  .pbc__wave-layer--front {
    opacity: 1;
    z-index: 2;
  }

  .pbc__wave-svg {
    display: block;
    width: 100%;
    height: clamp(52px, 12vw, 72px);
    vertical-align: bottom;
  }
{% endstylesheet %}

{% schema %}
{
  "name": "促销横幅倒计时",
  "tag": "section",
  "class": "section-promo-banner-countdown",
  "settings": [
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "配色方案",
      "default": "scheme-1"
    },
    {
      "type": "header",
      "content": "背景与文字颜色"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "横幅背景",
      "default": "#FFF176"
    },
    {
      "type": "color",
      "id": "badge_orange",
      "label": "顶部橙色胶囊背景",
      "info": "偏深的橙色配白字对比更清晰；可按品牌再调",
      "default": "#C2410C"
    },
    {
      "type": "color",
      "id": "badge_orange_text",
      "label": "顶部胶囊文字",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "id": "headline_blue",
      "label": "主标题前半（蓝）",
      "default": "#1E3A8A"
    },
    {
      "type": "color",
      "id": "headline_red",
      "label": "主标题后半（红）",
      "default": "#B91C1C"
    },
    {
      "type": "color",
      "id": "subhead_color",
      "label": "副标题文字",
      "default": "#0F172A"
    },
    {
      "type": "color",
      "id": "countdown_pill_bg",
      "label": "倒计时胶囊背景",
      "info": "默认略加深，「ENDS IN」等字与白字对比更明显",
      "default": "#172554"
    },
    {
      "type": "color",
      "id": "countdown_pill_text",
      "label": "倒计时胶囊文字",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "id": "wave_color_front",
      "label": "波浪前景（深蓝）",
      "default": "#1E3A8A"
    },
    {
      "type": "color",
      "id": "wave_color_back",
      "label": "波浪后层（浅蓝叠在后方）",
      "default": "#93C5FD"
    },
    {
      "type": "checkbox",
      "id": "force_wave_motion",
      "label": "系统开启「减少动态效果」时仍播放波浪动画",
      "info": "若波浪静止不动，可勾选此项（无障碍场景请按需关闭）",
      "default": true
    },
    {
      "type": "header",
      "content": "主标题红色字动画（如 80% OFF）"
    },
    {
      "type": "checkbox",
      "id": "enable_suffix_pulse",
      "label": "红色部分呼吸缩放（变大变小）",
      "info": "默认关闭，避免动态缩放导致文字发糊、不易辨认",
      "default": false
    },
    {
      "type": "range",
      "id": "suffix_pulse_seconds",
      "min": 0.8,
      "max": 2.5,
      "step": 0.1,
      "unit": "s",
      "label": "呼吸周期（越大越慢）",
      "default": 1.2
    },
    {
      "type": "range",
      "id": "suffix_pulse_peak_pct",
      "min": 104,
      "max": 125,
      "step": 1,
      "unit": "%",
      "label": "最大放大比例（相对原始字号）",
      "info": "112 表示峰值约为原来的 1.12 倍",
      "default": 112
    },
    {
      "type": "checkbox",
      "id": "force_suffix_pulse",
      "label": "系统开启「减少动态效果」时仍播放红色字缩放",
      "default": true
    },
    {
      "type": "header",
      "content": "文案"
    },
    {
      "type": "text",
      "id": "top_badge_text",
      "label": "顶部橙色胶囊文案",
      "default": "⚡ LIMITED-TIME MEGA SALE ⚡"
    },
    {
      "type": "text",
      "id": "headline_prefix",
      "label": "主标题前半（蓝色）",
      "default": "UP TO"
    },
    {
      "type": "text",
      "id": "headline_suffix",
      "label": "主标题后半（红色）",
      "default": "80% OFF"
    },
    {
      "type": "text",
      "id": "subheadline",
      "label": "副标题（大写）",
      "default": "EVERYTHING MUST GO! LIMITED STOCK!"
    },
    {
      "type": "text",
      "id": "countdown_prefix",
      "label": "倒计时前缀",
      "default": "距离结束还剩"
    },
    {
      "type": "header",
      "content": "倒计时规则"
    },
    {
      "type": "select",
      "id": "countdown_mode",
      "label": "倒计时方式",
      "options": [
        {
          "value": "fixed_minutes",
          "label": "固定多少分钟（从打开页面起算）"
        },
        {
          "value": "end_datetime",
          "label": "固定结束日期与时间（ISO）"
        }
      ],
      "default": "fixed_minutes"
    },
    {
      "type": "range",
      "id": "countdown_minutes",
      "min": 5,
      "max": 180,
      "step": 5,
      "unit": "min",
      "label": "倒计时时长（分钟）",
      "info": "仅在「固定多少分钟」模式下使用，例如 20、25、30",
      "default": 30
    },
    {
      "type": "checkbox",
      "id": "countdown_persist",
      "label": "刷新页面后倒计时继续（同一浏览器记住结束时刻）",
      "info": "关闭则每次打开页面重新从设定分钟数开始",
      "default": false
    },
    {
      "type": "text",
      "id": "countdown_end",
      "label": "倒计时结束时间（ISO 8601）",
      "info": "仅在「固定结束日期与时间」模式下使用。示例：2026-12-31T23:59:59 或 2026-12-31T23:59:59+08:00",
      "default": "2026-12-31T23:59:59"
    }
  ],
  "presets": [
    {
      "name": "促销横幅倒计时"
    }
  ]
}
{% endschema %}

{% comment %}
  客户证言 / 社交证明区块：标题区 + 横向自动滚动图片带
  将本文件放入主题的 sections/ 目录，在主题编辑器中添加该 section，并为每条证言添加图片 block。
  横向滚动由 CSS @keyframes 驱动（不依赖 JS）；可选勾选「忽略减少动态效果」以覆盖系统动画抑制。
{% endcomment %}

{% liquid
  assign ctm_scope = 'ctm-scope-' | append: section.id | handleize
  assign ctm_kf = 'ctm-kf-' | append: section.id | replace: '--', '-' | replace: '__', '-' | handleize
  assign ctm_dir = section.settings.scroll_direction | default: 'ltr'

  assign ctm_hf = section.settings.heading_font | default: 'serif'
  case ctm_hf
    when 'theme'
      assign ctm_heading_ff = 'var(--font-heading-family, Georgia, serif)'
    when 'serif'
      assign ctm_heading_ff = "Georgia, 'Times New Roman', Times, serif"
    when 'sans'
      assign ctm_heading_ff = "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    when 'custom'
      assign ctm_heading_ff = section.settings.heading_font_custom | default: 'Georgia, serif' | strip
    else
      assign ctm_heading_ff = "Georgia, 'Times New Roman', Times, serif"
  endcase

  assign ctm_bf = section.settings.body_font | default: 'sans'
  case ctm_bf
    when 'theme'
      assign ctm_body_ff = 'var(--font-body-family, system-ui, sans-serif)'
    when 'sans'
      assign ctm_body_ff = "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    when 'serif'
      assign ctm_body_ff = "Georgia, Cambria, 'Times New Roman', serif"
    when 'custom'
      assign ctm_body_ff = section.settings.body_font_custom | default: 'system-ui, sans-serif' | strip
    else
      assign ctm_body_ff = 'system-ui, -apple-system, sans-serif'
  endcase
%}

<div
  class="ctm-section {{ ctm_scope }}{% if section.settings.ignore_reduced_motion %} ctm-marquee--force-motion{% endif %}"
  style="
    --ctm-star-color: {{ section.settings.star_color }};
    --ctm-gap: {{ section.settings.image_gap }}px;
    --ctm-img-radius: {{ section.settings.image_radius }}px;
    --ctm-img-height: {{ section.settings.image_height }}px;
    --ctm-section-pt: {{ section.settings.padding_top }}px;
    --ctm-section-pb: {{ section.settings.padding_bottom }}px;
    --ctm-font-heading: {{ ctm_heading_ff }};
    --ctm-font-body: {{ ctm_body_ff }};
  "
>
  <div class="ctm-section__inner page-width">
  <div class="ctm-header">
    {% if section.settings.show_stars %}
      <div class="ctm-stars" role="img" aria-label="{{ section.settings.heading | default: '5 out of 5 stars' | escape }}">
        {% assign max_stars = section.settings.star_count | default: 5 %}
        {% if max_stars > 5 %}{% assign max_stars = 5 %}{% endif %}
        {% if max_stars < 1 %}{% assign max_stars = 1 %}{% endif %}
        {% for i in (1..max_stars) %}
          <span class="ctm-star" aria-hidden="true">★</span>
        {% endfor %}
      </div>
    {% endif %}

    {% if section.settings.badge_text != blank %}
      <p class="ctm-badge">{{ section.settings.badge_text }}</p>
    {% endif %}

    {% if section.settings.heading != blank %}
      <h2 class="ctm-heading">{{ section.settings.heading }}</h2>
    {% endif %}

    {% if section.settings.subheading != blank %}
      <p class="ctm-subheading">{{ section.settings.subheading }}</p>
    {% endif %}
  </div>
  </div>

  {% assign image_blocks = section.blocks | where: 'type', 'image' %}
  {% if image_blocks.size > 0 %}
    <div class="ctm-marquee-shell{% if section.settings.full_bleed_marquee %} ctm-marquee-shell--bleed{% endif %}">
    <div class="ctm-marquee{% if section.settings.pause_on_hover %} ctm-marquee--pause-hover{% endif %}">
      <div class="ctm-marquee__viewport">
        <div class="ctm-marquee__track">
          {% comment %} 同一组图片重复两遍，动画 translateX(-50%) 才能无缝循环 {% endcomment %}
          {% for pass in (1..2) %}
            {% for block in image_blocks %}
              <div
                class="ctm-marquee__item"
                {% if pass == 2 %}
                  aria-hidden="true"
                {% else %}
                  {{ block.shopify_attributes }}
                {% endif %}
              >
                {% if block.settings.image != blank %}
                  {{
                    block.settings.image
                    | image_url: width: 800
                    | image_tag:
                      loading: 'lazy',
                      class: 'ctm-marquee__img',
                      widths: '200, 400, 600, 800',
                      sizes: '(max-width: 749px) 40vw, 220px',
                      alt: block.settings.image.alt | default: section.settings.heading | escape
                  }}
                {% else %}
                  <div class="ctm-marquee__placeholder">{{ 'onboarding.product_title' | t | default: 'Image' }}</div>
                {% endif %}
              </div>
            {% endfor %}
          {% endfor %}
        </div>
      </div>
    </div>
    </div>
    <style>
      .{{ ctm_scope }} .ctm-marquee__track {
        animation: {{ ctm_kf }} {{ section.settings.scroll_duration }}s linear infinite;
        will-change: transform;
      }
      {% if ctm_dir == 'ltr' %}
        @keyframes {{ ctm_kf }} {
          0% {
            transform: translate3d(-50%, 0, 0);
          }
          100% {
            transform: translate3d(0, 0, 0);
          }
        }
      {% else %}
        @keyframes {{ ctm_kf }} {
          0% {
            transform: translate3d(0, 0, 0);
          }
          100% {
            transform: translate3d(-50%, 0, 0);
          }
        }
      {% endif %}
      .{{ ctm_scope }} .ctm-marquee--pause-hover:hover .ctm-marquee__track {
        animation-play-state: paused;
      }
      @media (prefers-reduced-motion: reduce) {
        .{{ ctm_scope }}:not(.ctm-marquee--force-motion) .ctm-marquee__track {
          animation: none !important;
        }
        .{{ ctm_scope }}:not(.ctm-marquee--force-motion) .ctm-marquee__viewport {
          overflow-x: auto;
          overflow-y: hidden;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: thin;
        }
      }
    </style>
  {% endif %}
</div>

{% stylesheet %}
  .ctm-section {
    padding-top: var(--ctm-section-pt, 3rem);
    padding-bottom: var(--ctm-section-pb, 3rem);
    background: var(--ctm-section-bg, transparent);
    overflow: visible;
  }

  .ctm-marquee-shell {
    width: 100%;
    max-width: 100%;
  }

  .ctm-marquee-shell--bleed {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    position: relative;
    left: auto;
    right: auto;
  }

  .ctm-header {
    text-align: center;
    max-width: 46rem;
    margin: 0 auto 2rem;
  }

  .ctm-stars {
    display: flex;
    justify-content: center;
    gap: 0.15rem;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--ctm-star-color, #2e7d32);
    letter-spacing: 0.02em;
  }

  .ctm-badge {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: rgba(0, 0, 0, 0.45);
    font-family: var(--ctm-font-body, system-ui, sans-serif);
  }

  .ctm-heading {
    margin: 0 0 0.75rem;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 600;
    line-height: 1.15;
    font-family: var(--ctm-font-heading, Georgia, serif);
    letter-spacing: -0.02em;
  }

  .ctm-subheading {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.72);
    font-family: var(--ctm-font-body, system-ui, sans-serif);
  }

  .ctm-marquee__viewport {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    padding-bottom: 0.25rem;
  }

  .ctm-marquee__viewport.ctm-marquee__viewport--fallback {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .ctm-marquee__track {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    width: max-content;
    min-width: max-content;
    gap: var(--ctm-gap, 12px);
    backface-visibility: hidden;
  }

  .ctm-marquee__item {
    flex: 0 0 auto;
    width: calc(var(--ctm-img-height, 280px) * 0.72);
    height: var(--ctm-img-height, 280px);
  }

  .ctm-marquee__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--ctm-img-radius, 12px);
  }

  .ctm-marquee__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ctm-img-radius, 12px);
    background: rgba(0, 0, 0, 0.06);
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.45);
    font-family: var(--ctm-font-body, system-ui, sans-serif);
  }
{% endstylesheet %}

{% schema %}
{
  "name": "客户证言滚动图",
  "tag": "section",
  "class": "section-customer-testimonials-marquee",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_stars",
      "label": "显示星级",
      "default": true
    },
    {
      "type": "range",
      "id": "star_count",
      "min": 1,
      "max": 5,
      "step": 1,
      "label": "星星数量",
      "default": 5
    },
    {
      "type": "color",
      "id": "star_color",
      "label": "星星颜色",
      "default": "#2E7D32"
    },
    {
      "type": "text",
      "id": "badge_text",
      "label": "认证说明",
      "default": "✓ Verified by Judge.me"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "标题",
      "default": "Real Overnight Results"
    },
    {
      "type": "textarea",
      "id": "subheading",
      "label": "副标题",
      "default": "Join 100,000+ customers waking up lighter, flatter, and less bloated - starting the very first night."
    },
    {
      "type": "header",
      "content": "字体"
    },
    {
      "type": "select",
      "id": "heading_font",
      "label": "标题字体",
      "options": [
        { "value": "theme", "label": "跟随主题标题字体" },
        { "value": "serif", "label": "衬线（杂志感）" },
        { "value": "sans", "label": "无衬线（简洁）" },
        { "value": "custom", "label": "自定义" }
      ],
      "default": "serif"
    },
    {
      "type": "text",
      "id": "heading_font_custom",
      "label": "标题自定义 font-family",
      "info": "仅在「自定义」时生效，示例：'Playfair Display', Georgia, serif",
      "default": "'Cormorant Garamond', Georgia, serif"
    },
    {
      "type": "select",
      "id": "body_font",
      "label": "说明与认证文字字体",
      "options": [
        { "value": "theme", "label": "跟随主题正文字体" },
        { "value": "sans", "label": "无衬线" },
        { "value": "serif", "label": "衬线" },
        { "value": "custom", "label": "自定义" }
      ],
      "default": "sans"
    },
    {
      "type": "text",
      "id": "body_font_custom",
      "label": "说明自定义 font-family",
      "info": "仅在「自定义」时生效",
      "default": "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    },
    {
      "type": "select",
      "id": "scroll_direction",
      "label": "滚动方向",
      "options": [
        { "value": "ltr", "label": "从左向右" },
        { "value": "rtl", "label": "从右向左" }
      ],
      "default": "ltr"
    },
    {
      "type": "range",
      "id": "scroll_duration",
      "min": 15,
      "max": 90,
      "step": 5,
      "unit": "s",
      "label": "完整滚动一轮时长",
      "info": "数值越大滚动越慢",
      "default": 45
    },
    {
      "type": "checkbox",
      "id": "pause_on_hover",
      "label": "鼠标悬停时暂停",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "full_bleed_marquee",
      "label": "图片带横向铺满屏幕（突破页面宽度）",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "ignore_reduced_motion",
      "label": "忽略系统“减少动态效果”（仍会滚动；无障碍场景慎用）",
      "default": false
    },
    {
      "type": "range",
      "id": "image_height",
      "min": 200,
      "max": 400,
      "step": 10,
      "unit": "px",
      "label": "图片高度",
      "default": 280
    },
    {
      "type": "range",
      "id": "image_gap",
      "min": 4,
      "max": 32,
      "step": 2,
      "unit": "px",
      "label": "图片间距",
      "default": 12
    },
    {
      "type": "range",
      "id": "image_radius",
      "min": 0,
      "max": 32,
      "step": 2,
      "unit": "px",
      "label": "图片圆角",
      "default": 12
    },
    {
      "type": "header",
      "content": "间距"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "上内边距",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "下内边距",
      "default": 36
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "图片",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "图片"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "客户证言滚动图",
      "blocks": [
        { "type": "image" },
        { "type": "image" },
        { "type": "image" },
        { "type": "image" },
        { "type": "image" },
        { "type": "image" }
      ]
    }
  ]
}
{% endschema %}

<style>
  .sky-trust-card {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    background: #dff6ff;
    border: 2px solid #35bff0;
    font-family: Arial, Helvetica, sans-serif;
    color: #004b73;
    box-sizing: border-box;
  }

  .sky-trust-card-main {
    display: grid;
    grid-template-columns: 58% 42%;
    min-height: 150px;
  }

  .sky-trust-card-left {
    padding: 18px 18px 14px;
    border-right: 1px solid #9edff5;
    box-sizing: border-box;
  }

  .sky-trust-logo {
    font-size: 26px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -1px;
    color: #005b8f;
    margin-bottom: 12px;
  }

  .sky-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }

  .sky-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 23px;
    padding: 4px 9px;
    border-radius: 4px;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #006c9e;
    background: #f0fbff;
    border: 1px solid #35bff0;
    white-space: nowrap;
    box-sizing: border-box;
  }

  .sky-trust-badge.primary {
    background: #008fc7;
    color: #ffffff;
    border-color: #008fc7;
  }

  .sky-trust-card-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    text-align: center;
    box-sizing: border-box;
  }

  .sky-trust-label {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.4px;
    color: #0077a8;
    margin-bottom: 8px;
  }

  .sky-trust-number {
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
    color: #003f66;
    letter-spacing: -1px;
    margin-bottom: 10px;
  }

  .sky-trust-active {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #f7fdff;
    color: #008fc7;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    border: 1px solid #bfeeff;
  }

  .sky-trust-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 34px;
    padding: 9px 14px;
    background: #0077a8;
    color: #ffffff;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: 0.4px;
    text-align: center;
    box-sizing: border-box;
  }

  .sky-trust-bottom svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
  }

  @media screen and (max-width: 640px) {
    .sky-trust-card {
      max-width: 100%;
      border-radius: 14px;
    }

    .sky-trust-card-main {
      grid-template-columns: 58% 42%;
      min-height: auto;
    }

    .sky-trust-card-left {
      padding: 12px 9px 10px 10px;
      border-right: 1px solid #9edff5;
      text-align: left;
    }

    .sky-trust-logo {
      font-size: 19px;
      margin-bottom: 10px;
      letter-spacing: -0.5px;
    }

    .sky-trust-badges {
      gap: 6px;
    }

    .sky-trust-badge {
      min-height: 20px;
      padding: 4px 7px;
      font-size: 8px;
      border-radius: 4px;
      gap: 4px;
    }

    .sky-trust-card-right {
      padding: 12px 7px;
    }

    .sky-trust-label {
      font-size: 8.5px;
      letter-spacing: 1.1px;
      margin-bottom: 6px;
    }

    .sky-trust-number {
      font-size: 22px;
      margin-bottom: 8px;
    }

    .sky-trust-active {
      padding: 4px 8px;
      font-size: 9px;
    }

    .sky-trust-bottom {
      min-height: 31px;
      padding: 9px 10px;
      font-size: 10px;
    }

    .sky-trust-bottom svg {
      width: 14px;
      height: 14px;
    }
  }
</style>

<div class="sky-trust-card">
  <div class="sky-trust-card-main">
    <div class="sky-trust-card-left">
      <div class="sky-trust-logo">kaviroes™</div>

      <div class="sky-trust-badges">
        <div class="sky-trust-badge primary">✓ OFFICIAL US STORE</div>
        <div class="sky-trust-badge">🔬 Clinically Verified</div>
        <div class="sky-trust-badge">🩺 Doctor Recommended</div>
        <div class="sky-trust-badge">🧪 Lab Tested</div>
        <div class="sky-trust-badge">🌿 100% Natural</div>
      </div>
    </div>

    <div class="sky-trust-card-right">
      <div class="sky-trust-label">TOTAL MEMBERS</div>
      <div class="sky-trust-number" data-start-number="2833413">2,833,413</div>
      <div class="sky-trust-active">🔥 Active Now</div>
    </div>
  </div>

  <div class="sky-trust-bottom">
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M12 2 4.5 5v6c0 5 3.2 9.7 7.5 11 4.3-1.3 7.5-6 7.5-11V5L12 2Zm-1 14.5-4-4 1.4-1.4 2.6 2.6 5.6-5.6L18 9.5l-7 7Z"/>
    </svg>
    <span>FDA Compliant &amp; Patent Protected.</span>
  </div>
</div>

<script>
  (function () {
    function formatNumber(num) {
      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

    function startCounter() {
      var counters = document.querySelectorAll(".sky-trust-number");

      counters.forEach(function (counter) {
        if (counter.dataset.counterStarted === "true") return;

        counter.dataset.counterStarted = "true";

        var currentNumber = parseInt(
          counter.dataset.startNumber || counter.textContent.replace(/,/g, ""),
          10
        );

        setInterval(function () {
          var randomIncrease = Math.floor(Math.random() * 6) + 5;
          currentNumber += randomIncrease;
          counter.textContent = formatNumber(currentNumber);
        }, 2000);
      });
    }

    startCounter();

    document.addEventListener("shopify:section:load", function () {
      startCounter();
    });
  })();
</script>