/* ============================================
   宠爱商城 - Design Tokens
   Based on: Airbnb Design System
   - Pure white canvas with Rausch Red (#ff385c)
   - Warm near-black text (#222222)
   - Three-layer card shadows
   - Generous border-radius (8px–32px)
   - Cereal VF → Inter + PingFang SC (warm, rounded)
   - Photography-first, travel-magazine browsing feel
   ============================================ */

/* 防止滚动条出现/消失导致 sticky 导航栏横向抖动（CLS）：预留滚动条沟槽，使内容区宽度恒定 */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}

/* [hidden] 必须能压住作者样式里的 display —— 否则形如 .xxx{display:flex} 会盖掉
   浏览器默认样式表的 [hidden]{display:none}（作者样式优先级高于 UA 样式，与选择器权重无关），
   导致 hidden 元素仍然显示。例：升级弹窗的进度区 / 操作区必须靠这条才能真正隐藏。 */
[hidden] { display: none !important; }

:root {
  /* === Airbnb Color Palette === */
  /* Primary Brand */
  --color-rausch-red: #ff385c;
  --color-brand: #ff385c;
  --color-deep-rausch: #e00b41;
  --color-error-red: #c13515;

  /* Surface & Text */
  --color-bg-primary: #ffffff;
  --color-bg-card: #ffffff;
  --color-bg-secondary: #f7f7f7;
  --color-bg-warm: #fafafa;
  --color-bg-light: #f2f2f2;         /* circular nav buttons */
  --color-text-primary: #222222;      /* warm near-black, never pure #000 */
  --color-text-secondary: #6a6a6a;
  --color-text-tertiary: #717171;
  --color-text-disabled: rgba(0,0,0,0.24);

  /* Borders */
  --color-border-subtle: #dddddd;
  --color-border-strong: #c1c1c1;

  /* Semantic - mapped to Airbnb palette */
  --color-accent-primary: #222222;    /* near-black (buttons, emphasis) */
  --color-accent-secondary: #ff385c;  /* Rausch Red (CTAs, brand) */
  --color-semantic-success: #10B981;
  --color-semantic-warning: #F59E0B;
  --color-semantic-error: #c13515;
  --color-price-red: #ff385c;
  --color-coupon-yellow: #FFF7E6;
  --color-coupon-border: #FFD600;
  --color-tag-hot: #ff385c;
  --color-link-blue: #428bff;

  /* === Typography — Airbnb Cereal VF → Inter === */
  --font-display: 'Inter', 'Circular', 'PingFang SC', -apple-system, system-ui, 'Helvetica Neue', sans-serif;
  --font-body: 'Inter', 'Circular', 'PingFang SC', -apple-system, system-ui, 'Helvetica Neue', sans-serif;

  /* Airbnb type scale (rem-based) */
  --font-size-xs: 0.69rem;    /* 11px — badges */
  --font-size-sm: 0.75rem;    /* 12px — tags, small labels */
  --font-size-base: 0.88rem;  /* 14px — body, links */
  --font-size-lg: 1.00rem;    /* 16px — UI, nav, buttons */
  --font-size-xl: 1.25rem;    /* 20px — feature titles */
  --font-size-2xl: 1.38rem;   /* 22px — card headings */
  --font-size-3xl: 1.75rem;   /* 28px — section headings */
  --font-size-hero: 2.25rem;  /* 36px — hero */

  /* Airbnb weight range: 500–700, never thin */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-body: 1.43;
  --line-height-heading: 1.18;
  --line-height-tight: 1.25;

  /* Negative tracking for intimacy */
  --tracking-heading: -0.44px;
  --tracking-subtitle: -0.18px;

  /* === Spacing — 8px base === */
  --space-unit: 8px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;

  /* === Radius — Airbnb scale === */
  --radius-sm: 4px;
  --radius-md: 8px;          /* buttons, tabs */
  --radius-lg: 14px;          /* badges, labels */
  --radius-xl: 20px;          /* cards, large buttons */
  --radius-2xl: 32px;         /* hero, large containers */
  --radius-btn: 8px;
  --radius-circle: 50%;       /* nav controls, avatars */

  /* === Shadows — Airbnb three-layer system === */
  /* Card: border-ring + soft-ambient + primary-lift */
  --shadow-card: rgba(0,0,0,0.02) 0 0 0 1px,
                 rgba(0,0,0,0.04) 0 2px 6px,
                 rgba(0,0,0,0.10) 0 4px 8px;
  /* Hover: single stronger lift */
  --shadow-elevated: rgba(0,0,0,0.08) 0 4px 12px;
  /* Modal: deeper three-layer */
  --shadow-modal: rgba(0,0,0,0.02) 0 0 0 1px,
                  rgba(0,0,0,0.06) 0 8px 24px,
                  rgba(0,0,0,0.12) 0 16px 48px;
  /* Focus ring */
  --shadow-focus: 0 0 0 2px var(--color-accent-secondary);

  /* === Layout === */
  --nav-height: 80px;
  --max-width: 1280px;
  --card-gap: 24px;
}

/* ============================================
   Reset & Base
   ============================================ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  font-size: inherit;
}

input {
  font-family: inherit;
  font-size: inherit;
}

/* 手机端底部 Tab 栏：PC 端默认隐藏（mobile.css @media 内覆盖为 fixed 显示）
   必须写在 base.css 而非 mobile.css/pc.css，否则 PC 端加载 pc.css 时无此规则，
   导致刷新瞬间 tabbar 内的 SVG 以默认黑色 fill + 继承尺寸闪现巨型黑图标 */
.mobile-tabbar {
  display: none;
}

/* 手机端全屏搜索页：PC 端默认隐藏（mobile.css 内 .active 才显示）。
   PC 端不加载 mobile.css，若只靠 mobile.css 隐藏，该 div 会以无样式块级元素
   裸露出页面底部（截图左下角那个“搜索框 + 取消”就是它）。手机端 .active
   规则优先级更高（双类选择器），不受此 base 规则影响。 */
.mobile-search-page {
  display: none;
}

img {
  max-width: 100%;
  display: block;
}

ul, ol {
  list-style: none;
}

/* ===== 全局动画（两版共用） ===== */
@keyframes dtk-spin {
  to { transform: rotate(360deg); }
}
@keyframes skeleton-loading-pulse {
  0%, 100% {
      opacity: 0.35;
      transform: scale(0.8);
    }
    50% {
      opacity: 1;
      transform: scale(1);
    }
}
@keyframes skeleton-shimmer {
  100% {
      transform: translateX(100%);
    }
}
@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
}
@keyframes fadeIn {
  from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slFadeIn {
  from { opacity: 0; transform: scale(.96); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes phoneBuyPop {
  from { transform: translateY(8px) scale(0.98); opacity: 0.6; }
    to { transform: none; opacity: 1; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; }
    to { opacity: 0; }
}

/* ===== 我的订单统计明细弹窗（全局，PC/移动共用） ===== */
.uo-modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 16px; }
.uo-modal { width: 100%; max-width: 360px; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.18); animation: uoModalIn .18s ease; }
@keyframes uoModalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.uo-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--color-border, #eee); font-size: 15px; font-weight: 600; }
.uo-modal-close { width: 28px; height: 28px; border: none; background: rgba(0,0,0,.05); border-radius: 50%; font-size: 18px; line-height: 1; color: #888; cursor: pointer; }
.uo-modal-close:hover { background: rgba(0,0,0,.1); }
.uo-modal-body { max-height: 60vh; overflow-y: auto; padding: 8px 16px 16px; }
.uo-modal-rows { display: flex; flex-direction: column; }
.uo-modal-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 4px; border-bottom: 1px dashed var(--color-border, #eee); font-size: 13px; }
.uo-modal-row:last-child { border-bottom: none; }
.uo-mr-k { color: var(--text-2, #666); word-break: break-all; }
.uo-mr-v { color: #FF7A45; font-weight: 700; flex-shrink: 0; }

/* ===== 提现申请弹窗（全局，PC/移动共用） ===== */
.uo-withdraw-bar { margin: 10px 0 2px; }
.uo-withdraw-btn { width: 100%; border: none; border-radius: 12px; padding: 12px; font-size: 15px; font-weight: 700; color: #fff; background: #FF7A45; cursor: pointer; box-shadow: 0 4px 14px rgba(255,122,69,.22); }
.uo-withdraw-btn:active { transform: translateY(1px); }
.wd-tip { font-size: 12px; color: var(--text-2, #666); line-height: 1.6; margin: 4px 0 0; }
.wd-reason { background: rgba(255,122,69,.1); color: #d9480f; font-size: 13px; padding: 12px; border-radius: 10px; margin: 6px 0; line-height: 1.6; }
.wd-form { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.wd-field { display: flex; flex-direction: column; gap: 6px; }
.wd-field label { font-size: 12px; color: var(--text-2, #666); }
.wd-field .wd-hint { font-size: 11px; color: #999; }
.wd-input { width: 100%; box-sizing: border-box; border: 1px solid var(--color-border, #e5e5e5); border-radius: 10px; padding: 11px 12px; font-size: 14px; outline: none; -webkit-appearance: none; }
.wd-input:focus { border-color: #FF7A45; }
.wd-amount-wrap { position: relative; }
.wd-amount-wrap .wd-cur { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #999; font-size: 15px; }
.wd-amount-wrap .wd-input { padding-left: 28px; }
.wd-max-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: rgba(255,122,69,.12); color: #FF7A45; border: none; border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
.wd-submit { background: #FF7A45; color: #fff; border: none; border-radius: 12px; padding: 13px; font-size: 15px; font-weight: 600; cursor: pointer; }
.wd-submit:disabled { opacity: .6; cursor: not-allowed; }
.wd-success { text-align: center; padding: 8px 0 4px; }
.wd-success .wd-ok { font-size: 42px; color: #34a853; line-height: 1; }
.wd-success .wd-amt { font-size: 22px; font-weight: 700; color: #FF7A45; margin: 10px 0 6px; }
.wd-tip.tax { background: rgba(52,168,83,.08); color: #2b6a3d; }
@keyframes dtk-spin {
  to { transform: rotate(360deg); }
}
@keyframes skeleton-loading-pulse {
  0%, 100% {
      opacity: 0.35;
      transform: scale(0.8);
    }
    50% {
      opacity: 1;
      transform: scale(1);
    }
}
@keyframes skeleton-shimmer {
  100% {
      transform: translateX(100%);
    }
}
@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
}
@keyframes fadeIn {
  from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slFadeIn {
  from { opacity: 0; transform: scale(.96); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes phoneBuyPop {
  from { transform: translateY(8px) scale(0.98); opacity: 0.6; }
    to { transform: none; opacity: 1; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; }
    to { opacity: 0; }
}

/* ===== 我的订单统计明细弹窗（全局，PC/移动共用） ===== */
.uo-modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 16px; }
.uo-modal { width: 100%; max-width: 360px; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.18); animation: uoModalIn .18s ease; }
@keyframes uoModalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.uo-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--color-border, #eee); font-size: 15px; font-weight: 600; }
.uo-modal-close { width: 28px; height: 28px; border: none; background: rgba(0,0,0,.05); border-radius: 50%; font-size: 18px; line-height: 1; color: #888; cursor: pointer; }
.uo-modal-close:hover { background: rgba(0,0,0,.1); }
.uo-modal-body { max-height: 60vh; overflow-y: auto; padding: 8px 16px 16px; }
.uo-modal-rows { display: flex; flex-direction: column; }
.uo-modal-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 4px; border-bottom: 1px dashed var(--color-border, #eee); font-size: 13px; }
.uo-modal-row:last-child { border-bottom: none; }
.uo-mr-k { color: var(--text-2, #666); word-break: break-all; }
.uo-mr-v { color: #FF7A45; font-weight: 700; flex-shrink: 0; }

/* ============================================================
 * APP 版本升级弹窗（仅 APP 壳内出现）
 * V45.1074：从已废弃的 css/style.css 移植到此。base.css 为移动端与 PC 端共同加载，
 *           原先只有废弃样式表里才有这组规则，导致弹窗实际渲染为「无样式裸 HTML」。
 * 视觉：暖橙主色 + 米色卡片 + 浅绿进度，与首页设计系统一致。
 * ============================================================ */
/* ============================================================
 * APP 版本升级弹窗（仅 APP 壳内显示；移动端基础样式，全站加载）
 * 视觉：暖橙主色 + 米色卡片 + 浅绿进度，布局与 .download-modal 一致
 * ============================================================ */
.update-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 210;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.update-modal-mask.open { display: flex; opacity: 1; }

.update-modal {
  position: relative;
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 26px 22px 20px;
  background: #FFFBF5;                 /* 米色暖底 */
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  text-align: center;
  transform: translateY(8px) scale(0.97);
  transition: transform 0.25s ease;
}
.update-modal-mask.open .update-modal { transform: translateY(0) scale(1); }

.update-modal-head { margin-bottom: 14px; }
.update-modal-title {
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  color: #F57C2E;                     /* 暖橙标题 */
}
.update-modal-sub {
  margin-top: 6px;
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.update-modal-notes {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  text-align: left;
}
.update-modal-notes li {
  position: relative;
  padding: 6px 0 6px 24px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.update-modal-notes li::before {       /* 浅绿勾底 */
  content: '';
  position: absolute;
  left: 4px;
  top: 11px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #5FD0A6;
  box-shadow: inset 0 0 0 2px #FFFBF5;
}
.update-modal-notes li::after {        /* 白色对勾 */
  content: '';
  position: absolute;
  left: 8px;
  top: 14px;
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.update-modal-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.update-modal-actions .update-modal-btn { width: auto; flex: 1 1 0; }
.update-modal-actions .update-modal-btn-text { flex: 0 0 auto; }

.update-modal-btn {
  display: block;
  width: 100%;
  padding: 12px 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s, background 0.2s, color 0.2s;
}
.update-modal-btn:hover { opacity: 0.92; }
.update-modal-btn:active { transform: scale(0.98); }
.update-modal-btn-primary {
  background: linear-gradient(135deg, #FF9A4D, #FF7A3D);   /* 暖橙 CTA */
  color: #fff;
}
.update-modal-btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-subtle);
}
.update-modal-btn-text {
  background: transparent;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border: none;
  width: auto;
  padding: 10px 6px;
}

/* 进度区 */
.update-modal-progress {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.update-modal-progress .update-modal-btn { width: auto; flex: 0 0 auto; padding: 8px 14px; }
.update-modal-bar {
  flex: 1;
  height: 8px;
  background: #F0E6DC;                 /* 米色轨道 */
  border-radius: 999px;
  overflow: hidden;
}
.update-modal-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #6FE0B4, #34C79A);   /* 浅绿进度 */
  border-radius: 999px;
  transition: width 0.25s ease;
}
.update-modal-bar-fill.indeterminate {
  width: 40% !important;
  animation: update-bar-slide 1.1s ease-in-out infinite;
}
@keyframes update-bar-slide {
  0%   { margin-left: -40%; }
  100% { margin-left: 100%; }
}
.update-modal-pct {
  min-width: 42px;
  text-align: right;
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}
.update-modal-pct.update-modal-installing {
  color: #34C79A;
  font-weight: var(--font-weight-semibold);
}

/* 错误区 */
.update-modal-error { margin-top: 4px; }
.update-modal-error-msg {
  margin-bottom: 12px;
  font-size: var(--font-size-sm);
  color: #E5484D;                     /* 错误红 */
  line-height: 1.5;
}

/* ============================================================
   拼多多搜索筛选条（排序 / 只看有券）
   由 app-common.js 的 buildPddFilterBar() 渲染，仅「拼多多平台 + 关键词搜索」路径显示。
   ★放在 base.css 而非 pc.css/mobile.css：base.css 两端都加载，一处分两端生效
   （同 .update-modal-* 的处理方式），避免出现「只在 PC 端有样式」的分端坑。
   ============================================================ */
.dtk-pdd-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0 2px;
}
.dtk-pdd-filter-item {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  background: #F5F6F7;
  color: #666666;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.dtk-pdd-filter-item:hover { background: #FDECEC; color: #E02E24; }
.dtk-pdd-filter-item.active { background: #FDECEC; color: #E02E24; font-weight: 600; }
.dtk-pdd-coupon { margin-left: auto; }

@media (max-width: 744px) {
  .dtk-pdd-filters { gap: 6px; padding: 8px 0 2px; }
  .dtk-pdd-filter-item { padding: 4px 12px; font-size: 12px; }
  /* 移动端宽度紧张：不再把「只看有券」推到右侧，随换行自然排布 */
  .dtk-pdd-coupon { margin-left: 0; }
}

/* ============================================================
   拼多多商品详情页（.pdd-detail）
   —— ★一处分两端生效：base.css 被 PC 与移动端页面**都**加载，
      故拼多多样式统一写在这里，不再往 pc.css / mobile.css 里各写一份
      （两端各写一份的写法极易漏改其中一端 → 整页裸样式，历史上已踩过）。
   品牌红 #E02E24（与淘宝橙 #FF6600 / 天猫红 #FF0036 区分，卡片角标已沿用）。
   ★ 按钮类选择器必须带 .pdd-detail 前缀：pc.css / mobile.css 在 base.css **之后**加载，
      同特异性的单类规则会被它们覆盖 → 写成 .pdd-detail .pdd-buy-btn 才能稳定生效。
   ============================================================ */
.pdd-detail { padding-bottom: 24px; }
/* 店铺类型标签：置于标题前（标题首行内联），vertical-align:middle 使其与首行文字垂直居中 */
.pdd-shop-type { display: inline-block; vertical-align: middle; margin: 0 8px 0 0; padding: 1px 8px; border-radius: 4px; background: #FFF1F0; color: #E02E24; font-size: 11px; font-weight: 600; border: 1px solid #FFD5D1; white-space: nowrap; }
/* 双栏（PC）／单栏（移动端，见文末 @media） */
.pdd-main { display: flex; align-items: flex-start; gap: 28px; }
.pdd-gallery { position: relative; flex: 0 0 420px; max-width: 420px; min-width: 0; }
.pdd-gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 12px; background: var(--color-bg-secondary); scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
.pdd-gallery-track::-webkit-scrollbar { display: none; }
.pdd-gallery-slide { flex: 0 0 100%; scroll-snap-align: center; }
.pdd-gallery-slide img { display: block; width: 100%; height: auto; }
.pdd-gallery-count { position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; border-radius: 10px; background: rgba(0, 0, 0, .45); color: #fff; font-size: 11px; line-height: 1.6; pointer-events: none; }
.pdd-gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; padding-bottom: 2px; overflow-x: auto; }
.pdd-gallery-thumb { flex: 0 0 auto; width: 56px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: 8px; background: var(--color-bg-secondary); overflow: hidden; cursor: pointer; }
.pdd-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pdd-gallery-thumb.is-active { border-color: #E02E24; }

.pdd-info { flex: 1 1 auto; min-width: 0; }
.pdd-title { margin: 0 0 14px; font-size: 1.13rem; font-weight: 600; line-height: 1.45; color: var(--color-text-primary); }
.pdd-price-box { padding: 14px 16px; border: 1px solid #FFE0DE; border-radius: 12px; background: linear-gradient(180deg, #FFF7F6, #FFFFFF); }
.pdd-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pdd-price-label { font-size: 12px; color: var(--color-text-tertiary); }
.pdd-price-now { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: #E02E24; }
.pdd-price-original { font-size: 12px; color: var(--color-text-tertiary); text-decoration: line-through; }
.pdd-coupon-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pdd-coupon-tag { padding: 3px 10px; border: 1px solid #FFC9C4; border-radius: 6px; background: #FFF1F0; color: #E02E24; font-size: 12px; }
.pdd-coupon-save { font-size: 12px; color: var(--color-text-tertiary); }
.pdd-rebate-row { display: flex; align-items: center; margin-top: 8px; font-size: 12px; color: var(--color-text-secondary); }
.pdd-rebate-row em { font-style: normal; font-size: 15px; font-weight: 700; color: var(--color-brand); }
.pdd-rebate-tip { margin-left: 6px; color: var(--color-text-tertiary); }
.pdd-sales { margin-left: auto; color: var(--color-text-tertiary); }
.pdd-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.pdd-detail .pdd-buy-btn { background: #E02E24; border-color: #E02E24; }
.pdd-detail .pdd-buy-btn:hover { background: #C4241C; border-color: #C4241C; }
.pdd-detail .pdd-buy-btn[disabled] { opacity: .7; cursor: default; }
.pdd-fav-btn { white-space: nowrap; }
.pdd-section { margin-top: 30px; }
.pdd-section-title { margin-bottom: 12px; font-size: 1.06rem; font-weight: 600; color: var(--color-text-primary); }
.pdd-desc { margin: 0 0 14px; font-size: var(--font-size-base); line-height: 1.75; color: var(--color-text-secondary); white-space: pre-wrap; }
.pdd-image-list { border-radius: 12px; overflow: hidden; background: var(--color-bg-secondary); }
.pdd-image-list img { display: block; width: 100%; max-width: 760px; height: auto; margin: 0 auto; }
.pdd-image-empty { padding: 24px; text-align: center; font-size: 13px; color: var(--color-text-tertiary); }
.pdd-image-note { margin-top: 10px; font-size: 12px; color: var(--color-text-tertiary); }

.pdd-rec-list { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.pdd-rec-card { flex: 0 0 148px; color: inherit; text-decoration: none; }
.pdd-rec-card img { display: block; width: 148px; height: 148px; border-radius: 10px; background: var(--color-bg-secondary); object-fit: cover; }
.pdd-rec-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 6px 0 4px; font-size: 12px; line-height: 1.4; color: var(--color-text-secondary); }
.pdd-rec-row { display: flex; align-items: baseline; gap: 6px; }
.pdd-rec-price { font-size: 14px; font-weight: 700; color: #E02E24; }
.pdd-rec-rebate { font-size: 11px; color: var(--color-brand); }
.pdd-rec-empty, .pdd-rec-loading { padding: 8px 0; font-size: 12px; color: var(--color-text-tertiary); }

@media (max-width: 744px) {
  .pdd-detail { padding-bottom: 16px; }
  .pdd-main { display: block; }
  .pdd-gallery { flex: none; max-width: none; margin-bottom: 14px; }
  .pdd-price-now { font-size: 1.5rem; }
  .pdd-actions { gap: 8px; }
  .pdd-detail .pdd-buy-btn, .pdd-fav-btn { flex: 1 1 auto; }
  .pdd-section { margin-top: 24px; }
  /* 移动端底部栏「收藏」激活态：复用 mobile.css 既有的 .dm-bb-fav.faved 类名
     （写成 .is-on 不会生效——mobile.css 里上色规则挂在 .faved 上），仅补文字颜色 */
  .dm-bb-item.dm-bb-fav.faved { color: var(--color-rausch-red); }
}

/* ============================================================
   V47.1115 个人中心右上角「退出登录」按钮（悬浮于渐变头部右上角）
   仅登录态渲染（renderUserPage 按 isLoggedIn 输出）；两端通用基础样式
   ============================================================ */
.uc-logout-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.uc-logout-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.55);
}
.uc-logout-btn:active {
  background: rgba(255, 255, 255, 0.34);
}
/* ============================================================
   V48.1130 全站「收藏」操作按钮统一隐藏（产品决策：不再提供收藏入口）
   ------------------------------------------------------------
   覆盖全部 7 个渲染点（DOM 保留、仅视觉隐藏；收藏数据与接口逻辑完全不动，
   后续如需恢复，删除本节即可）。点位与来源函数：
     1. .btn-fav         商品卡圆形收藏按钮
                           · renderDtkRankCard  → PC 首页热卖榜/商品库、搜索结果页、品牌页、收藏页
                           · renderProductCard  → 旧商品网格卡（历史遗留模板，一并覆盖）
     2. .btn-unfav        收藏页「失效/已下架」卡片上的「取消收藏」文字按钮
     3. .detail-fav-btn   淘宝详情页 PC 操作行收藏按钮
     4. .dm-bb-fav        淘宝 / 拼多多详情页「移动端底部栏」收藏按钮（两端共用该类名）
     5. .pdd-fav-btn      拼多多详情页 PC 操作行收藏按钮
   ★ 必须 !important：pc.css / mobile.css 在 base.css 之后加载，且
     `.dtk-card-actions-bar .btn-fav { display: flex }` 特异性(0,2,0) 高于单类(0,1,0)，
     不加 !important 会被其覆盖 → 隐藏失效。
   ★ 不占位：display:none 让元素完全退出文档流与 flex 布局，不留空位、不产生 gap，
     周边按钮的 flex:1 会自动补位（见下方布局补偿说明）。
   ============================================================ */
.btn-fav,
.btn-unfav,
.detail-fav-btn,
.pdd-fav-btn,
.dm-bb-fav,
.dtk-card-actions-bar .btn-fav,
.dtk-card-actions-bar .btn-unfav {
  display: none !important;
}

/* 布局补偿（移动端详情页底部栏）：原结构 [首页][收藏][分享][购买]，
   首页 56px 固定 + 分享(flex:1,max 130) + 购买(flex:1.2,max 170)，
   收藏隐藏后行尾会出现约 80px 空档 → 放开两者宽度上限，按原 1 : 1.2 比例铺满整行。
   （特异性 .dm-bottom-bar .dm-bb-share(0,2,0) > mobile.css 的 .dm-bb-share(0,1,0)，
     无需 !important。）
   其余位置无需补偿：PC 商品卡操作条 .dtk-btn-grab 与 PC 详情页 .detail-buy-btn
   均为 flex:1，收藏隐藏后自动撑满；PC 拼多多详情页 .pdd-actions 为 flex-start，
   购买按钮宽度不变、行尾留白本就存在，前后视觉一致。 */
.dm-bottom-bar .dm-bb-share,
.dm-bottom-bar .dm-bb-buy {
  max-width: none;
}


/* ── 邀请好友二维码弹窗（V56.1164）── */
.invite-qr-mask { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.55); display: none; align-items: center; justify-content: center; padding: 20px; }
.invite-qr-card { width: min(320px, 92vw); background: #fff; border-radius: 20px; padding: 24px 20px; text-align: center; position: relative; box-shadow: 0 18px 50px rgba(0,0,0,.2); }
.invite-qr-close { position: absolute; top: 10px; right: 12px; border: none; background: transparent; font-size: 22px; color: #999; cursor: pointer; line-height: 1; padding: 4px; font-family: inherit; }
.invite-qr-title { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: #222; }
.invite-qr-sub { margin: 0 0 14px; font-size: 12px; color: #8C7A66; line-height: 1.6; }
.invite-qr-box { display: flex; align-items: center; justify-content: center; width: 200px; height: 200px; margin: 0 auto; background: #fff; border: 1px solid #EFE4D5; border-radius: 14px; }
.invite-qr-box img, .invite-qr-box canvas { width: 184px; height: 184px; display: block; }
.invite-qr-code { margin: 10px 0 2px; font-size: 13px; color: #222; font-weight: 600; letter-spacing: 1px; }
.invite-qr-hint { margin: 0 0 14px; font-size: 11.5px; color: #9C8A76; line-height: 1.7; }
.invite-qr-btn { display: block; width: 100%; padding: 12px; border: none; border-radius: 12px; background: #ff385c; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; }
.invite-qr-btn:active { opacity: .9; }
.invite-qr-btn.ghost { background: #FFF3F0; color: #ff385c; margin-top: 10px; }