@charset "utf-8";
/* =====================================================================
   版型共用色票層                                          2026-09-20
   載入順序：css/1712281.css → 這個檔 → theme-b.css / theme-c.css
             → 伺服器輸出的 <style>:root{…}</style>（色盤與個別微調）

   這個檔只做兩件事：
     1. 在 :root 宣告全部色票，預設值＝版型A 現行配色
     2. 把 1712281.css 裡寫死的顏色改成引用色票（選擇器完全照抄，靠載入順序覆蓋）

   刻意只換顏色，不換形狀：圓角、寬度、浮動、間距一律留給版型層，
   所以資料庫還沒升級、也沒選色盤時，這個檔上線後畫面與上線前完全相同。

   永遠不吃色票的顏色：
     a.btn1.line 的 #06C755 是 LINE 品牌規定色
     a.changecolor 的閃爍紅是「特價／活動」語意色
   ===================================================================== */

:root{
  /* ---- 文字 ---- */
  --text:#333;            /* 全站內文、連結 */
  --text-strong:#000;     /* 側欄分類連結、問與答題號 */
  --text-muted:#666;      /* 次要文字、頁尾、各頁大標 */
  --text-faint:#999;      /* 淡文字、日期、站名 */

  /* ---- 底色與框線 ---- */
  --bg:#fff;              /* 整個網頁的背景（2026-09-22 後台「網站背景色」可改；色盤不動它） */
  --footer-bg:var(--surface-alt); /* 頁尾背景：預設跟著色盤的次底色，後台「頁尾背景色」可另外指定 */
  --surface:#fff;         /* 主要底色 */
  --surface-alt:#f6f6f6;  /* 頁尾、列 hover */
  --surface-hover:#f2f2f2;/* 最新消息列 hover */
  --panel:#efefef;        /* 淺面板：小標、頁籤、問與答 */
  --border:#ccc;          /* 框線 */
  --topbar-bg:rgba(255,255,255,0.8); /* 固定在最上方的工具列 */

  /* ---- 主色 ---- */
  --brand:#6a5b40;        /* 主色：側欄 hover、目前分類 */
  --brand-dark:#4a3f2c;   /* 主色加深 */
  --on-brand:#fff;        /* 主色底上的文字 */
  --accent:#960;          /* 次要強調：最新消息標題與 hover */
  --link-alt:#369;        /* 訂單裡的商品名連結 */

  /* ---- 語意色 ---- */
  --price:#f00;           /* 售價、金額 */

  /* ---- 按鈕（版型層整組換掉，色盤不動它） ---- */
  --btn-bg:#666;
  --btn-fg:#fff;
  --btn-bg-hover:#333;
  --btn-fg-hover:#fc0;
  --btn-ghost-border:#999; /* a.btn 外框按鈕 */

  /* ---- 形狀（只有版型層會改；版型A 不使用，維持原樣） ---- */
  --radius:3px;
  --radius-lg:1em;
}

/* ---------- 全域 ---------- */
a:link, a:visited{color:var(--text);}
a:hover, a:active{color:var(--text-muted);}
/* 網站背景色（2026-09-22）。整頁上色：頁首、內容區、大圖兩側的留白都是。預設白，沒設定的店一個像素都不會變。
   頂端固定工具列原本是 80% 透明白，這裡讓它改成「80% 透明的背景色」，捲動時壓在內容上仍然是半透明的；
   不認得 color-mix() 的舊瀏覽器維持 :root 裡的 80% 透明白。 */
body{background:var(--bg);}
@supports (background:color-mix(in srgb, red 50%, transparent)){
  :root{--topbar-bg:color-mix(in srgb, var(--bg) 80%, transparent);}
}

/* ---------- 頁尾 ---------- */
#footer{background:var(--footer-bg); color:var(--text-muted);}
.footer-l a{color:var(--text-muted);}
.copyright{border-top-color:var(--border);}
.websitename, .company{color:var(--text-faint);}

/* ---------- 側欄分類選單 ---------- */
.subnav h3{background:var(--panel); color:var(--text-muted);}
#submenu ul li a{color:var(--text-strong);}
#submenu ul li a:hover{color:var(--brand);}
#submenu ul li ul li a{color:var(--text-muted);}
/* 目前所在的小分類（2026-09-22 業主回報：版型A 換色系時這一格不會跟著換）。
   UC/ProductClassMenu.ascx.vb 把「#efefef→#fff 漸層、#000 字、#333 底線」直接寫成行內樣式，行內樣式贏過樣式表，
   只能用 !important 單點蓋掉。三個色票的預設值就是那三個顏色（--panel #efefef、--surface #fff、--text-strong #000、--text #333），
   底線業主指定用主色 --brand（同日第二次指示）：預設 #6a5b40 是棕色，所以沒選色系時這一格的底線會從原本的 #333 變成棕色，
   其餘（漸層、字色）預設值和原本一樣。--brand 本來就是版型A 側欄 hover 的顏色，同一個色系裡是一致的。
   版型B / C 各自的樣式表排在後面、也有同一條，會蓋過這裡。 */
#submenu ul li a[style*="linear-gradient"]{
  background:linear-gradient(90deg, var(--panel) 80%, var(--surface)) !important;
  color:var(--text-strong) !important;
  border-bottom-color:var(--brand) !important;}

/* ---------- 各頁大標與麵包屑 ---------- */
.main h3.tit{color:var(--text-muted); border-left-color:var(--border);}
.path{color:var(--text-muted);}
/* 分類頁的「全部商品 / 大分類 / 小分類」。原本是寫死在 .aspx 裡的 style=，
   這兩個預設值就是原來的 #666 與 #999，所以版型A 看起來完全一樣。 */
.pathline{width:100%; font-size:13px; color:var(--text-muted);}
.pathsub{font-size:13px; color:var(--text-faint);}

/* ---------- 按鈕 ---------- */
a.btn{background:var(--surface); border-color:var(--btn-ghost-border); color:var(--btn-ghost-border);}
a.btn:hover{background:var(--btn-ghost-border); color:var(--on-brand);}
a.btn1:link, a.btn1:visited{background:var(--btn-bg); color:var(--btn-fg);}
a.btn1:hover, a.btn1:active{background:var(--btn-bg-hover); color:var(--btn-fg-hover);}
/* LINE 是品牌規定色，任何版型與色盤都不改 */
a.btn1.line, a.btn1.line:link, a.btn1.line:visited{background-color:#06C755; color:#FFF;}
a.btn1.line:hover, a.btn1.line:active{background:#05a648; color:#FFF;}

/* ---------- 表單 ---------- */
input, select, textarea{border-color:var(--border);}

/* ---------- 價格 ---------- */
.red, .memberOrderDetail .listblock span.red, .product .listblock span.price{color:var(--price);}
/* 商品卡的錢字號與「本產品未開放購買」。原本是寫死在 VB 字串裡的 style='color:#999'，
   這裡的預設值 --text-faint 就是 #999，所以版型A 看起來完全一樣。 */
.cur{color:var(--text-faint);}

/* ---------- 最新消息 ---------- */
.news .listblock{border-bottom-color:var(--border);}
.news .listblock span{color:var(--text-muted);}
.news .listblock:hover{background:var(--surface-hover); color:var(--accent);}
.news .innerhtml h2.tit{color:var(--accent);}

/* ---------- 商品明細 ---------- */
/* 商品介紹整塊（.main.productDetail）維持白底、圓角，像一張卡片浮在網站背景色上（2026-09-22 業主看了整頁上色之後指定）。
   背景色沒設定時 --bg 和 --surface 都是白，看不出差別、版面也沒動（padding 沿用 .main 原本的 1em）。
   左邊的分類側欄不包進來，和業主給的參考圖一樣留在背景色上。 */
.main.productDetail{background:var(--surface); border-radius:6px;}
/* 卡片的上緣切齊左側「全部商品」小標的上緣（業主 2026-09-22）。
   側欄的小標從 .side 的上緣往下 1em（.side 的 padding）＋ 1.17em（h3 的預設 margin）才開始，所以卡片要往下推同樣的距離；
   卡片自己的 padding-top 歸零、改由 h3 的 margin 撐，內容只比原本低 18px。
   只有設了背景色才推：--card-on 由伺服器在 <style>:root{}</style> 裡輸出（Utility.ThemeHeadCss，有 --bg 才給 1），
   沒設背景色的店 margin 0、padding 1em，版面和原本一個像素都不差。手機（側欄在上面、直向堆疊）不套。 */
@media screen and (min-width:768px){
  .main.productDetail{margin-top:calc(var(--card-on,0) * 2.17em); padding-top:calc(1em - var(--card-on,0) * 1em);}
}
.productDetail h2.tit, #productDetail h4.tit{color:var(--text);}
.productDetail h4.tit{background:var(--panel);}
.recommend:hover{background:var(--panel);}
a.minus, a.add{background:var(--surface); border-color:var(--border); color:var(--text);}
a.minus:hover, a.add:hover{background:var(--border); color:var(--text-muted);}
/* 商品規格按鈕（2026-09-22）：選到的用主色框線＋主色字，跟色系走 */
.specpick .specname{color:var(--text-strong);}
a.specbtn, a.specbtn:link, a.specbtn:visited{border-color:var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text);}
a.specbtn:hover{border-color:var(--brand); background:var(--surface-alt);}
a.specbtn.hit, a.specbtn.hit:hover{border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); background:var(--surface); color:var(--brand);}
a.specbtn.nostock{color:var(--text-faint);}
a.specbtn small{color:var(--text-faint);}
.bookmark{border-bottom-color:var(--border);}
.bookmark li{background:var(--panel); color:var(--text-muted);
  border-left-color:var(--surface); border-right-color:var(--surface); border-top-color:var(--surface);}
.bookmark li:hover{color:var(--text-strong);}
.bookmark li.hit{background:var(--border); color:var(--text);}
/* 後台關掉商品問與答之後頁籤只剩「產品說明」一個:原本各佔 50%,只剩一個時撐滿、當成區塊標題（2026-09-22） */
.bookmark li:only-child{width:100%; cursor:default;}

/* ---------- 加入購物車之後的提示視窗（2026-09-22，取代 alert）----------
   markup 由 Product_Detail.aspx.vb 的 CartPopHtml 輸出。顏色全走色票：主按鈕與圖示是主色，跟著後台選的色系。
   z-index 240：在頂端工具列（200）、手機抽屜（230）之上。三個版型共用。 */
body.cartpop-open{overflow:hidden;}
.cartpop{position:fixed; left:0; top:0; z-index:240; width:100%; height:100%; background:rgba(0,0,0,0.45);
  display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; padding:1em; box-sizing:border-box;}
.cartpop-box{width:100%; max-width:380px; padding:2em 1.6em 1.6em 1.6em; box-sizing:border-box; border-radius:10px; text-align:center;
  background:var(--surface); color:var(--text); box-shadow:0 14px 48px rgba(0,0,0,0.28);
  -webkit-animation:cartpop-in .22s ease-out; animation:cartpop-in .22s ease-out;}
.cartpop-icon{display:inline-block; width:56px; height:56px; margin-bottom:0.6em; border-radius:50%; background:var(--brand); color:var(--on-brand); line-height:0;}
.cartpop-icon svg{width:56px; height:56px; padding:14px; box-sizing:border-box;}
.cartpop-box.err .cartpop-icon{background:var(--price);}
.cartpop-box h4{margin:0 0 0.4em 0; font-size:19px; font-weight:bold; color:var(--text-strong);}
.cartpop-box p{margin:0 0 1.4em 0; font-size:14px; line-height:1.7; color:var(--text-muted); word-break:break-all;}
.cartpop-btns{display:-webkit-flex; display:flex; -webkit-flex-direction:column; flex-direction:column; gap:0.6em;}
.cartpop-btns a{display:block; padding:0.7em 1em; border-radius:6px; font-size:15px; line-height:1.4; text-decoration:none; -webkit-transition:background .15s, color .15s; transition:background .15s, color .15s;}
.cartpop-btns a.cartpop-go, .cartpop-btns a.cartpop-go:link, .cartpop-btns a.cartpop-go:visited{background:var(--brand); color:var(--on-brand);}
.cartpop-btns a.cartpop-go:hover, .cartpop-btns a.cartpop-go:active{background:var(--brand-dark); color:var(--on-brand);}
.cartpop-btns a.cartpop-stay, .cartpop-btns a.cartpop-stay:link, .cartpop-btns a.cartpop-stay:visited{background:var(--surface); color:var(--text); border:1px solid var(--border);}
.cartpop-btns a.cartpop-stay:hover, .cartpop-btns a.cartpop-stay:active{background:var(--panel); color:var(--text-strong);}
@-webkit-keyframes cartpop-in{from{opacity:0; -webkit-transform:translateY(12px) scale(.96);} to{opacity:1; -webkit-transform:none;}}
@keyframes cartpop-in{from{opacity:0; transform:translateY(12px) scale(.96);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){.cartpop-box{-webkit-animation:none; animation:none;}}

/* ---------- 商品問與答 ---------- */
.qablock{border-color:var(--panel); background:var(--panel);}
.qnum{color:var(--text-strong);}
.qdate{color:var(--text-faint);}

/* ---------- 會員中心 ---------- */
.memberOrderDetail div.listblock.one:hover{background:var(--surface-alt);}
.memberOrderDetail div.listblock span{color:var(--text-faint);}
a.proname{color:var(--link-alt);}

/* ---------- 結帳 ---------- */
.checkselect{border-color:var(--border);}
.checkselect:hover{background:var(--surface-alt);}
.radioselect{border-color:var(--panel);}
.radioselect:hover{background:var(--surface-alt);}
.progress h3{color:var(--text-faint);}
.progress .listblock{border-color:var(--panel);}

/* ---------- 手機 ---------- */
@media screen and (max-width:767px){
  .topblue{background:var(--topbar-bg); border-bottom-color:var(--border);}
  .nav{background:var(--surface);}
  .nav a{color:var(--text-muted); border-bottom-color:var(--border);}
  .nav a:hover{background:var(--btn-bg-hover); color:var(--on-brand);}
  #submenu{border-color:var(--panel);}
  .subnav{background:var(--surface); border-color:var(--panel);}
  #submenu ul li a{border-bottom-color:var(--panel);}
  .subtoggle a{color:var(--text-muted);}
}

/* ---------- 平板 ---------- */
@media screen and (min-width:768px) and (max-width:1199px){
  .topblue{background:var(--topbar-bg); border-bottom-color:var(--border);}
  .nav{background:var(--panel);}
  .nav a{color:var(--text-muted); border-bottom-color:var(--border);}
  .nav a:hover{background:var(--btn-bg-hover); color:var(--on-brand);}
  .subnav a{border-bottom-color:var(--border);}
}

/* ---------- 桌機 ---------- */
@media screen and (min-width:1200px){
  /* 2026-09-21 業主要求：桌機版右上角包住「會員中心／購物車／搜尋」的框線拿掉。
     框線本身已經從 1712281.css 移除；這裡再明確歸零一次，是因為 1712281.css 的版本號
     是「日期」，一天才換一次，今天來過的人會卡在舊快取。這支的版本號可以立刻跳。 */
  .topblue{background:var(--topbar-bg); border-left:0; border-bottom:0;}
  /* 2026-09-22 業主要求：主選單底下那條 1px 分隔線全站拿掉（首頁大圖限寬之後，它會從大圖左右兩邊露出一段）。
     用 transparent 而不是 border:0 ── 那 1px 的位置還在，每一頁的內容都不會因此往上跳 1px。 */
  .nav-m{border-bottom-color:transparent;}
  .nav-m span{color:var(--border);}
  .nav-m a{border-bottom-color:var(--bg);}	/* 主選單每個連結底下 2px 的「隱形」底線：要和網站背景同色才看不見（2026-09-22 業主設了米色背景後露出白線） */
  .nav-m a:hover{border-bottom-color:var(--panel);}
  .subnav a{border-bottom-color:var(--border);}
  #submenu ul li a:hover{border-bottom-color:var(--border);}
  /* 2026-09-22 首頁大圖：原本滿版等比例放大，寬螢幕上會高到佔滿整個第一屏（超過 1920 還會被放大變糊）。
     業主指定：最寬 1200px（和下方 .page 內容區同寬）置中，左右空著。三個版型共用同一段輪播，一起生效。
     只寫左右 margin，不可以用 margin 縮寫 —— slick-theme.css 靠 .slick-dotted 的 margin-bottom:30px 放下面那排圓點。
     1712281.css 也有同一條；這裡再寫一次的原因同上面框線那條（那支的版本號一天才換一次）。 */
  #defaultimg .responsive{max-width:1200px; margin-left:auto; margin-right:auto;}
}

/* =====================================================================
   三個版型共用的新元件。版型A 的頁面不會輸出這些標籤，
   所以下面的規則在版型A 等於不存在。版型B / C 只調外觀，不重寫結構。
   ===================================================================== */

/* ---- 列表頁工具列：共 N 項商品 ＋ 排序 ---- */
.listbar{width:100%; height:auto; float:left; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:0.5em; padding:0.5em 0;
  border-bottom:1px solid var(--border); margin-bottom:0.5em;}
.listbar .listcount{color:var(--text-muted); font-size:14px;}
.listbar label{color:var(--text-muted); font-size:14px; margin-right:0.3em;}
.listbar select{height:32px; border-radius:var(--radius); padding:0 0.4em; width:auto;}

.listempty{width:100%; float:left; padding:3em 1em; text-align:center; color:var(--text-muted);}
.listempty a{color:var(--brand); text-decoration:underline;}

/* ---- 分頁器 ---- */
.pager{width:100%; height:auto; float:left; text-align:center; padding:1.5em 0 0.5em 0;}
.pager a, .pager span{display:inline-block; min-width:36px; height:36px; line-height:34px;
  margin:0 3px 6px 3px; padding:0 0.5em; text-align:center; font-size:15px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); color:var(--text);}
.pager a:hover{border-color:var(--brand); color:var(--brand);}
.pager span.hit{background:var(--btn-bg); border-color:var(--btn-bg); color:var(--btn-fg);}
.pager span.gap{min-width:20px; border-color:transparent; background:none; color:var(--text-faint);}
.pager span.off{background:var(--panel); color:var(--text-faint);}

/* ---- 折扣標籤（由 ListPrice 與 Price 直接算出，不需要新資料） ---- */
.listblock.four > a > div[style*="background"]{position:relative;}
.tagsale{position:absolute; top:8px; left:8px; z-index:2;
  background:var(--price); color:#fff; font-size:12px; line-height:1;
  padding:5px 8px; border-radius:var(--radius);}
.oldprice{margin-right:0.4em; color:var(--text-faint); text-decoration:line-through; font-size:13px;}
.saveoff{display:inline-block; margin-left:0.4em; padding:4px 7px; font-size:12px; line-height:1;
  border:1px solid var(--price); color:var(--price); border-radius:var(--radius); vertical-align:middle;}

/* ---- 頁首（版型B / C 共用同一份 HTML，排列由各自的樣式表決定） ----
   這裡的 class 一律用 .hdr 前綴，刻意完全不碰 .topblue / #header / #logo /
   #logom / .nav-m ── 那些是版型A 的，一個字都不能受影響。
   但 .toggle / .nav / .icon1 / .pop1 / .closebtn 是共用 <script> 的綁定點，
   版型B / C 的 markup 必須沿用，所以這裡只加樣式、不改行為。 */
.hdr{width:100%; height:auto; float:left; position:relative; z-index:100;
  background:var(--surface); border-bottom:1px solid var(--border);}
.hdrbar{display:flex; align-items:center; gap:1em; padding:0.8em 1em;}
.hdrtoggle{display:none; flex:0 0 auto; cursor:pointer; color:var(--text);}
.hdrlogo{flex:0 0 auto; max-width:230px; line-height:0;}
.hdrlogo img{max-height:52px; width:auto;}
.hdrlogotext{font-size:20px; font-weight:bold; line-height:1.2; color:var(--text-strong);}
.hdrsearch{flex:1 1 200px; display:flex; min-width:0; max-width:520px; margin:0;}
.hdrsearch input[type=text]{flex:1 1 auto; min-width:0; height:38px; padding:0 0.8em;
  border:1px solid var(--border); background:var(--surface); color:var(--text);}
.hdrsearch input[type=button]{flex:0 0 auto; height:38px; padding:0 1.2em; cursor:pointer;
  border:1px solid var(--btn-bg); background:var(--btn-bg); color:var(--btn-fg);}
.hdrtools{flex:0 0 auto; margin-left:auto; display:flex; align-items:center; gap:0.2em;}
.hdricon{position:relative; display:inline-flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2px; padding:4px 10px; line-height:1; cursor:pointer; color:var(--text-muted);}
.hdricon:hover{color:var(--brand);}
.hdrlabel{font-size:12px; white-space:nowrap;}
.hdrbadge{position:absolute; top:0; right:4px; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--price); color:#fff;
  font-size:11px; font-style:normal; line-height:17px; text-align:center;}
.hdrbadge.zero{background:var(--text-faint);}
.hdrnavwrap{width:100%; float:left; border-top:1px solid var(--border);}
.hdrnavrow{display:flex; align-items:center; gap:0.6em; padding:0 1em;}
.hdrall{flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  padding:0.6em 1em; font-size:15px; color:var(--text);}
.hdrnav{flex:1 1 auto; display:flex; flex-wrap:wrap; align-items:center;}
.hdrnav a{display:inline-block; padding:0.8em 1.1em; font-size:16px; white-space:nowrap; color:var(--text);}
.hdrnav a:hover{color:var(--brand);}
.hdrnav a.hi{color:var(--price);}
.hdrnavm{display:none;}
.hdrnavm a{display:block; padding:0.7em 1em; font-size:15px;
  border-bottom:1px solid var(--border); color:var(--text-muted);}
.hdrnavm a.hi{color:var(--price);}
/* 手機搜尋彈窗：沿用版型A 的 .pop1 / .closebtn，只是樣式改由這裡出 */
.hdrpop{position:fixed; z-index:210; left:0; top:0; width:100%; height:100%;
  padding:2em; background:rgba(0,0,0,0.7);}
.hdrpop h2{margin:0; text-align:center; font-weight:normal; color:#fff;}
.hdrpop p{width:70%; margin:1.5em 15%; text-align:center;}
.hdrpop p.hdrpopclose{width:100%; margin:0; text-align:right;}
.hdrpop .closebtn{color:#fff;}
.hdrpop input[type=text]{width:100%; height:34px; padding:0 0.6em; border:1px solid var(--border);}
.hdrpop input[type=button]{width:100%; height:34px; cursor:pointer;
  border:1px solid var(--btn-bg); background:var(--btn-bg); color:var(--btn-fg);}
@media screen and (max-width:767px){
  .hdrbar{gap:0.5em; padding:0.6em 0.8em;}
  .hdrtoggle{display:inline-flex;}
  .hdrsearch{display:none;}          /* 手機改用放大鏡彈窗 */
  .hdrlogo{max-width:150px;}
  .hdrlogo img{max-height:40px;}
  .hdrlabel{display:none;}
  .hdrnavwrap{display:none;}         /* 手機走 .nav 展開選單 */
}

/* ---- 結帳步驟條（版型B / C）----
   版型A 走各頁原本寫死的三步 markup（.progress），那一組完全沒動。
   這裡的 class 版型A 永遠不會輸出，所以雖然 theme-base.css 三個版型都載，
   也影響不到版型A 的畫面。本批新增規則一律遵守這條。
   步數是實際流程的五個畫面，不是稿上的 3 步／4 步。 */
.csteps{width:100%; float:left; display:flex; flex-wrap:nowrap; padding:1.4em 0 1.8em 0;}
.cstep{flex:1 1 0; min-width:0; position:relative; text-align:center;}
.cstep i{position:relative; z-index:1; display:inline-flex; width:32px; height:32px;
  align-items:center; justify-content:center; border-radius:50%;
  background:var(--panel); color:var(--text-muted); font-style:normal; font-size:15px; line-height:1;}
.cstep b{display:block; margin-top:6px; font-size:15px; font-weight:normal; color:var(--text-muted);}
.cstep em{display:block; font-size:12px; font-style:normal; color:var(--text-faint);}
/* 連接線畫在圓圈的垂直中心，壓在圓圈底下 */
.cstep:before{content:''; position:absolute; z-index:0; top:16px; left:-50%;
  width:100%; height:1px; background:var(--border);}
.cstep:first-child:before{display:none;}
.cstep.hit i{background:var(--btn-bg); color:var(--btn-fg);}
.cstep.hit b{color:var(--text-strong); font-weight:bold;}
.cstep.done i{background:var(--brand); color:var(--on-brand);}
@media screen and (max-width:767px){
  .csteps{padding:1em 0 1.2em 0;}
  .cstep i{width:26px; height:26px; font-size:13px;}
  .cstep b{font-size:12px;}
  .cstep em{display:none;}
  .cstep:before{top:13px;}
}

/* ---- 首頁磚區標題（版型B / C）----
   版型A 那一行帶 inline style 的 <h3> 留在舊函式裡原封不動。 */
.sectit{width:100%; height:auto; float:left; clear:both;
  margin:1.2em 0 0.6em 0; padding:0; font-size:20px; font-weight:normal;
  color:var(--text-strong); border:0;}

/* ---- 結帳的「訂單金額」面板（版型B / C）---- */
.sumpanel{width:100%; float:left; margin:1.2em 0; padding:1.2em 1.4em;
  background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--radius-lg);}
.sumpanel h4{margin:0 0 0.8em 0; font-size:17px; color:var(--text-strong);}
.sumpanel p{display:flex; align-items:baseline; justify-content:space-between;
  margin:0.4em 0; font-size:15px; color:var(--text-muted);}
.sumpanel p b{font-weight:normal; color:var(--text); font-variant-numeric:tabular-nums;}
.sumpanel p b.pend{font-size:13px; color:var(--text-faint);}
.sumpanel p.sumtotal{margin-top:0.8em; padding-top:0.8em; border-top:1px solid var(--border);}
.sumpanel p.sumtotal span{font-size:16px; color:var(--text-strong);}
.sumpanel p.sumtotal b{font-size:22px; font-weight:bold; color:var(--price);}
@media screen and (min-width:1200px){
  /* 桌機把面板收到右邊，像稿上那樣 */
  .sumpanel{width:360px; float:right; margin-left:1.5em;}
}

/* ---- 頁尾（版型B / C 共用同一份 HTML，排列順序由各自的樣式表決定） ---- */
.footwrap{display:flex; flex-wrap:wrap; align-items:flex-start; gap:1.6em 2em; padding:2.4em 1em;}
.footbrand{flex:1 1 220px;}
.footname{margin:0 0 0.5em 0; font-size:17px; font-weight:normal; color:var(--text-strong);}
.footcols{flex:2 1 300px; display:flex; flex-wrap:wrap; gap:1.2em 2em;}
.footcol{flex:1 1 130px;}
.footcol h4{margin:0 0 0.5em 0; font-size:15px; font-weight:bold; color:var(--text-strong);}
.footcol a{display:block; padding:2px 0; font-size:14px; color:var(--text-muted);}
.footcol a:hover{color:var(--brand); text-decoration:underline;}
.footsub{flex:1 1 260px;}
.footsub .subtitle{margin:0 0 0.2em 0; font-size:17px; font-weight:normal; color:var(--text-strong);}
.footsub .subhint{margin:0; font-size:14px; color:var(--text-muted);}
.subform{display:flex; margin-top:0.7em; max-width:24em;}
.subform input[type=email]{flex:1 1 auto; min-width:0; height:38px; padding:0 0.7em;
  border:1px solid var(--border); border-right:0; background:var(--surface); color:var(--text);}
.subform input[type=submit]{flex:0 0 auto; height:38px; padding:0 1.4em; cursor:pointer;
  border:1px solid var(--btn-bg); background:var(--btn-bg); color:var(--btn-fg);}
.subform input[type=submit]:hover{background:var(--btn-bg-hover); border-color:var(--btn-bg-hover);}
/* 蜜罐：真人看不到也對不到焦點，被填了就代表是機器人 */
.hp{position:absolute !important; left:-9999px !important; top:auto !important;
  width:1px !important; height:1px !important; opacity:0 !important; overflow:hidden !important;}
.submsg{margin:0.6em 0 0 0; font-size:14px;}
.submsg.ok{color:var(--brand);}
.submsg.err{color:var(--price);}
.footsocial{flex:0 0 auto; display:flex; gap:0.5em; align-items:center;}
.footsocial a{display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:50%; color:var(--text-muted);}
.footsocial a:hover{border-color:var(--brand); color:var(--brand);}
.footfree{flex:1 1 200px;}
.copyright .page{padding:0.8em 1em; font-size:13px;}
@media screen and (max-width:767px){
  .footwrap{padding:1.6em 1em; gap:1.2em;}
  .footbrand, .footcols, .footsub, .footfree{flex:1 1 100%;}
  .footsocial{flex:1 1 100%; justify-content:center;}
}

/* ---- 顏色色塊（打開既有的 Colors / Module_ColorImage，不是新功能） ---- */
.swatchrow{width:100%; height:auto; float:left; padding:0.3em 0; line-height:0;}
.swatchrow .sw{display:inline-block; width:22px; height:22px; margin:0 6px 6px 0;
  border:1px solid var(--border); border-radius:50%; overflow:hidden; cursor:pointer; vertical-align:middle;}
.swatchrow .sw img{width:100%; height:100%; object-fit:cover;}
.swatchrow .sw.hit{border-color:var(--brand);}
/* 色票圖遺失時退成文字，不要輸出破圖 */
.swatchrow .swtext{display:inline-block; margin:0 6px 4px 0; padding:1px 6px; font-size:12px;
  line-height:1.6; border:1px solid var(--border); border-radius:var(--radius); color:var(--text-muted);}
.product .swatchrow{text-align:center;}