/* ===================================================================
 * Jinaria Yuna —— 内页补充样式
 *
 * boutique.css 管的是首页那套设计稿；这个文件只管主题新增的部分：
 * 内页容器、博客卡、商品归档网格、商品详情页的「说明 / 参数 / 护养」块、
 * 面包屑、分页，以及 WordPress 菜单输出的 ul 结构。
 *
 * 颜色一律走 CSS 变量（--ink / --paper / --brass ...），
 * 这样「外观 → 自定义 → 全局配色」改了之后，内页会跟着一起变。
 * =================================================================== */

/* ---------- 1. 内页容器 ---------- */
.jy-inner {
  padding-top: 132px;    /* 让开固定的页眉 */
  padding-bottom: 84px;
}

@media (max-width: 860px) {
  .jy-inner { padding-top: 108px; padding-bottom: 56px; }
}

/* ---------- 2. WordPress 菜单输出结构 ----------
   wp_nav_menu 会输出 <ul><li><a>，而设计稿里的 .bt-nav 是扁平的 flex 容器，
   这里让 ul 也变成同一层 flex，间距从父级继承，视觉上和原来一致。 */
.bt-nav-list {
  display: flex;
  align-items: center;
  gap: inherit;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bt-nav-list li { position: relative; }

/* 二级菜单：鼠标移上去或键盘聚焦时展开 */
.bt-nav-list .sub-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 172px;
  padding: 9px 0;
  margin: 0;
  list-style: none;
  background: var(--panel, rgba(253, 252, 250, .96));
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(64, 52, 34, .14);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s var(--ease, ease), transform .28s var(--ease, ease), visibility .28s;
  z-index: 30;
}

.bt-nav-list li:hover > .sub-menu,
.bt-nav-list li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.bt-nav-list .sub-menu a {
  display: block;
  padding: 8px 18px;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--ink-2);
  white-space: nowrap;
}

.bt-nav-list .sub-menu a:hover { color: var(--brass); background: rgba(173, 138, 92, .07); }

/* 页脚两列的 ul */
.ft-col ul { list-style: none; margin: 0; padding: 0; }

/* 购物车数字 */
.jy-cart-num { font-weight: 600; }

/* ---------- 3. 博客 / 搜索结果的卡片网格 ---------- */
.jy-inner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 26px;
  margin-top: 34px;
}

@media (max-width: 1024px) { .jy-inner-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .jy-inner-grid { grid-template-columns: 1fr; gap: 24px; } }

.jy-card a { display: block; }

.jy-card .ph {
  position: relative;
  overflow: hidden;
  border-radius: 9px;
  background: #fff;
  aspect-ratio: 16 / 11;
  box-shadow: 0 8px 26px rgba(64, 52, 34, .11), 0 1px 3px rgba(64, 52, 34, .06);
  transition: box-shadow .55s var(--ease, ease), transform .55s var(--ease, ease);
}

.jy-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease, ease); }
.jy-card:hover .ph { box-shadow: 0 22px 46px rgba(64, 52, 34, .16); transform: translateY(-4px); }
.jy-card:hover .ph img { transform: scale(1.05); }

.jy-card time {
  display: block;
  margin-top: 13px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.jy-card h3 {
  margin: 6px 0 0;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.32;
  color: var(--ink);
}

.jy-card:hover h3 { color: var(--brass); }

.jy-card p {
  margin: 7px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-2);
}

/* ---------- 4. 商品归档网格 ---------- */
.jy-archive-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px 24px;
  margin-top: 34px;
}

.jy-archive-grid > * { min-width: 0; }

@media (max-width: 1024px) { .jy-archive-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .jy-archive-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; } }

/* 首页的 .rail--grid 是横向轨道，归档页要覆盖成静态网格 */
.jy-archive-grid.rail--grid { display: grid; overflow: visible; }

/* ---- 接管 WooCommerce 的 ul.products ----
   归档页的商品循环由 WooCommerce 输出：<ul class="products columns-4"> 套
   <li class="product">。这两层容器**故意保留标准类名** —— 愿望清单、快速
   查看、无限滚动这类插件都按 `ul.products > li.product` 找元素 —— 我们只把
   布局换成上面那套网格，不动结构。

   float / width / margin 三条必须 !important：
   WC 的 `.woocommerce ul.products.columns-4 li.product` 与我们的
   `ul.products.jy-archive-grid > li.product` 特异性打平（都是 0,3,2），
   谁后加载谁赢，而 WC 样式表的加载顺序不由我们掌握，所以直接提权，不赌。 */
ul.products.jy-archive-grid {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  clear: none;
  overflow: visible;
}

ul.products.jy-archive-grid::before,
ul.products.jy-archive-grid::after { content: none; display: none; }

ul.products.jy-archive-grid > li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  clear: none !important;
  padding: 0;
  position: relative;
  text-align: left;
  background: none;
  border: 0;
}

/* WC 会按自己的规格重置 .products 里的链接与图片，这里交还给 .pcard 那套 */
ul.products.jy-archive-grid > li.product a.pcard {
  display: block;
  text-decoration: none;
  color: inherit;
}

ul.products.jy-archive-grid > li.product a.pcard .ph img {
  width: 100%;
  height: 100%;
  margin: 0;
  box-shadow: none;
  border-radius: 0;
}

/* ---- 归档页卡片下方的「加入购物车」按钮 ----
   由 WooCommerce 官方钩子 woocommerce_after_shop_loop_item 输出
   （默认回调 woocommerce_template_loop_add_to_cart，见 inc/woocommerce.php）。
   保留它的理由：列表页能直接加购，顾客少点一次。变量商品会自动变成
   「Select options」并由 WooCommerce 自己接管按钮行为。 */
ul.products.jy-archive-grid > li.product .button {
  display: block;
  width: 100%;
  margin: 12px 0 0;
  padding: 11px 14px;
  text-align: center;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}

ul.products.jy-archive-grid > li.product .button:hover,
ul.products.jy-archive-grid > li.product .button:focus-visible {
  color: #fff;
  background: var(--brass);
  border-color: var(--brass);
}

/* 加购成功后 WooCommerce 追加的「查看购物车」链接 */
ul.products.jy-archive-grid > li.product .added_to_cart {
  display: block;
  margin-top: 7px;
  font-size: 11px;
  letter-spacing: .1em;
  text-align: center;
  color: var(--brass);
}

/* 加购中：WC 会给按钮加 .loading 并塞一个转圈图标，
   默认是绝对定位（按钮会塌）—— 改回行内，按钮宽度才稳得住。 */
ul.products.jy-archive-grid > li.product .button.loading {
  opacity: .72;
}

ul.products.jy-archive-grid > li.product .button.loading::after {
  position: static;
  top: auto;
  right: auto;
  margin-left: 7px;
  vertical-align: middle;
}

/* ---- 图片上的「Sale!」促销角标 ----
   由 woocommerce_show_product_loop_sale_flash 输出（默认回调保留）。
   它挂在图片容器里，所以 .ph 需要定位参照；WC 自带的 min-height/min-width
   会把角标撑成一个方块，必须一起覆盖掉。 */
.pcard .ph { position: relative; }

.pcard .ph .onsale,
.jy-archive-grid li.product .onsale {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 3;
  min-height: 0;
  min-width: 0;
  padding: 4px 9px;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--brass);
  border-radius: 2px;
}

/* ---------- 5. 面包屑 / 结果计数 / 排序 ---------- */
.jy-crumbs {
  margin-bottom: 14px;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.jy-crumbs a { color: var(--muted); }
.jy-crumbs a:hover { color: var(--brass); }
.jy-crumb-sep { margin: 0 8px; opacity: .5; }

.jy-archive-tools {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.jy-archive-tools .woocommerce-result-count { margin: 0; font-size: 12px; color: var(--muted); }
.jy-archive-tools .woocommerce-ordering { margin: 0; }

.jy-archive-tools select {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink);
}

/* ---------- 6. 分页 ----------
   全站有两套分页，类名不同，必须分别照顾：
     .jy-pager                → 博客列表 / 搜索结果（WordPress the_posts_pagination）
     .woocommerce-pagination  → 商品归档页（WooCommerce 模板自己输出）

   ⚠️ 2026-09-22 第 12 轮（大师兄）：「这个下边换页的图标，一、二，距离上边
      Add to Cart 太近了，我在手机端好像都已经贴到一起了。」
   实测（改前，1366 / 390 两档）：分页容器 margin-top = 0，**与末行按钮的间距
      正好 0px**。
   根因：归档页分页的类名是 .woocommerce-pagination，而上面那套规则全是
      `.jy-pager …` 的选择器 —— 一条都没匹配上，商品页的分页一直在用
      WooCommerce 官方默认外观（连排方块、无上边距），主题从没管过它。
   现在两套合并写，归档页统一走 46px 上边距。 */
.jy-pager,
.woocommerce-pagination { margin-top: 46px; }

.jy-pager { display: flex; justify-content: center; }

/* WC 默认给分页 <ul> 加了 border + li 用 float 拼连排方块，
   这里要一并拆掉才能换成主题的独立圆角方块。
   选择器带 body 是为了盖过 `.woocommerce nav.woocommerce-pagination ul li`
   （WC 自带样式表和主题样式表的加载顺序不由我们掌握，不赌顺序）。 */
body .woocommerce-pagination ul.page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  clear: none;
}

body .woocommerce-pagination ul.page-numbers li {
  float: none;
  display: inline-flex;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
}

.jy-pager .page-numbers,
.woocommerce-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  margin: 0 3px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 12.5px;
  line-height: 1;
  color: var(--ink-2);
  background: #fff;
}

.jy-pager .page-numbers.current,
.woocommerce-pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; }
.jy-pager .page-numbers:hover:not(.current),
.woocommerce-pagination .page-numbers:hover:not(.current) { border-color: var(--brass); color: var(--brass); }

/* ---------- 7. 空状态 ---------- */
.jy-empty {
  margin-top: 34px;
  padding: 46px 30px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  text-align: center;
  color: var(--ink-2);
}

.rail-empty {
  flex: none;
  width: 100%;
  padding: 40px 26px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-2);
}

.jy-empty .btn-ghost { margin-top: 16px; }

/* ---------- 8. 正文排版（单页 / 文章） ---------- */
.jy-prose {
  max-width: 720px;
  margin-top: 30px;
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--ink-2);
}

.jy-prose h2, .jy-prose h3, .jy-prose h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  margin: 34px 0 12px;
}

.jy-prose h2 { font-size: 26px; }
.jy-prose h3 { font-size: 21px; }
.jy-prose a { color: var(--brass); border-bottom: 1px solid var(--brass-soft); }
.jy-prose ul, .jy-prose ol { padding-left: 20px; }
.jy-prose li { margin: 6px 0; }
.jy-prose blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--brass);
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink);
}

.jy-prose img { max-width: 100%; height: auto; border-radius: 8px; }

.jy-single-cover {
  margin-top: 28px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(64, 52, 34, .15);
}

.jy-single-cover img { width: 100%; height: auto; display: block; }

.jy-single-foot { margin-top: 38px; }
.jy-404-actions { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- 9. 商品详情页补充块 ---------- */
.jy-pdp-note {
  margin: 14px 0 0;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.jy-pdp-details {
  margin-top: 64px;
  padding: 54px 0 66px;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}

.jy-pdp-details .wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.jy-pdp-details h2 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 16px;
}

.jy-pdp-details p { font-size: 14px; line-height: 1.9; color: var(--ink-2); }

.jy-pdp-attrs table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.jy-pdp-attrs th, .jy-pdp-attrs td {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  color: var(--ink-2);
}
.jy-pdp-attrs th { width: 42%; font-weight: 600; color: var(--ink); }

@media (max-width: 900px) {
  .jy-pdp-details .wrap { grid-template-columns: 1fr; gap: 32px; }
  .jy-pdp-details { padding: 40px 0 46px; }
}

/* ---------- 10. 让 WooCommerce 原生组件跟主题的按钮语言一致 ---------- */
/* ⚠️ 配色口径（2026-09-21 按大师兄要求定）：
   主按钮底色一律用**本站主题色 brass 金**（原为墨色，已改），
   鼠标悬停时底色**变浅**（--brass-2）、字色转墨色，保证浅底上的可读性。
   覆盖：购物车「应用优惠券 / 更新购物车」、结账「PLACE ORDER」、
   详情页「ADD TO CART」、评论提交等所有 WooCommerce 原生按钮。
   PayPal / Google Pay 等品牌按钮由插件自己的样式表负责，不在此列。 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  border-radius: 3px;
  background: var(--brass);
  color: #fff;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 13px 24px;
  transition: background .3s, color .3s, transform .3s;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--brass-2);
  color: var(--ink);
  transform: translateY(-2px);
}

/* 被禁用的按钮（购物车没有改动时的「更新购物车」就是 disabled 状态）。
   WooCommerce 默认样式把 disabled 按钮染成浅灰底 + 更浅的字，前台看起来
   就是「一块什么都没有的灰条」—— 用户完全看不出那是个按钮。
   这里改成主题色描边 + 明确的文字，让它一眼可辨、只是不可点。 */
.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled,
.woocommerce button.button:disabled[disabled] {
  background: transparent;
  color: var(--brass);
  border: 1px solid var(--brass-soft);
  opacity: 1;
  cursor: not-allowed;
}

.woocommerce a.button:disabled:hover,
.woocommerce button.button:disabled:hover,
.woocommerce input.button:disabled:hover {
  background: transparent;
  color: var(--brass);
  transform: none;
}

/* .alt 是 WooCommerce 用来标记"主按钮"的类。必须显式钉住颜色：
   WooCommerce 自带样式表里有 `.woocommerce button.button.alt{background:#7f54b3}`
   （权重 0,3,1），会压过上面基础规则的 brass（0,2,1）。不写这一条，
   详情页的加购按钮就会露出 WooCommerce 的默认紫色。
   颜色与上面的基础规则保持一致（主题色底、悬停变浅）。 */
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--brass);
  color: #fff;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--brass-2); color: var(--ink); }

/* 结账页「PLACE ORDER」。
   WooCommerce 默认把它渲染成右对齐的小按钮（实测约 128×36，
   跟同一页 PayPal 的整条全宽付款按钮完全不搭）。
   PayPal / Google Pay 是插件注入的整条按钮，所以这里把主题侧下单按钮
   也拉成同宽同形，只保留颜色与文案的差别 —— 大师兄的要求是
   「跟其他 PayPal 这个付款按钮一样，只是颜色跟内容不一样」。 */
.woocommerce-checkout #place_order,
.woocommerce #place_order.button {
  display: block;
  width: 100%;
  float: none;
  margin: 0;
  padding: 17px 26px;
  border-radius: 3px;
  font-size: 12.5px;
  letter-spacing: .18em;
}

/* ---------- 结账表单：错误提示内联到对应字段下方 ----------
   由 inc/woocommerce.php 里那段 <script id="jy-checkout-inline-errors"> 注入。
   WooCommerce 默认把「Billing First name is a required field.」这类提示
   全部塞在表单顶部一个大框里，顾客得自己去找是哪一格填错了。
   这里改成：字段框变红框（由脚本加 .jy-invalid），
   红框正下方多一行红字说明，指哪打哪。
   注意：类名以 .jy- 开头，不要与 WooCommerce 自己的 .woocommerce-invalid 混用。 */
.jy-field-err {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: .02em;
  color: #c0392b;
}

.woocommerce form .form-row.jy-invalid > label,
.woocommerce form .form-row.jy-invalid .required {
  color: #c0392b;
}

.woocommerce form .form-row.jy-invalid input.input-text,
.woocommerce form .form-row.jy-invalid select,
.woocommerce form .form-row.jy-invalid textarea,
.woocommerce form .form-row.jy-invalid input[type="checkbox"],
.woocommerce form .form-row.jy-invalid input[type="radio"] {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .10);
}

/* 条款勾选框没有 border，上面的 box-shadow 落在方框外会糊成一块。
   它改用 outline，红得更干净。 */
.woocommerce form .form-row.jy-invalid input[type="checkbox"],
.woocommerce form .form-row.jy-invalid input[type="radio"] {
  box-shadow: none;
  outline: 2px solid #c0392b;
  outline-offset: 2px;
}

/* ---------- 物流追踪页 / 我的账户追踪端点：表单上方的说明 ---------- */
.jy-track-intro {
  max-width: 62ch;
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

.woocommerce span.onsale {
  background: var(--brass);
  color: #fff;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  min-height: 0;
  line-height: 1;
  padding: 8px 11px;
  border-radius: 2px;
}

.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--brass);
  font-family: var(--sans);
  font-weight: 600;
}

.woocommerce div.product .product_title {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink);
}

.woocommerce .star-rating span::before,
.woocommerce .star-rating::before { color: var(--brass); }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--brass);
  background: var(--paper-2);
  font-size: 13.5px;
  color: var(--ink-2);
}

.woocommerce-message::before,
.woocommerce-info::before { color: var(--brass); }

/* 购物车 / 结算表格 */
.woocommerce table.shop_table {
  border: 1px solid var(--line);
  border-radius: 6px;
  border-collapse: separate;
  font-size: 14px;
  color: var(--ink-2);
}

.woocommerce table.shop_table th { color: var(--ink); font-weight: 600; }

/* ---------- 10.5 商品详情页：顾客评价 ----------
   WooCommerce 默认把评论区塞在「商品描述 / 附加信息 / 评价」三页签里。
   本主题不用它那套页签（版式与精品站不合），改为独立区块：
   内容由 comments_template() 渲染插件自带的 single-product-reviews.php，
   这里只负责让它长得像本站。 */
.jy-pdp-reviews {
  margin-top: 58px;
  padding-top: 42px;
  border-top: 1px solid var(--line);
}

.jy-pdp-reviews .woocommerce-Reviews-title,
.jy-pdp-reviews #reviews h2 {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  color: var(--ink);
}

/* 星级汇总行 */
.jy-pdp-reviews .woocommerce-product-rating {
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--ink-2);
}

.jy-pdp-reviews .star-rating span::before { color: var(--brass); }

/* 评论列表 */
.jy-pdp-reviews .commentlist {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.jy-pdp-reviews .commentlist li {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.jy-pdp-reviews .commentlist li:last-child { border-bottom: 0; }

.jy-pdp-reviews .commentlist .meta {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .04em;
}

.jy-pdp-reviews .commentlist .description { color: var(--ink-2); font-size: 14px; line-height: 1.75; }

/* 留评价表单 */
.jy-pdp-reviews #review_form_wrapper { margin-top: 28px; }

.jy-pdp-reviews .comment-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.jy-pdp-reviews .comment-form input[type="text"],
.jy-pdp-reviews .comment-form input[type="email"],
.jy-pdp-reviews .comment-form textarea {
  width: 100%;
  padding: 11px 13px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
}

.jy-pdp-reviews .comment-form input[type="text"]:focus,
.jy-pdp-reviews .comment-form input[type="email"]:focus,
.jy-pdp-reviews .comment-form textarea:focus {
  outline: none;
  border-color: var(--brass);
}

.jy-pdp-reviews .form-submit input[type="submit"],
.jy-pdp-reviews .form-submit .submit {
  display: inline-block;
  width: auto;
  padding: 12px 32px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: background .35s var(--ease);
}

.jy-pdp-reviews .form-submit input[type="submit"]:hover,
.jy-pdp-reviews .form-submit .submit:hover { background: var(--brass); }

/* ---------- 11. 打印时不要背景层次 ---------- */
@media print {
  .bt-top, .bt-footer, .bg-field, .bg-sea, .cart-drawer, .drawer-ov,
  .back-scene, .to-top { display: none !important; }
}

/* ===== JY-PDP-CSS ===== 商品详情页（对齐原站 .pdp 架构） */
/* ===================================================================
 * 商品详情页（PDP）
 *
 * 结构对齐上游主题的 .pdp 两栏：
 *   左栏 .jy-pdp-scroll  图库 + 折叠面板 + 规格
 *   右栏 .jy-pdp-info    面包屑/标题/评分/价格/摘要/加购/徽章 + 评价
 *
 * 原站用的是 --gold / --cream / --radius 这些变量，本主题对应
 * --brass / --paper-2；下面用局部别名接上，几何（栅格比例、吸顶偏移、
 * 缩略图 76px、评价框内衬）一律照抄原站，只把色板换成本主题的。
 * =================================================================== */

.jy-pdp {
  --pdp-gold: var(--brass);
  --pdp-gold-d: #8d6f42;          /* 原站 --gold-dark，本主题没有等价的深铜色 */
  --pdp-cream: var(--paper-2);
  --pdp-sale: #b4442f;            /* 原站 --sale，按中国站习惯仍作"促销"用红 */
  --pdp-radius: 6px;
  --pdp-top: calc(var(--btH, 98px) + 16px);

  max-width: 1280px;
  margin: 0 auto;
  padding: 30px 34px 70px;
}

/* ---------- 两栏栅格 ---------- */
.jy-pdp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: start;
}
.jy-pdp-scroll { grid-column: 1; grid-row: 1; min-width: 0; }
.jy-pdp-info {
  grid-column: 2; grid-row: 1; min-width: 0;
  position: sticky; top: var(--pdp-top);
  max-height: calc(100vh - var(--pdp-top) - 8px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(159,140,110,.5) transparent;
}
.jy-pdp-info::-webkit-scrollbar { width: 8px; }
.jy-pdp-info::-webkit-scrollbar-track { background: transparent; }
.jy-pdp-info::-webkit-scrollbar-thumb {
  background: rgba(159,140,110,.45); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
.jy-pdp-info::-webkit-scrollbar-thumb:hover { background: rgba(159,140,110,.7); background-clip: padding-box; }

/* ---------- 图库 ---------- */
.jy-pdp-gallery { position: relative; min-width: 0; }
.jy-pdp-main {
  position: relative;
  border-radius: var(--pdp-radius);
  overflow: hidden;
  background: var(--pdp-cream);
  aspect-ratio: 1 / 1;
}
.jy-pdp-main img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; cursor: zoom-in;
}
.jy-pdp-sale {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 6px 12px; border-radius: 2px;
  background: var(--pdp-sale); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.jy-pdp-thumbs {
  display: flex; gap: 12px; margin-top: 14px;
  flex-wrap: nowrap; overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 2px 2px 10px; scrollbar-width: thin;
}
.jy-pdp-thumb {
  width: 76px; height: 76px; flex: 0 0 76px;
  padding: 0; border: 2px solid transparent; border-radius: 5px;
  overflow: hidden; cursor: pointer; background: var(--pdp-cream);
  scroll-snap-align: start;
  transition: border-color .25s var(--ease);
}
.jy-pdp-thumb:hover { border-color: var(--brass-soft); }
.jy-pdp-thumb.on { border-color: var(--pdp-gold); }
.jy-pdp-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 折叠面板（说明 / 配送 / 退换） ---------- */
.jy-pdp-acc { margin: 44px 0 0; border-top: 1px solid var(--line); }
.jy-acc-item { border-bottom: 1px solid var(--line); }
.jy-acc-head {
  display: flex; width: 100%; align-items: center; justify-content: center;
  gap: 10px; padding: 17px 16px; border: 0; background: none;
  font: inherit; font-size: 12.5px; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink); cursor: pointer;
  transition: color .25s var(--ease);
}
.jy-acc-head:hover { color: var(--pdp-gold-d); }
.jy-acc-chev {
  width: 8px; height: 8px; flex: 0 0 8px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .28s var(--ease), margin-top .28s var(--ease);
}
.jy-acc-item.is-open .jy-acc-chev { transform: rotate(225deg); margin-top: 3px; }
.jy-acc-body { display: none; padding: 0 24px 22px; color: var(--ink-2); font-size: 14.5px; }
.jy-acc-body p { margin: 0 0 10px; }
.jy-acc-body p:last-child { margin-bottom: 0; }
.jy-acc-item.is-open .jy-acc-body { display: block; }

/* 规格表（.jy-pdp-attrs table 的样式沿用本文件已有规则） */
.jy-pdp-attrs { margin: 44px 0 0; }
.jy-pdp-attrs h2 {
  margin: 0 0 16px; font-family: var(--serif); font-size: 24px;
  font-weight: 500; color: var(--ink); letter-spacing: .02em;
}

/* ---------- 右栏 · 购买区 ---------- */
.jy-pdp-sticky { max-height: none; overflow: visible; }
.jy-pdp-crumb {
  margin-bottom: 12px; color: var(--muted); font-size: 12px;
  text-transform: uppercase; letter-spacing: .08em;
}
.jy-pdp-crumb a { color: inherit; }
.jy-pdp-crumb a:hover { color: var(--pdp-gold-d); }
.jy-pdp-title {
  margin: 0 0 10px; font-family: var(--serif); font-size: 27px;
  line-height: 1.25; font-weight: 600; color: var(--ink);
}
.jy-pdp-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.jy-pdp-rating .st { color: #c9a15f; font-size: 15px; letter-spacing: .14em; }
.jy-pdp-rating .ct { color: var(--muted); font-size: 12px; }
.jy-pdp-price { margin-bottom: 18px; font-size: 18px; font-weight: 600; color: var(--ink); }
.jy-pdp-price del { margin-right: 10px; color: var(--muted); font-weight: 400; font-size: 15px; }
.jy-pdp-price ins { text-decoration: none; color: var(--pdp-sale); }
.jy-pdp-desc {
  padding-top: 18px; margin-bottom: 22px;
  border-top: 1px solid var(--line);
  color: var(--ink-2); font-size: 15px; line-height: 1.85;
}
.jy-pdp-desc p { margin: 0 0 10px; }
.jy-pdp-desc p:last-child { margin-bottom: 0; }
.jy-pdp-form { padding-top: 22px; border-top: 1px solid var(--line); }
.jy-pdp-badges { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; }
.jy-pdp-badges > div { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.jy-pdp-badges svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--pdp-gold-d); }

/* ---------- 加购表单（WooCommerce 原生 markup） ---------- */
.jy-pdp-form form.cart { display: block; margin: 0; }
.jy-pdp-form form.cart::after { content: ""; display: table; clear: both; }
.jy-pdp-form .quantity {
  display: inline-flex; align-items: center;
  margin: 0 0 14px; border: 1px solid var(--line); border-radius: 3px; overflow: hidden;
}
.jy-pdp-form .quantity input.qty {
  width: 64px; height: 48px; border: 0; padding: 0; text-align: center;
  background: transparent; color: var(--ink);
  font-size: 15px; font-family: var(--sans);
  -moz-appearance: textfield; appearance: textfield;
}
.jy-pdp-form .quantity input.qty::-webkit-outer-spin-button,
.jy-pdp-form .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* 详情页加购按钮。
   ⚠️ 度量按**上游主题实测值**对齐：内边距 13px 26px、字号 12px、
   字距 ≈1.44px、圆角 2px、总高约 42px（原站 559×42，改前新站是 549×47，偏胖）。
   配色沿用新主题的墨色主按钮，**底色与描边必须同色** —— 之前底色被金色规则
   拿走、描边留在墨色，渲染成"金色底 + 墨色描边"的两色描边，很显脏。
   选择器前挂 .woocommerce 是为了压过 WooCommerce 自带的主按钮规则。 */
.woocommerce .jy-pdp-form .single_add_to_cart_button {
  display: block; width: 100%; padding: 13px 26px;
  border: 1px solid var(--ink); border-radius: 2px;
  background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; transition: background .22s, border-color .22s, opacity .22s;
}
.woocommerce .jy-pdp-form .single_add_to_cart_button:hover { background: var(--brass); border-color: var(--brass); }
.woocommerce .jy-pdp-form .single_add_to_cart_button.loading { opacity: .65; cursor: progress; }
.woocommerce .jy-pdp-form .single_add_to_cart_button.disabled,
.woocommerce .jy-pdp-form .single_add_to_cart_button[disabled] { opacity: .5; cursor: not-allowed; }
.jy-pdp-form .stock { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.jy-pdp-form .stock.in-stock { color: var(--sage); }
.jy-pdp-form .woocommerce-variation-price { margin: 6px 0 12px; font-size: 22px; font-weight: 600; color: var(--ink); }
.jy-pdp-form .woocommerce-variation-price del { margin-right: 8px; color: var(--muted); font-size: 16px; font-weight: 400; }
.jy-pdp-form .woocommerce-variation-price ins { text-decoration: none; }
.jy-pdp-form .woocommerce-variation-availability { margin-bottom: 10px; font-size: 13px; }
.jy-pdp-form .woocommerce-variation-description { margin-bottom: 12px; color: var(--ink-2); font-size: 14px; }
.jy-pdp-form .reset_variations { display: inline-block; margin: 6px 0; font-size: 12px; color: var(--muted); }
.jy-pdp-form .reset_variations:hover { color: var(--pdp-gold-d); }
.jy-pdp-form .variations { width: 100%; margin: 0 0 12px; border-collapse: collapse; }
.jy-pdp-form .variations th,
.jy-pdp-form .variations td { padding: 6px 0; text-align: left; vertical-align: middle; }
.jy-pdp-form .variations th label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.jy-pdp-form .variations select {
  width: 100%; max-width: 300px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 3px;
  background: #fff; color: var(--ink); font-size: 14px; font-family: var(--sans);
}
.jy-pdp-form .variations select:focus { outline: none; border-color: var(--brass); }

/* ---------- 通知条（加购后的成功/提示/错误） ---------- */
.jy-pdp .woocommerce-message,
.jy-pdp .woocommerce-info,
.jy-pdp .woocommerce-error {
  position: relative; margin: 0 0 20px; padding: 14px 18px 14px 40px;
  list-style: none; border: 1px solid var(--line); border-left: 3px solid var(--brass);
  border-radius: 3px; background: var(--pdp-cream);
  color: var(--ink-2); font-size: 13.5px;
}
.jy-pdp .woocommerce-error { border-left-color: var(--pdp-sale); }
.jy-pdp .woocommerce-message::before,
.jy-pdp .woocommerce-info::before,
.jy-pdp .woocommerce-error::before { display: none; }
.jy-pdp .woocommerce-message .button,
.jy-pdp .woocommerce-info .button { margin-left: 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* 2026-09-21 第 9 轮（大师兄）：
   「点击 Add to Cart 按钮以后，下边会弹出来一个提示框，就是产品已经被成功放入了
    购物车。然后有一个按钮 View Cart，这个没必要，你就显示一个提示信息，
    已经加好到购物车就可以了。至于他想去购物车看，他会在上面去选，没必要放这一个
    按钮在这里。然后你那个信息呢，也不要有背景框，就是一个信息，在现有的页面上
    显示出来就可以了，预留一个显示信息的位置就可以。」
   —— 按钮已在 functions.php 的 wc_add_to_cart_message_html 过滤器里摘掉；
      这里把背景框、描边、左侧金线一起去掉，只留一行字 + 一个金色对勾，
      位置仍是内容流里原本那个位置（不浮动、不弹层）。 */
.jy-pdp .woocommerce-message,
.jy-pdp .woocommerce-info{
  margin:0 0 20px;
  padding:0 0 0 22px;
  border:0;border-radius:0;background:none;
  color:var(--ink-2);
  font-size:13.5px;line-height:1.65;
}
.jy-pdp .woocommerce-message::before,
.jy-pdp .woocommerce-info::before{
  display:block;content:"\2713";
  position:absolute;left:0;top:0;
  width:auto;height:auto;margin:0;
  color:var(--brass);font-size:13px;line-height:1.7;font-weight:600;
}
.jy-pdp .woocommerce-message .button,
.jy-pdp .woocommerce-info .button{ display:none }

/* ---------- 评价区 ---------- */
.jy-pdp-reviews {
  margin: 40px 0 0; padding: 24px 20px;
  border: 1px solid var(--line); border-radius: var(--pdp-radius);
  background: var(--pdp-cream);
}
.jy-pdp-reviews > h2 {
  margin: 0 0 16px; text-align: center;
  font-size: 14px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink);
}
.jy-pdp-reviews .woocommerce-Reviews-title { display: none; }   /* 外层已有同名标题，避免重复 */
.jy-pdp-reviews .woocommerce-noreviews { margin: 0 0 8px; text-align: center; color: var(--muted); font-size: 13.5px; }
.jy-pdp-reviews .commentlist { margin: 0; padding: 0; list-style: none; }
.jy-pdp-reviews .commentlist li { padding: 18px 0; border-top: 1px solid var(--line); }
.jy-pdp-reviews .comment_container { display: flex; gap: 12px; }
.jy-pdp-reviews .avatar { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px; }
.jy-pdp-reviews .comment-text { flex: 1; min-width: 0; color: var(--ink-2); font-size: 14px; }
.jy-pdp-reviews .meta { margin: 0 0 7px; color: var(--muted); font-size: 13px; }
.jy-pdp-reviews .star-rating { margin: 0 0 8px; color: var(--pdp-gold-d); }
.jy-pdp-reviews #review_form_wrapper { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.jy-pdp-reviews .comment-reply-title {
  display: block; margin-bottom: 14px;
  font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--ink);
}
.jy-pdp-reviews .comment-form > p,
.jy-pdp-reviews .comment-form-rating { margin: 0 0 12px; }
.jy-pdp-reviews .comment-form label {
  display: block; margin-bottom: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.jy-pdp-reviews .comment-form input:not([type=checkbox]):not([type=submit]),
.jy-pdp-reviews .comment-form textarea,
.jy-pdp-reviews .comment-form select {
  box-sizing: border-box; width: 100%; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 4px;
  background: #fff; color: var(--ink); font: 14px var(--sans);
}
.jy-pdp-reviews .comment-form textarea { height: 112px; min-height: 112px; resize: vertical; }
.jy-pdp-reviews .comment-form input:focus,
.jy-pdp-reviews .comment-form textarea:focus,
.jy-pdp-reviews .comment-form select:focus { outline: none; border-color: var(--brass); }
.jy-pdp-reviews .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink-2); }
.jy-pdp-reviews .comment-form-cookies-consent label { display: inline; margin: 0; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: inherit; }
.jy-pdp-reviews .form-submit { margin-top: 14px; }
.jy-pdp-reviews #submit,
.jy-pdp-reviews .woocommerce-Reviews .submit input {
  padding: 11px 22px; border: 0; border-radius: 3px;
  background: var(--ink); color: #fff;
  font: 600 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.jy-pdp-reviews #submit:hover { background: var(--brass); }
/* 星级选择器：WooCommerce 用 p.stars > a，字体图标样式在经典主题里才完整 */
.jy-pdp-reviews .comment-form-rating .stars { display: flex; gap: 6px; margin: 0; }
.jy-pdp-reviews .comment-form-rating .stars a {
  width: 22px; height: 22px; overflow: hidden; text-decoration: none;
  color: var(--pdp-gold-d); font-size: 0; line-height: 1;
}
.jy-pdp-reviews .comment-form-rating .stars a::before { content: "☆"; font-size: 22px; line-height: 1; }
.jy-pdp-reviews .comment-form-rating .stars.selected a.active::before,
.jy-pdp-reviews .comment-form-rating .stars.selected a:has(~ a.active)::before,
.jy-pdp-reviews .comment-form-rating .stars:hover a::before,
.jy-pdp-reviews .comment-form-rating .stars.selected a:has(~ a:hover)::before { content: "★"; }

/* Customer Reviews 插件（cr- 前缀）自带一套盒子与圆角，
   这里只统一字体与描边，让它在主题里不显得是"另一个网站"。 */
.jy-pdp-reviews .cr-reviews-ajax-reviews,
.jy-pdp-reviews .cr-review-form-wrap { font-family: var(--sans); color: var(--ink-2); }
.jy-pdp-reviews .cr-summaryBox-wrap,
.jy-pdp-reviews .cr-review-form-wrap { border-color: var(--line) !important; border-radius: var(--pdp-radius); }
.jy-pdp-reviews .cr-average-rating { color: var(--ink); }
.jy-pdp-reviews .cr-count-row,
.jy-pdp-reviews .cr-all-reviews-link { color: var(--muted); font-size: 13px; }
.jy-pdp-reviews .cr-review-form input:not([type=checkbox]),
.jy-pdp-reviews .cr-review-form textarea,
.jy-pdp-reviews .cr-review-form select {
  border: 1px solid var(--line) !important; border-radius: 4px !important;
  background: #fff !important; color: var(--ink) !important; font-family: var(--sans) !important;
}
.jy-pdp-reviews .cr-review-form-submit,
.jy-pdp-reviews .cr-button {
  border-radius: 3px !important; background: var(--ink) !important; color: #fff !important;
  border-color: var(--ink) !important;
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
.jy-pdp-reviews .cr-review-form-submit:hover,
.jy-pdp-reviews .cr-button:hover { background: var(--brass) !important; border-color: var(--brass) !important; }

/* ---------- 相关商品 ---------- */
.jy-pdp ~ .related,
.jy-pdp .related,
section.related.products {
  max-width: 1280px; margin: 70px auto 0; padding: 0 34px 20px;
}
section.related.products > h2 {
  margin: 0 0 26px; text-align: center;
  font-family: var(--serif); font-size: 32px; font-weight: 500;
  letter-spacing: .02em; color: var(--ink);
}

/* 支付方式按钮（PayPal Payments 等）插在加购区后面，给它留出间距 */
.jy-pdp .ppc-button-wrapper,
.jy-pdp #ppc-button-ppcp-gateway { margin-top: 14px; }
.jy-pdp .ppc-button-wrapper:empty,
.jy-pdp #ppc-button-ppcp-gateway:empty { display: none; }

/* ---------- 窄屏：压成单栏 ---------- */
@media (max-width: 1024px) {
  .jy-pdp { padding: 20px 18px 56px; }
  .jy-pdp-grid { display: flex; flex-direction: column; gap: 26px; align-items: stretch; }
  .jy-pdp-scroll, .jy-pdp-info { display: contents; }
  .jy-pdp-gallery { order: 1; }
  .jy-pdp-sticky { order: 2; max-height: none; overflow: visible; }
  .jy-pdp-reviews { order: 3; margin: 0; }
  .jy-pdp-acc { order: 4; margin: 0; }
  .jy-pdp-attrs { order: 5; margin: 0; }
  .jy-pdp-crumb { display: none; }
  .jy-pdp-title { font-size: 24px; }
  section.related.products { margin-top: 48px; padding: 0 18px 20px; }
  section.related.products > h2 { font-size: 26px; }
}
@media (max-width: 620px) {
  .jy-pdp { padding: 16px 14px 48px; }
  .jy-pdp-thumb { width: 62px; height: 62px; flex-basis: 62px; }
  .jy-acc-body { padding: 0 14px 18px; }
  .jy-acc-head { padding: 15px 8px; }
  .jy-pdp-reviews { padding: 18px 14px; }
  .jy-pdp-badges { gap: 12px; }
}

/* ===== JY-INNER-SURFACE ===== 内页底板 · 面包屑对齐 · 顶距修正 ===== */

/* 首页之外的内容区：
   ① 关掉背景层（背景视频 / 柔光色块）。
      bg-field 是 z-index:-2、bg-sea 是 z-index:-1 的 fixed 层，压在 html 的
      纸张底色之上；首页有实体版块承托它们，内页没有 —— 商品名、价格、正文
      会直接落在画面上读不出来。参考站内页就是纯白底。
      想在内页也保留一点背景氛围，去「外观 → 自定义 → 全局配色」调
      「背景蒙版 · 浓度」是没用的（那一层也一起关掉了）—— 这里是有意为之。
   ② 面包屑与内容容器同宽。WooCommerce 的面包屑原先是一整条贴左边缘的
      <nav>，和居中的 .wrap（max-width 1180）不对齐，看着像溢出屏幕。
   ③ .jy-inner 的 132px 顶距是页眉还用 position:fixed 时留的；现在页眉是
      sticky，本身就在流内占位，再留 132px 就是一段白空档。
   ④ .content-area 只存在于 WooCommerce 页面（归档 / 详情）；page.php、
      index.php 走的是 .wrap.jy-inner。两处都给底板，避免漏页。 */
body:not(.home) .bg-field,
body:not(.home) .bg-sea,
body:not(.home) .bg-mask,
body:not(.home) .bg-grain { display: none; }

.content-area {
  position: relative;
  z-index: 1;
  background: var(--paper);
}

.jy-crumbs {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 32px 0;
}
.jy-crumbs + .jy-inner { padding-top: 16px; }

.jy-inner {
  background: var(--paper);
  padding-top: 30px;
}

@media (max-width: 860px) {
  .jy-crumbs { padding: 16px 18px 0; }
  .jy-inner { padding-top: 20px; padding-bottom: 56px; }
}

/* ===== /JY-INNER-SURFACE ===== */

/* ===== JY-TABLE-AND-TRACK ===== */

/* ---------- 9. 内容页表格 ----------
   为什么补这一段：这套主题原先是**零 table 规则**。而内容页里表格是主力版式 ——
   Size Guide 有 4 张尺码表，配送、条款、退换也都有表。没样式时浏览器给的是
   粗黑边框 + 顶格密排，既不像精品站，手机上还会把容器撑宽。
   这里给一套和站内一致的表格语言：无竖线、发丝横线、表头小字大写 + 奶油底，
   窄屏换成横向滚动而不撑破页面。 */
.jy-prose table {
  width: 100%;
  margin: 22px 0 30px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.55;
}

.jy-prose thead th {
  padding: 10px 14px;
  text-align: left;
  vertical-align: bottom;
  background: var(--paper-2);
  border-bottom: 1px solid var(--brass-soft);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

.jy-prose tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}

.jy-prose tbody tr:last-child td { border-bottom: 1px solid var(--brass-soft); }
.jy-prose tbody tr:hover td { background: rgba(246, 243, 237, .6); }
.jy-prose tbody td:first-child { color: var(--ink); font-weight: 500; }

/* 表格太宽时只让表格自己横向滚，不带动整页 */
.jy-prose .table-scroll { overflow-x: auto; }

@media (max-width: 720px) {
  .jy-prose table { display: block; overflow-x: auto; white-space: nowrap; }
  .jy-prose thead th, .jy-prose tbody td { padding: 9px 11px; }
}

/* ---------- 10. 物流追踪表单 [jp_track_order] ----------
   输出方是 jinaria-logistics 插件，DOM 结构固定：
     .jp-track > form.jp-track-form > .fr.two（两列）> label > input
                + button.btn.btn--gold（提交）
   插件自带的 jp-logistics.css 只给了输入框基础样式，提交按钮用的是**原主题**
   的类名组合 .btn.btn--gold —— 这一点已在 boutique.css 里做了类名映射，按钮
   会自动长成站内的金色圆角按钮。这里再补外框、标签、字段间距和结果面板，
   让它看起来像站内原生组件，而不是一块外来的表单。 */
.jp-track {
  max-width: 640px;
  margin: 20px 0 34px;
  padding: 26px 28px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(64, 52, 34, .06);
}

.jp-track-form .fr.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}

.jp-track-form label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.jp-track-form input {
  width: 100%;
  margin-top: 7px;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color .25s, box-shadow .25s;
}

.jp-track-form input::placeholder { color: var(--muted); }

.jp-track-form input:focus {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(173, 138, 92, .14);
}

/* 提交按钮：把插件用的两个类名都收进来（.btn.btn--gold 是插件实际输出的，
   .jp-track-btn 是插件结果面板里的，统一成同一套尺寸） */
.jp-track .btn.btn--gold,
.jp-track .btn--gold,
.jp-track .jp-track-btn {
  min-width: 210px;
  padding: 13px 34px;
}

.jp-track-result {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  overflow-x: auto;
}

.jp-alert {
  margin-top: 18px;
  padding: 13px 16px;
  border-radius: 6px;
  font-size: 14px;
}

.jp-alert.err { background: #fbeeee; border-left: 3px solid #b4442f; color: #a5342a; }
.jp-alert.ok  { background: #eef7ee; border-left: 3px solid #3c9a4e; color: #256b32; }

@media (max-width: 620px) {
  .jp-track { padding: 22px 18px 24px; }
  .jp-track-form .fr.two { grid-template-columns: 1fr; }
  .jp-track .btn.btn--gold,
  .jp-track .btn--gold,
  .jp-track .jp-track-btn { width: 100%; min-width: 0; text-align: center; }
}

/* ===== /JY-TABLE-AND-TRACK ===== */

/* ---- 数量控件的 − / + 按钮 ----
   由 inc/woocommerce.php 第 7 节的脚本注入（原生的数量控件只有一个裸
   number 输入框，手机上几乎没法用）。外观跟主题的按钮语言一致：
   细描边方框，两侧按钮悬停时填充主题色。 */
.woocommerce .quantity.jy-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  background: #fff;
}
.woocommerce .quantity.jy-qty .qty {
  width: 62px;
  padding: 12px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  -moz-appearance: textfield;
}
.woocommerce .quantity.jy-qty .qty::-webkit-outer-spin-button,
.woocommerce .quantity.jy-qty .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce .quantity.jy-qty .jy-qty-btn {
  width: 40px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.woocommerce .quantity.jy-qty .jy-qty-btn:hover { background: var(--brass); color: #fff; }
.woocommerce .quantity.jy-qty .jy-qty-minus { border-right: 1px solid var(--line); }
.woocommerce .quantity.jy-qty .jy-qty-plus { border-left: 1px solid var(--line); }

/* ===== JY-MOBILE-SHOP ===== 手机端购物车 / 结账（≤768px） =====
   大师兄反馈：手机上购物车右列（Subtotal）被裁、优惠码输入被裁、
   「UPDATE CART」只露一条边、「PROCEED TO CHECKOUT」被挤成 156×97 的窄条
   （文字断成三行）、页面横向溢出 12px。

   根因（已实测确认）：functions.php 第 149 行把 WooCommerce 自带的
   woocommerce-smallscreen 样式 unset 掉了，注释写的是「小屏断点我们自己在
   boutique.css 里控制」—— 但这套规则一直没补上。购物车的 6 列表格在 390px
   视口下放不下（实测表格宽 424px > 视口 390px），于是整表把文档撑宽 12px，
   右列与按钮全被切掉。

   这里按 WooCommerce 官方 smallscreen 的同一套思路自己写：
   每行变成一张卡片，用 td 上的 data-title 属性当左侧标签，
   配色用主题变量，比依赖插件样式更可控，也不会跟主题的归档网格打架。 */

@media (max-width: 768px) {

  /* ---------- 1. 购物车表格 → 卡片式堆叠 ---------- */
  .woocommerce table.shop_table_responsive { border: 0; border-radius: 0; }
  .woocommerce table.shop_table_responsive thead { display: none; }

  /* ⚠️ 2026-09-21 补漏：上面把 thead 藏了、把 tr/td 改成了 block，
     但 **tbody 还是 table-row-group** —— 浏览器会把它包进一个匿名表格盒，
     宽度按「收缩到适应」算，实测 351.6px **且与视口无关**。
     320 视口下容器只有 256px，于是表格内部生出横向滚动条、
     右侧的 Apply coupon 按钮和 Total 被推出屏幕（截图已确认）。
     把 tbody / tfoot 也拉进块流，宽度才会老实等于 100%。 */
  .woocommerce table.shop_table_responsive tbody,
  .woocommerce table.shop_table_responsive tfoot,
  .woocommerce-page table.shop_table_responsive tbody,
  .woocommerce-page table.shop_table_responsive tfoot {
    display: block;
    width: 100%;
  }

  .woocommerce-cart-form table.shop_table_responsive tbody tr {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  .woocommerce-cart-form table.shop_table_responsive tbody tr:last-child { border-bottom: 0; }

  .woocommerce-cart-form table.shop_table_responsive tbody tr td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: auto;
    padding: 7px 0;
    border: 0;
    text-align: right;
  }
  .woocommerce-cart-form table.shop_table_responsive tbody tr td::before {
    content: attr(data-title);
    flex: 0 0 auto;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
  }

  /* 缩略图 / 商品名 / 删除：不显示标签，改为左对齐整行 */
  .woocommerce-cart-form table.shop_table_responsive tbody tr td.product-remove,
  .woocommerce-cart-form table.shop_table_responsive tbody tr td.product-thumbnail {
    justify-content: flex-start;
    padding: 0 0 4px;
  }
  .woocommerce-cart-form table.shop_table_responsive tbody tr td.product-remove::before,
  .woocommerce-cart-form table.shop_table_responsive tbody tr td.product-thumbnail::before { content: none; }
  .woocommerce-cart-form table.shop_table_responsive tbody tr td.product-thumbnail img { width: 54px; border-radius: 6px; }
  .woocommerce-cart-form table.shop_table_responsive tbody tr td.product-name {
    justify-content: flex-start;
    padding: 0 0 8px;
    font-size: 15px;
    line-height: 1.45;
  }
  .woocommerce-cart-form table.shop_table_responsive tbody tr td.product-name::before { content: none; }
  .woocommerce-cart-form table.shop_table_responsive tbody tr td.product-subtotal { font-weight: 600; color: var(--brass); }

  /* 数量输入：手机上一整条 [−][数字][+]
     第 11 轮（大师兄）：「手机端购物车里边数量没有加减按钮。然后数量显示框
     被截断了一个边。」
     成因有两层：
       ① 加减按钮原来只挂在商品页（is_product()），购物车根本没有按钮，
          那一格只剩一个 74px 的裸输入框，视觉上就像「缺了一边」；
       ② 这一格是 flex 两端对齐，容器默认会被压缩（flex-shrink:1），
          而 .jy-qty 上有 overflow:hidden —— 一压窄右边就被切掉。
     所以：按钮放开到购物车（见 inc/woocommerce.php 第 14 节），
     这里把容器锁成不收缩、尺寸给足。 */
  .woocommerce-cart-form table.shop_table_responsive tbody tr td.product-quantity .quantity {
    flex: 0 0 auto;
    margin: 0;
  }
  .woocommerce-cart-form table.shop_table_responsive tbody tr td.product-quantity .qty {
    width: 52px;
    height: 42px;   /* 原来 35px —— 有了加减按钮，得按手指的尺寸来给 */
    padding: 0;
    text-align: center;
  }

  /* ---------- 2. 优惠码 + 更新购物车：各占整宽一行 ---------- */
  .woocommerce-cart-form table.shop_table_responsive tbody tr td.actions {
    display: block;
    padding: 16px 0 4px;
  }
  .woocommerce-cart-form table.shop_table_responsive tbody tr td.actions::before { content: none; }
  .woocommerce-cart-form table.shop_table_responsive tbody tr td.actions .coupon {
    display: flex;
    gap: 8px;
    width: 100%;
    float: none;
    margin: 0 0 10px;
  }
  .woocommerce-cart-form table.shop_table_responsive tbody tr td.actions .coupon input.input-text {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }
  .woocommerce-cart-form table.shop_table_responsive tbody tr td.actions .coupon button { flex: 0 0 auto; }
  .woocommerce-cart-form table.shop_table_responsive tbody tr td.actions > button.button {
    display: block;
    width: 100%;
    float: none;
    margin: 0;
  }

  /* ---------- 3. 购物车总计：整宽，下单按钮不再折成三行 ---------- */
  .woocommerce-cart .cart-collaterals,
  .woocommerce-cart .cart-collaterals .cart_totals,
  .woocommerce-cart .cart-collaterals .cross-sells,
  .woocommerce-cart .cart-collaterals .cart_totals table { width: 100%; float: none; }

  /* 合计表（.cart_totals table）没有走上面的卡片化改造，本体仍是
     display:block + overflow-x:auto，再加上收缩到适应的 tbody，
     「Shipping costs are calculated during checkout.」和 Total 会被推出屏幕。
     让它回到普通表格：宽度 100%、自动列宽、文字自然换行，
     内部不再有横向滚动。
     ⚠️ 这一整段必须写在上面那条选择器列表**之后**：第一次改的时候插进了
     列表中间，把 `.cart-collaterals` 粘到了本规则上，使它变成 display:table ——
     表格宽度由内容决定，被 PayPal 按钮 300px 的最小宽度顶到 385px，
     320 视口下整块顶出屏幕（实测 clientW=320 / 实际 385）。 */
  .woocommerce-cart .cart_totals table.shop_table {
    display: table;
    width: 100%;
    overflow-x: visible;
    table-layout: auto;
  }
  .woocommerce-cart .cart_totals table.shop_table tbody { display: table-row-group; }
  .woocommerce-cart .cart_totals table.shop_table tr { display: table-row; }
  .woocommerce-cart .cart_totals table.shop_table th,
  .woocommerce-cart .cart_totals table.shop_table td {
    display: table-cell;
    padding: 12px 14px;
    /* ⚠️ 必须显式放开换行：站上有一套 td{white-space:nowrap}（来源不在本主题，
       来自 WooCommerce / 插件），「Shipping costs are calculated during
       checkout.」整句不折，把表格的**最小内容宽度**顶到 385px ——
       于是 320 视口下表格仍然比容器(256px)宽 129px，右侧金额被推出屏幕。 */
    white-space: normal;
  }
  .woocommerce-cart .cart_totals table.shop_table th { width: 34%; }
  .woocommerce-cart .cart_totals h2 { font-size: 20px; }
  .woocommerce-cart .wc-proceed-to-checkout { padding: 0; }
  .woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 17px 14px;
    font-size: 11.5px;
    letter-spacing: .16em;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
  }

  /* ---------- 3.5 两栏容器：手机端塌成一栏 ----------
     ⚠️ 这一条是本次补的关键修复，和上面购物车是**同一个根因的第二处后果**。
     woocommerce-layout.css 里 .col2-set .col-1 / .col-2 是 width:48% 并排，
     把它们在窄屏覆盖成 100% 的，正是被 functions.php unset 掉的
     woocommerce-smallscreen。少了这一层，手机端结账页的
     「Billing details」和「Ship to a different address?」会一直并排，
     每个输入框只剩 156px 宽（实测 390 视口 / 截图确认）。
     下面「我的账户」的左侧导航与内容区也是 30% / 68% 并排，同样要塌。 */
  .woocommerce .col2-set .col-1,
  .woocommerce .col2-set .col-2,
  .woocommerce-page .col2-set .col-1,
  .woocommerce-page .col2-set .col-2 {
    float: none;
    width: 100%;
  }

  /* 我的账户：导航变成一排可点的胶囊，而不是挤在左侧的窄栏 */
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: 100%;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 26px; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 8px;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li {
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 8px 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .04em;
  }

  /* ---------- 3.6 另外两处靠 smallscreen 收尾的浮动 ---------- */
  /* 商品排序下拉：原来浮在商品网格右侧，手机上没有位置可浮 */
  .woocommerce .woocommerce-ordering,
  .woocommerce-page .woocommerce-ordering { float: none; margin: 0 0 16px; }
  /* 下单完成页的「订单信息」一行四格 */
  .woocommerce ul.order_details li {
    float: none;
    width: 100%;
    margin: 0 0 12px;
    padding: 0 0 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .woocommerce ul.order_details li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

  /* ---------- 4. 结账：字段单列整宽 ---------- */
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last,
  .woocommerce-page form .form-row-first,
  .woocommerce-page form .form-row-last { width: 100%; float: none; }
  .woocommerce form .form-row { padding: 0; margin-bottom: 14px; }
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce form .form-row select { width: 100%; }
  .woocommerce-checkout #order_review table.shop_table { font-size: 13px; }
  .woocommerce-checkout #order_review table.shop_table th,
  .woocommerce-checkout #order_review table.shop_table td { padding: 10px 8px; }
  .woocommerce-checkout #place_order { white-space: nowrap; }
}
/* ===== /JY-MOBILE-SHOP ===== */

/* ===== JY-CARD-ALIGN ===== 商品卡：整行对齐 =====
   2026-09-21（手机端）+ 2026-09-22 第 12 轮（全尺寸）大师兄反馈：
     「产品名称非常长…有的只占一格，所以就会导致商品下边的信息错位，
       你看怎么改一下？固定给名字有个三行的空余，然后其余信息都往下排列，
       总之这个排列还是要整齐一点。」

   桌面实测（改前，1366 视口）：`li.product` 的 display 是 **list-item**
   —— 原来那套 flex 只写在 ≤768 里，桌面端根本没生效。于是标题 1 行的卡片
   按钮顶 = 615，标题 2 行的 = 660，同一行里按钮高低不一。

   两件事一起做：
     ① 卡片纵向 flex + 按钮 margin-top:auto  → 按钮永远贴到卡片底部
     ② 标题固定三行空余                      → 价格 / 评分的位置也对齐
   ⚠️ 桌面只给 min-height，**不做截断** —— 商品名要看得全，个别超长标题
      自己撑高即可（按钮有 margin-top:auto 兜底，照样对齐）。
      手机端另有一套两行截断（见下面 @media ≤768），那里的卡片本来就不高，
      不截断会把行撑得很长。 */
ul.products.jy-archive-grid > li.product {
  display: flex;
  flex-direction: column;
  height: 100%;
}
ul.products.jy-archive-grid > li.product .button { margin-top: auto; }

/* ★ 商品卡内部：纵向 flex + 价格贴底 —— 根治「标题长短导致信息错位」。
   2026-09-22 第 13 轮（大师兄）：「商品名长短不一，下边信息错位，要固定三行空余。
   这一条你只改了一页，不对的。其他的板块页内和主页内的商品名称你都要留好空余。」

   两个毛病各有原因：

   ① 「只改了一页」——原来选择器是 `ul.products.jy-archive-grid > li.product .pcard h3`，
      只命中归档页 /shop/ 与分类页（它们走 woocommerce_product_loop_start，带这个类）。
      首页那 5 个橱窗栏是 `<div class="rail-track"><a class="pcard">`，
      **根本没有 ul.products**，所以一条都没命中：线上实测首页 h3 的 min-height = 0px，
      长标题价格 top=3738、短标题 top=3692 —— 同一栏里错位 46px。
      两处共用 template-parts/product-card.php（输出都是 `a.pcard > h3`），
      规则挂在 .pcard 自己身上，改一次全站生效：
      首页橱窗 5 栏 / 归档 / 分类 / 相关商品 / 搜索结果。

   ② 「留了三行空余还是错位」——光靠 min-height 只能保证「至少三行」，
      标题真到 4 行就又把价格推下去了。所以这里改成
      **卡片纵向 flex + 价格 margin-top:auto 贴底**：标题几行都无所谓，
      价格和评分永远落在同一高度。实测：
        · 桌面 1366 的 12 张卡按行分组，价格顶 / 评分顶 / 按钮顶波动全部 0px
        · 手机 390 卡片高度从 [277,293] 收敛成 277，价格顶唯一值 10 → 6（每行一个）

   ⚠️ 不要给 a.pcard 写 `flex:1 1 auto` —— 首页 rail-track 的卡片宽度靠
      `.rail-track > *{flex:0 0 calc(...)}` 定，改 flex 简写会把宽度弄坏；
      归档页那一层在 li 上单独给（见下方规则）。 */
a.pcard {
  display: flex;
  flex-direction: column;
}
a.pcard > .ph { flex: 0 0 auto; }               /* 图片不参与拉伸，高度照旧（155/261 实测不变） */
a.pcard > h3  { min-height: calc(3 * 1.3em); }  /* 三行空余；em 相对 h3 自身字号，字号变了自适应 */
a.pcard > .pr { margin-top: auto; }             /* ★ 价格贴底 → 与同行卡片对齐 */

/* 归档页：卡片吃掉「按钮以上」的全部高度，按钮再贴到 li 底 */
ul.products.jy-archive-grid > li.product > a.pcard {
  flex: 1 1 auto;
  min-height: 0;
}

/* 手机端：标题裁到两行（窄屏长标题能占 5 行，卡片被撑得很长）。
   空余与截断必须一起给：只截断不加空余，一行标题的卡片仍比两行的矮。
   ⚠️ `-webkit-line-clamp` 只在 display:-webkit-box 下有效，而它在归档页会被
      另一条规则顶掉（实测 getComputedStyle 返回 flow-root，clamp 形同虚设，
      标题该几行还是几行）—— 所以再补一条 `max-height` 硬裁兜底：
      2 × 1.3em 正好两行高，第 3 行整行裁掉，不会切出半行字。
      两条同时给：clamp 能生效就带省略号，不生效也不会漏。 */
@media (max-width: 768px) {
  a.pcard > h3 {
    min-height: calc(2 * 1.3em);
    max-height: calc(2 * 1.3em);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/* ===== /JY-CARD-ALIGN ===== */

/* ===== JY-REVIEW-SUBMIT ===== 顾客评价的「提交」按钮 =====
   评价区由站上的 Customer Reviews 插件渲染，它自己的按钮是深墨色，
   跟本站主按钮（主题色 brass）不统一。这里用容器选择器一次性收敛，
   同时兜住主题自己 comments_template() 输出时的 #respond input#submit。 */
.jy-pdp-reviews input[type="submit"],
.jy-pdp-reviews button[type="submit"],
.jy-pdp-reviews .cr-review-form-submit,
.jy-pdp-reviews #respond input#submit {
  display: inline-block;
  padding: 13px 28px;
  border: 0;
  border-radius: 3px;
  background: var(--brass);
  color: #fff;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s, color .3s, transform .3s;
}

.jy-pdp-reviews input[type="submit"]:hover,
.jy-pdp-reviews button[type="submit"]:hover,
.jy-pdp-reviews .cr-review-form-submit:hover,
.jy-pdp-reviews #respond input#submit:hover {
  background: var(--brass-2);
  color: var(--ink);
  transform: translateY(-2px);
}
/* ===== /JY-REVIEW-SUBMIT ===== */

/* =========================================================================
   JY-20260921 ===== 大师兄 2026-09-21 反馈批次 =====
   购物车控件统一 / 支付按钮字号统一 / 账户地址卡片 / 商品页购买区
   / 折叠面板排版 / 信息页左侧导航 / 返回顶部 / 星级空态
   -------------------------------------------------------------------------
   ⚠️ 加载顺序提醒：本文件之后还会跟一段 inc/dynamic-css.php 输出的内联样式，
   它用 `body .xxx`（特异性 0,1,1）覆盖首屏文字、商品卡这些主题设置项。
   所以**涉及那几类的规则要带 `body` 或更高的特异性前缀**，其余（WooCommerce
   购物车/账户/商品页）dynamic-css 不碰，普通特异性即可。
   ========================================================================= */

/* ---------- 1. 购物车底部：三个控件统一规格 ----------
   实测（改前，1366 视口）：
     #coupon_code            80 × 28   字号 13.3px  字体 Arial   边框 #cfc8d8（紫灰）圆角 0
     button[apply_coupon]   146 × 37.5 字号 11.5px  金底白字      圆角 3
     button[update_cart]    112 × 27.7 字号 11.5px  透明底棕字    圆角 3
   三个高度全不一样、字体两套、边框一个紫一个金 —— 大师兄说「这 3 个要统一大小」。
   统一到：**高 40px、同字距 .16em、同圆角 3px、同字体栈**。
   输入框与按钮做成「连体」：输入框右边框去掉、按钮左边框承担分隔，看起来是一条控件。 */
.woocommerce-cart .coupon,
.woocommerce-page .coupon{
  display:flex;align-items:stretch;float:left;margin:0;
}
.woocommerce-cart .coupon input#coupon_code,
.woocommerce-page .coupon input#coupon_code,
.woocommerce .coupon .input-text{
  float:none;width:200px;height:40px;margin:0;padding:0 14px;
  border:1px solid var(--line);border-right:0;border-radius:3px 0 0 3px;
  background:#fff;color:var(--ink);box-shadow:none;
  font-family:var(--sans);font-size:12.5px;line-height:normal;
}
.woocommerce-cart .coupon input#coupon_code:focus,
.woocommerce-page .coupon input#coupon_code:focus{
  outline:none;border-color:var(--brass);
}
.woocommerce-cart .coupon button[name="apply_coupon"],
.woocommerce-page .coupon button[name="apply_coupon"]{
  float:none;height:40px;margin:0;padding:0 22px;
  border:1px solid var(--brass);border-radius:0 3px 3px 0;
  background:var(--brass);color:#fff;
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;line-height:1;
}
.woocommerce-cart .coupon button[name="apply_coupon"]:hover,
.woocommerce-page .coupon button[name="apply_coupon"]:hover{
  /* 2026-09-21 订正：原来是 var(--ink) 纯黑。大师兄：「Apply Coupon 按钮点上去以后
     变成黑色，这是不对的，应该变成跟我们网站同一色系的浅一点的颜色，跟 Proceed to
     Checkout 那个按钮颜色变化应该是一致的。」
     Proceed to Checkout 的 hover 实测就是 var(--brass-2)（#c9a878 / rgb(201,168,120)），
     这里对齐过来 —— Apply Coupon / Update Cart / Proceed to Checkout 三个提交类按钮
     的 hover 从此统一走 --brass-2。 */
  background:var(--brass-2);border-color:var(--brass-2);
}
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart .actions button[name="update_cart"]{
  float:right;height:40px;min-height:40px;margin:0;padding:0 22px;
  border:1px solid var(--brass);border-radius:3px;
  /* 2026-09-21 订正：原来是「透明底 + 金棕字」的描边样式。大师兄要求
     「这个按钮正常的状态它也应该是深色的……跟 Apply Coupon 那个按钮，
     它俩设置的颜色是一致的」—— 常态改为金底白字，与 Apply Coupon 完全同款。 */
  background:var(--brass);color:#fff;
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;line-height:1;
}
.woocommerce-cart button[name="update_cart"]:hover:not(:disabled){
  /* 「点上去以后才变成浅色的」——可点状态下 hover 变 --brass-2，与另两键一致 */
  background:var(--brass-2);border-color:var(--brass-2);color:#fff;
}
/* ⚠️ 「按钮会变得长一点」的根因在这里。
   WooCommerce 自带一条
       .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled]{
         padding: .618em 1em }
   特异性 (0,3,1)，而上面 `.woocommerce-cart button[name="update_cart"]` 只有
   (0,2,1) —— 被它压过。按钮字号 11.5px，于是 .618em = 7.107px、1em = 11.5px：
       未改数量（disabled）padding = 7.107px 11.5px → 实测宽度 112px
       改过数量（enabled）  padding = 0 22px       → 实测宽度 133px
   21px 的跳变，就是大师兄截图里「调整数量以后按钮变得长一点」。
   下面用 (0,4,1) 的 `.actions button[name="update_cart"]:disabled` 反压回去，
   两种状态共用同一个 padding。同时常态已是金底白字，disabled 不再降透明度
   —— 两个状态视觉完全一致，宽度也都是 133px。
   （`cursor:not-allowed` 只影响鼠标指针，不影响外观，保留作为不可点的提示。） */
.woocommerce-cart .actions button[name="update_cart"]:disabled,
.woocommerce-cart .actions button[name="update_cart"][disabled],
.woocommerce-cart button[name="update_cart"]:disabled,
.woocommerce-cart button[name="update_cart"][disabled]{
  padding:0 22px;opacity:1;
  background:var(--brass);border-color:var(--brass);color:#fff;
  cursor:not-allowed;
}
/* 再补一层 (0,4,1)/(0,5,1) 的钉住规则：
   未改动数量时按钮是 disabled，鼠标扫过会触发 WooCommerce 自带的
       .woocommerce button.button:hover{ background-color:#e9e6ed }
   （0,3,1）—— 它和上面那条 disabled 规则**特异性相同**，谁赢看加载顺序；
   实测线上是它赢，于是鼠标一扫按钮就从金底变成一层淡紫灰
   rgb(233,230,237)：既不是站点色系，又让人误以为可以点。
   这里把「常态 + 悬停」两个状态都锁成金底白字，disabled 就是 disabled，
   不会有任何变色反馈（真正的浅色反馈留给可点状态，见上面 :hover:not(:disabled)）。
   ⚠️ 选择器别写 `body.woocommerce...` —— 实测购物车页 body 的类名是
      `woocommerce-cart woocommerce-page woocommerce-js`，**没有裸 `.woocommerce`**，
      写 `body.woocommerce.woocommerce-cart` 永远匹配不上（第一版就踩了这个坑，
      线上实测 disabled 悬停仍是 rgb(233,230,237)）。
      这里取 body 上确实存在的两个类，凑到 (0,5,2)：
        body(0,0,1) + .woocommerce-cart(0,1,0) + .woocommerce-page(0,1,0)
        + button(0,0,1) + [name](0,1,0) + :disabled(0,1,0) + :hover(0,1,0)
      压过 WooCommerce 3.9+ 那组 `:where()` 写法（:where 自身 0 特异性，
      整条 (0,4,1)）的 disabled:hover 底色 #e9e6ed。 */
body.woocommerce-cart.woocommerce-page button[name="update_cart"]:disabled,
body.woocommerce-cart.woocommerce-page button[name="update_cart"][disabled],
body.woocommerce-cart.woocommerce-page button[name="update_cart"]:disabled:hover,
body.woocommerce-cart.woocommerce-page button[name="update_cart"][disabled]:hover,
body.woocommerce-cart button[name="update_cart"]:disabled:hover,
body.woocommerce-cart button[name="update_cart"][disabled]:hover{
  padding:0 22px;opacity:1;
  background:var(--brass);border-color:var(--brass);color:#fff;
  cursor:not-allowed;
}
/* 三个控件在同一行里基线对齐 */
.woocommerce-cart .actions > .coupon,
.woocommerce-cart .actions > button{ vertical-align:middle }

/* ---------- 2. 购物车：下单按钮与下方快捷支付按钮统一字号与宽度 ----------
   实测（改前）：
     .checkout-button「PROCEED TO CHECKOUT」  346 × 58  字号 19.375px  字距 3.1px
     下方 PayPal / Apple Pay / Google Pay      346 × 45  SDK 按钮（iframe，字号不可改）
   两个按钮宽度一样、字号差了近 4px，摞在一起明显不齐（大师兄截图第 2 张）。
   SDK 按钮的字在 iframe 里改不了，所以**把上面那个大按钮收到与之一致**：
   字号 19.375 → 15.5px、字距 3.1 → 1.55px、高度 58 → 46px，与 45px 的 SDK 按钮等高。

   2026-09-21 追加：上一版把 display 改成了 inline-flex 之后，按钮宽度退回「按内容算」，
   实测只有 231.344px，而 PayPal / Google Pay 的 iframe 是 346px ——
   大师兄：「Proceed to Checkout 按钮的长度应该跟 PayPal 和 Google Pay 按钮长度是一样的。」
   补一个 width:100%：父级 .wc-proceed-to-checkout 是 345.594px、与支付 iframe 同宽，
   于是三者严丝合缝对齐（inline-flex + justify-content:center 保证文字仍居中）。 */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-page .wc-proceed-to-checkout a.checkout-button{
  height:46px;width:100%;padding:0 20px;margin-bottom:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:15.5px;font-weight:600;letter-spacing:.1em;
  line-height:1;
}
.woocommerce-cart .wc-proceed-to-checkout .ppc-button-wrapper,
.woocommerce-cart .wc-proceed-to-checkout .ppc-button-apm,
.woocommerce-cart .wc-proceed-to-checkout #ppc-button-ppcp-gateway{
  margin-top:10px;
}
.woocommerce-cart .wc-proceed-to-checkout .ppc-button-wrapper .ppc-button-apm:first-child{ margin-top:0 }

/* ---------- 12. 购物车：合计表在左、三个按钮在右（仅桌面端） ----------
   实测（改前，1366 视口，各元素 boundingRect）：
     .cart-collaterals            [125,383,720,442]  display:block
       └ .cart_totals             [499,383,346,442]  float:right  ← WC 核心
                                                                     `.cart-collaterals .cart_totals{float:right;width:48%}`
           ├ h2                         [499,417,346,34]
           ├ table.shop_table           [499,462,346,145]   ← 合计表
           └ .wc-proceed-to-checkout    [499,613,346,191]   ← 「三个按钮」都在这里
               ├ a.checkout-button              [499,629,231,46]
               └ .ppc-button-wrapper            [499,685,346,104]
                   ├ #ppc-button-ppcp-gateway        [499,685,346,45]  ← PayPal
                   └ #ppc-button-googlepay-container [499,744,346,45]  ← Google Pay
   → 整块浮在右边、左边 346px 完全空着（720 宽的容器里只用了右半），
     而且合计表与三个按钮是**上下**关系，整块 442px 高、下方大片留白。
   大师兄要的是：「cart totals 在左边，右边是三个按钮。这样，那个 cart totals 表格
   和三个按钮加起来就跟上边的表格一样宽。」上边表格（form.woocommerce-cart-form
   table.shop_table）实测宽 720px，于是两列各取 48%、中间 4% 间距：
       720 × 48% = 345.6px（左右各一）
       345.6 + 720×4%(28.8) + 345.6 = 720px  ✓ 与上方表格严丝合缝
   而 345.6px 又正好等于 PayPal / Google Pay 那个 346px 的 iframe 宽度，
   所以右列三个按钮天然等宽对齐。

   ⚠️ 两条前置事实（都实测过，别再踩）：
   ① `.cart_totals` 的直接子元素除 h2 / table / .wc-proceed-to-checkout 外，
      还有一个 `#ppcp-recaptcha-v2-container`（0 高）。所以要显式写 grid-row，
      靠自动流排会把它塞进右列。
   ② 这里**不需要**像账户页 `.col2-set` 那样关伪元素 —— 实测
      `.cart_totals::before/::after` 与 `.cart-collaterals::before/::after`
      的 content 都是 normal（根本没生成盒子）。
   ③ 选择器必须用 `.cart-collaterals .cart_totals`（0,3,0）跟 WC 核心那条
      同特异性、靠「本文件后加载」取胜。只写 `.woocommerce-cart .cart_totals`
      （0,2,0）压不住它 —— 实测 48% / float:right 都还在。
   手机端（≤768px）在下面第 9 节里显式 display:block 关掉网格，保持上下关系。 */
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals{
  float:none;width:100%;
  display:grid;
  grid-template-columns:minmax(0,48%) minmax(0,48%);
  column-gap:4%;
  align-items:start;
}
.woocommerce-cart .cart_totals > h2,
.woocommerce-page .cart_totals > h2{ grid-column:1 / -1;grid-row:1;margin:0 0 14px }
.woocommerce-cart .cart_totals > table.shop_table,
.woocommerce-page .cart_totals > table.shop_table{ grid-column:1;grid-row:2;margin:0 }
.woocommerce-cart .cart_totals > .wc-proceed-to-checkout,
.woocommerce-page .cart_totals > .wc-proceed-to-checkout{ grid-column:2;grid-row:2;margin:0;padding:0 }
.woocommerce-cart .cart_totals > #ppcp-recaptcha-v2-container,
.woocommerce-page .cart_totals > #ppcp-recaptcha-v2-container{ grid-column:1 / -1;grid-row:3 }

/* ---------- 3. 我的账户：地址两栏改成带框线的卡片 ----------
   大师兄：「这个最好有框线，现在看起来版面有点乱。」
   原来 Billing / Shipping 两块白底无框，标题、链接、斜体说明全浮在纸色背景上，
   两栏之间没有分隔，读起来分不清哪块是哪个。加一层细框 + 纸白底 + 内边距即可。 */
/* ⚠️ 关键一步：WooCommerce 的清除浮动写法是
     .woocommerce .col2-set::before, .woocommerce .col2-set::after{
       content:" ";display:table }
   而 display 不是 inline 的伪元素**在网格容器里会变成网格项**、占掉第一格。
   后果：Billing 被挤到第 2 列、Shipping 掉到第 2 行 —— 两栏根本没并排，
   看起来就是「版面有点乱」（大师兄截图第 4 张）。登录 / 注册两栏同理。
   先把这两个伪元素关掉，网格才能从 (1,1) 正常排。 */
.woocommerce-account .woocommerce-Addresses.col2-set::before,
.woocommerce-account .woocommerce-Addresses.col2-set::after,
.woocommerce-account .u-columns.col2-set::before,
.woocommerce-account .u-columns.col2-set::after{ display:none;content:none }

.woocommerce-account .woocommerce-Addresses.col2-set,
.woocommerce-account .u-columns.col2-set{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;
}
.woocommerce-account .woocommerce-Addresses.col2-set .col-1,
.woocommerce-account .woocommerce-Addresses.col2-set .col-2,
.woocommerce-account .u-columns.col2-set .col-1,
.woocommerce-account .u-columns.col2-set .col-2{
  float:none;width:auto;padding:24px 24px 26px;
  border:1px solid var(--line);border-radius:6px;
  background:rgba(255,255,255,.62);
}
.woocommerce-account .woocommerce-Address h3,
.woocommerce-account .woocommerce-Address h2{
  margin:0 0 6px;font-family:var(--serif);font-size:23px;font-weight:400;color:var(--ink);
}
.woocommerce-account .woocommerce-Address address{
  margin:0;font-style:normal;line-height:1.85;color:var(--ink-2);font-size:14px;
}
.woocommerce-account .woocommerce-Address address em{ color:var(--muted) }
.woocommerce-account .woocommerce-Address .edit,
.woocommerce-account .woocommerce-Address a.edit{
  display:inline-block;margin-top:12px;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);border-bottom:1px solid var(--brass);padding-bottom:2px;
}

/* 显式落位，不依赖自动排版（顺序永远不会翻） */
.woocommerce-account .woocommerce-Addresses.col2-set > .col-1,
.woocommerce-account .u-columns.col2-set > .col-1{ grid-column:1;grid-row:1 }
.woocommerce-account .woocommerce-Addresses.col2-set > .col-2,
.woocommerce-account .u-columns.col2-set > .col-2{ grid-column:2;grid-row:1 }

/* ---------- 4. 商品详情页：数量栏与「Add to Cart」并排、同高、同底色 ----------
   实测（改前）：数量栏 144×50 白底细灰框，加购按钮 549×40 金底**墨色描边**，
   两者上下两行、底色一白一金（大师兄截图第 8 张）。
   改法：form.cart 变 flex，两者并排；高度统一 50px；
   底色统一用主题金 var(--brass)（与购物车/结账的下单按钮同一支金色，
   全站「购买动作」是一个颜色），描边同色，避免之前金底墨边那种脏边。 */
.jy-pdp-form form.cart{
  display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin:0;
}
.jy-pdp-form form.cart::after{ display:none }
.jy-pdp-form form.cart .quantity{
  display:flex;align-items:stretch;flex:0 0 auto;width:152px;
  margin:0;border:1px solid var(--brass);border-radius:3px;overflow:hidden;
  background:var(--brass);
}
.jy-pdp-form form.cart .quantity input.qty{
  /* ⚠️ min-width:0 必须写。flex 子项默认 min-width:auto = 自身最小内容宽度，
     而 <input> 的最小内容宽度就是它那套默认尺寸（实测 148px），**不肯收缩**。
     于是 152px 的容器里塞进 40 + 148 + 40 = 228px：
        − 留在框内、输入框占满、**+ 被挤到框外**（实测 + 的 left=939，
        而容器只到 902），再被容器上的 overflow:hidden 整个裁掉 ——
        + 号是白字透明底，裁掉后完全看不见，看起来就像「右边没有加号」。
     补 min-width:0 后输入框可收缩到 150-40-40 = 70px，三件正好铺满。
     （2026-09-21 截图验收时发现：之前只验了「− / + 都在 DOM 里」和
      「点 + 能加数量」，都通过了 —— 因为程序化 click 对已裁剪元素照样生效，
      必须比对 boundingRect 是否落在容器内才查得出来。） */
  flex:1 1 auto;min-width:0;width:auto;height:48px;padding:0;border:0;
  background:transparent;color:#fff;text-align:center;
  font-family:var(--sans);font-size:15px;font-weight:600;
}
.jy-pdp-form form.cart .quantity .jy-qty-btn{
  flex:0 0 40px;width:40px;height:48px;
  background:transparent;border:0;color:rgba(255,255,255,.88);
  font-size:16px;line-height:1;cursor:pointer;transition:background .18s,color .18s;
}
.jy-pdp-form form.cart .quantity .jy-qty-btn:hover{ background:rgba(0,0,0,.16);color:#fff }
.woocommerce .jy-pdp-form .single_add_to_cart_button{
  display:inline-flex;align-items:center;justify-content:center;
  flex:1 1 200px;width:auto;min-width:0;height:50px;padding:0 26px;margin:0;
  border:1px solid var(--brass);border-radius:3px;
  background:var(--brass);color:#fff;
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  transition:background .22s,border-color .22s,opacity .22s;
}
.woocommerce .jy-pdp-form .single_add_to_cart_button:hover{ background:var(--ink);border-color:var(--ink) }
/* 变体商品：规格表占整行，下面的数量 + 按钮仍是并排一行 */
.jy-pdp-form form.cart .variations,
.jy-pdp-form form.cart .woocommerce-variation-description,
.jy-pdp-form form.cart .woocommerce-variation-price,
.jy-pdp-form form.cart .woocommerce-variation-availability{ flex:1 1 100% }

/* ---------- 4b. 变体商品：数量栏与加购按钮必须真正并排 ----------
   ⚠️ 2026-09-22 第 12 轮（大师兄）：「Add to Cart 和数量选择那个这两个没有放在
      一行，现在还是错开的，我之前跟你说过。」
   （第 8 轮改过一版、第 9 轮又改过一版手机端，都没根治 —— 原因就在下面。）

   变体商品（有 COLOR 这类规格选项）的 DOM 比简单商品**多一层**
   `.woocommerce-variation-add-to-cart`。WooCommerce 自己的 JS 会往这一层身上
   直接写 **行内 style**（选中规格后 display:block 显示、重置时 display:none 隐藏）。
   行内样式的优先级高于任何 CSS 选择器 —— 上面那条 `.jy-pdp-form form.cart{display:flex}`
   是给**外层 form** 的，管不到这一层，于是数量栏和加购按钮退回上下两行。

   所以这里两件事都要做：
     ① 用 !important 顶掉行内写的 display:block；
     ② 用 :not([style*="display: none"]) **放行**行内写的 none ——
        否则未选规格时会把整个购买区强行显示出来，那是误伤。
   （同 reCAPTCHA 徽标那次：行内 style 只能用 !important 压。）

   实测（用**线上真实 CSS** + content-single-product.php 的真实 DOM 复刻，1366 视口）：
     改前 —— 数量栏 top=415、加购按钮 top=465，**错开 50px**（两者都占满整行）；
     改后 —— 两者 top 相同、横向相邻，数量栏 152px + 按钮吃掉剩余宽度。 */
.jy-pdp-form form.cart .woocommerce-variation-add-to-cart:not([style*="display: none"]):not([style*="display:none"]){
  display:flex !important;
  flex-wrap:wrap;
  align-items:stretch;
  gap:10px;
  width:100%;
}

/* ---------- 5. 商品详情页：折叠面板的排版（内容现在来自信息页） ----------
   折叠面板的 Shipping / Returns 两段已改为直接读 /shipping/、/returns/ 的正文
   （见 inc/helpers.php 的 jy_info_page_html()），所以会带 h2 / ul / ol。
   这里给它们一套「比正文小一号」的排版，避免页面内出现两套同样重的标题。 */
.jy-acc-body h2,
.jy-acc-body h3{
  margin:20px 0 9px;
  font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
}
.jy-acc-body h2:first-child,
.jy-acc-body h3:first-child{ margin-top:0 }
.jy-acc-body ul,
.jy-acc-body ol{ margin:0 0 12px;padding-left:19px }
.jy-acc-body li{ margin:0 0 5px }
.jy-acc-body p{ margin:0 0 11px }
.jy-acc-body p:last-child{ margin-bottom:0 }
.jy-acc-body p.lead{ font-size:14.5px;color:var(--ink) }
.jy-acc-body strong{ color:var(--ink) }
.jy-acc-body a{ color:var(--brass);text-decoration:underline;text-underline-offset:2px }
.jy-acc-body a:hover{ color:var(--ink) }

/* ---------- 6. 信息页（关于我们 / 配送 / 退换 / FAQ …）左侧导航 ----------
   大师兄：「About Us 里边除了内容以外，还要有 About Us 本身的导航栏。」
   桌面：左 240px 吸顶导航 + 右内容；手机：导航变成顶部可换行的胶囊条。
   页面清单与当前页高亮由 inc/helpers.php 的 jy_info_nav_html() 生成。 */
.jy-inner.has-info-nav{
  display:grid;grid-template-columns:236px minmax(0,1fr);
  gap:48px;align-items:start;
}
.jy-info-nav{ position:sticky;top:calc(var(--btH,112px) + 18px) }
.jy-info-nav h2{
  margin:0 0 14px;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.jy-info-nav ul{ margin:0;padding:0;list-style:none }
.jy-info-nav li{ margin:0 0 2px }
/* 手机端抽屉专用的两件东西 —— 左边缘触发标签、抽屉内的关闭叉号。
   桌面端一律不出现（第 9 节的 @media(max-width:900px) 里再放开）。 */
.jy-info-tab,
.jy-info-x{ display:none }
.jy-info-nav a{
  display:block;padding:9px 14px;border-left:2px solid transparent;
  color:var(--ink-2);font-size:13.5px;line-height:1.4;
  transition:color .2s,border-color .2s,background .2s;
}
.jy-info-nav a:hover{ color:var(--ink);background:rgba(255,255,255,.5) }
.jy-info-nav .is-current a,
.jy-info-nav li.is-current a{
  color:var(--ink);font-weight:600;
  border-left-color:var(--brass);background:rgba(255,255,255,.75);
}
/* 页内目录（About 这类长页按正文里的 h2 自动生成） */
.jy-toc{ margin:22px 0 0;padding:0;list-style:none }
.jy-toc h3{
  margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.jy-toc a{
  display:block;padding:5px 0;font-size:13px;color:var(--ink-2);
  border-bottom:1px solid transparent;
}
.jy-toc a:hover{ color:var(--brass) }

/* ---------- 7. 返回顶部按钮 ----------
   大师兄：「每一页要设置返回顶部的按钮，大小和左侧 TalkTo 按钮一样，颜色也追随它。」
   站上 .to-top 原来 42px（桌面）/ 38px（手机）、白底灰箭头、要滚过 640px 才出现。
   现在：直径统一 44px、圆形、**金底白箭头**（与页面里所有主按钮同一支金色，
   也就是左下角那个圆按钮的位置与体量），出现门槛降到 260px，内页也能随时用。 */
/* 2026-09-21 第 7 轮再改：
   上一版做成「44px 金底白箭头、放左下角」。大师兄看了说
   「大小和左侧 TalkTo 按钮一样，颜色也追随 TalkTo 按钮的颜色」，
   并要求「向上返回顶部按钮在右下角」。
   现在照参考站的 .jp-back-to-top 规格重做：
   米白底 + 金色图标（原站实测 rgb(251,248,239) / rgb(168,132,60)）。
   2026-09-21 第 9 轮（大师兄）：「返回顶部的图标好像比那个 TawkTo 的图标小了
   一点点，你参照对标站的设定去调整，大概往大了调 1~2 个单位吧。
   现在两个图标的底部基本对齐的，还是按照底部对齐。」
   —— 之前这里是 56px（比原站小 3px、比 Tawk 气泡 60px 小 4px），
   现在直接取原站实测的 59px；底边距由 boutique.css 的 .to-top 控制，两端仍对齐。
   定位（right/bottom）在 boutique.css 的 .to-top 里，这里只管体量与配色。 */
.to-top{
  width:59px;height:59px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(253,252,250,.96);color:var(--brass);border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(64,52,34,.14);
  transition:background .25s,color .25s,transform .25s,opacity .3s,visibility .3s;
}
.to-top:hover{ background:var(--brass);color:#fff;transform:translateY(-2px) }
.to-top svg{ width:21px;height:21px;stroke-width:2 }

/* ---------- 8. 星级空态 ----------
   站上 30 个商品目前 0 条评论（库里那 666 条是老站 Pawu 遗留、挂在不存在的商品上），
   所以商品卡与详情页的星级一直是空白。改成：没评论时显示五颗空心星 +
   「No reviews yet」，形态上告诉顾客这里可以写第一条，而**不编造分数**。
   颜色必须带 body 前缀才能压住 inc/dynamic-css.php 的
   `body .pcard .stars .st{color:var(--jy-card-star-color)}`（特异性 0,3,1）。 */
body .pcard .stars--empty .st,
body .jy-pdp-rating--empty .st{ color:rgba(27,25,22,.20) }
body .pcard .stars--empty .ct,
body .jy-pdp-rating--empty .ct{
  color:var(--muted);font-size:11px;letter-spacing:.02em;
}
.jy-pdp-rating--empty{ margin-bottom:4px }

/* ---------- 9. 窄屏：以上几块的手机端适配 ---------- */
@media (max-width:900px){
  .jy-inner.has-info-nav{ grid-template-columns:minmax(0,1fr);gap:0 }

  /* ── 信息页导航：手机端改成「从左边框往外弹」的抽屉 ──
     大师兄 2026-09-21：「手机界面 About Us 各页面的列表，以左边框往外弹的
     形式显示出来。」
     改前是 8 个胶囊横排换行（实测 @390 占 326×171，把正文整整压下去 171px）。
     现在把这同一个 <aside> 变成 fixed 抽屉：平时整块移出左边界
     （translateX(-102%)），只在视口左边缘留一枚竖排「Pages」标签；
     点标签 → 面板从左边框推出来（.is-open），点遮罩 / 叉号 / Esc 收回。
     桌面端的左侧吸顶栏（position:sticky）不受影响。
     标记与开关脚本在 page.php，两处一起改才生效。
     ⚠️ visibility 必须跟着一起过渡：只写 transform 的话，关闭时 visibility
     立刻变 hidden，往外滑的动画就看不见了。写 `visibility .5s` 后，变 visible
     是立即生效、变 hidden 则等过渡走完 —— 正是想要的。 */
  .jy-info-nav{
    position:fixed;top:0;left:0;bottom:0;z-index:83;
    width:min(308px,84vw);
    margin:0;padding:18px 20px 30px;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:rgba(253,252,250,.975);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border-right:1px solid var(--line);border-bottom:0;
    box-shadow:18px 0 55px rgba(64,52,34,.18);
    transform:translateX(-102%);visibility:hidden;
    transition:transform .5s var(--ease),visibility .5s;
  }
  .jy-info-nav.is-open{ transform:none;visibility:visible }

  /* 抽屉里恢复竖排列表（即桌面端那套），不再用横排胶囊 */
  .jy-info-nav ul{ display:block;margin:0 }
  .jy-info-nav li{ margin:0 0 2px }
  .jy-info-nav a{
    padding:11px 14px;border:0;border-left:2px solid transparent;
    border-radius:0;background:transparent;font-size:13.5px;
  }
  /* 当前页：保留桌面端那条金色左边框（上面 `.jy-info-nav .is-current a`
     的特异性更高，会管住 border-left-color），底色换成淡金 */
  .jy-info-nav .is-current a,
  .jy-info-nav li.is-current a{ background:rgba(173,138,92,.1) }

  /* 抽屉标题就是 jy_info_nav_html() 本来就输出的 <h2>Help &amp; Info</h2>，
     样式沿用桌面端那条规则；这里只补一个右上角的关闭叉号。 */
  .jy-info-x{
    display:grid;place-items:center;
    position:absolute;top:14px;right:14px;
    width:32px;height:32px;padding:0;
    border:0;border-radius:50%;background:transparent;
    color:var(--ink-2);font-size:20px;line-height:1;cursor:pointer;
    transition:background .25s,color .25s;
  }
  .jy-info-x:hover{ background:rgba(173,138,92,.14);color:var(--brass) }

  /* 左边缘的竖排触发标签：贴住视口左边、半胶囊形，看着像从边框里长出来 */
  .jy-info-tab{
    display:block;
    position:fixed;left:0;top:50%;z-index:82;
    margin:0;padding:16px 8px;
    transform:translateY(-50%);
    writing-mode:vertical-rl;
    border:1px solid var(--line);border-left:0;
    border-radius:0 999px 999px 0;
    background:rgba(253,252,250,.97);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    box-shadow:5px 0 18px rgba(64,52,34,.13);
    font-family:var(--sans);font-size:10.5px;font-weight:600;
    letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);
    cursor:pointer;
    transition:color .25s,background .25s,opacity .3s,transform .42s var(--ease);
  }
  .jy-info-tab:hover{ color:var(--brass);background:rgba(253,252,250,1) }
  /* 抽屉打开时标签跟着面板一起滑进去、淡出 */
  .jy-info-tab.is-hidden{
    opacity:0;pointer-events:none;
    transform:translateY(-50%) translateX(-100%);
  }

  /* 抽屉打开时锁住页面滚动（只在手机端加，桌面端不锁） */
  html.jy-info-lock,
  html.jy-info-lock body{ overflow:hidden }

  .jy-toc{ display:none }
}
@media (max-width:768px){
  /* 购物车三个控件：整宽排布，仍然等高 */
  .woocommerce-cart-form table.shop_table_responsive tbody tr td.actions .coupon{
    display:flex;width:100%;margin:0 0 10px;
  }
  .woocommerce-cart-form table.shop_table_responsive tbody tr td.actions .coupon input.input-text{
    width:auto;flex:1 1 auto;height:44px;
  }
  .woocommerce-cart-form table.shop_table_responsive tbody tr td.actions .coupon button{
    height:44px;flex:0 0 auto;
  }
  /* 三控件等高 44px。⚠️ 上面那几条用的是后代选择器，压不住基础规则里
     `#coupon_code`（含 ID，特异性 122）和 `.actions button[name="update_cart"]`
     （0,3,1）—— 实测手机端量出来是 40 / 44 / 40，三件不齐。
     这里**照抄基础规则的选择器**再写一遍，靠同特异性下「后出现」取胜。 */
  .woocommerce-cart .coupon input#coupon_code,
  .woocommerce-page .coupon input#coupon_code,
  .woocommerce .coupon .input-text{ height:44px }
  .woocommerce-cart .coupon button[name="apply_coupon"],
  .woocommerce-page .coupon button[name="apply_coupon"]{ height:44px }
  .woocommerce-cart .actions button[name="update_cart"],
  .woocommerce-cart button[name="update_cart"]{ width:100%;height:44px;float:none }

  /* 地址两栏在窄屏改单列后，也要显式落位（否则又会跑回第 2 列） */
  .woocommerce-account .woocommerce-Addresses.col2-set > .col-1,
  .woocommerce-account .u-columns.col2-set > .col-1{ grid-column:1;grid-row:1 }
  .woocommerce-account .woocommerce-Addresses.col2-set > .col-2,
  .woocommerce-account .u-columns.col2-set > .col-2{ grid-column:1;grid-row:2 }
  .woocommerce-account .woocommerce-Addresses.col2-set,
  .woocommerce-account .u-columns.col2-set{ grid-template-columns:minmax(0,1fr);gap:16px }

  /* 桌面端把 .cart_totals 改成了两列网格（合计表左 / 三个按钮右），
     手机端要维持「合计表在上、按钮在下」的上下关系（大师兄：「手机界面这个
     Totals 表格跟按钮还是上下关系，不用变」）——显式关掉网格。
     ⚠️ 必须显式关：本文件 1339 行起的那个 @768 里只有
        `.cart-collaterals .cart_totals{width:100%;float:none}`，
        它管得到 width / float，**管不到 display** —— 不改的话网格会漏到手机端。 */
  .woocommerce-cart .cart-collaterals .cart_totals,
  .woocommerce-page .cart-collaterals .cart_totals{ display:block }
  .woocommerce-cart .cart_totals > h2,
  .woocommerce-cart .cart_totals > table.shop_table,
  .woocommerce-cart .cart_totals > .wc-proceed-to-checkout,
  .woocommerce-cart .cart_totals > #ppcp-recaptcha-v2-container{
    grid-column:auto;grid-row:auto;
  }
}
@media (max-width:520px){
  /* 商品页购买区：窄屏放不下两件，回到上下两行，但保持同高同底色 */
  /* 2026-09-21 订正：这里原本把数量框拉成整宽（width:100%），实测 @390 量到
     362 × 50 —— 几乎占满一屏，大师兄说「手机界面货品的数量框看起来有点大……
     把那个数量框的宽高度给它加小一点，和网页端一致就好」。
     网页端是 152 × 50（外层 152 固定宽 + 48px 高的 [−][输入][+]）——
     手机端直接沿用同一尺寸，只让下面的加购按钮占满整宽。
     高度本来就是 50，与网页端一致，不用动。 */
  /* 2026-09-21 第 9 轮（大师兄）：「手机界面下详情页中 Edit to Cart 和数量显示
     没有像电脑界面那样排列在一行，你调一下。」
     实测 @390：数量框 [24,863,152,50]、按钮 [14,923,362,50] —— 按钮被
     flex:1 1 100% 挤到了第二行。现在改成同一行：数量框固定 152，按钮吃剩余宽度。
     ⚠️ form 上原来有个 ::after{clear:both}，在 flex 容器里会变成一个占位的
     flex 子项，必须一并关掉，否则那行永远排不满。 */
  .jy-pdp-form form.cart{
    display:flex;flex-wrap:nowrap;align-items:stretch;gap:12px;
  }
  .jy-pdp-form form.cart::after{ display:none }
  .jy-pdp-form form.cart .quantity{ flex:0 0 auto;width:152px;margin:0 }
  .woocommerce .jy-pdp-form .single_add_to_cart_button{
    flex:1 1 auto;width:auto;min-width:0;
  }
  /* 2026-09-22 第 12 轮：上面四条只写在 form.cart 上，**管不到变体商品多出来的
     那一层** .woocommerce-variation-add-to-cart（WC 会往它身上写行内 display，
     把布局压回 block）—— 手机上数量栏和加购按钮照样错开。这里补齐同一层，
     宽度不够时用 nowrap 让按钮收缩，而不是换行。详见第 4b 节。 */
  .jy-pdp-form form.cart .woocommerce-variation-add-to-cart:not([style*="display: none"]):not([style*="display:none"]){
    display:flex !important;flex-wrap:nowrap;align-items:stretch;gap:12px;width:100%;
  }
}

/* ---------- 10. 补充：目录列表 reset + 内页只留「回到顶部」 ---------- */
.jy-toc ul{ margin:0;padding:0;list-style:none }

/* 「Back to the shop front」（回到首屏场景）与右下角的「回到顶部」功能重叠：
   首页它=滚回首屏（效果与回到顶部基本一样），内页又没有 scene 区块、点了没反应。
   2026-09-21 大师兄要求「统一 TalkTo 在左下角，向上返回顶部按钮在右下角」——
   右下角只留一个按钮，这个冗余胶囊全站关掉。
   对应地，boutique.js 里 .to-top 的出现门槛也从 250px 提到 400px（对齐参考站），
   避免刚滚一点就冒出来。 */
body .back-scene{ display:none !important }

/* ---------- 11. 我的账户：左侧导航栏 ----------
   大师兄：「My Account 下面那几页，你都要在左侧设导航栏，我可以随时切换到其他子页。」
   根因见 inc/woocommerce.php 第 13 节：宽屏下这个导航只有 WC 默认的
   float:30% 在撑版、主题没给过样式，看着不像是导航。

   只挂在 body.jy-acc-nav 上（**已登录 + 账户页**才由 PHP 输出这个类），
   所以未登录时的登录 / 注册两栏不会被这套网格挤窄。
   视觉与第 6 节「信息页左侧导航」保持同一套语言：细框卡片 + 当前项左侧金线。 */
/* 同上：先关掉 WC 的清除浮动伪元素，否则导航会被挤到第 2 列、
   内容掉到第 2 行（实测：导航 box.x=409 落在 236px 那一列之外，
   内容 box.y 比导航低一整行）。 */
body.jy-acc-nav .woocommerce::before,
body.jy-acc-nav .woocommerce::after{ display:none;content:none }

body.jy-acc-nav .woocommerce{
  display:grid;grid-template-columns:236px minmax(0,1fr);
  gap:48px;align-items:start;
}
/* 显式落位：导航永远左、内容永远右 */
body.jy-acc-nav .woocommerce-MyAccount-navigation{ grid-column:1;grid-row:1 }
body.jy-acc-nav .woocommerce-MyAccount-content{ grid-column:2;grid-row:1 }
body.jy-acc-nav .woocommerce-MyAccount-navigation{
  float:none;width:auto;margin:0;
  position:sticky;top:calc(var(--btH,98px) + 18px);
}
body.jy-acc-nav .woocommerce-MyAccount-content{ float:none;width:auto }
body.jy-acc-nav .woocommerce-MyAccount-navigation ul{
  margin:0;padding:0;list-style:none;
  border:1px solid var(--line);border-radius:6px;
  background:rgba(255,255,255,.62);overflow:hidden;
}
body.jy-acc-nav .woocommerce-MyAccount-navigation li{
  margin:0;padding:0;border:0;
  border-bottom:1px solid var(--line);
}
body.jy-acc-nav .woocommerce-MyAccount-navigation li:last-child{ border-bottom:0 }
body.jy-acc-nav .woocommerce-MyAccount-navigation li a{
  display:block;padding:12px 16px;
  font-size:13.5px;line-height:1.4;color:var(--ink-2);
  border-left:2px solid transparent;
  transition:color .2s,border-color .2s,background .2s;
}
body.jy-acc-nav .woocommerce-MyAccount-navigation li a:hover{
  color:var(--ink);background:rgba(255,255,255,.78);
}
body.jy-acc-nav .woocommerce-MyAccount-navigation li.is-active a{
  color:var(--ink);font-weight:600;
  border-left-color:var(--brass);background:rgba(255,255,255,.92);
}
body.jy-acc-nav .woocommerce-MyAccount-content > p:first-child{
  margin-top:0;font-size:14.5px;color:var(--ink-2);
}
/* 账户页里的订单表 / 地址卡在右栏里靠左对齐更整齐 */
body.jy-acc-nav .woocommerce-MyAccount-content .woocommerce-orders-table,
body.jy-acc-nav .woocommerce-MyAccount-content .shop_table{ margin-top:0 }

@media (max-width:900px){
  body.jy-acc-nav .woocommerce{ grid-template-columns:minmax(0,1fr);gap:0 }
  body.jy-acc-nav .woocommerce-MyAccount-navigation{ grid-column:1;grid-row:1 }
  body.jy-acc-nav .woocommerce-MyAccount-content{ grid-column:1;grid-row:2 }
  /* 手机端：导航收成**一行横向可滑的胶囊**并吸在页眉下面，
     这样在子页里往下滚也随时能切到别的子页（大师兄要的「随时切换」）。
     只在导航内部横向滚动，不会给整页带出横向溢出。 */
  body.jy-acc-nav .woocommerce-MyAccount-navigation{
    position:sticky;top:var(--btH,98px);z-index:20;
    margin:0 0 22px;padding:9px 4px;
    background:var(--paper);border-bottom:1px solid var(--line);
  }
  body.jy-acc-nav .woocommerce-MyAccount-navigation ul{
    display:flex;flex-wrap:nowrap;gap:7px;
    border:0;border-radius:0;background:none;overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px;
  }
  body.jy-acc-nav .woocommerce-MyAccount-navigation ul::-webkit-scrollbar{ display:none }
  body.jy-acc-nav .woocommerce-MyAccount-navigation li{ flex:0 0 auto;border:0 }
  body.jy-acc-nav .woocommerce-MyAccount-navigation li a{
    padding:8px 15px;border:1px solid var(--line);border-radius:999px;
    border-left-width:1px;font-size:12.5px;white-space:nowrap;
    background:rgba(255,255,255,.62);
  }
  body.jy-acc-nav .woocommerce-MyAccount-navigation li.is-active a{
    border-color:var(--brass);border-left-color:var(--brass);
    background:rgba(255,255,255,.95);
  }
}

/* =========================================================================
   12. 购物车 / 结账的支付按钮区 —— 预留高度，消掉「加载完成时整块跳」
   -------------------------------------------------------------------------
   2026-09-21 第 9 轮（大师兄）：「我点击了 Update Cart 以后，页面刷新，
   刷新了后边 PayPal 和 Google Pay 那两个支付按钮显示不出来了，这是怎么回事？」
   -------------------------------------------------------------------------
   实测结论（三次跑，两次失败一次成功）：**页面没有被缓存**
   （/cart/ 的响应头是 x-litespeed-cache: no-cache），LiteSpeed 的 JS 延迟也
   没开（optm-js_defer=0、optm-js_delay_inc=[]）。真正的原因是 PayPal 的
   智能按钮由 paypal.com 的 SDK 异步渲染，当 SDK 加载慢或被打断时，
   PPCP 的按钮监视器错过渲染时机就不再重试 —— 这时 .ppc-button-wrapper
   里是空的，整块高度从 ~104px 掉到 ~45px，于是「按钮没了 + 页面在跳」。
   这属于 PayPal / 网络侧，主题层修不了按钮本身；能做的是**把高度钉住**，
   至少不让它带动整页重排。按钮真出来时也不会把下面的内容顶下去。
   ========================================================================= */
.woocommerce-cart .wc-proceed-to-checkout .ppc-button-wrapper,
.woocommerce-checkout .wc-proceed-to-checkout .ppc-button-wrapper{
  min-height:104px;
}

/* =========================================================================
   12b. reCAPTCHA 徽标：挪到「返回顶部」按钮的正上方
   ------------------------------------------------------------------------
   大师兄 2026-09-21（第 11 轮）：「ReCAPTCHA 那个按钮现在与返回顶部按钮
   重合的，你把 reCAPTCHA 按钮往上移。好像参考站位置一样，它是在返回顶部
   按钮的正上方。它的下边缘距离返回顶部按钮的上边缘中间有 5 个单位。」

   实测（第 11 轮，购物车 @390）：Google 把徽标钉在
     position:fixed; right:-186px; bottom:14px;  宽 256 折叠成右侧 70×60
   而返回顶部按钮是 59×59、right/bottom 各 14px（手机）/ 20px（桌面）
   → 两者完全重叠（重合区实测 320..376 / 771..830）。

   算式：
     桌面  返回顶部上边缘 = 20(底边距) + 59(高) = 79  →  徽标底边 79 + 5 = 84
     手机  返回顶部上边缘 = 14 + 59 = 73            →  徽标底边 73 + 5 = 78

   ⚠️ Google 用的是**行内 style**，普通声明压不过它，必须 !important。
   徽标横向展开（hover 时往左滑出）不受影响，只动底边。
   ========================================================================= */
body .grecaptcha-badge{ bottom:84px !important }
@media (max-width:620px){ body .grecaptcha-badge{ bottom:78px !important } }