/* =========================================
   1. Variables & Reset
   ========================================= */
:root {
  /* Color Palette */
  --color-white: #ffffff;
  --color-off-white: #fafafa;
  --color-light-gray: #f5f5f5;
  --color-gray: #999999;
  --color-dark-gray: #333333;
  --color-black: #000000;
  
  /* Typography */
  --font-primary: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  
  /* Spacing & Layout */
  --container-width: 1200px;
  --nav-height: 80px;
  --footer-height: 60px;
  
  /* Transitions */
  --transition-smooth: all 0.3s ease-in-out;
  --transition-slow: all 0.5s ease-in-out;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-primary);
  color: var(--color-dark-gray);
  background-color: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

ul {
  list-style: none;
}

img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* =========================================
   2. Typography
   ========================================= */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-light);
  letter-spacing: 1px;
}

.text-center { text-align: center; }
.text-light { font-weight: var(--font-weight-light); }
.text-secondary { color: var(--color-gray); }

/* =========================================
   3. Navigation (Navbar)
   ========================================= */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  display: flex;
  justify-content: center; /* Center navigation items */
  align-items: center;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.03);
}

.nav-links {
  display: flex;
  gap: 40px;
}

.nav-link {
  font-size: 16px;
  letter-spacing: 1.5px;
  color: var(--color-dark-gray);
  position: relative;
  padding-bottom: 5px;
}

/* Underline animation on hover */
.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: 0;
  left: 50%;
  background-color: var(--color-gray);
  transition: width 0.3s ease, left 0.3s ease;
}

.nav-link:hover {
  color: var(--color-gray);
}

.nav-link:hover::after {
  width: 100%;
  left: 0;
}

/* Mobile Menu Toggle (Hidden on Desktop) */
.menu-toggle {
  display: none;
  font-size: 24px;
  cursor: pointer;
  position: absolute;
  right: 20px;
}

/* =========================================
   4. Layout Components
   ========================================= */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: 80px 0;
}

.page-header {
  padding-top: calc(var(--nav-height) + 60px);
  padding-bottom: 40px;
  text-align: center;
}

.page-title {
  font-size: 36px;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
}

.page-title-divider {
  width: 60px;
  height: 1px;
  background-color: #ddd;
  margin: 0 auto 20px;
}

.page-subtitle {
  font-size: 16px;
  color: var(--color-gray);
  max-width: 600px;
  margin: 0 auto;
}

/* =========================================
   5. Home Page Styles
   ========================================= */
/* Hero Slider */
.hero-slider {
  position: relative;
  width: 100%;
  height: 90vh; /* 90% viewport height */
  overflow: hidden;
  margin-top: var(--nav-height);
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  z-index: 1;
}

.slide.active {
  opacity: 1;
  z-index: 2;
}

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

/* Hero Content Overlay */
.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 3;
  color: var(--color-white);
  background: radial-gradient(circle, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 70%);
  padding: 40px;
  width: 100%;
  pointer-events: none; /* Let clicks pass through if needed */
}

.hero-title {
  font-size: 48px;
  letter-spacing: 2px;
  margin-bottom: 15px;
  font-weight: 300;
  text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.hero-subtitle {
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 1px;
  opacity: 0.9;
}

/* Slider Indicators */
.slider-indicators {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 15px;
  z-index: 4;
}

.indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background-color 0.3s;
}

.indicator.active {
  background-color: var(--color-white);
}

/* Home Three Columns */
.home-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0; /* Equal width columns without gap based on spec? "三个等宽栏目" implies full width or container? Assuming container based on typical design, but prompt says "white background, three equal width columns". Let's use container but clean layout. */
  max-width: 100%;
  padding: 80px 5%; /* Add some side padding for visual breath */
}

.category-item {
  position: relative;
  text-align: center;
  padding: 20px;
  cursor: pointer;
}

.category-img-wrapper {
  overflow: hidden;
  border-radius: 4px; /* Slight rounded corners */
  aspect-ratio: 1 / 1;
  margin-bottom: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  transition: var(--transition-smooth);
}

.category-img-wrapper img {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.category-item:hover .category-img-wrapper {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.category-item:hover .category-img-wrapper img {
  transform: scale(1.05);
}

.category-title {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 1px;
}

/* =========================================
   6. Collections Page Styles
   ========================================= */
.collections-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding-bottom: 80px;
}

.collection-card {
  position: relative;
  cursor: pointer;
}

.collection-img-wrapper {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  margin-bottom: 15px;
}

.collection-img-wrapper img {
  transition: transform 0.5s ease;
}

/* Overlay effect */
.collection-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.collection-overlay span {
  color: #fff;
  font-size: 16px;
  letter-spacing: 2px;
  border: 1px solid #fff;
  padding: 10px 20px;
  text-transform: uppercase;
}

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

.collection-card:hover .collection-img-wrapper img {
  transform: scale(1.05);
}

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

.collection-name {
  font-size: 18px;
  margin-bottom: 5px;
  font-weight: 400;
}

.collection-desc {
  font-size: 14px;
  color: var(--color-gray);
}

/* =========================================
   7. Pieces (Product) Page Styles
   ========================================= */
.pieces-page {
  background-color: #f9f9f9;
}

.piece-section {
  display: flex;
  margin-bottom: 40px;
  gap: 40px;
  background-color: #fff; /* Optional: giving pieces a card-like or clean background if needed, but prompt says page bg is gray. Layout is key. */
  /* Actually prompt says "Single Item Display: Large image & Details" layout. Let's keep it clean without card bg if not specified, but flex is key. */
}

/* Alternate Layout */
.piece-section.reverse {
  flex-direction: row-reverse;
}

.piece-main-img {
  flex: 0 0 70%;
  height: 600px;
  overflow: hidden;
}

.piece-main-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.piece-details {
  flex: 0 0 calc(30% - 40px);
  display: flex;
  flex-direction: column;
  gap: 20px; /* Space between detail images */
}

.detail-img-wrapper {
  height: 180px; /* Fixed height from spec */
  overflow: hidden;
  position: relative;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: var(--transition-smooth);
}

.detail-img-wrapper img {
  transition: transform 0.3s ease;
}

.detail-img-wrapper:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.detail-img-wrapper:hover img {
  transform: scale(1.1);
}

.piece-description {
  text-align: center;
  padding: 20px 0 60px;
  font-size: 15px;
  color: var(--color-dark-gray);
  max-width: 800px;
  margin: 0 auto;
}

/* =========================================
   8. Styling (Inspiration) Page Styles
   ========================================= */
.styling-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 80px;
}

.style-card {
  position: relative;
}

.style-img-wrapper {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 15px;
}

.style-img-wrapper img {
  transition: transform 0.5s ease;
}

.style-card:hover .style-img-wrapper img {
  transform: scale(1.05);
}

.style-tag {
  position: absolute;
  bottom: 15px;
  left: 15px;
  background-color: rgba(255,255,255,0.9);
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 20px;
  color: var(--color-dark-gray);
  font-weight: 500;
  backdrop-filter: blur(4px);
}

.style-desc {
  font-size: 14px;
  color: var(--color-gray);
  padding-left: 5px;
}

/* Style Principles (Bottom of Styling Page) */
.principles-section {
  display: flex;
  justify-content: space-around;
  padding: 60px 0;
  border-top: 1px solid #eee;
  text-align: center;
}

.principle-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 250px;
}

.principle-icon {
  font-size: 32px;
  margin-bottom: 5px;
}

.principle-title {
  font-size: 16px;
  font-weight: 500;
}

.principle-text {
  font-size: 14px;
  color: var(--color-gray);
}

/* =========================================
   9. Philosophy Page Styles
   ========================================= */
.philosophy-page {
  background-color: #fafafa;
}

.philosophy-section {
  display: flex;
  align-items: center;
  margin-bottom: 80px;
  gap: 60px;
  position: relative;
}

/* Decorative Line */
.philosophy-section::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #e5e5e5;
}
/* Left line for first section, Right line for second section logic could be applied, 
   but simplistic implementation for "edges" as per prompt. 
   Let's keep it cleaner: just layout. */
.philosophy-section::before { display: none; } /* Removed complex line logic to keep minimal */

.philosophy-text {
  flex: 1;
}

.philosophy-text h3 {
  font-size: 24px;
  margin-bottom: 24px;
  font-weight: 300;
}

.philosophy-text p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-dark-gray);
  margin-bottom: 20px;
  font-weight: 300;
}

.philosophy-img {
  flex: 0 0 40%;
  height: 500px;
}

.philosophy-section.reverse {
  flex-direction: row-reverse;
}

.philosophy-section.reverse .philosophy-img {
  flex: 0 0 40%;
}

.philosophy-section.reverse .philosophy-text {
  flex: 1;
}

/* Specific widths from prompt */
.philosophy-section:not(.reverse) .philosophy-text { width: 60%; flex: 0 0 60%; }
.philosophy-section:not(.reverse) .philosophy-img { width: 40%; flex: 0 0 40%; }

.philosophy-section.reverse .philosophy-img { width: 40%; flex: 0 0 40%; }
.philosophy-section.reverse .philosophy-text { width: 60%; flex: 0 0 60%; }

/* =========================================
   10. Footer
   ========================================= */
.footer {
  height: var(--footer-height);
  background-color: var(--color-dark-gray);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 1px;
}

/* =========================================
   11. Responsive Design
   ========================================= */

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
  .collections-grid, .styling-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .home-categories {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .hero-title { font-size: 36px; }
  .piece-main-img { height: 450px; }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
  /* Navbar */
  .menu-toggle { display: block; }
  
  .nav-links {
    position: absolute;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    background-color: #fff;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    gap: 20px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.05);
    /* Hidden by default logic handled by JS class toggle usually, 
       but for pure CSS hover or checkbox hack? 
       Prompt mentions JS file exists, so we will use JS for toggle class */
    display: none; 
  }
  
  .nav-links.active {
    display: flex;
  }
  
  /* Grids to Single Column */
  .collections-grid, 
  .styling-grid,
  .home-categories {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  /* Layouts */
  .piece-section,
  .piece-section.reverse,
  .philosophy-section,
  .philosophy-section.reverse {
    flex-direction: column;
    gap: 30px;
  }
  
  .piece-main-img,
  .piece-details,
  .philosophy-text,
  .philosophy-img {
    flex: auto;
    width: 100% !important;
  }
  
  .piece-details {
    flex-direction: row; /* Horizontal scroll or wrapping for details on mobile */
    overflow-x: auto;
    gap: 15px;
    padding-bottom: 10px;
  }
  
  .detail-img-wrapper {
    flex: 0 0 150px; /* Fixed width items */
    height: 150px;
  }

  .philosophy-img {
    height: 300px;
  }
  
  /* Typography Scale */
  .hero-title { font-size: 28px; }
  .hero-subtitle { font-size: 14px; }
  .page-title { font-size: 28px; }
  
  .principles-section {
    flex-direction: column;
    gap: 30px;
  }
}

/* Utility Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 1s ease-in-out;
}