/* 全站公共部件：顶部公告条与页脚。
   取自首页样式表 —— 站点统一用首页那版页脚标记（带支付图标列），所以样式也用它那份。
   各模板样式表里也各带一份同名规则，取值不同且是为各自那版旧标记写的，
   所以这份要在模板样式表之后加载，把它们盖掉；结账页这类没有专属样式表的页面
   也就有了公告条和页脚的样式。 */

.announcement {
      overflow: hidden;
      background: var(--ink);
      color: var(--white);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      white-space: nowrap;
    }

.announcement-track {
      display: inline-flex;
      width: max-content;
      padding: 10px 0;
      animation: announce 30s linear infinite;
    }

.announcement-track span { margin-right: 28px; }

@keyframes announce { to { transform: translateX(-33.3333%); } }

@keyframes marquee {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

.footer {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 20px;
      padding: 26px clamp(16px, 5vw, 78px);
      background: var(--ink);
      color: rgba(255, 253, 247, .7);
      font-size: 13px;
      font-weight: 400;
    }

.footer-legal strong,
    .footer a {
      font-weight: 500;
    }

.footer-side {
      display: grid;
      align-content: start;
      justify-items: end;
      gap: 18px;
      margin-left: auto;
    }

.footer-payments {
      display: block;
    }

.payment-marks {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
    }

.payment-icon {
      display: block;
      width: 48px;
      height: 30px;
      object-fit: contain;
    }

.footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }

.footer-group {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      align-items: center;
    }

.footer-group + .footer-group {
      margin-left: 10px;
      padding-left: 18px;
      border-left: 1px solid rgba(255, 253, 247, .22);
    }

.footer a {
      color: rgba(255, 253, 247, .82);
      text-decoration: none;
    }

.footer a:hover {
      color: var(--white);
      text-decoration: underline;
      text-underline-offset: 4px;
    }

@media (max-width: 680px) {
  .footer-side {width: 100%;
        margin-left: 0;
        justify-items: start;}
  .payment-marks {justify-content: flex-start;}
}

@media (prefers-reduced-motion: reduce) {
  .announcement-track,
      .burst {animation: none;}
}