/* === 高級墨綠+金色主題樣式 === */


/* 手機版 LOGO (小於 768px) */
@media (max-width: 767px) {
  .navbar .navbar-brand img {
    height: 50px;   /* 手機維持小一點 */
  }
}

/* 桌機版 LOGO (大於等於 768px) */
@media (min-width: 768px) {
  .navbar .navbar-brand img {
    height: 120px;   /* 桌機放大 */
  }
}

/* 首頁合富字體跟大小 */
.home_text h1 {
  font-family: 'Playfair Display', serif;
  font-size: 4rem;
  color: #d4af37;
  text-shadow: 4px 4px 4px rgba(0,0,0,0.6);
  
}

@media (max-width: 576px) {
  #home {
    height: 50vh;          /* 手機上稍微低一點，但仍是長方形 */
    min-height: 300px;
    max-height: none;
    padding: 20px 0;
  }

  #home .home_text h1 {
    font-size: 28px;   /* 不要太小 */
    line-height: 1.2;
    padding: 0 15px;
  }

  #home h6 {
    font-size: 13px;
    line-height: 1.5;
    padding: 0 20px;
    margin-top: 8px;
  }

  #home .btn {
    font-size: 13px;
    padding: 8px 16px;
  }
}

/* 預設（深色背景）nav 文字白色 */
.navbar-nav > li > a {
  color: #ffffff !important;
  font-size: 1.2rem;
  transition: color 0.3s ease;
  transition: color 0.3s ease;
}

/* HOME ABOUT CONTACT 滑鼠移上去是亮金色 */
.navbar-nav > li > a:hover {
  color: #fff9d9 !important;
}

/* 捲動後 navbar 加 .scrolled，文字變墨綠 */
.navbar.scrolled .navbar-nav > li > a {
  color: #22946d !important; /* 墨綠 */
}

/* 捲動後，滑鼠移過文字變金色 */
.navbar.scrolled .navbar-nav > li > a:hover {
  color: #d4af37 !important; /* 金色 */
}

/* 可選：首頁主按鈕圓角 */
.btn,
.btn-primary {
  border-radius: 30px !important;
}


/* ===== NAVBAR & LOGO 滑動縮小 ===== */

/* 桌機版初始高度 */
.navbar .logo {
  height: 160px !important;	
  transition: height 0.3s;
}

/* 滾動後縮小 LOGO */
.navbar.scrolled .navbar-brand img {
  height: 60px !important; 
  transition: height 0.3s ease;
}

/* 手機版保持原高度 */
@media (max-width: 767px) {
  .navbar .logo {
    height: 60px!important;
  }
  .navbar.scrolled .logo {
    height: 60px!important;
  }
}





/* =====  大螢幕：左右分欄 ===== */
@media (min-width: 768px) {
  #jewelry-shows .row.main_about {
    display: flex;
    align-items: flex-start; /* 讓左右頂端對齊 */
  }

  /* 左側下拉選單約 60% */
  #jewelry-shows .about_accordion {
    flex: 1 1 60%;
    padding-right: 20px; /* 可選，讓左右有間距 */
  }

  /* 右側圖片約 40%，高度自適應 */
  #jewelry-shows .small-image-wrapper {
    flex: 0 0 40%; 
    max-width: 300px;    /* 右側圖片最大寬度，可調整 */
  }

  #jewelry-shows .small-image-wrapper img {
    width: 100%;   /* 撐滿 wrapper */
    height: auto;  /* 保持比例 */
    object-fit: contain;
    display: block; /* 避免底部空隙 */
  }
}

/* ------------------ 手機版：上下排列 ------------------ */
@media (max-width: 767px) {
  #jewelry-shows .row.main_about {
    display: block;
  }

  #jewelry-shows .about_accordion,
  #jewelry-shows .small-image-wrapper {
    flex: none;
    width: 100%;
    max-width: 100%;
    margin-bottom: 15px;
  }

  #jewelry-shows .small-image-wrapper img {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 767px) {
  /* 展開時，navbar-menu 容器往下推 */
  #navbar-menu.collapse.in {
    margin-top: 60px !important;
    max-height: calc(100vh - 60px);  /* 限制最大高度，避免內容超出 */
    overflow-y: scroll;               /* 允許垂直滾動 */
    scrollbar-width: none;            /* Firefox 隱藏滾動條 */
    -ms-overflow-style: none;         /* IE 隱藏滾動條 */
  }

  /* Chrome, Safari 隱藏滾動條 */
  #navbar-menu.collapse.in::-webkit-scrollbar {
    display: none;
  }

  /* 選單項目稍微增加高度，看起來不會太擠 */
  #navbar-menu .nav > li > a {
    padding: 15px 10px;
  }
}

/* 手機版 FAQ 下拉設定 */
@media (max-width: 767px) {
  #faq_main_content h6 {
    cursor: pointer;     /* 點擊手型提示 */
  }

  #faq_main_content .faq-item .content {
    max-height: 0;       /* 初始收合 */
    overflow: hidden;    /* 隱藏內容 */
    transition: max-height 0.3s ease;  /* 展開/收合動畫 */
  }

  /* 展開時 */
  #faq_main_content .faq-item.active .content {
  max-height: 1000px;
}

#faq_main_content h6 {
  cursor: pointer;
}

/* navbar 固定高度設定(可依實際需求調整) */
.navbar.navbar-fixed {
  height: 60px;
  line-height: 60px;
  padding: 0 15px;
  z-index: 9999;
}


/* 半透明背景 + 全螢幕 */
.image-modal {
  display: none;               /* 預設隱藏 */
  position: fixed;
  z-index: 9999;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
  text-align: center;
}

.image-modal-content {
  margin: auto;
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 5px;
}

/* 關閉按鈕 */
#closeModal {
  position: absolute;
  top: 30px;
  right: 30px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}



/* 滾動後上方白色BAR的大小 */

.navbar.navbar-fixed {
  height: 90px;          /* 設定導覽列整體高度 */
  padding-top: 10px;     /* 上方內距 */
  padding-bottom: 20px;  /* 下方內距 */
}

/* === 白底商品展示區 === */

.featured_slider {
  padding: 20px 0;
}

.featured_img {
  position: relative;
  overflow: hidden;
  border-radius: 12px;          /* 圓角 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 柔和陰影 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin: 10px; /* 圖片間距 */
  aspect-ratio: 1 / 1;   
}

/* 圖片保持比例 */
.featured_img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px; /* 和容器一致 */
}

/* 滑鼠 hover 輕微放大&陰影加深 */
.featured_img:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

/* popup-img 不顯示但保留功能 */
.featured_img a.popup-img {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: block;
}


/* 桌面版縮小 featured_img 外框，保持圖片跟著縮小 */
@media (min-width: 768px) {
  .featured_slider .featured_img {
    max-width: 400px;   /* 想要的寬度 */
    margin: 0 auto;
  }

  .featured_slider .featured_img img {
    width: 100%;
    height: auto;
    display: block;
  }

.featured_slider .slick-slide {
  padding: 0 3px; /* 左右各5px間距，改成你想要的 */
  box-sizing: border-box;
}

.featured_slider .featured_img {
  border-radius: 15px;
  overflow: hidden;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}





/* featured_slider 整個區塊設定灰底 & padding */
.featured_slider {
  background-color: #f2f2f2;
  padding: 40px 0;  /* 上下留 40px 空間，左右不用留 */
}

/* slick-track 設定 flex，讓每個項目等高 */
.featured_slider .slick-track {
  display: flex;
  align-items: stretch;
}

#footer.footer {
  background-color: #22946d !important;
}

#footer.footer p {
  color: #fff !important;
}



/* === 手機版刊頭start === */
/* 手機版：最大寬度 768px 以下才生效 */
@media (max-width: 768px) {
  #home .main_home {
    transform: scale(0.85);     /* 根據需求微調 0.85 或其他值 */
    transform-origin: top center;  /* 從上方中間縮放 */
  }

  /* 如果還是覺得字太大，也可以額外調整文字大小 */
  #home h1.text-white {
    font-size: 28px;   /* 視情況調整 */
  }
  #home h6.text-white {
    font-size: 14px;
  }
  

  /* 如果按鈕太大也可一起縮小 */
  #home .home_btns .btn {
    font-size: 12px;
    padding: 8px 16px;
  }
}




/* ===== FAQ 手機版展開修正 ===== */
/* 手機版最大寬度 767px */
@media (max-width: 767px) {
 /* 新增修正：使用 max-height 隱藏/展開 */
  .faq-item .content {
    max-height: 0;            /* 初始收合 */
    overflow: hidden;         /* 隱藏內容 */
    transition: max-height 0.3s ease; /* 展開/收合動畫 */
  }


  /* 點擊展開時顯示完整內容 */
  .faq-item.active .content {
    max-height: 1000px;       /* 設定足夠大讓內容全部顯示 */
  }

  /* 保證標題和內容換行正常 */
  .faq-item h6,
  .faq-item p {
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* FAQ 區塊內 margin/padding 調整 */
  .faq-item {
    margin-bottom: 15px !important;
  }
}

 /* 標題提示手型 */
  .faq-item h6 {
    cursor: pointer;     /* 點擊手型提示 */
  }
}