/* ============================================
   宠爱商城 - 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; }
}

:root {
  /* === Airbnb Color Palette === */
  /* Primary Brand */
  --color-rausch-red: #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; }
}
@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; }
}