/* =========================================================
   全站樣式（整理版）— 已加中文註解 & 避免與商品頁命名衝突
   =======================================================*/

/* ========== 變數與基礎 Reset ========== */
:root{
  --main-bg:#fff;
  --main-text:#14022c;
  --deep-purple:#14022c;
  --brand-purple:#3C0071;
  --accent-gold:#efd9a5;
  --footer-purple:#120023;
  --footer-text:#efd9a5;
  --nav-link:#b4aee5;
  --gray:#F5F5F5;
  --bottom-bar-h: 58px; /* 底欄實際高度 */
  --shine-dur: 4.6s;          /* 掃光速度：改這個就同時生效 */
}

html{ box-sizing:border-box; }
*,*::before,*::after{ box-sizing:inherit; }

body{
  background:var(--main-bg);
  color:var(--main-text);
  margin:0;
  font-family:'Noto Sans TC','微軟正黑體',Arial,sans-serif;
}

/* 通用：讓圖片不超框、移除行動瀏覽器點擊高亮 */
img{ max-width:100%; height:auto; display:block; }
a{ -webkit-tap-highlight-color:transparent; }

/* =========================================================
   （新增）JS include 占位：避免 header 動態載入時畫面跳動
   用途：當 <div data-include="/partials/header.html"> 尚未替換成真正 header，
         先占位一個與 header 等高的空區塊（高度依 .fixed-header）
   =======================================================*/
[data-include="/partials/header.html"]{
  display:block;
  min-height:52px; /* 與 .fixed-header 高度一致 */
}

/* =========================================================
   頁首（LOGO、可橫滑選單、左右淡出遮罩、桌機搜尋）
   =======================================================*/
.fixed-header{
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  background:var(--deep-purple);
  box-shadow:0 1px 12px #0002;
  width:100%; min-height:52px;
}
.header-inner{
  display:flex; align-items:center; justify-content:flex-start;
  max-width:1160px; margin:0 auto; padding:0 10px;
}
.logo-block{ margin-right:24px; }
.logo-block img{ height:38px; max-width:175px; margin:6px 0 2px; }

.nav-scroll-wrap{ position:relative; width:100%; margin-left:0; }

.main-nav.nav-row{
  display:flex; flex-wrap:nowrap; align-items:center; gap:18px;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.main-nav.nav-row::-webkit-scrollbar{ display:none; }

/* 導覽連結 + 小鈴鐺點擊區（#noticeIcon 是按鈕的 id） */
.main-nav a, #noticeIcon{
  color:var(--nav-link); text-decoration:none;
  font-size:1.06rem; font-weight:600;
  padding:5px 7px; background:none; cursor:pointer;
  white-space:nowrap; margin:2px 0; letter-spacing:1px;
}
.main-nav a:hover, .main-nav a.active{ color:var(--accent-gold); }

#noticeIcon img{
  filter:drop-shadow(0 0 1px #fff);
  transition:filter .2s;
  vertical-align:middle; height:22px; width:22px;
  margin-left:2px; margin-bottom:2px;
}
#noticeIcon:hover img{ filter:drop-shadow(0 0 6px #ffde76); }

/* 導覽左右淡出 */
.nav-fade{
  position:absolute; top:0; bottom:0; width:48px;
  pointer-events:none; z-index:2; display:none;
}
.fade-left{ left:0;  background:linear-gradient(to right,var(--deep-purple) 10%,rgba(20,2,44,0.01) 100%); }
.fade-right{ right:0; background:linear-gradient(to left ,var(--deep-purple) 10%,rgba(20,2,44,0.01) 100%); }

/* 桌機搜尋欄（跟 header 高度對齊） */
.desktop-search-form{
  display:flex; align-items:center; margin-left:10px;
  height:52px; padding-top:2px; box-sizing:border-box;
}
.desktop-search-input{
  padding:5px 10px; border-radius:8px;
  border:1.5px solid var(--accent-gold);
  background:#f5f5fa; color:var(--deep-purple);
  font-weight:600; font-size:1.01rem; outline:none;
  transition:background .2s, border .2s; width:130px; line-height:1.3;
}
.desktop-search-input:focus{ background:#fff9ec; border-color:var(--brand-purple); }

/* =========================================================
   （新增）小鈴鐺按鈕（無障礙）
   目的：支援鍵盤操作（Enter/Space），同時保留原有視覺。
   =======================================================*/
.notice-btn{
  background:transparent;
  border:0;
  line-height:0;     /* 移除按鈕內部額外行高 */
  cursor:pointer;
}
.notice-btn img{ display:block; }
.notice-btn:focus-visible{
  outline:2px solid var(--accent-gold);
  outline-offset:3px;
  border-radius:6px;
}

/* =========================================================
   公告 Modal
   =======================================================*/
#noticeModalBg{
  display:none; position:fixed; left:0; top:0;
  width:100vw; height:100vh; z-index:999;
  background:rgba(30,18,44,0.36); backdrop-filter:blur(1px);
  justify-content:center; align-items:center;
}
#noticeModal{
  background:#fff; border-radius:20px; box-shadow:0 10px 60px #3C007170;
  padding:24px 18px 20px; max-width:355px; width:98vw; text-align:center;
  position:relative; animation:noticepop .23s; font-size:1.13rem;
  color:#2e174d; line-height:1.72; letter-spacing:.5px; border:2px solid #efd9a5;
}
@keyframes noticepop{ from{opacity:0; transform:scale(.95);} to{opacity:1; transform:none;} }
#noticeModal .close-btn{
  position:absolute; right:13px; top:9px; background:none; border:none;
  font-size:1.4rem; color:#bbb; cursor:pointer; font-weight:700;
  transition:.18s; line-height:1;
}
#noticeModal .close-btn:hover{ color:#d72323; }
#noticeModal b, #noticeModal strong{ color:#2d1b8d; font-weight:900; font-size:1.19em; margin:0 1px; }
#noticeModal .notice-link{ color:#208c34; font-weight:700; text-decoration:underline; padding:0 3px; }

/* =========================================================
   頁尾（社群圖標／聯絡資訊）
   =======================================================*/
footer{
  background:var(--footer-purple); color:var(--footer-text);
  text-align:center; padding:34px 8px 20px;
  font-size:1.08rem; margin-top:54px; border-top:4px solid var(--accent-gold);
}
.footer-icons{
  display:flex; justify-content:center; flex-wrap:wrap; gap:20px; margin-bottom:12px;
}
.footer-icon-link img{
  height:28px; width:auto; border-radius:6px; background:transparent;
  vertical-align:middle; transition:box-shadow .18s; display:inline-block;
}
.footer-icon-link:hover img{ box-shadow:0 0 8px #efd9a577; }

.footer-contact{
  margin:8px auto 0; font-size:.99rem; color:var(--footer-text);
  text-align:center; max-width:660px; line-height:1.7;
  display:flex; justify-content:center; align-items:center; gap:24px; flex-wrap:wrap;
}
.footer-contact .contact-icon{
  height:22px; width:22px; vertical-align:middle; margin-right:4px; margin-left:3px;
  display:inline-block; position:relative; top:2px;
}
.footer-contact a{ color:var(--footer-text); text-decoration:underline; }
.copyright{ margin-top:10px; font-size:.98rem; color:#c9ae84; }

/* =========================================================
   主內容（首頁、列表頁會用到）
   =======================================================*/
main{
  max-width:1160px; margin:36px auto 0; padding:70px 12px 0;
}
.section-title{
  color:var(--brand-purple); font-size:1.32rem; font-weight:700;
  border-left:7px solid var(--accent-gold); padding-left:12px; margin:32px 0 18px;
}

/* Banner 單張 */
.banner-img{
  width:100%; border-radius:18px; margin-bottom:18px; box-shadow:0 4px 28px #14022c22;
}

/* 商品列表（卡片） */
.product-list{
  display:flex; flex-wrap:wrap; gap:22px 16px; margin-bottom:16px;
}
.product-card{
  background:var(--gray); border-radius:13px; box-shadow:0 2px 10px #14022c13;
  padding:14px 10px 10px; width:calc(25% - 12px); min-width:180px; max-width:235px;
  text-align:center; border:2px solid #fff; transition:box-shadow .2s;
}
.product-card:hover{ box-shadow:0 4px 18px #3C007155; }
.product-card img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; margin-bottom:8px;
}
/* ⬇️ 加上父層，避免和商品頁 .product-title 衝突 */
.product-card .product-title{
  font-weight:700; color:var(--brand-purple); margin-bottom:3px; font-size:1.07rem;
}
.product-card .product-desc{
  font-size:.98rem; color:#636381; margin-bottom:7px;
}
.product-card .product-link{
  display:inline-block; background:var(--accent-gold); color:var(--deep-purple);
  font-weight:600; border-radius:7px; padding:4px 12px; text-decoration:none;
  margin-top:3px; font-size:.96rem; transition:background .2s, color .2s;
}
.product-card .product-link:hover{ background:#ca9b52; color:#fff; }

/* Blog 列表 */
.blog-list{ display:flex; flex-wrap:wrap; gap:18px 12px; }
.blog-card{
  background:var(--gray); border-radius:12px; padding:11px 11px 8px;
  min-width:160px; max-width:200px; box-shadow:0 1px 8px #63638110;
  text-align:center; margin-bottom:10px;
}
.blog-card img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; margin-bottom:6px;
}
.blog-card .blog-title{
  font-size:1.02rem; color:var(--brand-purple); font-weight:700; margin-bottom:5px;
}
.blog-card .blog-desc{ color:#464646; font-size:.94rem; }

/* 分類快速導覽 */
.cat-nav{
  display:flex; flex-wrap:wrap; gap:13px; margin:24px 0;
}
.cat-nav a{
  display:inline-block; background:var(--deep-purple); color:var(--accent-gold);
  border-radius:7px; padding:7px 22px; text-decoration:none; font-weight:600;
  font-size:1rem; letter-spacing:1px; transition:background .15s;
}
.cat-nav a:hover{ background:var(--brand-purple); }

/* =========================================================
   手機底部懸浮搜尋＋訂購欄（只在 <=900px 顯示）
   Mobile Bottom Bar — 品牌板（白底紫字＋滿版掃光）＋ 訂購膠囊（精品金 hover）
   =======================================================*/

/* 只在手機顯示，桌機隱藏：媒體查詢會開啟 .mobile-bottom-bar 的 display；
   這裡定義視覺與版型（grid 兩欄） */


.mobile-bottom-bar{
  display: grid;
  grid-template-columns: 1fr clamp(160px, 40vw, 260px);
  align-items: center;
  gap: 10px;

  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  height: 58px;
  padding: 6px 8px 7px;

  background: #fff;
  border-top: 2px solid var(--accent-gold);

  /* 浮起感（很克制） */
  box-shadow:
    0 -8px 18px rgba(20, 2, 44, .18),
    0 -2px  8px rgba(20, 2, 44, .10);
}
/* 金邊上方一點柔光，增加厚度感 */
.mobile-bottom-bar::after{
  content:"";
  position:absolute; left:0; right:0; top:-2px; height:10px;
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(239,217,165,.55) 0%,
    rgba(239,217,165,.10) 60%,
    rgba(239,217,165,0)   100%);
  filter: blur(1px);
  opacity:.85;
}

/* ===== 左側：品牌牌匾（白底紫字，無膠囊） ===== */
.mobile-bottom-bar .brand-plate{
  position: relative;
  overflow: hidden;

  height: 46px;
  padding: 0 8px;
  border: none;
  border-radius: 0;
  background: #fff;
  color: var(--brand-purple);

  display: flex; align-items: center; justify-content: flex-start;

  /* 讓左塊本身也微微浮起 */
  box-shadow: 0 4px 10px rgba(20,2,44,.10);
}
/* 文字排版（中英並列，手機不擠壓） */
.mobile-bottom-bar .brand-plate .brand-text{
  display: flex; align-items: baseline; gap: 6px;
  font-weight: 800; letter-spacing: .3px;
  color: var(--brand-purple);
}
.mobile-bottom-bar .brand-plate .brand-cn{ font-size: 1.05em; }
.mobile-bottom-bar .brand-plate .brand-en{ font-size: .92em; opacity: .92; }

/* 讓 grid 子項可縮，不被內容撐爆 */
.mobile-bottom-bar .brand-plate{ min-width: 0; }

/* 不拆「阿莫司」；中英文正常情況保持單行 */
.mobile-bottom-bar .brand-plate .brand-cn,
.mobile-bottom-bar .brand-plate .brand-en{
  white-space: nowrap;
  line-height: 1.05;
}

/* 453px 以下：改成上下兩行，字級用 clamp 微縮但不會太小 */
@media (max-width: 453px){
  .mobile-bottom-bar .brand-plate .brand-text{
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* 左對齊比較穩 */
    gap: 0;                    /* 行距靠字級控制 */
  }
  .mobile-bottom-bar .brand-plate .brand-cn{
    font-size: clamp(14px, 4.6vw, 18px);
  }
  .mobile-bottom-bar .brand-plate .brand-en{
    font-size: clamp(11px, 3.6vw, 14px);
    opacity: .92;
  }
}






/* 滿版掃光（從左掃到右、會掃到字尾） */
.mobile-bottom-bar .brand-plate::after{
  content:"";
  position:absolute;
  top:-60%; left:-60%;
  width:120%; height:220%;
  transform: translateX(-180%) rotate(20deg);
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0)   0%,
      rgba(255,255,255,.55) 40%,
      rgba(255,255,255,.95) 50%,
      rgba(255,255,255,.55) 60%,
      rgba(255,255,255,0)  100%),
    radial-gradient(circle at 50% 50%, rgba(214,179,106,.25), rgba(214,179,106,0) 60%);
  mix-blend-mode: screen;
  filter: blur(.6px);
  pointer-events: none;
  will-change: transform;
  animation: amosPlateShine var(--shine-dur) linear infinite;
}

/* 文字掃光（如果有啟用 brandShine） */
.mobile-bottom-bar .brand-plate .brand-text{
  animation-duration: var(--shine-dur) !important;
}

/* 若某頁想暫停掃光，HTML 加 class="no-shine" 到 brand-plate 即可 */
.mobile-bottom-bar .brand-plate.no-shine::after{ animation: none !important; opacity: 0 !important; }

/* 掃光動畫（覆蓋到整個文字區，確保掃到字尾） */
@keyframes amosPlateShine{
  0%   { transform: translateX(-180%) rotate(20deg); opacity: 0; }
  10%  { opacity: .95; }
  65%  { transform: translateX(180%) rotate(20deg); opacity: .95; }
  100% { transform: translateX(180%) rotate(20deg); opacity: 0; }
}

/* ===== 右側：立即訂購（深紫底；hover 精品金） ===== */
.mobile-bottom-bar .buy-btn{
  height: 46px; border: none; border-radius: 16px;
  padding: 0 14px;

  font-size: 1.13em; font-weight: 900; letter-spacing: 1.2px;
  cursor: pointer; color: #fff;
  background: linear-gradient(92deg,#3C0071 0%, #6A379E 100%);
  box-shadow:
    0 6px 16px rgba(20,2,44,.20),
    0 0 0 2px var(--accent-gold) inset;
  transition: transform .06s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.mobile-bottom-bar .buy-btn:hover{
  background: linear-gradient(92deg,#d6b36a 0%, #efd9a5 100%);
  color: var(--brand-purple);
  box-shadow:
    0 10px 24px rgba(214,179,106,.35),
    0 0 0 2.5px var(--brand-purple) inset;
}
.mobile-bottom-bar .buy-btn:active{ transform: translateY(1px); }

/* 極窄螢幕：避免右鍵被擠得太小 */
@media (max-width:360px){
  .mobile-bottom-bar{ grid-template-columns: 1fr 180px; }
}

/* 無動態偏好時，自動關閉掃光 */
@media (prefers-reduced-motion: reduce){
  .mobile-bottom-bar .brand-plate::after{ animation: none; opacity: 0; }
}

/* =========================================================
   響應式 RWD
   =======================================================*/
   
   
/* 桌機寬度也預留底部空間，避免蓋住頁尾 */
@media (min-width:901px){
  body{ padding-bottom: calc(var(--bottom-bar-h) + 6px); }
}

@media (max-width:980px){
  .product-list{ gap:18px 10px; }
  .product-card{ width:calc(33.333% - 9px); }
}

@media (max-width:900px){
  .header-inner{
    display:flex; flex-direction:column; align-items:center; padding:0 2px;
  }
  .logo-block img{ height:26px; max-width:90px; }
  .logo-block{ margin:0 auto !important; display:block; }
  .nav-scroll-wrap{ margin-left:0; }
  .main-nav.nav-row{ gap:0 2px; font-size:.95rem; }
  .main-nav.nav-row a, #noticeIcon{
    font-size:1rem; padding:0 10px 4px;
    min-width:max-content; flex:0 0 auto; white-space:nowrap;
    letter-spacing:.5px; font-weight:600; text-align:center;
  }
  main{ padding:62px 1px 0 1px !important; }
  .banner-img{ border-radius:9px; }
  .product-list, .blog-list{ flex-direction:column; gap:11px; }
  .product-card, .blog-card{ width:100%; min-width:unset; max-width:unset; }
  .cat-nav{ gap:7px; }
  .cat-nav a{ padding:6px 12px; font-size:.93rem; }
  footer{ padding:13px 2px 9px; }
  .footer-contact{ gap:10px; }
  .footer-info, .footer-contact{ font-size:.93rem; }

  /* 只在手機顯示底部工具列，並隱藏桌機搜尋
     注意：這裡維持 grid，不要改 flex，避免打架 
     改為用同一個變數（避免高度改了忘記一起調） */

  body{ padding-bottom: calc(var(--bottom-bar-h) + 6px) !important; }
  .desktop-search-form{ display:none !important; }
}

/* =========================================================
   無障礙：鍵盤可見焦點（全站常用互動元件）
   =======================================================*/

/* 頂部選單連結 */
.main-nav a:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* 頁尾社群 icon 連結（給 <img> 顯示外框） */
.footer-icon-link:focus-visible img {
  outline: 2px solid var(--accent-gold);
  outline-offset: 3px;
  border-radius: 8px;
}

/* 站內搜尋欄（桌機／手機）
   ⬇️ 保留手機搜尋欄的焦點樣式以供未來擴充（目前未顯示 search-bar-mobile） */
.desktop-search-input:focus-visible,
.mobile-bottom-bar .search-bar-mobile:focus-visible {
  outline: 2px solid var(--brand-purple);
  outline-offset: 2px;
  border-radius: 10px;
}

/* 行動按鈕（如商品卡片 .product-link、或你自訂的 .btn） */
.product-card .product-link:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 3px;
  border-radius: 8px;
}

/* 首頁按鈕樣式（共用 header 最終版，已合併去重） */
.main-nav .home-btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.1rem; padding:0 10px; text-decoration:none;
  color: var(--nav-link);
}
.main-nav .home-btn:hover{
  color: var(--accent-gold);
  border-radius:6px;
}

/* 讓第一個導覽項目不要被左側淡出吃到 */
.main-nav.nav-row > *:first-child { margin-left: 6px; }

/* 讓 header 還沒替換前先占住高度，避免跳動 */





/* ===== 防拷與防長按存圖（可全站共用） ===== */
/* 預設禁止文字選取與 iOS 長按選單 */
html, body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 圖片：禁止拖拽與 iOS 長按存圖 */
img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* 允許「需要選取」的地方（表單/可編輯/你手動加 .allow-select） */
input, textarea, [contenteditable], .allow-select {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* 若有你希望允許右鍵的區域，加 .allow-context 到元素上即可 */






/* ===== 精選商品 RWD 調整（不改動其他樣式） ===== */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 電腦版：4 個橫排一排 */
  gap: 24px;
}


@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* 手機版：兩個一列，自動縮減成雙排 */
  }
}



/* 恢復商品卡片 hover 發光效果 */
.product-card:hover {
  box-shadow: 0 0 12px rgba(60, 0, 113, 0.4), 0 0 20px rgba(239, 217, 165, 0.3) !important;
  border-color: #efd9a5 !important;
  transform: translateY(-2px);
  transition: all 0.3s ease;
}
.product-card {
  transition: all 0.3s ease;
}











/* 导航栏容器：必须先设置overflow-x: auto，确保能滑动 */
.main-nav.nav-row {
  overflow-x: auto;
  scrollbar-width: none; /* 隐藏原生滚动条，避免破坏设计 */
  -ms-overflow-style: none;
  position: relative; /* 给伪元素做定位父容器 */
}
.main-nav.nav-row::-webkit-scrollbar {
  display: none; /* 隐藏Webkit浏览器的滚动条 */
}

/* 左右淡入淡出提示层：用绝对定位固定在容器边缘 */
.nav-fade-left,
.nav-fade-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px; /* 渐变提示的宽度，可根据喜好调整 */
  pointer-events: none; /* 不阻挡点击/滑动 */
  z-index: 10;
  transition: opacity 0.25s ease;
}

/* 左侧淡入（显示时提示可以往右滑） */
.nav-fade-left {
  left: 0;
  background: linear-gradient(to right, rgba(30,0,50, 0.95), transparent);
  opacity: 0; /* 初始隐藏，只有往左滑出时才显示 */
}

/* 右侧淡出（提示可以往左滑） */
.nav-fade-right {
  right: 0;
  background: linear-gradient(to left, rgba(30,0,50, 0.95), transparent);
  opacity: 1; /* 初始显示，提示右边还有内容 */
}

[data-include^="/partials/header.html"]{ display:block; min-height:52px; }