/* Scoped cart surfaces; shared checkout and admin styles remain unchanged. */
body.dhh-ui[data-ui-page=cart], .cart-surface, .cart-modal, .cart-confirm-popup {
  --ui-accent: #2563eb; --ui-accent-hover: #1d4ed8; --ui-focus: #2563eb24;
  --ui-ink: #202632; --ui-muted: #69717e; --ui-line: #e4e7ec; --ui-page: #f7f8fa;
  background: var(--ui-page); color: var(--ui-ink);
}
.cart-header { background: #fff; border-bottom: 1px solid var(--ui-line); }
.cart-container { width: min(100%, 1320px); margin: 0 auto; padding-inline: 28px; }
.cart-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 80px; }
.cart-brand { display: flex; align-items: center; gap: 12px; color: var(--ui-ink); text-decoration: none; font-weight: 700; }
.cart-brand img { width: 40px; height: 40px; object-fit: contain; }
.cart-brand small { display: block; color: var(--ui-muted); font-size: 11px; font-weight: 400; }
.cart-header-nav { display: flex; align-items: center; gap: 24px; font-size: 14px; }
.cart-header-nav a { color: #505966; text-decoration: none; }
.cart-header-nav a:last-child { color: var(--ui-accent); font-weight: 600; }
.cart-main { padding-block: 32px 48px; }
.cart-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.cart-page-heading h1 { font-size: 28px; line-height: 1.3; margin: 0 0 8px; font-weight: 700; }
.cart-page-heading p { margin: 0; color: var(--ui-muted); font-size: 13px; }
.cart-steps { display: flex; align-items: center; gap: 24px; padding: 0; margin: 0; list-style: none; font-size: 12px; color: #858d99; }
.cart-steps li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cart-steps span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #dce1e8; border-radius: 50%; font-variant-numeric: tabular-nums; }
.cart-steps .is-current { color: var(--ui-accent); font-weight: 600; }
.cart-steps .is-current span { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
.cart-main #cart-body { display: grid; grid-template-columns: minmax(0, 1fr) 332px; align-items: start; background: #fff; border-block: 1px solid var(--ui-line); }
.cart-main #cart-body.hidden, .cart-main #cart-empty.hidden { display: none; }
.cart-items { min-width: 0; }
.cart-items-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border-bottom: 1px solid var(--ui-line); }
.cart-items-heading h2, .cart-summary-heading { font-size: 16px; font-weight: 700; margin: 0; }
.cart-clear { background: none; border: 0; padding: 4px 0; color: #8b5151; font-size: 12px; cursor: pointer; }
.cart-clear:hover { color: #ba3737; }
.cart-list-head { display: grid; grid-template-columns: minmax(0, 1fr) 140px 96px 36px; gap: 16px; padding: 12px 24px; color: var(--ui-muted); background: #fafbfc; font-size: 12px; }
.cart-list-head span:nth-child(2) { text-align: center; }
.cart-list-head span:nth-child(3) { text-align: right; }
.dhh-ui .cart-surface .cart-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px 96px 36px; gap: 16px; align-items: center; padding: 24px; border-bottom: 1px solid #edf0f4; }
.cart-row:last-child { border-bottom: 0; }
.cart-product-info { display: flex; gap: 18px; align-items: center; min-width: 0; }
.cart-product-info > div { min-width: 0; }
.dhh-ui .cart-surface .cart-product-image { width: 80px; height: 80px; padding: 8px; border-radius: 6px; background: #fafbfc; border: 1px solid #eef0f3; object-fit: contain; }
.cart-product-link { display: block; color: #242b37; font-size: 14px; line-height: 1.6; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.cart-product-link:hover { color: var(--ui-accent); }
.cart-product-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; font-size: 12px; color: var(--ui-muted); }
.cart-stock { color: #198565; }
.cart-limit { display: block; margin-top: 5px; color: #7a828e; font-size: 11px; }
.cart-restricted { display: inline-block; margin-top: 6px; color: #4d61a4; background: #edf1ff; padding: 1px 6px; font-size: 11px; border-radius: 3px; }
.dhh-ui .cart-surface .cart-stepper { display: grid; grid-template-columns: 36px 66px 36px; gap: 0; border: 1px solid #dfe4eb; border-radius: 6px; height: 40px; overflow: hidden; }
.dhh-ui .cart-surface .cart-step-btn, .dhh-ui .cart-surface .cart-qty { width: 100%; min-width: 0; height: 38px; border: 0; border-radius: 0; background: #fff; box-shadow: none; margin: 0; padding: 0; color: #4e5867; }
.dhh-ui .cart-surface .cart-step-btn { font-size: 18px; font-weight: 500; }
.dhh-ui .cart-surface .cart-step-btn:hover:not(:disabled) { background: #f0f4fa; color: var(--ui-accent); }
.dhh-ui .cart-surface .cart-step-btn:disabled { color: #c3c9d2; background: #fafbfc; }
.cart-qty { text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
.cart-qty::-webkit-inner-spin-button, .cart-qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cart-row-subtotal { text-align: right; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-row-subtotal small { display: none; }
.dhh-ui .cart-surface .cart-delete { width: 36px; height: 36px; border: 0; color: #8b929e; background: none; }
.cart-delete:hover:not(:disabled) { background: #fff1f1; }
.cart-delete img { width: 16px; height: 16px; opacity: .65; }
.cart-summary { padding: 24px; border-left: 1px solid var(--ui-line); position: sticky; top: 24px; }
.cart-summary-heading { margin-bottom: 24px; }
.cart-summary-lines { margin: 0; display: grid; gap: 12px; font-size: 13px; }
.cart-summary-lines > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cart-summary-lines dt { color: var(--ui-muted); }
.cart-summary-lines dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 500; }
.cart-discount { color: #198565; }
.cart-total { border-top: 1px solid var(--ui-line); margin-top: 22px; padding-top: 20px; }
.cart-total-label { font-size: 13px; color: #4d5665; }
.cart-total-price { margin-top: 4px; color: #c33e35; font-size: 32px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cart-total-note { color: #79818d; font-size: 11px; margin: 10px 0 20px; }
.cart-main #btn-checkout { display: flex; gap: 8px; align-items: center; justify-content: center; width: 100%; min-height: 46px; border-radius: 6px; font-size: 14px; font-weight: 600; }
.cart-icon { width: 18px; height: 18px; display: inline-block; flex-shrink: 0; color: currentColor; }
.cart-assurance { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; font-size: 11px; color: #77808e; }
.cart-assurance .cart-icon { width: 15px; height: 15px; color: #198565; }
.cart-main #cart-hint, .cart-main #cart-stock-error { margin-top: 16px; padding: 10px 12px; font-size: 12px; line-height: 1.7; border-radius: 4px; }
.cart-main #cart-hint { color: #8b651b; background: #fff8e9; }
.cart-main #cart-empty { display: flex; flex-direction: column; align-items: center; padding: 48px 24px; background: #fff; border-block: 1px solid var(--ui-line); text-align: center; }
.cart-empty-icon { display: grid; place-items: center; width: 72px; height: 72px; color: #a2afbf; margin-bottom: 16px; }
.cart-empty-icon .cart-icon { width: 52px; height: 52px; }
.cart-main #cart-empty h2 { font-size: 20px; font-weight: 650; margin: 0 0 8px; }
.cart-main #cart-empty p { color: #7b8492; font-size: 13px; margin: 0 0 22px; }
.cart-empty-actions { display: flex; align-items: center; gap: 20px; font-size: 13px; }
.cart-empty-actions .fc-btn { min-height: 42px; padding: 10px 24px; border-radius: 6px; }
.cart-empty-actions > a:last-child { color: #5f6b7b; }
.cart-discover { margin-top: 32px; }
.cart-discover-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.cart-discover h2 { font-size: 17px; font-weight: 650; margin: 0; }
.cart-discover-heading > a { color: var(--ui-accent); font-size: 12px; text-decoration: none; }
.cart-recommend-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cart-recommend { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; color: #242b37; background: #fff; border: 1px solid var(--ui-line); padding: 18px; border-radius: 6px; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.cart-recommend:hover { border-color: #aebfe1; box-shadow: 0 4px 16px #283c5c0a; }
.cart-recommend img { width: 64px; height: 64px; object-fit: contain; }
.cart-recommend h3 { font-size: 13px; line-height: 1.5; font-weight: 600; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 39px; overflow-wrap: anywhere; }
.cart-recommend strong { display: block; font-size: 15px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.cart-recommend small { color: #198565; font-size: 11px; }
.cart-footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--ui-line); color: #939aa6; font-size: 11px; }
.cart-footer a { color: #657080; }

/* Confirm dialog owns its form layout, not SweetAlert's default input margins. */
.dhh-ui .cart-confirm-popup.swal2-popup { width: min(560px, calc(100vw - 32px)); padding: 0; text-align: left; overflow-x: hidden; }
.cart-confirm-popup .cart-confirm-title.swal2-title { text-align: left; padding: 24px 28px 18px; margin: 0; border-bottom: 1px solid var(--ui-line); font-size: 20px !important; }
.cart-confirm-popup .cart-confirm-html.swal2-html-container { margin: 0; padding: 22px 28px 0; overflow: visible; text-align: left; }
.cart-confirm-total { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 18px; }
.cart-confirm-total p { margin: 0; color: #7b8492; font-size: 12px; }
.cart-confirm-total h3 { color: #404958; font-size: 13px; font-weight: 500; margin: 0 0 4px; }
.cart-confirm-total strong { color: #c33e35; font-size: 28px; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cart-confirm-products { margin: 0 0 22px; padding: 0; list-style: none; max-height: 176px; overflow-y: auto; overscroll-behavior: contain; border-block: 1px solid #edf0f4; scrollbar-width: thin; }
.cart-confirm-products li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; }
.cart-confirm-products li + li { border-top: 1px solid #f0f2f5; }
.cart-confirm-products img { width: 40px; height: 40px; object-fit: contain; }
.cart-confirm-products b { display: block; color: #424b59; font-size: 12px; line-height: 1.5; font-weight: 500; overflow-wrap: anywhere; }
.cart-confirm-products small { color: #85909e; font-size: 11px; }
.cart-confirm-products li > strong { font-size: 12px; color: #424b59; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-confirm-field { margin-top: 18px; }
.cart-confirm-field label { display: block; color: #424b59; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.cart-confirm-popup .cart-confirm-input { display: block; width: 100%; min-width: 0; height: 44px; margin: 0; padding: 0 12px; border: 1px solid #dce1e8; border-radius: 6px; font-size: 16px; line-height: normal; box-shadow: none; background: #fff; color: #333d4c; }
.cart-confirm-popup .cart-confirm-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-focus); }
.cart-confirm-popup .cart-confirm-input[aria-invalid=true] { border-color: #c74b44; }
.cart-confirm-password { position: relative; }
.cart-confirm-password .cart-confirm-input { padding-right: 52px; }
.cart-confirm-eye { position: absolute; right: 4px; top: 4px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 4px; background: none; color: #77859a; }
.cart-confirm-eye:hover { color: var(--ui-accent); background: #f0f4fb; }
.cart-confirm-eye svg { width: 18px; height: 18px; }
.cart-confirm-help { margin: 7px 0 0; font-size: 11px; color: #87919f; line-height: 1.6; }
.cart-confirm-progress { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 5px; background: #eef4ff; color: #3761a3; font-size: 12px; margin-top: 18px; min-height: 44px; }
.cart-spinner { width: 16px; height: 16px; border: 2px solid #afc6f4; border-top-color: #2563eb; border-radius: 50%; animation: cart-spin .75s linear infinite; flex-shrink: 0; }
.cart-confirm-popup .cart-confirm-actions.swal2-actions { display: grid; grid-template-columns: 1fr 2fr; width: 100%; gap: 12px; padding: 22px 28px 26px; margin: 0; }
.cart-confirm-popup .cart-confirm-button { width: 100%; min-height: 44px; margin: 0; border: 1px solid transparent; border-radius: 6px !important; padding: 10px 14px; font-size: 14px; font-weight: 600; }
.cart-confirm-popup .cart-confirm-primary { background: var(--ui-accent) !important; color: #fff; }
.cart-confirm-popup .cart-confirm-secondary { color: #657080 !important; border-color: #dfe4eb !important; background: #fff !important; }
.cart-confirm-popup .swal2-validation-message { margin: 18px 28px 0; padding: 10px 12px; border: 0; border-radius: 4px; text-align: left; }
.cart-confirm-popup[data-submitting=true] .cart-confirm-actions button, .cart-confirm-popup[data-submitting=true] .swal2-close { pointer-events: none; }
.cart-confirm-popup input:disabled { color: #78818e; background: #f8fafc; }
@keyframes cart-spin { to { transform: rotate(360deg); } }
@media (max-width: 1120px) { .cart-recommend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .cart-main #cart-body { grid-template-columns: minmax(0, 1fr); }
  .cart-summary { position: static; border-left: 0; border-top: 1px solid var(--ui-line); }
}
@media (max-width: 640px) {
  .cart-container { padding-inline: 16px; }
  .cart-header-inner { min-height: 68px; gap: 12px; }
  .cart-brand { font-size: 14px; gap: 8px; }
  .cart-brand img { width: 34px; height: 34px; }
  .cart-brand small { font-size: 10px; }
  .cart-header-nav { gap: 14px; font-size: 12px; }
  .cart-header-nav a:first-child { display: none; }
  .cart-main { padding-top: 24px; }
  .cart-page-heading { align-items: flex-start; flex-direction: column; gap: 18px; }
  .cart-page-heading h1 { font-size: 24px; }
  .cart-steps { gap: 18px; }
  .cart-items-heading { padding: 18px 16px; }
  .cart-list-head { display: none; }
  .dhh-ui .cart-surface .cart-row { grid-template-columns: 140px minmax(0, 1fr); position: relative; padding: 20px 16px; gap: 18px 12px; }
  .cart-product-info { grid-column: 1 / -1; gap: 14px; padding-right: 38px; }
  .dhh-ui .cart-surface .cart-product-image { width: 64px; height: 64px; }
  .dhh-ui .cart-surface .cart-stepper { width: 140px; height: 44px; grid-template-columns: 38px 62px 38px; }
  .dhh-ui .cart-surface .cart-step-btn, .dhh-ui .cart-surface .cart-qty { height: 42px; }
  .dhh-ui .cart-surface .cart-delete { width: 44px; height: 44px; position: absolute; top: 14px; right: 8px; }
  .cart-row-subtotal { white-space: normal; overflow-wrap: anywhere; }
  .cart-row-subtotal small { display: block; color: #87919f; font-size: 10px; font-weight: 400; }
  .cart-summary { padding: 22px 16px; }
  .cart-recommend { grid-template-columns: 1fr; padding: 14px; gap: 12px; }
  .cart-recommend img { width: 64px; height: 64px; }
  .cart-recommend-grid { gap: 12px; }
  .cart-confirm-popup .cart-confirm-title.swal2-title { padding: 20px 20px 16px; }
  .cart-confirm-popup .cart-confirm-html.swal2-html-container { padding: 18px 20px 0; }
  .cart-confirm-popup .cart-confirm-actions.swal2-actions { padding: 20px; gap: 10px; }
  .cart-confirm-popup .swal2-validation-message { margin-inline: 20px; }
  .cart-confirm-products li { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; }
  .cart-confirm-products img { width: 32px; height: 32px; }
  .cart-footer { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .cart-spinner { animation-duration: 2s; } }

.cart-surface, .cart-modal, .cart-confirm-popup, .support-popup { box-sizing: border-box; letter-spacing: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif; }
.cart-modal *, .cart-confirm-popup *, .support-popup * { box-sizing: border-box; }
.cart-main [hidden], .cart-confirm-popup [hidden], .support-popup [hidden] { display: none !important; }
.cart-main button { cursor: pointer; }
.cart-main button:disabled { cursor: not-allowed; }
.cart-modal { width: min(1160px, calc(100vw - 32px)); max-width: none; height: min(860px, 88dvh); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid #dfe4ec; border-radius: 8px; margin: auto; box-shadow: 0 24px 90px #14203335; overflow: hidden; }
.cart-modal[open] { display: flex; flex-direction: column; }
.cart-modal::backdrop { background: #16213166; backdrop-filter: blur(3px); }
.cart-modal-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; min-height: 64px; padding: 12px 24px; border-bottom: 1px solid var(--ui-line); background: #fff; }
.cart-modal-header h2 { display: flex; align-items: center; gap: 10px; color: #202632; margin: 0; font-size: 18px; font-weight: 700; }
.cart-modal-header .cart-icon { width: 22px; height: 22px; color: var(--ui-accent); }
.cart-modal-close { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 5px; background: none; cursor: pointer; }
.cart-modal-close img { width: 20px; height: 20px; }
.cart-modal-close:hover { background: #f0f3f8; }
.cart-modal-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; flex: 1; scrollbar-width: thin; background: #f7f8fa; }
.cart-modal .cart-main { padding: 20px 24px 24px; }
.cart-modal .cart-page-heading { margin-bottom: 18px; }
.cart-modal .cart-page-heading h1, .cart-modal .cart-footer { display: none; }
.cart-modal .cart-summary { top: 0; }
.cart-modal .cart-discover { margin-top: 24px; }
.cart-modal .swal2-container { position: absolute !important; inset: 0 !important; }
.cart-modal .swal2-popup:not(.swal2-toast) { max-height: min(calc(88dvh - 32px), 828px); }
.cart-modal-status { min-height: 260px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 32px; color: #69717e; font-size: 14px; }
.cart-modal-error { flex-direction: column; }
.cart-modal-error button, .support-error button { min-height: 40px; padding: 8px 22px; border: 1px solid #c9d8f2; border-radius: 5px; background: #fff; color: #2563eb; cursor: pointer; }
.cart-modal-error a { font-size: 12px; color: #68768d; }
.cart-confirm-primary .cart-spinner { display: inline-block; vertical-align: middle; }
.cart-confirm-popup .cart-confirm-title { padding-right: 60px !important; }
.dhh-ui .support-popup.swal2-popup { width: min(480px, calc(100vw - 32px)); padding: 0 0 24px; text-align: left; }
.support-popup .support-title.swal2-title { margin: 0; padding: 22px 60px 18px 24px; border-bottom: 1px solid #e4e7ec; font-size: 20px !important; text-align: left; }
.support-popup .support-html.swal2-html-container { margin: 0; padding: 24px 28px 0; text-align: left; }
.support-loading { min-height: 180px; display: flex; align-items: center; justify-content: center; gap: 12px; color: #768193; font-size: 13px; }
.support-account label { display: block; color: #69717e; font-size: 12px; margin-bottom: 10px; }
.support-account-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.support-account input { width: 100%; min-width: 0; border: 0; background: #f5f7fa; color: #27374e; border-radius: 5px; padding: 10px 12px; height: 44px; font-family: ui-monospace, Consolas, monospace; font-size: 17px; font-weight: 600; }
.support-copy { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 12px; border: 1px solid #c8d8f4; border-radius: 5px; color: #2563eb; background: #f3f7ff; font-size: 12px; cursor: pointer; }
.support-copy img { width: 16px; height: 16px; }
.support-feedback { min-height: 22px; margin: 6px 0 0; color: #198565; font-size: 12px; }
.support-qr { border-top: 1px solid #edf0f4; padding-top: 14px; margin-top: 16px; text-align: center; }
.support-qr p { color: #768193; font-size: 12px; margin: 0 0 14px; }
.support-qr img { display: block; width: auto; max-width: 100%; height: auto; max-height: 300px; object-fit: contain; margin: 0 auto; border: 1px solid #edf0f4; border-radius: 4px; }
.support-error { text-align: center; padding: 32px 0; }
.support-error p { font-size: 14px; margin: 0 0 18px; }
@media (max-width: 640px) {
  .cart-modal { width: calc(100vw - 16px); height: 92dvh; max-height: calc(100dvh - 16px); }
  .cart-modal-header { padding: 8px 16px; min-height: 56px; }
  .cart-modal .cart-main { padding: 18px 12px; }
  .cart-modal .cart-page-heading { gap: 14px; }
  .cart-modal .cart-steps { gap: 16px; }
  .cart-modal .swal2-popup:not(.swal2-toast) { max-height: calc(92dvh - 20px); }
  .support-popup .support-html.swal2-html-container { padding-inline: 20px; }
  .support-account-row { gap: 8px; }
  .support-copy { padding-inline: 10px; }
  .support-qr img { max-height: 260px; }
}