/* ===== 店面（js/storefront.js）=====
   顶部：滚动公告 + 轮播图 + 信任标识；底部：购买须知 + 常见问题；右下角：悬浮在线客服（Telegram）。
   全部用逻辑属性（inline-start / inline-end），阿拉伯语（从右向左）下自动镜像；图标是内联 SVG，没有外部图片。 */

/* .main 是 flex 子项，默认 min-width:auto：不换行的公告文字会把整页撑宽，手机上整页横向溢出 */
.main { min-width: 0; max-width: 100%; }

.sf-top { margin: 12px 20px 0; }
.sf-top[hidden] { display: none; }
/* 配置还没回来时先占好位置，避免页面下面的内容跳一下 */
.sf-top[data-state="pending"] { min-height: 230px; }
.sf-top svg, .sf-bottom svg, .sf-support svg { display: block; width: 100%; height: 100%; }

/* ---- 滚动公告 ---- */
.sf-ann { display: flex; align-items: center; gap: 8px; padding: 7px 12px; margin-bottom: 10px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; color: #92400e; font-size: 12px; }
.sf-ann-icon { flex: 0 0 auto; width: 16px; height: 16px; color: #d97706; }
.sf-ann-viewport { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.sf-ann-text { display: inline-block; }
.sf-ann-text.is-wrap { white-space: normal; }
.sf-ann-text.is-marquee { padding-inline-start: 100%; animation: sf-marquee var(--sf-marquee-seconds, 20s) linear infinite; }
.sf-ann:hover .sf-ann-text.is-marquee { animation-play-state: paused; }
@keyframes sf-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
html[dir="rtl"] .sf-ann-text.is-marquee { animation-name: sf-marquee-rtl; }
@keyframes sf-marquee-rtl { from { transform: translateX(0); } to { transform: translateX(100%); } }

/* ---- 轮播图 ---- */
.sf-hero { position: relative; border-radius: 12px; overflow: hidden; background: #1e3a8a; }
.sf-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; outline-offset: -3px; }
.sf-track::-webkit-scrollbar { display: none; }
/* 高度随文案自适应（长标题 / 阿拉伯语换行时不会压住下面的圆点）；同一轮播里各张取最高的那张 */
.sf-slide { position: relative; flex: 0 0 100%; min-width: 0; min-height: 150px; padding: 14px 0 30px; scroll-snap-align: start; display: flex; align-items: center; color: #fff; overflow: hidden; }
.sf-slide-body { position: relative; z-index: 1; padding: 0 64px; max-width: 760px; }
.sf-slide-title { font-size: 22px; line-height: 1.25; font-weight: 800; letter-spacing: .2px; text-shadow: 0 1px 8px rgba(0, 0, 0, .18); }
.sf-slide-sub { margin-top: 8px; font-size: 13px; line-height: 1.5; opacity: .92; }
.sf-g0 { background: linear-gradient(120deg, #1d4ed8 0%, #3b82f6 55%, #60a5fa 100%); }
.sf-g1 { background: linear-gradient(120deg, #047857 0%, #10b981 60%, #6ee7b7 100%); }
.sf-g2 { background: linear-gradient(120deg, #6d28d9 0%, #8b5cf6 60%, #c4b5fd 100%); }
.sf-g3 { background: linear-gradient(120deg, #b45309 0%, #f59e0b 60%, #fcd34d 100%); }
.sf-g4 { background: linear-gradient(120deg, #be123c 0%, #f43f5e 60%, #fda4af 100%); }
/* 装饰：两个半透明的大圆，纯 CSS，不用图片 */
.sf-art { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .13); pointer-events: none; }
.sf-art-a { width: 220px; height: 220px; inset-inline-end: -50px; top: -70px; }
.sf-art-b { width: 120px; height: 120px; inset-inline-end: 130px; bottom: -60px; background: rgba(255, 255, 255, .09); }

.sf-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(15, 23, 42, .32); color: #fff; transition: background .15s; }
.sf-nav:hover { background: rgba(15, 23, 42, .55); }
.sf-nav-icon { width: 18px; height: 18px; display: block; }
.sf-prev { inset-inline-start: 10px; }
.sf-next { inset-inline-end: 10px; }
html[dir="rtl"] .sf-nav-icon { transform: scaleX(-1); }
.sf-dots { position: absolute; z-index: 2; inset-inline: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.sf-dot { pointer-events: auto; width: 8px; height: 8px; padding: 0; border-radius: 4px; background: rgba(255, 255, 255, .5); transition: width .2s, background .2s; }
.sf-dot.is-active { width: 22px; background: #fff; }
.sf-nav:focus-visible, .sf-dot:focus-visible, .sf-track:focus-visible, .sf-support:focus-visible, .sf-card-title:focus-visible, .sf-faq-q:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px #2563eb; }

/* ---- 信任标识 ---- */
.sf-trust { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 10px; }
.sf-trust-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; min-width: 0; }
.sf-trust-icon { flex: 0 0 auto; width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: #eff6ff; color: #2563eb; }
.sf-trust-body { min-width: 0; }
.sf-trust-title { font-size: 12.5px; font-weight: 700; color: #0f172a; overflow-wrap: anywhere; }
.sf-trust-desc { margin-top: 1px; font-size: 11px; color: #64748b; overflow-wrap: anywhere; }

/* ---- 底部：购买须知 / 常见问题 ---- */
.sf-bottom { padding: 0 20px 18px; display: grid; gap: 12px; }
.sf-bottom[hidden] { display: none; }
.sf-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.sf-card-title { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 13px; font-weight: 700; color: #0f172a; cursor: pointer; list-style: none; }
.sf-card-title::-webkit-details-marker { display: none; }
.sf-card-title-static { cursor: default; }
.sf-card-icon { flex: 0 0 auto; width: 18px; height: 18px; color: #2563eb; }
.sf-card-title-text { flex: 1; min-width: 0; }
.sf-chevron { flex: 0 0 auto; width: 16px; height: 16px; color: #94a3b8; transition: transform .15s; }
html[dir="rtl"] .sf-chevron { transform: scaleX(-1); }
details[open] > summary > .sf-chevron { transform: rotate(90deg); }
.sf-notice-list { margin: 0; padding: 0 14px 14px; padding-inline-start: 34px; font-size: 12px; line-height: 1.7; color: #475569; display: grid; gap: 4px; }
.sf-notice-list li { padding-inline-start: 2px; overflow-wrap: anywhere; }
.sf-faq .sf-card-title { padding-bottom: 6px; }
.sf-faq-item { border-top: 1px solid #f1f5f9; }
.sf-faq-q { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 12.5px; font-weight: 600; color: #1e293b; cursor: pointer; list-style: none; }
.sf-faq-q::-webkit-details-marker { display: none; }
.sf-faq-q-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sf-faq-a { padding: 0 14px 12px; font-size: 12px; line-height: 1.7; color: #64748b; overflow-wrap: anywhere; }

/* ---- 右下角悬浮在线客服 ---- */
.sf-support { position: fixed; z-index: 60; inset-inline-end: 16px; bottom: max(18px, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px 0 12px; border-radius: 24px; background: #229ed9; color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 6px 18px rgba(34, 158, 217, .45); transition: transform .15s, box-shadow .15s, background .15s; }
.sf-support:hover { background: #1b8bc0; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(34, 158, 217, .5); }
.sf-support-icon { flex: 0 0 auto; width: 26px; height: 26px; }
.sf-support-text { white-space: nowrap; }
/* 给底部留出空间，悬浮按钮不会挡住最后一行的「购买」 */
.app-footer { padding-bottom: 72px; }

/* ---- 小屏 ---- */
@media (max-width: 768px) {
  .sf-top { margin: 8px 12px 0; }
  .sf-top[data-state="pending"] { min-height: 200px; }
  .sf-slide { min-height: 118px; padding: 12px 0 28px; }
  .sf-slide-body { padding: 0 20px; }
  .sf-slide-title { font-size: 16px; }
  .sf-slide-sub { font-size: 12px; margin-top: 5px; }
  .sf-nav { display: none; }
  /* 手机：自动发货 / 售后保障 / 链上支付 / 在线客服 四个并成一行（图标在上、标题在下，说明收起），少占页面高度 */
  .sf-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .sf-trust[data-count="5"], .sf-trust[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-trust[data-count="1"] { grid-template-columns: 1fr; }
  .sf-trust[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-trust[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-trust-item { flex-direction: column; justify-content: flex-start; text-align: center; padding: 8px 4px; gap: 5px; }
  .sf-trust-icon { width: 30px; height: 30px; padding: 6px; }
  .sf-trust-body { width: 100%; }
  .sf-trust-title { font-size: 11.5px; line-height: 1.3; }
  .sf-trust-desc { display: none; }
  .sf-bottom { padding: 0 12px 14px; }
  .sf-art-a { width: 150px; height: 150px; }
  .sf-art-b { display: none; }
}
/* 手机：悬浮客服只留圆形图标，省空间 */
@media (max-width: 600px) {
  .sf-support { width: 52px; height: 52px; padding: 0; justify-content: center; border-radius: 50%; inset-inline-end: 12px; }
  .sf-support-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sf-support-icon { width: 30px; height: 30px; }
}
/* 手机上目录页为了留出首屏，会收起说明横幅；公告同理不占太多：保留，但字更小 */
@media (max-width: 480px) { .sf-ann { font-size: 11px; padding: 6px 10px; } }

/* 减少动画偏好：不滚动、不位移 */
@media (prefers-reduced-motion: reduce) {
  .sf-ann-text.is-marquee { animation: none; padding-inline-start: 0; }
  .sf-support, .sf-dot, .sf-chevron { transition: none; }
  .sf-support:hover { transform: none; }
}

/* ---- 深色风格 ---- */
html[data-template-style="dark"] .sf-ann { background: #422006; border-color: #854d0e; color: #fde68a; }
html[data-template-style="dark"] .sf-trust-item,
html[data-template-style="dark"] .sf-card { background: #1e293b; border-color: #334155; }
html[data-template-style="dark"] .sf-trust-icon { background: #172554; color: #93c5fd; }
html[data-template-style="dark"] .sf-trust-title,
html[data-template-style="dark"] .sf-card-title,
html[data-template-style="dark"] .sf-faq-q { color: #f8fafc; }
html[data-template-style="dark"] .sf-trust-desc,
html[data-template-style="dark"] .sf-notice-list,
html[data-template-style="dark"] .sf-faq-a { color: #cbd5e1; }
html[data-template-style="dark"] .sf-faq-item { border-color: #334155; }
html[data-template-style="dark"] .sf-card-icon { color: #60a5fa; }

/* ---- 极简风格：只保留须知、常见问题和客服按钮，去掉公告 / 轮播 / 信任标识 ---- */
html[data-template-style="minimal"] .sf-top { display: none; }

/* ===== 品牌标识 ===== */
.brand-mark { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px; }
.sidebar-logo .brand-mark { width: 26px; height: 26px; }
/* 手机上侧栏收起，顶栏要自己带上品牌图标；电脑上侧栏已经有了 */
.brand-mark-top { display: none; width: 22px; height: 22px; }
@media (max-width: 768px) { .brand-mark-top { display: block; } .topbar-left { gap: 8px; } }

/* ===== 跳到正文（键盘用户）/ 没开 JavaScript ===== */
.sf-skip { position: absolute; inset-inline-start: 8px; top: -48px; z-index: 400; padding: 8px 14px; border-radius: 6px; background: #1d4ed8; color: #fff; font-size: 13px; font-weight: 600; }
.sf-skip:focus { top: 8px; outline: 2px solid #fff; box-shadow: 0 0 0 4px #1d4ed8; }
.noscript { padding: 14px 16px; background: #fef2f2; border-bottom: 1px solid #fecaca; color: #991b1b; font-size: 13px; text-align: center; }
#main-content:focus { outline: none; }

/* ===== 页脚 ===== */
.app-footer { text-align: start; padding: 18px 20px 76px; border-top: 1px solid #e2e8f0; background: #fff; margin-top: auto; font-size: 12px; color: #64748b; }
.foot-top { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; }
.foot-brand { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.foot-brand strong { font-size: 14px; color: #0f172a; }
.foot-tagline { color: #94a3b8; font-size: 11px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-link { padding: 2px 0; font-size: 12px; color: #475569; cursor: pointer; text-decoration: none; }
.foot-link:hover { color: #2563eb; text-decoration: underline; }
.foot-link:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 3px; }
.foot-pay { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 4px 10px; border: 1px solid #e2e8f0; border-radius: 14px; background: #f8fafc; color: #334155; font-size: 11px; font-weight: 600; }
.foot-pay-icon { width: 14px; height: 14px; color: #2563eb; }
.foot-copy { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f1f5f9; color: #94a3b8; font-size: 11px; }
@media (max-width: 768px) { .app-footer { padding: 16px 12px 76px; } }

/* ===== 下单弹窗：信任提示 ===== */
.order-trust { margin-top: 10px; font-size: 11px; line-height: 1.6; color: #64748b; text-align: center; }
.order-trust::before { content: "🔒 "; }

/* ===== 页内弹窗：服务条款、售后与隐私 ===== */
.sf-modal { position: fixed; inset: 0; z-index: 250; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, .5); }
.sf-modal[hidden] { display: none; }
.sf-modal-box { display: flex; flex-direction: column; width: 100%; max-width: 640px; max-height: 88vh; max-height: 88dvh; background: #fff; border-radius: 12px; box-shadow: 0 20px 50px rgba(15, 23, 42, .3); overflow: hidden; outline: none; }
.sf-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #e2e8f0; }
.sf-modal-title { font-size: 15px; font-weight: 700; color: #0f172a; }
.sf-modal-close { flex: 0 0 auto; width: 30px; height: 30px; padding: 7px; border-radius: 6px; color: #64748b; }
.sf-modal-close:hover { background: #f1f5f9; color: #0f172a; }
.sf-modal-close:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
.sf-modal-close-icon { display: block; width: 100%; height: 100%; }
.sf-modal-body { padding: 14px 18px 20px; overflow-y: auto; }
.sf-terms-section + .sf-terms-section { margin-top: 16px; }
.sf-terms-heading { margin-bottom: 6px; font-size: 13px; font-weight: 700; color: #1e293b; }
.sf-terms-list { margin: 0; padding-inline-start: 22px; display: grid; gap: 5px; font-size: 12.5px; line-height: 1.75; color: #475569; }
.sf-terms-list li { overflow-wrap: anywhere; }

html[data-template-style="dark"] .app-footer { background: #1e293b; border-color: #334155; color: #94a3b8; }
html[data-template-style="dark"] .foot-brand strong { color: #f8fafc; }
html[data-template-style="dark"] .foot-link { color: #cbd5e1; }
html[data-template-style="dark"] .foot-pay { background: #0f172a; border-color: #334155; color: #cbd5e1; }
html[data-template-style="dark"] .foot-copy { border-color: #334155; }
html[data-template-style="dark"] .order-trust { color: #94a3b8; }
html[data-template-style="dark"] .sf-modal-box { background: #1e293b; }
html[data-template-style="dark"] .sf-modal-head { border-color: #334155; }
html[data-template-style="dark"] .sf-modal-title,
html[data-template-style="dark"] .sf-terms-heading { color: #f8fafc; }
html[data-template-style="dark"] .sf-terms-list { color: #cbd5e1; }
html[data-template-style="dark"] .sf-modal-close:hover { background: #0f172a; color: #f8fafc; }

@media (prefers-reduced-motion: reduce) { .sf-skip { transition: none; } }