@charset "utf-8";
@charset "utf-8";

.hero-slider {
	height: 50vh;
}

/* ===== Hero ===== */
.hero1 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* max-width: 1200px; */
	margin: 0 auto;
	padding: 60px 15%;
	gap: 60px;
}

.hero-content {
	flex: 1;
}

.hero-tag {
	display: inline-block;
	background: #f5f0eb;
	color: #8B6914;
	font-size: 13px;
	font-weight: 500;
	padding: 6px 16px;
	border-radius: 20px;
	margin-bottom: 20px;
	letter-spacing: 1px;
}

.hero1-title {
	font-size: 52px;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 20px;
	color: #1a1a1a;
}

.hero1-title span {
	color: #c9a96e;
}

.hero-desc {
	font-size: 16px;
	color: #666;
	line-height: 1.8;
	max-width: 440px;
}

.hero-image {
	flex: 1;
	display: flex;
	justify-content: flex-end;
}

.hero-image img {
	width: 100%;
	/* max-width: 480px; */
	height: auto;
	border-radius: 16px;
	object-fit: cover;
}

/* Section Title */
.section-title-wrap {
	text-align: center;
	padding: 20px 40px 50px;
}

.section-title {
	font-size: 32px;
	font-weight: 600;
	color: #1a1a1a;
}

/* ===== Product Cards - 动态交互版 ===== */
.products-section {
	/* max-width: 1200px; */
	margin: 0 auto;
	padding: 60px 5%;
	perspective: 1000px;
}

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

.product-cards {
	flex: 0 0 400px;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	transition: all 0.35s ease;
	cursor: pointer;
	border: 1px solid #0000000f;
	user-select: none;
}

.product-cards:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
	border-color: #e8e8e8;
}

.product-cards.hidden {
	display: none;
}

.product-image {
	width: 100%;
	aspect-ratio: 4/3;
	background: linear-gradient(135deg, #f0f0f0 0%, #efefef 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
}

.product-image img {
	width: 85%;
	height: 85%;
	object-fit: contain;
	transition: transform 0.5s ease;
}

.product-cards:hover .product-image img {
	transform: scale(1.05);
}

/* 产品图片占位样式 */
.product-placeholder {
	width: 80%;
	height: 60%;
	border-radius: 8px;
	position: relative;
}

.product-placeholder::after {
	content: '';
	position: absolute;
	top: 20%;
	left: 15%;
	width: 40%;
	height: 50%;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 4px;
}

.product-info {
	padding: 20px;
}

.product-name {
	font-size: 17px;
	font-weight: 600;
	color: #1a1a1a;
	margin-bottom: 6px;
	letter-spacing: 0.5px;
}

.product-desc {
	font-size: 12px;
	color: #999;
	margin-bottom: 16px;
	line-height: 1.6;
}

.product-btn {
	width: 100%;
	padding: 12px;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	background: #fff;
	color: #333;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.25s ease;
	letter-spacing: 1px;
}

.product-btn:hover {
	background: #1a1a1a;
	color: #fff;
	border-color: #1a1a1a;
}

  /* ===== Hero ===== */
  .hero {
    height: 55vh;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 60%, #16213e 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; position: relative; overflow: hidden;
  }
  .hero::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 70%, rgba(212,137,74,0.14) 0%, transparent 65%);
  }
  .hero-eyebrow {font-size: 38px;letter-spacing: 4px;color: #d4894a;text-transform: uppercase;margin-bottom: 16px;opacity: 0;animation: fadeInDown 0.8s 0.2s forwards;}
  .hero-title {color: #fff;font-size: clamp(32px, 5vw, 56px);font-weight: 800;margin-bottom: 16px;opacity: 0;animation: fadeInDown 0.8s 0.4s forwards;}
  .hero-title span { color: #d4894a; }
  .hero-sub { font-size: 16px; color: rgba(255,255,255,0.5); max-width: 520px; line-height: 1.7; opacity: 0; animation: fadeInUp 0.8s 0.6s forwards; }
  
  @keyframes fadeInDown { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }
  @keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
  
  
  @media (max-width: 480px){
    section.hero1 {
        padding: 60px 5%;
        flex-direction: column;
    }

    .products-grid{
         display: flex;
         flex-direction: column;
    }
}