/* ==========================================================================
   LUYUN 麓云茶号 · 商品详情页版面（single-product.php）
   --------------------------------------------------------------------------
   只在单个商品页加载，见 inc/assets.php。
   版面数值来自设计稿画板 6:431 实测（1440 画布）：
     · 内容宽 1200（走 .lu-container）
     · 主区 = 图库 560 + 间距 72 + 信息栏（fill）
     · 详情带 = 信息表卡（fill）+ 冲泡参数卡 420，间距 72
     · 图库主图 620 高 r10；缩略图 88 高 r6，选中态墨绿描边
   移动端（375）：主区单列、详情带单列、手风琴与推荐区全宽，
   相关推荐 2 列。克重药丸在 <380 收成 2 列。

   ★ WooCommerce / Blocksy 标记的覆写都收在本文件第 6 节：
     .variations（原生下拉，视觉隐藏但保留给 JS 契约与读屏）、
     .woocommerce-variation-price（WooCommerce 自营价格位，被 .lu-pd__price
       取代；clip 隐藏而非 display:none，保住 role="alert" 读屏播报）、
     .woocommerce-variation-availability（库存提示，缺货时唯一说明）、
     .variations_button / form.cart（加购行容器，见 6.2 关于 Blocksy
       .ct-cart-actions 不渲染的说明）、
     .quantity / .ct-increase / .ct-decrease（数量步进器）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 页面框 + 面包屑
   -------------------------------------------------------------------------- */
.lu-pd { display: block; }

.lu-pd__crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-block: var(--sp-6) 0;
  font-size: var(--fs-label);
  color: var(--fg-muted);
}
.lu-pd__crumb {
  color: var(--fg-muted);
  text-decoration: none;
  border-bottom: var(--bw-hairline) solid transparent;
}
.lu-pd__crumb:hover { color: var(--fg-primary); border-bottom-color: currentColor; }
.lu-pd__crumb-sep { color: var(--fg-faint); }
.lu-pd__crumb--current { color: var(--fg-primary); font-weight: var(--fw-medium); }

/* --------------------------------------------------------------------------
   2. 主区 —— 图库 + 信息栏
   -------------------------------------------------------------------------- */
.lu-pd__main {
  display: grid;
  grid-template-columns: 560px minmax(0, 1fr);
  gap: var(--sp-8);
  padding-block: var(--sp-6) var(--sp-8);
}
@media (max-width: 1023px) {
  .lu-pd__main {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
    padding-block: var(--sp-5) var(--sp-6);
  }
}

/* —— 图库 —— */
.lu-pd__gallery { display: block; }

.lu-pd__stage {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-surface-alt);
  aspect-ratio: 560 / 620;
}
.lu-pd__stage-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lu-pd__stage-img--empty {
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 14px,
      rgba(31, 61, 43, 0.04) 14px 28px
    );
}
@media (max-width: 1023px) {
  .lu-pd__stage { aspect-ratio: 4 / 3; }
}

.lu-pd__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.lu-pd__thumb {
  display: block;
  padding: 0;
  border: var(--bw-hairline) solid transparent;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: none;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  transition: border-color 0.15s ease;
}
.lu-pd__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lu-pd__thumb:hover { border-color: var(--border-default); }
.lu-pd__thumb.is-active { border-color: var(--fg-primary); }
.lu-pd__thumb:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   3. 信息栏
   -------------------------------------------------------------------------- */
.lu-pd__info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-block: var(--sp-2);
}

.lu-pd__eyebrow {
  margin: 0;
  font-family: var(--font-eyebrow);
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow-lg);
  letter-spacing: var(--ls-eyebrow-lg);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.lu-pd__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
}
@media (max-width: 1023px) {
  .lu-pd__title { font-size: var(--fs-section-title-mobile); line-height: 1.2; }
}

.lu-pd__subtitle {
  margin: calc(-1 * var(--sp-3)) 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-body);
}

/* —— 价格行（变体切换由 single.js 刷新）—— */
.lu-pd__price {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-price-detail);
  line-height: var(--lh-price-detail);
  color: var(--fg-primary);
}
.lu-pd__price del { font-size: var(--fs-body); color: var(--fg-faint); margin-left: var(--sp-2); }
.lu-pd__price ins { text-decoration: none; }
.lu-pd__price .amount { white-space: nowrap; }

/* —— 属性块（FLAVOUR / WEIGHT）—— */
.lu-pd__block { display: block; }

.lu-pd__label {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-field-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-field-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.lu-pd__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.lu-chip {
  display: inline-flex;
  align-items: center;
  height: auto;
  padding: var(--sp-2) var(--field-padding-x);
  border: var(--bw-hairline) solid var(--border-default);
  border-radius: var(--r-2xl);
  background: var(--c-card);
  font-size: var(--fs-body-sm);
  color: var(--fg-primary);
}

/* —— 克重药丸（选中 = 白底 + 墨绿描边 + 实心单选圆）—— */
.lu-pd__weights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}
@media (max-width: 379px) {
  .lu-pd__weights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lu-pd__weight {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--field-padding-y) var(--field-padding-x);
  border: var(--bw-hairline) solid var(--border-default);
  border-radius: var(--r-md);
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.lu-pd__weight:hover { border-color: var(--c-text-faint); }
.lu-pd__weight.is-active {
  background: #FFFFFF;
  border-color: var(--fg-primary);
}
.lu-pd__weight:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.lu-pd__weight-radio {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: var(--r-full);
  border: var(--bw-hairline) solid var(--c-text-ghost);
  background: transparent;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.lu-pd__weight.is-active .lu-pd__weight-radio {
  border-color: var(--fg-primary);
  background: var(--fg-primary);
  box-shadow: inset 0 0 0 2px #FFFFFF;
}

.lu-pd__weight-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lu-pd__weight-name {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--fg-primary);
}
.lu-pd__weight-price {
  font-size: var(--fs-label);
  color: var(--fg-body);
}

/* —— 信任行 —— */
.lu-pd__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  padding-top: var(--sp-1);
}
.lu-pd__trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-label);
  color: var(--fg-body);
}
.lu-pd__trust-item .lu-icon { color: var(--fg-accent); flex: none; }

/* --------------------------------------------------------------------------
   4. 详情带 —— 信息表卡 + 冲泡参数卡
   -------------------------------------------------------------------------- */
.lu-pd__band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: var(--sp-8);
  padding-bottom: var(--sp-8);
}
@media (max-width: 1023px) {
  .lu-pd__band {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
    padding-bottom: var(--sp-6);
  }
}

/* —— 信息表卡 —— */
.lu-pd__specs {
  padding: var(--card-padding-lg);
  border: var(--bw-hairline) solid var(--border-default);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
}
.lu-pd__specs-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--fg-primary);
}
.lu-pd__specs-list {
  margin: var(--sp-4) 0 0;
}
.lu-pd__spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: var(--field-padding-y);
  border-top: var(--bw-hairline) solid var(--border-soft);
}
.lu-pd__spec:first-child { border-top: 0; padding-top: var(--sp-2); }
.lu-pd__spec-key {
  margin: 0;
  font-size: var(--fs-body-sm);
  color: var(--fg-body);
  white-space: nowrap;
}
.lu-pd__spec-val {
  margin: 0;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-primary);
  text-align: right;
}

/* —— 冲泡参数卡（深底）—— */
.lu-pd__brew {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--card-padding-lg);
  border-radius: var(--r-lg);
  background: var(--bg-inverse);
}
.lu-pd__brew-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--fg-on-inverse);
}
.lu-pd__brew-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}
.lu-pd__brew-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.lu-pd__brew-key {
  font-family: var(--font-eyebrow);
  font-weight: var(--fw-medium);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-eyebrow-lg);
  text-transform: uppercase;
  color: var(--fg-accent-inverse);
}
.lu-pd__brew-val {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  color: var(--fg-on-inverse);
}
.lu-pd__brew-note {
  margin: auto 0 0;
  font-size: var(--fs-label);
  color: var(--c-text-faint);
}

/* --------------------------------------------------------------------------
   5. 手风琴 + 相关推荐
   -------------------------------------------------------------------------- */
.lu-pd__accs {
  border-top: var(--bw-hairline) solid var(--border-default);
  padding-bottom: var(--sp-8);
}
.lu-pd__acc {
  border-bottom: var(--bw-hairline) solid var(--border-default);
}
.lu-pd__acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  cursor: pointer;
  list-style: none;
}
.lu-pd__acc-head::-webkit-details-marker { display: none; }
.lu-pd__acc-head:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.lu-pd__acc-title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  color: var(--fg-primary);
}
.lu-pd__acc-icon { color: var(--fg-primary); flex: none; display: inline-flex; }
/* 两个图标都在 DOM 里，按 details 的 open 状态切换（免 JS） */
.lu-pd__acc .lu-icon--minus { display: inline-flex; }
.lu-pd__acc .lu-icon--plus { display: none; }
.lu-pd__acc[open] .lu-icon--minus { display: none; }
.lu-pd__acc[open] .lu-icon--plus { display: inline-flex; }
.lu-pd__acc-body { padding-bottom: var(--sp-5); }
.lu-pd__acc-text {
  max-width: 760px;
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-body);
}
.lu-pd__acc-text + .lu-pd__acc-text { margin-top: var(--sp-4); }

/* —— 相关推荐 —— */
.lu-pd__related { padding-bottom: var(--sp-8); }
.lu-pd__related-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.lu-pd__related-title {
  margin: 0;
  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);
}
.lu-pd__related-link {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-accent);
  text-decoration: none;
  border-bottom: var(--bw-hairline) solid transparent;
}
.lu-pd__related-link:hover { border-bottom-color: currentColor; }

.lu-pd__related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
}
@media (max-width: 1023px) {
  .lu-pd__related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 379px) {
  .lu-pd__related-grid { grid-template-columns: minmax(0, 1fr); }
}

.lu-relcard {
  display: flex;
  flex-direction: column;
  border: var(--bw-hairline) solid var(--border-default);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  overflow: hidden;
}
.lu-relcard__media { display: block; }
.lu-relcard__img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
}
@media (max-width: 1023px) {
  .lu-relcard__img { height: 200px; }
}
.lu-relcard__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
}
.lu-relcard__eyebrow {
  margin: 0;
  font-family: var(--font-eyebrow);
  font-weight: var(--fw-medium);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}
.lu-relcard__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-related-title);
  line-height: var(--lh-related-title);
  color: var(--fg-primary);
}
.lu-relcard__title a { color: inherit; text-decoration: none; }
.lu-relcard__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lu-relcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
}
.lu-relcard__price {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-related-price);
  line-height: var(--lh-related-price);
  color: var(--fg-primary);
}
.lu-relcard__price .amount { white-space: nowrap; }
.lu-relcard__quick {
  display: inline-flex;
  align-items: center;
  padding: 6px var(--sp-3);
  border: var(--bw-hairline) solid var(--fg-primary);
  border-radius: var(--r-xs);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: var(--fg-primary);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lu-relcard__quick:hover { background: var(--fg-primary); color: var(--fg-on-inverse); }

/* --------------------------------------------------------------------------
   6. WooCommerce / Blocksy 标记覆写
   --------------------------------------------------------------------------
   6.1 变体表单：原生 <select> 视觉隐藏（JS 契约 + 读屏保留），
       WooCommerce 自营价格位 .single_variation 由 .lu-pd__price 取代。
   -------------------------------------------------------------------------- */
.lu-pd .variations {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.lu-pd .reset_variations { display: none !important; }

/* 自营价格位移到流外而非 display:none：
   .single_variation 带 role="alert"，display:none 会把它从无障碍树里摘掉，
   切克重时读屏听不到价格播报；clip 隐藏不影响 single.js 读 innerHTML，
   也不影响 MutationObserver 监听它的内容变化（single.js 第 3 段）。 */
.lu-pd .woocommerce-variation-price {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
/* 库存提示保持可见：缺货变体时 WooCommerce 把 .single_variation 整体 hide、
   按钮同时变灰，这行是「为什么不能买」的唯一说明 */
.lu-pd .woocommerce-variation-availability {
  display: block;
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-body-sm);
  color: var(--fg-muted);
}
.lu-pd .woocommerce-variation-availability .stock { margin: 0; }

/* --------------------------------------------------------------------------
   6.2 加购行：数量盒 + 加购按钮
   --------------------------------------------------------------------------
   ⚠ Blocksy 的 .ct-cart-actions 包装在本模板下不渲染 —— 父主题
   output_cart_action_open() 对 is_product() && ! uses_woo_default_template()
   直接返回（实测详情页 DOM 里没有这个类）。真正的「数量 + 按钮」行是：
     变体商品 → .variations_button（.woocommerce-variation-add-to-cart）
     简单商品 → form.cart 本身
   两者都在 .lu-pd__buy 内，统一按该作用域覆写。
   -------------------------------------------------------------------------- */
.lu-pd__buy .variations_button,
.lu-pd__buy form.cart:not(.variations_form) {
  display: flex;
  align-items: stretch;
  gap: var(--sp-4);
}
.lu-pd__buy .single_variation_wrap { margin: 0; }

/* 数量盒：Blocksy 的 data-type="type-2" 把按钮绝对定位塞进输入框内部
   （设计稿不要这个形态），改回流内布局 —— 独立描边盒，−/数字/+ 三段。
   盒高与 L 按钮对齐（h-btn-l），三段之间发丝线分隔。 */
.lu-pd__buy .quantity {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
  height: var(--h-btn-l);
  padding: 0;
  border: var(--bw-hairline) solid var(--border-default);
  border-radius: var(--r-xs);
  background: #FFFFFF;
}
/* Blocksy 的 DOM 序是 [增, 减, 输入框]（它的按钮绝对定位，不在乎顺序）；
   摆回流内后用 order 修正成设计稿的 [− | 数字 | +]。label 是
   screen-reader-text 绝对定位，不参与排序。 */
.lu-pd__buy .quantity .ct-decrease { order: 1; }
.lu-pd__buy .quantity input.qty { order: 2; }
.lu-pd__buy .quantity .ct-increase { order: 3; }
.lu-pd__buy .quantity input.qty {
  width: 48px;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  text-align: center;
  color: var(--fg-primary);
  -moz-appearance: textfield;
  appearance: textfield;
}
.lu-pd__buy .quantity input.qty::-webkit-inner-spin-button,
.lu-pd__buy .quantity input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* 步进按钮复用 Blocksy 渲染的 .ct-increase/.ct-decrease（点击逻辑在父主题
   运行时里），这里只把绝对定位改回流内并做视觉覆写。SVG 内两种图标变体
   （type-1 雪佛龙 / type-2 加减号）由 Blocksy 自己的 CSS 按 data-type 取舍，
   不碰。 */
.lu-pd__buy .quantity :is(.ct-decrease, .ct-increase) {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 100%;
  border-radius: 0;
  background: transparent;
  color: var(--fg-primary);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.lu-pd__buy .quantity :is(.ct-decrease, .ct-increase):hover {
  background: var(--bg-surface-alt);
}
.lu-pd__buy .quantity :is(.ct-decrease, .ct-increase) svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}
.lu-pd__buy .quantity .ct-decrease { border-right: var(--bw-hairline) solid var(--border-soft); }
.lu-pd__buy .quantity .ct-increase { border-left: var(--bw-hairline) solid var(--border-soft); }

/* —— 加购按钮（变体未选定时 WooCommerce 加 .disabled，视觉降级）—— */
.lu-pd .single_add_to_cart_button,
.lu-pd form.cart .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  height: var(--h-btn-l);
  padding: 0 var(--sp-6);
  border: 0;
  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-medium);
  letter-spacing: var(--ls-normal);
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.lu-pd .single_add_to_cart_button:hover,
.lu-pd form.cart .button:hover { background: var(--action-primary-bg-hover); }
.lu-pd .single_add_to_cart_button.disabled,
.lu-pd .single_add_to_cart_button.wc-variation-selection-needed {
  opacity: 0.45;
  cursor: not-allowed;
}

/* —— 表单本体不引入额外间距 —— */
.lu-pd form.cart { margin: 0; }
.lu-pd .lu-pd__buy .woocommerce-variation.single_variation { margin: 0; }

/* --------------------------------------------------------------------------
   6.3 结账/购物车提示（add-to-cart 校验失败时回到本页显示）
   -------------------------------------------------------------------------- */
.lu-pd__buy .woocommerce-message,
.lu-pd__buy .woocommerce-error,
.lu-pd__buy .woocommerce-info {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-body-sm);
  list-style: none;
}
.lu-pd__buy .woocommerce-message {
  background: var(--c-success-bg);
  border: var(--bw-hairline) solid var(--c-success-line);
  color: var(--c-success);
}
.lu-pd__buy .woocommerce-error {
  background: var(--c-danger-bg);
  border: var(--bw-hairline) solid var(--c-danger-line);
  color: var(--c-danger);
}
.lu-pd__buy .woocommerce-info {
  background: var(--c-notice-bg);
  border: var(--bw-hairline) solid var(--c-matcha);
  color: var(--fg-primary);
}

/* --------------------------------------------------------------------------
   7. 移动端收尾
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .lu-pd__crumbs { padding-block: var(--sp-5) 0; }
  .lu-pd__info { gap: var(--sp-4); padding-block: 0; }
  .lu-pd__price { font-size: var(--fs-price-xl); line-height: var(--lh-price-xl); }
  .lu-pd__trust { gap: var(--sp-3) var(--sp-5); }
  .lu-pd__acc-head { padding-block: var(--sp-4); }
  .lu-pd__related-head { margin-bottom: var(--sp-5); }
}