/* ============================================================

   明艺艺术 MINGYI ART — 玄色主题 v5.0

   

   配色核心（老板确认版）：

   - 顶部：导航栏 = 深玄色

   - Hero区 = 玄黑色底 + 朱砂红点缀

   - 中间内容区 = 白色/浅灰背景（像正常网站！）

   - 底部Footer = 深玄色

   - 不是全黑！是上下深、中间白！

   ============================================================ */



/* === CSS变量系统 === */

:root {

  /* ===== 深色区域（导航/Hero/Footer）===== */

  --dark-bg: #0a0a0a;

  --dark-card: #161616;

  --dark-elevated: #1a1a1a;

  --dark-input: #141414;

  

  /* ===== 浅色区域（中间内容区）===== */

  --light-bg: #FFFFFF;

  --light-alt: #F8F9FA;

  --light-card: #FFFFFF;

  --light-card-hover: #FAFBFC;

  --light-border: #E8ECF0;

  --light-border-hover: #D0D7DE;

  --light-muted-bg: #F3F4F6;

  

  /* ===== 强调色：朱砂红（全局通用）===== */

  --accent: #C41E3A;

  --accent-bright: #E63950;

  --accent-dark: #8B1428;

  --accent-glow: rgba(196, 30, 58, 0.35);

  --accent-subtle: rgba(196, 30, 58, 0.06);

  --accent-light: rgba(196, 30, 58, 0.08);

  

  /* 金色点缀 */

  --gold: #C9A96E;

  --gold-light: #DFC5A0;

  

  /* ===== 深色区文字 ===== */

  --text-white: #FFFFFF;

  --text-primary-dark: #FFFFFF;

  --text-secondary-dark: #F0E0E0;

  --text-muted-dark: #CCCCCC;

  

  /* ===== 浅色区文字 ===== */

  --text-primary: #1A1A2E;

  --text-secondary: #4A5568;

  --text-muted: #718096;

  --text-dim: #A0AEC0;

  

  /* ===== 边框（自适应）===== */

  --border-dark: rgba(255,255,255,0.08);

  --border-dark-hover: rgba(255,255,255,0.15);

  --border-accent: rgba(196, 30, 58, 0.2);

  

  /* 阴影（浅色区用） */

  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);

  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);

  --shadow-lg: 0 8px 32px rgba(0,0,0,0.10);

  --shadow-xl: 0 16px 48px rgba(0,0,0,0.12);

  --shadow-dark: 0 4px 24px rgba(0,0,0,0.5);

  

  /* 圆角 */

  --r: 4px;

  --r-md: 8px;

  --r-lg: 14px;

  --r-xl: 20px;

  

  /* 过渡 */

  --t: 0.28s cubic-bezier(0.4, 0, 0.2, 1);

  --t-fast: 0.18s ease;

  --t-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  

  /* 尺寸 */

  --nav-h: 72px;

  --max-w: 1200px;

  --max-w-wide: 1400px;

}



/* === 全局重置 === */

*, *::before, *::after {

  margin: 0; padding: 0; box-sizing: border-box;

}

html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }

body {

  background-color: var(--light-bg);

  color: var(--text-primary);

  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  line-height: 1.65;

  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

a { color: inherit; text-decoration: none; transition: color var(--t-fast); }

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

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

input, textarea, select { font-family: inherit; font-size: inherit; }



/* 滚动条 */

::-webkit-scrollbar { width: 6px; }

::-webkit-scrollbar-track { background: var(--light-muted-bg); }

::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }

::selection { background: var(--accent); color: #fff; }



/* === 容器 === */

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }

.container-wide { max-width: var(--max-w-wide); margin: 0 auto; padding: 0 32px; }



/* === 导航栏（深色）=== */

.navbar {

  position: fixed; top: 0; left: 0; right: 0;

  z-index: 1000;

  height: var(--nav-h);

  background: rgba(10, 10, 10, 0.95);

  backdrop-filter: blur(20px) saturate(180%);

  -webkit-backdrop-filter: blur(20px) saturate(180%);

  border-bottom: 1px solid var(--border-dark);

  transition: all var(--t);

}

.navbar.scrolled { background: rgba(10,10,10,0.98); box-shadow: var(--shadow-dark); }

.nav-container {

  max-width: var(--max-w-wide);

  height: 100%;

  margin: 0 auto;

  padding: 0 32px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.nav-logo {

  display: flex; align-items: center; gap: 12px;

  color: var(--text-white); font-weight: 700; font-size: 17px;

  letter-spacing: 2px; text-transform: uppercase;

}

.nav-logo-icon {

  width: 38px; height: 38px;

  background: linear-gradient(135deg, var(--accent), var(--accent-dark));

  border-radius: var(--r-md);

  display: flex; align-items: center; justify-content: center;

  font-size: 16px; font-weight: 900; color: #fff;

}

.logo-sub { display: block; font-size: 11px; font-weight: 400; color: var(--text-muted-dark); letter-spacing: 3px; margin-top: 2px; }

.nav-menu { display: flex; gap: 8px; }



/* 导航链接列表（HTML用的 .nav-links） */

.nav-links { display: flex; list-style: none; gap: 4px; align-items: center; }

.nav-links li a {

  padding: 8px 16px;

  color: #e8e0e0;

  font-size: 15px;

  font-weight: 600;

  letter-spacing: 0.5px;

  text-decoration: none;

  position: relative;

  transition: all var(--t-fast);

  border-radius: var(--r);

  display: block;

}

.nav-links li a:hover,

.nav-links li.active a {

  color: #fff;

  background: rgba(255,255,255,0.08);

}

.nav-links li.active a::after {

  content:''; position:absolute; bottom:-2px; left:50%; transform:translateX(-50%);

  width: 20px; height: 2px; background: var(--accent); border-radius: 1px;

}

.nav-link {

  padding: 8px 16px;

  color: #e8e0e0;

  font-size: 15px; font-weight: 600;

  position: relative;

  transition: all var(--t-fast);

  border-radius: var(--r);

  letter-spacing: 0.5px;

}

.nav-link:hover,

.nav-link.active {

  color: var(--text-white);

  background: rgba(255,255,255,0.08);

}

.nav-link.active::after {

  content:''; position:absolute; bottom:-2px; left:50%; transform:translateX(-50%);

  width: 20px; height: 2px; background: var(--accent); border-radius: 1px;

}

.nav-actions { display: flex; align-items: center; gap: 12px; }



/* 编辑按钮 */

.btn-edit {

  padding: 7px 18px;

  background: transparent;

  color: var(--text-secondary-dark);

  border: 1px solid var(--border-dark-hover);

  border-radius: var(--r-md);

  font-size: 13px; font-weight: 500;

  transition: all var(--t);

}

.btn-edit:hover {

  color: var(--accent-bright);
  text-shadow: 0 0 10px rgba(196,30,58,0.3);

  border-color: var(--accent);

  background: rgba(196, 30, 58, 0.1);

}

.btn-edit.active {

  color: #fff;

  background: var(--accent);

  border-color: var(--accent);

}



/* 手机菜单按钮 */

.nav-toggle {

  display: none; flex-direction: column; gap: 5px; padding: 8px;

  cursor: pointer;

}

.nav-toggle span {

  width: 22px; height: 2px; background: var(--text-secondary-dark);

  transition: all var(--t); border-radius: 1px;

}



/* === Hero 全屏首屏区（深色 + 朱砂红）=== */

.hero {

  min-height: 100vh;

  display: flex; align-items: center; justify-content: center;

  position: relative;

  overflow: hidden;

  background: var(--dark-bg);

}

.hero-bg {

  position: absolute; inset: 0;

  background-size: cover; background-position: center;

  opacity: 0.85;

  filter: saturate(105%) contrast(105%);

  transition: all 1s var(--t-slow);

}

.hero-overlay {

  position: absolute; inset: 0;

  /* 透明遮罩 — 只保留底部一点点渐变，让背景图完全露出来 */

  background: linear-gradient(

    to bottom,

    rgba(0,0,0,0.05) 0%,

    rgba(0,0,0,0.08) 50%,

    rgba(0,0,0,0.2) 85%,

    rgba(0,0,0,0.4) 100%

  );

}

.hero-content {

  position: relative; z-index: 2;

  text-align: center;

  max-width: 800px;

  padding: 0 24px;

}

.hero-badge {

  display: inline-block;

  padding: 8px 20px;

  background: rgba(196, 30, 58, 0.12);

  border: 1px solid var(--border-accent);

  border-radius: 50px;

  font-size: 13px; font-weight: 500;

  color: var(--accent-bright);
  text-shadow: 0 0 10px rgba(196,30,58,0.3);

  letter-spacing: 3px; text-transform: uppercase;

  margin-bottom: 28px;

}

.hero-title {

  font-size: clamp(36px, 6vw, 68px);

  font-weight: 800;

  line-height: 1.15;

  color: var(--text-white);

  letter-spacing: -1px;

  margin-bottom: 24px;

}

.hero-subtitle {

  font-size: clamp(15px, 1.8vw, 19px);

  color: var(--text-secondary-dark);

  line-height: 1.75;

  max-width: 600px;

  margin: 0 auto 40px;

  text-shadow: 0 2px 4px rgba(0,0,0,0.7), 0 0 15px rgba(0,0,0,0.3);
}

  margin: 0 auto 40px;

}

.btn-group { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }



/* 按钮 */

.btn {

  display: inline-flex; align-items: center; gap: 8px;

  padding: 14px 32px;

  font-size: 15px; font-weight: 600;

  border-radius: var(--r-md);

  transition: all var(--t);

  cursor: pointer;

}

.btn-primary {

  background: var(--accent);

  color: #fff;

  box-shadow: 0 4px 20px rgba(196, 30, 58, 0.35);

}

.btn-primary:hover {

  background: var(--accent-bright);

  transform: translateY(-2px);

  box-shadow: 0 8px 30px rgba(196, 30, 58, 0.45);

}

.btn-outline {

  border: 1px solid rgba(255,255,255,0.25);

  color: var(--text-white);

  background: transparent;

}

.btn-outline:hover {

  border-color: rgba(255,255,255,0.5);

  background: rgba(255,255,255,0.08);

  transform: translateY(-2px);

}

.btn-gold {

  background: linear-gradient(135deg, var(--gold), var(--gold-light));

  color: #000;

  font-weight: 700;

}

.btn-gold:hover {

  transform: translateY(-2px);

  box-shadow: 0 8px 30px rgba(201,169,110,0.3);

}



/* === Section通用（白色背景！）=== */

.section {

  padding: 100px 0;

  position: relative;

  background: var(--light-bg);

}

.section.alt {

  background: var(--light-alt);

}

.section-header {

  text-align: center;

  margin-bottom: 64px;

}

.section-label {

  display: inline-block;

  font-size: 12px; font-weight: 600;

  color: var(--accent);

  letter-spacing: 4px; text-transform: uppercase;

  margin-bottom: 16px;

}

.section-title {

  font-size: clamp(28px, 4vw, 42px);

  font-weight: 700;

  color: var(--text-primary);

  line-height: 1.25;

  margin-bottom: 16px;

}

.section-desc {

  font-size: 16px;

  color: var(--text-secondary);

  max-width: 600px;

  margin: 0 auto;

  line-height: 1.75;

}

.text-center { text-align: center; }

.mt-20 { margin-top: 20px; }

.mb-20 { margin-bottom: 20px; }

.mb-40 { margin-bottom: 40px; }



/* === 服务卡片（浅色背景 + 细边框）=== */

.services-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 28px;

}

.service-card {

  background: var(--light-card);

  border: 1px solid var(--light-border);

  border-radius: var(--r-lg);

  padding: 40px 32px;

  transition: all var(--t);

  position: relative;

  overflow: hidden;

}

.service-card::before {

  content: ''; position: absolute;

  top: 0; left: 0; right: 0;

  height: 3px;

  background: linear-gradient(90deg, var(--accent), var(--gold));

  opacity: 0;

  transition: opacity var(--t);

}

.service-card:hover {

  border-color: var(--light-border-hover);

  transform: translateY(-6px);

  box-shadow: var(--shadow-lg);

  background: var(--light-card-hover);

}

.service-card:hover::before { opacity: 1; }

.service-icon {

  width: 60px; height: 60px;

  background: var(--accent-light);

  border-radius: var(--r-lg);

  display: flex; align-items: center; justify-content: center;

  font-size: 28px;

  margin-bottom: 24px;

}

.service-title {

  font-size: 20px; font-weight: 700;

  color: var(--text-primary);

  margin-bottom: 12px;

}

.service-desc {

  font-size: 14px; color: var(--text-secondary);

  line-height: 1.7;

  margin-bottom: 20px;

}

.service-arrow {

  font-size: 13px; font-weight: 600;

  color: var(--accent);

  display: inline-flex; align-items: center; gap: 6px;

  transition: gap var(--t);

}

.service-card:hover .service-arrow { gap: 12px; }



/* === 关于区域（浅色背景）=== */

.about-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 60px;

  align-items: center;

}

.about-image {

  border-radius: var(--r-xl);

  overflow: hidden;

  aspect-ratio: 4/3;

  background: var(--light-muted-bg);

  position: relative;

  min-height: 380px;

  box-shadow: var(--shadow-md);

}

.about-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }

.about-image:hover img { transform: scale(1.04); }

.about-label {

  font-size: 12px; font-weight: 600;

  color: var(--accent);

  letter-spacing: 4px; text-transform: uppercase;

  margin-bottom: 12px;

}

.about-text h3 {

  font-size: 30px; font-weight: 700;

  color: var(--text-primary);

  margin-bottom: 20px;

  line-height: 1.3;

}

.about-text p { color: var(--text-secondary); line-height: 1.8; margin-bottom: 16px; font-size: 15px; }

.feature-list { margin-top: 28px; }

.feature-item {

  display: flex; align-items: center; gap: 12px;

  padding: 10px 0;

  border-bottom: 1px solid var(--light-border);

  font-size: 15px; color: var(--text-secondary);

}

.feature-check {

  color: var(--accent); font-weight: 700; font-size: 16px;

  flex-shrink: 0;

}



/* === 数据展示条（浅色卡片风格）=== */

.stats-bar {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 24px;

  padding: 48px 32px;

  background: var(--light-card);

  border-radius: var(--r-xl);

  border: 1px solid var(--light-border);

  box-shadow: var(--shadow-md);

}

.stat-item { text-align: center; }

.stat-number {

  font-size: 42px; font-weight: 800;

  color: var(--accent);

  margin-bottom: 6px;

}

.stat-label { font-size: 14px; color: var(--text-muted); font-weight: 500; }



/* === CTA行动号召（深色区 — 回到玄色）=== */

.cta-section {

  padding: 90px 0;

  background: var(--dark-bg);

  position: relative;

}

.cta-section .section-title { color: var(--text-white); }

.cta-section .section-desc { color: var(--text-secondary-dark); }

.cta-section::before {

  content:''; position:absolute;

  top: 0; left: 0; right: 0; bottom: 0;

  background: radial-gradient(ellipse at center, var(--accent-subtle), transparent 70%);

  pointer-events: none;

}



/* === Footer（深色玄色）=== */

.footer {

  background: var(--dark-bg);

  border-top: 1px solid var(--border-dark);

  padding: 70px 0 30px;

}

.footer-grid {

  display: grid;

  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;

  gap: 48px;

  margin-bottom: 50px;

}

.footer-brand p {

  margin-top: 16px;

  color: #e8e0e0;

  font-size: 14px;

  line-height: 1.75;

}

.footer-col h4 {

  font-size: 14px; font-weight: 700;

  color: #ffffff;

  margin-bottom: 20px;

  text-transform: uppercase;

  letter-spacing: 2px;

}

.footer-col a {

  display: block;

  color: #e8e0e0;

  font-size: 14px;

  padding: 6px 0;

  transition: all var(--t-fast);

}

.footer-col a:hover { color: var(--accent-bright);
  text-shadow: 0 0 10px rgba(196,30,58,0.3); padding-left: 6px; }

.footer-bottom {

  display: flex; justify-content: space-between;

  align-items: center;

  padding-top: 24px;

  border-top: 1px solid var(--border-dark);

  font-size: 13px; color: #d0c8c8;

}



/* =============================================

   商城页面样式（抖音/淘宝风橱窗 — 浅色）

   ============================================= */



/* 页面标题头（深色渐变 — 保持顶部深色感） */

.page-hero {

  padding: 120px 0 60px;

  text-align: center;

  background: linear-gradient(180deg, var(--dark-bg), #1a1a1a);

  position: relative;

}

.page-hero h1 {

  font-size: clamp(28px, 4vw, 42px);

  font-weight: 700; color: var(--text-white);

  margin-bottom: 12px;

}

.page-hero p { font-size: 16px; color: var(--text-secondary-dark); }



/* ====== 商城页：精简顶部（约1/5高度）====== */

.shop-header-bar {

  background: linear-gradient(180deg, #0a0404 0%, #150808 100%);

  padding: 36px 20px 32px;

  text-align: center;

}

.shop-header-bar h1 {

  font-size: clamp(24px,3vw,34px); font-weight:700; color:#f5e8e8; margin-bottom:6px;

}

.shop-header-bar p { font-size:14px; color:rgba(220,200,200,0.6); }



/* 工具栏（一行排列） */

.shop-toolbar-wrap {

  background: #fff;

  border-bottom: 1px solid #eee;

  position: sticky; top:64px; z-index:10;

}

.shop-toolbar-inner {

  max-width:1200px; margin:0 auto; padding:12px 24px;

  display:flex; align-items:center; gap:10px; flex-wrap:wrap;

}



/* 商品管理面板（淘宝/抖音后台风格） */

.shop-panel {

  display:none;

  max-width:1200px; margin:16px auto 0;

  background:#fff;

  border:2px dashed #C41E3A;

  border-radius:var(--r-lg);

  padding:20px 24px;

  animation:slideDown 0.25s ease;

}

.shop-panel.show { display:block; }

.shop-panel-header {

  display:flex; justify-content:space-between; align-items:center;

  margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid #f0f0f0;

}

.shop-panel-header h3{ font-size:17px; font-weight:700; color:#222; margin:0; }

.shop-panel-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }

.shop-panel-tips{

  font-size:13px; color:#888; padding:10px 14px;

  background:#fefefe; border-radius:var(--r); border-left:3px solid #C41E3A;

}

  box-shadow: var(--shadow-md);

}

.shop-stat { text-align: center; }

.shop-stat-num { font-size: 26px; font-weight: 800; color: var(--accent); }

.shop-stat-lbl { font-size: 12px; color: var(--text-muted); }



/* 工具栏 */

.shop-toolbar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 28px;

  gap: 16px;

  flex-wrap: wrap;

}

.shop-search {

  display: flex; align-items: center;

  background: var(--light-bg);

  border: 1px solid var(--light-border);

  border-radius: var(--r-md);

  padding: 0 14px;

  flex: 1; max-width: 360px;

}

.shop-search input {

  background: none; border: none; outline: none;

  color: var(--text-primary); padding: 10px 10px;

  width: 100%; font-size: 14px;

}

.shop-search input::placeholder { color: var(--text-dim); }

.shop-filters { display: flex; gap: 10px; flex-wrap: wrap; }

.filter-btn {

  padding: 8px 18px;

  background: var(--light-card);

  border: 1px solid var(--light-border);

  border-radius: 50px;

  color: var(--text-secondary);

  font-size: 13px; font-weight: 500;

  transition: all var(--t-fast);

}

.filter-btn:hover,

.filter-btn.active {

  border-color: var(--accent);

  color: var(--accent);

  background: var(--accent-light);

}

.shop-action-btns { display: flex; gap: 10px; }

.btn-shop-primary {

  padding: 9px 22px;

  background: var(--accent);

  color: #fff;

  border-radius: var(--r-md);

  font-size: 13px; font-weight: 600;

  transition: all var(--t);

  display: flex; align-items: center; gap: 6px;

}

.btn-shop-primary:hover {

  background: var(--accent-bright);

  transform: translateY(-1px);

}

.btn-shop-ghost {

  padding: 9px 18px;

  background: transparent;

  border: 1px solid var(--light-border);

  border-radius: var(--r-md);

  color: var(--text-secondary);

  font-size: 13px; font-weight: 500;

  transition: all var(--t);

}

.btn-shop-ghost:hover {

  border-color: var(--text-muted);

  color: var(--text-primary);

}



/* 商品网格（白色卡片） */

.products-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: 24px;

}

.product-card {

  background: var(--light-card);

  border: 1px solid var(--light-border);

  border-radius: var(--r-lg);

  overflow: hidden;

  transition: all var(--t);

  position: relative;

}

.product-card:hover {

  border-color: var(--light-border-hover);

  transform: translateY(-6px);

  box-shadow: var(--shadow-lg);

}

.product-img-wrap {

  aspect-ratio: 1;

  overflow: hidden;

  position: relative;

  background: var(--light-muted-bg);

}

.product-img-wrap img {

  width: 100%; height: 100%;

  object-fit: cover;

  transition: transform 0.5s;

}

.product-card:hover .product-img-wrap img { transform: scale(1.06); }

/* 商品标签 */

.product-tag {

  position: absolute; top: 12px; left: 12px;

  padding: 4px 12px; border-radius: 50px;

  font-size: 11px; font-weight: 600;

  z-index: 2;

}

.tag-new { background: var(--accent); color: #fff; }

.tag-hot { background: linear-gradient(135deg, #e6a23c, #c76b00); color: #fff; }

.tag-sale { background: var(--light-muted-bg); color: var(--text-muted); }

/* 遮罩按钮 */

.product-overlay {

  position: absolute; inset: 0;

  background: rgba(0,0,0,0.45);

  display: flex; align-items: center; justify-content: center;

  gap: 12px;

  opacity: 0;

  transition: opacity var(--t);

}

.product-card:hover .product-overlay { opacity: 1; }

.overlay-btn {

  padding: 8px 18px;

  background: rgba(255,255,255,0.95);

  color: #111;

  border-radius: var(--r);

  font-size: 12px; font-weight: 600;

  transition: all var(--t-fast);

}

.overlay-btn:hover { background: #fff; transform: scale(1.05); }



/* v7.4: 编辑模式下商品删除按钮（文字版，避免emoji渲染问题） */

.prod-del-btn {

  position: absolute; top: 8px; right: 8px;

  z-index: 15;

  padding: 3px 10px;

  background: #dc3545 !important;

  color: #fff !important;

  border: none;

  border-radius: 12px;

  font-size: 11px;

  cursor: pointer;

  opacity: 0.9;

  transition: all var(--t-fast);

  box-shadow: 0 2px 6px rgba(220,53,69,0.5);

  line-height: 1.4;

  font-weight: 600;

  letter-spacing: 0.5px;

}

.prod-del-btn:hover {

  opacity: 1 !important;

  transform: scale(1.1);

  background: #c82333 !important;

}



.product-info { padding: 20px; }

.product-name {

  font-size: 16px; font-weight: 700;

  color: var(--text-primary);

  margin-bottom: 6px;

}

.product-style {

  font-size: 13px; color: var(--text-muted);

  margin-bottom: 10px;

}

.product-price-row {

  display: flex; align-items: center; justify-content: space-between;

}

.product-price {

  font-size: 20px; font-weight: 800;

  color: var(--accent);

}

.product-price-old {

  font-size: 13px; color: var(--text-dim);

  text-decoration: line-through;

  margin-left: 8px;

}

.product-contact-btn {

  padding: 6px 14px;

  background: var(--accent-light);

  color: var(--accent-bright);
  text-shadow: 0 0 10px rgba(196,30,58,0.3);

  border: 1px solid var(--border-accent);

  border-radius: var(--r);

  font-size: 12px; font-weight: 600;

  transition: all var(--t-fast);

}

.product-contact-btn:hover {

  background: var(--accent);

  color: #fff;

}

/* 下架商品 */

.product-card.offline { opacity: 0.5; }

.product-card.offline .product-img-wrap img { filter: grayscale(1); }



/* 商品管理面板 */

.shop-panel {

  display: none;

  background: var(--light-card);

  border: 1px solid var(--border-accent);

  border-radius: var(--r-lg);

  padding: 20px 24px;

  margin-bottom: 24px;

  animation: slideDown 0.3s ease;

  box-shadow: var(--shadow-sm);

}

@keyframes slideDown { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }

.shop-panel.show { display: block; }

.panel-header {

  display: flex; justify-content: space-between; align-items: center;

  margin-bottom: 16px;

}

.panel-header h3 { font-size: 16px; font-weight: 700; color: var(--text-primary); }

.panel-actions { display: flex; gap: 10px; }

.panel-btn {

  padding: 7px 16px;

  background: var(--light-muted-bg);

  border: 1px solid var(--light-border);

  border-radius: var(--r);

  color: var(--text-secondary);

  font-size: 13px;

  transition: all var(--t-fast);

}

.panel-btn:hover { border-color: var(--accent); color: var(--accent); }

.panel-btn.danger:hover { border-color: #e74c3c; color: #e74c3c; }



/* =============================================

   微喷/装裱等内页（浅色背景）

   ============================================= */



/* 内容区块 */

.content-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 48px;

  align-items: start;

}

.content-card {

  background: var(--light-card);

  border: 1px solid var(--light-border);

  border-radius: var(--r-xl);

  padding: 36px;

  transition: all var(--t);

}

.content-card:hover {

  border-color: var(--light-border-hover);

  box-shadow: var(--shadow-md);

}

.content-icon {

  font-size: 40px; margin-bottom: 16px;

}

.content-card h3 {

  font-size: 20px; font-weight: 700;

  color: var(--text-primary);

  margin-bottom: 12px;

}

.content-card p {

  font-size: 14px; color: var(--text-secondary);

  line-height: 1.75;

}



/* 步骤流程 */

.steps-list { counter-reset: step; }

.step-item {

  display: flex; gap: 24px;

  padding: 28px 0;

  border-bottom: 1px solid var(--light-border);

  counter-increment: step;

}

.step-num {

  width: 48px; height: 48px;

  background: var(--accent-light);

  border: 2px solid var(--accent);

  border-radius: 50%;

  display: flex; align-items: center; justify-content: center;

  font-size: 18px; font-weight: 800; color: var(--accent);

  flex-shrink: 0;

  position: relative;

}

.step-num::before { content: counter(step); }

.step-info h4 {

  font-size: 17px; font-weight: 700; color: var(--text-primary);

  margin-bottom: 6px;

}

.step-info p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; }



/* =============================================

   案例页面（灯箱效果 — 浅色背景）

   ============================================= */

.cases-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

}

.case-item {

  aspect-ratio: 1;

  border-radius: var(--r-lg);

  overflow: hidden;

  position: relative;

  cursor: pointer;

  background: var(--light-muted-bg);

  box-shadow: var(--shadow-sm);

  transition: all var(--t);

}

.case-item:hover {

  box-shadow: var(--shadow-lg);

  transform: translateY(-4px);

}

.case-item img {

  width: 100%; height: 100%;

  object-fit: cover;

  transition: transform 0.5s;

}

.case-item:hover img { transform: scale(1.08); }

.case-caption {

  position: absolute; bottom: 0; left: 0; right: 0;

  padding: 24px 16px 16px;

  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);

  opacity: 0;

  transform: translateY(10px);

  transition: all var(--t);

}

.case-item:hover .case-caption { opacity: 1; transform: translateY(0); }

.case-caption h4 { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 4px; }

.case-caption p { font-size: 12px; color: var(--text-secondary-dark); }



/* 灯箱 */

.lightbox {

  display: none; position: fixed; inset: 0;

  z-index: 9999;

  background: rgba(0,0,0,0.94);

  align-items: center; justify-content: center;

  animation: fadeIn 0.25s ease;

}

.lightbox.open { display: flex; }

.lightbox-img { max-width: 88vw; max-height: 85vh; border-radius: var(--r-md); object-fit: contain; }

.lightbox-close {

  position: absolute; top: 20px; right: 24px;

  font-size: 34px; color: #888;

  cursor: pointer; transition: color var(--t-fast);

  background: none; border: none; width: 44px; height: 44px;

  display: flex; align-items: center; justify-content: center;

}

.lightbox-close:hover { color: #fff; }

.lightbox-caption {

  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);

  color: var(--text-secondary-dark); font-size: 14px; text-align: center;

}



/* =============================================

   联系页面（浅色背景）

   ============================================= */

.contact-grid {

  display: grid;

  grid-template-columns: 1fr 1.3fr;

  gap: 48px;

}

.contact-cards { display: flex; flex-direction: column; gap: 16px; }

.contact-card {

  background: var(--light-card);

  border: 1px solid var(--light-border);

  border-radius: var(--r-lg);

  padding: 24px;

  transition: all var(--t);

}

.contact-card:hover {

  border-color: var(--light-border-hover);

  transform: translateX(6px);

  box-shadow: var(--shadow-md);

}

.contact-card h4 { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }

.contact-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }

.form-group { margin-bottom: 20px; }

.form-label {

  display: block;

  font-size: 13px; font-weight: 600;

  color: var(--text-secondary);

  margin-bottom: 8px;

  letter-spacing: 1px;

}

.form-input,

.form-textarea,

.form-select {

  width: 100%;

  padding: 12px 16px;

  background: var(--light-bg);

  border: 1px solid var(--light-border);

  border-radius: var(--r-md);

  color: var(--text-primary);

  font-size: 14px;

  transition: border-color var(--t-fast);

  outline: none;

}

.form-input:focus,

.form-textarea:focus,

.form-select:focus {

  border-color: var(--accent);

  box-shadow: 0 0 0 3px var(--accent-light);

}

.form-input::placeholder,

.form-textarea::placeholder { color: var(--text-dim); }

.form-textarea { resize: vertical; min-height: 120px; }

.map-container {

  border-radius: var(--r-xl);

  overflow: hidden;

  border: 1px solid var(--light-border);

  background: var(--light-muted-bg);

  height: 300px;

  display: flex; align-items: center; justify-content: center;

  color: var(--text-muted); font-size: 14px;

  box-shadow: var(--shadow-sm);

}



/* =============================================

   动画系统

   ============================================= */

.fade-in { opacity: 0; transform: translateY(24px); transition: all 0.7s var(--t-slow); }

.fade-in.visible { opacity: 1; transform: translateY(0); }

.fade-in-left { opacity: 0; transform: translateX(-30px); transition: all 0.7s var(--t-slow); }

.fade-in-left.visible { opacity: 1; transform: translateX(0); }

.fade-in-right { opacity: 0; transform: translateX(30px); transition: all 0.7s var(--t-slow); }

.fade-in-right.visible { opacity: 1; transform: translateX(0); }

.scale-in { opacity: 0; transform: scale(0.94); transition: all 0.55s var(--t-slow); }

.scale-in.visible { opacity: 1; transform: scale(1); }

.delay-1 { transition-delay: 0.1s; }

.delay-2 { transition-delay: 0.2s; }

.delay-3 { transition-delay: 0.3s; }

.delay-4 { transition-delay: 0.4s; }

.delay-5 { transition-delay: 0.5s; }



@keyframes fadeIn { from{opacity:0} to{opacity:1} }



/* =============================================

   编辑模式相关样式

   ============================================= */

.editable {

  outline: none; border: 2px solid transparent;

  border-radius: 3px; transition: all var(--t-fast);

  position: relative;

}

/* ========== 编辑模式 — 超强视觉提示（不可能看不到！）========== */

.edit-mode .editable {

  cursor: pointer !important;

  position: relative;

  transition: all 0.2s ease;

  outline: 2px dashed rgba(196,30,58,0.5) !important;  /* 始终有红色虚线框！*/

  outline-offset: 3px;

  border-radius: 4px;

  animation: editablePulse 2s infinite;

}

@keyframes editablePulse {

  0%, 100% { outline-color: rgba(196,30,58,0.35); }

  50% { outline-color: rgba(196,30,58,0.7); }

}

/* 编辑图标 — 始终可见！*/

.edit-mode .editable::after {

  content: '✏️';

  position: absolute;

  top: -10px; right: -8px;

  font-size: 14px;

  opacity: 1 !important;  /* 始终显示！！之前是opacity:0只有hover才显示 */

  transform: scale(1) translateY(0);

  transition: all 0.2s ease;

  pointer-events: none;

  z-index: 10;

  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));

}

/* 图片和背景图编辑标记 */

.edit-mode img[data-edit-id],

.edit-mode [data-bg-image] {

  position: relative;

  cursor: pointer !important;

}

.edit-mode img[data-edit-id]::after,

.edit-mode [data-bg-image]::after {

  content: '📷 可点击替换';

  position: absolute;

  bottom: 8px; left: 50%;

  transform: translateX(-50%);

  font-size: 11px;

  background: rgba(196,30,58,0.85);

  color: #fff;

  padding: 3px 12px;

  border-radius: 999px;

  opacity: 1 !important;  /* 始终显示！*/

  transition: all 0.2s ease;

  pointer-events: none;

  z-index: 20;

  white-space: nowrap;

  letter-spacing: 0.5px;

}

/* 悬停时显示 */

.edit-mode .editable:hover {

  outline: 2px dashed var(--accent) !important;

  outline-offset: 2px;

  background: rgba(196,30,58,0.06) !important;

  border-radius: 4px;

}

.edit-mode .editable:hover::after {

  opacity: 1;

  transform: scale(1) translateY(0);

}

.edit-mode img[data-edit-id]:hover::before,

.edit-mode [data-bg-image]:hover::before {

  opacity: 1;

  transform: translate(-50%,-50%) scale(1);

}



/* 编辑按钮加大加亮 */

/* 编辑模式下：所有遮挡层全部禁用点击（关键bug修复！） */

.edit-mode .hero-overlay,

.edit-mode .hero-bg,

.edit-mode .hero-overlay-dark,

.edit-mode .svc-img-tag,

.edit-mode .case-overlay,

.edit-mode .cases-preview-overlay,

.edit-mode [class*="overlay"]:not(.modal-overlay):not(.product-overlay),

.edit-mode [class*="mask"]:not(.modal-mask) {

  pointer-events: none !important;

}



/* v7.3: 编辑模式下商品卡片overlay始终可见+可点击 */

.edit-mode .product-card .product-overlay {

  opacity: 1 !important;

  pointer-events: auto !important;

}

.edit-mode .prod-del-btn {

  display: block !important;

}

/* 所有editable元素强制可点+提升层级 */

.edit-mode .editable,

.edit-mode img,

.edit-mode [data-bg-image] {

  position: relative;

  z-index: 20 !important;

  pointer-events: auto !important;

}

/* 编辑模式下：让所有文字元素都显示可点击光标 */

.edit-mode h1,.edit-mode h2,.edit-mode h3,.edit-mode h4,

.edit-mode p,.edit-mode span:not(.editable::after),.edit-mode li,

.edit-mode label,.edit-mode strong,.edit-mode em {

  cursor: pointer !important;

}

.edit-btn {
  z-index: 99999 !important;

  position: fixed;

  bottom: 24px; right: 24px;

  z-index: 99999;

  width: auto; min-width: 120px;

  height: 48px;

  padding: 0 20px;

  background: linear-gradient(135deg, var(--accent), #a01830);

  color: #fff;

  border: 2px solid rgba(255,255,255,0.3);

  border-radius: 999px;

  font-size: 15px;

  font-weight: 700;

  cursor: pointer;

  box-shadow: 0 4px 20px rgba(196,30,58,0.4), 0 2px 8px rgba(0,0,0,0.3);

  transition: all 0.3s ease;

  display: flex; align-items: center; justify-content: center;

  gap: 6px;

  letter-spacing: 0.5px;

}

.edit-btn:hover {

  transform: translateY(-2px) scale(1.05);

  box-shadow: 0 8px 30px rgba(196,30,58,0.5), 0 4px 12px rgba(0,0,0,0.3);

}

.edit-btn.active {

  background: linear-gradient(135deg, #16a34a, #15803d);

  box-shadow: 0 4px 20px rgba(22,163,74,0.4), 0 2px 8px rgba(0,0,0,0.3);

  animation: pulse-green 2s infinite;

}

@keyframes pulse-green {

  0%,100% { box-shadow: 0 4px 20px rgba(22,163,74,0.4); }

  50% { box-shadow: 0 4px 30px rgba(22,163,74,0.7), 0 0 60px rgba(22,163,74,0.2); }

}



/* 弹窗遮罩 */

.modal-mask {

  display: none; position: fixed; inset: 0;

  z-index: 9000; background: rgba(0,0,0,0.6);

  backdrop-filter: blur(4px);

  align-items: center; justify-content: center;

  animation: fadeIn 0.2s ease;

}

.modal-mask.open { display: flex; }



/* 文字编辑弹窗（超大超亮！） */

.text-editor-modal {

  background: #1a1a2e;

  border: 3px solid #C41E3A;

  border-radius: 16px;

  padding: 36px;

  width: 94%; max-width: 620px;

  max-height: 88vh; overflow-y: auto;

  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 40px rgba(196,30,58,0.25);

  animation: modalPopIn 0.25s ease;

}

@keyframes modalPopIn {

  from { opacity:0; transform:scale(0.92) translateY(15px); }

  to { opacity:1; transform:scale(1) translateY(0); }

}

.text-editor-modal h3 {

  font-size: 22px; font-weight: 800; color: #fff;

  margin-bottom: 24px; display: flex; align-items: center; gap: 10px;

  text-shadow: 0 2px 8px rgba(196,30,58,0.4);

}

.editor-preview-area {

  background: var(--dark-input);

  border: 1px solid var(--border-dark);

  border-radius: var(--r-md);

  padding: 20px;

  margin-bottom: 20px;

  min-height: 56px;

}

.editor-preview-text { font-size: 16px; word-break: break-word; color: var(--text-primary-dark); }

.editor-field-group { margin-bottom: 16px; }

.editor-label {

  display: block; font-size: 12px; font-weight: 600;

  color: var(--text-muted-dark); margin-bottom: 6px;

  letter-spacing: 1px;

}

.editor-textarea {

  width: 100%; min-height: 80px;

  padding: 12px; background: var(--dark-input);

  border: 1px solid var(--border-dark); border-radius: var(--r-md);

  color: var(--text-primary-dark); font-size: 14px;

  resize: vertical; outline: none;

}

.editor-textarea:focus { border-color: var(--accent); }

.editor-row { display: flex; gap: 16px; margin-bottom: 16px; }

.editor-half { flex: 1; }

.editor-select,

.editor-input {

  width: 100%; padding: 10px 12px;

  background: var(--dark-input); border: 1px solid var(--border-dark);

  border-radius: var(--r); color: var(--text-primary-dark);

  font-size: 14px; outline: none;

}

.color-picker-wrapper { display: flex; align-items: center; gap: 10px; }

.editor-color-picker {

  width: 42px; height: 42px; border: none; border-radius: var(--r); cursor: pointer;

  background: none;

}

.editor-color-hex {

  flex: 1; padding: 8px 12px;

  background: var(--dark-input); border: 1px solid var(--border-dark);

  border-radius: var(--r); color: var(--text-primary-dark);

  font-size: 14px; outline: none; font-family: monospace;

}

.quick-colors { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.quick-color-btn {

  width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent;

  cursor: pointer; transition: transform var(--t-fast);

}

.quick-color-btn:hover { transform: scale(1.2); border-color: #fff; }

.editor-action-buttons {

  display: flex; gap: 12px; justify-content: flex-end;

  margin-top: 24px; padding-top: 16px;

  border-top: 1px solid var(--border-dark);

}

.btn-editor-cancel {

  padding: 12px 26px; background: #2a2a3e;

  border: 2px solid #444; border-radius: 10px;

  color: #ccc; font-size: 15px; font-weight: 600;

  cursor: pointer; transition: all var(--t);

}

.btn-editor-cancel:hover { border-color: #888; color: #fff; }

.btn-editor-confirm {

  padding: 12px 28px; background: linear-gradient(135deg, #C41E3A, #E63950);

  border: none; border-radius: 10px;

  color: #fff; font-size: 16px; font-weight: 800;

  cursor: pointer; transition: all var(--t);

  box-shadow: 0 4px 16px rgba(196,30,58,0.4);

  letter-spacing: 1px;

}

.btn-editor-confirm:hover { 

  background: linear-gradient(135deg, #E63950, #ff4d6d); 

  transform: translateY(-2px);

  box-shadow: 0 8px 24px rgba(196,30,58,0.5);

}



/* 图片上传弹窗 */

.image-modal {

  background: var(--dark-elevated);

  border: 1px solid var(--border-dark-hover);

  border-radius: var(--r-xl);

  padding: 28px;

  width: 92%; max-width: 520px;

  box-shadow: var(--shadow-dark);

}

.image-modal h3 { font-size: 18px; font-weight: 700; color: var(--text-white); margin-bottom: 16px; }

.img-upload-zone {

  border: 2px dashed var(--border-dark-hover);

  border-radius: var(--r-lg);

  padding: 40px; text-align: center;

  cursor: pointer; transition: all var(--t);

  background: var(--dark-input);

}

.img-upload-zone:hover { border-color: var(--accent); background: rgba(196,30,58,0.06); }

.upload-icon { font-size: 40px; margin-bottom: 10px; }

.upload-text { font-size: 14px; color: var(--text-secondary-dark); }

.upload-hint { font-size: 12px; color: var(--text-muted-dark); margin-top: 6px; }

.preview-container {

  margin: 16px 0; text-align: center;

}

.preview-container img { max-height: 250px; margin: 0 auto; border-radius: var(--r-md); }

.img-modal-buttons { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }

.btn-img-cancel {

  padding: 9px 22px; background: var(--dark-card);

  border: 1px solid var(--border-dark); border-radius: var(--r-md);

  color: var(--text-secondary-dark); font-size: 14px;

  cursor: pointer;

}

.btn-img-confirm {

  padding: 9px 22px; background: var(--accent);

  border: none; border-radius: var(--r-md);

  color: #fff; font-size: 14px; font-weight: 600;

  cursor: pointer;

}



/* 商品编辑弹窗（大弹窗 — 保持深色） */

.product-modal {

  display: none; position: fixed; inset: 0;

  z-index: 9000; background: rgba(0,0,0,0.85);

  backdrop-filter: blur(6px);

  align-items: flex-start; justify-content: center;

  overflow-y: auto; padding: 40px 16px;

  animation: fadeIn 0.25s ease;

}

.product-modal.open { display: flex; }

.product-modal-inner {

  background: var(--dark-elevated);

  border: 1px solid var(--border-dark-hover);

  border-radius: var(--r-xl);

  width: 100%; max-width: 720px;

  padding: 32px;

  box-shadow: var(--shadow-dark);

}

.product-modal-header {

  display: flex; justify-content: space-between; align-items: center;

  margin-bottom: 24px; padding-bottom: 16px;

  border-bottom: 1px solid var(--border-dark);

}

.product-modal-header h3 { font-size: 20px; font-weight: 700; color: var(--text-white); }

.modal-close-btn {

  width: 36px; height: 36px; border-radius: 50%;

  background: var(--dark-card); border: 1px solid var(--border-dark);

  color: var(--text-muted-dark); font-size: 20px;

  display: flex; align-items: center; justify-content: center;

  cursor: pointer; transition: all var(--t);

}

.modal-close-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.prod-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.prod-form-grid .full-width { grid-column: 1/-1; }

.prod-form-group { margin-bottom: 0; }

.prod-images-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-dark); }

.prod-images-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; }

.prod-img-slot {

  aspect-ratio: 1; border-radius: var(--r-md);

  background: var(--dark-input); border: 1px dashed var(--border-dark);

  display: flex; align-items: center; justify-content: center;

  cursor: pointer; overflow: hidden; position: relative;

  transition: border-color var(--t);

}

.prod-img-slot:hover { border-color: var(--accent); }

.prod-img-slot img { width: 100%; height: 100%; object-fit: cover; }

.prod-img-slot .remove-x {

  position: absolute; top: 4px; right: 4px;

  width: 20px; height: 20px; border-radius: 50%;

  background: rgba(220,53,69,0.9); color: #fff;

  font-size: 12px; display: none; align-items: center; justify-content: center;

  cursor: pointer; z-index: 2;

}

.prod-img-slot.has-img:hover .remove-x { display: flex; }

.prod-modal-actions {

  display: flex; justify-content: flex-end; gap: 12px;

  margin-top: 28px; padding-top: 20px;

  border-top: 1px solid var(--border-dark);

}



/* =============================================

   v5.0新增：真实图片内容区样式

   ============================================= */



/* --- 关于区图片布局 --- */

.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }

.about-grid.reverse-grid { direction: rtl; }

.about-grid.reverse-grid > * { direction: ltr; }

.about-images { display: flex; flex-direction: column; gap: 16px; }

.about-img-main img, .about-img-sub img {

    width: 100%; border-radius: var(--r-lg); object-fit: cover;

    box-shadow: var(--shadow-md); transition: transform var(--t);

}

.about-img-main img:hover, .about-img-sub img:hover { transform: scale(1.02); }

.about-img-sub { margin-top: -40px; margin-left: 40px; max-width: 70%; }

.about-text .section-title.left-align { text-align: left; }

.about-content p { line-height: 1.8; color: var(--text-secondary); font-size: 15px; margin-bottom: 12px; }

.about-list { list-style: none; padding: 0; margin: 16px 0; }

.about-list li { padding: 6px 0; font-size: 14.5px; color: var(--text-secondary); }



/* --- 认证证书网格 --- */

.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.cert-card {

    background: var(--light-card); border-radius: var(--r-lg);

    overflow: hidden; box-shadow: var(--shadow-sm);

    transition: all var(--t); text-align: center;

}

.cert-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }

.cert-card img { width: 100%; height: 220px; object-fit: contain; background: #fff; padding: 16px; }

.cert-card p { padding: 16px; font-size: 13px; color: var(--text-secondary); }



/* --- 门店展示网格 --- */

.store-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.store-item {

    background: var(--light-card); border-radius: var(--r-lg);

    overflow: hidden; box-shadow: var(--shadow-sm);

    transition: all var(--t);

}

.store-item:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }

.store-item img { width: 100%; height: 200px; object-fit: cover; }

.store-item p { padding: 14px; text-align: center; font-size: 14px; color: var(--text-secondary); }



/* --- 画廊图片带说明文字 --- */

.gallery-item { position: relative; overflow: hidden; border-radius: var(--r-lg); cursor: pointer; }

.gallery-item img { width: 100%; height: 240px; object-fit: cover; transition: transform 0.5s ease; }

.gallery-item:hover img { transform: scale(1.06); }

.gallery-caption {

    position: absolute; bottom: 0; left: 0; right: 0;

    background: linear-gradient(transparent, rgba(0,0,0,0.75));

    color: #fff; padding: 20px 14px 12px; font-size: 13px;

    opacity: 0; transition: opacity 0.3s;

}

.gallery-item:hover .gallery-caption { opacity: 1; }

.gallery-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.gallery-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.gallery-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }



/* --- 服务卡片带图片 --- */

.service-card-img {

    height: 160px; border-radius: var(--r-md) var(--r-md) 0 0;

    overflow: hidden; background: var(--light-muted-bg);

}

.service-card-img img { width: 100%; height: 100%; object-fit: cover; }



/* --- 价格标签 --- */

.price-tag {

    display: inline-block; margin-top: 10px;

    padding: 4px 14px; background: rgba(196,30,58,0.08);

    color: var(--accent); border-radius: 20px;

    font-weight: 700; font-size: 14px;

}



/* --- 价格表 --- */

.price-table-wrap { max-width: 800px; margin: 0 auto; }

.price-table {

    width: 100%; border-collapse: collapse;

    background: var(--light-card); border-radius: var(--r-lg);

    overflow: hidden; box-shadow: var(--shadow-sm);

}

.price-table th {

    background: var(--accent); color: #fff; padding: 14px 18px;

    text-align: left; font-weight: 600; font-size: 14px;

}

.price-table td {

    padding: 12px 18px; border-bottom: 1px solid var(--light-border);

    font-size: 14px; color: var(--text-secondary);

}

.price-table tr:last-child td { border-bottom: none; }

.price-table tr:hover td { background: var(--light-muted-bg); }



/* --- 扫描对比图 --- */

.scan-compare { text-align: center; }



/* --- 页面Hero深色遮罩 --- */

.hero-overlay-dark {

  position: absolute; inset: 0;

  background: linear-gradient(135deg, rgba(0,0,0,0.08), rgba(196,30,58,0.06));

}



/* --- 滚动提示箭头 --- */

.scroll-hint {

    position: absolute; bottom: 32px; left: 50%;

    transform: translateX(-50%);

    color: rgba(255,255,255,0.5); font-size: 13px;

    animation: bounce 2s infinite;

}



@keyframes bounce {

    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }

    40% { transform: translateX(-50%) translateY(-10px); }

    60% { transform: translateX(-50%) translateY(-5px); }

}



/* --- section-label 小标签 --- */

.section-label {

    display: inline-block; padding: 4px 14px;

    background: rgba(196,30,58,0.08); color: var(--accent);

    border-radius: 20px; font-size: 12px; font-weight: 600;

    letter-spacing: 2px; text-transform: uppercase;

    margin-bottom: 12px;

}



/* --- btn-link 文字链接按钮 --- */

.btn-link {

    display: inline-block; color: var(--accent);

    font-weight: 600; font-size: 14px;

    text-decoration: none; transition: all var(--t-fast);

    margin-top: 8px;

}

.btn-link:hover { color: var(--accent-bright);
  text-shadow: 0 0 10px rgba(196,30,58,0.3); letter-spacing: 1px; }



/* =============================================

   首页大气版 v6.0 — Grand Styles

   ============================================= */



/* === 容器更宽 === */

.container-narrow { max-width: 1100px; margin: 0 auto; padding: 0 32px; }



/* === 居中标题组 === */

.section-header-center { text-align: center; margin-bottom: 56px; }

.section-title-xl { font-size: 40px !important; letter-spacing: -0.5px; line-height: 1.2; }



/* === Hero 大气版（带背景图）=== */

.hero-grand {

    height: 92vh;

    min-height: 620px;

    position: relative;

    display: flex; align-items: center;

}

.hero-content-grand {

    max-width: 700px;

    text-align: left;

}

.hero-title-grand {

    font-size: 54px !important;

    line-height: 1.15 !important;

    letter-spacing: -1px;

    margin-bottom: 24px !important;

}

.hero-subtitle-grand {

    font-size: 18px !important;

    opacity: 1 !important;

    max-width: 520px;

    line-height: 1.7;

    margin-bottom: 36px !important;

}

.btn-glass {

    background: rgba(255,255,255,0.08) !important;

    border: 1px solid rgba(255,255,255,0.2) !important;

    backdrop-filter: blur(8px);

}



/* === 左右交错大业务卡 === */

.svc-feature {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;

    margin-bottom: 80px;

}

.svc-feature:last-child { margin-bottom: 0; }

.svc-feature-reverse { direction: rtl; }

.svc-feature-reverse > * { direction: ltr; }



.svc-feature-img {

    position: relative;

    border-radius: var(--r-xl);

    overflow: hidden;

    box-shadow: var(--shadow-lg);

}

.svc-feature-img img {

    width: 100%;

    height: 380px;

    object-fit: cover;

    display: block;

    transition: transform 0.6s ease;

}

.svc-feature-img:hover img { transform: scale(1.03); }

.svc-img-tag {

    position: absolute;

    top: 20px; left: 20px;

    background: var(--accent);

    color: #fff;

    font-size: 28px;

    font-weight: 900;

    padding: 10px 22px;

    border-radius: var(--r-lg);

    box-shadow: var(--shadow-md);

}



.svc-feature-text { padding: 12px 0; }

.svc-number {

    display: inline-block;

    font-size: 14px;

    font-weight: 800;

    color: var(--accent);

    letter-spacing: 3px;

    margin-bottom: 12px;

}

.svc-feature-text h3 {

    font-size: 30px;

    font-weight: 800;

    color: var(--text-primary);

    margin-bottom: 16px;

    line-height: 1.3;

}

.svc-feature-text > p {

    font-size: 15.5px;

    color: var(--text-secondary);

    line-height: 1.75;

    margin-bottom: 18px;

}

.svc-checks { list-style: none; padding: 0; margin: 0 0 24px; }

.svc-checks li {

    padding: 7px 0;

    font-size: 14.5px;

    color: var(--text-secondary);

    position: relative;

    padding-left: 24px;

}

.svc-checks li::before {

    content: '✓';

    position: absolute; left: 0;

    color: var(--accent);

    font-weight: 700;

}



/* === 关于我们大气版 === */

.about-section-grand { padding: 100px 0 !important; }

.about-grid-grand { gap: 64px; }

.about-images-grand { position: relative; }

.about-img-grand-main img {

    height: 480px !important;

    object-fit: cover !important;

    border-radius: var(--r-xl) !important;

}

.about-float-card {

    position: absolute;

    bottom: -30px; right: -30px;

    background: var(--accent);

    color: #fff;

    padding: 20px 30px;

    border-radius: var(--r-xl);

    text-align: center;

    box-shadow: var(--shadow-lg);

}

.float-num {

    display: block;

    font-size: 42px;

    font-weight: 900;

    line-height: 1;

}

.float-unit {

    font-size: 20px;

    font-weight: 600;

}

.float-label {

    display: block;

    font-size: 13px;

    opacity: 0.85;

    margin-top: 4px;

}

.about-text-grand .section-title { font-size: 34px; line-height: 1.25; }

.about-content p { font-size: 15px; color: var(--text-secondary); line-height: 1.85; margin-bottom: 14px; }



/* 核心优势卡片（只3个） */

.about-highlights { display: flex; flex-direction: column; gap: 16px; margin: 28px 0 32px; }

.highlight-item {

    display: flex; align-items: flex-start; gap: 16px;

    padding: 18px 22px;

    background: var(--light-bg);

    border-radius: var(--r-lg);

    border-left: 3px solid var(--accent);

    transition: all var(--t);

}

.highlight-item:hover { box-shadow: var(--shadow-md); transform: translateX(6px); }

.highlight-icon { font-size: 26px; flex-shrink: 0; }

.highlight-item strong { display: block; font-size: 15px; color: var(--text-primary); margin-bottom: 2px; }

.highlight-item span { font-size: 13.5px; color: var(--text-secondary); }



/* === 认证+设备合并紧凑网格 === */

.cert-compact-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

}

.cert-compact-card {

    background: var(--light-card);

    border-radius: var(--r-lg);

    overflow: hidden;

    box-shadow: var(--shadow-sm);

    transition: all var(--t);

    text-align: center;

}

.cert-compact-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.cert-compact-img img {

    width: 100%; height: 150px; object-fit: contain;

    background: #fff; padding: 12px;

}

.cert-compact-name {

    padding: 12px; font-size: 13px; font-weight: 600;

    color: var(--text-primary); line-height: 1.5;

}

.cert-compact-name small { font-weight: 400; color: var(--text-dim); }



/* === 案例预览横幅 === */

.cases-preview-section { padding: 90px 0 !important; }

.cases-preview-grid {

    display: grid;

    grid-template-columns: 1.4fr 1fr 1fr;

    grid-template-rows: 220px 220px;

    gap: 16px;

}

.cases-preview-item {

    position: relative; overflow: hidden;

    border-radius: var(--r-lg);

    cursor: pointer;

}

.cases-preview-wide {

    grid-row: span 2;

}

.cases-preview-item img {

    width: 100%; height: 100%;

    object-fit: cover;

    transition: transform 0.6s ease;

}

.cases-preview-item:hover img { transform: scale(1.05); }

.cases-preview-overlay {

    position: absolute;

    bottom: 0; left: 0; right: 0;

    background: linear-gradient(transparent, rgba(0,0,0,0.82));

    color: #fff;

    padding: 24px 18px 16px;

    opacity: 0;

    transition: all 0.35s ease;

}

.cases-preview-item:hover .cases-preview-overlay { opacity: 1; }

.cases-preview-overlay h4 { font-size: 17px; font-weight: 700; margin-bottom: 4px; }

.cases-preview-overlay span { font-size: 13px; opacity: 0.78; }



/* === 数据条震撼版 === */

.stats-bar-grand {

    background: linear-gradient(135deg, #0a0404 0%, #1a0808 50%, #0a0404 100%);

    padding: 70px 0 !important;

    position: relative;

    overflow: hidden;

}

.stats-bar-grand::before {

    content: '';

    position: absolute;

    top: -50%; right: -20%;

    width: 500px; height: 500px;

    background: radial-gradient(circle, rgba(196,30,58,0.12) 0%, transparent 70%);

    pointer-events: none;

}

.stats-bar-label {

    text-align: center;

    color: rgba(255,255,255,0.45);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 4px;

    text-transform: uppercase;

    margin-bottom: 36px;

}

.stats-grid-grand {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 48px;

}

.stat-divider {

    width: 1px;

    height: 52px;

    background: rgba(255,255,255,0.15);

}

.stat-item-grand { text-align: center; min-width: 140px; }

.stat-number-grand {

    font-size: 52px !important;

    font-weight: 900 !important;

    color: #fff !important;

    line-height: 1 !important;

}

.stat-unit-grand {

    font-size: 26px !important;

    font-weight: 700 !important;

    color: var(--accent) !important;

}

.stat-label-grand {

    font-size: 14px !important;

    color: rgba(255,255,255,0.55) !important;

    margin-top: 8px !important;

}



/* === CTA 大气版 === */

.cta-section-grand {

    padding: 90px 0 !important;

    background: linear-gradient(135deg, rgba(196,30,58,0.95), rgba(139,0,0,0.98));

}

.cta-content-grand { max-width: 650px; margin: 0 auto; text-align: center; }

.cta-content-grand h2 { font-size: 36px; line-height: 1.3; margin-bottom: 18px; }

.cta-content-grand > p { font-size: 17px; opacity: 0.9; line-height: 1.7; margin-bottom: 32px; }



.text-center { text-align: center; }





/* =============================================

   响应式设计

   ============================================= */

@media (max-width: 1024px) {

  .services-grid { grid-template-columns: repeat(2, 1fr); }

  .stats-bar { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 32px 24px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  .content-grid { grid-template-columns: 1fr; }

  .about-grid { grid-template-columns: 1fr; gap: 36px; }

  .contact-grid { grid-template-columns: 1fr; }

  .cases-grid { grid-template-columns: repeat(2, 1fr); }

  .products-grid { grid-template-columns: repeat(2, 1fr); }

  .cert-grid { grid-template-columns: repeat(2, 1fr); }

  .store-grid { grid-template-columns: repeat(2, 1fr); }

  .gallery-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }

  .nav-menu { display: none; }

  .nav-toggle { display: flex; }

  

  /* 大气版响应式 */

  .svc-feature { grid-template-columns: 1fr !important; gap: 32px; }

  .svc-feature-reverse { direction: ltr; }

  .svc-feature-img img { height: 300px; }

  .about-grid-grand { gap: 40px; }

  .about-img-grand-main img { height: 360px !important; }

  .hero-title-grand { font-size: 38px !important; }

  .section-title-xl { font-size: 32px !important; }

  .stat-number-grand { font-size: 40px !important; }

  .cert-compact-grid { grid-template-columns: repeat(2, 1fr); }

  .cases-preview-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }

  .cases-preview-wide { grid-row: span 1; }

}

@media (max-width: 640px) {

  .section { padding: 64px 0; }

  .services-grid { grid-template-columns: 1fr; }

  .stats-bar { grid-template-columns: 1fr 1fr; }

  .footer-grid { grid-template-columns: 1fr; }

  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

  .cases-grid { grid-template-columns: 1fr; }

  .products-grid { grid-template-columns: 1fr; }

  .hero-title { font-size: 32px !important; }

  .btn-group { flex-direction: column; align-items: center; }

  .shop-stats-bar { flex-wrap: wrap; gap: 20px; }

  .shop-toolbar { flex-direction: column; align-items: stretch; }

  .shop-search { max-width: none; }

  .prod-form-grid { grid-template-columns: 1fr; }

  .prod-images-grid { grid-template-columns: repeat(3, 1fr); }

  .container-wide { padding: 0 16px; }

  .container { padding: 0 16px; }



  /* 大气版手机适配 */

  .container-narrow { padding: 0 16px; }

  .hero-grand { height: auto !important; min-height: 520px !important; padding: 100px 0 60px; }

  .hero-title-grand { font-size: 32px !important; }

  .hero-subtitle-grand { font-size: 15px !important; }

  .svc-feature-img img { height: 240px; }

  .svc-feature-text h3 { font-size: 24px; }

  .section-title-xl { font-size: 26px !important; }

  .about-float-card { position: relative; bottom: 0; right: 0; margin-top: 16px; display: inline-block; }

  .stats-grid-grand { flex-wrap: wrap; gap: 28px; }

  .stat-divider { display: none; }

  .stat-item-grand { min-width: 120px; }

  .stat-number-grand { font-size: 36px !important; }

  .cert-compact-grid { grid-template-columns: repeat(2, 1fr); }

  .cases-preview-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }

  .cases-preview-wide { grid-row: span 1; }

  .cta-content-grand h2 { font-size: 26px; }

}


/* =============================================
   商品详情查看弹窗（客户视角）v9.0
   电商风格：左图右文 + 缩略图切换 + 响应式
   ============================================= */

.product-viewer {
  display: none; position: fixed; inset: 0;
  z-index: 9999; background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  align-items: center; justify-content: center;
  overflow-y: auto; padding: 20px;
  animation: fadeIn 0.25s ease;
}

.product-viewer.open { display: flex; }

.product-viewer-inner {
  background: #fff;
  border-radius: 16px;
  width: 100%; max-width: 960px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  position: relative;
  animation: slideUp 0.3s ease;
  overflow: hidden;
}

@keyframes slideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* 关闭按钮 */
.viewer-close-btn {
  position: absolute; top: 12px; right: 12px; z-index: 10;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,0.5); color: #fff; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s;
  border: none; backdrop-filter: blur(4px);
}
.viewer-close-btn:hover { background: #C41E3A; transform: rotate(90deg); }

/* 弹窗主体：左右布局 */
.viewer-body {
  display: flex; min-height: 500px;
}

/* ===== 左侧：图片区域 ===== */
.viewer-gallery {
  width: 55%; min-width: 280px; background: #f5f5f5;
  display: flex; flex-direction: column;
}

.viewer-main-img {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 20px; position: relative;
}
.viewer-main-img img {
  max-width: 100%; max-height: 420px;
  object-fit: contain; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transition: opacity 0.2s ease;
}
/* 左右箭头提示 */
.viewer-gallery::before,
.viewer-gallery::after {
  content: '‹'; '›';
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 36px; color: rgba(255,255,255,0.7);
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  pointer-events: none; z-index: 2;
  opacity: 0; transition: opacity 0.2s;
}
.viewer-gallery::before { left: 10px; content: '‹'; }
.viewer-gallery::after { right: 10px; content: '›'; }
.viewer-gallery:hover::before,
.viewer-gallery:hover::after { opacity: 1; }

/* 缩略图列表 */
.viewer-thumbs {
  display: flex; gap: 8px; padding: 12px 16px;
  background: #fff; border-top: 1px solid #eee;
  overflow-x: auto;
}
.viewer-thumbs::-webkit-scrollbar { height: 4px; }
.viewer-thumbs::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }

.viewer-thumb {
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 6px; overflow: hidden;
  border: 2px solid transparent; cursor: pointer;
  transition: all 0.2s; position: relative;
}
.viewer-thumb:hover { border-color: #ccc; transform: translateY(-2px); }
.viewer-thumb.active { border-color: #C41E3A; box-shadow: 0 2px 8px rgba(196,30,58,0.3); }
.viewer-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* 图片计数 */
.viewer-counter {
  text-align: center; padding: 6px; font-size: 12px; color: #999;
  background: #fafafa; letter-spacing: 1px;
}

/* ===== 右侧：商品信息 ===== */
.viewer-info {
  width: 45%; padding: 28px 24px;
  display: flex; flex-direction: column;
  border-left: 1px solid #eee;
}

.viewer-name {
  font-size: 22px; font-weight: 700; color: #1a1a1a;
  margin: 0 0 8px; line-height: 1.35;
}

.viewer-style {
  font-size: 13px; color: #888; margin: 0 0 16px;
  padding: 4px 10px; background: #f7f7f7; border-radius: 4px;
  display: inline-block;
}

.viewer-price-row {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px;
  padding: 14px 0; border-top: 1px dashed #eee; border-bottom: 1px dashed #eee;
}

.viewer-price {
  font-size: 28px; font-weight: 800; color: #C41E3A;
}
.viewer-price-old {
  font-size: 15px; color: #bbb; text-decoration: line-through;
}

.viewer-meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.viewer-meta span {
  font-size: 13px; color: #666; background: #fafafa;
  padding: 4px 10px; border-radius: 4px;
}

.viewer-desc {
  font-size: 14px; color: #555; line-height: 1.8;
  margin: 0 0 24px; flex: 1;
  padding: 14px; background: #fafafa; border-radius: 8px;
  max-height: 150px; overflow-y: auto;
}

.viewer-actions {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 16px;
}
.viewer-btn-call {
  background: linear-gradient(135deg, #C41E3A, #DC143C) !important;
  color: #fff !important; font-size: 17px !important;
  font-weight: 700 !important; letter-spacing: 2px !important;
  height: 48px !important; border: none !important;
  border-radius: 8px !important; cursor: pointer !important;
  text-align: center; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; box-shadow: 0 4px 12px rgba(196,30,58,0.35);
}
.viewer-btn-call:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(196,30,58,0.45) !important;
}

.viewer-tips {
  padding: 14px; background: linear-gradient(135deg, #fff8f5, #fff);
  border: 1px dashed #C41E3A; border-radius: 8px;
}
.viewer-tips p {
  font-size: 12px; color: #888; margin: 4px 0;
  line-height: 1.6;
}

/* ===== 手机端响应式 ===== */
@media (max-width: 768px) {
  .product-viewer-inner {
    max-width: 100%; border-radius: 12px; margin: 10px;
  }
  .viewer-body { flex-direction: column; }
  .viewer-gallery { width: 100%; min-width: unset; }
  .viewer-info { width: 100%; padding: 20px 16px; border-left: none; border-top: 1px solid #eee; }
  .viewer-main-img img { max-height: 300px; }
  .viewer-thumb { width: 48px; height: 48px; }
  .viewer-price { font-size: 24px; }
  .viewer-name { font-size: 19px; }
  .viewer-desc { max-height: 120px; }
}