/* ===== 錨點偏移 ===== */
#mad3, #mad4, #mad2 {
  scroll-margin-top: 120px; /* 依 header 高度調整 */
}

/* ===== RWD Banner：單張圖 + 等比縮放（預設 1200×600 = 2:1）===== */
.rwd-banner,
.bannerA,
.bannerB,
.bannerC {
  width: 100%;
  display: block;
  background-repeat: no-repeat;
  background-size: cover;        /* 填滿容器並必要時裁切 */
  background-position: center;   /* 圖心置中 */
  aspect-ratio: var(--ratio, 1200/400); /* 預設 2:1，等同 1200×600 */
}

/* 指定背景圖（只要一種檔案即可） */
.bannerA { background-image: url(../img/bannerA.jpg); }
.bannerB { background-image: url(../img/bannerB.jpg); background-position: right center; }
.bannerC { background-image: url(../img/bannerC.jpg); background-position: left  center; }

/* 手機：仍使用同一張圖；如要維持 2:1 就不用改 ratio（預設就生效） */
@media (max-width: 768px) {
  .rwd-banner,
  .bannerA,
  .bannerB,
  .bannerC {
    /* 若想在手機視覺更高些，可改為 16/9 或 3/2：
       --ratio: 16 / 9;
    */
    background-position: center;
  }
}

/* ===== hover/動畫（原封保留） ===== */
.hoverable {
  display: inline-block;
  backface-visibility: hidden;
  vertical-align: middle;
  position: relative;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  transform: translateZ(0);
  transition-duration: 0.3s;
  transition-property: transform;
}
.hoverable:before {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  content: "";
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(231, 6, 6, 0) 80%
  );
  transition-duration: 0.3s;
  transition-property: transform, opacity;
}
.hoverable:hover,
.hoverable:active,
.hoverable:focus { transform: translateY(-5px); }
.hoverable:hover:before,
.hoverable:active:before,
.hoverable:focus:before {
  opacity: 1;
  transform: translateY(-5px);
}
@keyframes bounce-animation {
  16.65% { transform: translateY(8px); }
  33.3%  { transform: translateY(-6px); }
  49.95% { transform: translateY(4px); }
  66.6%  { transform: translateY(-2px); }
  83.25% { transform: translateY(1px); }
  100%   { transform: translateY(0); }
}
.bounce { animation-name: bounce-animation; animation-duration: 2s; }

/* ===== 導覽相關（修正成合法 CSS） ===== */
@media (min-width: 768px) {
  .navbar {
    text-align: center !important;
    float: none;
    display: inline-block;
  }
}

body {
  font-weight: 600;
  text-align: center !important;
  color: white;
  background-image: url(../img/CC8.jpg);
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  font-size: 1rem !important;
  min-height: 100vh;
}

nav {
  background: none !important;
  text-transform: uppercase;
}

/* 原本的 SCSS 巢狀語法改成合法 CSS */
nav li { margin-left: 3em; margin-right: 3em; }
nav a  { transition: 0.5s color ease-in-out; }

.page-title { opacity: 0.75 !important; }
.lb-close    { display: block !important; }

.bg-logo {
  background-image: url(../img/CC8.gif);
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
}

/* 產品圖放大提示（保留） */
.product-image-container { position: relative; overflow: hidden; }
.magnify-icon {
  position: absolute; top: 10px; right: 10px;
  background-color: rgba(0, 0, 0, 0.5); color: white;
  padding: 5px; border-radius: 50%; font-size: 20px; transition: all 0.3s ease;
}
.magnify-tooltip {
  position: absolute; top: 50px; right: 10px;
  background-color: rgba(0, 0, 0, 0.7); color: white;
  padding: 5px 10px; border-radius: 5px; font-size: 14px;
  opacity: 0; transition: all 0.3s ease;
}
.product-image-container:hover .magnify-icon { transform: scale(1.2); }
.product-image-container:hover .magnify-tooltip { opacity: 1; top: 40px; }

/* 加載覆蓋層 */
.loading-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none; /* 初始隱藏 */
  align-items: center; justify-content: center; z-index: 9999;
}
.moon-loader { position: relative; width: 100px; height: 100px; }
.moon {
  position: absolute; top: 0; left: 0; width: 100px; height: 100px;
  background: #fdff8f; border-radius: 50%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  display: flex; justify-content: center; align-items: center;
  font-size: 16px; color: black; animation: moonAnimation 1.5s infinite ease-in-out;
}
.bunny {
  position: absolute; bottom: -20px; left: 20px;
  width: 60px; height: 60px;
  background: url('../img/bunny2.apng') no-repeat center center;
  background-size: cover; animation: bunnyAnimation 1.5s infinite ease-in-out;
}
@keyframes moonAnimation {
  0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); }
}
@keyframes bunnyAnimation {
  0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); }
}
.loading-text { margin-top: 20px; color: #fff; font-size: 16px; font-family: 'Arial', sans-serif; }

/* 禁用頁面滾動 */
.no-scroll { overflow: hidden; position: relative; }

/* Spinner */
.spinner {
  border: 8px solid #f3f3f3; border-top: 8px solid #3498db;
  border-radius: 50%; width: 50px; height: 50px;
  animation: spin 1s linear infinite; margin: auto;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* === NAV 顏色覆蓋（背景/文字/滑過顏色）=== */
:root{
  --nav-bg: #2d0447;       /* 導覽列背景色 */
  --nav-text: #a4b5ff;     /* 文字/圖示顏色 */
  --nav-hover: #f8ed4a;    /* 滑過時顏色 */
}
header,
nav.navbar,
.navbar,
.nav-wrapper {
  background-color: var(--nav-bg) !important;
  background-image: none !important;  /* 防止被背景圖覆蓋 */
}
.navbar .nav-link,
.navbar a,
.nav-wrapper a,
nav a {
  color: var(--nav-text) !important;
  text-decoration: none;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active,
.nav-wrapper a:hover,
nav a:hover {
  color: var(--nav-hover) !important;
}
/* 側邊選單 */
.sidenav{ background-color: var(--nav-bg) !important; }
.sidenav a{ color: var(--nav-text) !important; }
.sidenav a:hover{
  background-color: rgba(255,255,255,.06);
  color: var(--nav-hover) !important;
}