/* ==========================================================================
   ZODIAC AMULET — 区块结账页 + 区块购物车页 黑金皮肤（WooCommerce Blocks）
   2026-10-08 建 · 2026-10-09 扩展到购物车页
   作用域：.wp-block-woocommerce-checkout / .wp-block-woocommerce-cart

   为什么需要它：主题 style.css 里**一条** wc-block / checkout 样式都没有（实测 grep = 0），
   于是结账页直接裸奔 WooCommerce 默认浅色皮肤 →
     ① 文本框纯白底 + 深灰字，和黑金站完全割裂；
     ② ★ 国家/州 的 <select> 是「深色字 rgb(43,45,47) + 透明底」= 黑底黑字，根本看不清；
     ③ 全部圆角 4px、下单按钮透明无样式，不像本站。
   ★ 2026-10-09 起同时管**区块购物车页**（`/cart/`，实测它是 `.wp-block-woocommerce-cart`，
     不是 shortcode 购物车）：购物车其余部分主题已渲染成深色，**只有优惠券输入框是纯白底
     rgb(255,255,255)**（实测整块里唯一的白底元素）→ 复用同一套皮肤；
     并让优惠券面板**常开不折叠**（默认 `aria-expanded="false"` + React 条件渲染，
     只能靠 sa-checkout-coupon.js 点开，CSS 做不到）。
     ★ 另：「Proceed to Checkout」(`.wc-block-cart__submit-button`) 原本是 Woo 默认的
     **直角灰块**（`border-radius:0` / bg `rgb(50,55,60)` / 16px 常规体）→ 已并入第 8 节，
     与结账页「Place order」共用同一套金渐变胶囊（Melo 反馈"这个框太方正了"）。
     ⚠️ 两页的优惠券 DOM 类名完全一致（`__panel__button` / `__input` / `__button` 实测同名），
        所以第 7 节的选择器**两个作用域一起写** —— 改一处两页同步，避免样式漂移。
     ★ 另：第 13 节管**页面级居中** —— 这两页被主题的 `.sa-page-body{max-width:840px;margin:0 0 44px}`
       限窄且左对齐（PC 1920 右侧空 960px、iPad 1024 空 144px）→ 已放宽到 1200px 并居中。
   本文件只改外观，不动任何结构、文案或功能。

   ⚠️ 关键属性带 !important：wc-blocks.css / checkout.css 的加载顺序不可控，
      不这样压不住它们的默认值。
   ========================================================================== */

.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart {
  /* 设计令牌（字面量，不依赖 .sa-root 的 CSS 变量是否继承到本页） */
  --sa-c-gold:     #c5a059;
  --sa-c-gold-hi:  #dcbb7c;
  --sa-c-gold-lo:  #a8853f;
  --sa-c-parch:    #f4f1ea;
  --sa-c-dim:      rgba(244, 241, 234, 0.64);
  --sa-c-soft:     rgba(244, 241, 234, 0.50);
  --sa-c-faint:    rgba(244, 241, 234, 0.34);
  --sa-c-line:     rgba(244, 241, 234, 0.10);
  --sa-c-goldline: rgba(197, 160, 89, 0.26);
  --sa-c-panel:    #171614;
  --sa-c-wash:     rgba(244, 241, 234, 0.05);
  --sa-c-ink:      #14120e;
}

/* ---------- 1. 底板 ---------- */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-checkout .wc-block-components-main,
.wp-block-woocommerce-checkout .wc-block-components-sidebar {
  background-color: transparent !important;
  color: var(--sa-c-dim) !important;
}

/* ---------- 2. 步骤标题：parchment + 5px 金菱形 ---------- */
.wp-block-woocommerce-checkout .wc-block-components-checkout-step {
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--sa-c-goldline) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-step:last-child {
  border-bottom: 0 !important;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title {
  position: relative;
  padding-left: 18px !important;
  color: var(--sa-c-parch) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 7px;
  height: 7px;
  background: var(--sa-c-gold);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(197, 160, 89, 0.55);
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__description {
  color: var(--sa-c-soft) !important;
  padding-left: 18px;
}

/* ---------- 3. 文本输入框（原为纯白底深灰字） ---------- */
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-address-form input,
.wp-block-woocommerce-checkout input[type="text"],
.wp-block-woocommerce-checkout input[type="email"],
.wp-block-woocommerce-checkout input[type="tel"],
.wp-block-woocommerce-checkout input[type="number"] {
  background-color: var(--sa-c-wash) !important;
  border: 1px solid rgba(197, 160, 89, 0.22) !important;
  border-radius: 10px !important;
  color: var(--sa-c-parch) !important;
  font-family: inherit !important;
  min-height: 54px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  transition: border-color 0.3s ease, box-shadow 0.35s ease, background-color 0.3s ease;
}
.wp-block-woocommerce-checkout .wc-block-components-text-input input:hover,
.wp-block-woocommerce-checkout .wc-block-components-address-form input:hover {
  border-color: var(--sa-c-goldline) !important;
  background-color: rgba(244, 241, 234, 0.07) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout .wc-block-components-address-form input:focus,
.wp-block-woocommerce-checkout input[type="text"]:focus,
.wp-block-woocommerce-checkout input[type="email"]:focus,
.wp-block-woocommerce-checkout input[type="tel"]:focus {
  outline: none !important;
  border-color: var(--sa-c-gold) !important;
  background-color: rgba(10, 10, 10, 0.92) !important;
  box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.14), 0 0 24px rgba(197, 160, 89, 0.16) !important;
}
/* 浮动标签：未填时当 placeholder 用，必须够亮才看得清 */
.wp-block-woocommerce-checkout .wc-block-components-text-input label,
.wp-block-woocommerce-checkout .wc-block-components-address-form label {
  color: var(--sa-c-soft) !important;
  font-family: inherit !important;
}
.wp-block-woocommerce-checkout .wc-block-components-text-input.is-active label,
.wp-block-woocommerce-checkout .wc-block-components-text-input:focus-within label {
  color: var(--sa-c-gold) !important;
  font-size: 11px !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
/* 校验通过时 Woo 会把 label 变绿，统一改成金 */
.wp-block-woocommerce-checkout .wc-block-components-text-input.is-active.has-error label {
  color: #e0836f !important;
}
.wp-block-woocommerce-checkout input::placeholder {
  color: var(--sa-c-faint) !important;
  opacity: 1;
}

/* ---------- 4. ★ 下拉框（国家/州）——原为深色字 + 透明底 = 看不清 ---------- */
.wp-block-woocommerce-checkout .wc-blocks-components-select__container {
  background-color: var(--sa-c-wash) !important;
  border: 1px solid rgba(197, 160, 89, 0.22) !important;
  border-radius: 10px !important;
  min-height: 54px !important;
  transition: border-color 0.3s ease, box-shadow 0.35s ease, background-color 0.3s ease;
}
.wp-block-woocommerce-checkout .wc-blocks-components-select__container:hover {
  border-color: var(--sa-c-goldline) !important;
  background-color: rgba(244, 241, 234, 0.07) !important;
}
.wp-block-woocommerce-checkout .wc-blocks-components-select__container:focus-within {
  border-color: var(--sa-c-gold) !important;
  background-color: rgba(10, 10, 10, 0.92) !important;
  box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.14) !important;
}
.wp-block-woocommerce-checkout .wc-blocks-components-select__select {
  color: var(--sa-c-parch) !important;
  background-color: transparent !important;
  font-family: inherit !important;
  font-size: 16px !important;
}
/* 展开后的选项列表在 Windows/Chrome 上取 option 自身的底色 → 必须显式给深底浅字 */
.wp-block-woocommerce-checkout .wc-blocks-components-select__select option {
  background-color: var(--sa-c-panel) !important;
  color: var(--sa-c-parch) !important;
}
.wp-block-woocommerce-checkout .wc-blocks-components-select__label {
  color: var(--sa-c-gold) !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.wp-block-woocommerce-checkout .wc-blocks-components-select__expand {
  color: var(--sa-c-gold) !important;
  fill: var(--sa-c-gold) !important;
  opacity: 0.85;
}

/* ---------- 5. 单选（配送方式 / 支付方式）---------- */
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option {
  position: relative;
  border: 1px solid rgba(197, 160, 89, 0.20) !important;
  border-radius: 12px !important;
  background-color: var(--sa-c-panel) !important;
  padding: 15px 18px 15px 50px !important;
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.35s ease;
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option + .wc-block-components-radio-control__option {
  margin-top: 10px;
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option:hover {
  border-color: var(--sa-c-goldline) !important;
  background-color: rgba(197, 160, 89, 0.06) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option-checked,
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option--checked-option-highlighted {
  border-color: var(--sa-c-gold) !important;
  background-color: rgba(197, 160, 89, 0.10) !important;
  box-shadow: 0 0 0 1px rgba(197, 160, 89, 0.35), 0 0 22px rgba(197, 160, 89, 0.12);
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control__input {
  accent-color: var(--sa-c-gold) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control__label,
.wp-block-woocommerce-checkout .wc-block-components-radio-control__label-group {
  color: var(--sa-c-parch) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control__secondary-label,
.wp-block-woocommerce-checkout .wc-block-components-radio-control__description,
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-content {
  color: var(--sa-c-soft) !important;
  font-size: 13.5px !important;
  line-height: 1.6;
}

/* ---------- 6. 订单摘要 / 合计 ---------- */
.wp-block-woocommerce-checkout .wc-block-components-order-summary,
.wp-block-woocommerce-checkout .wc-block-components-sidebar .wc-block-components-panel {
  background-color: var(--sa-c-panel) !important;
  border: 1px solid var(--sa-c-goldline) !important;
  border-radius: 16px !important;
  overflow: hidden;
}
/* ★ 2026-10-09 修：数量角标 __quantity 的上半圆被 overflow:hidden 切平
   （Melo 反馈"这个 1 貌似被挡住了一点"）
   根因：Woo 默认 `.wc-block-components-order-summary-item__quantity{position:absolute;top:0;
        transform:translate(50%,-50%)}` —— 圆心正压在缩略图右上角，比 item 顶端还高出 2px；
        而上面那条 overflow:hidden（为配合 border-radius:16px 裁齐内层）是在 padding-box 处裁切
        ⇒ 角标顶部被切平。实测 CLIPPED_PX=2；同摘要里**第二件**商品的角标就是正圆，对比极明显。
   修法：容器加 6px 顶部内边距。overflow:hidden 只裁 padding-box 之外，padding 之内照常可见
        ⇒ 既保住圆角裁切，又让角标完整露出，顺带给第一件商品与上边框之间留出呼吸感。
   ⚠️ 别用 overflow:visible 替代 —— 那样 panel__button 等内层的 hover 底色会顶穿 16px 圆角。 */
.wp-block-woocommerce-checkout .wc-block-components-order-summary {
  padding-top: 6px !important;
}
.wp-block-woocommerce-checkout .wc-block-components-panel__button {
  color: var(--sa-c-parch) !important;
  letter-spacing: 0.02em;
}
.wp-block-woocommerce-checkout .wc-block-components-panel__button:hover {
  color: var(--sa-c-gold-hi) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-product-name,
.wp-block-woocommerce-checkout .wc-block-components-product-price__value,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__total-price {
  color: var(--sa-c-parch) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-product-metadata,
.wp-block-woocommerce-checkout .wc-block-components-product-details,
.wp-block-woocommerce-checkout .wc-block-components-product-details__name,
.wp-block-woocommerce-checkout .wc-block-components-product-details__value,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__individual-price {
  color: var(--sa-c-soft) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout .wc-block-components-totals-item,
.wp-block-woocommerce-checkout .wc-block-components-totals-item__label,
.wp-block-woocommerce-checkout .wc-block-components-totals-item__value {
  color: var(--sa-c-dim) !important;
  border-color: var(--sa-c-goldline) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item {
  border-bottom: 1px solid rgba(244, 241, 234, 0.07) !important;
}
/* 商品名与价格挤在一起 → 给名字留出让位，价格不换行 */
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__description {
  padding-right: 12px;
}
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__total-price,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__individual-price,
.wp-block-woocommerce-checkout .wc-block-components-product-price__value {
  white-space: nowrap !important;
}
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__individual-price {
  color: var(--sa-c-faint) !important;
  font-size: 12.5px !important;
}
/* 数量角标顺手改成品牌金：Woo 默认是 `background:currentColor`（本站原值 = 半透明暖灰）+ 白字，
   在纯黑卡片上像一颗没上色的系统默认圆点。改成金底 + 近黑字，与主 CTA（金渐变 / 近黑字）同一套语言；
   外加一圈 2px 暗色描边，避免角标压在商品照片上糊成一片。
   作用域**同时写购物车页** —— 两页的合计行已强制一致（见下），角标同理，别让它们再漂移。 */
.wp-block-woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity,
.wp-block-woocommerce-cart .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
  background: var(--sa-c-gold) !important;
  color: #14120e !important;
  box-shadow: 0 0 0 2px rgba(18, 18, 18, 0.9) !important;
  font-weight: 600 !important;
}
.wp-block-woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span,
.wp-block-woocommerce-cart .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span {
  color: #14120e !important;
  font-weight: 600 !important;
  padding: 0 0.36em !important;
}
/* 合计那一行：加大 + 金色 —— ★ 购物车与结账页必须**完全一致**（2026-10-09 统一）
   改前实测：购物车 20px/600（Woo 默认 em 换算而来），结账页 19px/700（本节原值）
   ⇒ 同一笔合计，两个页面两个长相。现统一为 20px/600（600 与全站价格令牌一致）。
   ⚠️ 购物车页的合计同样在 `.wc-block-components-totals-footer-item` 里（实测），
      所以两个作用域一起写即可，不需要另开选择器。 */
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--sa-c-parch) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--sa-c-gold-hi) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-totals-item__description {
  color: var(--sa-c-soft) !important;
}

/* ---------- 7. 优惠券（★ 常开不折叠 + 输入框留白）—— 结账页 + 购物车页共用 ----------
   ★★ 本节选择器同时覆盖 .wp-block-woocommerce-checkout 与 .wp-block-woocommerce-cart：
      购物车页的优惠券 DOM 与结账页**类名完全一致**（2026-10-09 实测），
      所以不需要两套声明 —— 写一份、两页同步。
   ⚠️ 折叠开关的真实类名是 `.wc-block-components-panel__button`
      （原来写的 `__button--toggle` / `-link` **根本不存在** → 之前的优惠券样式从未生效）。
   ⚠️ 折叠是 **React 条件渲染**（收起时 `.wc-block-components-panel__content`
      压根不在 DOM 里）→ **CSS 无法强制展开**，必须靠 sa-checkout-coupon.js 自动点开。
   ⚠️ 点开后用 pointer-events:none 锁死，防止顾客又把它收起来。 */
.wp-block-woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button,
.wp-block-woocommerce-cart .wc-block-components-totals-coupon .wc-block-components-panel__button {
  color: var(--sa-c-gold) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0 0 10px 0 !important;
  min-height: 0 !important;
  pointer-events: none !important;
  cursor: default !important;
}
/* 常开状态不需要那个上下箭头 */
.wp-block-woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button-icon,
.wp-block-woocommerce-cart .wc-block-components-totals-coupon .wc-block-components-panel__button-icon {
  display: none !important;
}
.wp-block-woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__content,
.wp-block-woocommerce-cart .wc-block-components-totals-coupon .wc-block-components-panel__content {
  padding-top: 0 !important;
}

/* 输入框 + APPLY 并排，拉开一点间距 */
.wp-block-woocommerce-checkout .wc-block-components-totals-coupon__form,
.wp-block-woocommerce-cart .wc-block-components-totals-coupon__form {
  gap: 10px !important;
  align-items: stretch !important;
}

/* ★ 「拥挤」根因：Woo 默认给 input 四边 padding:16px，而这个框只有 46~50px 高，
   配 line-height:25px → 文字可用高度只剩十几 px，被上下挤扁。
   改法：**完全对齐其它输入框**（min-height 54 + 左右 16 内边距），
   上下内边距与行高**不要动** —— 那是 Woo 浮动标签的定位基准，动了标签就会压到文字上。 */
.wp-block-woocommerce-checkout .wc-block-components-totals-coupon__input input,
.wp-block-woocommerce-cart .wc-block-components-totals-coupon__input input {
  background-color: var(--sa-c-wash) !important;
  border: 1px solid rgba(197, 160, 89, 0.22) !important;
  border-radius: 10px !important;
  color: var(--sa-c-parch) !important;
  font-family: inherit !important;
  min-height: 54px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
/* ⛔ 千万不要写 top / line-height / 上下 padding / transform 的 !important 覆盖：
   试过一次 top:25px!important → 标签被钉死在框中央，输入文字被压在下面看不见。
   ★ 2026-10-09：购物车页的 label 与结账页**是同一套 DOM**，但购物车没有 is-active 态 →
     默认渲染成 16px 常规体浅灰（像 placeholder）；结账页是 11px 大写金字。
     Melo 要求购物车"换成结算界面那种"，所以把字号/颜色/大小写在这里钉死统一。
     ⚠️ 结账页本来就是 11px / 金 / 大写（实测 computed fontSize:11px、color:rgb(197,160,89)、
        textTransform:uppercase）→ 下面这三条对结账页是 no-op，不会造成回归。
     ⚠️ 两页的 top:25px + translateY(-11px) 本来就一致 → 不动。 */
.wp-block-woocommerce-checkout .wc-block-components-totals-coupon__input label,
.wp-block-woocommerce-cart .wc-block-components-totals-coupon__input label {
  left: 16px !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  color: var(--sa-c-gold) !important;
  text-transform: uppercase !important;
}

/* APPLY 按钮：真实类名 = `.wc-block-components-totals-coupon__button` */
.wp-block-woocommerce-checkout .wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button,
.wp-block-woocommerce-cart .wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button {
  min-height: 54px !important;
  height: auto !important;
  padding: 0 22px !important;
  border: 1px solid rgba(197, 160, 89, 0.5) !important;
  border-radius: 99px !important;
  background: rgba(197, 160, 89, 0.14) !important;
  color: var(--sa-c-gold) !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
.wp-block-woocommerce-checkout .wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button:hover:not(:disabled),
.wp-block-woocommerce-cart .wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button:hover:not(:disabled) {
  background: var(--sa-c-gold) !important;
  color: var(--sa-c-ink) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button:disabled,
.wp-block-woocommerce-cart .wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button:disabled {
  opacity: 0.55 !important;
}
/* 已应用的优惠券那行文字 / 链接 */
.wp-block-woocommerce-checkout .wc-block-components-totals-coupon-link,
.wp-block-woocommerce-cart .wc-block-components-totals-coupon-link {
  color: var(--sa-c-gold) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12px !important;
}

/* ---------- 8. 主按钮（金渐变胶囊）—— 结账页「Place order」+ 购物车页「Proceed to Checkout」----------
   ★ 2026-10-09：购物车页的 `.wc-block-cart__submit-button` 原本是 Woo 默认的**直角灰块**
     （实测 bg rgb(50,55,60) / border-radius **0px** / 字 16px 常规体），是整站唯一一个方角按钮，
     Melo 反馈"这个框太方正了"。它与结账页的「Place order」是同一个角色（页面主 CTA），
     所以这里把选择器合并，两页用**完全同一套**金渐变胶囊 + 大写小字距，视觉与结账页对齐。 */
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button {
  min-height: 56px !important;
  width: 100%;
  border: 0 !important;
  border-radius: 99px !important;
  background: linear-gradient(135deg, #c5a059 0%, #9e7d3b 100%) !important;
  color: var(--sa-c-ink) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 0 22px rgba(197, 160, 89, 0.26) !important;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease, filter 0.35s ease;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover:not(:disabled),
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 0 30px rgba(197, 160, 89, 0.42) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:disabled,
.wp-block-woocommerce-cart .wc-block-cart__submit-button[aria-disabled="true"] {
  opacity: 0.45 !important;
  box-shadow: none !important;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button .wc-block-components-button__text,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button span,
.wp-block-woocommerce-cart .wc-block-cart__submit-button .wc-block-components-button__text,
.wp-block-woocommerce-cart .wc-block-cart__submit-button span {
  color: var(--sa-c-ink) !important;
}

/* 其它次要按钮（返回上一页 / 编辑 / 登录切换等）统一描边胶囊
   ⚠️ 这里原来写 `:not(...__button--apply)` —— 该类名不存在，导致 APPLY 也被这条规则吃掉。
   真正的 APPLY 类名是 `.wc-block-components-totals-coupon__button`。 */
.wp-block-woocommerce-checkout .wc-block-components-button:not(.wc-block-components-checkout-place-order-button):not(.wc-block-components-totals-coupon__button) {
  border: 1px solid rgba(197, 160, 89, 0.5) !important;
  border-radius: 99px !important;
  background: rgba(197, 160, 89, 0.12) !important;
  color: var(--sa-c-gold) !important;
  font-family: inherit !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px !important;
}
.wp-block-woocommerce-checkout .wc-block-components-button:not(.wc-block-components-checkout-place-order-button):not(.wc-block-components-totals-coupon__button):hover {
  background: var(--sa-c-gold) !important;
  color: var(--sa-c-ink) !important;
}

/* ---------- 9. 复选框 / 备注 ---------- */
.wp-block-woocommerce-checkout .wc-block-components-checkbox__input {
  accent-color: var(--sa-c-gold) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-checkbox__label,
.wp-block-woocommerce-checkout .wc-block-components-checkbox label {
  color: var(--sa-c-dim) !important;
  font-size: 14px !important;
}
.wp-block-woocommerce-checkout textarea {
  background-color: var(--sa-c-wash) !important;
  border: 1px solid rgba(197, 160, 89, 0.22) !important;
  border-radius: 10px !important;
  color: var(--sa-c-parch) !important;
  padding: 14px 16px !important;
  font-family: inherit !important;
  line-height: 1.6;
}
.wp-block-woocommerce-checkout textarea:focus {
  outline: none !important;
  border-color: var(--sa-c-gold) !important;
  box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.14) !important;
}

/* ---------- 10. 提示 / 错误 ---------- */
.wp-block-woocommerce-checkout .wc-block-components-notice-banner,
.wp-block-woocommerce-checkout .wc-block-components-validation-error {
  border-radius: 12px !important;
}
.wp-block-woocommerce-checkout .wc-block-components-notice-banner {
  background-color: var(--sa-c-panel) !important;
  border: 1px solid var(--sa-c-goldline) !important;
  color: var(--sa-c-parch) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-validation-error,
.wp-block-woocommerce-checkout .wc-block-components-validation-error p,
.wp-block-woocommerce-checkout .wc-block-components-text-input.has-error input {
  color: #e0836f !important;
}
.wp-block-woocommerce-checkout .wc-block-components-text-input.has-error input,
.wp-block-woocommerce-checkout .wc-blocks-components-select__container.has-error {
  border-color: rgba(224, 131, 111, 0.75) !important;
}

/* ---------- 11. 移动端 ---------- */
@media (max-width: 720px) {
  .wp-block-woocommerce-checkout .wc-block-components-checkout-step__title {
    font-size: 16px !important;
  }
  .wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
    min-height: 54px !important;
    font-size: 13px !important;
  }
  .wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
  .wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
  .wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
  .wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 17px !important;
  }
}

/* ---------- 12. ★ 窄屏「订单摘要」去重 ----------
   ★★ 先说结论：手机上看两份「Order summary」，**不是主题或我们改出来的**，是 WooCommerce 区块结账页
   自带的窄屏布局。证据（2026-10-08 实测）：
     · 数据库结账页里 checkout-order-summary-block 只有 **1 个**；
     · 主题 style.css 对 order-summary / fill-wrapper / is-mobile **0 命中**；
     · 桌面端 DOM 里订单摘要 **1 份**，390px 宽时变 **2 份**。
   机制（都在 Woo 自己的 checkout.css 里）：
     · `.wp-block-woocommerce-checkout { container-type: inline-size }`
     · `@container (min-width: 700px) { .checkout-order-summary-block-fill-wrapper { display:none } }`
     · `@container (max-width: 699px) { .wc-block-checkout__sidebar { margin-bottom:24px; order:0 } }`
   ⇒ 容器 ≥700px 时，「fill-wrapper」（Woo 用 SlotFill 注入到 actions 区块、位于下单按钮上方的那份）
     被隐藏，只剩侧栏一份；**容器 <700px 时两份同时可见** → 手机上重复。
   处理：窄屏**隐藏顶部侧栏那份**，只保留下单按钮上方那份
   （它始终展开，优惠券也不会被折叠挡住）。断点故意用 `@container` 与 Woo 保持一致，避免错位。
   ⚠️ 若哪天想反过来（保留顶部可折叠摘要、去掉底部那份）：
      把下面的选择器换成 `.wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper` 即可。 */
@container (max-width: 699px) {
  .wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
    display: none !important;
  }
}

/* ---------- 13. ★ 页面级居中：把 Cart / Checkout 从「贴左挤成一条」改成居中列 ----------
   症状（2026-10-09 Melo 反馈，PC + iPad 都中招）：整块内容贴在容器左边，右侧一大片空白。
   实测坐标（管理员 cookie 绕装修模式，CDP 量 .sa-page-head / .sa-page-body 的 rect）：
     · PC 1920：内容 x=120 → right=960（宽 840），右侧空白 **960px**；
     · iPad 1024：内容 x=40 → right=880（宽 840），右侧空白 144px。
   根因（两层，都在我们之外）：
     ① 这两页走 `page.php` 的「正文分支」→ 被包进
        `.sa-page-body { max-width: 840px; margin: 0 0 44px; }`
        ⇒ 宽度限死 840px，**且左右 margin 都是 0**（横向不居中，钉在容器左边）；
     ② 正文里的 `.wp-block-woocommerce-{cart,checkout}` 带 `alignwide` 类，
        但本主题是 **classic theme**（无 theme.json 的 `--wp--style--global--wide-size`）
        ⇒ `alignwide` **完全没有样式**（实测 computed `max-width: none`），老老实实吃满父级 840px。
   修法：把 head 与 body **同时**放宽到 1200px 并水平居中。
     · `min(1200px, 100%)` —— 容器比 1200 窄时（iPad / 手机）自动退化成「吃满容器」，
       左右天然对称，不会再出现单边留白；
     · head 与 body **必须同一个 max-width**：两者各自居中时，若宽度不同，左边缘会错位
       （780 vs 840 居中后左边缘差 30px，标题就和内容对不齐了）。
   影响面：**只作用于 cart / checkout**（靠 body 类名限定），
     隐私政策、服务条款等其它正文页仍保持原来的 840px 左对齐阅读列，零改动。
   ⚠️ 想调宽窄只改这一处的 1200px（head 与 body 一起改）。
   ✅ 验收基准：PC 1920 下 head/body 的 x 与 right 应对称（左右留白相等）；
      iPad 1024 下 body 应等于容器内容宽（x=40 / right=984 那类的对称值）。 */
body.woocommerce-cart .sa-page-head,
body.woocommerce-cart .sa-page-body,
body.woocommerce-checkout .sa-page-head,
body.woocommerce-checkout .sa-page-body {
  max-width: min(1200px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}