/* =============================================================
   DK Checkout Drawer — 阶段 1 UI 壳子样式
   只在 max-width: 768px 生效，桌面端完全不受影响。
   协议对齐：
   §4 状态驱动 — 显隐一律 class / [data-step] / opacity / pointer-events / aria-hidden，
      JS 不写 style.display（CSS 按 data-step 切换为 dk-tryon-text 同款先例）。
   §5 渲染主权 — DOM 挂 #dkShell 内，安全区用 env(safe-area-inset-bottom)。
   §7 动画 — 只用 transform/opacity 过渡，will-change 由 JS 动态挂载。
   z-index 刻度：高于 Templates V2 preview(130)，低于 toast(200)。
   ============================================================= */

@media (max-width: 768px) {

  /* ── 遮罩 ── 全屏（含底部导航）：结账流程中不允许切换 tab */
  .dk-ck-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 30, 0.45);
    z-index: 140;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    touch-action: none;
  }
  .dk-ck-overlay.dk-ck-overlay-show {
    opacity: 1;
    pointer-events: auto;
  }

  /* ── 抽屉本体 ── bottom:0 盖住底部导航，接近全屏（参照 支付2.html 94dvh） */
  .dk-ck-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(94dvh, calc(100dvh - 40px));
    transform: translate3d(0, 100%, 0);
    z-index: 145;
    background: var(--dk-surface);
    border-radius: 26px 26px 0 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: none;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.20);
    transition: transform 0.32s ease-in-out;
    touch-action: pan-y;
  }
  .dk-ck-sheet.dk-ck-open {
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }

  /* ── 头部：返回 / 标题 / 关闭 + 进度条 ── */
  .dk-ck-head {
    flex-shrink: 0;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--dk-border);
    background: var(--dk-surface);
    border-radius: 26px 26px 0 0;
  }
  .dk-ck-head-row {
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    align-items: center;
    gap: 8px;
  }
  .dk-ck-head-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid var(--dk-border);
    background: var(--dk-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    color: var(--dk-text-1);
    transition: transform 0.12s ease, background 0.12s ease, opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .dk-ck-head-btn:active { transform: scale(0.88); background: #F4F4FB; }

  .dk-ck-title-wrap {
    text-align: center;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--dk-text-1);
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
  }
  /* 步骤标题：预渲染全量 span，CSS 按 data-step 精准显隐（dk-tryon-text 先例） */
  .dk-ck-t { display: none; }
  .dk-ck-sheet[data-step="preparing"]  .dk-ck-t--preparing  { display: inline; }
  .dk-ck-sheet[data-step="contact"]    .dk-ck-t--contact    { display: inline; }
  .dk-ck-sheet[data-step="delivery"]   .dk-ck-t--delivery   { display: inline; }
  .dk-ck-sheet[data-step="shipping"]   .dk-ck-t--shipping   { display: inline; }
  .dk-ck-sheet[data-step="payment"]    .dk-ck-t--payment    { display: inline; }
  .dk-ck-sheet[data-step="processing"] .dk-ck-t--processing { display: inline; }
  .dk-ck-sheet[data-step="success"]    .dk-ck-t--success    { display: inline; }
  .dk-ck-sheet[data-step="error"]      .dk-ck-t--error      { display: inline; }

  /* ── 进度条：4 段，CSS 按 data-step 点亮，JS 零操作 ── */
  .dk-ck-progress {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 14px;
  }
  .dk-ck-bar {
    height: 5px;
    border-radius: 99px;
    background: #E3E3EA;
    transition: background 0.25s ease;
  }
  .dk-ck-sheet[data-step="contact"]    .dk-ck-bar:nth-child(1),
  .dk-ck-sheet[data-step="delivery"]   .dk-ck-bar:nth-child(-n+2),
  .dk-ck-sheet[data-step="shipping"]   .dk-ck-bar:nth-child(-n+3),
  .dk-ck-sheet[data-step="payment"]    .dk-ck-bar,
  .dk-ck-sheet[data-step="processing"] .dk-ck-bar,
  .dk-ck-sheet[data-step="success"]    .dk-ck-bar {
    background: var(--dk-primary);
  }

  /* ── 中部：唯一滚动区 ── */
  .dk-ck-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 18px 20px 16px;
    background: var(--dk-surface);
  }

  /* ── 订单摘要占位卡（贯穿各步顶部；阶段 3+ 接真实数据） ── */
  .dk-ck-summary {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--dk-border);
    border-radius: 16px;
    background: #FAFAFC;
    margin-bottom: 16px;
  }
  .dk-ck-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: var(--dk-surface);
    border: 1px solid var(--dk-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--dk-text-2);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-align: center;
  }
  /* Phase 5.4.1：Lumise 原生 screenshot 缩略图（复用 DK.features.cart.resolveThumb
     升级），img 默认隐藏，取到 screenshot 才显示，否则保留占位文案 */
  .dk-ck-thumb img {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .dk-ck-thumb.dk-ck-thumb-has-img .dk-ck-thumb-placeholder { display: none; }
  .dk-ck-thumb-has-img img { display: block; }
  /* Phase 5.4.2：多件时缩小版缩略图（展开列表每行用），复用同一套
     screenshot / has-img / placeholder 规则，只是尺寸更小 */
  .dk-ck-thumb--sm {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    font-size: 7px;
    flex-shrink: 0;
  }
  /* "View items" / "Hide items"：纯文字链接态，多件时才显示（JS 单点 toggle） */
  .dk-ck-sum-toggle {
    display: none;
    margin: 6px 0 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--dk-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2px;
    text-decoration: underline;
    cursor: pointer;
  }
  .dk-ck-sum-toggle-show { display: inline-block; }
  /* 只读展开列表：撑满 summary 卡片整行，不重构三列网格 */
  .dk-ck-sum-items {
    display: none;
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--dk-border);
  }
  .dk-ck-sum-items-show { display: block; }
  .dk-ck-sum-item-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .dk-ck-sum-item-row + .dk-ck-sum-item-row { margin-top: 10px; }
  .dk-ck-sum-item-info {
    font-size: 12px;
    color: var(--dk-text-1);
    line-height: 1.4;
  }
  .dk-ck-sum-name {
    font-weight: 900;
    letter-spacing: 0.6px;
    font-size: 14px;
    color: var(--dk-text-1);
  }
  .dk-ck-sum-meta {
    font-size: 12px;
    color: var(--dk-text-2);
    margin-top: 4px;
  }
  .dk-ck-sum-price {
    font-weight: 900;
    font-size: 16px;
    color: var(--dk-text-1);
  }
  /* success 步隐藏顶部摘要卡（success 面板内有自己的收尾卡） */
  .dk-ck-sheet[data-step="success"] .dk-ck-summary { display: none; }

  /* ── 步骤面板：预渲染全量，CSS 按 data-step 切换 ── */
  .dk-ck-step { display: none; }
  .dk-ck-sheet[data-step="preparing"]  .dk-ck-step--preparing  { display: block; }
  .dk-ck-sheet[data-step="contact"]    .dk-ck-step--contact    { display: block; }
  .dk-ck-sheet[data-step="delivery"]   .dk-ck-step--delivery   { display: block; }
  .dk-ck-sheet[data-step="shipping"]   .dk-ck-step--shipping   { display: block; }
  .dk-ck-sheet[data-step="payment"]    .dk-ck-step--payment    { display: block; }
  .dk-ck-sheet[data-step="processing"] .dk-ck-step--processing { display: block; }
  .dk-ck-sheet[data-step="success"]    .dk-ck-step--success    { display: block; }
  .dk-ck-sheet[data-step="error"]      .dk-ck-step--error      { display: block; }

  .dk-ck-step-title {
    font-size: 22px;
    font-weight: 900;
    color: var(--dk-text-1);
    margin: 6px 0 6px;
  }
  .dk-ck-step-copy {
    color: var(--dk-text-2);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 18px;
  }

  /* ── 表单字段（阶段 1 静态占位；阶段 2 接 state） ── */
  .dk-ck-fields { display: grid; gap: 12px; }
  .dk-ck-field {
    min-height: 54px;
    border: 1px solid var(--dk-border);
    background: #FAFAFC;
    border-radius: 14px;
    padding: 8px 14px;
    display: grid;
    align-items: center;
    box-sizing: border-box;
  }
  .dk-ck-field label {
    display: block;
    color: var(--dk-text-2);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1px;
    margin-bottom: 3px;
    text-transform: uppercase;
  }
  .dk-ck-field input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 16px;
    color: var(--dk-text-1);
    font-family: inherit;
    padding: 0;
  }
  .dk-ck-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  /* ── 校验失败态（阶段 2）：由 state.fieldErrors 驱动，JS 只 toggle class ── */
  .dk-ck-field-invalid {
    border-color: #E24848;
    background: #FFF7F7;
  }
  .dk-ck-field-invalid label { color: #E24848; }

  /* ── shipping / payment 选项卡片（阶段 2：pick 态由 state 驱动，卡片可点） ── */
  .dk-ck-method {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    border: 1px solid var(--dk-border);
    border-radius: 16px;
    padding: 15px;
    background: #FAFAFC;
    margin-bottom: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease;
  }
  .dk-ck-method:active { transform: scale(0.98); }
  .dk-ck-method.dk-ck-pick {
    border-color: var(--dk-text-1);
    background: var(--dk-surface);
  }
  .dk-ck-method b {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    color: var(--dk-text-1);
  }
  .dk-ck-method span { font-size: 12px; color: var(--dk-text-2); }
  .dk-ck-radio {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #C9C9D1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .dk-ck-method.dk-ck-pick .dk-ck-radio { border-color: var(--dk-text-1); }
  .dk-ck-method.dk-ck-pick .dk-ck-radio::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dk-text-1);
  }

  /* ── Phase 4：动态 method 卡（价格列） + 空态 + Woo totals 明细块 ── */
  .dk-ck-method {
    grid-template-columns: 1fr auto auto;  /* 文本 / 价格 / radio */
  }
  .dk-ck-method-price {
    font-weight: 900;
    font-size: 14px;
    color: var(--dk-text-1);
    white-space: nowrap;
  }
  .dk-ck-methods-empty {
    border: 1.5px dashed var(--dk-border);
    border-radius: 16px;
    padding: 20px 16px;
    background: #FAFAFC;
    text-align: center;
  }
  .dk-ck-methods-empty b {
    display: block;
    font-size: 14px;
    color: var(--dk-text-1);
    margin-bottom: 6px;
  }
  .dk-ck-methods-empty span {
    font-size: 12px;
    color: var(--dk-text-2);
    line-height: 1.5;
  }
  .dk-ck-totals {
    margin-top: 16px;
    border: 1px solid var(--dk-border);
    border-radius: 16px;
    background: #FAFAFC;
    padding: 12px 14px;
    display: grid;
    gap: 8px;
    font-size: 13px;
  }
  .dk-ck-totals > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--dk-text-2);
  }
  .dk-ck-totals-grand {
    border-top: 1px solid var(--dk-border);
    padding-top: 8px;
    font-weight: 900;
    color: var(--dk-text-1);
  }
  .dk-ck-totals-grand span { color: var(--dk-text-1); }

  .dk-ck-pay-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
  }
  .dk-ck-pay-tile {
    height: 54px;
    border: 1px solid var(--dk-border);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FAFAFC;
    font-weight: 900;
    font-size: 13px;
    color: var(--dk-text-1);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease;
  }
  .dk-ck-pay-tile:active { transform: scale(0.97); }
  .dk-ck-pay-tile.dk-ck-pick {
    border: 2px solid var(--dk-text-1);
    background: var(--dk-surface);
  }
  .dk-ck-pay-tile-full { margin-bottom: 12px; }

  .dk-ck-notice {
    border-radius: 14px;
    padding: 12px 14px;
    background: var(--dk-primary-soft);
    color: #4C4690;
    font-size: 12px;
    line-height: 1.5;
    margin: 14px 0 0;
  }

  /* ── spinner（preparing / processing 共用） ── */
  .dk-ck-spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 4px solid var(--dk-primary-soft);
    border-top-color: var(--dk-primary);
    animation: dkCkSpin 0.8s linear infinite;
    margin: 34px auto 16px;
  }
  @keyframes dkCkSpin { to { transform: rotate(360deg); } }
  .dk-ck-center { text-align: center; }

  /* ── success / error ── */
  .dk-ck-result { text-align: center; padding: 28px 8px 8px; }
  .dk-ck-result-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 900;
    color: #FFFFFF;
    margin: 0 auto 18px;
  }
  .dk-ck-result-icon--ok { background: #21B875; }
  .dk-ck-result-icon--err { background: #E24848; }
  .dk-ck-result h3 {
    margin: 0 0 10px;
    font-size: 22px;
    color: var(--dk-text-1);
  }
  .dk-ck-result p {
    margin: 0 auto 20px;
    max-width: 280px;
    color: var(--dk-text-2);
    line-height: 1.5;
    font-size: 13px;
  }
  /* ── Phase 5.3：Check status 按钮（仅 unknown 提示态显示，JS 单点 toggle） ── */
  .dk-ck-check-status {
    display: none;
    margin: 0 auto;
    padding: 12px 26px;
    border: 1.5px solid var(--dk-text-1);
    border-radius: 14px;
    background: var(--dk-surface);
    font-family: inherit;
    font-size: 13px;
    font-weight: 900;
    color: var(--dk-text-1);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform 0.12s ease, opacity 0.15s ease;
  }
  .dk-ck-check-status.dk-ck-check-status-show { display: block; }
  .dk-ck-check-status:active { transform: scale(0.97); }
  .dk-ck-check-status:disabled { opacity: 0.5; cursor: default; }

  .dk-ck-order-card {
    border: 1px solid var(--dk-border);
    border-radius: 16px;
    background: #FAFAFC;
    padding: 14px;
    text-align: left;
  }
  .dk-ck-order-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    font-size: 13px;
    font-weight: 900;
    color: var(--dk-text-1);
  }
  .dk-ck-order-card p {
    margin: 8px 0 0;
    max-width: none;
    text-align: left;
  }

  /* ── Sticky Footer：TOTAL + 主按钮（safe-area 落位） ── */
  .dk-ck-foot {
    flex-shrink: 0;
    padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--dk-border);
    background: var(--dk-surface);
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.04);
  }
  .dk-ck-foot-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: var(--dk-text-2);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 1px;
  }
  .dk-ck-foot-total strong {
    font-size: 21px;
    color: var(--dk-text-1);
    letter-spacing: 0;
  }
  .dk-ck-primary {
    width: 100%;
    height: 56px;
    border-radius: 16px;
    border: 0;
    background: var(--dk-text-1);
    color: #FFFFFF;
    font-weight: 900;
    letter-spacing: 1.2px;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.12s ease, opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .dk-ck-primary:active { transform: scale(0.98); }
  /* busy 锁：state.isBusy → disabled（阶段 2） */
  .dk-ck-primary:disabled {
    opacity: 0.45;
    pointer-events: none;
  }
  .dk-ck-sheet[data-step="success"] .dk-ck-primary { background: var(--dk-primary); }

  /* 主按钮文案：预渲染全量 span，CSS 按 data-step 显隐 */
  .dk-ck-pt { display: none; }
  .dk-ck-sheet[data-step="contact"]  .dk-ck-pt--contact  { display: inline; }
  .dk-ck-sheet[data-step="delivery"] .dk-ck-pt--delivery { display: inline; }
  .dk-ck-sheet[data-step="shipping"] .dk-ck-pt--shipping { display: inline; }
  .dk-ck-sheet[data-step="payment"]  .dk-ck-pt--payment  { display: inline; }
  .dk-ck-sheet[data-step="success"]  .dk-ck-pt--success  { display: inline; }
  .dk-ck-sheet[data-step="error"]    .dk-ck-pt--error    { display: inline; }

  /* preparing / processing：无可点按钮，footer 整体隐去（视觉与交互一致） */
  .dk-ck-sheet[data-step="preparing"]  .dk-ck-foot,
  .dk-ck-sheet[data-step="processing"] .dk-ck-foot {
    opacity: 0;
    pointer-events: none;
  }

  /* processing：返回/关闭不可点（支付处理中禁止中断，协议 §6 由状态兜底恢复） */
  .dk-ck-sheet[data-step="processing"] .dk-ck-head-btn {
    opacity: 0.35;
    pointer-events: none;
  }
}