@charset "UTF-8";
/* ==========================================================================
   checkout_one_confirmation — Luxe 结账确认页皮肤
   --------------------------------------------------------------------------
   设计定位：这不是「填表页」，是付款前最后一眼的**凭据**。
   上一步 checkout_one 是「填」，这一步是「核」——所以刻意换了节奏：
     · 上部信息区不用卡片，只用发丝线（安静）
     · 金额明细做成真正的发票行，数字等宽对齐
     · 付款区收在右侧 420px，紧贴合计数，视线不回跳
     · 金只用在两处：合计数、按钮焦点

   与 checkout_luxe.css 共用同一套 --lx-* 令牌（该文件已在本页加载），
   不引入任何新色。所有规则以 body#checkoutoneconfirmationBody 限定 ——
   本页之外零影响，删掉本文件即完全回退。

   本文件同时纠正 checkout_luxe.css 的三处「误伤」（详见 §3 / §4 / §6）：
     · 它把 #cartContentsDisplay 去表格化成窄栏清单，本页是整页主表，需还原
     · 它隐藏了数量列与表头，确认页恰恰最需要「买了几件」
     · 它按 .ot-title/.ot-text 排版金额，而真实类名是 .lineTitle/.totalBox，
       于是值跑到左边、名跑到右边，还剩一行 Tax 走老式浮动 —— 一坨糊在一起
   （以上纯 CSS 即可修，不动任何 PHP 模板。）
   ========================================================================== */

/* ==========================================================================
   1. 页面外壳
   ========================================================================== */
body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay {
    /* 现状是 1394px 满幅：商品名在左、价格在 1200px 外的右边，
       眼睛要走一趟马拉松。收到 1060px，价目落在一臂之内。 */
    width: auto !important;
    max-width: 1060px !important;
    margin: 0 auto !important;
    padding: 4px 24px 96px !important;

    font-size: 14.5px;
    line-height: 1.7;
    color: var(--lx-text-2);
    -webkit-font-smoothing: antialiased;
}

/* 页面标题：Playfair + 一截金线，代替原来那条灰 hr */
body#checkoutoneconfirmationBody #checkoutConfirmDefaultHeading {
    margin: 0 0 0 !important;
    padding: 0 !important;
    font-family: 'Playfair Display', Georgia, 'Songti SC', serif !important;
    font-size: clamp(30px, 3.2vw, 42px) !important;
    font-weight: 400 !important;
    line-height: 1.12 !important;
    letter-spacing: -.012em !important;
    color: var(--lx-text) !important;
    text-transform: none !important;
}

body#checkoutoneconfirmationBody #checkoutConfirmDefaultHeading::after {
    content: '';
    display: block;
    width: 64px;
    height: 1px;
    margin-top: 24px;
    background: var(--lx-gold);
}

/* 分区横线：模板自带的 <hr> 正好落在每个区块之间，直接用，不另造 */
body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay > hr {
    height: 0 !important;
    margin: 52px 0 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--lx-line) !important;
    background: none !important;
    clear: both;
}

/* 模板用来清浮动的 <br>，不需要占位 */
body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay > br.clearBoth {
    display: none !important;
}

/* ==========================================================================
   2. 地址区：Billing / Delivery 两栏
   --------------------------------------------------------------------------
   模板用 .back / .forward 浮动，但宽度由内容决定（实测 199px vs 363px），
   左右不对称。这里把两栏钉成等宽，并在中间补一条竖向发丝线。
   ========================================================================== */
body#checkoutoneconfirmationBody #checkoutBillto,
body#checkoutoneconfirmationBody #checkoutShipto {
    margin: 40px 0 0 !important;
    padding: 0 !important;
    width: calc(50% - 34px) !important;
    max-width: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: left !important;
}

body#checkoutoneconfirmationBody #checkoutBillto {
    float: left !important;
}

body#checkoutoneconfirmationBody #checkoutShipto {
    float: right !important;
    padding-left: 34px !important;
    border-left: 1px solid var(--lx-line) !important;
}

/* 区块小标签（BILLING ADDRESS / DELIVERY ADDRESS） */
body#checkoutoneconfirmationBody #checkoutBillto > h2,
body#checkoutoneconfirmationBody #checkoutShipto > h2 {
    float: left;
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
    letter-spacing: .19em !important;
    text-transform: uppercase !important;
    color: var(--lx-text-2) !important;
    border: 0 !important;
}

/* 地址正文 */
body#checkoutoneconfirmationBody #checkoutBillto address,
body#checkoutoneconfirmationBody #checkoutShipto address {
    clear: both;
    margin: 12px 0 0 !important;
    font-family: inherit !important;
    font-style: normal !important;
    font-size: 14.5px !important;
    line-height: 1.85 !important;
    letter-spacing: .005em;
    color: var(--lx-text) !important;
}

/* 第二组小标签（PAYMENT METHOD / SHIPPING METHOD） */
body#checkoutoneconfirmationBody #checkoutBillto > h3,
body#checkoutoneconfirmationBody #checkoutShipto > h3 {
    clear: both;
    margin: 30px 0 0 !important;
    padding: 22px 0 0 !important;
    font-family: inherit !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
    letter-spacing: .19em !important;
    text-transform: uppercase !important;
    color: var(--lx-text-2) !important;
    border: 0 !important;
    border-top: 1px solid var(--lx-line) !important;
}

/* 取值（Credit Card / USPS Priority Mail…）
   ⚠ 主题给 h4 加了 text-transform:uppercase，深色下还会单独染金；
   这里一律还原成正常大小写的墨色，读起来才像人话。 */
body#checkoutoneconfirmationBody #checkoutBillto > h4,
body#checkoutoneconfirmationBody #checkoutShipto > h4 {
    margin: 7px 0 0 !important;
    font-family: inherit !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--lx-text) !important;
}

/* 支付模块偶尔会塞一段提示 */
body#checkoutoneconfirmationBody #checkoutBillto .important,
body#checkoutoneconfirmationBody #checkoutShipto .important {
    margin: 14px 0 0 !important;
    padding: 12px 14px !important;
    border: 1px solid var(--lx-line) !important;
    border-left: 2px solid var(--lx-gold) !important;
    background: var(--lx-card-2) !important;
    font-size: 13px !important;
    color: var(--lx-text-2) !important;
}

/* ==========================================================================
   3. 商品表：还原成真正的表格
   --------------------------------------------------------------------------
   checkout_luxe.css 为了让这张表塞进 338px 的右侧摘要栏，把它整个「去表格化」
   （table/tr/td 全设 block、隐藏数量列与表头、金额染金）。那套在摘要栏是对的，
   搬到本页的整页主表就变成了信息丢失：看不出买了几件、也没有列名。

   这里用更高的特异性把它逐条还原。选择器 (3,0,1) 压过 luxe 的 (1,0,1) /
   (2,0,0)，金额颜色额外加 !important（luxe 那条带 !important）。
   ========================================================================== */
body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #cartContentsDisplay,
body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #cartContentsDisplay > tbody {
    display: table !important;
    width: 100% !important;
    max-width: none !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    clear: both;
    margin: 0 !important;
}

body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #cartContentsDisplay > tbody {
    display: table-row-group !important;
}

body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #cartContentsDisplay tr {
    display: table-row !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #cartContentsDisplay th,
body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #cartContentsDisplay td {
    display: table-cell !important;
    /* 这里不要写 width:auto —— 这条规则是 (3,0,2)，比下面定列宽的
       (3,0,1) 还高，会把「数量列 76px」压回自适应（实测：QTY. 与 PRODUCTS 粘在一起）。 */
    padding: 0 !important;
    border: 0 !important;
    vertical-align: top !important;
    text-align: left;
}

/* 表头：小标签 + 一条实心发丝线 */
body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #cartContentsDisplay .cartTableHeading {
    display: table-row !important;
}

body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #cartContentsDisplay .cartTableHeading th {
    padding: 20px 0 13px !important;
    border-bottom: 1px solid var(--lx-line-strong) !important;
    font-family: inherit !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: .19em !important;
    text-transform: uppercase !important;
    color: var(--lx-text-2) !important;
    white-space: nowrap;
}

/* 列宽：数量窄、金额定宽右对齐，商品名占余下所有空间 */
body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #ccQuantityHeading,
body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay .cartQuantity {
    width: 76px !important;
    padding-right: 22px !important;
}

body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #ccTotalHeading,
body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay .cartTotalDisplay {
    width: 140px !important;
    text-align: right !important;
    white-space: nowrap;
}

/* 数据行 */
body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #cartContentsDisplay .cartQuantity,
body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #cartContentsDisplay .cartProductDisplay,
body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #cartContentsDisplay .cartTotalDisplay {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
    border-bottom: 1px solid var(--lx-line) !important;
}

body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #cartContentsDisplay tr:last-child td {
    border-bottom: 0 !important;
}

body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #cartContentsDisplay .cartQuantity {
    font-family: inherit !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    letter-spacing: .04em;
    color: var(--lx-text-2) !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #cartContentsDisplay .cartProductDisplay {
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: .005em;
    color: var(--lx-text) !important;
    white-space: normal !important;
}

body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #cartContentsDisplay .cartTotalDisplay {
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    letter-spacing: .01em;
    /* luxe 把这里染成金色并带 !important；本页只有合计数该是金色 */
    color: var(--lx-text) !important;
    font-variant-numeric: tabular-nums;
    text-align: right !important;
}

/* 属性：做成轻量胶囊，替代原来一行一行的 Options: Value */
body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #cartContentsDisplay .cartAttribsList {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #cartContentsDisplay .cartAttribsList li {
    margin: 0 !important;
    padding: 3px 10px !important;
    border: 1px solid var(--lx-line-strong) !important;
    border-radius: 999px !important;
    background: transparent !important;
    font-family: inherit !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
    letter-spacing: .03em;
    color: var(--lx-text-2) !important;
}

/* ==========================================================================
   4. 区块标题 + 右侧 EDIT
   --------------------------------------------------------------------------
   模板里标题与 EDIT 是紧邻的兄弟节点，末尾还有 <br class="clearBoth"> ——
   本来就是为浮动准备的。标题左浮、EDIT 右浮，两者才会落在同一行；
   若只给 EDIT 加 float:right，它会掉到标题下一行（实测过）。
   ========================================================================== */
body#checkoutoneconfirmationBody #checkoutConfirmDefaultHeadingComments,
body#checkoutoneconfirmationBody #checkoutConfirmDefaultHeadingCart {
    float: left;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Playfair Display', Georgia, 'Songti SC', serif !important;
    font-size: 19px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
    color: var(--lx-text) !important;
    border: 0 !important;
}

/* EDIT 按钮：模板输出的是 45×18 的 small_edit.gif，换成文字链
   —— 注意只圈「地址区 / 备注 / 商品」这三处的 EDIT 行。确认按钮本身也是
   .buttonRow.forward，早期版本用 #checkoutOneConfirmationDisplay .buttonRow.forward
   一把抓，结果把按钮压成 144px 靠右的一小块（实测）。这里改用容器限定。 */
body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay > .buttonRow.forward,
body#checkoutoneconfirmationBody #checkoutBillto .buttonRow.forward,
body#checkoutoneconfirmationBody #checkoutShipto .buttonRow.forward {
    float: right !important;
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
}

body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay > .buttonRow.forward img,
body#checkoutoneconfirmationBody #checkoutBillto .buttonRow.forward img,
body#checkoutoneconfirmationBody #checkoutShipto .buttonRow.forward img {
    display: none !important;
}

body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay > .buttonRow.forward a,
body#checkoutoneconfirmationBody #checkoutBillto .buttonRow.forward a,
body#checkoutoneconfirmationBody #checkoutShipto .buttonRow.forward a {
    display: inline-block !important;
    padding: 0 0 3px !important;
    border: 0 !important;
    border-bottom: 1px solid transparent !important;
    background: none !important;
    font-family: inherit !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
    letter-spacing: .19em !important;
    text-transform: uppercase !important;
    color: var(--lx-text-2) !important;
    text-decoration: none !important;
    transition: color .25s ease, border-color .25s ease;
}

/* 图片按钮被隐藏后，用文案补回可点击的含义（与 alt="Edit" 一致） */
body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay > .buttonRow.forward a::after,
body#checkoutoneconfirmationBody #checkoutBillto .buttonRow.forward a::after,
body#checkoutoneconfirmationBody #checkoutShipto .buttonRow.forward a::after {
    content: 'Edit';
}

body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay > .buttonRow.forward a:hover,
body#checkoutoneconfirmationBody #checkoutBillto .buttonRow.forward a:hover,
body#checkoutoneconfirmationBody #checkoutShipto .buttonRow.forward a:hover,
body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay > .buttonRow.forward a:focus-visible,
body#checkoutoneconfirmationBody #checkoutBillto .buttonRow.forward a:focus-visible,
body#checkoutoneconfirmationBody #checkoutShipto .buttonRow.forward a:focus-visible {
    color: var(--lx-gold) !important;
    border-bottom-color: var(--lx-gold) !important;
    outline: 0;
}

/* ==========================================================================
   5. 备注
   ========================================================================== */
body#checkoutoneconfirmationBody #checkoutConfirmDefaultHeadingComments + .buttonRow + div {
    clear: both;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--lx-text-2) !important;
}

/* ==========================================================================
   6. 金额明细
   --------------------------------------------------------------------------
   真实结构（includes/classes/order_total.php → tpl_modules_order_totals.php）：
       <div id="otsubtotal">
           <div class="totalBox larger forward">$210.00</div>   ← 值在前
           <div class="lineTitle larger forward">Sub-Total:</div>
       </div><br class="clearBoth">
   两个子元素都 .forward（float:right），靠浮动凑出「名在左、值在右」。

   checkout_luxe.css 给 #otsubtotal/#otshipping/#ottotal 上了 display:flex +
   justify-content:space-between，但它配套的 .ot-title/.ot-text 两个类在真实标记里
   根本不存在（真实类名是 .lineTitle/.totalBox）——于是浮动被 flex 忽略、DOM 顺序
   恢复生效，变成「$210.00 …… Sub-Total:」，值跑到了左边；#ottax 又不在它的名单里，
   仍走浮动。这就是线上那一坨糊在一起的原因。

   这里统一接管：每个 #otxxx 都是 flex 行，用 order 把名摆回左侧，值靠右。
   ========================================================================== */
body#checkoutoneconfirmationBody #orderTotals {
    display: flex !important;
    flex-direction: column !important;
    width: var(--cof-rail, 420px) !important;
    max-width: 100% !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    clear: both;
}

body#checkoutoneconfirmationBody #orderTotals > div {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 9px 0 !important;
}

/* 模板用 <br class="clearBoth"> 断行；flex 下它们只会偷偷撑高 */
body#checkoutoneconfirmationBody #orderTotals > br {
    display: none !important;
}

body#checkoutoneconfirmationBody #orderTotals .lineTitle {
    order: 1;
    float: none !important;
    flex: 1 1 auto;
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: .05em !important;
    color: var(--lx-text-2) !important;
    text-align: left !important;
}

body#checkoutoneconfirmationBody #orderTotals .totalBox {
    order: 2;
    float: none !important;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    letter-spacing: .01em !important;
    color: var(--lx-text) !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 合计行：金线 + Playfair，全页唯一的重音 */
body#checkoutoneconfirmationBody #orderTotals #ottotal {
    margin-top: 6px !important;
    padding-top: 17px !important;
    border-top: 1px solid var(--lx-gold) !important;
}

body#checkoutoneconfirmationBody #orderTotals #ottotal .lineTitle {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .19em !important;
    text-transform: uppercase !important;
    color: var(--lx-text-2) !important;
}

body#checkoutoneconfirmationBody #orderTotals #ottotal .totalBox {
    font-family: 'Playfair Display', Georgia, 'Songti SC', serif !important;
    font-size: 27px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    color: var(--lx-gold) !important;
}

/* ==========================================================================
   7. 付款区
   --------------------------------------------------------------------------
   Stripe 的 Payment Element 由 JS 插在 form 之前（$('#checkout_confirmation').before()），
   两者是兄弟节点。这里把「卡信息」与「确认按钮」拼成同一张卡片：
     · #payment-form 下边框去掉、下圆角归零、margin-bottom -1px
     · form 上圆角归零，它的上边框正好成为两者之间的分隔线
     · 若某支付方式没有 Payment Element，form 自己仍是一张完整卡片
   ========================================================================== */
body#checkoutoneconfirmationBody {
    --cof-rail: 420px;
}

body#checkoutoneconfirmationBody #payment-form {
    display: block !important;
    float: none !important;
    width: var(--cof-rail) !important;
    max-width: 100% !important;
    margin: 46px 0 -1px auto !important;
    padding: 26px 26px 24px !important;
    box-sizing: border-box;
    background: var(--lx-card) !important;
    border: 1px solid var(--lx-line) !important;
    border-top: 2px solid var(--lx-gold) !important;
    border-radius: 14px 14px 0 0 !important;
    box-shadow: var(--lx-shadow);
}

body#checkoutoneconfirmationBody #payment-form * {
    box-sizing: border-box;
}

body#checkoutoneconfirmationBody form#checkout_confirmation {
    display: block !important;
    float: none !important;
    width: var(--cof-rail) !important;
    max-width: 100% !important;
    margin: 0 0 0 auto !important;
    padding: 20px 26px 26px !important;
    box-sizing: border-box;
    background: var(--lx-card) !important;
    border: 1px solid var(--lx-line) !important;
    border-radius: 0 0 14px 14px !important;
    box-shadow: var(--lx-shadow);
}

/* ==========================================================================
   8. 确认按钮
   --------------------------------------------------------------------------
   模板输出的是 input[type=image] → 1990 年代的 button_confirm_order.gif，
   而主题没有 ts_modern/buttons 目录，直接回落到 template_default。
   CSS 无法给替换元素换文案，所以：
     · .buttonRow 变成按钮本体（配色/圆角/字距都跟 checkout_one 的主按钮一致）
     · 真正的 input 铺满整块并完全透明，点击、键盘回车、表单提交都仍然走它
     · 焦点环挂在 :focus-within 上，屏幕阅读器读到的仍是 alt="Confirm Order"
   ========================================================================== */
body#checkoutoneconfirmationBody #checkoutOneConfirmationButtons {
    margin: 0 !important;
    padding: 0 !important;
}

body#checkoutoneconfirmationBody #checkoutOneConfirmationButtons .buttonRow {
    position: relative !important;
    float: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 54px;
    margin: 8px 0 0 !important;
    padding: 16px 22px !important;
    box-sizing: border-box;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    background: var(--lx-btn-bg) !important;
    color: var(--lx-btn-fg) !important;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
    transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .12s ease;
}

body#checkoutoneconfirmationBody #checkoutOneConfirmationButtons .buttonRow::after {
    content: 'Confirm Order';
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: inherit;
}

body#checkoutoneconfirmationBody #checkoutOneConfirmationButtons .buttonRow:hover {
    background: var(--lx-btn-hover-bg) !important;
    color: var(--lx-btn-hover-fg) !important;
    box-shadow: 0 8px 26px rgba(201, 162, 39, .38);
}

body#checkoutoneconfirmationBody #checkoutOneConfirmationButtons .buttonRow:active {
    transform: scale(.993);
}

body#checkoutoneconfirmationBody #checkoutOneConfirmationButtons .buttonRow:focus-within {
    outline: 2px solid var(--lx-gold);
    outline-offset: 3px;
}

/* 真正接收点击的透明图层 */
body#checkoutoneconfirmationBody #btn_submit {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    cursor: pointer;
    z-index: 2;
}

body#checkoutoneconfirmationBody #checkoutOneConfirmationButtons .clearBoth {
    display: none !important;
}

/* 提交中的 loading 层：模板内联 display:none，JS 需要时再显示 */
body#checkoutoneconfirmationBody #checkoutOneConfirmationLoading {
    clear: both;
    margin: 28px 0 0 !important;
    font-size: 12.5px;
    letter-spacing: .04em;
    color: var(--lx-text-2) !important;
    text-align: right;
}

/* ==========================================================================
   9. 焦点可见性（键盘用户）
   ========================================================================== */
body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay a:focus-visible,
body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay input:focus-visible,
body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay button:focus-visible {
    outline: 2px solid var(--lx-gold);
    outline-offset: 3px;
}

/* ==========================================================================
   10. 响应式
   ========================================================================== */
@media (max-width: 900px) {
    body#checkoutoneconfirmationBody {
        --cof-rail: 100%;
    }

    body#checkoutoneconfirmationBody #checkoutBillto,
    body#checkoutoneconfirmationBody #checkoutShipto {
        float: none !important;
        width: 100% !important;
        margin-top: 34px !important;
    }

    body#checkoutoneconfirmationBody #checkoutShipto {
        padding-left: 0 !important;
        border-left: 0 !important;
    }

    body#checkoutoneconfirmationBody #payment-form,
    body#checkoutoneconfirmationBody form#checkout_confirmation {
        width: 100% !important;
        margin-right: 0 !important;
    }

    body#checkoutoneconfirmationBody #orderTotals {
        width: 100% !important;
    }
}

/* 手机：表格收成「数量 + 商品名 / 价格」两行一组，不再横向挤压 */
@media (max-width: 620px) {
    body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay {
        padding: 0 18px 64px !important;
    }

    body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #cartContentsDisplay,
    body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #cartContentsDisplay > tbody {
        display: block !important;
    }

    body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #cartContentsDisplay .cartTableHeading {
        display: none !important;
    }

    body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #cartContentsDisplay tr {
        display: block !important;
        padding: 20px 0 !important;
        border-bottom: 1px solid var(--lx-line) !important;
    }

    body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #cartContentsDisplay td {
        display: block !important;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
    }

    body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #cartContentsDisplay .cartQuantity {
        margin-bottom: 4px !important;
        font-size: 10.5px !important;
        letter-spacing: .16em !important;
        text-transform: uppercase;
    }

    body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #cartContentsDisplay .cartTotalDisplay {
        margin-top: 8px !important;
        text-align: left !important;
        font-size: 14px !important;
    }

    body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay #cartContentsDisplay tr:last-child {
        border-bottom: 0 !important;
    }

    body#checkoutoneconfirmationBody #orderTotals #ottotal .totalBox {
        font-size: 24px !important;
    }

    body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay > hr {
        margin: 40px 0 24px !important;
    }
}

/* ==========================================================================
   11. 打印：确认页经常被买家存成 PDF 当凭证
   ========================================================================== */
@media print {
    body#checkoutoneconfirmationBody {
        background: #fff !important;
    }

    body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay {
        max-width: 100% !important;
        padding: 0 !important;
    }

    body#checkoutoneconfirmationBody #payment-form,
    body#checkoutoneconfirmationBody form#checkout_confirmation,
    body#checkoutoneconfirmationBody .buttonRow {
        display: none !important;
    }

    body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay,
    body#checkoutoneconfirmationBody #orderTotals #ottotal .totalBox {
        color: #000 !important;
    }
}

/* ==========================================================================
   12. 尊重减弱动态偏好
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    body#checkoutoneconfirmationBody #checkoutOneConfirmationDisplay *,
    body#checkoutoneconfirmationBody #checkoutOneConfirmationButtons * {
        transition: none !important;
    }

    body#checkoutoneconfirmationBody #checkoutOneConfirmationButtons .buttonRow:active {
        transform: none !important;
    }
}