/* ==========================
   1. 全局浏览器样式重置（精准控制，不影响logo）
   ========================== */
* {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-sizing: border-box !important;
  font-size: 100% !important;
  font: inherit !important;
  vertical-align: baseline !important;
}
/* 只对背景图/产品图等生效，排除logo，移除轮播slide相关 */
.full-width-banner img, .product-img-container img, .company-gallery img, .detail-img img {
  border: none !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}
html, body {
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

/* ==========================
   2. 全局基础配置（变量/重置）
   ========================== */
:root {
  /* 品牌色 */
  --primary-color: #0066cc;
  --primary-dark: #004499;
  --danger-color: #e63946;
  --text-main: #333;
  --text-secondary: #666;
  --text-light: #ccc;
  --bg-main: #f8f9fa;
  --bg-white: #ffffff;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.1);
  /* 响应式断点 */
  --breakpoint-sm: 375px;
  --breakpoint-md: 480px;
  --breakpoint-lg: 768px;
  --breakpoint-xl: 1200px;
}

/* 基础样式（统一规范） */
body {
  color: var(--text-main);
  line-height: 1.6;
  background-color: var(--bg-main);
  -webkit-font-smoothing: antialiased; /* 文字抗锯齿 */
}

.container {
  max-width: var(--breakpoint-xl);
  margin: 0 auto !important;
  padding: 0 20px !important;
  width: 100%; /* 解决小屏宽度溢出 */
}

a {
  text-decoration: none !important;
  color: var(--primary-color) !important;
  transition: color 0.3s ease !important; /* 统一过渡 */
}

a:hover {
  color: var(--primary-dark) !important;
}

/* 按钮样式（统一化） */
.btn, .btn-back {
  display: inline-block !important;
  padding: 10px 20px !important;
  background-color: var(--primary-color) !important;
  color: white !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
  text-align: center !important;
}

.btn:hover, .btn-back:hover {
  background-color: var(--primary-dark) !important;
  color: white !important;
}

/* ==========================
   3. 导航栏样式（核心优化：还原logo尺寸）
   ========================== */
.navbar {
  background-color: var(--bg-white) !important;
  box-shadow: var(--shadow-sm) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  margin: 0 !important; /* 消除导航栏默认边距 */
  padding: 0 !important; /* 消除导航栏默认内边距 */
}

.navbar .container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 15px 20px !important;
}

/* 汉堡按钮（优化交互+动画） */
.hamburger {
  display: none !important;
  flex-direction: column !important;
  gap: 4px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 1000 !important;
  padding: 5px !important; /* 增大点击区域 */
}

.hamburger span {
  width: 25px !important;
  height: 3px !important;
  background: var(--text-main) !important;
  border-radius: 3px !important;
  transition: all 0.3s ease !important;
  transform-origin: center !important;
}

/* 汉堡按钮激活态（变×） */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px) !important;
}

.hamburger.active span:nth-child(2) {
  opacity: 0 !important;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px) !important;
}

/* Logo+店招（核心适配：精准控制logo尺寸） */
.logo {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important; /* 防止挤压 */
}

/* 关键修复：单独控制logo图片尺寸，覆盖全局重置 */
.logo img {
  height: 50px !important; /* 固定logo高度 */
  width: auto !important;   /* 宽度自动按比例，不拉伸 */
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important; /* 防止logo被压缩 */
}

.store-name {
  font-size: 26px !important;
  font-weight: bold !important;
  color: var(--primary-color) !important;
  font-family: "Arial Black", "Microsoft YaHei", sans-serif !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.2) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex-shrink: 1 !important;
}

/* 主导航 */
.nav-main {
  display: flex !important;
  list-style: none !important;
  flex-shrink: 0 !important;
}

.nav-main li {
  margin: 0 15px !important;
  position: relative !important;
}

.nav-main a {
  color: var(--text-main) !important;
  font-weight: 500 !important;
  padding: 8px 0 !important;
  display: inline-block !important; /* 增大点击区域 */
}

.nav-main a:hover {
  color: var(--primary-color) !important;
}

/* 下拉菜单 */
.dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background-color: var(--bg-white) !important;
  box-shadow: var(--shadow-md) !important;
  width: 200px !important;
  list-style: none !important;
  display: none !important;
  z-index: 999 !important;
}

.dropdown li {
  padding: 10px 15px !important;
  margin: 0 !important;
}

.nav-main li:hover .dropdown {
  display: block !important;
}

/* ==========================
   4. 通用模块样式
   ========================== */
/* 页脚样式（优化结构） */
.footer {
  background-color: var(--text-main) !important;
  color: white !important;
  padding: 40px 0 20px !important;
  margin-top: 50px !important;
}

.footer .container {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
}

.footer h3 {
  margin-bottom: 20px !important;
  font-size: 18px !important;
  position: relative !important;
  padding-bottom: 10px !important;
}

/* 页脚标题下划线 */
.footer h3::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 40px !important;
  height: 2px !important;
  background-color: var(--primary-color) !important;
}

.footer-links {
  list-style: none !important;
}

.footer-links li {
  margin-bottom: 10px !important;
}

.footer-links a {
  color: var(--text-light) !important;
}

.footer-links a:hover {
  color: white !important;
}

.copyright {
  text-align: center !important;
  padding-top: 20px !important;
  margin-top: 20px !important;
  border-top: 1px solid #444 !important;
  font-size: 14px !important;
  color: var(--text-light) !important;
}

/* 全屏大背景图片样式（核心：强制比例缩放，适配单张海报） */
.full-width-banner {
  width: 100% !important;
  margin: 0 !important; /* 消除所有边距 */
  padding: 0 !important; /* 消除所有内边距 */
  /* 移动端内核兼容 */
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  box-sizing: border-box !important;
}

/* 产品网格+卡片（统一规范） */
.featured-products {
  padding: 50px 0 !important;
  margin: 0 !important; /* 消除产品模块默认边距 */
}

.featured-products h2, .category-header h2 {
  text-align: center !important;
  margin-bottom: 40px !important;
  font-size: 32px !important;
  color: var(--text-main) !important;
  position: relative !important;
  padding-bottom: 15px !important;
}

/* 标题下划线 */
.featured-products h2::after, .category-header h2::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 80px !important;
  height: 3px !important;
  background-color: var(--primary-color) !important;
}

.product-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  padding: 20px 0 !important;
  width: 100% !important;
}

.product-card {
  height: 450px !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--bg-white) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  min-height: 450px !important;
}

.product-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-md) !important; /* 悬浮增强阴影 */
}

/* 产品图片容器（统一优先级） */
.product-img-container {
  flex: 1 !important;
  width: 100% !important;
  height: 280px !important;
  overflow: hidden !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background: var(--bg-white) !important;
  padding: 15px !important;
  border-radius: 4px !important;
  margin-bottom: 15px !important;
}

/* 产品图片链接交互 */
.product-card .img-link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  text-decoration: none !important;
}

.product-card .img-link img {
  transition: transform 0.3s ease !important;
}

.product-card .img-link:hover img {
  transform: scale(1.05) !important;
}

.product-card img {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* 产品文字内容 */
.product-card-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 10px !important;
}

.product-card-content h3 {
  font-size: 22px !important;
  font-weight: bold !important;
  margin-bottom: 10px !important;
}

.product-card-content p {
  font-size: 16px !important;
  color: var(--text-secondary) !important;
  margin-bottom: 15px !important;
}

.product-price {
  font-size: 20px !important;
  font-weight: bold !important;
  color: var(--danger-color) !important;
}

/* 产品按钮样式 */
.product-card-content .btn {
  width: 80% !important;
  margin: 10px auto 0 !important;
}

/* ==========================
   5. 页面专属样式
   ========================== */
/* 公司信息页 */
.company-info {
  padding: 50px 0 !important;
  background-color: var(--bg-white) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-sm) !important;
  margin-top: 30px !important;
}

.company-info h2 {
  margin-bottom: 30px !important;
  font-size: 28px !important;
  color: var(--text-main) !important;
}

.company-info p {
  margin-bottom: 20px !important;
  line-height: 1.8 !important;
}

.company-gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 20px !important;
  margin-top: 30px !important;
}

.company-gallery img:hover {
  transform: scale(1.03) !important; /* 相册图片悬浮放大 */
}

/* 联系我们页 */
.contact-form {
  padding: 50px 0 !important;
}

.contact-form h2 {
  margin-bottom: 30px !important;
  font-size: 28px !important;
  color: var(--text-main) !important;
}

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

.form-group label {
  display: block !important;
  margin-bottom: 8px !important;
  font-weight: 500 !important;
}

.form-group input,
.form-group textarea {
  width: 100% !important;
  padding: 12px !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  font-size: 16px !important;
  transition: border-color 0.3s ease !important;
}

/* 输入框聚焦样式 */
.form-group input:focus,
.form-group textarea:focus {
  outline: none !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1) !important;
}

.form-group textarea {
  height: 200px !important;
  resize: vertical !important;
}

.contact-details {
  background-color: var(--bg-white) !important;
  padding: 30px !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-sm) !important;
  margin-top: 30px !important;
}

.contact-details h3 {
  margin-bottom: 20px !important;
  font-size: 20px !important;
}

.contact-details p {
  margin-bottom: 10px !important;
}

/* 产品详情页 */
.product-detail {
  padding: 30px 0 !important;
}

.detail-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 30px !important;
  align-items: center !important;
}

.detail-img {
  width: 100% !important;
  padding: 20px !important;
  background: var(--bg-white) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-sm) !important;
}

.detail-info h1 {
  font-size: 28px !important;
  margin-bottom: 15px !important;
  color: var(--text-main) !important;
}

.detail-price {
  font-size: 24px !important;
  font-weight: bold !important;
  color: var(--danger-color) !important;
  margin-bottom: 20px !important;
}

.detail-desc h3, .detail-specs h3 {
  font-size: 20px !important;
  margin-bottom: 10px !important;
  color: var(--text-main) !important;
  border-bottom: 1px solid #eee !important;
  padding-bottom: 8px !important;
}

.detail-specs ul {
  list-style: disc !important;
  padding-left: 20px !important;
}

.detail-specs li {
  margin-bottom: 8px !important;
  color: var(--text-secondary) !important;
}

.btn-back {
  margin-top: 20px !important;
}

/* ==========================
   6. 移动端浏览器内核兼容（仅保留背景图）
   ========================== */
.full-width-banner img {
  -webkit-transform: none !important;
  -moz-transform: none !important;
  transform: none !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  line-height: 0 !important;
  vertical-align: top !important;
}

/* ==========================
   7. 响应式适配（全端背景图比例统一）
   ========================== */
/* 平板/大屏手机（768px以下） */
@media (max-width: 768px) {
  /* 导航栏适配 */
  .navbar .container {
    flex-direction: row !important;
    align-items: center !important;
    padding: 10px 20px !important;
  }

  .hamburger {
    display: flex !important;
  }

  .nav-main {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--bg-white) !important;
    flex-direction: column !important;
    padding: 20px 0 !important;
    margin-top: 0 !important;
    box-shadow: var(--shadow-md) !important;
    display: none !important;
    z-index: 999 !important;
  }

  .nav-main.active {
    display: flex !important;
  }

  .nav-main li {
    margin: 0 !important;
    padding: 0 20px !important;
  }

  .nav-main a {
    display: block !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }

  .dropdown {
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
    padding-left: 20px !important;
    display: none !important;
  }

  .dropdown li {
    padding: 8px 0 !important;
  }

  /* 店招文字适配 */
  .store-name {
    font-size: 14px !important;
    max-width: 120px !important;
    letter-spacing: -0.5px !important;
  }

  /* 手机端logo尺寸适配 */
  .logo img {
    height: 40px !important; /* 手机端缩小logo */
    width: auto !important;
  }

  /* 页脚适配 */
  .footer .container {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .footer {
    padding: 30px 0 20px !important;
  }

  /* 产品网格适配 */
  .product-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  /* 产品卡片适配 */
  .product-card {
    height: 380px !important;
    min-height: 380px !important;
    padding: 15px !important;
  }

  .product-img-container {
    height: 200px !important;
  }

  .product-card-content h3 {
    font-size: 18px !important;
  }

  .product-card-content p {
    font-size: 14px !important;
  }

  .product-price {
    font-size: 18px !important;
  }

  /* 公司信息页适配 */
  .company-info {
    padding: 30px 0 !important;
  }

  .company-info h2 {
    font-size: 24px !important;
  }

  .company-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .company-gallery img {
    height: 120px !important;
  }

  /* 联系我们页适配 */
  .contact-form {
    padding: 30px 0 !important;
  }

  .contact-form h2 {
    font-size: 24px !important;
  }

  .form-group input,
  .form-group textarea {
    padding: 10px !important;
    font-size: 14px !important;
  }

  .form-group textarea {
    height: 150px !important;
  }

  .contact-details {
    padding: 20px !important;
  }

  /* 产品详情页适配 */
  .detail-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .detail-img {
    padding: 15px !important;
  }

  .detail-info h1 {
    font-size: 22px !important;
  }

  .detail-price {
    font-size: 20px !important;
  }

  .detail-desc h3, .detail-specs h3 {
    font-size: 18px !important;
  }
}

/* 小屏手机（480px以下） */
@media (max-width: 480px) {
  .store-name {
    font-size: 12px !important;
    max-width: 100px !important;
    letter-spacing: -1px !important;
  }

  .product-card {
    height: 350px !important;
    min-height: 350px !important;
  }

  .product-img-container {
    height: 180px !important;
  }

  .company-gallery {
    grid-template-columns: 1fr !important;
  }

  /* 产品详情页超小屏适配 */
  .detail-info h1 {
    font-size: 20px !important;
  }

  .detail-price {
    font-size: 18px !important;
  }

  .btn-back {
    width: 100% !important;
  }
}

/* 极小屏手机（375px以下） */
@media (max-width: 375px) {
  .store-name {
    max-width: 80px !important;
    font-size: 11px !important;
  }

  .logo img {
    height: 35px !important; /* 极小屏进一步缩小logo */
    width: auto !important;
  }

  .navbar .container {
    padding: 8px 15px !important;
  }
}