/* 猪猪发卡 v5 买家端皮肤(电脑端 package/shop,Arco Design Vue)
   原包是编译产物,这里只做覆盖:页内元素统一用 #app 前缀压过原有的 scoped 选择器;
   弹窗/消息等挂在 body 下的组件用 html[data-zz] 前缀。 */
html[data-zz] body {
  --zz-bg: #FAF8F5;
  --zz-bg-2: #F4F1EC;
  --zz-line: #ECE7E0;
  --zz-line-2: #E2DCD3;
  --zz-ink: #1D1B2C;
  --zz-ink-2: #4A4759;
  --zz-muted: #8B8698;
  --zz-brand: #3E63DD;
  --zz-brand-d: #3352C2;
  --zz-brand-50: #EEF2FD;
  --zz-brand-100: #DCE4FB;
  --zz-pink-50: #FCEFF2;
  --zz-yellow-50: #FDF6E2;
  --zz-mint: #2E9E78;
  --zz-mint-50: #E6F5EF;
  --zz-coral: #E5544A;
  --zz-sh-1: 0 1px 2px rgba(29, 27, 44, .04), 0 2px 8px rgba(29, 27, 44, .04);
  --zz-sh-2: 0 2px 4px rgba(29, 27, 44, .03), 0 14px 32px -10px rgba(29, 27, 44, .12);
  --zz-sh-3: 0 4px 10px rgba(29, 27, 44, .04), 0 28px 60px -16px rgba(29, 27, 44, .18);
  --zz-ease: cubic-bezier(.2, .7, .2, 1);
  --zz-font: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --zz-mono: "SF Mono", "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;

  /* Arco 主题色(RGB 三元组) */
  --arcoblue-1: 238, 242, 253; --arcoblue-2: 220, 228, 251; --arcoblue-3: 185, 200, 246; --arcoblue-4: 143, 166, 238; --arcoblue-5: 102, 131, 230;
  --arcoblue-6: 62, 99, 221; --arcoblue-7: 51, 82, 194; --arcoblue-8: 42, 67, 161; --arcoblue-9: 33, 52, 128; --arcoblue-10: 24, 38, 94;
  --primary-1: 238, 242, 253; --primary-2: 220, 228, 251; --primary-3: 185, 200, 246; --primary-4: 143, 166, 238; --primary-5: 102, 131, 230;
  --primary-6: 62, 99, 221; --primary-7: 51, 82, 194; --primary-8: 42, 67, 161; --primary-9: 33, 52, 128; --primary-10: 24, 38, 94;
  --link-1: 238, 242, 253; --link-6: 62, 99, 221; --link-7: 51, 82, 194;
  --danger-1: 253, 238, 236; --danger-5: 236, 120, 110; --danger-6: 229, 84, 74; --danger-7: 200, 66, 57;
  --red-6: 229, 84, 74;
  --green-1: 230, 245, 239; --green-6: 46, 158, 120; --success-1: 230, 245, 239; --success-6: 46, 158, 120;
  --orange-1: 253, 244, 226; --orange-6: 205, 135, 30; --warning-1: 253, 244, 226; --warning-6: 205, 135, 30;
  --color-bg-1: #FFFFFF; --color-bg-2: #FFFFFF; --color-bg-3: #FFFFFF; --color-bg-4: #FFFFFF;
  --color-fill-1: #F8F6F2; --color-fill-2: #F4F1EC; --color-fill-3: #ECE7E0; --color-fill-4: #E2DCD3;
  --color-border-1: #F0ECE6; --color-border-2: #ECE7E0; --color-border-3: #E2DCD3; --color-border-4: #D4CDC2;
  --color-text-1: #1D1B2C; --color-text-2: #4A4759; --color-text-3: #8B8698; --color-text-4: #B3AFBC;
  --color-secondary: #F4F1EC; --color-secondary-hover: #ECE7E0;
  --border-radius-small: 6px; --border-radius-medium: 10px; --border-radius-large: 14px;

  font-family: var(--zz-font);
  color: var(--zz-ink);
  background: var(--zz-bg) !important;
  -webkit-font-smoothing: antialiased;
}
html[data-zz] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(720px 420px at 88% -6%, rgba(220, 228, 251, .7), transparent 70%),
    radial-gradient(560px 360px at -4% 18%, rgba(252, 239, 242, .8), transparent 70%);
}
html[data-zz] ::selection { background: var(--zz-brand-100); }
@keyframes zz-rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: none; } }
@keyframes zz-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 通用组件 ---------- */
#app, html[data-zz] .arco-modal, html[data-zz] .arco-drawer, html[data-zz] .arco-message, html[data-zz] .arco-notification, html[data-zz] .arco-trigger-popup { font-family: var(--zz-font); }
#app .main, #app section.arco-layout, #app .layout-content, #app .home, #app .home-wrapper, #app main.arco-layout-content, #app .container, #app .content-wrapper { background: transparent !important; }
#app .arco-btn { border-radius: 10px; font-weight: 600; transition: transform .25s var(--zz-ease), box-shadow .25s var(--zz-ease), background-color .2s, border-color .2s, color .2s; }
#app .arco-btn-primary:not(.arco-btn-disabled) { box-shadow: 0 8px 18px -10px rgba(62, 99, 221, .7); }
#app .arco-btn-primary:not(.arco-btn-disabled):hover { transform: translateY(-1px); box-shadow: 0 12px 22px -10px rgba(62, 99, 221, .7); }
#app .arco-btn-shape-round { border-radius: 999px; }
#app .arco-input-wrapper, #app .arco-select-view, #app .arco-textarea-wrapper, #app .arco-picker,
html[data-zz] .arco-modal .arco-input-wrapper, html[data-zz] .arco-modal .arco-textarea-wrapper, html[data-zz] .arco-modal .arco-select-view {
  border-radius: 12px; background-color: #fff; border: 1px solid var(--zz-line-2); transition: border-color .2s, box-shadow .2s;
}
#app .arco-input-wrapper:hover, #app .arco-select-view:hover, #app .arco-textarea-wrapper:hover { border-color: #CFC8BD; background-color: #fff; }
#app .arco-input-wrapper.arco-input-focus, #app .arco-input-wrapper:focus-within, #app .arco-select-view-focus, #app .arco-textarea-focus,
html[data-zz] .arco-modal .arco-input-wrapper:focus-within {
  border-color: var(--zz-brand) !important; background-color: #fff; box-shadow: 0 0 0 3px var(--zz-brand-100);
}
#app .arco-card { border-radius: 20px; border: 0; background: #fff; box-shadow: 0 0 0 1px var(--zz-line) inset, var(--zz-sh-1); }
#app .arco-card-header { border-bottom: 1px solid var(--zz-line); height: auto; padding: 16px 24px; }
#app .arco-card-header-title { font-weight: 700; font-size: 17px; }
#app .arco-tag { border-radius: 999px; border: 0; font-weight: 600; padding: 0 10px; }
#app .arco-tag-green { color: var(--zz-mint); background: var(--zz-mint-50); }
#app .arco-tag-arcoblue, #app .arco-tag-blue { color: var(--zz-brand); background: var(--zz-brand-50); }
#app .arco-descriptions-border .arco-descriptions-body { border-radius: 14px; border-color: var(--zz-line); overflow: hidden; }
#app .arco-descriptions-border .arco-descriptions-item-label-block { background: var(--zz-bg); color: var(--zz-muted); }
#app .arco-descriptions-border .arco-descriptions-row, #app .arco-descriptions-border .arco-descriptions-item-label-block, #app .arco-descriptions-border .arco-descriptions-item-value { border-color: var(--zz-line); }
#app .arco-divider-horizontal { border-bottom-color: var(--zz-line); }
#app .arco-collapse-item-header { background: transparent; border: 0; color: var(--zz-muted); transition: color .2s; }
#app .arco-collapse-item-header:hover { color: var(--zz-brand); }
#app .arco-collapse-item-content { background: var(--zz-bg); border-radius: 12px; }
#app .arco-tabs-nav::before { background-color: var(--zz-line); }
#app .arco-tabs-nav-ink { background: var(--zz-brand) !important; border-radius: 2px; height: 3px; }
#app .arco-checkbox-checked .arco-checkbox-icon, #app .arco-radio-checked .arco-radio-button { background-color: var(--zz-brand); border-color: var(--zz-brand); }
#app .arco-checkbox-icon { border-radius: 5px; }
#app .arco-result-title { font-weight: 700; color: var(--zz-ink); }
#app .arco-result-icon-tip { border-radius: 18px; }
#app .arco-empty-description { color: var(--zz-muted); }
#app .arco-table-container { border-radius: 14px; border-color: var(--zz-line); }
#app .arco-table-th { background: var(--zz-bg); color: var(--zz-muted); font-weight: 600; }
#app .arco-table-td { border-bottom-color: var(--zz-line); }
#app .arco-form-item-label-col > .arco-form-item-label { color: var(--zz-ink-2); font-weight: 600; }
#app .arco-form .arco-btn-primary { height: 42px; padding: 0 30px; border-radius: 999px; font-size: 15px; }
#app .arco-upload-picture-card { border-radius: 14px; background: var(--zz-bg); border: 1px dashed var(--zz-line-2); transition: border-color .2s, background-color .2s; }
#app .arco-upload-picture-card:hover { border-color: var(--zz-brand); background: var(--zz-brand-50); }
#app .arco-input-number-mode-button .arco-input-number-step-button { border-radius: 10px; background: var(--zz-bg); border-color: var(--zz-line-2); }
#app .arco-spin-mask { background: rgba(250, 248, 245, .6); }
html[data-zz] .arco-modal { border-radius: 22px; box-shadow: var(--zz-sh-3); }
html[data-zz] .arco-modal-header { border-bottom: 0; height: auto; padding: 22px 24px 4px; }
html[data-zz] .arco-modal-title { font-weight: 700; font-size: 17px; }
html[data-zz] .arco-modal-footer { border-top: 0; padding: 4px 24px 22px; }
html[data-zz] .arco-modal .arco-btn { border-radius: 10px; font-weight: 600; }
html[data-zz] .arco-modal-mask { background: rgba(29, 27, 44, .35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html[data-zz] .arco-message { border-radius: 12px; border: 0; box-shadow: 0 0 0 1px var(--zz-line) inset, var(--zz-sh-2); padding: 10px 16px; }
html[data-zz] .arco-notification { border-radius: 16px; border: 0; box-shadow: 0 0 0 1px var(--zz-line) inset, var(--zz-sh-3); }
html[data-zz] .arco-popover-popup-content, html[data-zz] .arco-dropdown, html[data-zz] .arco-trigger-popup .arco-popover-content { border-radius: 14px; border-color: var(--zz-line); box-shadow: var(--zz-sh-2); }

/* ---------- 顶栏 ---------- */
#app .header { background: rgba(250, 248, 245, .82); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--zz-line); }
#app .header .controller { box-shadow: none; padding: 0 max(24px, calc((100vw - 1200px) / 2)); }
#app .header .wrapper { height: 64px; }
#app .header .wrapper > a:first-child { display: inline-flex; align-items: center; gap: 10px; flex: none; }
#app .header img.logo { content: url(/assets/zzfk/mark.webp); width: 36px !important; height: 36px !important; transition: transform .5s var(--zz-ease); }
#app .header .wrapper > a:first-child::after { content: "猪猪发卡"; font-weight: 800; font-size: 18px; letter-spacing: .02em; color: var(--zz-ink); white-space: nowrap; }
#app .header .wrapper > a:first-child:hover img.logo { transform: rotate(-8deg) scale(1.06); }
#app .header .munu { padding-left: 28px; gap: 2px; }
#app .header .munu a { position: relative; margin: 0; padding: 8px 12px; border-radius: 10px; color: var(--zz-ink-2); font-size: 15px; transition: color .2s; }
#app .header .munu a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--zz-brand); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--zz-ease); }
#app .header .munu a:hover { color: var(--zz-ink); }
#app .header .munu a:hover::after, #app .header .munu a.active::after, #app .header .munu a.router-link-active::after { transform: scaleX(1); }
#app .header .header-right { margin-right: 0; }
#app .header .header-right .arco-btn { height: 38px; padding: 0 18px; font-size: 14px; }
#app .header_box { height: 64px; }

/* ---------- 店铺页 ---------- */
#app .purchasing_sp { width: min(1140px, 100% - 48px); padding-top: 92px; padding-bottom: 40px; animation: zz-fade .5s var(--zz-ease) both; }
#app .purchasing_sp .hide_box {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px;
  padding: 28px 32px 24px; border-radius: 24px; overflow: hidden; isolation: isolate;
  background: #fff; box-shadow: 0 0 0 1px var(--zz-line) inset, var(--zz-sh-2);
  animation: zz-rise .7s var(--zz-ease) both;
}
#app .purchasing_sp .hide_box::before { content: ""; position: absolute; inset: 0 0 auto; height: 70px; z-index: -1; background: linear-gradient(100deg, var(--zz-brand-50), var(--zz-pink-50) 55%, var(--zz-yellow-50)); }
#app .purchasing_sp .hide_box .shanghu { width: 76px; height: 76px; margin: 22px 0 0; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 4px #fff, var(--zz-sh-2); transition: transform .5s var(--zz-ease); margin-top: 14px; }
#app .purchasing_sp .hide_box .shanghu:hover { transform: rotate(-6deg) scale(1.04); }
#app .purchasing_sp .hide_box .sh_info { margin: 50px 0 0; }
#app .purchasing_sp .hide_box .sh_info .sh_names .name { font-size: 22px; font-weight: 800; color: var(--zz-ink); }
#app .purchasing_sp .hide_box .sh_lxfs { margin-top: 8px; }
#app .purchasing_sp .hide_box .sh_lxfs .arco-btn { height: 28px; padding: 0 12px; border-radius: 999px; border: 0; font-size: 12px; background: var(--zz-bg); color: var(--zz-ink-2); box-shadow: 0 0 0 1px var(--zz-line) inset; }
#app .purchasing_sp .hide_box .sh_lxfs .arco-btn:hover { background: #fff; color: var(--zz-brand); box-shadow: 0 0 0 1px var(--zz-brand-100) inset, var(--zz-sh-1); }
#app .purchasing_sp .hide_box .sh_lxfs .arco-btn-status-success { background: var(--zz-mint-50); color: var(--zz-mint); box-shadow: none; }
#app .purchasing_sp .hide_box .gonggao { flex: 1 0 100%; margin: 20px 0 0; padding: 14px 18px; border-radius: 14px; font-size: 14px; line-height: 1.7; color: var(--zz-ink-2); background: var(--zz-yellow-50); box-shadow: 0 0 0 1px #F3E3B4 inset; }
#app .purchasing_sp .hide_box .gonggao span:first-child { font-weight: 700; color: #9A6B12; margin-bottom: 2px; }

#app .purchasing_sp .fl_box { margin-top: 20px; padding: 8px 8px 0; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--zz-line) inset, var(--zz-sh-1); animation: zz-rise .7s var(--zz-ease) .08s both; }
#app .purchasing_sp .fl_box .content-tabs { width: 100%; padding: 16px 20px 8px; }
#app .content-tabs .arco-tabs-tab-title { font-size: 17px; font-weight: 700; color: var(--zz-ink); }
#app .content-tabs .arco-tabs-nav-extra .arco-input-wrapper { height: 38px; border-radius: 999px; background: var(--zz-bg); border-color: var(--zz-line); width: 240px; }
#app .page_content { background: transparent; }
#app .page_content .fl_box_xz { margin: 8px 0 18px; }
#app .page_content .fl_box_xz .fl_box_leng {
  height: auto; min-width: 168px; margin: 0 12px 12px 0; padding: 14px 40px 14px 18px;
  border-radius: 16px; background: var(--zz-bg); border: 1px solid var(--zz-line);
  transition: border-color .25s, background-color .25s, translate .3s var(--zz-ease), box-shadow .3s var(--zz-ease);
}
#app .page_content .fl_box_xz .fl_box_leng:hover { border-color: var(--zz-brand-100); background: #fff; translate: 0 -2px; box-shadow: var(--zz-sh-1); }
#app .page_content .fl_box_xz .fl_box_leng div:first-child { margin-top: 0; font-size: 14px; font-weight: 600; color: var(--zz-ink); }
#app .page_content .fl_box_xz .fl_box_leng div:nth-child(2) { margin-top: 4px; opacity: 1; color: var(--zz-muted); }
#app .page_content .fl_box_xz .fl_box_leng .dui { display: none; }
#app .page_content .fl_box_xz .fl_box_leng::after { content: ""; position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--zz-line-2) inset; transition: background-color .25s, box-shadow .25s; }
#app .page_content .fl_box_xz .fl_box_leng_xz { background: var(--zz-brand-50); border-color: var(--zz-brand); box-shadow: 0 0 0 1px var(--zz-brand) inset; }
#app .page_content .fl_box_xz .fl_box_leng_xz:hover { background: var(--zz-brand-50); border-color: var(--zz-brand); }
#app .page_content .fl_box_xz .fl_box_leng_xz div:first-child { color: var(--zz-ink); }
#app .page_content .fl_box_xz .fl_box_leng_xz div:nth-child(2) { color: var(--zz-brand); }
#app .page_content .fl_box_xz .fl_box_leng_xz::after { background: var(--zz-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10 16.5 18 8'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: none; }
#app .page_content .goods_box { width: 100%; padding: 22px 0 8px; border: 0; border-top: 1px solid var(--zz-line); }
#app .page_content .goods_box .goods_hide { margin: 0 0 14px; color: var(--zz-muted); font-size: 13px; font-weight: 600; letter-spacing: .08em; }
#app .goods_content ._index .list .goods_item {
  border: 0; border-radius: 18px; background: radial-gradient(280px circle at var(--mx, -400px) var(--my, -400px), rgba(62, 99, 221, .075), transparent 65%), #fff;
  box-shadow: 0 0 0 1px var(--zz-line) inset, var(--zz-sh-1);
  animation: zz-rise .6s var(--zz-ease) both; animation-delay: calc(var(--zz-i, 0) * 50ms);
  transition: translate .35s var(--zz-ease), box-shadow .35s var(--zz-ease), opacity .3s;
}
#app .goods_content ._index .list .goods_item:hover { translate: 0 -4px; box-shadow: 0 0 0 1.5px var(--zz-brand-100) inset, var(--zz-sh-2); }
#app .goods_content ._index .list .goods_item .image { border-radius: 18px 18px 0 0; }
#app .goods_content ._index .list .goods_item .image img { transition: transform .6s var(--zz-ease); }
#app .goods_content ._index .list .goods_item:hover .image img { transform: scale(1.05); }
#app .goods_content ._index .list .goods_item .info { padding: 16px 18px; }
#app .goods_content ._index .list .goods_item .info .name { margin-top: 0; font-size: 15px; font-weight: 600; color: var(--zz-ink); }
#app .goods_content ._index .list .goods_item .info .subinfo { margin: 14px 0 0; }
#app .goods_content ._index .list .goods_item .info .subinfo .goods-price { color: var(--zz-coral); align-items: baseline; }
#app .goods_content ._index .list .goods_item .info .subinfo .goods-price .currency { font-size: 13px; font-weight: 700; margin-right: 1px; }
#app .goods_content ._index .list .goods_item .info .subinfo .goods-price .nowPrice { font-family: var(--zz-font); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
#app .goods_content ._index .list .goods_item .info .subinfo .discounts .stock { padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--zz-mint); background: var(--zz-mint-50); }
#app .goods_content ._index .list .goods_item .info .subinfo .discounts .stock.rank0 { color: var(--zz-coral); background: #FDEEEC; }
#app .goods_content ._index .list .goods_item .info .subinfo .discounts .stock.rank5 { color: #B8790F; background: var(--zz-yellow-50); }
#app .footer-extra { padding: 22px; }
#app .footer-extra .pointer { display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border-radius: 999px; color: var(--zz-ink-2); background: var(--zz-bg); box-shadow: 0 0 0 1px var(--zz-line) inset; transition: background-color .2s, color .2s; }
#app .footer-extra .pointer:hover { background: #fff; color: var(--zz-brand); }

#app footer .j-site-footer-bottom { width: min(1140px, 100% - 48px); margin: 0 auto; padding: 28px 0 36px; justify-content: center; }
#app footer .j-site-footer-btn { border: 0; background: transparent; color: var(--zz-muted); }
#app footer .j-site-footer-copyright, #app footer .j-site-footer-copyright a { color: var(--zz-muted); }

/* ---------- 商品购买页 ---------- */
#app .main > .arco-spin { padding-bottom: 120px; }
#app .app-detail { width: 820px; margin-top: 28px; padding: 32px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px var(--zz-line) inset, var(--zz-sh-2); animation: zz-rise .7s var(--zz-ease) both; }
#app .app-detail .detail-header { background: transparent; }
#app .app-detail .detail-header .detail-header-info .header-left .header-left-info { margin-left: 0; }
#app .app-detail .detail-header .detail-header-info .header-left .header-left-info .info-title { font-size: 28px; line-height: 1.3; font-weight: 800; letter-spacing: -.01em; color: var(--zz-ink); max-height: none; }
#app .app-detail .detail-header .detail-header-info .header-left .header-left-info .info-sale .info-price .real { color: var(--zz-coral); font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
#app .app-detail .detail-header .detail-header-info .header-left .header-left-info .info-sale .info-price .real span { font-size: 18px; margin-right: 2px; }
#app .app-detail .shopkeeper { padding: 16px 18px; border-radius: 16px; background: var(--zz-bg); box-shadow: 0 0 0 1px var(--zz-line) inset; }
#app .app-detail .shopkeeper .nickname { font-weight: 700; color: var(--zz-ink); }
#app .app-detail .shopkeeper .arco-avatar { box-shadow: 0 0 0 3px #fff; }
#app .app-detail .description .title { font-weight: 700; color: var(--zz-ink); }
#app .app-detail .use_box { border-color: var(--zz-line); }
#app .app-detail .contact_box .arco-input-wrapper { height: 44px; width: 320px; }
:is(#app .app-detail, html[data-zz] body #confirm_order_number) .pay_type .arco-radio-group { display: flex; flex-wrap: wrap; gap: 12px; }
:is(#app .app-detail, html[data-zz] body #confirm_order_number) .pay_type .arco-radio { margin: 0; }
:is(#app .app-detail, html[data-zz] body #confirm_order_number) .pay_type .pay_type_leng {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 140px; height: 52px; border-radius: 14px; border: 0; background: #fff; color: var(--zz-ink-2); font-weight: 600;
  box-shadow: 0 0 0 1px var(--zz-line-2) inset; transition: box-shadow .25s, background-color .25s, translate .3s var(--zz-ease);
}
:is(#app .app-detail, html[data-zz] body #confirm_order_number) .pay_type .pay_type_leng span { color: inherit; font-size: 14px; }
:is(#app .app-detail, html[data-zz] body #confirm_order_number) .pay_type .pay_type_leng:hover { translate: 0 -2px; box-shadow: 0 0 0 1px #CFC8BD inset, var(--zz-sh-1); }
:is(#app .app-detail, html[data-zz] body #confirm_order_number) .pay_type .pay_type_leng_xz { background: var(--zz-brand-50); color: var(--zz-ink); box-shadow: 0 0 0 1.5px var(--zz-brand) inset; }
:is(#app .app-detail, html[data-zz] body #confirm_order_number) .pay_type .pay_type_leng_xz::after { content: ""; position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--zz-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10 16.5 18 8'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: 0 0 0 2px #fff; animation: zz-pop .35s var(--zz-ease); }
@keyframes zz-pop { from { transform: scale(.4); opacity: 0; } }
#app .app-detail .fixed_box { animation: zz-rise .7s var(--zz-ease) .1s both; }
#app .app-detail .fixed_box .qr_code_pc, #app .app-detail .fixed_box .goods_share { border-radius: 20px; border: 0; background: #fff; box-shadow: 0 0 0 1px var(--zz-line) inset, var(--zz-sh-1); }
#app .app-detail .fixed_box .goods_share { transition: translate .3s var(--zz-ease), box-shadow .3s; }
#app .app-detail .fixed_box .goods_share:hover { translate: 0 -2px; box-shadow: 0 0 0 1px var(--zz-line-2) inset, var(--zz-sh-2); }
#app .app-detail .fixed_box .qr_code_pc .user .btn.btn1 { border-radius: 999px; background: var(--zz-brand-50); color: var(--zz-brand); }
#app .app-detail .fixed_box hr { border: 0; border-top: 1px solid var(--zz-line); }
#app footer.app-footer { height: 76px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 -1px 0 var(--zz-line), 0 -12px 32px -16px rgba(29, 27, 44, .14); animation: zz-rise .6s var(--zz-ease) .2s both; }
#app footer.app-footer .controller { width: 820px; height: 76px; padding: 0 8px; }
#app footer.app-footer .goods-price { color: var(--zz-coral); align-items: baseline; }
#app footer.app-footer .goods-price .currency { font-size: 15px; font-weight: 700; }
#app footer.app-footer .goods-price .nowPrice { font-family: var(--zz-font); font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
#app footer.app-footer .arco-input-number { border-radius: 12px; overflow: hidden; }
#app footer.app-footer .arco-input-number .arco-input-wrapper { border-radius: 0; border-left: 0; border-right: 0; }
#app footer.app-footer .arco-btn-primary { height: 46px; padding: 0 30px; border-radius: 999px; font-size: 16px; }

/* 订单确认弹窗(店铺页点商品后弹出) */
html[data-zz] .confirm_order { border-radius: 24px; }
html[data-zz] .confirm_order .arco-modal-header { padding-top: 24px; }
html[data-zz] .confirm_order .arco-modal-title { font-size: 18px; font-weight: 800; }
html[data-zz] body #confirm_order_number .pr_name_box { padding-bottom: 14px; border-color: var(--zz-line); }
html[data-zz] body #confirm_order_number .pr_name { font-size: 20px; font-weight: 800; color: var(--zz-ink); }
html[data-zz] body #confirm_order_number .shuliang { color: var(--zz-muted); font-weight: 600; }
html[data-zz] body #confirm_order_number .arco-tag { border-radius: 999px; border: 0; font-weight: 600; }
html[data-zz] body #confirm_order_number .arco-tag-green { color: var(--zz-mint); background: var(--zz-mint-50); }
html[data-zz] body #confirm_order_number .arco-tag-arcoblue { color: var(--zz-brand); background: var(--zz-brand-50); }
html[data-zz] body #confirm_order_number .use_box { border-color: var(--zz-line); }
html[data-zz] body #confirm_order_number .contact_box .arco-input-wrapper { height: 42px; }
html[data-zz] #confirm_order_number .price_box .price_info .goods-price .left { color: var(--zz-coral); }
html[data-zz] #confirm_order_number .price_box .price_info .goods-price .left .nowPrice { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
html[data-zz] body #confirm_order_number .arco-input-number { border-radius: 12px; overflow: hidden; }
html[data-zz] body #confirm_order_number .arco-input-number-step-button { background: var(--zz-bg); border-color: var(--zz-line-2); }
html[data-zz] body #confirm_order_number .btn_box .arco-btn { height: 42px; padding: 0 22px; border-radius: 999px; font-weight: 600; }
html[data-zz] body #confirm_order_number .btn_box .arco-btn-primary { padding: 0 30px; box-shadow: 0 8px 18px -8px rgba(62, 99, 221, .7); }
html[data-zz] body #confirm_order_number .btn_box .arco-btn-primary:hover { background-color: var(--zz-brand-d); }
html[data-zz] body #confirm_order_number .btn_box .arco-btn:not(.arco-btn-primary) { background: #fff; color: var(--zz-ink-2); box-shadow: 0 0 0 1px var(--zz-line-2) inset; }

/* ---------- 订单查询 ---------- */
#app .order-page { background: none; min-height: calc(100vh - 64px); }
#app .general-card, #app .container .general-card { background: transparent; box-shadow: none; }
#app .order-page .order-page--search { width: min(640px, 100%); margin: 72px auto 60px; animation: zz-rise .7s var(--zz-ease) both; }
#app .order-page .order-page--search > p:nth-child(1) { font-family: var(--zz-font); font-size: 36px; font-weight: 800; letter-spacing: -.01em; color: var(--zz-ink); line-height: 1.3; }
#app .order-page .order-page--search > p:nth-child(1)::before { content: ""; display: block; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 20px; background: #fff url(/assets/zzfk/mark.webp) center / 46px no-repeat; box-shadow: 0 0 0 1px var(--zz-line) inset, var(--zz-sh-2); }
#app .order-page .order-page--search > p:nth-child(2) { margin: 12px auto 36px; font-size: 16px; color: var(--zz-ink-2); }
#app .order-page .order-page--search .box { gap: 0; padding: 6px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--zz-line-2) inset, var(--zz-sh-2); transition: box-shadow .25s; }
#app .order-page .order-page--search .box:focus-within { box-shadow: 0 0 0 1.5px var(--zz-brand) inset, 0 0 0 5px var(--zz-brand-100), var(--zz-sh-2); }
#app .order-page .order-page--search .box .arco-input-wrapper { flex: 1; height: 46px; border: 0 !important; box-shadow: none !important; background: transparent; padding-left: 18px; }
#app .order-page .order-page--search .box .arco-input { font-size: 16px; }
#app .order-page .order-page--search .box .arco-btn { height: 46px; padding: 0 26px; border-radius: 999px; font-size: 15px; }
#app .order-page .tips { margin-top: 22px; padding: 0 8px; font-size: 13px; line-height: 1.7; color: var(--zz-muted); }
#app .order-page .anti-fraud-tips { margin-top: 18px; padding: 18px 22px; border-radius: 18px; background: #FFFCF4; box-shadow: 0 0 0 1px #F3E3B4 inset; }
#app .order-page .anti-fraud-tips .anti-fraud-title { color: #9A6B12; font-size: 14px; }
#app .order-page .anti-fraud-tips .anti-fraud-content { color: var(--zz-ink-2); font-size: 13px; }
#app .order-page .anti-fraud-tips .anti-fraud-content p { line-height: 1.9 !important; margin: 0; }
#app .order-page .contact-list .contact-list-item { border-radius: 999px; background: #fff; border-color: var(--zz-line-2); }

/* 订单详情 / 结果 / 售后 等通用卡片页 */
#app .content > .arco-card, #app .content-wrapper > .arco-card, #app .container > .arco-card { animation: zz-rise .6s var(--zz-ease) both; }
#app .content .card-header { border-radius: 22px; }

/* ---------- 订单结果页(拿卡密) ---------- */
#app .page-content .order-info, #app .page-content .cards, #app .page-content .instructions, #app .page-content .question {
  margin: 0 0 14px; padding: 20px 22px; border-radius: 20px; background: #fff;
  box-shadow: 0 0 0 1px var(--zz-line) inset, var(--zz-sh-1); animation: zz-rise .55s var(--zz-ease) both;
}
#app .page-content .cards { animation-delay: .06s; box-shadow: 0 0 0 1px #F0E2B8 inset, var(--zz-sh-2); background: linear-gradient(180deg, #FFFDF7, #fff 60%); }
#app .page-content .instructions { animation-delay: .12s; }
#app .page-content .question { animation-delay: .18s; }
#app .page-content .order-info > .header, #app .page-content .cards > .header, #app .page-content .instructions > .header, #app .page-content .question > .header {
  display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; background: none; font-size: 16px; font-weight: 700; color: var(--zz-ink);
}
#app .page-content .header svg { width: 22px; height: 22px; }
#app .page-content .header svg [fill="#2275ff"] { fill: var(--zz-brand); }
#app .page-content .header svg [stroke="#2275ff"] { stroke: var(--zz-brand); }
#app .page-content .order-info .desc-label { color: var(--zz-muted); }
#app .page-content .order-info .desc-value { color: var(--zz-ink); font-weight: 500; }
#app .page-content .cards > .header { justify-content: space-between; flex-wrap: wrap; row-gap: 10px; }
#app .page-content .cards > .header .left { display: flex; align-items: center; gap: 8px; font-weight: 700; }
#app .page-content .cards .content { display: grid; gap: 10px; }
#app .page-content .cards .item { margin: 0; padding: 14px 16px; border-radius: 14px; background: #FFFCF4; box-shadow: 0 0 0 1px #F3E3B4 inset; animation: zz-rise .5s var(--zz-ease) both; animation-delay: calc(.12s + var(--zz-i, 0) * 60ms); }
#app .page-content .cards .item:not(:has(.item-top)) { background: var(--zz-bg); box-shadow: 0 0 0 1px var(--zz-line) inset; color: var(--zz-muted); font-size: 13px; }
#app .page-content .cards .item-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
#app .page-content .cards .item-top .title { font-size: 12px; font-weight: 600; color: #9A6B12; }
#app .page-content .cards .item:has(.item-top) .item-content { font-family: "SF Mono", "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace; font-size: 17px; font-weight: 700; letter-spacing: .03em; color: var(--zz-ink); word-break: break-all; user-select: all; -webkit-user-select: all; line-height: 1.5; }
#app .page-content .seller-contact-box { display: grid; gap: 8px; }
#app .page-content .seller-contact-item { padding: 8px 12px; border-radius: 12px; background: var(--zz-bg); box-shadow: 0 0 0 1px var(--zz-line) inset; }
#app .page-content .seller-contact-item .copy-action, #app .page-content .seller-contact-item .value.link { color: var(--zz-brand); }
#app .page-content .instructions .content { color: var(--zz-ink-2); line-height: 1.8; }
#app .content:has(.order-info) { max-width: 880px; margin: 28px auto 0; }
#app .content:has(.order-info) > .card-header { background: transparent; box-shadow: none; animation: none; }
#app .content:has(.order-info) > .card-header > .arco-card-header { border: 0; padding: 0 4px 16px; }
#app .content:has(.order-info) > .card-header .arco-card-header-title { font-size: 22px; font-weight: 800; }
#app .content:has(.order-info) > .card-header > .arco-card-body { padding: 0; }
#app .page-content .cards > .header .arco-btn { height: 34px; padding: 0 16px; border-radius: 999px; font-size: 13px; }
#app .page-content .cards > .header .arco-btn:first-child { background: var(--zz-brand); color: #fff; box-shadow: 0 8px 16px -10px rgba(62, 99, 221, .8); }
#app .page-content .cards > .header .arco-btn:first-child:hover { background: var(--zz-brand-d); }
#app .page-content .cards > .header .arco-btn + .arco-btn { margin-left: 8px; background: #fff; color: var(--zz-ink-2); box-shadow: 0 0 0 1px var(--zz-line-2) inset; }
#app .page-content .cards .copy-btn { height: 26px; padding: 0 12px; border-radius: 999px; background: #fff; color: var(--zz-brand); font-size: 12px; box-shadow: 0 0 0 1px var(--zz-brand-100) inset; }
#app .page-content .cards .copy-btn:hover { background: var(--zz-brand); color: #fff; }
#app .page-content .order-info .content { display: grid; gap: 10px; }
#app .page-content .apply-after-sale, #app .page-content .question .arco-btn { border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  @keyframes zz-rise { from { opacity: 0; } to { opacity: 1; } }
  @keyframes zz-pop { from { opacity: 0; } }
}

/* v5 store shortcuts and restrained header background */
.zz-store-actions { position:fixed;right:18px;bottom:28px;z-index:45;display:flex;flex-direction:column;gap:7px;padding:9px;border:1px solid #ece7e0;border-radius:20px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);box-shadow:0 10px 32px #24203514; }
.zz-store-actions > a,.zz-store-actions > button { display:block;box-sizing:border-box;min-width:112px;padding:10px 13px;border:0;border-radius:12px;background:transparent;color:#4a4759;text-decoration:none;text-align:center;font:600 13px/1.4 system-ui,sans-serif;cursor:pointer; }
.zz-store-actions > a:hover,.zz-store-actions > button:hover { background:#eef2fd;color:#3e63dd; }
.zz-store-actions > [hidden] { display:none !important; }
.zz-store-actions #zz-platform-support { position:static;right:auto;bottom:auto;box-shadow:none;border-radius:12px;background:#eef2fd;color:#3e63dd !important; }
.zz-store-actions :focus-visible { outline:3px solid #acbbed;outline-offset:2px; }
.zz-store-route .fx-top { display:none !important; }
#app .zz-ambient-header { position:relative;isolation:isolate; }
.zz-ambient-layer { position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none;background:#faf8f5; }
.zz-ambient-layer::before { content:'';position:absolute;inset:-25%;background:radial-gradient(ellipse at 18% 24%,#dce4fb80,transparent 50%),radial-gradient(ellipse at 80% 20%,#fbe3e880,transparent 48%),radial-gradient(ellipse at 50% 88%,#fbf0d480,transparent 46%);animation:zz-ambient-drift 18s ease-in-out infinite alternate; }
@keyframes zz-ambient-drift { from { translate:-1% 0;opacity:.6; } to { translate:2% 1%;opacity:.9; } }
.zz-store-static .zz-ambient-layer::before { animation:none; }
@media(max-width:600px) { .zz-store-actions { right:10px;bottom:calc(112px + env(safe-area-inset-bottom,0px));padding:6px;gap:2px;border-radius:16px; }.zz-store-actions > a,.zz-store-actions > button { min-width:95px;padding:9px 10px;font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .zz-ambient-layer::before { animation:none; } }

/* v5.8 手机端店铺快捷栏:平时只露一个"服务"圆按钮,点开从下往上展开成一列胶囊(电脑端面板常驻,开关隐藏) */
.zz-store-actions > .zz-store-toggle { display:none; }
@media(max-width:600px) {
  .zz-store-actions { right:12px;bottom:calc(112px + env(safe-area-inset-bottom,0px));padding:0;gap:8px;align-items:flex-end;border:0;border-radius:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none; }
  .zz-store-actions:not(.is-open) > :not(.zz-store-toggle) { display:none !important; }
  .zz-store-actions.is-open > a,.zz-store-actions.is-open > button:not(.zz-store-toggle) {
    min-width:0;padding:10px 16px;border-radius:999px;background:#fff;color:#4a4759;font-size:13px;white-space:nowrap;
    box-shadow:0 0 0 1px #ece7e0,0 10px 22px -12px #1d1b2c66;animation:zz-dial .26s cubic-bezier(.2,.7,.2,1) both;
  }
  .zz-store-actions.is-open #zz-platform-support { background:#eef2fd;color:#3e63dd !important;box-shadow:0 0 0 1px #dce4fb,0 10px 22px -12px #1d1b2c66; }
  /* 开关的字和图标始终是白色(触屏点过以后旧样式的悬停会把字染成蓝色) */
  .zz-store-actions > .zz-store-toggle, .zz-store-actions > .zz-store-toggle:hover { color:#fff; }
  .zz-store-actions.is-open > :nth-last-child(2) { animation-delay:.02s; }
  .zz-store-actions.is-open > :nth-last-child(3) { animation-delay:.05s; }
  .zz-store-actions.is-open > :nth-last-child(4) { animation-delay:.08s; }
  .zz-store-actions.is-open > :nth-last-child(5) { animation-delay:.11s; }
  .zz-store-actions > .zz-store-toggle {
    display:inline-flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:54px;height:54px;padding:0;border:0;border-radius:50%;cursor:pointer;
    color:#fff;background:linear-gradient(140deg,#3e63dd,#6d86e8);box-shadow:0 12px 24px -10px #3e63ddcc;font:700 10px/1 system-ui,sans-serif;
  }
  .zz-store-actions > .zz-store-toggle:hover { background:linear-gradient(140deg,#3e63dd,#6d86e8); }
  .zz-store-toggle svg { width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
  .zz-store-toggle .zz-i-close, .zz-store-actions.is-open .zz-store-toggle .zz-i-open { display:none; }
  .zz-store-actions.is-open .zz-store-toggle .zz-i-close { display:inline; }
  .zz-store-actions.is-open > .zz-store-toggle, .zz-store-actions.is-open > .zz-store-toggle:hover { background:#1d1b2c;box-shadow:0 12px 24px -12px #1d1b2c99; }
  .zz-store-toggle:focus-visible { outline:3px solid #acbbed;outline-offset:3px; }
  /* 页面底部留出按钮的位置,滚到最下面时内容不被挡住 */
  html.zz-store-route body { padding-bottom:84px; }
}
@keyframes zz-dial { from { opacity:0;translate:0 8px;scale:.96; } }
@media(prefers-reduced-motion:reduce) { @keyframes zz-dial { from { opacity:0; } } }

/* v5.9 店头默认动效:流光背景、闪烁小星、漂浮字块(与首页同款)、头像彩环、店名流光、选中分类/商品卡片扫光、库存呼吸点。
   只动 opacity / translate / rotate / scale 和渐变位置;"减少动画"时换成只变明暗和颜色的柔和版本(在文件末尾);
   店铺自带画布特效(星空/雪花等)或页面切到后台时暂停(html.zz-store-static,由 shop.js 切换) */
@property --zz-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.zz-ambient-layer { background: #fff; }
.zz-ambient-layer::before {
  inset: auto; left: 64%; top: 30%; width: max(130%, 620px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: .95;
  background: conic-gradient(from 0deg, #d3ddfb, #fbdde5, #fbedc8, #d6efe4, #e2dafb, #d3ddfb); filter: blur(48px);
  animation: zz-aurora 32s linear infinite;
}
.zz-ambient-layer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .85) 96%); }
@keyframes zz-aurora { to { rotate: 360deg; } }
.zz-spark, .zz-tile { position: absolute; z-index: 1; left: var(--x); top: var(--y); }
.zz-c-b { color: #3e63dd; } .zz-c-p { color: #d86a80; } .zz-c-y { color: #c8921f; } .zz-c-m { color: #2e9e78; }
.zz-spark { width: var(--s); height: var(--s); background: currentColor; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); opacity: .15; animation: zz-twinkle 3.4s ease-in-out var(--d) infinite; }
@keyframes zz-twinkle { 0%, 100% { opacity: .12; scale: .5; rotate: 0deg; } 50% { opacity: .8; scale: 1; rotate: 45deg; } }
.zz-tile {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; font: 800 17px/1 var(--zz-font, system-ui);
  background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 1px rgba(29, 27, 44, .05) inset, 0 12px 26px -14px rgba(29, 27, 44, .3);
  rotate: var(--r); animation: zz-tile-in .9s cubic-bezier(.34, 1.56, .64, 1) .25s both, zz-tile-float 7s ease-in-out var(--d) infinite;
}
.zz-tile:nth-of-type(2) { animation-delay: .35s, var(--d); }
.zz-tile:nth-of-type(3) { animation-delay: .45s, var(--d); }
@keyframes zz-tile-in { from { opacity: 0; scale: .6; } }
@keyframes zz-tile-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes zz-ring { to { --zz-ang: 360deg; } }
@keyframes zz-name { 0%, 62% { background-position: 100% 0; } 92%, 100% { background-position: 0 0; } }
@keyframes zz-sheen { 0% { translate: -100% 0; } 22%, 100% { translate: 100% 0; } }
/* 商品卡片:一道淡彩光按卡片顺序依次扫过(只前 12 张,卡片是瀑布流绝对定位,不碰卡片本身的 transform) */
#app :is(.goods_item, .goods-item)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 0 30%, rgba(220, 228, 251, .55) 46%, rgba(251, 221, 229, .45) 54%, transparent 70% 100%) -150% 0 / 60% 100% no-repeat;
  animation: zz-card-sheen 9s ease-in-out calc(1.2s + var(--zz-i, 0) * .22s) infinite;
}
#app :is(.goods_item, .goods-item):nth-child(n+13)::after { content: none; }
@keyframes zz-card-sheen { 0% { background-position: -150% 0; } 14%, 100% { background-position: 250% 0; } }
/* 库存标签前的呼吸点:充足=绿、紧张=黄(更快)、售罄=红(不动) */
#app :is(.goods_item, .goods-item) .stock { --zz-live: 46, 158, 120; }
#app :is(.goods_item, .goods-item) .stock.rank5 { --zz-live: 184, 121, 15; }
#app :is(.goods_item, .goods-item) .stock.rank0 { --zz-live: 229, 84, 74; }
#app :is(.goods_item, .goods-item) .stock::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; vertical-align: 1px; background: rgb(var(--zz-live)); animation: zz-live 2s ease-out infinite; }
#app :is(.goods_item, .goods-item) .stock.rank5::before { animation-duration: 1.2s; }
#app :is(.goods_item, .goods-item) .stock.rank0::before { animation: none; opacity: .7; }
@keyframes zz-live { 0% { box-shadow: 0 0 0 0 rgba(var(--zz-live), .5); } 80%, 100% { box-shadow: 0 0 0 5px rgba(var(--zz-live), 0); } }
.zz-store-static :is(.zz-spark, .zz-tile), .zz-store-static #app :is(.goods_item, .goods-item)::after, .zz-store-static #app .stock::before { animation-play-state: paused; }
/* 电脑端:头像彩环、店名流光、公告与选中分类扫光 */
#app .purchasing_sp .hide_box .shanghu {
  width: 82px; height: 82px; padding: 6px;
  background: radial-gradient(closest-side, #fff calc(100% - 3px), transparent calc(100% - 2.5px)), conic-gradient(from var(--zz-ang, 0deg), #3e63dd, #d86a80, #e0a92e, #2e9e78, #3e63dd);
  box-shadow: 0 12px 26px -12px rgba(62, 99, 221, .55); animation: zz-ring 8s linear infinite;
}
#app .purchasing_sp .hide_box .sh_info .sh_names .name {
  background: linear-gradient(100deg, var(--zz-ink) 0 42%, #3e63dd 48%, #d86a80 54%, var(--zz-ink) 60% 100%) 100% 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: zz-name 8s ease-in-out 1s infinite;
}
#app .purchasing_sp .hide_box .gonggao { position: relative; overflow: hidden; isolation: isolate; }
#app .purchasing_sp .hide_box .gonggao::after, #app .page_content .fl_box_xz .fl_box_leng_xz::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; translate: -100% 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .75) 50%, transparent 70%); animation: zz-sheen 6s ease-in-out infinite;
}
#app .purchasing_sp .hide_box .gonggao::after { animation-duration: 8s; animation-delay: 1.6s; }
.zz-store-static #app .purchasing_sp .hide_box :is(.shanghu, .name), .zz-store-static #app .purchasing_sp .hide_box .gonggao::after, .zz-store-static #app .page_content .fl_box_xz .fl_box_leng_xz::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .zz-ambient-layer::before { rotate: 25deg; animation: zz-aurora-soft 6s ease-in-out infinite alternate; }
  @keyframes zz-twinkle { 0%, 100% { opacity: .15; } 50% { opacity: .75; } }
  @keyframes zz-tile-in { from { opacity: 0; } }
  .zz-tile { animation: zz-tile-in .8s ease .25s both; }
  @keyframes zz-live { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
  #app .purchasing_sp .hide_box .shanghu { animation-duration: 24s; }
  #app .purchasing_sp .hide_box .gonggao::after, #app .page_content .fl_box_xz .fl_box_leng_xz::before, #app :is(.goods_item, .goods-item)::after { animation: none; content: none; }
}
@keyframes zz-aurora-soft { from { opacity: .5; } to { opacity: 1; } }

/* 2026-10-20: keep the existing order flow usable on narrow screens. */
@media (max-width: 767px) {
  #app .home, #app .home-wrapper, #app main.arco-layout-content,
  #app .container, #app .content-wrapper {
    width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
  }
  #app .header { height: auto; }
  #app .header .controller { height: auto; padding: 0 16px; }
  #app .header .wrapper {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    height: auto; gap: 8px; padding: 12px 0 6px;
  }
  #app .header .wrapper > a:first-child { min-width: 0; }
  #app .header .wrapper > a:first-child::after { font-size: 16px; }
  #app .header .center { display: none; }
  #app .header .header-right { grid-column: 2; grid-row: 1; }
  #app .header .header-right .arco-btn { padding: 0 12px; font-size: 13px; }
  #app .header .munu {
    display: flex; grid-column: 1 / -1; grid-row: 2;
    justify-content: space-between; min-width: 0; padding: 0;
  }
  #app .header .munu a { padding: 6px 8px; font-size: 13px; white-space: nowrap; }
  #app .header_box { height: 112px; }
  #app .general-card > .arco-card-body { min-width: 0; padding: 0; }
  #app .order-page { width: 100%; min-width: 0; padding: 0 16px; box-sizing: border-box; }
  #app .order-page .order-page--search { width: 100%; min-width: 0; margin: 32px auto 40px; }
  #app .order-page .order-page--search > p:nth-child(1) { font-size: 26px; }
  #app .order-page .order-page--search > p:nth-child(2) { margin: 12px 0 24px; font-size: 14px; line-height: 1.7; }
  #app .order-page .order-page--search .box { flex-direction: column; gap: 8px; border-radius: 18px; }
  #app .order-page .order-page--search .box .arco-input-wrapper { flex: auto; min-width: 0; box-sizing: border-box; }
  #app .order-page .order-page--search .box .arco-btn { width: 100%; margin-left: 0 !important; }
  #app .order-page .anti-fraud-tips { padding: 16px; overflow-wrap: anywhere; }
}


/* ===== v5.15 订单确认弹窗整理(2026-10-27) =====
   原来一个弹窗里叠着:虚线优惠券框 + 券提示框、联系方式下一大段说明、带插画的发货通知卡、单独一行付款提示、宽度不齐的付款方式卡。
   统一成"左标签 80px、右控件"的行式布局,行与行之间只留间距不画分隔线;显示顺序按填写习惯调整为
   联系方式 → 发货通知 → 优惠券 → 金额与数量 → 付款方式 → 按钮(只用 order,不动 DOM;不支持 :has 的浏览器保持原顺序)。
   v5.16(2026-10-29)和手机弹层对齐:标签改到输入框上方、商品名 → 标签 → 说明、说明下一条细线再进填写区、优惠券方形勾选框;
   间距、字号、输入框高度、付款卡片高度读 buyer-tools.css 的 --zz-ck-*(两端共用)。 */
html[data-zz] body #confirm_order_number { padding-bottom: 4px; }
@supports selector(:has(*)) {
  html[data-zz] body #confirm_order_number { display: flex; flex-direction: column; }
  html[data-zz] body #confirm_order_number > * { order: 25; flex: none; }
  html[data-zz] body #confirm_order_number > .pr_name_box { order: 1; }
  html[data-zz] body #confirm_order_number > .goods-tag { order: 2; }
  html[data-zz] body #confirm_order_number > .description { order: 3; }
  html[data-zz] body #confirm_order_number > .zzg-checkout-resume { order: 9; }
  html[data-zz] body #confirm_order_number > .use_box:has(.contact_box) { order: 10; }
  html[data-zz] body #confirm_order_number > .zz-contact-note { order: 11; }
  html[data-zz] body #confirm_order_number > .zz-delivery { order: 20; }
  html[data-zz] body #confirm_order_number > .use_box:has(.arco-checkbox) { order: 30; }
  html[data-zz] body #confirm_order_number > .zzcb-note { order: 31; }
  html[data-zz] body #confirm_order_number > .price_box { order: 40; }
  html[data-zz] body #confirm_order_number > .arco-spin { order: 50; }
}
/* 头部:商品名、标签、说明;"x1"和数量步进器重复,不再显示 */
html[data-zz] body #confirm_order_number .pr_name_box { width: 100%; margin-left: 0; margin-right: 0; padding: 4px 0 0; border-bottom: 0; }
html[data-zz] body #confirm_order_number .shuliang { display: none; }
html[data-zz] body #confirm_order_number .goods-tag { margin: 10px 0 0; }
html[data-zz] body #confirm_order_number .arco-tag { height: 22px; padding: 0 9px; font-size: 12px; }
/* 说明:原版固定 overflow-y: scroll,Windows 上即使一行字也会画出上下箭头;改成超出才滚动的细滚动条 */
html[data-zz] body #confirm_order_number .description { display: block; margin-top: 10px; max-height: var(--zz-ck-desc-h, 132px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--zz-line-2) transparent; color: var(--zz-ink-2); font-size: 14px; line-height: 1.7; }
html[data-zz] body #confirm_order_number .description .w-e-text-container { background: transparent; }
html[data-zz] body #confirm_order_number .description p { margin: 0 0 6px; }
html[data-zz] body #confirm_order_number .description p:last-child { margin-bottom: 0; }

/* 行:联系方式、优惠券(去掉虚线框、底色和分隔线);填写区上方一条细线,和手机弹层的分隔线一致 */
html[data-zz] body #confirm_order_number .use_box,
html[data-zz] body #confirm_order_number .use_box:has(.arco-checkbox) { margin: var(--zz-ck-gap, 14px) 0 0; padding: 0; border: 0; border-radius: 0; background: none; }
html[data-zz] body #confirm_order_number .use_box:has(.contact_box) { padding-top: var(--zz-ck-gap, 14px); border-top: 1px solid var(--zz-line); }
html[data-zz] body #confirm_order_number .contact_box { flex-wrap: wrap; align-items: center; }
html[data-zz] body #confirm_order_number .contact_box > div { width: auto; color: var(--zz-ink-2); font-size: var(--zz-ck-label, 13px); font-weight: 600; line-height: 1.5; }
/* 多带一层 .use_box:原版 #confirm_order_number .use_box .contact_box[data-v] .arco-input-wrapper 给了 margin-left: 12px */
html[data-zz] body #confirm_order_number .use_box .contact_box .arco-input-wrapper { flex: 1 0 100%; box-sizing: border-box; width: auto; min-width: 0; height: var(--zz-ck-field-h, 44px); margin: 6px 0 0; border-radius: var(--zz-ck-radius, 12px); border-color: var(--zz-line-2); background: #fff; transition: border-color .15s, box-shadow .15s; }
html[data-zz] body #confirm_order_number .contact_box .arco-input-wrapper:hover { border-color: #CFC8BD; }
html[data-zz] body #confirm_order_number .contact_box .arco-input-wrapper.arco-input-focus { border-color: var(--zz-brand); box-shadow: 0 0 0 3px var(--zz-brand-100); }
html[data-zz] body #confirm_order_number .zz-contact-note { margin: 6px 0 0; padding: 0 2px; font-size: 12px; line-height: 1.6; animation: none; }
html[data-zz] body #confirm_order_number .zz-delivery { grid-template-columns: minmax(0, 1fr); margin-top: var(--zz-ck-gap, 14px); }
html[data-zz] body #confirm_order_number .zz-delivery-label { padding: 0 0 6px; color: var(--zz-ink-2); font-size: var(--zz-ck-label, 13px); font-weight: 600; }
html[data-zz] body #confirm_order_number .use_box:has(.arco-checkbox) { min-height: 24px; align-items: center; }
html[data-zz] body #confirm_order_number .use_box:has(.arco-checkbox) .arco-checkbox-label { color: var(--zz-ink-2); font-size: 14px; }
/* 勾选框:原版 14px 配 6px 圆角看着像单选圆点,改成和手机一样的 16px 方形 */
html[data-zz] body #confirm_order_number .use_box .arco-checkbox-icon { width: 16px; height: 16px; border-radius: 5px; }
html[data-zz] body #confirm_order_number .use_box .info:empty { display: none; }
html[data-zz] body #confirm_order_number .use_box .info .arco-input-wrapper { border-radius: 10px; }

/* 券提示:不再单独成框,贴在"优惠券"行下方 */
html[data-zz] body #confirm_order_number .zzcb-note { margin: 8px 0 0; padding: 7px 8px 7px 12px; border: 0; border-radius: 10px; font-size: 12.5px; }
html[data-zz] body #confirm_order_number .zzcb-note.is-hint { background: #FFF6F1; color: #8A3D22; }
html[data-zz] body #confirm_order_number .zzcb-use { padding: 3px 12px; font-size: 12px; }

/* 金额与数量:上方一条细线把"填写区"和"结算区"分开 */
html[data-zz] body #confirm_order_number .price_box { width: 100%; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--zz-line); }
html[data-zz] body #confirm_order_number .price_box .price_info .goods-price .left { align-items: baseline; }

/* 付款方式:等宽网格,两种一行两列、三种一行三列、四种两行两列 */
html[data-zz] body #confirm_order_number .zzg-payment-help { display: none; }
html[data-zz] body #confirm_order_number .zz-pay-head { margin: 16px 0 10px; }
html[data-zz] body #confirm_order_number .pay_type { padding: 0; }
html[data-zz] body #confirm_order_number .pay_type .arco-radio-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
html[data-zz] body #confirm_order_number .pay_type .arco-radio-group:has(> .arco-radio:nth-child(3):last-child),
html[data-zz] body #confirm_order_number .pay_type .arco-radio-group:has(> .arco-radio:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-zz] body #confirm_order_number .pay_type .arco-radio { width: auto; height: auto; min-width: 0; padding: 0; }
html[data-zz] body #confirm_order_number .pay_type .pay_type_leng { width: 100%; height: var(--zz-ck-tile-h, 48px); margin: 0; padding: 0 12px !important; justify-content: center; border-radius: var(--zz-ck-radius, 12px); }
html[data-zz] body #confirm_order_number .pay_type .pay_type_leng span { font-weight: 600; }
html[data-zz] body #confirm_order_number .pay_type .pay_type_leng:hover { translate: none; }
html[data-zz] body #confirm_order_number .pay_type .pay_type_leng img { width: 20px; height: 20px; }
html[data-zz] body #confirm_order_number .zz-pay-note { margin: 10px 0 0; }

/* 按钮区:保障说明改成一行浅色小字,按钮靠右 */
html[data-zz] body #confirm_order_number .btn_box { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 12px; margin-top: 18px; }
html[data-zz] body #confirm_order_number .btn_box .zz-trust-strip { flex: 1 1 auto; margin: 0; padding: 0; background: none; color: var(--zz-muted); text-align: left; font-size: 12px; }
html[data-zz] body #confirm_order_number .btn_box .zz-trust-strip::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 5px; vertical-align: -1px; background: var(--zz-mint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3Zm-1.2 13.6-3.5-3.5 1.4-1.4 2.1 2.1 4.6-4.6 1.4 1.4-6 6Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3Zm-1.2 13.6-3.5-3.5 1.4-1.4 2.1 2.1 4.6-4.6 1.4 1.4-6 6Z'/%3E%3C/svg%3E") center / contain no-repeat; }
html[data-zz] body #confirm_order_number .btn_box .arco-space { flex: none; }


/* v5.15 电脑端商品页(/item/…)的同一组件:券提示去虚线、联系方式说明对齐输入框、发货通知和输入框同宽 */
html[data-zz] .zzcb-note.is-hint { border: 0; background: #FFF6F1; color: #8A3D22; }
#app .app-detail { --zz-row-label: 80px; }
#app .app-detail .use_box:has(.contact_box) { border-bottom: 0; padding-bottom: 0; }
#app .app-detail .contact_box .arco-input-wrapper { width: 400px; border-radius: 12px; }
#app .app-detail .zz-contact-note { padding-left: var(--zz-row-label); }
#app .app-detail .zz-delivery-main { max-width: 400px; }
#app .app-detail .zzcb-note { margin: 8px 0 10px; }