/* ======================================
   全局重置 & 基础样式 - 无删减 修复溢出
======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', 'Tahoma', sans-serif;
}
html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  font-family: "Helvetica Neue", Tahoma, sans-serif;
  background: linear-gradient(135deg,#faf6f3,#f3efe9,#ede6df);
  color: #222;
  line-height: 1.8;
  direction: rtl;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  width: 100%;
  padding-top: 60px;
}
.container {
  width: 94%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 10px;
}
a {
  text-decoration: none;
  color: inherit;
}
ul {
  list-style: none;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
button {
  cursor: pointer;
  border: none;
  background: transparent;
}

/* ======================================
   顶部通知栏 - 完整保留 功能不变
======================================== */
.top-notification {
  background: linear-gradient(135deg, #222, #444);
  color: #fff;
  padding: 10px 0;
  text-align: center;
  position: relative;
  z-index: 1001;
}
.top-notification .container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.close-notification {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}

/* ======================================
   按钮基础样式 - 完整保留 功能不变
======================================== */
.btn-primary, .btn-secondary {
  padding:14px 36px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:all 0.3s ease;
  display:inline-block;
  font-size: 1rem;
}
.btn-primary {
  background:#222;
  color:#fff;
  font-weight:500;
}
.btn-primary:hover {
  background:#444;
  transform:scale(1.03);
}
.btn-secondary {
  background:#ddd;
  color:#222;
}
.btn-secondary:hover{background:#bbb;}

/* 轮播按钮动画 - 完整保留 */
.hero-slide-btn {
  margin-top: 40px;
  padding: 18px 50px;
  font-size: 1.2rem;
  background: linear-gradient(135deg, #000, #333);
  color: #fff;
  border-radius: 50px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  font-weight: 600;
  display: inline-block;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(50px);
  animation: slideInUp 2.5s cubic-bezier(0.22,1,0.36,1) 0.5s forwards;
}
.hero-slide-btn:hover {
  transform: translateY(-5px);
  background: linear-gradient(135deg, #222, #555);
  box-shadow: 0 12px 24 rgba(0,0,0,0.3);
}

/* ======================================
   头部导航 - 已改为 固定悬浮置顶
======================================== */
.header {
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(8px);
  padding: clamp(8px, 2vw, 12px) 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  box-shadow:0 1px 10px rgba(0,0,0,0.08);
}
.header-inner {
  display:flex;
  align-items:center;
  justify-content: space-between;
  width:100%;
  gap: 8px;
  flex-direction: row !important;
  flex-wrap: nowrap;
}

/* 导航菜单 - 完整保留 */
.nav {
  flex: 0 0 auto;
  display:flex;
  justify-content:flex-start;
}
.nav ul {
  display:flex;
  gap: clamp(18px, 3vw, 32px);
  flex-wrap: nowrap;
}
.nav a {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color:#222;
  transition:color 0.3s;
  padding:5px 0;
  position: relative;
  white-space: nowrap;
}
.nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 2px;
  background: #222;
  transition: width 0.3s ease;
}
.nav a:hover::after {
  width: 100%;
}
.nav-home {font-weight: bold;}

/* Logo - 修复挤压 完整保留 */
.logo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  font-weight:700;
  color:#222;
  min-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-logo {
  height: clamp(30px, 6vw, 40px);
  width: auto;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}

/* 右侧操作按钮 - 购物车徽章定位修复 */
.header-actions {
  flex: 0 0 auto;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap: 8px;
}
.cart-btn, .hamburger-btn, .search-btn {
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  width: clamp(34px, 8vw, 42px);
  height: clamp(34px, 8vw, 42px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
  position: relative;
}
.cart-btn:hover, .hamburger-btn:hover, .search-btn:hover {
  background-color: rgba(0,0,0,0.05);
}
.cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #e74c3c;
  color: #fff;
  font-size: 0.7rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  line-height: 1;
  z-index: 10;
}
.hamburger-btn{display:none;}

/* 移动端菜单 - 完整保留 功能不变 */
.mobile-menu {
  display:none;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:rgba(255,255,255,0.98);
  box-shadow:0 5px 15px rgba(0,0,0,0.1);
  padding: 15px;
  z-index:998;
}
.mobile-menu.active{display:block;}
.mobile-menu ul {
  display:flex;
  flex-direction:column;
  gap: 15px;
  text-align:center;
}
.mobile-menu a {
  font-size: clamp(1.1rem, 4vw, 1.3rem);
  color:#222;
  display:block;
  padding:8px 0;
}

/* ======================================
   搜索弹窗 - 完整保留 功能不变
======================================== */
.search-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255,255,255,0.98);
  z-index: 1002;
  padding: 20px 0;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}
.search-modal.active{transform: translateY(0);}
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
}
.search-box input {
  flex: 1;
  padding: 12px 15px;
  font-size: 1rem;
  border: 2px solid #ddd;
  border-radius: 50px;
  direction: rtl;
}
.search-submit, .close-search {
  background: #222;
  color: #fff;
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}
.close-search{background: #e74c3c;}
.search-results {
  max-height: 300px;
  overflow-y: auto;
}

/* ======================================
   轮播样式 - 手机端全屏填满 无留白
======================================== */
.hero{width:100%;}
.carousel-container {
  position:relative;
  width:100%;
  height: 95vh;
  min-height: 700px;
  overflow:hidden;
  background:#f0eae5;
}
.carousel-slide {
  position:absolute;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity 1.2s ease;
  will-change: opacity;  /* 性能优化：提示浏览器提前准备 */
}
.carousel-slide.active{opacity:1;}
.slide-text {
  font-size: clamp(1.5rem, 5vw, 3.5rem);
  font-weight:800;
  color:#fff;
  letter-spacing:2px;
  text-shadow:0 4px 20px rgba(0,0,0,0.5);
  transform:translateX(-200px);
  opacity:0;
  animation:slideInLeft 2.5s cubic-bezier(0.22,1,0.36,1) forwards;
  text-align:center;
}
.slide-subtitle {
  font-size: clamp(0.9rem, 3vw, 1.4rem);
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  margin-top: 10px;
  opacity: 0;
  transform: translateX(200px);
  animation: slideInRight 2.5s cubic-bezier(0.22,1,0.36,1) 0.3s forwards;
}
.hero-content {
  text-align:center;
  padding:15px;
  z-index:10;
}
.carousel-btn {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.25);
  color:#fff;
  border:none;
  width: clamp(38px, 8vw, 50px);
  height: clamp(38px, 8vw, 50px);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  cursor:pointer;
  border-radius:50%;
  z-index:10;
  transition:background 0.3s;
}
.carousel-btn:hover{background:rgba(0,0,0,0.4);}
.prev-slide{right: clamp(15px, 3vw, 25px);}
.next-slide{left: clamp(15px, 3vw, 25px);}
.carousel-indicators {
  position:absolute;
  bottom: clamp(15px, 4vw, 30px);
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap: clamp(8px, 2vw, 15px);
}
.indicator {
  width: clamp(10px, 2vw, 16px);
  height: clamp(10px, 2vw, 16px);
  background:rgba(255,255,255,0.4);
  cursor:pointer;
  border-radius:50%;
  transition:all 0.3s;
}
.indicator.active {
  background:#fff;
  width: clamp(20px, 4vw, 30px);
}

/* ======================================
   动画关键帧 - 完整保留 无删减
======================================== */
@keyframes slideInLeft{to{transform:translateX(0);opacity:1;}}
@keyframes slideInRight{to{transform:translateX(0);opacity:1;}}
@keyframes slideInUp {to {transform: translateY(0);opacity: 1;}}
@keyframes fadeInUp{from{opacity: 0;transform: translateY(30px);}to{opacity: 1;transform: translateY(0);}}

/* ======================================
   特色分类 - 完整保留 功能不变
======================================== */
.categories-section{padding: 50px 0;background: #ffffff;}
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 15px;
}
.category-card {
  text-align: center;
  padding: 25px 15px;
  background: #f8f5f2;
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.category-card:hover{transform: translateY(-5px);box-shadow: 0 8px 20px rgba(0,0,0,0.1);}
.category-icon {
  width: clamp(50px, 8vw, 70px);
  height: clamp(50px, 8vw, 70px);
  margin: 0 auto 15px;
  background: linear-gradient(135deg, #222, #444);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  transition: transform 0.3s ease;
}
.category-card:hover .category-icon{transform: scale(1.1);}
.category-card h3{font-size: clamp(1rem, 2.5vw, 1.3rem);margin-bottom: 8px;}
.category-card p{color: #666;font-size: 0.9rem;}

/* ======================================
   商品区域 - 彻底修复按钮错位 + 统一布局
======================================== */
.shop{padding:50px 0;background:#f8f5f2;width:100%;}
.section-title {
  text-align:center;
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  margin-bottom: 30px;
  font-weight:600;
  color:#222;
}
.filter-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
  padding: 15px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.filter-sort {
  display: flex;
  align-items: center;
  gap: 8px;
}
.filter-sort select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  font-size: 0.95rem;
}

/* 商品网格：固定布局，无变动 */
.products-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 15px;
  width:100%;
  padding:10px 0;
  align-items: stretch;
}

/* 商品卡片：核心修复 - 高度统一 + 按钮底部对齐 */
.product-card {
  background:#ffffff;
  border: 1px solid #e8e0d8;
  border-radius: 16px;
  box-shadow:0 4px 12px rgba(0,0,0,0.06);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  width:100%;
  height: 100%;
  position: relative;
  contain: content;      /* 性能优化：限制重绘范围 */
  will-change: transform; /* 性能优化：提示浏览器 */
}
.product-card:hover{transform:translateY(-5px);box-shadow: 0 8px 20px rgba(0,0,0,0.1);}

/* 商品图片：固定比例，不拉伸 */
.product-img {
  width:100%;
  aspect-ratio: 1/1;
  object-fit:contain;
  padding: 12px;
  background:#f5f1ed;
  transition: transform 0.5s ease;
}
.product-card:hover .product-img{transform: scale(1.03);}

/* 商品信息：弹性布局，撑满剩余空间 */
.product-info {
  padding: 18px 15px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap: 6px;
  flex: 1;
}
.product-name{font-size: clamp(0.95rem, 3vw, 1.1rem);color:#222;line-height:1.4;min-height: 2.8em;}
.product-price{font-size: clamp(1.1rem, 3vw, 1.3rem);font-weight:600;color:#444;margin-bottom: 8px;}

/* 商品按钮：彻底修复错位，固定底部对齐 */
.view-detail-btn {
  width: 90%;
  min-height: 38px;
  margin: auto auto 10px;
  background-color: #4a4a4a;
  color: #ffffff;
  border: none;
  border-radius: 20px;
  padding: 9px 0;
  font-size: clamp(0.9rem, 2vw, 0.95rem);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  display: block;
}
.view-detail-btn:hover {
  background-color: #333333;
  transform: scale(1.03);
}

/* ======================================
   特色商品轮播 - 修复布局，确保功能正常
======================================== */
.featured-section{
  padding: 50px 0;
  background: linear-gradient(135deg, #222 0%, #444 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.featured-section .section-title{color: #fff;}

/* 轮播容器：固定高度，确保内容可见 */
.featured-slider{
  position: relative;
  overflow: hidden;
  height: clamp(400px, 60vh, 500px);
}

/* 轮播项：基础布局 */
.featured-slide{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5%;
}
.featured-slide.active{opacity: 1;}

/* 商品内容：水平布局，图片居右，文字居左 */
.featured-product{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1100px;
  gap: 30px;
}

/* 商品图片：居右显示，固定大小 */
.featured-img{
  order: 2;
  width: clamp(200px, 35vw, 320px);
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  flex-shrink: 0;
}

/* 商品文字：居左显示，占满剩余空间 */
.featured-info{
  order: 1;
  flex: 1;
  min-width: 280px;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.featured-info h3{
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  line-height: 1.4;
  margin: 0;
}
.featured-info p{
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.8;
  opacity: 0.95;
  margin: 0;
}
.featured-price{
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: bold;
  margin: 0;
}

/* 购买按钮：固定样式，显示正常 */
.featured-btn {
  display: inline-block;
  background: #111;
  color: #fff;
  padding: 14px 35px;
  border-radius: 8px;
  font-size: 1rem;
  transition: background 0.3s ease;
  margin-top: 10px;
  white-space: nowrap;
}
.featured-btn:hover {
  background: #333;
}

/* 轮播控制按钮 */
.featured-controls{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 15px;
}
.featured-prev, .featured-next{
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}
.featured-prev:hover, .featured-next:hover{background: rgba(255,255,255,0.4);}

/* ======================================
   服务区域 - 完整保留 无删减
======================================== */
.services-section {padding: 50px 0;background: #ffffff;width:100%;}
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 15px;
  width:100%;
}
.service-card {
  background: #f8f5f2;
  padding: 25px 15px;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
  position: relative;
  width:100%;
  contain: content;      /* 性能优化 */
  will-change: transform;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #222, #555);
  border-radius: 12px 12px 0 0;
}
.service-card:hover {transform: translateY(-5px);box-shadow: 0 10px 20px rgba(0,0,0,0.1);}
.service-icon {
  width: clamp(50px, 8vw, 60px);
  height: clamp(50px, 8vw, 60px);
  margin: 0 auto 15px;
  background: linear-gradient(135deg, #222, #444);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
}
.service-card h3 {font-size: clamp(1rem, 2.5vw, 1.3rem);margin-bottom: 10px;color: #222;}
.service-card p {color: #666;font-size: 0.9rem;line-height:1.5;}

/* ======================================
   客户评价 - 完整保留 无删减
======================================== */
.testimonials-section{padding: 50px 0;background: #f8f5f2;}
.testimonials-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 15px;
}
.testimonial-card{
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
  contain: content;      /* 性能优化 */
  will-change: transform;
}
.testimonial-card:hover{transform: translateY(-3px);box-shadow: 0 8px 20px rgba(0,0,0,0.1);}
.testimonial-content{margin-bottom: 15px;}
.testimonial-content p{font-size: 0.95rem;line-height: 1.6;color: #555;font-style: italic;}
.testimonial-author{display: flex;align-items: center;gap: 12px;}
.author-avatar{
  width: clamp(40px, 8vw, 45px);
  height: clamp(40px, 8vw, 45px);
  background: linear-gradient(135deg, #222, #444);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.author-info h4{font-size: 1rem;margin-bottom: 5px;color: #222;}
.stars{color: #f39c12;font-size: 0.8rem;}

/* ======================================
   关于我们 - 完整保留 统计/功能不变
======================================== */
.about-section {padding: 50px 0;background: #f3efe9;text-align: center;width:100%;}
.about-content {
  max-width: 800px;
  margin: 0 auto;
  background: rgba(255,255,255,0.9);
  padding: 30px 20px;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  width:100%;
}
.about-content p {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  line-height: 1.8;
  color: #444;
  text-align: right;
  margin-bottom: 30px;
}
.about-stats{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 15px;
}
.stat-item{text-align: center;}
.stat-number{
  display: block;
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: bold;
  color: #222;
  margin-bottom: 8px;
}
.stat-item p{font-size: 0.9rem;color: #666;margin: 0;}

/* ======================================
   常见问题 - 完整保留 折叠功能不变
======================================== */
.faq-section{padding: 50px 0;background: #fff;}
.faq-container{max-width: 700px;margin: 0 auto;}
.faq-item{margin-bottom: 12px;border: 1px solid #eee;border-radius: 8px;overflow: hidden; contain: content; will-change: transform;}
.faq-question{
  width: 100%;
  padding: 15px;
  background: #f8f5f2;
  border: none;
  text-align: right;
  font-size: 1rem;
  font-weight: 600;
  color: #222;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.3s ease;
}
.faq-question:hover{background: #eee;}
.faq-question i{transition: transform 0.3s ease;}
.faq-question.active i{transform: rotate(180deg);}
.faq-answer{
  padding: 0 15px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-answer.active{padding: 15px;max-height: 200px;}
.faq-answer p{color: #555;line-height: 1.6;}

/* ======================================
   关注我们 - 完整保留 社交链接不变
======================================== */
.follow-section {padding: 50px 0;background: linear-gradient(135deg, #222 0%, #444 100%);color: #fff;text-align: center;width:100%;}
.follow-section .section-title {color: #fff;}
.social-links {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 30px 0;
  flex-wrap:wrap;
}
.social-links a {
  width: clamp(40px, 10vw, 50px);
  height: clamp(40px, 10vw, 50px);
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  transition: all 0.3s ease;
  color: #fff;
}
.social-links a:hover {background: #fff;color: #222;transform: scale(1.05);}

/* ======================================
   商品/购物车/订单模态框 - 100%功能保留
======================================== */
.modal-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:1000;
  padding:15px;
  overflow-y:auto;
}
.modal{
  background:#fff;
  width:100%;
  max-width:1000px;
  max-height:95vh;
  overflow-y:auto;
  position:relative;
  padding: 30px 20px;
  border-radius:0;
  box-shadow:0 10px 30px rgba(0,0,0,0.2);
}
.close-modal{
  position:absolute;
  top:15px;
  right:15px;
  font-size:2rem;
  cursor:pointer;
  color:#000;
  background:#fff;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  box-shadow:0 0 10px rgba(0,0,0,0.1);
  z-index:10;
}
.modal-layout{
  display:flex;
  gap: 20px;
  align-items:flex-start;
  flex-direction:row-reverse;
  flex-wrap:wrap;
}
.modal-image-section{flex:1;min-width:280px;}
.main-image-wrapper{position:relative;width:100%;}
#main-product-img{width:100%;max-width:500px;height:auto;background:#f5f1ed;display:block;}
.zoom-btn,.arrow-btn{border:none;cursor:pointer;z-index:5;}
.zoom-btn{position:absolute;top:15px;left:15px;width:45px;height:45px;background:#fff;font-size:1.2rem;box-shadow:0 2px 10px rgba(0,0,0,0.1);}

/* 🔥 修复 RTL 导致左右按钮反了！固定位置不再错乱 */
.arrow-btn{
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:40px !important;
  height:40px !important;
  background:rgba(0,0,0,0.3) !important;
  color:#fff !important;
  font-size:1.2rem !important;
  border-radius:50% !important;
  z-index:10 !important;
}
.prev-btn{
  left: 15px !important;       /* 👈 左边 */
  right: auto !important;
}
.next-btn{
  right: 15px !important;      /* 👈 右边 */
  left: auto !important;
}

.modal-info-section{flex:1;min-width:280px;text-align:right;}
.modal-info-section h3{font-size: clamp(1.3rem, 3vw, 2rem);margin-bottom:12px;color:#222;line-height:1.3;}
.modal-price{font-size: clamp(1.3rem, 3vw, 1.6rem);margin:12px 0;color:#333;font-weight:600;}
.modal-description{color:#555;font-size: 1rem;margin-bottom:25px;line-height:1.6;text-align:right;}
.form-group{margin-bottom:20px;width:100%;}
.form-group label{font-size: 1rem;margin-bottom:8px;display:block;color:#222;}
.form-group select,.form-group input,.form-group textarea{
  width:100%;
  padding:10px;
  border:1px solid #ddd;
  font-size: 1rem;
  background:#fafafa;
  direction:rtl;
  font-family: Tahoma, Arial, sans-serif;
}
.form-group textarea{min-height:80px;resize:vertical;}
.quantity-selector{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:0;
  margin-bottom:25px;
  direction:ltr;
  width:100%;
}
.quantity-selector button{
  width:40px;
  height:40px;
  border:1px solid #ddd;
  background:#fff;
  font-size:1.2rem;
  cursor:pointer;
}
.quantity-selector input{
  width:60px;
  height:40px;
  text-align:center;
  border:1px solid #ddd;
  border-left:none;
  border-right:none;
  direction:ltr;
}
.btn-add-to-cart{
  width:100%;
  padding:12px;
  background:#222;
  color:#fff;
  border:none;
  font-size:1rem;
  cursor:pointer;
  margin-bottom:20px;
  transition:background 0.3s;
}
.btn-add-to-cart:hover{background:#444;}

/* 图片放大功能 - 完整保留 */
.zoom-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.9);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:2000;
  padding:15px;
}
.zoom-overlay img{max-width:95%;max-height:95%;object-fit:contain;background:#fff;}
.close-zoom{
  position:absolute;
  top:20px;
  right:25px;
  font-size:2.5rem;
  color:#fff;
  cursor:pointer;
  z-index:20;
}

/* 购物车模态框 - 样式修复 确保正常显示 */
.cart-modal {max-width: 600px !important;padding: 25px 20px;width:100%;}
#cart-items {margin: 15px 0;max-height: 350px;overflow-y: auto;width:100%;}
.cart-item {
  display: flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 8px;
  gap: 15px;
  flex-wrap:wrap;
  width:100%;
}
.cart-item-img {width: 65px;height: 65px;object-fit: cover;border-radius: 4px;background:#f5f1ed;flex-shrink:0;}
.cart-item-info {flex: 1;text-align: right;font-size: 0.95rem;color:#222;}
.cart-item-price {font-weight: 60;font-size: 1rem;white-space: nowrap;color:#222;flex-shrink:0;}
.cart-total {font-size: 1.2rem;font-weight: 600;margin: 15px 0;text-align: right;color:#222;}

/* 订单模态框 - 完整保留 */
.order-modal{max-width:550px;text-align:right;width:100%;}
.order-buttons{display:flex;gap:15px;margin-top:20px;justify-content:flex-start;flex-wrap:wrap;}

/* ======================================
   回到顶部按钮 - 完整保留 功能不变
======================================== */
.back-to-top{
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #222, #444);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 999;
}
.back-to-top.visible{opacity: 1;visibility: visible;}
.back-to-top:hover{transform: translateY(-3px);box-shadow: 0 8px 20px rgba(0,0,0,0.25);}

/* ======================================
   页脚 - 完整保留 无删减
======================================== */
.footer{
  background:#222;
  color:#fff;
  padding:50px 0 20px;
  text-align:center;
  width:100%;
}
.footer-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
  text-align: right;
}
.footer-col h3{font-size: clamp(1.1rem, 3vw, 1.3rem);margin-bottom: 15px;}
.footer-col p{color: #ccc;line-height: 1.6;margin-bottom: 15px;}
.footer-col ul{list-style: none;}
.footer-col ul li{margin-bottom: 8px;}
.footer-col ul li a{color: #ccc;transition: color 0.3s ease;}
.footer-col ul li a:hover{color: #fff;}
.footer-col ul li i{margin-left: 8px;}
.footer-bottom{border-top: 1px solid #444;padding-top: 15px;color: #ccc;font-size: 0.9rem;}
.footer-logo {height: 28px;width: auto;object-fit: contain;margin-bottom: 10px;border-radius: 4px;}

/* ======================================
   响应式适配 - 专业级手机端优化
======================================== */
@media(max-width:768px){
  .nav{display:none;}
  .hamburger-btn{display:flex;}
  
  .products-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .carousel-container{height:70vh;min-height:500px;}
  .section-title{font-size:1.5rem;}
  
  .featured-slider{height:450px;}
  .featured-product{flex-direction:column;gap:15px;}
  .featured-img{width:200px;}
  .featured-info{text-align:center;align-items:center;}

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

  /* ========== 手机商品弹窗 专业优化 ========== */
  .modal {
    max-height: 82vh !important;
    padding: 16px !important;
    border-radius: 14px !important;
  }
  .modal-layout {
    flex-direction:column !important;
    gap:12px !important;
  }
  .modal-image-section {
    min-width:auto !important;
  }
  #main-product-img {
    max-height:190px !important;
    object-fit:contain !important;
    border-radius:10px !important;
  }
  .modal-info-section {
    min-width:auto !important;
  }
  .modal-info-section h3 {
    font-size:16px !important;
    margin-bottom:6px !important;
  }
  .modal-price {
    font-size:15px !important;
    margin:6px 0 !important;
  }
  .modal-description {
    font-size:13px !important;
    margin-bottom:12px !important;
    line-height:1.4 !important;
  }
  .form-group {
    margin-bottom:10px !important;
  }
  .form-group label {
    font-size:13px !important;
    margin-bottom:4px !important;
  }
  .form-group select,
  .form-group input {
    padding:8px 10px !important;
    font-size:13px !important;
  }
  .quantity-selector {
    margin-bottom:12px !important;
  }
  .quantity-selector button,
  .quantity-selector input {
    width:34px !important;
    height:34px !important;
    font-size:14px !important;
  }
  .btn-add-to-cart {
    padding:10px !important;
    font-size:14px !important;
    border-radius:8px !important;
  }
  .close-modal {
    width:32px !important;
    height:32px !important;
    font-size:18px !important;
  }
}

/* 小屏优化 */
@media(max-width:480px){
  .products-grid{
    grid-template-columns:repeat(2,1fr);
    gap:8px;
  }
  .product-card{
    border-radius:12px;
  }
  .product-info{
    padding:10px;
  }
  .product-name{
    font-size:13px;
    min-height:36px;
  }
  .product-price{
    font-size:14px;
  }
  .view-detail-btn{
    padding:6px 0;
    font-size:12px;
    min-height:30px;
  }
}

/* 🔥 苹果手机 SAFARI 图片居中修复（不影响电脑） */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    .main-image-wrapper {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      background: #f5f1ed !important;
      border-radius: 10px !important;
      margin: 0 auto !important;
      max-width: 320px !important;
    }
    #main-product-img {
      margin: 0 auto !important;
      max-height: 190px !important;
      width: auto !important;
      height: auto !important;
    }
  }
}

/* 弹窗打开时禁止背景滚动 */
.modal-overlay.open {
  overflow: hidden;
}

/* 所有手机通用居中修复（非 Safari 也生效）*/
@media (max-width: 768px) {
  .main-image-wrapper {
    margin: 0 auto !important;
    max-width: 320px !important;
  }
}

/* 商品详情图片小点点 - 悬浮在图片内部 不破坏布局 */
.main-image-wrapper {
  position: relative;
}
.image-indicators {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 10;
}
.image-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transition: all 0.2s ease;
}
.image-indicator.active {
  background: #fff;
  width: 18px;
  border-radius: 10px;
}