/* ===========================
   全域主題變數（Light / Dark）
   =========================== */
:root{
  /*Hero*/
  --heroV-height:100%;
  --heroI-height:100vh;


  /* 基礎色 */
  --bg: #ffffff;
  --fg: #0f172a;
  --muted: #64748b;

  /* 容器與卡片 */
  --card: #f8fafc;
  --card-fg: var(--fg);
  --border: rgba(0,0,0,.08);
  --shadow: 0 10px 22px rgba(0,0,0,.18);

  /* 導覽列 */
  --nav-bg: rgba(0,0,0,.85);
  --nav-fg: #ffffff;

  /* Hero / 疊層 */
  --hero-bg: #000000;
  --hero-overlay-top: rgba(0,0,0,.35);
  --hero-overlay-mid: rgba(0,0,0,.25);
  --hero-overlay-btm: rgba(0,0,0,.45);
  --hero-caption-shadow: 0 3px 12px rgba(0,0,0,.6);

  /* 按鈕 */
  --btn-bg: #2563eb;
  --btn-fg: #ffffff;
  --btn-muted-bg: #334155;
  --btn-like-bg: #2b6cb0;
  --btn-yt-bg: #cc0000;

  /* 產品資訊 */
  --price: #b58900;
  --stock: #667085;

  /* 圖片切換鈕 */
  --img-nav-bg: rgba(0,0,0,.45);
  --img-nav-fg: #ffffff;

  /* Modal / Backdrop */
  --backdrop: rgba(0,0,0,.45);

  /* Burger */
  --burger-stroke: #ffffff;

  /* 版面尺寸 */
  --container-px: 20px;
  --section-gap: 3rem;
  --radius-card: 12px;
  --radius-btn: 12px;
  --grid-gap: 16px;

  /* 動畫 */
  --ease: .22s ease;
}

:root[data-theme="dark"]{
  --bg: #0f172a;
  --fg: #e5e7eb;
  --muted: #94a3b8;

  --card: #0b1220;
  --card-fg: var(--fg);
  --border: rgba(255,255,255,.08);
  --shadow: 0 10px 22px rgba(0,0,0,.35);

  --nav-bg: rgba(15,23,42,.9);
  --nav-fg: #ffffff;

  --price: #facc15;
  --stock: #94a3b8;

  --img-nav-bg: rgba(0,0,0,.55);
  --burger-stroke: #ffffff;
}

/* ===========================
   Reset / 基礎
   =========================== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
html,body{background:var(--bg);color:var(--fg);}

/* ===========================
   HERO（影片與疊層）
   =========================== */
.hero{
  position:relative; height:var(--heroI-height); overflow:hidden; background:var(--hero-bg);
}
.hero iframe{
  position:absolute; inset:0; width:100%; height:var(--heroV-height); pointer-events:none;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(
    to bottom,
    var(--hero-overlay-top),
    var(--hero-overlay-mid) 60%,
    var(--hero-overlay-btm)
  );
}
.hero-slogan{
  position:absolute; left:50%; bottom:12vh; transform:translateX(-50%);
  color:#fff; font-weight:800; font-size:clamp(28px,5vw,64px);
  text-shadow:var(--hero-caption-shadow); z-index:3;
}
.yt-meta{
  position:absolute; top:14px; left:16px; z-index:40;
  display:flex; align-items:center; gap:12px; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.45);
}
.yt-avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; background:#222; border:1px solid rgba(255,255,255,.25) }
.yt-texts{ line-height:1.1 }
.yt-channel{ font-weight:700; opacity:.95 }
.yt-title{ font-size:12px; opacity:.9; max-width:min(60vw,520px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.yt-actions{ position:absolute; top:12px; right:12px; z-index:40; display:flex; gap:10px }
.yt-btn{
  display:inline-block; padding:6px 10px; font-size:12px; color:#fff; text-decoration:none;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.2); border-radius:6px; backdrop-filter:saturate(140%) blur(6px);
}
.yt-btn:hover{ background:rgba(0,0,0,.7) }
.yt-fab{ position:absolute; right:14px; top:40%; transform:translateY(-50%); z-index:40; display:flex; flex-direction:column; gap:10px }
.fab-btn{
  width:42px; height:42px; border-radius:11px; border:1px solid rgba(255,255,255,.25);
  color:#fff; background:rgba(0,0,0,.55); cursor:pointer; backdrop-filter:saturate(140%) blur(6px);
}
.fab-btn:hover{ background:rgba(0,0,0,.7) }

/* ===========================
   NAVBAR（置於內容層，sticky）
   =========================== */
.site-nav{
  position:sticky; top:0; z-index:30;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px var(--container-px);
  background:var(--nav-bg); color:var(--nav-fg);
  box-shadow:0 4px 18px rgba(0,0,0,.25);
  backdrop-filter:saturate(140%) blur(6px);
}
.site-nav .brand{ font-weight:800 }
.site-nav a{ color:var(--nav-fg); text-decoration:none; margin-left:18px; opacity:.95 }
.site-nav a:hover{ opacity:1 }

/* ===========================
   內容層
   =========================== */
.wrap{ max-width:1024px; margin:0 auto; padding:80px var(--container-px); }
section{ padding:30px 0; border-bottom:1px solid var(--border) }

/* ===========================
   Theme / Speech buttons
   =========================== */
.ui-floating{
  position:fixed; right:16px; bottom:16px; z-index:50;
  display:flex; flex-direction:column; gap:10px
}
.ui-btn{
  width:46px; height:46px; border-radius:var(--radius-btn);
  border:1px solid var(--border);
  display:grid; place-items:center; background:var(--card); color:var(--card-fg);
  box-shadow:var(--shadow); cursor:pointer;
  transition:background-color var(--ease), color var(--ease), border-color var(--ease);
}

/* ===========================
   Burger Menu（固定右上）
   =========================== */
#burger_menu{
  position: fixed;
  top: 7vh;
  right: 3vw;
  z-index: 100;
  cursor: pointer;
  transition: transform .25s ease;
}
#burger_menu:hover{ transform: scale(1.1); }

#burger_svg{ width:46px; height:46px; border-radius:12px; cursor:pointer; }
#burger_svg .line{ stroke: var(--burger-stroke); stroke-width:2.2; stroke-linecap:round; transition: transform .22s ease, opacity .18s ease; }
#burger_svg .l1{ transform-origin:10px 10px; }
#burger_svg .l2{ transform-origin:10px 10px; }
#burger_svg .l3{ transform-origin:10px 10px; }
#burger_svg.open .l1{ transform: translateY(6px) rotate(45deg); }
#burger_svg.open .l2{ opacity: 0; }
#burger_svg.open .l3{ transform: translateY(-6px) rotate(-45deg); }

/* ===========================
   Modal
   =========================== */
.modal{
  position: fixed; inset: 0;
  display: none; align-items: center; justify-content: center;
  background: var(--backdrop); z-index: 100;
}
.modal.open { display: flex; animation: modal-fade .18s ease-out both; }
@keyframes modal-fade { from {opacity:0} to {opacity:1} }

.modal-content{
  width: min(92vw, 760px);
  background: var(--bg); color: var(--fg);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  transform: translateY(6px) scale(.98);
  opacity: 0; animation: pop .22s ease-out .05s both;
}
@keyframes pop { to {transform: translateY(0) scale(1); opacity:1} }

.modal-header{
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: flex-end; background: var(--card);
}
.modal-header .close{ cursor: pointer; font-size: 22px; line-height: 1; }

.modal-body{ padding: 14px 16px 18px; max-height: min(72vh, 760px); overflow: auto; }

/* ===========================
   ERP 選單
   =========================== */
.erp-nav{ display: grid; gap: 6px; }
.erp-nav details{ border:1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--card-fg); }
.erp-nav summary{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; font-weight:600;
}
.erp-nav summary::-webkit-details-marker{ display:none; }
.erp-nav .badge{
  margin-left:auto; font-size:12px; opacity:.65;
  background: rgba(0,0,0,.06); padding:2px 8px; border-radius:999px;
}
.erp-nav .children{ padding:6px 12px 12px 18px; display:grid; gap:6px; }
.erp-nav .leaf{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:8px;
  background: rgba(0,0,0,.04); cursor:pointer;
}
.erp-nav .leaf:hover{ background: rgba(0,0,0,.08); }
.erp-nav summary{ position:relative; }
.erp-nav summary::after{
  content:"▸"; margin-left:auto; font-size:14px; opacity:.75; transition: transform .18s ease;
}
.erp-nav details[open] > summary::after{ transform: rotate(90deg); }

/* ===========================
   Hero 圖片輪播（images 模式）
   =========================== */
.hero-images{ position:absolute; inset:0; }
.hero-images .hero-slide{ position:absolute; inset:0; display:block; }
.hero-images img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-caption{
  position:absolute; left:50%; bottom:12vh; transform:translateX(-50%);
  color:#fff; font-weight:700; font-size:clamp(18px,2vw,24px); text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.hero-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background: rgba(0,0,0,.4); color:#fff; border:none;
  font-size:32px; line-height:1; padding:.3em .5em;
  border-radius:50%; cursor:pointer; z-index:20;
  transition: background .3s ease, transform .2s;
}
.hero-btn:hover{ background: rgba(0,0,0,.65); transform: translateY(-50%) scale(1.1); }
.hero-btn-left{ left:20px; }
.hero-btn-right{ right:20px; }

/* ===========================
   兩層 Hero（底層固定，內容捲動）
   =========================== */
.hero-bg{
  position: fixed; top:0; left:0; width:100%; height:100vh;
  z-index:0; overflow:hidden; background:var(--hero-bg);
}
.hero-bg iframe, .hero-bg img{
  width:100%; height:100%; object-fit:cover; pointer-events:none;
}
body.layered-hero #hero{ display:none; }

/* 主要內容：給間距（與 hero 分隔） */
/*#main_doc{
  position:relative; z-index:1;
  background:transparent;
  padding-top: var(--section-gap);
  padding-left: var(--container-px);
  padding-right: var(--container-px);  
}
#main_doc {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  min-height: 100vh;
}*/
#main_doc {
  position: relative;
  z-index: 1;
  background: transparent;
  padding-top: var(--section-gap);
  padding-left: var(--container-px);
  padding-right: var(--container-px);
  display: block;
  opacity: 1;
  visibility: visible;
  min-height: 100vh;
}

/* 當進入商品詳情頁（含有 .prod-detail 時）覆蓋樣式 */
#main_doc:has(.prod-detail) {
  background: #0b132b !important;
  z-index: 10 !important;
  padding: 0 !important;
}
/* ===========================
   商品列表（RWD 欄數）
   =========================== */
.prod-grid{
  display:grid; gap: var(--grid-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items:start;
}
@media (min-width: 640px){ .prod-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px){ .prod-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px){ .prod-grid{ grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* 卡片 */
.prod-card{
  background: var(--card); color: var(--card-fg);
  border-radius: var(--radius-card);
  overflow:hidden; box-shadow: var(--shadow);
  transition: background-color var(--ease), color var(--ease), box-shadow var(--ease);
}

/* 圖片 1:1 方形 */
.prod-image-wrap{
  position:relative; width:100%; padding-top:100%;
  overflow:hidden; cursor:pointer;
}
.prod-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .25s ease; }
.prod-image-wrap:hover .prod-img{ transform: scale(1.03); }

/* 切圖按鈕 */
.img-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%; border:none;
  background: var(--img-nav-bg); color: var(--img-nav-fg); font-size:18px;
}
.img-left{ left:8px; }
.img-right{ right:8px; }

/* 內容 */
.prod-body{ padding:12px; }
/*.prod-title{ font-weight:700; margin-bottom:6px; text-align:center; }*/
/* 產品卡標題樣式 */
.prod-title {
  font-size: 1rem;          /* ← 這裡改大小，例如 1.25rem, 18px, 20px 都可以 */
  font-weight: 800;         /* 字重 */
  line-height: 1.3;
  margin: 6px 0;
  color: var(--fg);
  text-align: center;       /* 若要置中 */
}
.prod-price{ color: var(--price); margin-bottom:4px; text-align:center; }
.prod-stock{ font-size:12px; color: var(--stock); margin-bottom:10px; text-align:center; }
.prod-actions{ display:flex; gap:8px; }

/* 按鈕 */
.btn{
  padding:6px 10px; border:0; border-radius:8px; cursor:pointer;
  background: var(--btn-bg); color: var(--btn-fg);
  transition: opacity .2s ease, background-color var(--ease), color var(--ease);
}
.btn:hover{ opacity:.9; }
.btn-yt{
  background: #ff0000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  padding: 0;
  box-shadow: 0 3px 8px rgba(0,0,0,.25);
}
.btn-yt:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
.btn-yt .yt-icon {
  width: 24px;
  height: 24px;
  fill: #fff;
}
body[data-theme="dark"] .btn-yt {
  box-shadow: 0 4px 10px rgba(255,255,255,.15);
}
.btn-yt svg{ margin-right:0; }
.btn-like{ background: var(--btn-like-bg); }
.btn-desc{ background: var(--btn-muted-bg); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* 分頁 */
.prod-pager{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:10px 0 24px;
}
.pg-btn{
  padding:6px 10px; border-radius:8px;
  border:1px solid var(--border); background:transparent; color:inherit;
}
.pg-btn[disabled]{ opacity:.4; cursor:not-allowed; }
.pg-info{ opacity:.8; }

/* ===========================
   興趣彈窗
   =========================== */
.interest-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:none; align-items:center; justify-content:center; z-index:1000;
}
.interest-backdrop.open{ display:flex; }
.interest-modal{
  width:min(92vw, 560px);
  background: var(--card); color: var(--card-fg);
  border:1px solid var(--border);
  border-radius:12px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.interest-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; border-bottom:1px solid var(--border);
}
.interest-close{ background:transparent; border:0; color:inherit; font-size:20px; cursor:pointer; }
.interest-body{ padding:14px 16px; }
.interest-body .interest-title{ font-weight:700; margin-bottom:8px; }
.interest-text{
  width:100%; padding:10px; border-radius:8px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: inherit;
}
.interest-footer{
  display:flex; gap:8px; justify-content:flex-end;
  padding:12px 16px; border-top:1px solid var(--border);
}
.btn-cancel{ background: var(--btn-muted-bg); }
.btn-send{ background:#16a34a; color:#fff; }
/* ===== Footer ===== */
#site-footer{
  background: linear-gradient(135deg, #6b21a8 0%, #5b21b6 100%);
  color:#fff;
}
#site-footer .footer-top{
  max-width:var(--container, 1200px);
  margin:0 auto;
  padding:40px 20px;
  display:grid;
  gap:32px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  #site-footer .footer-top{ grid-template-columns: 1.2fr 1fr 1fr; }
}
#site-footer .ft-title{
  font-size: clamp(20px, 2.4vw, 28px);
  margin:0 0 12px 0;
  font-weight:800;
  color:#8ff48a;  /* 綠色標題，對應截圖 */
}
#site-footer .ft-about{ line-height:1.6; opacity:.95; }

#site-footer .ft-list{ list-style:none; padding:0; margin:0 0 14px; }
#site-footer .ft-list li{
  display:flex; gap:8px; align-items:flex-start;
  padding:4px 0; line-height:1.5;
}
#site-footer .ft-list a{ color:#fff; text-decoration:none; border-bottom:1px solid transparent; }
#site-footer .ft-list a:hover{ border-color:rgba(255,255,255,.5); }
#site-footer .ft-ico{ width:22px; display:inline-block; opacity:.9 }

#site-footer .ft-chat{
  display:inline-block; margin-top:10px;
  background:#2563eb; color:#fff; text-decoration:none;
  padding:12px 24px; border-radius:10px;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
#site-footer .ft-chat:hover{ background:#1d4ed8 }

#site-footer .ft-social{ display:flex; gap:14px; align-items:center; margin:10px 0 14px; }
#site-footer .ft-social a{
  width:48px; height:48px; display:grid; place-items:center;
  background:rgba(255,255,255,.08); border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
#site-footer .ft-social svg{ width:26px; height:26px; fill:#fff; opacity:.95 }

#site-footer .ft-line-id{ margin-bottom:8px; font-size:16px; }
#site-footer .ft-line-btn{
  display:inline-block; background:#22c55e; color:#fff; text-decoration:none;
  padding:12px 22px; border-radius:10px; font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
#site-footer .ft-line-btn:hover{ background:#16a34a }

#site-footer .footer-copy{
  background:#1f2937; text-align:center; padding:14px 10px; font-size:14px;
}
/* 基底：尚未進場 */
.aos-lite {
  --distance: 24px;
  --dur: 800ms;
  --ease: cubic-bezier(.22,.61,.36,1);
  --delay: 0ms;
  opacity: 0;
  transform: translateY(var(--distance)) scale(0.98);
  filter: blur(0px);
  transition:
    opacity var(--dur) var(--ease) var(--delay),
    transform var(--dur) var(--ease) var(--delay),
    filter var(--dur) var(--ease) var(--delay);
  will-change: opacity, transform, filter;
}


/* 進場後 */
.aos-lite.is-inview {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* 模式（方向/型態） */
.anim-fade-up    { transform: translateY(var(--distance)) scale(1); }
.anim-fade-right { transform: translateX(calc(var(--distance) * -1)); }
.anim-fade-left  { transform: translateX(var(--distance)); }
.anim-zoom-in    { transform: scale(.92); }
.anim-flip-up    { transform: rotateX(8deg) translateY(var(--distance)); transform-origin: bottom; }
.anim-blur-in    { filter: blur(6px); }

/* 模式的最終狀態 */
.anim-fade-right.is-inview,
.anim-fade-left.is-inview,
.anim-zoom-in.is-inview,
.anim-flip-up.is-inview { transform: none; }
.anim-blur-in.is-inview { filter: blur(0); }

/* 使用者偏好減少動畫：直接顯示 */
@media (prefers-reduced-motion: reduce) {
  .aos-lite { transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}
/* 讓卡片動畫樣式更穩（提高權重） */
.prod-card.aos-lite{
  opacity: 0;
  transform: translateY(var(--distance, 24px)) scale(0.98);
  transition:
    opacity var(--dur, 800ms) var(--ease, cubic-bezier(.22,.61,.36,1)) var(--delay, 0ms),
    transform var(--dur, 800ms) var(--ease, cubic-bezier(.22,.61,.36,1)) var(--delay, 0ms),
    filter var(--dur, 800ms) var(--ease, cubic-bezier(.22,.61,.36,1)) var(--delay, 0ms);
  will-change: opacity, transform, filter;
}
.prod-card.aos-lite.is-inview{
  opacity: 1;
  transform: none;
}

/* 模式（方向/型態）— 同樣疊在 prod-card 上提高權重 */
.prod-card.anim-fade-right { transform: translateX(calc(var(--distance, 24px) * -1)); }
.prod-card.anim-fade-left  { transform: translateX(var(--distance, 24px)); }
.prod-card.anim-zoom-in    { transform: scale(.92); }
.prod-card.anim-flip-up    { transform: rotateX(8deg) translateY(var(--distance, 24px)); transform-origin: bottom; }
.prod-card.anim-blur-in    { filter: blur(6px); }

.prod-card.anim-fade-right.is-inview,
.prod-card.anim-fade-left.is-inview,
.prod-card.anim-zoom-in.is-inview,
.prod-card.anim-flip-up.is-inview { transform: none; }
.prod-card.anim-blur-in.is-inview { filter: none; }
#chat-toggle svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
#btn-facebook svg, #btn-instagram svg, #btn-line svg {
  width: 22px; height: 22px; fill: currentColor;
}
/* ===== 線上留言 Popup ===== */
.lead-backdrop {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.45);
  z-index: 200;
}
.lead-backdrop.open { display: flex; animation: modal-fade .2s ease-out both; }

.lead-modal {
  width: min(92vw, 480px);
  background: var(--card, #fff);
  color: var(--card-fg, #000);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  overflow: hidden;
  animation: pop .25s ease-out both;
}
.lead-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #ccc);
  font-weight: 700;
}
.lead-close {
  background: transparent; border: none; font-size: 24px; line-height: 1; cursor: pointer;
}
.lead-body {
  padding: 16px 18px 22px;
  display: grid; gap: 10px;
}
.lead-body input[type="text"],
.lead-body textarea {
  width: 100%; border: 1px solid var(--border, #ccc);
  border-radius: 8px; padding: 8px;
  background: var(--bg, #fff);
  color: inherit;
}
.lead-agree { font-size: 14px; display:flex; align-items:center; gap:6px; }
.lead-feedback { color:#c00; font-size:14px; display:none; margin-top:4px; }
.btn-send {
  margin-top: 10px; padding:10px 16px; border:0;
  border-radius:8px; background:#2563eb; color:#fff; font-weight:700;
  cursor:pointer; transition: background .2s;
}
.btn-send:hover { background:#1d4ed8; }
.interest-label {
  display: block;
  margin: 10px 0 4px;
  font-weight: 600;
  color: var(--fg);
}

.interest-contact,
.interest-text {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  font-size: 15px;
  background: rgba(255,255,255,0.05);
  color: inherit;
}

.interest-contact:focus,
.interest-text:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.25);
}
/* Product Detail */
.prod-detail .pd-back{ margin-bottom:14px; }
.pd-header{ margin: 4px 0 18px; }
.pd-title{ font-size: clamp(22px, 3vw, 32px); font-weight: 800; margin: 0 0 6px; }
.pd-sub{ display:flex; gap:12px; align-items:center; color:var(--muted); }
.pd-sub .pd-stock{ font-size: 14px; }

.pd-hero{ position:relative; border-radius: var(--radius-card); overflow:hidden; box-shadow: var(--shadow); }
.pd-hero-img{ width:100%; display:block; object-fit:cover; }
.pd-hero-has-carousel .pd-slides{ position:relative; height:min(66vh, 720px); }
.pd-hero-has-carousel .pd-slide{ position:absolute; inset:0; opacity:0; transition:opacity .3s ease; }
.pd-hero-has-carousel .pd-slide.is-active{ opacity:1; }
.pd-hero-has-carousel img{ width:100%; height:100%; object-fit:cover; }

.pd-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:10;
  width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background: rgba(0,0,0,.45); color:#fff; font-size:20px;
}
.pd-nav-left{ left:10px; } .pd-nav-right{ right:10px; }

.pd-section{ margin-top:22px; }
.pd-h3{ font-size: clamp(18px, 2.2vw, 22px); margin:0 0 10px; font-weight:800; }
.pd-text{ line-height:1.7; }

.pd-illu-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
@media (min-width: 768px){ .pd-illu-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.pd-illu-img{ width:100%; height:100%; object-fit:cover; border-radius:10px; }

.pd-video{ position:relative; padding-top:56.25%; border-radius:12px; overflow:hidden; box-shadow: var(--shadow); }
.pd-video iframe{ position:absolute; inset:0; width:100%; height:100%; }
/*#main_doc, .prod-detail.wrap {
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  color:#fff!important;
  background:#0b132b!important;
  position:relative;
  z-index:100;
  min-height:100vh;
  padding:20px;
}
.prod-detail img {
  display:block;
  width:100%;
  max-width:600px;
  margin:20px auto;
  border-radius:12px;
}*/
/* 商品詳情頁最外層容器 */
#main_doc .prod-detail {
  position: relative;
  z-index: 5;
  display: block;
  width: 100%;
  min-height: 100vh;
  padding: 24px 20px;
  color: #fff;
  background-color: #0b132b;
  font-family: system-ui, sans-serif;
}

/* 標題與副標題 */
.prod-detail .pd-title {
  font-size: clamp(22px, 3.6vw, 36px);
  font-weight: 800;
  margin-bottom: 8px;
}
.prod-detail .pd-sub {
  font-size: 15px;
  opacity: 0.85;
  margin-bottom: 14px;
}

/* Hero 圖 */
.prod-detail .pd-hero-img {
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  border-radius: 12px;
  display: block;
}

/* 商品說明 */
.prod-detail .pd-h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 20px 0 10px;
}
.prod-detail .pd-text {
  line-height: 1.75;
  opacity: 0.95;
}

/* 返回鈕 */
#pd-back {
  display: inline-block;
  margin-bottom: 15px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
}
#pd-back:hover {
  background: rgba(255,255,255,0.2);
}
#main_doc .prod-detail.aos-lite{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
}
.hero-slogan {
  white-space: pre-line; /* 允許 \n 換行 */
}
/* ===========================
   About / Contact（吃主題變數）
   =========================== */

/* 詳情頁容器與背景，改為吃 var */
#main_doc .prod-detail {
  position: relative;
  z-index: 5;
  display: block;
  width: 100%;
  min-height: 100vh;
  padding: 24px var(--container-px);
  background: var(--bg);
  color: var(--fg);
  box-shadow: none;
}

/* 若希望進入詳情頁時整個 main_doc 換底色，用主題背景即可 */
#main_doc:has(.prod-detail) {
  background: var(--bg) !important;
  z-index: 10 !important;
  padding: 0 !important;
}

/* 標題、次標題 */
.pd-header { margin: 4px 0 18px; }
.pd-title  { font-size: clamp(22px, 3.6vw, 36px); font-weight: 800; color: var(--fg); }
.pd-sub    { display:flex; gap:12px; align-items:center; color: var(--muted); }

/* 區塊標題/文字 */
.pd-section { margin-top: 22px; }
.pd-h3      { font-size: clamp(18px, 2.2vw, 22px); font-weight: 800; color: var(--fg); }
.pd-text    { line-height: 1.75; color: var(--fg); opacity: .95; }

/* 主圖與輪播容器 */
.pd-hero {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--card);
  color: var(--card-fg);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.pd-hero-img { width: 100%; display: block; object-fit: cover; }

.pd-hero-has-carousel .pd-slides { position: relative; height: min(66vh, 720px); }
.pd-hero-has-carousel .pd-slide  { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; }
.pd-hero-has-carousel .pd-slide.is-active { opacity: 1; }
.pd-hero-has-carousel img { width: 100%; height: 100%; object-fit: cover; }

/* 輪播左右鍵 → 改吃主題 */
.pd-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:10;
  width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background: var(--img-nav-bg); color: var(--img-nav-fg); font-size:20px;
}
.pd-nav-left{ left:10px; } .pd-nav-right{ right:10px; }

/* 影片區塊 → 外框吃卡片樣式 */
.pd-video{
  position:relative; padding-top:56.25%;
  border-radius: var(--radius-card);
  overflow:hidden;
  background: var(--card);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.pd-video iframe{ position:absolute; inset:0; width:100%; height:100%; }

/* 多圖文網格 */
.pd-illu-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--grid-gap); }
@media (min-width: 768px){ .pd-illu-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.pd-illu-img{
  width:100%; height:100%; object-fit:cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--card);
}

/* 返回按鈕：用主題按鈕色 */
#pd-back{
  display:inline-block;
  margin-bottom:14px;
  padding:6px 12px;
  border-radius: var(--radius-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  cursor:pointer;
  transition: opacity .2s ease, background-color var(--ease), color var(--ease), border-color var(--ease);
}
#pd-back:hover{ opacity:.9; }

/* ===========================
   內嵌「線上留言」表單（吃主題）
   =========================== */
.lead-inline{
  display: grid;
  gap: 12px;
  max-width: 720px;
  background: transparent; /* 直接使用頁面背景 */
}
.lead-inline label{ color: var(--fg); font-weight: 600; }

.lead-inline input[type="text"],
.lead-inline textarea{
  width: 100%;
  padding: 10px 12px;
  background: var(--card);
  color: var(--card-fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  transition: border-color var(--ease), box-shadow var(--ease), background-color var(--ease), color var(--ease);
}
.lead-inline input[type="text"]::placeholder,
.lead-inline textarea::placeholder{ color: var(--muted); }

.lead-inline input[type="text"]:focus,
.lead-inline textarea:focus{
  outline: none;
  border-color: var(--btn-bg);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--btn-bg) 25%, transparent);
}

/* 同意條款 */
.lead-agree{ display:flex; align-items:center; gap:6px; color: var(--fg); font-size: 14px; }

/* 送出鈕用主題按鈕色 */
.lead-inline .btn-send{
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 0;
  cursor: pointer;
  transition: opacity .2s ease, background-color var(--ease), color var(--ease);
}
.lead-inline .btn-send:hover{ opacity: .9; }

/* 表單訊息（成功/錯誤）— 用更通用的可讀色 */
.lead-feedback{ min-height:22px; font-size:14px; }
.lead-feedback.ok  { color: color-mix(in oklab, #22c55e 92%, var(--fg)); }
.lead-feedback.err { color: color-mix(in oklab, #ef4444 92%, var(--fg)); }

/* ===========================
   一致性微調（和你的既有 token 對齊）
   =========================== */
.btn{ background: var(--btn-bg); color: var(--btn-fg); }
.btn-like{ background: var(--btn-like-bg); color: #fff; }
.btn-desc{ background: var(--btn-muted-bg); color: #fff; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ===========================
   Footer（吃主題變數 + aos-lite）
   =========================== */

/* 可選：提供可覆蓋的 footer 變數，預設跟著整站 */
:root{
  --footer-bg: var(--card);
  --footer-fg: var(--card-fg);
  --footer-border: var(--border);
  --footer-shadow: var(--shadow);
  --footer-accent: var(--btn-bg);     /* 小裝飾線條/hover 用 */
  --footer-badge-bg: rgba(0,0,0,.06); /* 淺色背景徽章 */
}
:root[data-theme="dark"]{
  --footer-badge-bg: rgba(255,255,255,.06);
}

/* 整體容器 */
#site-footer{
  background: var(--footer-bg);
  color: var(--footer-fg);
  border-top: 1px solid var(--footer-border);
  box-shadow: var(--footer-shadow);
}

/* 上半部內容區：改成用卡片/變數 */
#site-footer .footer-top{
  max-width: 1200px;
  margin: 0 auto;
  padding: 44px var(--container-px);
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  #site-footer .footer-top{
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

/* 欄位卡片感（微陰影） */
#site-footer .ft-col{
  position: relative;
}

/* 欄標題：增加漸層小底線（吃品牌色） */
#site-footer .ft-title{
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800;
  margin: 0 0 12px 0;
  color: var(--footer-fg);
}
#site-footer .ft-title::after{
  content:"";
  display:block;
  width: 64px; height: 3px;
  margin-top: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--footer-accent) 100%, transparent), transparent 85%);
  opacity: .9;
}

/* 內文 */
#site-footer .ft-about{ line-height: 1.7; opacity: .95; }

/* 列表（聯絡資訊） */
#site-footer .ft-list{ list-style:none; padding:0; margin:0 0 14px; }
#site-footer .ft-list li{
  display:flex; gap:8px; align-items:flex-start;
  padding:6px 0; line-height:1.55;
  color: var(--footer-fg);
}
#site-footer .ft-list a{
  color: inherit; text-decoration: none; border-bottom: 1px solid transparent;
  transition: border-color var(--ease), color var(--ease), opacity var(--ease);
}
#site-footer .ft-list a:hover{
  border-color: color-mix(in oklab, var(--footer-accent) 65%, transparent);
  opacity: .95;
}
#site-footer .ft-ico{ width: 22px; display:inline-block; opacity:.9 }

/* 社群區 */
#site-footer .ft-social{
  display:flex; gap: 12px; align-items:center; margin: 2px 0 12px;
}
#site-footer .ft-social a{
  width:44px; height:44px; display:grid; place-items:center;
  border-radius: 12px;
  background: var(--footer-badge-bg);
  box-shadow: inset 0 0 0 1px var(--footer-border);
  color: var(--footer-fg);
  transition: transform .18s ease, box-shadow var(--ease), background-color var(--ease);
}
#site-footer .ft-social a:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
#site-footer .ft-social svg{ width: 24px; height: 24px; fill: currentColor; }

/* LINE 區塊（ID + 招募按鈕） */
#site-footer .ft-line{ display:grid; gap:10px; }
#site-footer .ft-line-id{
  padding: 6px 10px; border-radius: 999px;
  background: var(--footer-badge-bg);
  display: inline-block;
  width: fit-content;
}
#site-footer .ft-line-btn{
  display:inline-block;
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration:none;
  padding: 10px 18px;
  border-radius: var(--radius-btn);
  font-weight: 700;
  box-shadow: var(--footer-shadow);
  transition: opacity .2s ease, transform .18s ease;
}
#site-footer .ft-line-btn:hover{
  opacity: .92; transform: translateY(-1px);
}

/* Chat 按鈕（延用主按鈕變數） */
#site-footer .ft-chat{
  display:inline-block; margin-top: 10px;
  background: var(--btn-bg); color: var(--btn-fg);
  text-decoration:none; padding: 10px 18px;
  border-radius: var(--radius-btn); font-weight: 700;
  box-shadow: var(--footer-shadow);
  transition: opacity .2s ease, transform .18s ease;
}
#site-footer .ft-chat:hover{ opacity:.92; transform: translateY(-1px); }

/* 版權列 */
#site-footer .footer-copy{
  border-top: 1px solid var(--footer-border);
  background: color-mix(in oklab, var(--footer-bg) 94%, transparent);
  color: var(--footer-fg);
  text-align:center; padding: 14px 10px; font-size: 14px;
}

/* ===========================
   Footer 進場動態（aos-lite）
   =========================== */
#site-footer .ft-col.aos-lite{
  --distance: 16px;
  --dur: 720ms;
}
#site-footer .ft-col.aos-lite.is-inview{
  /* 用你全站 aos-lite 的狀態即可 */
}
:root{ --footer-bg: color-mix(in oklab, var(--card) 96%, transparent); }
:root[data-theme="dark"]{ --footer-bg: color-mix(in oklab, var(--card) 92%, transparent); }

/* ===== Footer Theme Tokens (可依站色微調) ===== */
:root{
  /* 與 main_doc 做區隔的底色/漸層 */
  --footer-surface: color-mix(in oklab, var(--card) 98%, transparent);
  --footer-surface-strong: color-mix(in oklab, var(--card) 94%, transparent);
  --footer-gradient: linear-gradient(
    180deg,
    color-mix(in oklab, var(--btn-bg) 6%, transparent) 0%,
    transparent 38%,
    color-mix(in oklab, var(--fg) 4%, transparent) 100%
  );
  --footer-accent: var(--btn-bg);
}
:root[data-theme="dark"]{
  --footer-surface: color-mix(in oklab, var(--card) 90%, transparent);
  --footer-surface-strong: color-mix(in oklab, var(--card) 86%, transparent);
  --footer-gradient: linear-gradient(
    180deg,
    color-mix(in oklab, var(--btn-bg) 10%, transparent) 0%,
    transparent 40%,
    color-mix(in oklab, var(--fg) 8%, transparent) 100%
  );
}

/* ===== Footer 容器：雙層背景（微漸層+實底），與 main_doc 有明顯層次 ===== */
#site-footer{
  background:
    var(--footer-gradient),
    var(--footer-surface);
  color: var(--footer-fg, var(--card-fg));
  border-top: 1px solid var(--footer-border, var(--border));
  box-shadow: var(--footer-shadow, var(--shadow));
  position: relative;
}

/* 頂部一道很淡的色帶，營造分層 */
#site-footer::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:10px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--footer-accent) 35%, transparent),
    transparent 60%
  );
  opacity:.15;
  pointer-events:none;
}

/* 內容區 */
#site-footer .footer-top{
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px var(--container-px);
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  #site-footer .footer-top{ grid-template-columns: 1.2fr 1fr 1fr; }
}

#site-footer .ft-col{ position:relative; }

/* 標題 + 底線（吃品牌色） */
#site-footer .ft-title{
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800;
  margin: 0 0 12px 0;
}
#site-footer .ft-title::after{
  content:"";
  display:block; width:64px; height:3px; margin-top:8px;
  border-radius:999px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--footer-accent) 100%, transparent),
    transparent 85%
  );
  opacity:.9;
}

/* 聯絡列表 */
#site-footer .ft-list{ list-style:none; padding:0; margin:0 0 14px; }
#site-footer .ft-list li{
  display:flex; gap:8px; align-items:flex-start;
  padding:6px 0; line-height:1.55;
}
#site-footer .ft-list a{
  color:inherit; text-decoration:none; border-bottom:1px solid transparent;
  transition: border-color var(--ease), color var(--ease), opacity var(--ease);
}
#site-footer .ft-list a:hover{
  border-color: color-mix(in oklab, var(--footer-accent) 65%, transparent);
  opacity:.95;
}
#site-footer .ft-ico{ width:22px; display:inline-block; opacity:.9 }

/* 社群 */
#site-footer .ft-social{ display:flex; gap:12px; align-items:center; margin:2px 0 12px; }
#site-footer .ft-social a{
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:12px;
  background: var(--footer-surface-strong);
  box-shadow: inset 0 0 0 1px var(--footer-border, var(--border));
  color: inherit;
  transition: transform .18s ease, box-shadow var(--ease), background-color var(--ease);
}
#site-footer .ft-social a:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
#site-footer .ft-social svg{ width:24px; height:24px; fill: currentColor; }

/* LINE 區塊 */
#site-footer .ft-line{ display:grid; gap:10px; }
#site-footer .ft-line-id{
  padding:6px 10px; border-radius:999px;
  background: var(--footer-surface-strong);
  width: fit-content;
}
#site-footer .ft-line-btn,
#site-footer .ft-chat{
  display:inline-block;
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration:none;
  padding:10px 18px;
  border-radius: var(--radius-btn);
  font-weight:700;
  box-shadow: var(--footer-shadow, var(--shadow));
  transition: opacity .2s ease, transform .18s ease;
}
#site-footer .ft-line-btn:hover,
#site-footer .ft-chat:hover{ opacity:.92; transform: translateY(-1px); }

/* 版權列 */
#site-footer .footer-copy{
  border-top:1px solid var(--footer-border, var(--border));
  background: color-mix(in oklab, var(--footer-surface) 92%, transparent);
  text-align:center; padding:14px 10px; font-size:14px;
}

/* ===== aos-lite：footer 欄位淡入 ===== */
#site-footer .ft-col.aos-lite{
  --distance: 16px;
  --dur: 720ms;
  opacity: 0;
  transform: translateY(var(--distance)) scale(.98);
  will-change: opacity, transform;
  transition:
    opacity var(--dur) var(--ease) var(--delay, 0ms),
    transform var(--dur) var(--ease) var(--delay, 0ms);
}
#site-footer .ft-col.aos-lite.is-inview{
  opacity: 1;
  transform: none;
}
/* 首頁段落標題 */
.home-sec-hd{ display:flex; align-items:center; justify-content:space-between; margin: 8px 0 12px; }
.home-sec-title{ font-size: clamp(18px, 2.2vw, 24px); font-weight: 800; color: var(--fg); }

/* 卡片角標（tag） */
.prod-image-wrap{ position:relative; }
.prod-badge{
  position:absolute; left:8px; top:8px;
  padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700;
  background: var(--footer-badge-bg, rgba(0,0,0,.06));
  color: var(--card-fg); border:1px solid var(--border);
  box-shadow: var(--shadow);
}

/* 各標籤微色差（用主色混合，不硬編） */
.badge-featured{ background: color-mix(in oklab, var(--btn-bg) 12%, var(--card)); }
.badge-limited { background: color-mix(in oklab, #ef4444 16%, var(--card)); }
.badge-sale    { background: color-mix(in oklab, #f59e0b 18%, var(--card)); }
.badge-hot     { background: color-mix(in oklab, #e11d48 16%, var(--card)); }
.badge-new     { background: color-mix(in oklab, #22c55e 18%, var(--card)); }

/* 促銷價樣式 */
.price-old{ color: var(--muted); }
.price-promo{ color: var(--price); font-weight: 800; }


.btn-like:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
/* 關閉全域 hero（非首頁時加在 <body data-hero="off">） */
body[data-hero="off"] .hero,
body[data-hero="off"] .hero-bg {
  display: none !important;
}

#menu { margin: 0 auto var(--section-gap); }
#menu {
  display: block;
  width: 100%;
  margin: 0 auto var(--section-gap);
  position: relative;
  z-index: 1;
}
/*#menu .bn {
  position: relative; height: var(--banner-height, 25vh);
  border-radius: 16px; overflow: hidden; box-shadow: var(--shadow);
  background: var(--card);
}*/
#menu .bn {
  position: relative;
  height: var(--banner-height, 25vh);
  border-radius: 16px;
  overflow: hidden;
  background: var(--card);
  z-index: 2;
}
#menu .bn-slide {
  position:absolute; inset:0; background-size:cover; background-position:var(--bn-pos, center center);
  opacity:0; transition: opacity var(--bn-dur, 600ms) ease;
}
#menu .bn-slide.is-active { opacity:1; }
#menu .bn-overlay {
  position:absolute; inset:0; pointer-events:none;
  background: color-mix(in oklab, var(--fg) 6%, transparent);
  opacity: var(--bn-overlay, .15);
}
#menu .bn-slogan{
  position:absolute; left:24px; bottom:18px;
  padding:10px 14px; border-radius:12px;
  background: rgba(0,0,0,.35); color:#fff; font-weight:800; line-height:1.3;
  white-space: pre-line; text-shadow: 0 2px 8px rgba(0,0,0,.45);
  backdrop-filter: saturate(140%) blur(6px); box-shadow: var(--shadow);
}