/* ============================================================
   E · Shopping page chrome
   依赖 _tokens.css · _e-fashion.css
   覆盖三个全站交互:
   1) Header 内嵌搜索条(除首页外所有商品类页面)
   2) 商品详情页 sticky 顶部购买栏(滚动后显示)
   3) 右下角 FAB 集群(教程视频 + 购物车 + 回顶)
   ============================================================ */

/* ───────── 1 · Header search (非首页) ───────── */
.e-header-search {
  flex: 1;
  max-width: 640px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 16px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.e-header-search:hover { border-color: var(--color-border-strong); background: #fff; }
.e-header-search:focus-within { border-color: var(--color-primary-fill); background: #fff; box-shadow: 0 0 0 3px var(--color-focus-ring); }
.e-header-search__ic { color: var(--color-text-muted); flex-shrink: 0; display: grid; place-items: center; }
.e-header-search input { flex: 1; border: 0; outline: 0; padding: 8px 0; font-family: inherit; font-size: 14px; background: transparent; min-width: 0; color: var(--color-text); }
.e-header-search input::placeholder { color: var(--color-text-muted); }
.e-header-search__cam {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; background: transparent; border: 0;
  color: var(--color-text-muted); font-family: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; border-right: 1px solid var(--color-border); flex-shrink: 0;
}
.e-header-search__cam:hover { color: var(--color-primary-fill); }
.e-header-search__btn {
  background: var(--color-cta); color: #fff;
  padding: 8px 18px; border-radius: 10px;
  font-weight: 800; font-size: 13px; border: 0; cursor: pointer; flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-out);
}
.e-header-search__btn:hover { background: var(--color-cta-hover); }
@media (max-width: 900px) {
  .e-header-search { max-width: none; }
  .e-header-search__cam { padding: 6px 8px; font-size: 0; gap: 0; }
  .e-header-search__cam svg { width: 16px; height: 16px; }
  .e-header-search__btn { padding: 8px 12px; }
}
@media (max-width: 720px) {
  .e-header-search input { font-size: 13px; }
  .e-header-search__cam { display: none; }
}

/* ───────── 2 · Product detail · sticky top purchase rail ───────── */
.e-pd-rail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 35;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
  padding: 10px 0;
  transform: translateY(-100%);
  transition: transform var(--duration-normal) var(--ease-out);
  box-shadow: 0 4px 16px rgba(15,31,26,.06);
}
.e-pd-rail.is-visible { transform: translateY(0); }
.e-pd-rail__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-container-x);
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
}
.e-pd-rail__img {
  width: 52px; height: 52px;
  border-radius: 12px; background: var(--color-surface);
  display: grid; place-items: center;
  font-size: 26px; flex-shrink: 0; overflow: hidden;
}
.e-pd-rail__meta { min-width: 0; }
.e-pd-rail__t {
  font-size: 13px; font-weight: 700; color: var(--color-text);
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  margin: 0;
}
.e-pd-rail__sub {
  font-size: 11px; color: var(--color-text-muted);
  margin-top: 2px; font-family: var(--font-mono);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.e-pd-rail__price-block { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1; }
.e-pd-rail__price {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 900;
  color: var(--color-price);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.e-pd-rail__price__cn { font-size: 11px; color: var(--color-text-muted); font-family: var(--font-mono); }
.e-pd-rail__actions { display: flex; gap: 8px; flex-shrink: 0; }
.e-pd-rail__actions .e-btn { padding: 10px 18px; font-size: 13px; min-height: 40px; }
.e-pd-rail__fav {
  width: 40px; height: 40px;
  border-radius: 10px; background: transparent;
  border: 1.5px solid var(--color-border);
  color: var(--color-text-muted); cursor: pointer;
  display: grid; place-items: center; flex-shrink: 0;
}
.e-pd-rail__fav:hover { color: var(--color-price); border-color: var(--color-price); }
@media (max-width: 720px) {
  .e-pd-rail__inner { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .e-pd-rail__img { width: 40px; height: 40px; font-size: 20px; }
  .e-pd-rail__price-block { display: none; }
  .e-pd-rail__actions { gap: 6px; }
  .e-pd-rail__actions .e-btn { padding: 8px 12px; font-size: 12px; min-height: 36px; }
  .e-pd-rail__fav { display: none; }
}

/* ───────── 3 · FAB cluster (bottom-right) ───────── */
.e-fab-cluster {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.e-fab-cluster > * { pointer-events: auto; }
@media (max-width: 720px) { .e-fab-cluster { bottom: 16px; right: 16px; gap: 8px; } }

.e-fab {
  width: 56px; height: 60px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(15,31,26,.12);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--color-text);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  position: relative;
  padding: 0;
  font-family: inherit;
  text-decoration: none;
}
.e-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15,31,26,.16);
  border-color: var(--color-primary);
}
.e-fab__ic { font-size: 20px; line-height: 1; display: grid; place-items: center; color: var(--color-primary-fill); }
.e-fab__ic svg { width: 22px; height: 22px; stroke-width: 2; }
.e-fab__t {
  font-size: 9px; font-weight: 800; color: var(--color-text-muted);
  font-family: var(--font-mono); letter-spacing: 0.04em;
  line-height: 1;
}
.e-fab__badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 20px; height: 20px;
  background: var(--color-cta); color: #fff;
  font-size: 10px; font-weight: 800; font-family: var(--font-mono);
  padding: 0 6px; border-radius: 10px;
  display: grid; place-items: center;
  border: 2px solid #fff;
  letter-spacing: -0.02em;
}
.e-fab--cart .e-fab__ic { color: var(--color-cta); }
.e-fab--tutorial .e-fab__ic { color: var(--color-secondary); }
.e-fab--top {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}
.e-fab--top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.e-fab--top .e-fab__ic { color: var(--color-text); }

@media (max-width: 720px) {
  .e-fab { width: 48px; height: 52px; border-radius: 14px; }
  .e-fab__ic svg { width: 18px; height: 18px; }
  .e-fab__t { font-size: 8px; }
}