.checkout-layout{display:grid;grid-template-columns:.8fr 1fr;gap:40px}.checkout-intro{padding:16px 0}.checkout-intro .eyebrow{font-size:10px;letter-spacing:1.3px;color:var(--muted)}.checkout-intro h2{font-size:31px;line-height:1.5;letter-spacing:-1.2px;margin:24px 0 16px}.checkout-intro p{font-size:14px;color:var(--muted);line-height:1.9;max-width:260px}.checkout-total{margin:32px 0;padding:24px 0;border-top:1px solid #081f8014;border-bottom:1px solid #081f8014}.checkout-total span,.checkout-total small{display:block;color:var(--muted);font-size:12px;line-height:1.8}.checkout-total strong{display:block;font-size:30px;color:var(--blue);font-variant-numeric:tabular-nums;letter-spacing:-1px;margin:8px 0}.checkout-steps{list-style:none;padding:0;counter-reset:step;display:grid;gap:20px;color:var(--muted);font-size:13px}.checkout-steps li{display:flex;align-items:center;gap:12px;counter-increment:step}.checkout-steps li:before{content:counter(step,decimal-leading-zero);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e9e7df;font-size:11px}.checkout-steps [aria-current]{color:var(--blue);font-weight:600}.checkout-steps [aria-current]:before{background:var(--blue);color:white}.checkout-steps .done:before{content:'✓';color:var(--blue)}.checkout-form{padding:4px 0}.form-heading{display:flex;align-items:center;gap:10px;margin:12px 0 22px}.form-heading span{font-size:12px;color:var(--orange-ink);font-variant-numeric:tabular-nums}.form-heading h3{font-size:17px;margin:0;letter-spacing:-.4px}.checkout-form>label{display:block;font-size:13px;margin-bottom:20px;color:var(--ink)}.checkout-form em{font-size:10px;color:var(--orange-ink);font-style:normal;margin-left:6px}.checkout-form em.optional{color:var(--muted)}.checkout-form input:not([type=radio]),.checkout-form textarea,.checkout-form select{width:100%;font:inherit;color:var(--ink);padding:14px;border:0;border-radius:12px;background:#fff;box-shadow:0 0 0 4px #ffffff60;margin-top:10px;min-height:48px;resize:vertical}.checkout-form textarea::placeholder,.checkout-form input::placeholder{color:var(--muted);opacity:1;font-size:inherit}.checkout-form .phone-input{display:flex;gap:10px}.checkout-form .phone-input select{width:116px;flex:none;padding:10px;font-size:12px}.checkout-form .phone-input input{min-width:0}.checkout-form .delivery-choices{padding:0;border:0;margin:0 0 22px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.delivery-choices label{position:relative;cursor:pointer}.delivery-choices input{position:absolute;left:12px;top:14px;accent-color:var(--blue)}.delivery-choices label>span{display:block;padding:18px 12px 16px 34px;border-radius:14px;background:#eeede7;min-height:110px;box-shadow:inset 0 0 0 1px #081f8008}.delivery-choices input:checked+span{background:#e3e7f1;box-shadow:inset 0 0 0 1px #081f8050}.delivery-choices svg{display:none}.delivery-choices strong{display:block;font-size:13px;margin-bottom:10px;font-weight:600}.delivery-choices small{font-size:11px;line-height:1.7;color:var(--muted)}.checkout-form [hidden]{display:none!important}.checkout-actions{display:flex;align-items:center;gap:14px;justify-content:space-between}.back-link{border:0;background:none;color:var(--blue);min-height:44px;font-size:13px;padding:10px 0}.checkout-actions .button{font-size:13px;gap:12px;padding-left:16px}.form-error{font-size:13px;line-height:1.7;color:#a13b17}.form-error:empty{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.success-view{max-width:510px;margin:auto;text-align:center;padding:26px 10px}.success-mark{height:80px;width:80px;display:grid;place-items:center;border-radius:50%;background:var(--blue);color:white;margin:0 auto 28px;box-shadow:0 0 0 8px #081f8009}.success-mark svg{width:40px;height:40px;stroke-width:1.5}.success-view .eyebrow{justify-content:center;font-size:10px;color:var(--muted)}.success-view h2{font-size:34px;line-height:1.45;letter-spacing:-1.2px;margin:22px 0 18px}.success-lead{font-size:14px;line-height:1.9;color:var(--muted);max-width:390px;margin:auto}.success-receipt{margin:28px 0;padding:22px 24px;text-align:left;background:#fff;border-radius:16px;box-shadow:0 0 0 5px #ffffff70}.success-receipt>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;font-size:13px}.success-receipt span{color:var(--muted)}.success-receipt strong{font-weight:600}.success-actions{display:flex;justify-content:center;align-items:center;gap:24px}.success-actions .button{font-size:13px}.commerce-dialog:has(.checkout-layout){max-height:94dvh}.commerce-dialog .dialog-head{position:sticky;top:0;z-index:2;background:var(--paper)}.checkout-form input:focus-visible,.checkout-form select:focus-visible,.checkout-form textarea:focus-visible{outline:2px solid var(--blue);outline-offset:3px}.form-success{margin:14px 0 0;font-size:13px;line-height:1.7;color:#1f7a4d}.checkout-form input.is-locked{background:#eeede7;color:var(--muted);box-shadow:0 0 0 4px #eeede766}
html:has(dialog[open]){overflow:hidden}.commerce-dialog{overscroll-behavior:contain}
.dialog-head #st-dialog-title:focus{outline:none}
.commerce-dialog.lightbox .dialog-head{background:#11151e;color:#fff;border-bottom:1px solid #ffffff14}.lightbox .round-control{background:#ffffff12;color:#fff}
@media(max-width:720px){.checkout-layout{grid-template-columns:1fr;gap:16px}.checkout-intro{padding:4px 0 0}.checkout-intro h2{font-size:28px;margin:16px 0 10px}.checkout-intro p{max-width:none;margin:0}.checkout-total{display:none}.checkout-steps{display:flex;gap:10px;justify-content:space-between;font-size:11px;margin:24px 0 4px}.checkout-steps li{gap:6px}.checkout-steps li:before{width:23px;height:23px;font-size:9px}.checkout-form{padding-top:4px}.checkout-form>label{margin-bottom:22px}.checkout-form input:not([type=radio]),.checkout-form textarea,.checkout-form .phone-input select,.checkout-form .name-input select{font-size:16px}.checkout-form .phone-input select{width:126px}.checkout-actions{gap:8px}.checkout-actions .button{font-size:12px}.success-view{padding:20px 0}.success-view h2{font-size:29px}.success-actions{gap:20px}.success-receipt{padding:18px}.dialog-body:has(.checkout-layout){padding-bottom:max(24px,env(safe-area-inset-bottom))}.inquiry-summary{flex-wrap:wrap}}

/* ============================================================================
   姓名 + 称谓（2026-09-26）
   ----------------------------------------------------------------------------
   模板见 st-commerce-v2.js 的 nameFieldMarkup()，注册 / 联系资料 / 联系与配送
   三个表单共用同一段：`<label>客户姓名 … <span class="name-input">input + select</span></label>`。
   「先生 / 女士」刻意做成**独立的下拉**而不是塞进姓名文本 —— 它要单独入库
   （inquiries.contact_title / Supabase user_metadata.title），也方便 i18n。

   ⚠️ 必须写 `.checkout-form .name-input > input|select` 这种三段选择器：
      上面的 `.checkout-form input:not([type=radio]),.checkout-form select{width:100%}`
      会把两个控件各撑成一整行，于是在竖排表单里变成「姓名」「称谓」上下两行，
      看起来像凭空多出一个字段。
   ⚠️ 这里**不要**写 font-size：窄屏那段 `@media(max-width:720px)` 把表单控件设成
      16px 防 iOS 聚焦缩放，而它在本文件里更靠前；晚出现的无媒体查询规则会把 16px 压掉。
   ⚠️ `.checkout-form select` 的基础样式含 `margin-top:10px`：flex 行的两个控件
      都带同样的 margin，所以仍然对齐，不用清掉。 */
.checkout-form .name-input{display:flex;gap:8px;align-items:stretch}
.checkout-form .name-input>input{flex:1 1 auto;min-width:0}
.checkout-form .name-input>select{flex:0 0 auto;width:112px}
/* 窄屏把字号提到 16px（防 iOS 聚焦自动缩放，见上面那条移动端规则）之后，
   「ຄຳເອີ້ນ / ທ່ານ / ນາງ」会比中文长不少 ⇒ 下拉跟着放宽一点，别把文字截掉。 */
@media(max-width:720px){.checkout-form .name-input>select{width:120px}}