/* ==========================================================================
   LUMYU — Best Sellers module (data-driven)
   配套: data/products.json → build_products.py → data/products.js + index.html
   引擎: assets/bestsellers.js
   ========================================================================== */

/* ---------- 分类标签栏（一份数据驱动多个分类视图） ---------- */
.bs-tabs{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin:0 0 32px;
}
.bs-tabs[hidden]{display:none}
.bs-tab{
  appearance:none;-webkit-appearance:none;
  background:transparent;border:1px solid var(--border);color:var(--gray-mid);
  font-family:var(--font-heading);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;line-height:1;
  padding:11px 18px;cursor:pointer;white-space:nowrap;
  transition:background .22s,color .22s,border-color .22s;
}
.bs-tab:hover{border-color:var(--black);color:var(--black)}
.bs-tab[aria-pressed="true"]{background:var(--black);border-color:var(--black);color:var(--white)}
.bs-tab:focus-visible{outline:2px solid var(--neon);outline-offset:2px}

/* 切换分类时的入场动画（只对新出现的卡片播放，避免整块重排闪动） */
@keyframes bs-card-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.product-card.bs-enter{animation:bs-card-in .34s cubic-bezier(.22,1,.36,1) both}

/* ---------- 卡片：等高对齐（让 Add to Cart 底部对齐） ---------- */
.product-card{display:flex;flex-direction:column}
.product-card .product-img{flex:0 0 auto}
.product-card .product-body{display:flex;flex-direction:column;flex:1 1 auto}

.product-add{
  margin-top:auto;padding:14px 0 0;
  appearance:none;-webkit-appearance:none;background:none;border:0;
  font-family:var(--font-heading);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:var(--black);
  cursor:pointer;text-align:left;position:relative;
  transition:color .2s;
}
.product-add::after{
  content:'';position:absolute;left:0;bottom:-3px;width:0;height:2px;
  background:var(--neon);transition:width .25s cubic-bezier(.22,1,.36,1);
}
.product-add:hover{color:var(--black)}
.product-add:hover::after{width:100%}
.product-add:focus-visible{outline:2px solid var(--neon);outline-offset:4px}

/* 角标霓虹款（数据里 badge.tone = "neon"） */
.product-badge-neon{background:var(--neon);color:var(--black)}

/* ---------- 图片放大按钮（键盘/触屏可达；桌面端悬浮才显形，默认不改变外观） ---------- */
.product-img{cursor:zoom-in}
.product-img .product-quick-add,
.product-img .product-wishlist,
.product-img .product-zoom{cursor:pointer}

.product-zoom{
  position:absolute;top:10px;right:48px;z-index:3;
  width:30px;height:30px;padding:0;
  display:block;
  background:rgba(255,255,255,.94);color:var(--black);
  border:1px solid var(--border);border-radius:50%;
  cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.08);
  opacity:0;pointer-events:none;
  transition:opacity .2s,background .2s,transform .2s,color .2s;
}
/* 放大镜图标：纯 CSS 绘制（圆圈 + 手柄） */
.product-zoom::before{
  content:'';position:absolute;top:6px;left:6px;
  width:9px;height:9px;border:2px solid currentColor;border-radius:50%;
}
.product-zoom::after{
  content:'';position:absolute;top:16px;left:15px;
  width:2px;height:7px;background:currentColor;border-radius:1px;
  transform:rotate(-45deg);transform-origin:top center;
}
.product-card:hover .product-zoom,
.product-zoom:focus-visible{opacity:1;pointer-events:auto}
.product-zoom:hover{background:var(--neon);border-color:var(--neon);transform:scale(1.08)}
.product-zoom:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
/* 触屏没有 hover，常驻显示 */
@media (hover:none){.product-zoom{opacity:1;pointer-events:auto}}

/* 过滤时隐藏（用 class 而非 [hidden]，避免被 display:flex 覆盖） */
.bs-hide{display:none !important}

/* ---------- 大数据量优化 ---------- */
/* 仅当商品数量超过阈值时由 JS 加上此类：让视口外的卡片跳过渲染 */
.bs-module.bs-virtualized .product-card{
  content-visibility:auto;
  contain-intrinsic-size:auto 420px;
}
/* 图片未加载完成前先占位，避免 CLS */
.product-card .product-img img{background:var(--cement)}
.product-card .product-img img.bs-loaded{animation:bs-img-in .5s ease-out both}
@keyframes bs-img-in{from{opacity:.001}to{opacity:1}}

/* 触底自动加载下一批的哨兵 */
.bs-sentinel{height:1px;width:100%}
.bs-loading{
  grid-column:1/-1;text-align:center;padding:28px 0;
  font-family:var(--font-heading);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--gray-light);
}
.bs-noscript{text-align:center;font-size:13px;color:var(--gray-mid);margin-top:24px}

/* ==========================================================================
   图片放大灯箱
   ========================================================================== */
/* 用 div + 自管焦点陷阱，而非 <dialog>：行为在所有浏览器一致，不依赖 15.4+ Safari */
.bs-lightbox{
  position:fixed;inset:0;z-index:10000;
  display:none;grid-template-rows:1fr auto;
  background:rgba(0,0,0,.93);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  overflow:hidden;
  opacity:0;transition:opacity .2s ease-out;
}
.bs-lightbox.bs-open{display:grid;opacity:1}
html.bs-noscroll{overflow:hidden !important}

/* 舞台 */
.bs-lb-stage{
  margin:0;position:relative;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:56px 76px 8px;
}
.bs-lb-frame{
  position:relative;flex:1 1 auto;min-height:0;
  width:100%;max-width:min(1400px,92vw);
  display:flex;align-items:center;justify-content:center;
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
.bs-lb-img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;
  opacity:0;transition:opacity .28s ease-out;
  box-shadow:0 24px 80px rgba(0,0,0,.5);
}
.bs-lb-img.bs-ready{opacity:1}
/* 高清图未到位时显示低清缩略图（blur-up） */
.bs-lb-frame.bs-pending .bs-lb-img{opacity:0}
.bs-lb-frame.bs-pending::after{
  content:'';position:absolute;width:38px;height:38px;
  border:2px solid rgba(255,255,255,.22);border-top-color:var(--neon);
  border-radius:50%;animation:bs-spin .8s linear infinite;
}
@keyframes bs-spin{to{transform:rotate(360deg)}}

/* 说明与计数 */
.bs-lb-cap{
  display:flex;align-items:baseline;gap:14px;justify-content:center;
  padding:14px 24px 4px;text-align:center;flex-wrap:wrap;
}
.bs-lb-name{
  font-family:var(--font-heading);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--white);
}
.bs-lb-count{
  font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--gray-light);
  font-variant-numeric:tabular-nums;
}

/* 缩略图条 */
.bs-lb-thumbs{
  display:flex;gap:8px;justify-content:center;align-items:center;
  padding:10px 24px 22px;overflow-x:auto;scrollbar-width:thin;
}
.bs-lb-thumbs[hidden]{display:none}
.bs-lb-thumb{
  appearance:none;-webkit-appearance:none;padding:0;cursor:pointer;
  width:56px;height:56px;flex:0 0 auto;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06) center/cover no-repeat;
  opacity:.55;transition:opacity .2s,border-color .2s,transform .2s;
}
.bs-lb-thumb:hover{opacity:.9}
.bs-lb-thumb[aria-current="true"]{opacity:1;border-color:var(--neon);transform:translateY(-2px)}
.bs-lb-thumb:focus-visible{outline:2px solid var(--neon);outline-offset:2px}

/* 关闭 / 左右切换按钮 */
.bs-lb-btn{
  appearance:none;-webkit-appearance:none;
  position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);color:var(--white);
  border:1px solid rgba(255,255,255,.18);cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.bs-lb-btn:hover{background:var(--neon);color:var(--black);border-color:var(--neon)}
.bs-lb-btn:focus-visible{outline:2px solid var(--neon);outline-offset:3px}
.bs-lb-btn[disabled]{opacity:.22;cursor:default;pointer-events:none}

.bs-lb-close{top:18px;right:18px;width:44px;height:44px;font-size:24px;line-height:1;border-radius:50%}
.bs-lb-prev,.bs-lb-next{top:50%;transform:translateY(-50%);width:52px;height:72px;font-size:30px;line-height:1}
.bs-lb-prev{left:16px}
.bs-lb-next{right:16px}
.bs-lb-prev:hover{transform:translateY(-50%) translateX(-2px)}
.bs-lb-next:hover{transform:translateY(-50%) translateX(2px)}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .bs-tabs{
    flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 -24px 26px;padding:2px 24px 6px;
  }
  .bs-tabs::-webkit-scrollbar{display:none}
  .bs-lb-stage{padding:52px 12px 4px}
  .bs-lb-frame{max-width:96vw}
  .bs-lb-prev,.bs-lb-next{width:40px;height:56px;font-size:22px}
  .bs-lb-prev{left:4px}
  .bs-lb-next{right:4px}
  .bs-lb-close{top:10px;right:10px;width:38px;height:38px;font-size:20px}
  .bs-lb-thumb{width:46px;height:46px}
}

@media (prefers-reduced-motion:reduce){
  .product-card.bs-enter{animation:none}
  .product-card .product-img img.bs-loaded{animation:none}
  .bs-lb-img{transition:none}
  .bs-lb-frame.bs-pending::after{animation-duration:0.01ms}
  .bs-tab,.bs-lb-thumb,.bs-lb-btn{transition:none}
}