/* ==========================================================================
   LUYUN 麓云茶号 · WooCommerce 组件覆盖层
   --------------------------------------------------------------------------
   只在 WooCommerce 相关页面加载（见 functions.php 的 luyun_is_woo_context()）。

   ★★ 可靠性分级 —— 看注释就知道哪条已经确定、哪条还没 ★★
   --------------------------------------------------------------------------
   [确定]   锚点是 WooCommerce 自己输出的类名（Blocksy 不会改），跨版本稳定
   [自定]   我们自己的 PHP 输出的类名，结构与样式都在自己手里
   [待校]   Blocksy 免费版对商品循环 / 单商品页有自己的 DOM 包装，
            这些选择器是「按 Woo 默认结构 + Blocksy 常见结构」推断的，
            需要在真机上过一眼。凡是标 [待校] 的，都属于 P1 验收时
            打开商品列表页逐条核对的范畴 —— 不影响功能，只影响像素。

   设计稿的硬约束（这三条定了整站的视觉基调，改之前先想清楚）：
     · 卡片永远不投影（--shadow-none）
     · 描边只用 1px hairline（--bw-hairline），不用 2px / 3px
     · 圆角只有一档：按钮与输入框 --r-xs(3px)，卡片 --r-md(8px)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 商品循环（品类列表页 / Shop All / 相关商品）
   -------------------------------------------------------------------------- */
/* [确定] 网格：桌面 3 列、平板 2 列、手机 1 列 —— 设计稿是 3 列 9 卡一页 */
.woocommerce ul.products,
.wc-block-product-template {
  display: grid;
  gap: var(--gutter-desktop);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .woocommerce ul.products,
  .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .woocommerce ul.products,
  .wc-block-product-template { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .woocommerce ul.products,
  .wc-block-product-template { gap: var(--gutter-mobile); }
}

/* [待校] 商品卡本体：去掉一切投影与默认背景 */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product .product-inner {
  display: flex;
  flex-direction: column;
  background: transparent;
  box-shadow: var(--shadow-none);
  border: 0;
  padding: 0;
  margin: 0;
}

/* [确定] 商品卡图片容器：统一 4:3 裁切，圆角卡片档 */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .woocommerce-loop-product__link img {
  width: 100%;
  aspect-ratio: var(--ratio-card);
  object-fit: cover;
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
  transition: opacity var(--dur-base) var(--ease-out);
}
.woocommerce ul.products li.product:hover a img { opacity: 0.92; }

/* [确定] 卡名：设计稿是 Fraunces Semi Bold 15px */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price {
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
  padding: 0;
  margin: 0 0 var(--sp-1);
}

/* [确定] 价格：Fraunces，不加粗，深茶绿 */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  color: var(--fg-primary);
  font-size: var(--fs-price-lg);
  line-height: var(--lh-price-lg);
}
/* 划线原价用弱灰，不要用默认的删除线红 */
.woocommerce del .woocommerce-Price-amount,
.woocommerce ul.products li.product del .woocommerce-Price-amount {
  color: var(--fg-faint);
  font-weight: var(--fw-regular);
}
.woocommerce ins .woocommerce-Price-amount { text-decoration: none; }

/* [确定] 促销角标：药丸形 + 琥珀底，不用 Woo 默认的圆形绿标 */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 2;
  min-height: 0;
  height: var(--h-chip);
  padding: 0 var(--sp-3);
  border-radius: var(--r-2xl);
  background: var(--action-amber-bg);
  color: var(--action-amber-fg);
  font-family: var(--font-body);
  font-size: var(--fs-badge);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-badge);
  text-transform: uppercase;
  line-height: var(--h-chip);
  display: inline-flex;
  align-items: center;
}

/* [待校] 商品卡上的加购按钮：设计稿里默认隐藏，hover 才浮出 */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  margin-top: var(--sp-3);
}

/* --------------------------------------------------------------------------
   2. 单个商品页
   -------------------------------------------------------------------------- */
/* [待校] 相册：主图圆角 + 缩略图间距 */
.woocommerce div.product .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery__image img {
  border-radius: var(--r-md);
  overflow: hidden;
}
.woocommerce div.product .flex-control-thumbs { margin-top: var(--sp-3); }
.woocommerce div.product .flex-control-thumbs li { margin: 0 var(--sp-2) 0 0; width: 72px; }
.woocommerce div.product .flex-control-thumbs img { border-radius: var(--r-sm); }

/* [确定] 商品标题 */
.woocommerce div.product .product_title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
  margin-bottom: var(--sp-3);
}

/* [确定] 加购按钮：整宽、大号 */
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart button[type="submit"] {
  width: 100%;
  height: var(--h-btn-l);
  border-radius: var(--r-xs);
  background: var(--action-primary-bg);
  color: var(--action-primary-fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  border: 0;
  cursor: pointer;
}
.woocommerce div.product form.cart .button:hover {
  background: var(--action-primary-bg-hover);
  color: var(--action-primary-fg);
}

/* [确定] 数量输入框 */
.woocommerce .quantity input[type="number"],
.woocommerce .quantity input.qty {
  height: var(--h-field);
  width: 4.5rem;
  padding: 0 var(--field-padding-x);
  border: var(--bw-hairline) solid var(--border-default);
  border-radius: var(--r-xs);
  background: var(--bg-surface);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--fs-label);
}

/* [确定] 变体下拉：与普通输入框同一套皮肤 */
.woocommerce div.product form.cart .variations select,
.woocommerce .woocommerce-ordering select,
.woocommerce .widget_layered_nav select {
  height: var(--h-field);
  padding: 0 var(--field-padding-x);
  border: var(--bw-hairline) solid var(--border-default);
  border-radius: var(--r-xs);
  background: var(--bg-surface);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--fs-label);
}

/* [待校] 折叠行（Description / Additional information / Reviews）
   —— 设计稿的折叠行是 hairline 上下边框、无背景、无圆角 */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 var(--sp-6);
  border-bottom: var(--bw-hairline) solid var(--border-default);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0 var(--sp-5) 0 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  padding: var(--sp-3) 0;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--fg-primary); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

/* [确定] 评价星级颜色：琥珀，不用 Woo 默认的 #ffa500 */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before,
.woocommerce p.stars a { color: var(--c-amber); }

/* --------------------------------------------------------------------------
   3. 通知条（成功 / 提示 / 错误）
   —— 设计稿用的是大圆角块 + 左侧图标，不是 Woo 默认的彩色边框方块
   -------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: var(--bw-hairline) solid transparent;
  border-radius: var(--r-sm);
  background: var(--bg-surface-alt);
  color: var(--fg-primary);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  list-style: none;
  margin: 0 0 var(--sp-5);
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }   /* 干掉 Woo 的伪元素图标，用我们自己的 */

.woocommerce-message { background: var(--c-success-bg); border-color: var(--c-success-line); color: var(--c-success); }
.woocommerce-info    { background: var(--c-notice-bg);  border-color: var(--border-default);  color: var(--fg-primary); }
.woocommerce-error   { background: var(--c-danger-bg);  border-color: var(--c-danger-line);   color: var(--c-danger); }

/* --------------------------------------------------------------------------
   4. 购物车
   -------------------------------------------------------------------------- */
/* [待校] 购物车表格：去掉斑马纹与投影，只留 hairline 分隔 */
.woocommerce table.shop_table {
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  background: transparent;
}
.woocommerce table.shop_table th {
  padding: var(--sp-3) 0;
  border-bottom: var(--bw-hairline) solid var(--border-default);
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-field-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  text-align: left;
}
.woocommerce table.shop_table td {
  padding: var(--sp-5) 0;
  border-bottom: var(--bw-hairline) solid var(--border-soft);
  vertical-align: top;
}
.woocommerce table.shop_table tbody tr:hover { background: transparent; }
.woocommerce table.shop_table img { border-radius: var(--r-sm); width: 72px; }

/* [确定] 摘要卡（购物车 / 结账右列） */
.woocommerce .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout-review-order {
  background: var(--bg-surface);
  border: var(--bw-hairline) solid var(--border-default);
  border-radius: var(--r-lg);
  padding: var(--card-padding-lg);
  box-shadow: var(--shadow-none);
}
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  margin-bottom: var(--sp-4);
}

/* [确定] 「强调合计」下方的双线 —— 这是设计稿里唯一的 2px 边框 */
.woocommerce .cart_totals .order-total td,
.woocommerce-checkout .cart_item + .order-total td {
  border-top: var(--bw-emphasis) double var(--border-default);
}
.woocommerce .cart_totals .order-total .amount,
.woocommerce-checkout .order-total .amount {
  font-family: var(--font-display);
  font-size: var(--fs-price-xl);
  line-height: var(--lh-price-xl);
  color: var(--fg-primary);
}

/* [确定] 结账按钮：整宽大按钮 */
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--h-btn-l);
  border-radius: var(--r-xs);
  background: var(--action-primary-bg);
  color: var(--action-primary-fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  border: 0;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #place_order:hover { background: var(--action-primary-bg-hover); }

/* --------------------------------------------------------------------------
   5. 免邮进度条
   —— [自定] 结构由 inc/cart.php 输出，见 luyun_render_free_shipping_notice()
   -------------------------------------------------------------------------- */
.luyun-freeship {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: var(--bw-hairline) solid var(--border-default);
  border-radius: var(--r-sm);
  background: var(--c-notice-bg);
  margin-bottom: var(--sp-5);
}
.luyun-freeship--reached {
  background: var(--c-success-bg);
  border-color: var(--c-success-line);
}
.luyun-freeship__text {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-medium);
  color: var(--fg-primary);
}
.luyun-freeship__track {
  height: 4px;
  border-radius: var(--r-full);
  background: rgba(31, 61, 43, 0.12);
  overflow: hidden;
}
.luyun-freeship__bar {
  height: 100%;
  border-radius: var(--r-full);
  background: var(--c-amber);
  transition: width var(--dur-base) var(--ease-out);
}
.luyun-freeship--reached .luyun-freeship__bar { background: var(--c-success); }
/* 已达成时进度条填满，不再显示百分比动画 */
.luyun-freeship--reached .luyun-freeship__bar { width: 100% !important; }

/* --------------------------------------------------------------------------
   6. 结账字段
   -------------------------------------------------------------------------- */
/* [确定] 字段标签统一成「Inter 10 Medium + 1.2 字距 + 全大写」 */
.woocommerce form .form-row label {
  font-family: var(--font-body);
  font-size: var(--fs-field-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-field-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--sp-1);
}
.woocommerce form .form-row .required { color: var(--c-amber); text-decoration: none; }

/* [确定] 输入框 */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-selection--single {
  height: var(--h-field);
  padding: 0 var(--field-padding-x);
  border: var(--bw-hairline) solid var(--border-default);
  border-radius: var(--r-xs);
  background: var(--bg-surface);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--fs-label);
}
.woocommerce form .form-row textarea { height: auto; min-height: 96px; padding: var(--field-padding-y) var(--field-padding-x); }
.woocommerce form .form-row .select2-selection--single { display: flex; align-items: center; }

/* [确定] 校验失败态 */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
  border-color: var(--c-danger);
  background: var(--c-danger-bg);
}
.woocommerce form .form-row.woocommerce-invalid label { color: var(--c-danger); }

/* --------------------------------------------------------------------------
   7. 校验失败汇总卡
   —— [自定] 对应设计稿「表单校验错误」状态稿。
      结构由 inc/checkout.php 的 luyun_render_error_summary() 输出。
   -------------------------------------------------------------------------- */
.luyun-form-errors {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: var(--bw-hairline) solid var(--c-danger-line);
  border-radius: var(--r-sm);
  background: var(--c-danger-bg);
  margin-bottom: var(--sp-5);
}
.luyun-form-errors__title {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-danger);
}
.luyun-form-errors__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-danger);
}
.luyun-form-errors__list li::before {
  content: "·";
  display: inline-block;
  width: 1em;
  margin-left: -1em;
  opacity: 0.6;
}
.luyun-form-errors__list li { padding-left: 1em; }

/* [自定] 校验未通过时，结账主按钮置灰 —— 对应设计稿的 disabled 填充 #C9C1AE */
.woocommerce #place_order.luyun-blocked,
.woocommerce #place_order[disabled] {
  background: var(--action-disabled-bg);
  color: var(--action-disabled-fg);
  cursor: not-allowed;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   8. 后台：自定义订单状态的颜色标记
   —— 这一段其实只在 wp-admin 生效，但 Admin 的样式由
      mu-plugin 的 luyun-admin.css 统一管，这里不重复定义。
   -------------------------------------------------------------------------- */