/* 三羚全站共用導覽與頁尾（2026 改版）
*
* 來源：E:/sunling921/html/sunling-site-header.css（設計交付包）
* 搬進來時一個字元都沒改 —— 原檔所有規則都已經限定在
* .slh-／.slf-／.sunling-／.page:has() 底下，實測沒有任何一條會外漏，
* 所以可以跟現有的 style.css（6,032 行）並存，不必動舊樣式。
*
* 這樣做的用意是可逐頁上線、隨時回退：
* 哪一頁還沒換成新版 HTML，就完全吃不到這裡的規則。
*
* 要改視覺請改這一支，不要改 style.css。
* 2026-09-21
*/
/* 三羚全站共用導覽：桌機完整平鋪，手機以選單展開。 */
.page:has(.sunling-site-header){max-width:1120px!important}
.sunling-site-header{position:relative;background:#fff;color:#1f2937;font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;z-index:20}
.sunling-site-header *{box-sizing:border-box}
.slh-utility{display:flex;justify-content:space-between;gap:16px;padding:9px 34px;background:#faf9f5;border-bottom:1px solid #d9e1e8;color:#657287;font-size:12px;line-height:1.4}
.slh-utility-left,.slh-utility-right{display:flex;align-items:center;gap:12px;min-width:0}.slh-utility-right{justify-content:flex-end}.slh-utility a{color:#536276!important;font-weight:500;text-decoration:none!important}.slh-utility a:hover,.slh-utility a:focus-visible{color:#26398c!important;text-decoration:underline!important;text-underline-offset:3px}.slh-utility-right a{color:#26398c!important;font-weight:700}.slh-utility .slh-account-link{min-height:26px;padding:4px 10px;border:1px solid #26398c;border-radius:999px;background:#fff;color:#26398c!important;line-height:1;text-decoration:none!important}.slh-utility .slh-account-link:hover,.slh-utility .slh-account-link:focus-visible{background:#26398c;color:#fff!important;outline:2px solid #f6d74a;outline-offset:2px}
.slh-nav{display:flex;align-items:center;gap:16px;min-height:94px;padding:12px 34px;background:#fff;border-bottom:1px solid #d9e1e8}
.slh-logo{display:block;flex:0 0 auto}
.slh-logo img{display:block;width:160px;height:auto}
.slh-links{display:flex;flex:1;align-items:center;justify-content:flex-end;gap:7px;min-width:0;white-space:nowrap}
.slh-links>a,.slh-links>button,.slh-quick>button,.slh-quick>a{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:9px 7px;border:0;background:transparent;color:#46546a;font:inherit;font-size:12px;font-weight:500;line-height:1;text-decoration:none;cursor:pointer}
.slh-links>a:hover,.slh-links>a:focus-visible,.slh-links>button:hover,.slh-links>button:focus-visible,.slh-quick>button:hover,.slh-quick>button:focus-visible,.slh-quick>a:hover,.slh-quick>a:focus-visible{color:#26398c;outline:2px solid #f6d74a;outline-offset:2px}
.slh-links .is-active{color:#26398c;font-weight:700}
.slh-links .slh-line{padding:10px 12px;background:#26398c;color:#fff!important;font-weight:700}
.slh-links .slh-line:hover,.slh-links .slh-line:focus-visible{background:#1d2d70;color:#fff!important;outline-color:#f6d74a}
.slh-cart{gap:4px}
.slh-cart-count{display:inline-grid;min-width:18px;height:18px;place-items:center;padding:0 4px;border-radius:50%;background:#eaf3f8;color:#26398c;font-size:10px;font-weight:700}
.slh-quick{display:none;align-items:center;gap:4px;margin-left:auto}
.slh-quick>button,.slh-quick>a{min-width:35px;padding:8px 5px;color:#26398c;font-size:11px;font-weight:700}
.slh-menu-toggle{border:1px solid #d9e1e8!important}
.slh-search-panel{display:none;gap:8px;align-items:center;padding:12px 34px;background:#fff;border-bottom:1px solid #d9e1e8}
.sunling-site-header.search-open .slh-search-panel{display:flex}
.slh-search-panel label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.slh-search-panel input{flex:1;min-width:0;height:39px;padding:0 12px;border:1px solid #b9c7d4;background:#faf9f5;color:#1f2937;font:inherit;font-size:13px}
.slh-search-panel input:focus{border-color:#26398c;outline:2px solid #f6d74a;outline-offset:1px}
.slh-search-panel button{height:39px;padding:0 15px;border:0;background:#26398c;color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
@media(max-width:900px){
.slh-utility,.slh-nav,.slh-search-panel{padding-left:20px;padding-right:20px}
.slh-utility{gap:8px;font-size:11px}
.slh-utility-left,.slh-utility-right{gap:8px}
.slh-utility-welcome{display:none}
.slh-nav{min-height:74px;flex-wrap:wrap;gap:10px}
.slh-logo img{width:142px}
.slh-links{display:none;order:3;flex-basis:100%;padding-top:9px;border-top:1px solid #d9e1e8;white-space:normal}
.sunling-site-header.menu-open .slh-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.slh-links>a,.slh-links>button{width:100%;min-height:42px;padding:10px;border:1px solid #d9e1e8;background:#fff;font-size:13px}
.slh-links .slh-line{grid-column:1/-1}
.slh-quick{display:flex}
.slh-search-panel{padding-top:10px;padding-bottom:10px}
}
/* 全站共用頁尾：工具連結、品牌資訊與門市識別。 */
.sunling-site-footer{display:block!important;padding:0!important;background:#1f2937!important;color:#d9e4ee!important;font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif!important;font-size:12px!important;line-height:1.8!important}
.sunling-site-footer *{box-sizing:border-box}.sunling-site-footer a{color:#e7eef5!important;text-decoration:none!important}.sunling-site-footer a:hover,.sunling-site-footer a:focus-visible{color:#f6d74a!important;text-decoration:underline!important;text-underline-offset:3px}.slf-directory{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px;padding:38px 34px 31px;border-bottom:1px solid rgba(217,225,232,.22)}.slf-group h2{margin:0 0 11px;color:#f6d74a;font-size:13px;line-height:1.45}.slf-group a{display:block;margin-top:7px;color:#d9e4ee!important;font-size:12px;line-height:1.65}.slf-tools{padding:17px 34px 16px;border-bottom:1px solid rgba(217,225,232,.22)}.slf-tool-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0}.slf-tool-links a{padding:0 12px;border-right:1px solid rgba(217,225,232,.44);font-size:12px}.slf-tool-links a:last-child{border-right:0}.slf-info{display:grid;grid-template-columns:1fr 1.45fr;gap:30px;align-items:center;padding:24px 34px}.slf-brand b{display:block;color:#f6d74a;font-size:14px}.slf-brand span,.slf-contact span{display:block;color:#cfdbe7;margin-top:3px}.slf-contact{text-align:right}.slf-contact div{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:0}.slf-contact a{padding:0 8px}.slf-contact a:last-of-type{padding-right:0}.slf-contact i{color:#f6d74a;font-style:normal}.slf-copyright{padding:12px 34px;background:#172755;color:#bfcddd;font-size:11px;text-align:center}
@media(max-width:900px){.slf-directory{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px;padding:30px 20px 26px}.slf-tools{padding:18px 20px 15px}.slf-tool-links{gap:8px 0}.slf-tool-links a{padding:0 9px;font-size:11px}.slf-info{grid-template-columns:1fr;gap:14px;padding:22px 20px}.slf-contact{text-align:left}.slf-contact div{justify-content:flex-start}.slf-contact a{padding:0 7px}.slf-contact a:first-child{padding-left:0}.slf-copyright{padding:12px 20px;font-size:10px}}
/* 頁尾閱讀性：以高對比暖黃標題配合較大的字級，避免深底靛藍字。 */
.sunling-site-footer .slf-group h2{color:#f6d74a!important;font-size:18px!important;font-weight:800!important;letter-spacing:.02em!important;line-height:1.45!important}
.sunling-site-footer .slf-group a{color:#f5f8fb!important;font-size:14px!important;line-height:1.75!important}
.sunling-site-footer .slf-tool-links a{font-size:13px!important;line-height:1.8!important}
.sunling-site-footer .slf-brand b{font-size:16px!important;font-weight:800!important}
.sunling-site-footer .slf-brand span,.sunling-site-footer .slf-contact span{font-size:13px!important;line-height:1.8!important}
.sunling-site-footer .slf-copyright{font-size:12px!important}
@media(max-width:900px){.sunling-site-footer .slf-group h2{font-size:16px!important}.sunling-site-footer .slf-group a{font-size:13px!important}.sunling-site-footer .slf-tool-links a{font-size:12px!important}.sunling-site-footer .slf-brand b{font-size:15px!important}.sunling-site-footer .slf-brand span,.sunling-site-footer .slf-contact span{font-size:13px!important}.sunling-site-footer .slf-copyright{font-size:11px!important}}
/* ============================================================
* 轉接層（這一段是移植時加的，不在設計交付包裡）
*
* 為什麼需要：設計稿的導覽列是 JavaScript 產生的，吐出來是
*
* 而 ECShop 後台管理的導覽（siy:nav）吐出來是
*
*
* 選擇保留 ul/li 而不是改成純 ，是因為那段 HTML 由
* includes 的導覽功能產生，全站共用；改它會影響其他佈景與頁面。
* 這裡只補幾條選擇器讓既有結構吃到同一組樣式。
*
* 購物袋與會員狀態同理：dyn_cart_info / dyn_member_info 各自
* 帶著自己的 與 ，這裡把外層的間距與顏色接上去。
* ============================================================ */
/* 主導覽：把 ul>li>a 攤平成跟 .slh-links>a 一樣 */
.slh-links > ul,
.slh-utility-left > ul,
.slh-utility-right > p {
display: flex;
align-items: center;
gap: inherit;
margin: 0;
padding: 0;
list-style: none;
min-width: 0;
}
.slh-links > ul { gap: 7px; flex-wrap: wrap; }
.slh-utility-left > ul,
.slh-utility-right > p { gap: 8px; }
.slh-links > ul > li,
.slh-utility-left > ul > li { margin: 0; padding: 0; list-style: none; }
.slh-links > ul > li > a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 9px 7px;
border: 0;
background: transparent;
color: #46546a;
font: inherit;
text-decoration: none;
border-radius: 8px;
}
.slh-links > ul > li > a:hover,
.slh-links > ul > li > a:focus-visible {
color: #26398c;
outline: 2px solid #f6d74a;
outline-offset: 2px;
}
.slh-links > ul > li.curr > a,
.slh-links > ul > li > a.is-active { color: #26398c; font-weight: 700; }
/* 購物袋：dyn_cart_info 自己就是一個 ，件數包在 裡 */
.slh-cart > a {
display: inline-flex;
align-items: center;
gap: 4px;
color: #46546a;
text-decoration: none;
min-height: 38px;
padding: 9px 7px;
}
.slh-cart > a:hover,
.slh-cart > a:focus-visible { color: #26398c; }
.slh-cart em {
display: inline-grid;
min-width: 18px;
height: 18px;
place-items: center;
padding: 0 4px;
border-radius: 50%;
background: #eaf3f8;
color: #26398c;
font-size: 10px;
font-style: normal;
font-weight: 700;
line-height: 1;
}
/* 會員狀態：登入前是「歡迎語＋註冊＋登入」，登入後是會員名稱等連結，
兩種情況都由 dyn_member_info 決定，這裡只管排版 */
.slh-utility-right > p { margin: 0; }
.slh-utility-right span { color: #657287; }
/* 上方工具列的連結沿用設計稿的樣式 */
.slh-utility-left > ul > li > a { color: #536276; font-weight: 500; text-decoration: none; }
.slh-utility-left > ul > li > a:hover,
.slh-utility-left > ul > li > a:focus-visible { color: #26398c; text-decoration: underline; text-underline-offset: 3px; }
/* ------------------------------------------------------------
* 移植修正（實測量出來的，不是照抄設計稿）
* ------------------------------------------------------------ */
/* 導覽不要折行。
量到的情況：6 個項目需要約 605px，但 ul 是 flex 子項、預設不成長，
只拿到 579px 就換行了（.slh-links 還有 1125px 的空間沒用到）。
讓 ul 可以成長並禁止換行，項目就會排成一列。 */
.slh-links > ul {
flex: 0 1 auto;
flex-wrap: nowrap;
white-space: nowrap;
}
/* 設計稿的 hero 是兩欄（文字＋圖），但文章分類沒有圖，
第二欄會留一塊空白，還被 min-height 撐到 368px。
沒有圖的時候收成單欄、高度自動。 */
.hero:not(:has(.hero-image)):not(:has(.hero-visual)) {
grid-template-columns: 1fr;
min-height: 0;
}
/* 導覽項目高度不一致的修正。
量到的狀況：目前頁面那一項的 li 高 69px，其他 44px，整列被撐高 25px。
原因是模板在 li 裡留了換行與 tab，那個空白文字節點自己撐出一個行框。
把 li 變成 flex 容器，空白節點就不會產生高度。 */
.slh-links > ul > li,
.slh-utility-left > ul > li {
display: inline-flex;
align-items: center;
}
/* ------------------------------------------------------------
* 手機版修正（390px 實測，設計文件指定的驗收寬度）
* ------------------------------------------------------------ */
@media (max-width: 700px) {
/* 上方工具列四個連結擠在一起，文字被壓成直書。
改成可換行，並讓每個連結保持橫排不斷字。 */
.slh-utility {
flex-wrap: wrap;
gap: 6px 10px;
}
.slh-utility-left > ul,
.slh-utility-right > p {
flex-wrap: wrap;
}
.slh-utility-left > ul > li > a,
.slh-utility-right a,
.slh-utility-welcome {
white-space: nowrap;
}
}
/* 導覽的子選單（後台「導覽欄・中部」底下有子項目時才會出現）。
舊的下拉樣式只掛在 #top_nav 與 #header_nav 兩個 id 上，
新導覽是 .slh-nav，所以那段完全沒接上：
子項目「專業濕洗」「免責條款」直接印在導覽列上，
擠在父項目下面看起來像一格塞兩行字。
這裡補回下拉，滑鼠移入與鍵盤 focus 都會開。 */
.slh-nav .slh-links ul li {
position: relative;
}
.slh-nav .slh-links .sub_nav {
display: none;
position: absolute;
top: 100%;
left: 50%;
z-index: 120;
min-width: 148px;
transform: translateX(-50%);
}
.slh-nav .slh-links li:hover > .sub_nav,
.slh-nav .slh-links li:focus-within > .sub_nav {
display: block;
}
.slh-nav .slh-links .sub_nav .inner {
padding: 6px 0;
background: #fff;
border: 1px solid var(--line, #d9e1e8);
box-shadow: 0 10px 24px rgba(24, 39, 76, .12);
}
.slh-nav .slh-links .sub_nav a {
display: block;
padding: 9px 16px;
color: #46546a;
font-size: 13px;
line-height: 1.5;
white-space: nowrap;
}
.slh-nav .slh-links .sub_nav a:hover,
.slh-nav .slh-links .sub_nav a:focus-visible,
.slh-nav .slh-links .sub_nav a.current {
background: var(--mist, #eaf3f8);
color: var(--blue, #26398c);
}
/* 手機版選單是展開清單，不要下拉。 */
@media (max-width: 900px) {
.slh-nav .slh-links .sub_nav {
position: static;
transform: none;
}
}