@charset "utf-8";
/* CSS Document */

/* ==========================================================================
1. 產品動態區域通用樣式 (相容原 SS1 與新 Model 頁)
========================================================================== */
.product-dynamic-area {
position: absolute;
top: 67%; /* 避開 slogan 標題與中央眼鏡位置 */
left: 2%;
width: 96%;
display: flex;
flex-direction: column;
gap: 15px;
z-index: 8;
box-sizing: border-box;
padding-bottom: 50px;
border-radius: 12px;
background: linear-gradient(to bottom, #141414 0%, #2c2c2c 100%);

}

/* ==========================================================================
2. 產品區塊通用樣式 (預設高度 165px)
========================================================================== */
.product-section { 
display: flex;
flex-direction: row;
width: 100%;
height: 200px; /* 穩定縮放 */
border-radius: 12px;
background: linear-gradient(to right, rgba(20, 10, 5, 0.9) 0%, rgba(100, 70, 50, 0.4) 50%, rgba(20, 10, 5, 0.9) 100%);
border: 1px solid rgba(255, 255, 255, 0.15);
overflow: hidden;
box-sizing: border-box;
}

/* ==========================================================================
3. 左側說明卡片通用樣式
========================================================================== */
.section-intro-card {
flex: 0 0 43%;
background: rgba(0, 0, 0, 0.6);
	
border-right: 1px solid rgba(255, 255, 255, 0.15);
padding: 8px 10px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #fff;
}

/* 控制文字大小與字距，便於各國語言獨立縮放 */
.intro-title {
font-size: 0.8rem;
line-height: 1.5;
font-weight: bold;
color: #ff9900;
margin-bottom: 2px;
}

.intro-instructions {
font-size: 11px;
line-height: 1.5;
color: #cccccc;
}

.intro-badge {
font-size: 0.52rem;
line-height: 1.5;
color: #ff5555;
display: flex;
align-items: center;
gap: 4px;
white-space: norap;
}

.intro-footer {
font-size: 0.5rem;
color: #999999;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 3px;
}

/* ==========================================================================
4. 右側產品滑動區通用樣式
========================================================================== */
.section-slider-wrapper {
flex: 0 0 60%;
display: flex;
flex-direction: row;
align-items: center;
overflow-x: auto; /* 允許左右滑動 */
overflow-y: hidden;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch; /* 優化 iOS 滑動體驗 */
padding: 10px 15px;
box-sizing: border-box;
}

/* 捲動條外觀 (Chrome, Safari, Edge) */
.section-slider-wrapper::-webkit-scrollbar {
display: block !important;
height: 4px; /* 4px 窄軌，極簡美觀 */
}

.section-slider-wrapper::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
margin: 0 10px;
}

.section-slider-wrapper::-webkit-scrollbar-thumb {
background: rgba(255, 153, 0, 0.45);
border-radius: 10px;
}

.section-slider-wrapper::-webkit-scrollbar-thumb:hover {
background: rgba(255, 153, 0, 0.8);
}

/* Firefox 捲動條相容 */
.section-slider-wrapper {
scrollbar-width: thin;
scrollbar-color: rgba(255, 153, 0, 0.45) rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
5. 產品項目 (Platen / SS1 使用)
========================================================================== */
.product-item {
flex: 0 0 120px;
margin-right: 18px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}

.product-item-large {
flex: 0 0 85px;
margin-right: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}

.product-item-large .product-img {
width: 70px;
height: 70px;
object-fit: contain;
margin-bottom: 5px;
}

.product-img {
width: 100%;
height: auto;
object-fit: contain;
filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.5));
}

.product-code {
color: #ffffff;
font-size: 0.58rem;
margin-top: 4px;
text-shadow: 1px 1px 2px #000;
}

/* ==========================================================================
6. 愛心與?點標記通用樣式
========================================================================== */
.heart-btn {
background: none;
border: none;
cursor: pointer;
padding: 3px;
margin-top: 3px;
outline: none;
transition: transform 0.1s ease;
}

.heart-btn:active {
transform: scale(1.2);
}

.heart-icon {
width: 18px;
height: 18px;
fill: none;
stroke: #ffffff;
stroke-width: 2;
transition: fill 0.3s ease, stroke 0.3s ease;
}

.heart-btn.active .heart-icon {
fill: #ff3b30;
stroke: #ff3b30;
}

.favorite-dot {
position: absolute;
top: -5px;
right: 0px;
width: 8px;
height: 8px;
background-color: #ff3b30;
border-radius: 50%;
box-shadow: 0 0 6px rgba(255, 59, 48, 0.8);
z-index: 10;
}

/* ==========================================================================
?? 7. Model Style 頁面專用擴充樣式 (完全不干涉原有頁面)
========================================================================== */

/* 1. 當最外層有 .hide-center-frames 時，隱藏中間兩個眼鏡按鈕框 */
.container.hide-center-frames .frame-charm,
.container.hide-center-frames .frame-cool {
display: none !important;
}

/* 2. 在 Model Style 版面下，微調板塊擺放的動態區域（保持原本位置並留出間隙） */
.product-dynamic-area.model-style-layout {
top: 53%; /* 稍微向上提，運用隱藏中央眼鏡釋放的空間 */
height: auto;
gap: 15px;
padding-bottom: 40px;
}

/* 3. 增加 Model 版塊高度 (由 165px 提升至 215px) */
.model-style-layout .product-section {
height: 215px;
background: linear-gradient(to right, rgba(20, 10, 5, 0.95) 0%, rgba(55, 40, 35, 0.7) 50%, rgba(20, 10, 5, 0.95) 100%);
}

/* 款式二（黑框）偏深色背景 */
.model-style-layout .style-cool-edge {
height: 215px;
background: linear-gradient(to right, rgba(10, 10, 10, 0.95) 0%, rgba(35, 35, 35, 0.7) 50%, rgba(10, 10, 10, 0.95) 100%) !important;
}

/* 4. 左側介紹卡片安全防溢出設定 (比例固定為 45%) */
.model-style-layout .section-intro-card {
flex: 0 0 45%;
max-width: 45%;
padding: 12px 10px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden; /* ?? 確保放大 170% 時，任何溢出的文字和相片被切除在框內 */
}

/* 文字區域樣式微調 */
.model-style-layout .intro-text-top {
margin-bottom: 6px;
}

.model-style-layout .intro-title {
font-size: 0.95rem;
line-height: 1.3;
color: #ff9900;
margin-bottom: 3px;
}

.model-style-layout .intro-instructions {
font-size: 0.75rem;
line-height: 1.2;
color: #dddddd;
}

/* 5. ?? 介紹板塊內的眼鏡相片規格展示框 */
.model-style-layout .intro-glass-wrapper {
position: relative;
width: 100%;
height: 95px; /* 鎖定相片框高度 */
border: 1px solid rgba(255, 153, 0, 0.25);
background: rgba(0, 0, 0, 0.4);
border-radius: 8px;
overflow: hidden; /* ?? 核心防護：相片與標籤絕對不會跑出這個框外 */
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}

/* 6. ?? 控制放入眼鏡相片的比例 (Scale) */
.model-style-layout .intro-glass-img {
width: 100%;
height: 100%;
object-fit: contain; /* 保持眼鏡等比例，不變形 */
transition: transform 0.2s ease;
}

/* 獨立調控：Charm Warm 放入比例為原圖的 100% */
.model-style-layout .img-charm {
transform: scale(1.0);
}

/* 獨立調控：Cool Edge 放入比例為原圖的 100% */
.model-style-layout .img-cool {
transform: scale(1.0);
}

/* 規格文字標籤定位 */
.model-style-layout .glass-spec-label {
position: absolute;
left: 6px;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
font-size: 0.48rem;
color: rgba(255, 255, 255, 0.5);
white-space: nowrap;
}

.model-style-layout .glass-spec-label-width {
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
font-size: 0.48rem;
color: rgba(255, 255, 255, 0.5);
white-space: nowrap;
}

/* 愛心按鈕與規格卡片的整合定位 */
.model-style-layout .card-heart {
position: absolute;
right: 6px;
bottom: 6px;
margin: 0;
padding: 4px;
}

/* 介紹板塊右下角款式文字 */
.model-style-layout .intro-footer-title {
text-align: right;
font-size: 0.85rem;
font-style: italic;
font-weight: bold;
color: #ffffff;
margin-top: 4px;
}

/* 7. 右側 Model 真人人像顯示區控制 */
.model-style-layout .section-slider-wrapper {
flex: 0 0 55%;
max-width: 55%;
height: 100%;
display: flex;
align-items: center;
}

.model-style-layout .product-item-model {
flex: 0 0 115px;
margin-right: 15px;
display: flex;
flex-direction: column;
align-items: center;
}

.model-style-layout .model-img {
width: 100px;
height: 125px; /* 配合板塊高度增加，提升 Model 照片尺寸 */
object-fit: cover;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.15);
}


.intro-glass-wrapper {
position: relative;
}
.heart-btn.card-heart {
	position: absolute;
/* ?? 位置控制：你可以自由修改下面的數值 */
bottom: 2px; /* 距離眼鏡框「底部」的距離（增大數值會往上移） */
right: 2px; /* 距離眼鏡框「右邊」的距離（增大數值會往左移） */
width: 32px; /* 按鈕寬度 */
height: 32px; /* 按鈕高度 */
background: rgba(255, 255, 255, 0.15); /* 背景顏色（這裡是帶透明度的白色，你可以改為 transparent） */
border: none; /* 去掉邊框 */
border-radius: 50%; /* 讓背景變成完美的圓形 */
cursor: pointer; /* 滑鼠移上去時顯示手指圖標 */
display: flex;
align-items: center;
justify-content: center;
z-index: 99; /* 確保它浮在眼鏡圖片上方，不被擋住 */
transition: all 0.3s ease; /* 增加滑鼠懸停時的過渡動畫 */
}

/* 3. 控制心心內部 SVG 的大小與顏色 */
.heart-btn .card-heart .heart-icon {
width: 18px; /* 愛心圖標的大小 */
height: 18px;
fill: none; /* 預設不填滿顏色 */
stroke: #ffffff; /* 邊框顏色改為白色 */
stroke-width: 2px; /* 邊框粗細 */
}

/* 4. [選用] 當滑鼠移過去時的微調特效 */
.heart-btn.card-heart:hover {
background: rgba(255, 255, 255, 0.3); /* 滑鼠指著時背景變亮一點 */
transform: scale(1.1); /* 微放大 1.1 倍 */
}


.glass-dim-tag{
	position: absolute;
	left:5px;
	bottom:2px;
	font-size: 10px;
	font-family: Arial,sans-serif;
	color: #a0a0a0;
	font-weight: bold;
	letter-spacing: 0.5px;
	z-index: 10;
	pointer-events: none;
	
}



/*二二二二二二二二二二二二二二二二二二二二二二二二二*/


/* 外層容器 */
.stepper-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  width: 90%;
  gap:20px;
  margin: 40px auto;
  padding: 0 20px;
}

/* 背後的貫穿橫線 */
.stepper-wrapper::before {
  content: '';
  position: absolute;
  /* 圓形高度為 50px，中心點為 25px，減去線條高度的一半(1px) = 24px */
  top: 15px; 
  left: 30px;  /* 左右邊距可依第一個與最後一個圓形的位置調整 */
  right: 30px;
  height: 2px;
  background-color: #dcdcdc; /* 未完成線條顏色 */
  z-index: 1; /* 層級低於圓形 */
}

/* 單個節點 */
.step-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2; /* 層級高於橫線，將橫線蓋在背後 */
  text-decoration: none;
  cursor: pointer;
}

/* 圓形圖示 */
.circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #ffffff; /* 必須設定實色背景，才能遮住背後的橫線 */
  border: 2px solid #b0b0b0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #666666;
  font-weight: bold;
  font-size: 16px;
  transition: all 0.3s ease;
}

/* 文字標題 */
.title {
  margin-top: 8px;
  font-size: 14px;
  color: #666666;
  transition: color 0.3s ease;
}

/* ----------------
   動態互動效果 
---------------- */

/* 1. 滑鼠移入（Hover）：外圈高亮 */
.step-node:hover .circle {
  border-color: #FFB100;
  color: #FFB100;
  box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.2); /* 亮色外圍環 */
}

.step-node:hover .title {
  color: #FFB100;
}

/* 2. 當前頁面（Active）：實心高亮 */
.step-node.active .circle {
  background-color: #FFB100;
  border-color: #FFB100;
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.2);
}

.step-node.active .title {
  color: #FFB100;
  font-weight: bold;
}



/*二二二二二二二二二二二二二二二二二二二二二二二二二*/

/* ==========================================================================
   新增款式導覽列 (P1 / P2 / P3 / P4) 專用樣式
   ========================================================================== */
.p-sub-nav {
  position: relative;
  width: 100%;
  height: 50px;
  background-color: rgba(15, 15, 15, 0.9);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px; /* 控制圓圈之間的距離 */
  z-index: 999 !important;
  box-sizing: border-box;
  padding: 0 10px;
}

/* 「更多款式：」文字標籤 */
.p-sub-nav .sub-nav-title {
  color: #cccccc;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.5px;
  white-space: nowrap;
  position: relative;
  z-index: 2;
}

/* 貫穿圓圈中心的橫向連線 */
.p-sub-nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 28%; /* 連線起始位置（避開文字標籤） */
  right: 10%; /* 連線結束位置 */
  height: 2px;
  background-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-50%);
  z-index: 1; /* 位於背景之上、圓圈之下 */
  pointer-events: none;
}

/* 按鈕容器 */
.p-sub-nav .sub-nav-item {
  text-decoration: none;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 圓圈本體 */
.p-sub-nav .sub-nav-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #1a1a1a; /* 實色底遮擋後方橫線 */
  color: #aaaaaa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  border: 1px solid #555555;
  transition: all 0.3s ease;
}

/* Hover 懸停效果 */
.p-sub-nav .sub-nav-item:hover .sub-nav-circle {
  border-color: #ffaa33;
  color: #ffffff;
}

/* ==========================================================================
   底部購物程序導覽列 hover 及高亮擴充樣式
   ========================================================================== */

/* 圓形圖示懸停 (Hover) 外圈亮色特效 */
.bottom-nav .nav-item:hover .nav-icon-circle {
  border-color: #ffaa33;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 170, 51, 0.8);
  transform: scale(1.1);
}

.bottom-nav .nav-item:hover .nav-label {
  color: #ffffff;
}

/* 管理員/頁面當前高亮 (Active) 狀態 */
.bottom-nav .nav-item.active .nav-icon-circle {
  background-color: #ff9500 !important;
  color: #ffffff !important;
  border-color: #ffaa33 !important;
  box-shadow: 0 0 12px rgba(255, 149, 0, 0.9) !important;
  transform: scale(1.15);
}

.bottom-nav .nav-item.active .nav-label {
  color: #ffd700 !important;
  font-weight: bold;
}

/* --------------------------------------------------------------------------
   高亮當前頁面 (Active)
   -------------------------------------------------------------------------- */
.p-sub-nav .sub-nav-item.active .sub-nav-circle {
  background-color: #ff9500 !important; /* 橘黃高亮 */
  color: #ffffff !important;
  border-color: #ffaa33 !important;
  box-shadow: 0 0 10px rgba(255, 149, 0, 0.8) !important; /* 發光特效 */
  transform: scale(1.15);
}
/* Bottom navigation container: keeps both navigation groups within the product content area. */
.bottom-navigation-container {
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 14px clamp(12px, 3vw, 40px) 12px;
  background: rgba(15, 15, 15, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}

.bottom-navigation-container .stepper-wrapper {
  width: min(90%, 760px);
  margin: 14px auto 18px;
  box-sizing: border-box;
}

.bottom-navigation-container .p-sub-nav {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  overflow: hidden;
}

@media (max-width: 480px) {
  .bottom-navigation-container {
    padding: 12px 8px 10px;
  }

  .bottom-navigation-container .stepper-wrapper {
    width: 100%;
    gap: 10px;
    padding: 0 10px;
  }

  .bottom-navigation-container .p-sub-nav {
    gap: 16px;
  }
}