/* BuyGlassesJP Bootstrap 5 主题覆盖层（app.css）。
 *
 * 设计决策（CLAUDE.md DECISION：前台 UI 库 = Bootstrap 5，2026-08-20 用户确认）：
 *   - 布局/组件全部用 Bootstrap 标准类（btn/card/navbar/offcanvas/breadcrumb/pagination…），
 *     本文件只做「品牌身份」级覆盖：站点主色（深蓝 #2b5f8a，延续老版 bg-btn 系统色）、
 *     日文排版字体栈、少量间距习惯。不造轮子、不自创组件类。
 *   - Bootstrap 5.3 的按钮/链接等组件消费局部 CSS 变量（--bs-btn-* 等），
 *     用变量覆盖改色最干净，不重写整条规则。
 *
 * 加载顺序（view/layout/default.html）：layout.css（过渡期 Vue 组件样式） ->
 *   bootstrap.min.css -> bootstrap-icons.css -> 本文件（最后，覆盖生效）。
 *
 * B5 收尾时 layout.css 会裁剪成 Vue 组件专属样式（.bg-popup-* 与 .bg-filter-* 等），
 * 全局 reset 届时移除，Bootstrap reboot 成为唯一基线。
 */

/* ===== 全站色彩系统（单一来源 = 本 :root，2026-08-22 建档） =====
   设计方向（doc/01.2-开发规范.md）：主色克制（深靛/墨黑系），强调色用于价格与 CTA；
   不用红黄促销轰炸渐变。锚点 #2b5f8a 深蓝 = 深靛，已 commit 生效，保留不动。
   分三层：
   Tier 1（受治）：品牌 + 中性 ramp + Bootstrap 变量桥接。覆盖 --bs-primary / --bs-danger /
     --bs-link-*，让所有 Bootstrap 语义类（btn-primary / text-bg-primary / bg-primary /
     border-primary / btn-outline-danger 等）自动品牌对齐，不再各处硬编码。
   Tier 2（受治子系统）：订单状态 tint（浅底+深字，Bootstrap text-bg-* 是实色做不了），
     刻意独立于 Bootstrap 语义类——钢蓝 #2471a3 与品牌深靛 #2b5f8a 不同，免混淆。
   Tier 3（Bootstrap 默认、不治）：--bs-success / --bs-warning / --bs-info 留默认，
     用于 text-warning 星级 / text-success 成功提示 / text-danger 销量火苗图标。
   历史问题（本系统建档修复）：text-bg-primary 徽章曾显 Bootstrap 默认 #0d6efd 非品牌蓝；
     购物车角标两红 #d9534f/#d44 分裂；.bg-money__tax 三值 #888/#6b6b6b/#999；
     12 个无 ramp 灰散落各文件——本 :root 统一治理。 */
:root {
  /* —— Tier 1：品牌 —— */
  --bg-primary: #2b5f8a;            /* 品牌深靛（锚点，不动） */
  --bg-primary-hover: #1f4669;      /* hover 加深 */
  --bg-primary-disabled: #b0b0b0;  /* disabled 中性灰 */

  /* —— Tier 1：Bootstrap 变量桥接（修 text-bg-primary 徽章蓝 bug 的关键）—— */
  --bs-primary: #2b5f8a;
  --bs-primary-rgb: 43, 95, 138;
  --bs-link-color: #2b5f8a;
  --bs-link-hover-color: #1f4669;
  --bs-danger: #d9534f;             /* 单一红：合并角标 #d9534f + 删除 #d44 */
  --bs-danger-rgb: 217, 83, 79;

  /* —— Tier 1：中性 ramp（12 个无序灰 → 8 级命名）—— */
  --bg-ink: #1a1a1a;        /* 正文 / 价格——最强 */
  --bg-gray-700: #4d4d4d;   /* 次级文本 / hover——合并旧 #444/#555/#666 */
  --bg-gray-500: #8a8a8a;   /* 弱化（税込/对比价/meta/登出）——合并旧 #6b6b6b/#888/#999 */
  --bg-gray-400: #b0b0b0;   /* disabled */
  --bg-gray-300: #cccccc;   /* 细边框 */
  --bg-gray-200: #e5e5e5;   /* 卡片/缩略图边框 */
  --bg-gray-100: #eeeeee;   /* 分割线 / 移动栏边框 */
  --bg-gray-50: #f5f5f5;    /* 面板底/占位——合并旧 #f2f2f2/#f7f7f7 */

  /* —— Tier 1：遮罩 —— */
  --bg-overlay: rgba(0, 0, 0, .4);

  /* —— Tier 2：订单状态 tint 子系统（浅底+深字，独立于 Bootstrap 语义类）—— */
  --bg-warn-text: #d68910;  --bg-warn-bg: #fef5e7;   /* pending */
  --bg-ok-text: #1e8449;   --bg-ok-bg: #eafaf1;     /* paid / delivered */
  --bg-info-text: #2471a3;  --bg-info-bg: #eaf2f8;   /* processing / shipped（钢蓝，与品牌深靛刻意不同） */
}

/* nav-pills active：Bootstrap 5.3 把 --bs-nav-pills-link-active-bg 声明在 .nav-pills
   选择器上（默认 #0d6efd），不走 :root 的 --bs-primary 链。故桥接必须放在 .nav-pills 上
   才能覆盖（:root 覆盖会被 .nav-pills 的声明盖掉）。同 text-bg-primary 漏网类。 */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--bg-primary);
}

/* pagination active：同 nav-pills 漏网类——Bootstrap 5.3 把 --bs-pagination-active-bg /
   --bs-pagination-active-border-color 声明在 .pagination 选择器上（默认 #0d6efd），
   :root 桥接覆盖不到。商品列表 + 博客列表分页 active 态统一走品牌色。 */
.pagination {
  --bs-pagination-active-bg: var(--bg-primary);
  --bs-pagination-active-border-color: var(--bg-primary);
}

/* 分页移动端紧凑化（layout/_pagination.html 共用，2026-08-25 用户报手机端丑）：
   老站商品列表 71 页，桌面完整「前のページ 1 … 3 4 5 6 7 … 71 次のページ」11 项在 375px 视口
   flex-wrap 换行成 7+4 两行不均（「7」独顶第二行），且「前のページ」105px/「次のページ」104px
   日文全称吃掉一半横向。移动 <md 改紧凑 3 项「‹ 5 / 71 ›」：
   - 隐藏非 active/非首尾的中间项（数字页 + 省略号 …）：:not(.active):not(:first-child):not(:last-child)
     首项=prev、末项=next、active=当前页，三者保留；中间数字与 ellipsis 全隐。
     首页(prev=null)时首项=1(active) 仍保留；末页(next=null)时末项=last(active) 仍保留，兜底成立。
   - prev/next 日文全称由模板 d-md-none 隐藏，留 bi-chevron 图标（aria-label 保留无障碍）。
   - active 项由模板追加「 / last」（d-md-none 仅移动显），给「5/71」总页数上下文。
   桌面 md+ 不命中此媒体查询，完整页码行原样显。 */
@media (max-width: 767.98px) {
  .pagination .page-item:not(.active):not(:first-child):not(:last-child) {
    display: none;
  }
  .pagination .page-link {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* 博客分类 pill 条响应式（blog/index.html + 标签聚合页复用）：
   移动端 <lg：flex-wrap 换行成标签云，一眼看全分类（横滚条在手机难发现、超长名占大半屏）；
   PC lg+：flex-nowrap 单行横滚（视口宽放得下，换行浪费纵向空间）。
   nav.overflow-x-auto 只在 lg+ 生效，移动端 wrap 后无溢出不需横滚。 */
.bg-blog-cats {
  flex-wrap: wrap;
}
@media (min-width: 992px) {
  .bg-blog-cats {
    flex-wrap: nowrap;
  }
  .bg-blog-cats > .nav-item {
    flex-shrink: 0;
  }
  .bg-blog-cats ~ .overflow-x-auto,
  .bg-blog-cats {
    overflow-x: auto;
  }
}

/* 老站 SEO 堆砌超长分类名兜底（如「メガネの特集｜メガネ通販(眼鏡・めがね)buy-glasses.jp」，
   ｜/括号糊一堆关键词的老站黑帽数据，迁移原样带过）。设计层截断不改库：
   - bg-heading-truncate：列表页 h1 移动端单行省略号（PC 放宽到 2 行 text-truncate-2 防巨占）。
   - bg-cat-name：pill 内分类名 max-width 移动端 120px / PC 200px，超长名省略号。 */
.bg-heading-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
@media (min-width: 992px) {
  .bg-heading-truncate {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
.bg-cat-name {
  max-width: 120px;
}
@media (min-width: 992px) {
  .bg-cat-name {
    max-width: 200px;
  }
}

/* ===== 面包屑末项截断（全站 15 页通用，老站 SEO 堆砌超长商品名/分类名兜底）
   Bootstrap .breadcrumb 默认 flex-wrap:wrap，末项超长（如「レトロ風べっ甲メガネ オーバル型…」
   60+ 字 SEO 堆砌商品名）换行撑高页面顶部，手机端 375px 尤其难看（用户 2026-08-25 报）。
   改 flex-wrap:nowrap 强制单行 + 前项 flex-shrink:0 不被压缩 + active 项 flex:1 占剩余空间 +
   min-width:0 截断三件套（flex item 默认 min-width:auto 会撑开不截断，min-width:0 是截断关键）。
   末项=当前页，页面 h1 显完整名，截断无损。同 .bg-heading-truncate / .bg-cat-name 老站垃圾数据设计层兜底，不改库。 */
.breadcrumb {
  flex-wrap: nowrap;
}
.breadcrumb-item {
  flex-shrink: 0;
}
.breadcrumb-item.active {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* .btn-primary / .btn-outline-primary：值改引 token（单一来源 var()）。
   仍保留整条规则（非删去让 Bootstrap 接管）：防某些 SSR 环境 :root var() 解析异常
   致按钮透明（历史事故），硬编码兜底与 var() 并行，双保险。 */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bg-primary);
  --bs-btn-border-color: var(--bg-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bg-primary-hover);
  --bs-btn-hover-border-color: var(--bg-primary-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bg-primary-hover);
  --bs-btn-active-border-color: var(--bg-primary-hover);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bg-primary-disabled);
  --bs-btn-disabled-border-color: var(--bg-primary-disabled);
}

.btn-outline-primary {
  --bs-btn-color: var(--bg-primary);
  --bs-btn-border-color: var(--bg-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bg-primary);
  --bs-btn-hover-border-color: var(--bg-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bg-primary-hover);
  --bs-btn-active-border-color: var(--bg-primary-hover);
}

.text-primary { color: var(--bg-primary) !important; }
.link-primary { color: var(--bg-primary) !important; }
a { color: var(--bg-primary); }
a:hover { color: var(--bg-primary-hover); }

/* .form-check-input（复选框/单选框）：Bootstrap 5.3 编译产物 .form-check-input:checked
   硬编码 #0d6efd（默认蓝），不走 :root 的 --bs-primary 链——与 nav-pills/pagination 同类
   漏网（见上方色彩系统注释）。此处显式桥接到品牌主色，让选中态与 btn-primary/卡片高亮
   统一为品牌深靛 #2b5f8a。勾选标记 SVG stroke=#fff 在深底上对比充足无需另改。
   focus 态描边 + 阴影也走品牌色，统一聚焦视觉。 */
.form-check-input:checked { background-color: var(--bg-primary); border-color: var(--bg-primary); }
.form-check-input:focus { border-color: var(--bg-primary); box-shadow: 0 0 0 .25rem rgba(43, 95, 138, .25); }

/* ===== 日文排版基线 =====
   Bootstrap 默认栈无日文字体，日本用户混排（漢字/かな/英数字）需要 JP 栈兜底。 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Noto Sans JP", Meiryo, "Microsoft YaHei", sans-serif;
  font-size: 15px;
  color: var(--bg-ink);
  background: #fff;
}

/* 日式信息密度：区块间距收紧一档（Bootstrap 默认 section 无约定，统一节奏） */
.bg-section-pad { padding: 2rem 0; }

/* ===== header 购物车角标（配合 Vue CartBadge 的 .bg-cart-badge，绝对定位到包内图标右上） ===== */
.bg-cart-anchor { position: relative; display: inline-flex; }
.bg-cart-anchor .bg-cart-badge {
  position: absolute;
  top: -4px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--bs-danger);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  font-weight: 600;
}

/* header 客户区（Vue CustomerMenu 链接排一行，Bootstrap 链接色收为中性灰） */
.bg-customer-menu { display: inline-flex; align-items: center; gap: .75rem; font-size: 13px; }
.bg-customer-menu .bg-customer-menu__link { color: var(--bg-gray-700); text-decoration: none; }
.bg-customer-menu .bg-customer-menu__link:hover { color: var(--bg-primary); }
.bg-customer-menu .bg-customer-menu__logout {
  border: none; background: none; padding: 0; font-size: 13px; color: var(--bg-gray-500);
}

/* ===== 商品网格（列表/首页/相关推荐共用：2/3/4 列响应式，无 Bootstrap card 阴影走轻量） ===== */
.bg-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 768px) { .bg-product-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
@media (min-width: 992px) { .bg-product-grid { grid-template-columns: repeat(4, 1fr); } }

/* ===== 税込价标（消費税転嫁法 税込表示義務：价格旁小字「税込」） ===== */
.bg-money { font-weight: 700; }
.bg-money__tax { font-size: 11px; color: var(--bg-gray-500); margin-left: 4px; font-weight: 400; }
.bg-money__compare { font-size: 13px; color: var(--bg-gray-500); margin-left: 8px; }
.bg-money__compare-price { text-decoration: line-through; }

/* 详情/列表过渡期：老 BEM 段落标题与 Bootstrap 标题并存的字号微调（移动端固定购物车栏已移除） */
.bg-section-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 1rem; }

/* ===== 多行文本截断（P8 深化：blog/article 卡片 2/3 行截断）
   Bootstrap 5.3 标准 .text-truncate 仅 1 行；2/3 行截断用 -webkit-line-clamp + display:-webkit-box 模拟。 */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== 文章封面图（article 详情 + blog 卡片共用）：最大高度 400px，居中裁切，避免高图撑版） ===== */
.bg-article__cover {
  max-height: 420px;
  width: 100%;
  object-fit: cover;
}

/* ===== 商品封面图懒加载（IntersectionObserver，data-src → src 进入视口才加载）
   _card 是公共片（列表/首页新品/详情相关三处共用），全局 IO 脚本在 default.html 内联（全站生效，
   不依赖 list.ts——首页/详情相关区不加载 list.ts）。data-bg-lazy 标记是 IO 目标。
   opacity:0 初始 → --loaded opacity:1 淡入；无 JS 时 noscript 兜底 opacity:1 显占位灰底（不破图）。
   width/height + aspect-ratio 固定占位防 CLS（图片加载不引起布局抖动）。 */
.bg-lazy-img { transition: opacity 0.3s ease; }
.bg-lazy-img:not(.bg-lazy-img--loaded) { opacity: 0; }
.bg-lazy-img--loaded { opacity: 1; }

/* ===== 详情描述区响应式嵌入（2026-08-23 走查修复）
   老站商品描述原样保留的 YouTube <iframe>/<embed> 是固定 width=560 height=315（270 商品），
   + <video>（34 商品），移动端 375px 视口下 560px 撑破布局横向溢出 212px。
   max-width:100% 限宽跟容器，aspect-ratio:16/9 保持 YouTube 宽高比按宽等比缩放，height:auto
   让浏览器按 aspect-ratio 算高度。老站描述 0 个 <table>，无需处理表格溢出。 */
.bg-product-detail__desc-body iframe,
.bg-product-detail__desc-body embed,
.bg-product-detail__desc-body video {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* ===== header 第二行分类横导（lg+ 独占行，flex-nowrap + 横滚修换行）
   992-1200px 窄屏 7 项分类超宽：flex-nowrap 不换行 + overflow-x-auto 可横滑看全。
   P9 曾用 flex-wrap 自然换行避横滚裁 dropdown，但 1024px 笔记本换行难看。
   dropdown 菜单不会被横滚容器裁：菜单 absolute 相对 li.dropdown（offsetParent=li 非 ul），
   CSS 规范 overflow 不裁以其他元素为 offsetParent 的 absolute 后代——故无需 fixed/teleport 补丁。 */
/* —— PC 分类横导：hover dropdown（2026-08-24 改，替原 overflow-x:auto 横滚）——
   原 overflow-x:auto 会裁 dropdown：CSS 规范 overflow-x 非 visible 时 overflow-y 从 visible 计算成 auto，
   ul 成纵向滚动容器，dropdown 菜单（abs-pos，containing block=li.dropdown 在 ul 内）落到 ul 可视窗之外被裁不绘制。
   故改 flex-wrap 让 overflow 回 visible，dropdown 用纯 CSS hover 触发（零 JS）。 */
/* hover/focus-within 展开子菜单（键盘 Tab 焦点也展开，a11y；:focus-within 覆盖菜单内子链接聚焦） */
.bg-header-catnav .dropdown:hover > .dropdown-menu,
.bg-header-catnav .dropdown:focus-within > .dropdown-menu {
  display: block;
}
/* 菜单紧贴 toggle 下沿：去 Bootstrap 默认 --bs-dropdown-spacer 0.125rem 间距，
   避免鼠标从 toggle 移向菜单时跨隙丢焦导致菜单消失（hover bridge） */
.bg-header-catnav .dropdown-menu {
  --bs-dropdown-spacer: 0;
  margin-top: 0;
}
/* hover 时 toggle 文字高亮（与子菜单联动视觉反馈，主色由 --bg-primary token 驱动） */
.bg-header-catnav .dropdown:hover > .dropdown-toggle {
  color: var(--bg-primary, #2b5f8a);
}
/* PC 分类 dropdown 子项点击态品牌色（修 Bootstrap 默认蓝色闪动，2026-08-29 用户报）：
   Bootstrap 5.3 .dropdown-item:active 用 --bs-dropdown-link-active-bg（默认 #0d6efd 蓝），
   鼠标点下→跳转前那帧闪蓝底白字，与站点品牌深靛 #2b5f8a 不符。
   与 nav-pills / pagination / form-check-input 同类漏网：变量声明在 .dropdown-menu 选择器上，
   :root 桥接覆盖不到，须在菜单容器上显式设。:hover 保留 Bootstrap 默认浅灰底（#e9ecef）——
   下拉菜单惯例 hover 灰、active 主色，视觉层次清晰不喧宾夺主。 */
.bg-header-catnav .dropdown-menu {
  --bs-dropdown-link-active-bg: var(--bg-primary);
  --bs-dropdown-link-active-color: #fff;
}

/* 移动端 offcanvas 抽屉菜单点击反馈 + 拓宽点选区（2026-08-29 用户要求手机端点击菜单有点效果）。
   抽屉内分类/子类/品牌链接默认 inline：点选区只有文字宽，且点击高光是浏览器默认蓝色闪一下
   （-webkit-tap-highlight-color），缺乏「点到了」的持续反馈。
   - a 显 block 占满 list-group-item 行宽：更大点选区（移动端手指点歪也能命中）；
   - 关默认蓝色 tap-highlight：免蓝闪与品牌不符；
   - :active 浅主色底 rgba(43,95,138,.08)：松手跳转前可见反馈，克制不刺眼。
   仅 #bgNavOffcanvas 作用域（抽屉 mobile-only，桌面无 toggler 不触发），不影响其它 list-group。 */
#bgNavOffcanvas nav a {
  display: block;
  -webkit-tap-highlight-color: transparent;
}
#bgNavOffcanvas nav a:active {
  background-color: rgba(43, 95, 138, .08);
}

/* 首页 AI 選鏡ツール 卡片 hover（P10 工具入口首页化）：
   上浮 + 阴影 + 主色边框，突出可点击亮点区块。transition 平滑。 */
.tool-card-hover {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tool-card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 .375rem 1rem rgba(0,0,0,.08);
  border-color: var(--bg-primary, #2b5f8a);
}
/* 工具卡内文案超长截断防溢出（移动 2 列窄卡兜底） */
.tool-card-hover .min-w-0 { min-width: 0; }

/* 列表 AJAX 加载态（list.ts exec 加 is-loading、finally 移除）：
   进行中阻断 #bg-list-results 内一切交互（chip✕ / 分页 / 排序 select），
   防 chip✕ 太小误触/连点 → 连续 fetch 堆积卡死；pointer-events:none 让元素根本不收点击，
   比纯 JS 防抖更硬（JS 防抖只合并 400ms 窗口内的，进行中慢响应期间仍可点）。
   降透明度 + 顶部主色进度条给即时反馈（用户知道在加载，停止连点）。 */
#bg-list-results.is-loading {
  position: relative;
  opacity: .55;
  pointer-events: none;
}
#bg-list-results.is-loading::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--bg-primary, #2b5f8a);
  transform-origin: left center;
  animation: bg-list-loading-bar 1s ease-in-out infinite;
}
@keyframes bg-list-loading-bar {
  0%   { transform: scaleX(0); transform-origin: left; }
  50%  { transform: scaleX(1); transform-origin: left; }
  100% { transform: scaleX(0); transform-origin: right; }
}

/* 已选筛选 chip（_list_results.html）：放大触控目标。
   原 badge rounded-pill 太小（约 28px 高）易误触，min-height 38px 达 WCAG 40px / Apple HIG 44px 近线；
   ✕ 单独成块 .bg-filter-chip__x 增大点选区，整 chip 皆可点（data-bg-list-link 在 a 上）。 */
.bg-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .35em .75em;
  min-height: 38px;
  font-size: .85rem;
  line-height: 1;
}
.bg-filter-chip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  opacity: .7;
}

/* pace.js 顶栏加载进度条（SSR 页面跳转加载指示，2026-08-29）：
   pace.min.js 在 head 同步尽早加载，监听 document load 推进进度（ajax:false 关闭 AJAX 监听，
   避免列表页 AJAX 局部刷新 list.ts fetch 触发进度条闪动干扰局部刷新体验）。
   顶栏 3px 主色进度条 + 轻发光，z-index 2000 高于 header 固定栏。
   pace 通过设 .pace-progress 的 right（100%→0）推进：right:100% 初始在视口左外不可见，
   随 right→0 推进至满宽，load 完成后 pace 加 .pace-inactive 隐藏。 */
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.pace-inactive { display: none; }
.pace .pace-progress {
  background: var(--bg-primary, #2b5f8a);
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 3px;
  box-shadow: 0 0 10px var(--bg-primary, #2b5f8a), 0 0 5px var(--bg-primary, #2b5f8a);
}

/* 镜片选择卡片单选（LensConfigurator 高级视觉，2026-08-29）：
   button.card 需 reset 默认 button 字体（font:inherit）；
   hover 上浮+主色边框+阴影；选中态主色边框+浅主色底+内阴影双线感。
   全局类名 .bg-lens-card 仅本组件使用无冲突。--bg-primary 取 :root 品牌主色 token。 */
.bg-lens-card {
  font: inherit;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, transform .15s ease;
}
.bg-lens-card:hover {
  border-color: var(--bg-primary, #2b5f8a);
  box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .08);
  transform: translateY(-1px);
}
.bg-lens-card--active {
  border-color: var(--bg-primary, #2b5f8a);
  background-color: rgba(43, 95, 138, .05);
  box-shadow: 0 0 0 1px var(--bg-primary, #2b5f8a) inset;
}
.bg-lens-card--active:hover {
  transform: none; /* 选中态稳定不再上浮，避免已选项抖动 */
}

/* 镜片卡片式下拉触发器（button.form-control 复用 select 外观，2026-08-29）：
   button 元素需 reset 默认字体/背景对齐 form-control，data-bs-toggle 由 Bootstrap dropdown 接管。 */
.bg-lens-trigger {
  font: inherit;
  cursor: pointer;
}

/* ===== 首页鲜活度（2026-08-30，真实数据动效切片） =====
   只动 transform/opacity（轮播）与 background-position（Hero 渐变）--全部合成层属性
   不触发布局重排，CWV 零 CLS（v0.19 SEO P0 加固预算内）。
   数据口径见 HomeViewUseCase::homeStats / ReviewService::listHomeVoices 注释：
   评价/计数全真（approved 评价/有效订单/published 文章与品牌），不造「刚有人购买」假实时。
   prefers-reduced-motion：动画全停，SSR 默认态（首条评价 + 真实终值数字）常驻可读。 */

/* -- Hero 渐变流动：300% 尺寸背景 + background-position 缓慢漂移（16s 循环）。
   色板取品牌深靛的极浅邻近色（#eef3f8/#e6eef5），远看仍是灰底轻量，近看有水流感。
   background-position 动画只重绘背景不重排内容，对 CLS/LCP 无扰动。 */
.bg-hero {
  background-image: linear-gradient(135deg, #eef3f8 0%, #e6eef5 30%, #eef3f8 55%, #e4ebf2 80%, #eef3f8 100%);
  background-size: 300% 300%;
  animation: bg-hero-drift 16s ease-in-out infinite;
}
@keyframes bg-hero-drift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* -- 评价轮播（お客様の声）：
   stage 定高（引文两行 80 字截断 + 署名行的最大高度，min-height 预留）防轮换跳动；
   slide 绝对定位叠放，--on 修饰类切换 opacity + translateY（8px 上浮入场）。
   transition 只挂 opacity/transform，250ms 轻快，与 4s 停留节奏匹配。 */
.bg-voices__stage {
  max-width: 560px;   /* 引文行宽收敛（桌面居中可读，移动全宽） */
  min-height: 132px;  /* 预留：星行 24 + 引文两行 ~48 + 署名行 20 + 边距，轮换零高度跳动 */
}
.bg-voices__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;  /* 隐藏层不拦截 hover/点击（可见层自动恢复） */
}
.bg-voices__slide--on {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* 引文两行截断（80 字后端已截，这里防极端行高撑破定高 stage） */
.bg-voices__quote {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -- count-up 计数器：tabular-nums 等宽数字，0 -> 终值宽度同量级不抖布局。
   数字用 text-primary 品牌深靛（资产数字是信任信号非价格，与 .bg-money 价签红区分开）。 */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* -- 卡片微交互打磨（鲜活度切片统一推广，tool-card-hover 既有模式扩展）：
   商品卡封面 hover 轻放大（外层 overflow hidden 裁切，transform 合成层零重排）；
   分类卡 hover 上浮 + 阴影。全站 .card 无边框轻量风下，hover 反馈是唯一可交互暗示。 */
.bg-product-card .card-img-top {
  transition: transform .3s ease;
}
.bg-product-card:hover .card-img-top {
  transform: scale(1.04);
}
.bg-product-card .card {
  transition: box-shadow .2s ease;
}
.bg-product-card:hover .card {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08);
}
.bg-product-card .card > a:first-child {
  display: block;
  overflow: hidden;  /* 裁切放大后的图片，保持卡片 1:1 外框不破 */
}
/* 分类卡（首页分类瓷砖 bg-cat-card）：hover 上浮 + 阴影 + 大类名转主色（可点暗示）。 */
.bg-cat-card {
  transition: box-shadow .2s ease, transform .2s ease;
}
.bg-cat-card:hover {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}
.bg-cat-card:hover > .card-body > a {
  color: var(--bg-primary, #2b5f8a);
}

/* -- 减动效偏好：全部动画停（SSR 默认态本就完整：首条评价可见 + 终值数字直出）。
   JS 侧同步判断（home.ts initVoices/initCounters 处 early-return），双保险。 */
@media (prefers-reduced-motion: reduce) {
  .bg-hero { animation: none; }
  .bg-voices__slide { transition: none; }
  .bg-product-card .card-img-top,
  .bg-product-card .card { transition: none; }
}

/* —— 商品详情轮播（2026-09-06）：缩略图 active 高亮（Bootstrap data API 切图，slid 事件同步类）。 */
.bg-thumb.active {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.25);
}

/* —— 商品图缩略图横滚 + 双击灯箱（2026-09-06）—— */
/* 缩略图行横向滑动：多图不换行占竖向空间，细滚动条同 header 分类条口径。 */
.bg-thumbscroll { -webkit-overflow-scrolling: touch; }
.bg-thumbscroll::-webkit-scrollbar { height: 4px; }
.bg-thumbscroll::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 2px; }
/* 轮播图双击可放大：光标提示。 */
.bg-gallery-zoom { cursor: zoom-in; }
/* —— 大图灯箱 v3（2026-09-06 用户定调）——
   图本身零效果；动效只在进出场：进场=背景淡入+卡片上浮弹入，
   出场=卡片收拢下沉+背景淡出。底部全图折叠条（可收放）。
   背景层次保留：环境光层（当前图重模糊铺底）+ 舞台聚光/暗角。 */
.bg-lightbox {
  position: fixed; inset: 0; z-index: 1085;
  display: flex; align-items: center; justify-content: center;
  background: #05060a;
  cursor: zoom-out;
  animation: bg-lb-fade 0.22s ease both;
}
.bg-lightbox--closing { animation: bg-lb-fadeout 0.28s ease both; }
@keyframes bg-lb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bg-lb-fadeout { from { opacity: 1; } to { opacity: 0; } }
.bg-lightbox__ambient {
  position: absolute; inset: -12%;
  width: 124%; height: 124%;
  object-fit: cover;
  filter: blur(64px) brightness(0.55) saturate(1.3);
  opacity: 0.55;
  pointer-events: none;
}
.bg-lightbox__stage {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 55% at 50% 46%, rgba(255, 255, 255, 0.10), transparent 70%),
    radial-gradient(ellipse 145% 125% at 50% 50%, transparent 38%, rgba(0, 0, 0, 0.68) 100%);
}
.bg-lightbox__card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 46px 96px -18px rgba(0, 0, 0, 0.78),
    0 14px 36px -10px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.16);
  animation: bg-lb-card-in 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.12) both;
}
@keyframes bg-lb-card-in {
  from { opacity: 0; transform: translateY(22px) scale(0.88); }
  to { opacity: 1; transform: none; }
}
.bg-lightbox--closing .bg-lightbox__card {
  animation: bg-lb-card-out 0.26s cubic-bezier(0.5, 0, 0.75, 0.4) both;
}
@keyframes bg-lb-card-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(16px) scale(0.92); }
}
.bg-lightbox__card img {
  display: block;
  max-width: 92vw; max-height: 80vh;
  object-fit: contain;
  transition: transform 0.2s ease;
  cursor: zoom-in;
}
.bg-lightbox__card img.bg-lightbox__img--zoom {
  transform: scale(2);
  cursor: zoom-out;
}
.bg-lightbox__counter {
  position: absolute; top: 1.1rem; left: 50%;
  transform: translateX(-50%);
  padding: 0.28rem 0.85rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.bg-lightbox__hint {
  position: absolute; bottom: 7.2rem; left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.35);
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  pointer-events: none;
  transition: bottom 0.3s ease;
}
.bg-lightbox--strip-off .bg-lightbox__hint { bottom: 1rem; }
.bg-lightbox__close {
  position: absolute; top: 1rem; right: 1rem;
  box-shadow: 0 0 0 0.35rem rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(4px);
}
.bg-lightbox__nav {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 72px;
  border: 0;
  background: rgba(10, 12, 18, 0.38);
  color: #fff;
  font-size: 2rem; line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.15s ease;
}
.bg-lightbox__nav:hover { background: rgba(10, 12, 18, 0.62); color: #fff; }
.bg-lightbox__nav--prev { left: 0; border-radius: 0 0.5rem 0.5rem 0; }
.bg-lightbox__nav--next { right: 0; border-radius: 0.5rem 0 0 0.5rem; }
.bg-lightbox__nav .bi { font-size: 2.25rem; }
/* 底部全图折叠条：所有图缩略横排（溢出横滚 + 细滚动条），当前高亮放大描边；
   dock 高度收放做「折叠」动画（strip-off 类把 max-height 收到 0）。 */
.bg-lb-dock {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 1rem;
  max-height: 7rem;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}
.bg-lightbox--strip-off .bg-lb-dock { max-height: 0; opacity: 0; pointer-events: none; }
.bg-lb-strip {
  display: flex; gap: 0.5rem;
  overflow-x: auto;
  padding: 0.5rem 0.75rem;
  margin-bottom: 2.4rem;
  max-width: min(92vw, 720px);
  background: rgba(5, 6, 10, 0.45);
  border-radius: 0.75rem;
  backdrop-filter: blur(8px);
  -webkit-overflow-scrolling: touch;
}
.bg-lb-strip::-webkit-scrollbar { height: 4px; }
.bg-lb-strip::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 2px; }
.bg-lb-strip__btn {
  flex-shrink: 0;
  padding: 0;
  width: 56px; height: 56px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.bg-lb-strip__btn img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bg-lb-strip__btn:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.55); }
.bg-lb-strip__btn--active {
  transform: translateY(-3px) scale(1.06);
  border-color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.bg-lb-strip__toggle {
  position: absolute; right: 1.1rem; bottom: 0.9rem;
  width: 40px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  background: rgba(10, 12, 18, 0.5);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.bg-lb-strip__toggle:hover { background: rgba(10, 12, 18, 0.72); }
/* a11y：减少动效偏好下灯箱全静（进出场/折叠收放/缩放切换全停）。 */
@media (prefers-reduced-motion: reduce) {
  .bg-lightbox,
  .bg-lightbox--closing,
  .bg-lightbox__card,
  .bg-lightbox--closing .bg-lightbox__card,
  .bg-lightbox__card img,
  .bg-lightbox__hint,
  .bg-lb-dock,
  .bg-lb-strip__btn,
  .bg-lb-strip__btn--active {
    animation: none !important;
    transition: none !important;
  }
}