/* 柴不多 CMS - 公共样式 */

/* ===== CMS Toolbar ===== */
.cms-toolbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 50px; background: #2c2c2c; color: white;
  display: none; align-items: center; justify-content: space-between;
  padding: 0 20px; z-index: 10001; font-size: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.cms-toolbar.visible { display: flex; }
.cms-toolbar .cms-left { display: flex; align-items: center; gap: 15px; }
.cms-toolbar .cms-right { display: flex; align-items: center; gap: 10px; }
.cms-toolbar .cms-logo { font-weight: 700; font-size: 15px; }
.cms-toolbar .cms-badge { background: #c4956a; padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.cms-toolbar button { padding: 6px 14px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.2s; }
.cms-btn-save { background: #c4956a; color: white; }
.cms-btn-save:hover { background: #b5845b; }
.cms-btn-logout { background: #555; color: #ddd; }
.cms-btn-logout:hover { background: #666; }
.cms-btn-admin { background: #444; color: #ddd; border: 1px solid #666 !important; }
.cms-btn-admin:hover { background: #555; }

/* ===== Edit mode highlights ===== */
body.cms-editing [data-cms] {
  outline: 2px dashed transparent; transition: outline-color 0.2s; cursor: default; position: relative;
}
body.cms-editing [data-cms]:hover { outline-color: #c4956a; }
body.cms-editing [data-cms][contenteditable="true"] {
  outline-color: #4CAF50; background: rgba(76, 175, 80, 0.05); cursor: text;
}

/* ===== Image hover ===== */
body.cms-editing [data-cms-img]:hover {
  outline: 2px dashed #c4956a; cursor: pointer; position: relative;
}
body.cms-editing [data-cms-img]:hover::after {
  content: '📷 点击更换图片'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); background: rgba(0,0,0,0.7); color: white;
  padding: 8px 16px; border-radius: 6px; font-size: 14px; white-space: nowrap; z-index: 100;
}

/* Static insert buttons */
body.cms-editing [data-cms-insert] {
  display: flex !important; align-items: center; justify-content: center; gap: 6px;
  background: #f8f5f2; border: 2px dashed #ddd; border-radius: 8px; padding: 12px;
  cursor: pointer; transition: all 0.2s; color: #999; font-size: 14px; margin: 0.5rem 0;
}
body.cms-editing [data-cms-insert]:hover { border-color: #c4956a; color: #c4956a; background: #faf5f0; }
body:not(.cms-editing) [data-cms-insert] { display: none !important; }

body.cms-toolbar-active { padding-top: 50px; }
body.cms-toolbar-active nav { top: 50px !important; }

.cms-login-link {
  display: none !important;
}

/* ===== Toast ===== */
.cms-toast {
  position: fixed; top: 60px; right: 20px; padding: 12px 20px;
  border-radius: 8px; color: white; font-size: 14px; z-index: 10002;
  animation: cms-slide-in 0.3s ease, cms-fade-out 0.5s ease 2.5s forwards;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.cms-toast.success { background: #4CAF50; }
.cms-toast.error { background: #f44336; }
.cms-toast.info { background: #2196F3; }
@keyframes cms-slide-in { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes cms-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* ===== Image upload modal ===== */
.cms-modal-overlay {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); z-index: 10003; justify-content: center; align-items: center;
}
.cms-modal-overlay.active { display: flex; }
.cms-modal {
  background: white; border-radius: 12px; padding: 30px;
  max-width: 500px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.cms-modal h3 { margin-bottom: 15px; font-size: 18px; }
.cms-modal .upload-area {
  border: 2px dashed #ddd; border-radius: 8px; padding: 40px 20px;
  text-align: center; cursor: pointer; transition: all 0.2s; margin-bottom: 15px;
}
.cms-modal .upload-area:hover { border-color: #c4956a; background: #faf5f0; }
.cms-modal .upload-area .icon { font-size: 2rem; margin-bottom: 10px; }
.cms-modal .upload-area p { color: #999; font-size: 14px; }
.cms-modal .preview { max-width: 100%; max-height: 200px; border-radius: 8px; margin-bottom: 15px; display: none; }
.cms-modal .btn-row { display: flex; gap: 10px; justify-content: flex-end; }
.cms-modal button { padding: 8px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; }
.cms-modal .btn-cancel { background: #f0f0f0; color: #666; }
.cms-modal .btn-confirm { background: #c4956a; color: white; }
.cms-modal .btn-confirm:hover { background: #b5845b; }

/* ============================================================
   INSERT-POINT INDICATORS
   ============================================================ */

.cms-insert-point {
  position: relative; height: 0; margin: 0; padding: 0;
  overflow: visible; cursor: pointer; z-index: 50;
}
.cms-insert-point::before {
  content: ''; position: absolute; left: 5%; right: 5%; top: 50%;
  height: 2px; background: transparent; transition: background 0.2s; border-radius: 1px;
}
.cms-insert-point .cms-insert-plus {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 28px; height: 28px; background: #f8f5f2; border: 2px solid #ddd;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 300; color: transparent; transition: all 0.2s;
  line-height: 1; user-select: none; z-index: 1;
}
.cms-insert-point:hover::before { background: #c4956a; }
.cms-insert-point:hover .cms-insert-plus {
  background: #c4956a; border-color: #c4956a; color: white;
  box-shadow: 0 2px 8px rgba(196, 149, 106, 0.3);
}
body:not(.cms-editing) .cms-insert-point { display: none !important; }

/* ===== Inline add menu ===== */
#cmsInlineMenu {
  display: flex; gap: 6px; padding: 6px 10px; background: white;
  border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  margin: 4px 0; position: relative; z-index: 60;
  animation: cms-inline-in 0.15s ease; flex-wrap: wrap; justify-content: center;
}
@keyframes cms-inline-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.cms-inline-item {
  display: flex; align-items: center; gap: 4px; padding: 6px 12px;
  border-radius: 6px; cursor: pointer; font-size: 13px; color: #666;
  transition: all 0.15s; white-space: nowrap; user-select: none;
}
.cms-inline-item:hover { background: #faf5f0; color: #c4956a; }
.cms-inline-item span { font-size: 16px; }

/* ===== Image layout sub-menu ===== */
#cmsImageLayoutSub {
  display: none; flex-direction: column; gap: 2px;
  padding: 4px 0 4px 24px; border-left: 2px solid #f0e6dc; margin-left: 8px;
}
.cms-layout-item { font-size: 12px !important; padding: 4px 10px !important; }
.cms-layout-item span { font-size: 14px !important; }

/* ===== Floating "+" button ===== */
#cmsAddBtn {
  position: fixed; bottom: 20px; left: 20px;
  width: 50px; height: 50px; background: #c4956a; color: white;
  border-radius: 50%; display: none; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 300; cursor: pointer; z-index: 10000;
  box-shadow: 0 4px 15px rgba(196, 149, 106, 0.4);
  transition: all 0.2s; line-height: 1; user-select: none;
}
body.cms-editing #cmsAddBtn { display: flex; }
#cmsAddBtn:hover { background: #b5845b; transform: scale(1.1); box-shadow: 0 6px 20px rgba(196, 149, 106, 0.5); }

#cmsAddMenu {
  position: fixed; bottom: 80px; left: 20px;
  background: white; border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15); padding: 8px 0;
  min-width: 160px; z-index: 10000; display: none;
  animation: cms-menu-in 0.2s ease;
}
#cmsAddMenu.active { display: block; }
@keyframes cms-menu-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.cms-add-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; cursor: pointer; transition: all 0.15s; font-size: 14px; color: #555;
}
.cms-add-item:hover { background: #faf5f0; color: #c4956a; }
.cms-add-icon { font-size: 18px; width: 24px; text-align: center; }

/* ===== User-created content blocks ===== */
.cms-user-block { position: relative; margin: 1rem 0; transition: all 0.2s; }
.cms-text-block {
  padding: 1rem; background: white; border-radius: 8px;
  min-height: 3rem; font-size: 0.95rem; color: #555; line-height: 1.8;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.cms-heading-block {
  padding: 0.8rem 1rem; color: #2c2c2c; font-size: 1.3rem;
  font-weight: 600; border-bottom: 2px solid #f0e6dc;
}
.cms-image-block {
  background: #f8f5f2; border: 2px dashed #ddd; border-radius: 8px;
  padding: 20px; text-align: center; color: #999; cursor: pointer;
  min-height: 60px; display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: all 0.2s;
}
.cms-image-block:hover { border-color: #c4956a; color: #c4956a; background: #faf5f0; }
.cms-image-uploaded { background: transparent; border: none; padding: 0; display: block; }
.cms-divider-block {
  border: none; height: 1px; background: #e0d5ca; margin: 2rem 0; position: relative;
}

/* ===== Image layout: left / right float ===== */
.cms-layout-left {
  float: left; width: 45%; margin: 0.5rem 1.5rem 0.5rem 0;
  clear: both;
}
.cms-layout-right {
  float: right; width: 45%; margin: 0.5rem 0 0.5rem 1.5rem;
  clear: both;
}
.cms-layout-full {
  width: auto; max-width: 100%;
  text-align: center;
}
.cms-layout-full img,
.cms-layout-full .cms-resizable-img {
  margin: 0 auto;
  display: block;
}
.cms-clearfix::after {
  content: ''; display: table; clear: both;
}
.cms-layout-left.cms-image-block,
.cms-layout-right.cms-image-block {
  min-height: 120px;
}

/* ===== Block delete button ===== */
.cms-block-delete {
  position: absolute; top: -8px; right: -8px;
  width: 24px; height: 24px; background: #f44336; color: white;
  border-radius: 50%; display: none; align-items: center; justify-content: center;
  font-size: 12px; cursor: pointer; z-index: 10;
  box-shadow: 0 2px 6px rgba(244,67,54,0.3); transition: all 0.2s; line-height: 1;
}
.cms-block-delete:hover { background: #d32f2f; transform: scale(1.1); }
.cms-user-block:hover > .cms-block-delete { display: flex; }
.cms-divider-delete { top: -12px; right: -8px; }
.cms-text-block .cms-block-delete,
.cms-heading-block .cms-block-delete {
  pointer-events: auto; -webkit-user-select: none; user-select: none;
}

/* ============================================================
   RESIZE HANDLE — larger, more visible, touch-friendly
   ============================================================ */

.cms-resize-handle {
  position: absolute;
  width: 24px; height: 24px;
  background: #c4956a;
  border-radius: 4px;
  display: none; /* only show on hover */
  align-items: center; justify-content: center;
  font-size: 12px; color: white; cursor: nwse-resize;
  z-index: 20; box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: background 0.15s, transform 0.15s;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.cms-image-uploaded:hover .cms-resize-handle { display: flex; }
.cms-resize-handle:hover { background: #b5845b; transform: scale(1.15); }

.cms-resizing-active {
  outline: 2px solid #c4956a;
  outline-offset: 2px;
}

/* When image is being resized */
.cms-resizable-img.resizing {
  opacity: 0.8;
  outline: 2px solid #c4956a;
}

/* ============================================================
   MOBILE RESPONSIVE — CMS components
   ============================================================ */

@media (max-width: 768px) {
  /* Toolbar: compact on mobile - two rows */
  .cms-toolbar {
    height: auto; min-height: 44px; padding: 6px 10px; font-size: 12px;
    flex-wrap: wrap; gap: 4px;
    align-items: center;
  }
  .cms-toolbar .cms-left { gap: 8px; flex-shrink: 0; }
  .cms-toolbar .cms-logo { font-size: 13px; }
  .cms-toolbar .cms-badge { display: none; }
  .cms-toolbar .cms-right { gap: 5px; flex-wrap: nowrap; flex-shrink: 0; }
  .cms-toolbar button { padding: 4px 8px; font-size: 11px; white-space: nowrap; }
  body.cms-toolbar-active { padding-top: 50px; }
  body.cms-toolbar-active nav { top: 50px !important; }

  /* Add button: slightly smaller */
  #cmsAddBtn { width: 44px; height: 44px; font-size: 24px; bottom: 16px; left: 16px; }
  #cmsAddMenu { bottom: 70px; left: 16px; min-width: 140px; }
  .cms-add-item { padding: 8px 14px; font-size: 13px; }

  /* Inline menu: vertical on mobile */
  #cmsInlineMenu { flex-direction: column; align-items: stretch; gap: 2px; padding: 6px 8px; }
  .cms-inline-item { padding: 8px 10px; font-size: 14px; }
  #cmsImageLayoutSub { padding: 4px 0 4px 16px; margin-left: 6px; }
  .cms-layout-item { font-size: 13px !important; padding: 6px 10px !important; }

  /* Insert points: easier to tap */
  .cms-insert-point .cms-insert-plus {
    width: 32px; height: 32px; font-size: 20px;
  }

  /* Resize handle: larger for touch */
  .cms-resize-handle { width: 32px; height: 32px; font-size: 14px; }

  /* Float images: full width on mobile, no float */
  .cms-layout-left,
  .cms-layout-right {
    float: none; width: 100%; margin: 0.5rem 0;
  }

  /* Modal: full width on mobile */
  .cms-modal {
    padding: 20px; max-width: 95%; margin: 0 10px;
  }

  /* Toast: smaller */
  .cms-toast { font-size: 12px; padding: 8px 14px; top: 50px; right: 10px; }

  /* Block delete: larger tap target */
  .cms-block-delete { width: 28px; height: 28px; font-size: 14px; }
}

/* ===== NUCLEAR: 非编辑模式绝对禁止任何编辑行为 ===== */
body:not(.cms-editing) [data-cms],
body:not(.cms-editing) [data-cms-img],
body:not(.cms-editing) [data-cms-insert] {
  contentEditable: false !important;
  -webkit-user-modify: read-only !important;
  user-select: none !important;
  pointer-events: none !important;
  cursor: default !important;
  outline: none !important;
}

/* 图片区域仍然允许点击导航，但禁止编辑 */
body:not(.cms-editing) [data-cms-img] a,
body:not(.cms-editing) [data-cms-img] img {
  pointer-events: auto !important;
  cursor: default !important;
}

/* 强制隐藏所有 CMS 编辑UI */
body:not(.cms-editing) .cms-toolbar,
body:not(.cms-editing) .cms-modal-overlay,
body:not(.cms-editing) .cms-insert-point,
body:not(.cms-editing) [data-cms-insert],
body:not(.cms-editing) .cms-resize-handle,
body:not(.cms-editing) #cmsAddBtn,
body:not(.cms-editing) #cmsAddMenu,
body:not(.cms-editing) .cms-block-delete,
body:not(.cms-editing) .cms-user-block .cms-block-delete {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 非编辑模式下 data-cms-img 的hover提示也不显示 */
body:not(.cms-editing) [data-cms-img]:hover::after {
  display: none !important;
  content: none !important;
}

/* ============================================================
   柴不多 - 全局排版系统 v2.0 (2026-05-14)
   统一字体、字号、行高、间距
   ============================================================ */

/* ===== 字体栈 ===== */
:root {
  --font-body: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-mono: 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* 字号体系 (rem) */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.85rem;    /* ~14px */
  --text-base: 0.95rem;  /* ~15px */
  --text-md: 1.05rem;    /* ~17px */
  --text-lg: 1.2rem;     /* ~19px */
  --text-xl: 1.5rem;     /* ~24px */
  --text-2xl: 2rem;      /* 32px */
  --text-3xl: 2.5rem;    /* 40px */
  --text-4xl: 3.5rem;    /* 56px */

  /* 行高 */
  --lh-tight: 1.4;
  --lh-normal: 1.8;
  --lh-loose: 2.0;

  /* 间距 */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;

  /* 品牌色 */
  --color-brand: #c4956a;
  --color-brand-hover: #b5845b;
  --color-dark: #2c2c2c;
  --color-text: #555;
  --color-muted: #888;
  --color-light: #aaa;
  --color-bg: #fafafa;
  --color-bg-warm: #f8f5f2;
  --color-border: #eee;
}

/* ===== 全局重置与基础 ===== */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== 标题体系 ===== */
h1, .page-header h1, .story-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--color-dark);
  letter-spacing: 0.02em;
}

h2, .section h2, .story-body h2, .story-detail .story-body h2 {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-dark);
  margin: var(--space-lg) 0 var(--space-sm);
  padding-bottom: 0.3rem;
  border-bottom: 2px solid #f0e6dc;
}

h3, .philosophy-item h3, .product-info h2, .story-card .card-title {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-dark);
}

/* ===== 正文 ===== */
p, .story-body p, .story-detail .story-body p, .story-card .card-excerpt {
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

/* ===== 引用 ===== */
.story-quote, .story-detail .story-body .quote, .quote {
  background: var(--color-bg-warm);
  padding: var(--space-md) var(--space-lg);
  border-radius: 12px;
  margin: var(--space-md) 0;
  font-size: var(--text-base);
  font-style: italic;
  color: #666;
  line-height: var(--lh-loose);
}

.story-quote strong, .quote strong {
  font-style: normal;
  color: var(--color-brand);
}

/* ===== 小字/辅助 ===== */
small, .card-date, .story-date, .story-card .card-date,
footer, footer p, .section-sub, .page-header .subtitle {
  font-size: var(--text-sm);
  color: var(--color-light);
  line-height: var(--lh-normal);
}

/* ===== 标签 ===== */
.tag, .product-card .tag, .story-card .tag {
  display: inline-block;
  background: var(--color-bg-warm);
  color: var(--color-light);
  padding: 0.15rem 0.6rem;
  border-radius: 20px;
  font-size: var(--text-xs);
  margin-right: 0.3rem;
}

/* ===== 导航 ===== */
nav#mainNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0.8rem 1rem;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #eee;
  z-index: 9999;
  transition: top 0.3s;
  font-size: 0.95rem;
  line-height: 1;
}

nav#mainNav a {
  color: #666;
  text-decoration: none;
  margin: 0 1rem;
  transition: color 0.2s;
  font-size: 0.95rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

nav#mainNav a:hover, nav#mainNav a.active { color: #c4956a; }

nav#mainNav .nav-login {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

/* 导航栏内的用户区域（登录后 nav-auth.js 替换的） */
nav#mainNav .nav-user-area {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  white-space: nowrap;
}

nav#mainNav .nav-user-area .nav-username { color: #c4956a; font-weight: 500; cursor: default; }
nav#mainNav .nav-user-area .nav-logout { color: #999; cursor: pointer; }
nav#mainNav .nav-user-area .nav-logout:hover { color: #c4956a; }

/* 水晶交流页面隐藏导航栏的"用户登录"链接 */
body.page-community nav#mainNav .nav-login { display: none; }

@media (max-width: 768px) {
  nav#mainNav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    gap: 0;
    padding: 0.6rem 0.5rem;
  }
  nav#mainNav a { margin: 0; padding: 0.3rem 0.5rem; flex-shrink: 0; }
  nav#mainNav .nav-login { position: static; transform: none; }
  nav#mainNav .nav-user-area { position: static; transform: none; }
}

@media (max-width: 400px) {
  nav#mainNav a { padding: 0.2rem 0.3rem; }
}

/* ===== Hero 专用 (首页) ===== */
.logo-text {
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: 0.15em;
}

.tagline {
  font-size: var(--text-lg);
  letter-spacing: 0.1em;
}

.hero .mission p {
  font-size: var(--text-base);
  line-height: var(--lh-loose);
}

.hero-feature .text {
  font-size: var(--text-sm);
}

/* ===== 产品卡片 ===== */
.product-card h3, .product-info h2 {
  font-size: var(--text-md);
}

.product-card .price {
  font-size: var(--text-lg);
  color: var(--color-brand);
  font-weight: 600;
}

/* ===== 品牌故事卡片 ===== */
.story-card .card-num {
  font-size: var(--text-sm);
  font-weight: 600;
}

/* ===== CTA ===== */
.cta h2 {
  font-size: var(--text-xl);
}

.cta p {
  font-size: var(--text-base);
}

.cta-btn {
  font-size: var(--text-md);
}

/* ===== 返回按钮 ===== */
.back-btn, .story-detail .back-btn {
  font-size: var(--text-sm);
}

/* ===== 页面头 ===== */
.page-header h1 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-xs);
}

.page-header .subtitle {
  font-size: var(--text-base);
}

/* ===== 移动端适配 ===== */
@media (max-width: 768px) {
  h1, .page-header h1, .story-detail .story-title {
    font-size: 1.5rem;
  }
  h2, .section h2, .story-body h2 {
    font-size: 1.25rem;
  }
  h3, .philosophy-item h3, .story-card .card-title {
    font-size: 1.05rem;
  }
  p, .story-body p {
    font-size: 0.9rem;
  }
  .logo-text {
    font-size: 2.5rem;
  }
  .tagline {
    font-size: 1rem;
  }
  nav a {
    font-size: 0.75rem;
  }
  .hero-feature .text {
    font-size: 0.78rem;
  }
  .story-quote, .quote {
    font-size: 0.9rem;
    padding: var(--space-sm) var(--space-md);
  }
  .product-card .price {
    font-size: var(--text-base);
  }
}

@media (max-width: 400px) {
  .logo-text {
    font-size: 2rem;
  }
  nav a {
    font-size: 0.68rem;
  }
  h1 {
    font-size: 1.3rem;
  }
}

/* ===== Video Modal ===== */
.cms-video-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 1rem;
}
.cms-video-tab {
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  color: #999;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.cms-video-tab.active {
  color: #c4956a;
  border-bottom-color: #c4956a;
}
.cms-video-panel {
  min-height: 120px;
}
.cms-video-file-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
  padding: 0.5rem 0.8rem;
  background: #f8f5f2;
  border-radius: 6px;
  font-size: 0.85rem;
}
.cms-video-remove {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  font-size: 1rem;
  padding: 0 0.3rem;
}
.cms-video-remove:hover { color: #e74c3c; }
.cms-upload-progress {
  margin-top: 0.8rem;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  height: 24px;
}
.cms-upload-progress-bar {
  height: 100%;
  background: #c4956a;
  width: 0%;
  transition: width 0.3s;
}
.cms-upload-progress span {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.75rem;
  color: #555;
}
.cms-video-embed-input {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cms-video-embed-input label {
  font-size: 0.85rem;
  color: #666;
}
.cms-video-embed-input input {
  padding: 0.6rem 0.8rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.9rem;
  transition: border-color 0.2s;
}
.cms-video-embed-input input:focus {
  border-color: #c4956a;
  outline: none;
}
.cms-video-embed-hint {
  font-size: 0.75rem;
  color: #aaa;
  margin: 0;
}
.cms-video-embed-hint.success { color: #4CAF50; }
.cms-video-embed-hint.error { color: #e74c3c; }

/* 移动端兼容：file input 用视觉隐藏替代 display:none */
/* display:none 在 iOS Safari 和部分 Android 浏览器中无法被 label/click 触发 */
.sr-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}