/*
 * WooCommerce 组件对齐层（台账 B43 / docs/66 §4.5）
 *
 * 为什么要这一层：Woo 会带自己的 3–7 份 CSS（woocommerce.css / -layout / -smallscreen /
 * select2；块页面还有 wc-blocks.css / cart.css）。装上之后**框架**仍是主题的
 * （页头/页脚/容器/字体都对），但**组件**是 Woo 的默认长相 —— 实测（2026-09-29 体检）：
 * 「Log in」按钮 = 灰底 rgb(233,230,237) + 圆角 3px，输入框是直角色块，
 * `Lost your password?` 是浏览器蓝下划线。与设计系统（橙 / 圆角 / 柔和）是两套。
 *
 * 口径：**只覆盖组件级，不动 Woo 的文件**；能对齐就复用主题令牌（--brand-*、--r-*、--line-*），
 * 不新造颜色。本文件由 functions.php 在 Woo 在场时、以 priority 20 入队 ⇒ 排在 Woo 自己的样式之后。
 * 块页面（cart / checkout）另靠主题根目录的 theme.json 把令牌喂给块编辑器调色板。
 */

/* ---------- 1) 按钮 ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce ul.products li.product .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  background: var(--brand-700);
  color: #fff;
  transition: background .15s, color .15s, border-color .15s;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce ul.products li.product .button:hover {
  background: var(--brand-600);
  color: #fff;
}

/* 次要按钮：返回 / 已加入购物车 / 优惠券这类不该抢主色 */
.woocommerce a.button.wc-backward,
.woocommerce button.button.wc-backward,
.woocommerce a.added_to_cart,
.woocommerce button.button.wc-backward {
  background: #fff;
  color: var(--ink-900);
  border-color: var(--line-200);
}
.woocommerce a.button.wc-backward:hover,
.woocommerce button.button.wc-backward:hover,
.woocommerce a.added_to_cart:hover {
  border-color: var(--steel-300);
  background: #fff;
  color: var(--ink-900);
}

/* ---------- 2) 输入 / 下拉 / 勾选框 ---------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .woocommerce-Input,
.woocommerce input[type="text"].input-text,
.woocommerce input[type="email"].input-text,
.woocommerce input[type="password"].input-text,
.woocommerce input[type="tel"].input-text,
.woocommerce input[type="number"].input-text {
  font: inherit;
  font-size: 15px;
  padding: 11px 12px;
  min-height: 44px;
  border: 1px solid var(--line-200);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--ink-900);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce .woocommerce-Input:focus {
  outline: 2px solid var(--brand-500);
  outline-offset: 1px;
}

/* select2（国家/地区下拉）是对齐后最容易被看出来的那块 */
.select2-container--default .select2-selection--single {
  min-height: 44px;
  border: 1px solid var(--line-200);
  border-radius: var(--r-md);
  background: #fff;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 42px;
  color: var(--ink-900);
}

/* ---------- 3) 链接：去掉浏览器蓝 ---------- */
.woocommerce a:not(.button):not(.add_to_cart_button) {
  color: var(--brand-700);
  text-underline-offset: 3px;
}
.woocommerce a:not(.button):hover {
  color: var(--brand-600);
}

/* ---------- 4) 表单卡（登录/注册/优惠券） ---------- */
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon,
.woocommerce form.lost_reset_password {
  border: 1px solid var(--line-200);
  border-radius: var(--r-lg);
  padding: 24px;
  background: #fff;
  box-shadow: var(--sh-sm);
}

/* ---------- 5) 表格（购物车/订单） ---------- */
.woocommerce table.shop_table {
  border: 1px solid var(--line-200);
  border-radius: var(--r-lg);
  border-collapse: separate;
  overflow: hidden;
}
.woocommerce table.shop_table th {
  background: var(--surface-alt);
  color: var(--ink-900);
}
.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
  border-top: 1px solid var(--line-100);
}

/* ---------- 6) 通知条（信息/成功/错误） ---------- */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews {
  border: 1px solid var(--line-200);
  border-radius: var(--r-md);
  background: var(--surface-alt);
  color: var(--ink-900);
  padding: 14px 18px 14px 46px;
}
.woocommerce-message {
  border-top-color: var(--success);
  background: var(--success-bg);
  color: var(--success-fg);
}
.woocommerce-message::before { color: var(--success); }
.woocommerce-info { border-top-color: var(--info); }
.woocommerce-info::before { color: var(--info); }
.woocommerce-error { border-top-color: var(--danger); }
.woocommerce-error::before { color: var(--danger); }

/* ---------- 7) 商品列表（/shop/ 与商品卡） ---------- */
.woocommerce ul.products li.product {
  border: 1px solid var(--line-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-900);
}
.woocommerce div.product p.price,
.woocommerce ul.products li.product .price {
  color: var(--brand-700);
  font-weight: 600;
}

/* ---------- 8) 块页面（cart / checkout）的空状态与容器 ---------- */
.wp-block-woocommerce-cart .wc-block-cart,
.wp-block-woocommerce-checkout .wc-block-checkout {
  color: var(--ink-900);
}
.wp-block-woocommerce-cart .wc-block-cart__empty-cart__title,
.wc-block-components-title {
  font-family: var(--font-latin);
  color: var(--ink-900);
}

/*
 * ⚠ 下面这几条**本轮未验**：cart / checkout 是块页面，而空购物车时页面上没有可量的按钮
 *   （商品数为 0，`/shop/` 也是空状态）⇒ 等 B42 建了商品、真加一次购再回看。
 *   类名取自 Woo Blocks 的公开结构（.wc-block-components-*），先按设计系统铺一层。
 */
.wc-block-components-button:not(.is-link) {
  background: var(--brand-700);
  color: #fff;
  border-radius: var(--r-md);
  min-height: 44px;
  padding: 11px 20px;
  font: inherit;
  font-weight: 600;
}
.wc-block-components-button:not(.is-link):hover {
  background: var(--brand-600);
  color: #fff;
}
.wc-block-components-button.is-link,
.wc-block-components-button.is-link:hover {
  color: var(--brand-700);
}
.wc-block-components-text-input input,
.wc-block-components-quantity-input input,
.wc-block-components-address-form input,
.wc-block-components-address-form select {
  min-height: 44px;
  border: 1px solid var(--line-200);
  border-radius: var(--r-md);
  font: inherit;
  font-size: 15px;
  color: var(--ink-900);
  background: #fff;
}
.wc-block-components-totals-item__value,
.wc-block-components-product-price {
  color: var(--brand-700);
  font-weight: 600;
}

/* ---------- 9) 商品描述里的规格表（B42 生成的那种 .spec-table） ---------- */
.woocommerce-product-details__short-description,
.woocommerce-Tabs-panel--description,
.woocommerce div.product .woocommerce-product-details__short-description p {
  color: var(--ink-900);
}
.spec-table {
  inline-size: 100%;
  border: 1px solid var(--line-200);
  border-radius: var(--r-md);
  border-collapse: separate;
  overflow: hidden;
  margin-block: 12px 18px;
}
.spec-table th,
.spec-table td {
  border-top: 1px solid var(--line-100);
  padding: 10px 14px;
  text-align: start;
  vertical-align: top;
}
.spec-table th {
  inline-size: 34%;
  background: var(--surface-alt);
  color: var(--steel-600);
  font-weight: 600;
}