/* ============================================================
   wc-bridge.css — 接回 WooCommerce 的「新元素」最小样式
   ⚠️ 只定义新增元素：购物车角标 / 加购按钮 / 数量框 / 抽屉购物车行。
   ⚠️ 不改动 tokens.css / base.css / sections.css / products.css 的既有视觉。
   ⚠️ 一律使用 tokens 里已有的变量，保证与全站同色同字体。
   ============================================================ */

/* ---------- header：购物车角标 ---------- */
.header__actions .icon-btn { position: relative; }
.cart-count {
  position: absolute; top: -1px; right: -1px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius-pill);
  font-family: var(--font-serif);
  font-size: 10px; line-height: 1; letter-spacing: 0;
}
.cart-count[data-empty="1"] { display: none; }

/* ---------- 移动端抽屉里的购物车行 ---------- */
.drawer-cart {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 0; font-size: 19px;
  border-bottom: 1px solid var(--line-soft);
}
.drawer-cart .cart-count {
  position: static; top: auto; right: auto;
  min-width: 20px; height: 20px; font-size: 11px;
}

/* ---------- 商品卡：加购按钮（在 <a> 外层，避免点击被链接吞掉） ---------- */
.pcard__add { margin-top: 10px; }
.pcard__add .add_to_cart_button {
  display: block; width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line-soft); border-radius: 6px;
  background: none; color: var(--ink);
  font-family: inherit; font-size: 13.5px; letter-spacing: .04em;
  cursor: pointer;
  transition: background var(--t) var(--ease-hover), color var(--t) var(--ease-hover), border-color var(--t) var(--ease-hover);
}
.pcard__add .add_to_cart_button:hover,
.pcard__add .add_to_cart_button.added { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- 详情页：数量 + 加入购物车 ---------- */
.pd__add { display: flex; gap: 10px; margin-top: 22px; }
.pd__add .qty {
  width: 78px; flex: none;
  padding: 12px 10px; text-align: center;
  border: 1px solid var(--line-soft); border-radius: 8px;
  background: none; color: var(--ink);
  font-family: inherit; font-size: 16px;
}
.pd__add .add_to_cart_button { flex: 1; }
.pd__add .add_to_cart_button.added { background: var(--ink); color: var(--paper); }

/* WC 脚本加购过程中的临时态（官方 JS 会加 .loading / .added 类） */
.add_to_cart_button.loading { opacity: .55; pointer-events: none; }

@media (max-width: 989px) {
  .pd__add { margin-top: 18px; }
  .pcard__add .add_to_cart_button { font-size: 13px; padding: 9px 12px; }
}

/* ---------- 商品分类归档页（/product-category/<slug>/） ---------- */
.shop__title { margin: 10px 0 8px; }
.shop__intro {
  max-width: 720px; margin: 0 0 4px;
  color: var(--subdued); font-size: 15px; line-height: 1.7;
}
/* 归档页的分类 chip 用 <a>（真内部链接），沿用 .cat-bar button 的既有视觉 */
.cat-bar a {
  text-decoration: none;
  font-family: var(--font-serif); font-size: 16px; letter-spacing: .06em;
  color: var(--subdued); padding: 4px 2px; text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: color var(--t) var(--ease-hover), border-color var(--t) var(--ease-hover);
}
.cat-bar a:hover { color: var(--ink); }
.cat-bar a.is-active { color: var(--ink); border-bottom-color: var(--ink); }

/* 归档页分页 */
.pager { display: flex; gap: 10px; justify-content: center; padding: 0 0 70px; font-family: var(--font-serif); }
.pager .page-numbers {
  min-width: 34px; height: 34px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-soft); border-radius: var(--radius-pill);
  text-decoration: none; color: var(--ink); font-size: 14px;
}
.pager .page-numbers.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pager .page-numbers.dots { border-color: transparent; }

@media (max-width: 989px) {
  .pager { padding-bottom: 50px; }
}