/* ═══════════════════════════════════════════════════════════════
   Shared Components — 共享组件层
   基于 style.css 的 design tokens 抽离的可复用组件。
   首页、商品页、购物车、结算页共用，改一处全局生效。

   命名规范：BEM 风格，统一前缀 c- 表示 component（如 .c-btn）
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   容器 / 区块外壳
   统一内容宽度 1280px + 响应式左右间距
   ─────────────────────────────────────────────── */
.c-shell {
  width: 100%;
  max-width: var(--content-max, 1280px);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 80px);
  box-sizing: border-box;
}

/* ───────────────────────────────────────────────
   金色小标题标签  "— BEST SELLERS —"
   抽离自首页重复 5+ 次的 .text_134 / .rv-tag / .jtag ...
   ─────────────────────────────────────────────── */
.c-eyebrow {
  display: inline-block;
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--font-medium);
  letter-spacing: 4px;
  line-height: 22px;
  text-transform: uppercase;
}

/* ───────────────────────────────────────────────
   标题（衬线 Merriweather）
   ─────────────────────────────────────────────── */
.c-title {
  margin: 14px 0 0;
  color: var(--color-secondary);
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.26;
}

/* ───────────────────────────────────────────────
   按钮 — 统一抽离金色/深蓝/描边三种
   ─────────────────────────────────────────────── */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 56px;
  padding: 0 32px;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 8px);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--font-medium);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease,
              background-color 0.3s ease,
              color 0.3s ease;
}

/* 金色主按钮（渐变，呼应首页 SHOP COLLECTION） */
.c-btn--primary {
  background: linear-gradient(135deg, #bc994b 0%, #dab773 100%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.c-btn--primary:hover {
  background: linear-gradient(135deg, #a8843d 0%, #c6a35f 100%);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(188, 153, 75, 0.32);
  color: #fff;
}

/* 深蓝按钮 */
.c-btn--secondary {
  background: var(--color-secondary);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.15);
}
.c-btn--secondary:hover {
  background: #0f1c30;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(25, 42, 68, 0.3);
  color: #fff;
}

/* 描边按钮（次要操作） */
.c-btn--ghost {
  background: transparent;
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.c-btn--ghost:hover {
  background: var(--color-secondary);
  color: #fff;
  transform: translateY(-3px);
}

.c-btn--block { width: 100%; }

/* ───────────────────────────────────────────────
   卡片 — 抽离自 .pcard / .jcard / .rv-card 的统一规则
   ─────────────────────────────────────────────── */
.c-card {
  background: #fff;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(25, 42, 68, 0.06);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease;
}
.c-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 34px rgba(25, 42, 68, 0.16);
}

/* ───────────────────────────────────────────────
   信息提示 / 徽章
   ─────────────────────────────────────────────── */
.c-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full, 9999px);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--font-medium);
  letter-spacing: 0.5px;
  line-height: 1;
}
.c-badge--gold  { background: var(--color-primary); color: #fff; }
.c-badge--stock { background: rgba(46, 125, 50, 0.1); color: var(--color-success); }
.c-badge--out   { background: rgba(192, 57, 43, 0.1); color: var(--color-error); }

/* ───────────────────────────────────────────────
   入场动效 — 抽离自 9 个文件重复的 data-reveal 规则
   .js 前缀确保无 JS 时内容仍可见（渐进增强）
   ─────────────────────────────────────────────── */
.js .c-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.c-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .c-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .c-btn, .c-card { transition: none !important; }
}