/* 三羚各頁版面樣式（2026 改版）
*
* 來源：E:/sunling921/html 各頁 HTML 內嵌的 style 區塊，抽出後去重合併。
* 設計稿把版面規則寫在每一頁裡面，逐頁複製會重複又難維護，所以集中成這一支。
*
* 已處理 66 條會外漏到全站的選擇器（body / a / 裸標籤），
* 全部改成限定在 .sl-page 底下 —— 模板會在內容外層加這個 class。
* :root 的變數保留原樣，已比對過跟現有 style.css 沒有同名衝突。
*
* 2026-09-21
*/
:root{--blue:#26398c;--ink:#1f2937;--sub:#59697d;--mist:#eaf3f8;--warm:#faf9f5;--yellow:#f6d74a;--line:#d9e1e8}
/* 設計稿各頁的變數命名不一致：首頁那幾頁用全名，商品詳情與購物袋那幾頁用短名。
合併成一支 CSS 之後短名全部變成「沒定義」，引用了 112 次，
表現是邊框與部分文字顏色靜悄悄地不見（量到 .addon 的 border 是 0px none）。
色票是把設計稿 24 頁的 :root 收集起來比對的，不是猜的。 */
:root{
--b:#26398c; /* = --blue */
--i:#1f2937; /* = --ink */
--l:#d9e1e8; /* = --line */
--m:#eaf3f8; /* = --mist */
--t:#5b697b; /* = 次要文字 */
--w:#faf9f5; /* = --warm */
--y:#f6d74a; /* = --yellow */
--muted:#58677a;
--blue-soft:#eaf3f8;
}
.sl-page *{box-sizing:border-box}
.sl-page{scroll-behavior:smooth;}
.sl-page{padding:24px 0;}
.sl-page a{color:inherit;text-decoration:none}
.page{max-width:1120px;margin:24px auto;background:var(--warm);box-shadow:0 12px 32px rgba(24,39,76,.09)}
.utility{display:flex;justify-content:space-between;gap:16px;padding:9px 52px;background:#f4f5f4;color:#657287;font-size:12px}
.utility a{color:var(--blue);font-weight:700}
.nav{min-height:86px;padding:12px 52px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:#fff;border-bottom:1px solid var(--line)}
.logo img{display:block;width:160px}
.navlinks{display:flex;align-items:center;gap:19px;color:#46546a;font-size:13px}
.navlinks a{white-space:nowrap}
.navlinks a:hover,.navlinks a.active{color:var(--blue);font-weight:700}
.navlinks .line{padding:10px 14px;background:var(--blue);color:#fff;font-weight:700}
.hero{display:grid;grid-template-columns:1.06fr .94fr;min-height:368px;background:#fff}
.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:59px 52px}
.eyebrow{display:inline-block;width:max-content;padding:7px 10px;background:#fff0a6;color:var(--blue);font-size:11px;font-weight:700;letter-spacing:.09em}
.hero h1{margin:16px 0 12px;color:var(--blue);font-size:42px;line-height:1.28}
.hero p{max-width:540px;margin:0;color:#43536a;font-size:15px;line-height:1.9}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 16px;border:1px solid var(--blue);font-size:13px;font-weight:700}
.button.primary{background:var(--blue);color:#fff}
.button.secondary{background:#fff;color:var(--blue)}
.hero-image{position:relative;min-height:280px;overflow:hidden}
.hero-image img{width:100%;height:100%;object-fit:cover}
.hero-image span{position:absolute;right:18px;bottom:15px;padding:6px 8px;background:rgba(255,255,255,.86);color:#617187;font-size:10px}
.section{padding:66px 52px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:28px}
.section-head .kicker{color:var(--blue);font-size:12px;font-weight:700;letter-spacing:.12em}
.section h2{margin:8px 0 0;color:var(--blue);font-size:30px;line-height:1.4}
.section-head p{max-width:405px;margin:0;color:#53657a;font-size:13px;line-height:1.85;text-align:right}
.numbers{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border:1px solid var(--line)}
.number{padding:25px 28px;border-right:1px solid var(--line)}
.number:last-child{border:0}
.number b{display:block;color:var(--blue);font-size:29px}
.number span{display:block;margin-top:6px;color:var(--muted);font-size:13px;line-height:1.6}
.story{background:#fffaf1}
.story-opening{display:grid;grid-template-columns:1.35fr .65fr;gap:28px;align-items:center;margin:-6px 0 31px;padding:25px 28px;border-top:1px solid #eadfce;border-bottom:1px solid #eadfce}
.story-opening p{margin:0;color:#48576a;font-size:15px;line-height:1.95}
.story-quote{padding-left:21px;border-left:3px solid var(--yellow);color:var(--blue);font-size:19px;font-weight:700;line-height:1.65}
.timeline{display:grid;gap:16px;margin:0}
.moment{position:relative;padding:25px 28px 26px;border-left:4px solid #cad7e5;background:rgba(255,255,255,.78)}
.moment:nth-child(2n){margin-left:47px;border-left-color:var(--yellow);background:#fff}
.moment small{color:#63748a;font-size:12px;font-weight:700;letter-spacing:.08em}
.moment h3{margin:7px 0 9px;color:var(--blue);font-size:20px}
.moment p{max-width:800px;margin:0;color:var(--muted);font-size:14px;line-height:1.95}
.promise{background:#f7f3eb}
.promise-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:29px 48px}
.promise-card{display:grid;grid-template-columns:49px 1fr;column-gap:16px;padding:0 0 23px;border:0;border-bottom:1px solid #d7d0c5;background:transparent}
.promise-card:nth-child(2n){transform:translateY(30px)}
.promise-card span{display:grid;width:41px;height:41px;place-items:center;border:1px solid #9db0c8;background:#fff;color:var(--blue);font-size:12px;font-weight:700}
.promise-card h3{margin:0 0 7px;color:var(--blue);font-size:19px}
.promise-card p{margin:0;color:#4e6074;font-size:13px;line-height:1.8}
.promise-card em{grid-column:2;margin-top:12px;color:#796112;font-size:12px;font-style:normal;font-weight:700}
.craft-copy{padding:23px}
.craft-copy h3{margin:0 0 8px;color:var(--blue);font-size:19px}
.craft-copy p{margin:0;color:var(--muted);font-size:13px;line-height:1.8}
.assurance{padding:58px;background:#172755;color:#fff}
.assurance .section-head{margin-bottom:28px}
.assurance .kicker{color:var(--yellow)}
.assurance h2{color:#fff}
.assurance .section-head p{color:#d5e3f6}
.assurance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.assurance-card{padding:22px;border:1px solid rgba(166,199,232,.36);background:rgba(255,255,255,.04)}
.assurance-card b{color:var(--yellow);font-size:17px}
.assurance-card p{margin:8px 0 0;color:#e1eafa;font-size:13px;line-height:1.8}
.cta{display:grid;grid-template-columns:1.04fr .96fr;gap:32px;padding:52px;background:#172755;color:#fff}
.cta h2{margin:0;color:#fff;font-size:30px;line-height:1.4}
.cta p{margin:11px 0 0;color:#d9e5f5;font-size:14px;line-height:1.85}
.cta-info{padding:22px 24px;border-left:4px solid var(--yellow);background:rgba(255,255,255,.07);color:#e4edf9;font-size:13px;line-height:1.9}
.cta-info b{color:var(--yellow);font-size:16px}
.cta-buttons{margin-top:18px;display:flex;gap:9px}
.sl-page footer{display:flex;justify-content:space-between;gap:24px;padding:26px 52px;background:#1f2937;color:#cfd8e5;font-size:12px;line-height:1.9}
.sl-page footer b{color:var(--yellow)}
.eyebrow,.badge{display:inline-block;width:max-content;padding:7px 10px;background:#fff0a6;color:var(--blue);font-size:11px;font-weight:700;letter-spacing:.09em}
.hero-visual{position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(140deg,#c0d7e2,#edf4f6 50%,#e7d8c4)}
.hero-visual img{width:100%;height:100%;object-fit:cover;filter:saturate(.76) contrast(.95)}
.hero-visual:after{content:"示意影像";position:absolute;right:15px;bottom:14px;padding:5px 8px;background:rgba(20,32,58,.78);color:#fff;font-size:10px}
.hero-note{position:absolute;top:22px;left:22px;padding:12px 14px;background:rgba(255,255,255,.93);color:var(--blue);font-size:12px;line-height:1.7}
.hero-note b{display:block;font-size:17px}
.trust{display:grid;grid-template-columns:repeat(3,1fr);background:var(--blue);color:#fff}
.trust div{min-height:102px;padding:23px 28px;border-right:1px solid rgba(255,255,255,.2)}
.trust div:last-child{border:0}
.trust b{display:block;color:var(--yellow);font-size:15px}
.trust span{display:block;margin-top:7px;color:#eef4fb;font-size:12px;line-height:1.65}
.cases{padding:66px 52px 74px;background:var(--mist)}
.section-head h2{margin:7px 0 0;color:var(--blue);font-size:30px;line-height:1.42}
.kicker{color:var(--blue);font-size:11px;font-weight:700;letter-spacing:.12em}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.filters button{min-height:38px;padding:8px 13px;border:1px solid #b9cad7;background:rgba(255,255,255,.76);color:#526175;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.filters button[aria-pressed=true]{border-color:var(--blue);background:var(--blue);color:#fff}
.filters button:hover,.filters button:focus-visible{border-color:var(--blue);outline:2px solid var(--yellow);outline-offset:2px}
.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.case{overflow:hidden;border:1px solid #cddce6;background:#fff;transition:transform .2s,box-shadow .2s}
.case:hover{transform:translateY(-4px);box-shadow:0 12px 23px rgba(38,57,140,.11)}
.case[hidden]{display:none}
.case-media{display:grid;grid-template-columns:1fr 1fr;min-height:166px;border-bottom:1px solid var(--line)}
.case-side{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(140deg,#d7e7ec,#f7f4ec);color:#61748a;text-align:center}
.case-side+ .case-side{background:linear-gradient(140deg,#e5edf4,#f9f7ef);border-left:1px solid var(--line)}
.case-side:before{content:"圖片預留";padding:8px 10px;border:1px dashed #9db1c3;background:rgba(255,255,255,.64);font-size:12px;font-weight:700}
.case-side b{position:absolute;top:12px;left:12px;padding:5px 7px;background:rgba(255,255,255,.93);color:var(--blue);font-size:10px;letter-spacing:.08em}
.case-copy{padding:20px}
.case-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.case-type{color:#6072ac;font-size:10px;font-weight:700;letter-spacing:.04em}
.case-status{padding:4px 6px;background:#f5f7f8;color:#697b8f;font-size:9px;font-weight:700;white-space:nowrap}
.case h3{margin:10px 0 8px;color:var(--blue);font-size:18px;line-height:1.45}
.case p{margin:0;color:var(--sub);font-size:12px;line-height:1.8}
.case-link{display:inline-flex;margin-top:15px;color:var(--blue);font-size:12px;font-weight:700}
.case-link:after{content:"→";margin-left:7px}
.empty{display:none;text-align:center;padding:55px;color:var(--muted)}
.how{display:grid;grid-template-columns:.93fr 1.07fr;gap:40px;padding:64px 52px;background:#fff}
.how h2{margin:8px 0 0;color:var(--blue);font-size:30px;line-height:1.4}
.how>div>p{margin:14px 0 0;color:var(--sub);font-size:14px;line-height:1.9}
.how-list{display:grid;gap:12px}
.how-item{display:grid;grid-template-columns:42px 1fr;gap:13px;padding:16px;border-left:3px solid var(--yellow);background:var(--warm)}
.how-item b{display:grid;width:34px;height:34px;place-items:center;border-radius:50%;background:var(--blue);color:#fff;font-size:12px}
.how-item strong{display:block;color:var(--blue);font-size:15px}
.how-item span{display:block;margin-top:4px;color:var(--sub);font-size:12px;line-height:1.7}
.cta .button{margin-top:23px}
.cta .button.primary{background:var(--yellow);border-color:var(--yellow);color:#26398c}
.hero-image small{position:absolute;right:16px;bottom:14px;padding:6px 8px;background:rgba(255,255,255,.88);color:#5f7085;font-size:10px}
.quick{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.quick a{padding:22px 26px;border-right:1px solid var(--line);transition:background .2s}
.quick a:last-child{border:0}
.quick a:hover{background:#f7fbfd}
.quick small{display:block;color:#697b91;font-size:11px;font-weight:700;letter-spacing:.08em}
.quick b{display:block;margin-top:7px;color:var(--blue);font-size:17px}
.quick span{display:block;margin-top:5px;color:var(--muted);font-size:12px;line-height:1.7}
.article-zone{padding:64px 52px 70px;background:var(--mist)}
.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.article-card{display:flex;flex-direction:column;min-height:278px;padding:23px;border:1px solid #ccdbe5;background:#fff;transition:transform .2s,box-shadow .2s}
.article-card:hover{transform:translateY(-4px);box-shadow:0 12px 23px rgba(38,57,140,.11)}
.article-card[hidden]{display:none}
.article-number{display:grid;width:38px;height:38px;place-items:center;background:#f4f8fa;color:var(--blue);font-size:11px;font-weight:700}
.article-type{display:block;margin-top:17px;color:#6072ac;font-size:11px;font-weight:700;letter-spacing:.08em}
.article-card h3{margin:8px 0;color:var(--blue);font-size:20px;line-height:1.45}
.article-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.8}
.article-card a{display:inline-flex;align-items:center;margin-top:auto;padding-top:18px;color:var(--blue);font-size:13px;font-weight:700}
.article-card a::after{content:'→';margin-left:7px}
.guide{display:grid;grid-template-columns:1.08fr .92fr;gap:34px;align-items:center;padding:52px;background:#172755;color:#fff}
.guide h2{margin:0;color:#fff;font-size:29px;line-height:1.45}
.guide p{margin:10px 0 0;color:#d9e5f5;font-size:14px;line-height:1.9}
.guide-box{padding:25px;border-left:4px solid var(--yellow);background:rgba(255,255,255,.07);color:#e4edf9;font-size:13px;line-height:1.9}
.guide-box b{color:var(--yellow);font-size:16px}
.guide-box a{display:inline-flex;margin-top:13px;padding:10px 14px;background:#fff;color:var(--blue);font-size:13px;font-weight:700}
.status{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.status article{padding:24px 27px;border-right:1px solid var(--line)}
.status article:last-child{border:0}
.status small{color:#687a90;font-size:11px;font-weight:700;letter-spacing:.08em}
.status h2{margin:8px 0 6px;color:var(--blue);font-size:18px;line-height:1.4}
.status p{margin:0;color:var(--muted);font-size:13px;line-height:1.75}
.post-filters{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 22px}
.post-filters button{min-height:39px;padding:8px 14px;border:1px solid var(--line);background:#fff;color:#526175;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.post-filters button[aria-pressed=true]{border-color:var(--blue);background:var(--blue);color:#fff}
.post-filters button:hover,.post-filters button:focus-visible{border-color:var(--blue);outline:2px solid var(--yellow);outline-offset:2px}
.announcement-empty,.announcement-empty[hidden],#publishedAnnouncements[hidden]{display:none!important}
.announcement-empty{grid-template-columns:84px 1fr;gap:23px;align-items:start;padding:33px;border:1px solid #c9d9e5;background:#fff}
.announcement-icon{display:grid;width:68px;height:68px;place-items:center;border-radius:50%;background:var(--mist);color:var(--blue);font-size:26px}
.announcement-empty h3{margin:0;color:var(--blue);font-size:23px;line-height:1.5}
.announcement-empty p{max-width:660px;margin:9px 0 0;color:var(--muted);font-size:14px;line-height:1.9}
.announcement-empty .button{margin-top:18px}
.post-reserve{margin-top:0;padding-top:0;border-top:0}
.post-reserve-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:17px}
.post-reserve h3{margin:0;color:var(--blue);font-size:21px}
.post-reserve p{margin:0;color:var(--muted);font-size:12px;line-height:1.7}
.reserve-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.reserve-card{display:flex;flex-direction:column;min-height:236px;padding:21px;border:1px solid var(--line);background:#fff;transition:transform .2s,box-shadow .2s}
.reserve-card:hover{transform:translateY(-3px);box-shadow:0 9px 18px rgba(38,57,140,.1)}
.reserve-card[hidden]{display:none}
.reserve-label{color:#536ab7;font-size:11px;font-weight:700;letter-spacing:.08em}
.reserve-date{display:block;margin-top:7px;color:#8794a4;font-size:11px}
.reserve-card h4{margin:14px 0 8px;color:#26398c;font-size:18px;line-height:1.45}
.reserve-card p{color:#5f6f82;font-size:13px;line-height:1.75}
.reserve-card small{display:block;margin-top:auto;padding-top:15px;color:#26398c;font-size:12px;font-weight:700}
.demo-badge{display:inline-block;margin-left:8px;padding:4px 7px;background:#fff0a6;color:#705b00;font-size:10px;font-weight:700;vertical-align:2px}
.workflow{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;padding:51px 52px;background:#172755;color:#fff}
.workflow h2{margin:0;color:#fff;font-size:29px;line-height:1.45}
.workflow p{margin:10px 0 0;color:#d9e5f5;font-size:14px;line-height:1.9}
.workflow-box{padding:25px;border-left:4px solid var(--yellow);background:rgba(255,255,255,.07);color:#e4edf9;font-size:13px;line-height:1.9}
.workflow-box b{color:var(--yellow);font-size:16px}
.workflow-box a{display:inline-flex;margin-top:13px;padding:10px 14px;background:#fff;color:var(--blue);font-size:13px;font-weight:700}
.links{display:flex; align-items:center; gap:20px; color:#46546a; font-size:13px;}
.links a{text-decoration:none;}
.links a:hover,.links a:focus-visible{color:var(--blue); text-decoration:underline; text-underline-offset:5px;}
.line{display:inline-block; padding:11px 15px; background:var(--blue); color:#fff !important; font-weight:700;}
.sl-page h1{margin:14px 0 8px;color:var(--blue);font-size:38px;line-height:1.3}
.hero-side{display:flex; flex-direction:column; justify-content:center; gap:14px; padding:42px; background:rgba(38,57,140,.95); color:#fff;}
.hero-side b{color:var(--yellow); font-size:17px; font-weight:600;}
.hero-side span{color:#dce8ff; font-size:13px; line-height:1.7;}
.hero-side a{align-self:flex-start; margin-top:4px; padding:11px 15px; background:var(--yellow); color:var(--blue); font-size:13px; font-weight:700; text-decoration:none;}
.notice{display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:start;padding:20px 52px;background:#26398c;color:#fff}
.notice div{padding:22px 20px; border-right:1px solid var(--line);}
.notice div:first-child{padding-left:0;}
.notice div:last-child{border:0;}
.notice b{display:block;color:var(--yellow);font-size:15px}
.notice span{display:block; margin-top:5px; color:var(--muted); font-size:12px; line-height:1.6;}
.sl-page main{padding:56px 52px 68px;}
.section-title{display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:22px;}
.sl-page h2{margin:0; color:var(--blue); font-size:28px; font-weight:600;}
.section-title p{margin:7px 0 0; color:var(--muted); font-size:14px; line-height:1.7;}
.section-title small{color:#657287; font-size:12px; white-space:nowrap;}
.quick-nav{display:grid; grid-template-columns:repeat(6,1fr); gap:9px; margin-bottom:38px;}
.quick-nav a{padding:16px 8px; border:1px solid var(--line); background:#fff; color:var(--blue); font-size:13px; font-weight:700; text-align:center; text-decoration:none; transition:transform .2s,box-shadow .2s;}
.quick-nav a span{display:block; margin-bottom:5px; color:#7c8aac; font-size:11px; letter-spacing:.08em;}
.quick-nav a:hover,.quick-nav a:focus-visible{transform:translateY(-3px); box-shadow:0 8px 16px rgba(38,57,140,.12); outline:2px solid var(--yellow); outline-offset:2px;}
.price-list{display:grid; gap:13px;}
.sl-page details{border:1px solid var(--line); background:#fff;}
.sl-page details[open]{border-color:#bdcde0; box-shadow:0 7px 18px rgba(38,57,140,.07);}
.sl-page summary{display:flex; align-items:center; gap:16px; min-height:78px; padding:16px 21px; cursor:pointer; list-style:none;}
.sl-page summary::-webkit-details-marker{display:none;}
.sl-page summary::after{content:"＋"; margin-left:auto; color:var(--blue); font-size:24px; font-weight:300;}
.sl-page details[open] summary::after{content:"－";}
.num{display:grid; flex:0 0 38px; width:38px; height:38px; place-items:center; border-radius:50%; background:var(--blue-soft); color:var(--blue); font-size:12px; font-weight:700;}
.sl-page summary b{color:var(--blue); font-size:18px; font-weight:600;}
.sl-page summary span{margin-left:4px; color:#66778b; font-size:12px;}
.table-wrap{overflow-x:auto; border-top:1px solid var(--line);}
.sl-page table{width:100%; border-collapse:collapse; min-width:560px;}
.sl-page th,.sl-page td{padding:14px 20px; border-bottom:1px solid #edf0f3; font-size:14px; text-align:left;}
.sl-page th{background:#f6f9fb; color:#607088; font-size:12px; font-weight:700; letter-spacing:.04em;}
.sl-page tr:last-child td{border-bottom:0;}
.sl-page td:first-child{color:#2d3c52; font-weight:600;}
.sl-page td:nth-child(2){color:#738195; font-size:13px;}
.sl-page td:nth-child(3),.sl-page td:nth-child(4){color:var(--blue); font-weight:700; white-space:nowrap;}
.special{margin-top:42px; padding:33px; background:var(--blue-soft);}
.special-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:19px;}
.special-card{padding:19px; background:#fff; border-top:3px solid var(--yellow);}
.special-card b{display:block; color:var(--blue); font-size:16px;}
.special-card p{margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.7;}
.special-card strong{color:var(--blue);}
.estimate{background:var(--blue);color:#fff}
.estimate h2{color:#fff; font-size:24px;}
.estimate p{margin:8px 0 0; color:#dce8ff; font-size:13px; line-height:1.7;}
.estimate a{flex:0 0 auto; padding:13px 18px; background:var(--yellow); color:var(--blue); font-size:13px; font-weight:700; text-decoration:none;}
.price-list td:first-child a,.special-card>a{display:inline-block;color:#26398c;font-weight:800;text-decoration:underline;text-decoration-color:#f6d74a;text-underline-offset:4px}
.special-card>a{margin-top:12px;font-size:12px}
.price-list td:first-child a:hover{color:#5e6cc0}
.top{display:flex;justify-content:space-between;padding:9px 52px;background:#f4f5f4;color:#657287;font-size:12px}
.top a{color:var(--b);font-weight:700}
.nav a:last-child{padding:10px 13px;background:var(--b);color:#fff;font-size:13px;font-weight:700}
.main{padding:42px 52px 66px}
.crumb{color:#68778b;font-size:12px}
.crumb a{color:var(--blue)}
.sub{margin:0;color:var(--t);font-size:14px;line-height:1.8}
.layout{display:grid;grid-template-columns:1.35fr .65fr;gap:18px;margin-top:28px}
.items,.summary{background:#fff;border:1px solid var(--l)}
.item{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;padding:19px;border-bottom:1px solid var(--l)}
.item:last-child{border:0}
.item b{color:var(--b);font-size:16px}
.item span{display:block;margin-top:4px;color:var(--t);font-size:12px}
.addon-note{margin-top:8px!important;padding:8px 10px;background:var(--m);border-left:2px solid var(--y);line-height:1.6}
.qty{display:flex;align-items:center;border:1px solid var(--l);background:#fff}
.qty button{width:36px;height:42px;border:0;background:#fff;color:var(--b);font-size:18px;cursor:pointer}
.qty strong{display:grid;place-items:center;width:30px;font-size:13px}
.remove{border:0;background:none;color:#7a8798;font:inherit;font-size:12px;text-decoration:underline;cursor:pointer}
.summary{height:max-content;padding:24px}
.summary h2{margin:0;color:var(--b);font-size:21px}
.summary p{color:var(--t);font-size:13px;line-height:1.8}
.line-confirm{display:block;width:100%;margin-top:16px;padding:13px;border:0;background:var(--b);color:#fff;font:inherit;font-size:13px;font-weight:700;text-align:center;cursor:pointer}
.line-confirm:hover{background:#1d2d70}
.line-confirm:disabled{background:#a6b1bd;cursor:not-allowed}
.line-hint{margin:9px 0 0!important;color:#6f7d8d!important;font-size:11px!important;line-height:1.6!important}
.empty a{display:inline-block;margin-top:13px;color:var(--b);font-weight:700}
.checkout-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:25px}
.flow-step{min-height:89px;padding:14px;border:1px solid var(--l);background:#fff}
.flow-step b{display:block;color:#718096;font-size:11px;letter-spacing:.06em}
.flow-step strong{display:block;margin-top:6px;color:var(--i);font-size:14px}
.flow-step span{display:block;margin-top:4px;color:var(--t);font-size:11px;line-height:1.5}
.flow-step.is-now{border-color:var(--b);background:var(--m)}
.flow-step.is-now b,.flow-step.is-now strong{color:var(--b)}
.cart-next{margin:18px 0 0;padding:14px 15px;border-left:3px solid var(--y);background:#fff8dc;color:#5f552b;font-size:12px;line-height:1.7}
.cart-next a{color:var(--b);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.detail{display:grid;grid-template-columns:.82fr 1.18fr;gap:42px;margin-top:23px}
.visual{display:grid;min-height:350px;place-items:center;background:linear-gradient(145deg,#fff,#dcecf2);border:1px solid var(--l);color:var(--b);text-align:center}
.visual strong{display:block;font-size:54px;line-height:1}
.visual span{display:block;margin-top:13px;font-size:13px}
.tag{display:inline-block;padding:7px 10px;background:#fff0a6;color:var(--b);font-size:12px;font-weight:700}
.copy h1{margin:15px 0 8px;color:var(--b);font-size:35px}
.copy>p{margin:0;color:var(--t);font-size:15px;line-height:1.85}
.prices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0}
.price{margin:18px 0 0;color:#536277;font-size:12px}
.price small{color:#718096;font-size:12px}
.price strong{display:block;margin-top:4px;color:var(--blue);font-size:18px}
.product-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 0}
.product-tools>*{display:grid;min-height:43px;place-items:center;padding:8px;border:1px solid var(--l);background:#fff;color:#40516a;font:inherit;font-size:12px;font-weight:700;text-align:center;cursor:pointer}
.product-tools>*:hover,.product-tools>*:focus-visible{border-color:var(--b);color:var(--b);background:#fbfcff}
.product-tools .favorite[aria-pressed=true]{border-color:#d9ad19;background:#fff9dc;color:#715806}
.product-tools .affiliate{border-color:#f0d39e;background:#fff9ef;color:#935c00}
.note{padding:16px 18px;background:var(--m);color:#4e6074;font-size:13px;line-height:1.75}
.addons{margin-top:22px;border:1px solid var(--l);background:#fff}
.addons-head{padding:17px 18px 14px;border-bottom:1px solid var(--l)}
.addons h2{margin:0;color:var(--b);font-size:18px}
.addons p{margin:6px 0 0;color:var(--t);font-size:12px;line-height:1.7}
.addon-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px}
.addon{position:relative;display:flex;align-items:flex-start;gap:8px;padding:10px;border:1px solid var(--l);color:var(--i);cursor:pointer}
.addon:hover{border-color:var(--b);background:#fbfcff}
.addon input{width:16px;height:16px;accent-color:var(--b);flex:none}
.addon span{display:block;color:var(--i);font-size:12px;font-weight:700;line-height:1.45}
.addon small{display:block;margin-top:2px;color:var(--t);font-size:11px;font-weight:400}
.purchase{display:flex;gap:10px;margin-top:22px}
.qty input{width:38px;border:0;text-align:center;font:inherit}
.purchase>button{padding:0 21px;border:0;background:var(--b);color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.sl-page .care,.sl-page .notice,.sl-page .history{margin-top:45px;padding:28px;background:#fff;border-top:3px solid var(--y)}
.sl-page .care h2,.sl-page .history h2{margin:0;color:var(--b);font-size:23px}
.care ul{margin:15px 0 0;padding-left:20px;color:var(--t);font-size:14px;line-height:1.9}
.notice summary{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:22px 25px;color:var(--b);font-size:19px;font-weight:700;cursor:pointer;list-style:none}
.notice summary::-webkit-details-marker{display:none}
.notice summary::after{content:'＋';font-size:25px;font-weight:400}
.notice[open] summary{border-bottom:1px solid var(--l)}
.notice[open] summary::after{content:'－'}
.notice-body{padding:23px 28px 28px;color:var(--t);font-size:13px;line-height:1.8}
.notice-body p{margin:0 0 14px}
.notice-body h3{margin:22px 0 8px;color:var(--b);font-size:15px}
.notice-body ul{margin:0 0 14px;padding-left:20px}
.notice-lead{padding:12px 15px;background:var(--m);color:#40516a}
.sl-page .history{padding:28px}
.sl-page .history p{margin:7px 0 18px;color:var(--t);font-size:13px}
.history-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.history-card{padding:14px;border:1px solid var(--l);background:#fff;transition:transform .2s,box-shadow .2s}
.history-card:hover{transform:translateY(-3px);box-shadow:0 8px 16px rgba(38,57,140,.1)}
.history-card span{display:inline-grid;min-width:36px;padding:5px;background:var(--m);color:var(--b);font-size:11px;font-weight:700;text-align:center}
.history-card b{display:block;margin-top:12px;color:var(--b);font-size:15px}
.history-card small{display:block;margin-top:5px;color:var(--t);font-size:11px}
.history-empty{grid-column:1/-1;padding:17px;background:var(--m);color:#526175;font-size:13px}
.purchase>a{display:inline-flex;align-items:center;justify-content:center;padding:0 21px;border:1px solid var(--b);background:#fff;color:var(--b);font-size:13px;font-weight:700}
.related{margin-top:45px;padding:28px;background:#fff;border-top:3px solid var(--y)}
.related h2{margin:0;color:var(--b);font-size:23px}
.related p{margin:7px 0 18px;color:var(--t);font-size:13px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.related-grid a{padding:15px;border:1px solid var(--l);color:var(--b);font-size:13px;font-weight:700;line-height:1.6}
.related-grid a:hover{border-color:var(--b);background:#fbfcff}
.product-description{margin-top:45px;padding:28px;background:#fff;border-top:3px solid var(--y)}
.product-description h2{margin:0;color:var(--b);font-size:23px}
.product-description>p{margin:7px 0 20px;color:var(--t);font-size:13px;line-height:1.8}
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.spec{padding:15px;border:1px solid var(--l);background:#fbfcfc}
.spec small{display:block;color:#718096;font-size:11px}
.spec b{display:block;margin-top:6px;color:var(--i);font-size:14px;line-height:1.55}
.product-long-copy{margin-top:14px;padding:16px 18px;background:var(--m);color:#42556b;font-size:13px;line-height:1.9}
.product-faq{margin-top:16px;border:1px solid var(--l)}
.product-faq h3{margin:0;padding:16px 18px;border-bottom:1px solid var(--l);color:var(--b);font-size:17px}
.faq-list details{border-bottom:1px solid var(--l)}
.faq-list details:last-child{border-bottom:0}
.faq-list summary{padding:14px 17px;color:#314c7c;font-size:13px;font-weight:700;cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:'＋';float:right;color:var(--b);font-size:18px;font-weight:400}
.faq-list details[open] summary{background:#fbfcff}
.faq-list details[open] summary::after{content:'－'}
.faq-list p{margin:0;padding:0 17px 15px;color:var(--t);font-size:13px;line-height:1.85}
.navlinks a:hover,.navlinks a:focus-visible{color:var(--blue);text-decoration:underline;text-underline-offset:5px}
.bag{padding:10px 13px;background:var(--blue);color:#fff!important;font-weight:700}
.hero-actions a{padding:12px 16px;font-size:13px;font-weight:700}
.all-price{border:1px solid var(--blue);color:var(--blue);background:#fff}
.intro{display:flex;justify-content:space-between;gap:25px;padding:25px 52px;background:#fff;border-bottom:1px solid var(--line)}
.intro b{color:var(--blue);font-size:15px}
.intro span{display:block;margin-top:4px;color:var(--muted);font-size:13px}
.content{padding:48px 52px 66px}
.content-head{display:flex;justify-content:space-between;gap:20px;align-items:end}
.content-head h2{margin:0;color:var(--blue);font-size:28px}
.content-head p{margin:7px 0 0;color:var(--muted);font-size:14px}
.filter{display:flex;flex-wrap:wrap;gap:8px;margin:25px 0}
.filter button{padding:9px 13px;border:1px solid var(--line);background:#fff;color:#566579;font:inherit;font-size:13px;cursor:pointer}
.filter button[aria-pressed=true]{border-color:var(--blue);background:var(--blue);color:#fff}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.card{min-height:340px;padding:0;overflow:hidden}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 20px rgba(38,57,140,.1)}
.mark{display:grid;width:42px;height:42px;place-items:center;background:var(--mist);color:var(--blue);font-size:12px;font-weight:700}
.card h3{margin:0 0 5px}
.card .note{color:var(--muted);font-size:13px;line-height:1.6}
.actions{display:flex;gap:8px;margin-top:auto;padding-top:19px}
.actions a,.actions button{flex:1;padding:10px 7px;border:1px solid var(--blue);background:#fff;color:var(--blue);font:inherit;font-size:12px;font-weight:700;text-align:center;cursor:pointer}
.actions button{background:var(--blue);color:#fff}
.bottom{padding:30px 52px;background:#172755;color:#fff}
.bottom b{color:var(--yellow);font-size:18px}
.bottom p{margin:7px 0 0;color:#dce8ff;font-size:13px;line-height:1.7}
.photo-slot{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:linear-gradient(135deg,#eaf3f8,#f9faf7 56%,#dcecf3);border-bottom:1px solid var(--line);color:#718196;font-size:12px;letter-spacing:.08em}
.photo-slot::before{content:'商品實拍照片預留';border:1px dashed #aebfcd;padding:8px 10px}
.photo-slot .mark{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.94);box-shadow:0 3px 10px rgba(38,57,140,.08)}
.card-copy{display:flex;flex:1;flex-direction:column;padding:18px 20px 20px}
.visual-copy{position:absolute;left:23px;bottom:24px;z-index:1;max-width:244px;padding:14px 15px;background:rgba(255,255,255,.93);color:#43536a;font-size:12px;line-height:1.75}
.visual-copy b{display:block;color:var(--blue);font-size:17px}
.notice-icon{display:grid;width:35px;height:35px;place-items:center;border-radius:50%;background:var(--yellow);color:var(--blue);font-size:17px;font-weight:700}
.notice p{margin:4px 0 0;color:#eaf1f8;font-size:12px;line-height:1.75}
.section.mist{background:var(--mist)}
.estimate-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:30px}
.estimate-card{display:block;min-height:0;padding:0;overflow:hidden}
.estimate-card:hover{transform:translateY(-4px);box-shadow:0 12px 23px rgba(38,57,140,.1)}
.item-icon{display:grid;width:52px;height:52px;place-items:center;border-radius:50%;background:#eef5f8;color:var(--blue);font-size:21px}
.estimate-card h3{margin:0;color:var(--blue);font-size:19px}
.estimate-card p{margin:6px 0 10px;color:var(--sub);font-size:12px;line-height:1.75}
.needs{display:flex;flex-wrap:wrap;gap:5px}
.needs span{padding:4px 7px;background:#f5f7f8;color:#63748a;font-size:10px;font-weight:700}
.estimate-card a{display:inline-flex;margin-top:13px;color:var(--blue);font-size:12px;font-weight:700}
.estimate-card a:after{content:"→";margin-left:7px}
.line-box{display:grid;grid-template-columns:1.07fr .93fr;gap:36px;align-items:center;padding:52px;background:#172755;color:#fff}
.line-box h2{margin:0;color:#fff;font-size:30px;line-height:1.4}
.line-box p{margin:11px 0 0;color:#d9e5f5;font-size:14px;line-height:1.85}
.line-box .button{margin-top:23px;background:var(--yellow);border-color:var(--yellow);color:var(--blue)}
.checklist{padding:23px 25px;border-left:4px solid var(--yellow);background:rgba(255,255,255,.07)}
.checklist b{color:var(--yellow);font-size:16px}
.checklist ul{margin:12px 0 0;padding-left:18px;color:#e4edf9;font-size:13px;line-height:1.95}
.estimate-card .item-icon{display:block;width:100%;height:auto;aspect-ratio:3 / 2;border-radius:0;background-color:#edf3f5;background-repeat:no-repeat;background-position:center;background-size:cover;font-size:0}
.estimate-card:nth-child(1) .item-icon{background-image:url('../img/design2026/estimate-curtain-v1.webp')}
.estimate-card:nth-child(2) .item-icon{background-image:url('../img/design2026/estimate-leather-bag-v1.webp')}
.estimate-card:nth-child(3) .item-icon{background-image:url('../img/design2026/estimate-rug-v1.webp')}
.estimate-card:nth-child(4) .item-icon{background-image:url('../img/design2026/estimate-special-material-v1.webp')}
.estimate-card>div{padding:20px 22px 22px}
.sl-page,.sl-page{margin:0; min-width:320px; background:#f3f6f7;}
#sunling-full{color:#1f2937; font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;}
#sunling-full *{box-sizing:border-box;}
#sunling-full .page{max-width:1120px; margin:0 auto; overflow:hidden; background:#faf9f5;}
#sunling-full .utility{padding:10px 52px; display:flex; justify-content:space-between; background:#f4f5f4; color:#657287; font-size:12px;}
#sunling-full .nav{padding:12px 34px; min-height:94px; display:flex; align-items:center; justify-content:space-between; gap:18px; background:#fff; border-bottom:1px solid #d9e1e8;}
#sunling-full .logo{display:block; flex-shrink:0;}
#sunling-full .logo img{display:block; width:160px; height:auto;}
#sunling-full .navlinks{display:flex; align-items:center; gap:13px; color:#46546a; font-size:12px; white-space:nowrap;}
#sunling-full .navlinks a:not(.book){color:inherit; text-decoration:none;}
#sunling-full .navlinks a:not(.book):hover,#sunling-full .navlinks a:not(.book):focus-visible{color:#26398c; text-decoration:underline; text-underline-offset:5px; outline:0;}
#sunling-full .book{padding:11px 15px; color:#fff; background:#26398c; font-size:12px; font-weight:500;}
#sunling-full a.book{color:#fff; text-decoration:none;}
#sunling-full a.line-link{display:inline-flex; align-items:center; min-height:27px; padding:4px 10px; background:#f6d74a; color:#26398c; font-weight:700; line-height:1; text-decoration:none;}
#sunling-full a.line-link:hover,#sunling-full a.line-link:focus-visible{background:#26398c; color:#fff; outline:2px solid #f6d74a; outline-offset:2px;}
#sunling-full .search{padding:8px 10px; border:1px solid #d9e1e8; color:#657287;}
#sunling-full .cart{padding-left:9px; border-left:1px solid #d9e1e8; color:#26398c; font-weight:500;}
#sunling-full .mobile-book{display:none;}
#sunling-full .hero{min-height:480px; display:grid; grid-template-columns:1.03fr .97fr; background:linear-gradient(120deg,#fcfdfc 0%,#e9f3f7 58%,#d5e7ef 100%);}
#sunling-full .hero-copy{padding:76px 48px 64px 52px; align-self:center;}
#sunling-full .eyebrow{display:inline-block; padding:7px 11px; color:#26398c; background:#fff0a6; font-size:12px; font-weight:500; letter-spacing:.07em;}
#sunling-full h1{margin:19px 0 15px; color:#26398c; font-size:44px; line-height:1.26; font-weight:500; letter-spacing:.01em;}
#sunling-full .hero-copy p{max-width:410px; margin:0; color:#46566b; font-size:16px; line-height:1.8;}
#sunling-full .actions{margin-top:26px; display:flex; gap:10px;}
#sunling-full .primary,#sunling-full .outline{padding:13px 19px; font-size:13px; font-weight:500;}
#sunling-full .primary{color:#fff; background:#26398c;}
#sunling-full .outline{color:#26398c; border:1px solid #26398c; background:#fff;}
#sunling-full .hero-photo{margin:28px 50px 28px 0; min-height:424px; position:relative; overflow:hidden; background:#dbe9ef;}
#sunling-full .hero-photo:before{content:"示意影像"; position:absolute; right:14px; bottom:14px; z-index:2; padding:6px 8px; color:#fff; background:rgba(13,25,48,.72); font-size:11px;}
#sunling-full .hero-photo img{display:block; width:100%; height:100%; min-height:424px; object-fit:cover; object-position:72% center;}
#sunling-full .trust{display:grid; grid-template-columns:repeat(4,1fr); padding:25px 52px; background:#26398c; color:#fff;}
#sunling-full .trust div{padding:0 16px; border-right:1px solid rgba(255,255,255,.24);}
#sunling-full .trust div:first-child{padding-left:0;}
#sunling-full .trust div:last-child{border-right:0;}
#sunling-full .trust b{display:block; color:#f6d74a; font-size:14px; font-weight:500;}
#sunling-full .trust span{display:block; margin-top:5px; color:#dce8ff; font-size:12px; line-height:1.5;}
#sunling-full .campaign-carousel{padding:38px 52px 42px; background:#fff;}
#sunling-full .campaign-head{margin:0 0 16px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
#sunling-full .campaign-head b{color:#26398c; font-size:16px; font-weight:500;}
#sunling-full .campaign-head span{color:#657287; font-size:12px;}
#sunling-full .carousel-shell{position:relative;}
#sunling-full .carousel-viewport{overflow:hidden; border:1px solid #d9e1e8; background:#26398c;}
#sunling-full .carousel-track{display:flex; transition:transform .42s cubic-bezier(.22,.61,.36,1);}
#sunling-full .carousel-slide{min-width:100%; min-height:320px; position:relative; isolation:isolate; overflow:hidden;}
#sunling-full .carousel-slide img{position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;}
#sunling-full .carousel-slide::before{content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(15,30,61,.89) 0%,rgba(20,36,69,.74) 37%,rgba(25,40,70,.26) 64%,rgba(25,40,70,.04) 100%);}
#sunling-full .carousel-demo{position:absolute; top:15px; right:16px; padding:5px 8px; border:1px solid rgba(255,255,255,.45); color:rgba(255,255,255,.92); font-size:10px; letter-spacing:.1em;}
#sunling-full .campaign-copy{width:43%; padding:54px 0 42px 42px; color:#fff;}
#sunling-full .campaign-copy small{display:block; color:#f6d74a; font-size:12px; font-weight:500; letter-spacing:.08em;}
#sunling-full .campaign-copy h3{margin:10px 0 9px; color:#fff; font-size:29px; font-weight:500; line-height:1.35;}
#sunling-full .campaign-copy p{max-width:330px; margin:0; color:#e5edf7; font-size:14px; line-height:1.75;}
#sunling-full .campaign-copy a{display:inline-block; margin-top:19px; padding:11px 15px; background:#f6d74a; color:#26398c; font-size:13px; font-weight:700; text-decoration:none;}
#sunling-full .campaign-copy a:hover,#sunling-full .campaign-copy a:focus-visible{background:#fff; outline:2px solid #f6d74a; outline-offset:2px;}
#sunling-full .carousel-arrow{position:absolute; z-index:2; top:50%; width:38px; height:38px; border:1px solid rgba(255,255,255,.72); border-radius:50%; transform:translateY(-50%); background:rgba(20,35,69,.58); color:#fff; font-size:25px; line-height:1; cursor:pointer;}
#sunling-full .carousel-arrow:hover,#sunling-full .carousel-arrow:focus-visible{background:#f6d74a; color:#26398c; outline:2px solid #26398c; outline-offset:2px;}
#sunling-full .carousel-prev{left:15px;}
#sunling-full .carousel-next{right:15px;}
#sunling-full .carousel-dots{display:flex; justify-content:center; gap:8px; margin-top:14px;}
#sunling-full .carousel-dot{width:9px; height:9px; padding:0; border:0; border-radius:50%; background:#c5d1dc; cursor:pointer;}
#sunling-full .carousel-dot[aria-selected="true"]{width:24px; border-radius:9px; background:#26398c;}
#sunling-full .section{padding:64px 52px;}
#sunling-full .section-head{margin-bottom:23px; display:flex; justify-content:space-between; align-items:end; gap:16px;}
#sunling-full h2{margin:0; color:#26398c; font-size:28px; font-weight:500;}
#sunling-full .sub{margin:7px 0 0; color:#59677a; font-size:14px; line-height:1.65;}
#sunling-full .hint{color:#657287; font-size:12px; white-space:nowrap;}
#sunling-full .service-zone{background:#f7f9f8;}
#sunling-full .service-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:11px;}
#sunling-full .service{min-height:166px; padding:21px; background:#fff; border:1px solid #d9e1e8; color:inherit; text-decoration:none; cursor:pointer; transform:translateY(0); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
#sunling-full .service:hover,#sunling-full .service:focus-visible{border-color:#5e6cc0; box-shadow:0 10px 22px rgba(38,57,140,.15); transform:translateY(-6px); outline:0;}
#sunling-full .service:active{box-shadow:0 4px 10px rgba(38,57,140,.13); transform:translateY(-2px);}
#sunling-full .service i{display:block; width:29px; height:4px; background:#f6d74a;}
#sunling-full .service b{display:block; margin-top:14px; color:#26398c; font-size:16px; font-weight:500;}
#sunling-full .service span{display:block; margin-top:8px; color:#5a687a; font-size:13px; line-height:1.55;}
#sunling-full .service small{display:block; margin-top:14px; color:#5e6cc0; font-size:12px; font-weight:500;}
#sunling-full .service:hover small,#sunling-full .service:focus-visible small{color:#26398c;}
#sunling-full .craft-zone{padding:64px 52px; background:#101b34;}
#sunling-full .craft-zone h2{color:#fff;}
#sunling-full .craft-zone .sub{color:#c9d7e9;}
#sunling-full .craft-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:24px;}
#sunling-full .craft{min-height:329px; background:#16253f; overflow:hidden;}
#sunling-full .craft-photo{height:176px; position:relative; overflow:hidden; background:#9bb6c8;}
#sunling-full .craft-photo img{display:block; width:100%; height:100%; object-fit:cover;}
#sunling-full .craft-photo:after{content:"示意影像"; position:absolute; right:10px; bottom:9px; padding:5px 7px; color:#fff; background:rgba(13,25,48,.78); font-size:11px;}
#sunling-full .craft-copy{padding:19px;}
#sunling-full .craft b{color:#f6d74a; font-size:16px; font-weight:500;}
#sunling-full .craft p{margin:9px 0 0; color:#d2dfed; font-size:13px; line-height:1.7;}
#sunling-full .care{padding:58px 52px; background:#f2f7f9;}
#sunling-full .care-head{display:flex; align-items:end; justify-content:space-between; gap:25px; margin-bottom:22px;}
#sunling-full .care-head h2{margin:0; color:#26398c; font-size:28px; font-weight:500;}
#sunling-full .care-head p{margin:8px 0 0; color:#526175; font-size:14px;}
#sunling-full .care-note{color:#66778b; font-size:12px; white-space:nowrap;}
#sunling-full .care-panels{display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border:1px solid #d8e2e8; border-radius:22px;}
#sunling-full .care-panel{min-height:328px; padding:38px 42px;}
#sunling-full .care-panel.water{background:#fcfbf7;}
#sunling-full .care-panel.dry{background:#26398c;}
#sunling-full .care-panel h3{margin:0; font-size:21px; font-weight:500;}
#sunling-full .care-panel.water h3{color:#1f2937;}
#sunling-full .care-panel.dry h3{color:#fff;}
#sunling-full .care-panel .care-sub{display:block; margin-top:8px; font-size:13px; font-weight:500;}
#sunling-full .care-panel.water .care-sub{color:#3b77a1;}
#sunling-full .care-panel.dry .care-sub{color:#f6d74a;}
#sunling-full .care-panel ul{display:grid; gap:17px; margin:28px 0 0; padding:0; list-style:none;}
#sunling-full .care-panel li{position:relative; padding-left:19px; font-size:13px; line-height:1.72;}
#sunling-full .care-panel li::before{content:"✦"; position:absolute; left:0; top:0;}
#sunling-full .care-panel.water li{color:#425267;}
#sunling-full .care-panel.water li::before{color:#1684b9;}
#sunling-full .care-panel.dry li{color:#eef4fb;}
#sunling-full .care-panel.dry li::before{color:#f6d74a;}
#sunling-full .care-proof{margin:14px 0 0; color:#66778b; font-size:12px; line-height:1.65;}
#sunling-full .process{background:#eaf3f8;}
#sunling-full .steps{display:grid; grid-template-columns:repeat(7,1fr); position:relative; margin-top:27px;}
#sunling-full .steps::before{content:""; position:absolute; z-index:0; top:38px; left:7.14%; right:7.14%; height:3px; background:#adc4d2;}
#sunling-full .step{min-height:190px; padding:0 7px 14px; position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; background:transparent; text-align:center;}
#sunling-full .step-num{display:grid; width:76px; height:76px; flex:0 0 76px; place-items:center; border:3px solid #26398c; border-radius:50%; background:#fffdf9; box-shadow:0 5px 12px rgba(38,57,140,.11); color:#26398c; font-size:19px; font-weight:500; line-height:1;}
#sunling-full .step b{display:flex; width:100%; min-height:24px; align-items:center; justify-content:center; margin-top:14px; color:#26398c; font-size:14px; font-weight:500; line-height:1.45; text-align:center;}
#sunling-full .step > span:not(.step-num){display:block; width:100%; min-height:42px; margin-top:8px; color:#5b697b; font-size:12px; line-height:1.6; text-align:center;}
#sunling-full .story{display:grid; grid-template-columns:.92fr 1.08fr; min-height:350px;}
#sunling-full .story-photo{position:relative; background:#24335d; overflow:hidden;}
#sunling-full .story-photo img{position:absolute; inset:0; width:100%; height:100%; min-height:350px; display:block; object-fit:cover; object-position:56% center; filter:saturate(.82) contrast(.96);}
#sunling-full .story-photo:before{content:""; position:absolute; inset:0; background:linear-gradient(12deg,rgba(20,35,69,.75) 0%,rgba(25,42,79,.27) 48%,rgba(25,42,79,.05) 100%); z-index:1;}
#sunling-full .story-photo:after{content:"示意影像"; position:absolute; z-index:2; top:16px; left:18px; padding:5px 8px; border:1px solid rgba(255,255,255,.46); color:rgba(255,255,255,.88); font-size:10px; letter-spacing:.1em;}
#sunling-full .story-year{position:absolute; z-index:2; left:34px; bottom:48px; color:#fff; font-size:58px; font-weight:500; letter-spacing:.06em; line-height:1;}
#sunling-full .story-caption{position:absolute; z-index:2; left:36px; bottom:25px; color:#fff; font-size:12px; line-height:1.6;}
#sunling-full .story-copy{padding:60px 52px; background:#faf9f5;}
#sunling-full .story-copy h2{line-height:1.45;}
#sunling-full .story-copy p{margin:17px 0 0; color:#526175; font-size:15px; line-height:1.9;}
#sunling-full .schedule{padding:52px; background:#f7f9f8;}
#sunling-full .schedule-box{display:grid; grid-template-columns:1fr 1fr 1.32fr; background:#fff; border-top:1px solid #c7d7e1; border-bottom:1px solid #c7d7e1;}
#sunling-full .schedule-box div{padding:21px 19px; border-right:1px solid #d9e1e8;}
#sunling-full .schedule-box div:last-child{border-right:0;}
#sunling-full .schedule-box b{display:block; color:#26398c; font-size:15px; font-weight:500;}
#sunling-full .schedule-box span{display:block; margin-top:7px; color:#5a687a; font-size:13px; line-height:1.6;}
#sunling-full .visit{padding:64px 52px; display:grid; grid-template-columns:1fr 1fr; gap:34px; background:#eaf3f8;}
#sunling-full .visit h2{line-height:1.4;}
#sunling-full .visit p{color:#526175; font-size:15px; line-height:1.8;}
#sunling-full .address{margin-top:21px; padding:20px; border-left:4px solid #f6d74a; background:#fff; color:#4e5d71; font-size:14px; line-height:1.9;}
#sunling-full .address b{color:#26398c; font-weight:500;}
#sunling-full .address em{display:inline-block; padding:4px 8px; background:#fff7cb; color:#4e5d71; font-size:13px; font-style:normal; line-height:1.65;}
#sunling-full .map{min-height:265px; overflow:hidden; background:#dce9ef;}
#sunling-full .map iframe{display:block; width:100%; height:100%; min-height:265px; border:0;}
#sunling-full a.primary,#sunling-full a.outline{display:inline-block; text-decoration:none;}
#sunling-full footer{padding:25px 52px; display:flex; justify-content:space-between; gap:20px; background:#1f2937; color:#cfd8e5; font-size:12px; line-height:1.7;}
#sunling-full footer b{color:#f6d74a; font-weight:500;}
@media(max-width:780px){.sl-page{background:var(--warm)}.page{margin:0;box-shadow:none}.utility{padding:9px 21px}.utility span:first-child{display:none}.utility span:last-child{margin-left:auto}.nav{min-height:74px;padding:10px 21px}.logo img{width:144px}.navlinks a:not(.line){display:none}.hero{grid-template-columns:1fr}.hero-copy{padding:46px 22px}.hero h1{font-size:34px}.hero-image{min-height:280px}.section{padding:49px 22px}.section h2{font-size:27px}.numbers{grid-template-columns:1fr}.number{border-right:0;border-bottom:1px solid var(--line)}.number:last-child{border:0}.story-opening{grid-template-columns:1fr;padding:21px;margin-bottom:24px}.story-quote{font-size:17px}.moment:nth-child(2n){margin-left:0}.promise-grid,.craft{grid-template-columns:1fr}.promise-card:nth-child(2n){transform:none}.craft-item{grid-template-columns:110px 1fr}.craft-item img{min-height:160px}.assurance{padding:45px 22px}.assurance-grid{grid-template-columns:1fr}.cta{grid-template-columns:1fr;padding:44px 22px;gap:22px}.cta h2{font-size:27px}.sl-page footer{display:block;padding:24px 22px}.sl-page footer span:last-child{display:block;margin-top:12px}}
@media(max-width:900px){.sl-page{background:var(--warm)}.page{margin:0;box-shadow:none}.hero{grid-template-columns:1fr}.hero-copy{padding:48px 22px}.hero h1{font-size:35px}.hero-visual{min-height:280px}.trust{grid-template-columns:1fr}.trust div{min-height:0;padding:18px 22px;border-right:0;border-bottom:1px solid rgba(255,255,255,.2)}.trust div:last-child{border:0}.cases{padding:50px 22px}.section-head{display:block}.section-head h2{font-size:27px}.section-head p{max-width:none;margin-top:9px;text-align:left}.filters{margin-top:23px}.case-grid{grid-template-columns:1fr}.how{grid-template-columns:1fr;gap:25px;padding:48px 22px}.how h2,.cta h2{font-size:27px}.cta{grid-template-columns:1fr;gap:23px;padding:45px 22px}.sl-page footer{display:block;padding:24px 22px}.sl-page footer span:last-child{display:block;margin-top:12px}}
@media(max-width:430px){.case-media{min-height:155px}.case-copy{padding:19px}.case h3{font-size:18px}.filters button{font-size:11px}.hero-note{top:14px;left:14px}}
@media(max-width:900px){.page{margin:0;box-shadow:none}.hero{grid-template-columns:1fr}.hero-copy{padding:47px 22px}.hero h1{font-size:35px}.hero-image{min-height:250px}.quick{grid-template-columns:1fr}.quick a{padding:19px 22px;border-right:0;border-bottom:1px solid var(--line)}.quick a:last-child{border-bottom:0}.article-zone{padding:48px 22px}.section-head{display:block}.section-head h2{font-size:27px}.section-head p{max-width:none;margin-top:9px;text-align:left}.article-grid{grid-template-columns:1fr}.article-card{min-height:0}.guide{grid-template-columns:1fr;gap:22px;padding:44px 22px}.guide h2{font-size:27px}.sl-page footer{display:block;padding:24px 22px}.sl-page footer span:last-child{display:block;margin-top:12px}}
@media(max-width:900px){.page{margin:0;box-shadow:none}.hero{grid-template-columns:1fr}.hero-copy{padding:47px 22px}.hero h1{font-size:35px}.hero-image{min-height:250px}.status{grid-template-columns:1fr}.status article{padding:20px 22px;border-right:0;border-bottom:1px solid var(--line)}.status article:last-child{border-bottom:0}.section{padding:48px 22px}.section-head{display:block}.section h2{font-size:27px}.section-head p{max-width:none;margin-top:9px;text-align:left}.announcement-empty{grid-template-columns:1fr;padding:25px}.announcement-icon{width:55px;height:55px;font-size:22px}.announcement-empty h3{font-size:21px}.reserve-grid{grid-template-columns:1fr}.post-reserve-head{display:block}.post-reserve-head p{margin-top:7px}.reserve-card{min-height:0}.workflow{grid-template-columns:1fr;gap:21px;padding:44px 22px}.workflow h2{font-size:27px}.sl-page footer{display:block;padding:24px 22px}.sl-page footer span:last-child{display:block;margin-top:12px}}
@media (max-width:720px){.sl-page{ background:var(--warm);}.page{margin:0; box-shadow:none;}.utility{padding:9px 20px; font-size:11px;}.utility span:first-child{display:none;}.utility span:last-child{margin-left:auto;}.nav{min-height:74px; padding:10px 20px;}.logo img{width:142px;}.links a:not(.line){display:none;}.links{gap:0;}.line{padding:10px 12px; font-size:12px;}.hero{grid-template-columns:1fr;}.hero-copy{padding:46px 22px 38px;}.sl-page h1{font-size:31px;}.hero-side{padding:26px 22px;}.notice{grid-template-columns:1fr; padding:0 22px;}.notice div,.notice div:first-child{padding:15px 0; border-right:0; border-bottom:1px solid var(--line);}.notice div:last-child{border-bottom:0;}.sl-page main{padding:42px 22px 50px;}.section-title{display:block;}.section-title small{display:block; margin-top:9px; white-space:normal;}.sl-page h2{font-size:25px;}.quick-nav{grid-template-columns:repeat(2,1fr); margin-bottom:29px;}.sl-page summary{min-height:70px; padding:13px 15px; gap:12px;}.sl-page summary b{font-size:16px;}.sl-page summary span{display:none;}.sl-page th,.sl-page td{padding:12px 14px;}.special{margin-top:30px; padding:25px 18px;}.special-grid{grid-template-columns:1fr;}.estimate{display:block; padding:26px 22px;}.estimate a{display:inline-block; margin-top:17px;}.sl-page footer{display:block; padding:22px;}.sl-page footer span:last-child{display:block; margin-top:14px;}
}
@media(max-width:720px){.sl-page{background:var(--w)}.page{margin:0;box-shadow:none}.top,.nav,.main{padding-left:22px;padding-right:22px}.nav{min-height:74px}.logo img{width:142px}.main{padding-top:40px}.layout{grid-template-columns:1fr}.item{grid-template-columns:1fr auto}.remove{grid-column:1/3;text-align:left}.summary{padding:22px}.sl-page footer{padding:22px}}
@media(max-width:720px){.checkout-flow{grid-template-columns:1fr 1fr}.flow-step{min-height:82px}}
@media(max-width:720px){.sl-page{background:var(--w)}.page{margin:0;box-shadow:none}.top{padding:9px 20px}.top span:first-child{display:none}.top span:last-child{margin-left:auto}.nav,.main{padding-left:22px;padding-right:22px}.logo img{width:142px}.detail{grid-template-columns:1fr;gap:25px}.visual{min-height:220px}.copy h1{font-size:29px}.product-tools{grid-template-columns:1fr}.addon-list{grid-template-columns:1fr}.purchase{flex-wrap:wrap}.purchase>button{height:44px}.care,.history{margin-top:32px;padding:22px}.notice{margin-top:32px}.notice summary{padding:19px;font-size:17px}.notice-body{padding:20px}.history-grid{grid-template-columns:1fr 1fr}.sl-page footer{padding:22px}}
@media(max-width:720px){.purchase>a{height:44px}.related{margin-top:32px;padding:22px}.related-grid{grid-template-columns:1fr}}
@media(max-width:720px){.product-description{margin-top:32px;padding:22px}.spec-grid{grid-template-columns:1fr}.product-faq h3{padding:15px}.faq-list summary{padding:14px 15px}.faq-list p{padding:0 15px 14px}}
@media(max-width:720px){.sl-page{background:var(--warm)}.page{margin:0;box-shadow:none}.utility{padding:9px 20px}.utility span:first-child{display:none}.utility span:last-child{margin-left:auto}.nav{min-height:74px;padding:10px 20px}.logo img{width:142px}.navlinks a:not(.bag){display:none}.hero{padding:42px 22px}.hero h1{font-size:31px}.intro{display:block;padding:20px 22px}.intro span{margin-top:5px}.content{padding:40px 22px 50px}.content-head{display:block}.grid{grid-template-columns:1fr 1fr;gap:10px}.card{min-height:250px;padding:16px}.card h3{font-size:16px}.card .note{font-size:12px}.price strong{font-size:16px}.actions{display:block}.actions>*{display:block;width:100%;margin-top:7px}.bottom,.sl-page footer{padding:24px 22px}.sl-page footer{display:block}.sl-page footer span:last-child{display:block;margin-top:13px}}
@media(max-width:720px){.card{min-height:290px;padding:0}.photo-slot{font-size:0}.photo-slot::before{font-size:10px;padding:6px 7px}.photo-slot .mark{top:9px;left:9px;width:36px;height:36px;font-size:10px}.card-copy{padding:14px}.price{margin-top:12px}}
@media(max-width:900px){.sl-page{background:var(--warm)}.page{margin:0;box-shadow:none}.hero{grid-template-columns:1fr}.hero-copy{padding:48px 22px}.hero h1{font-size:35px}.hero-visual{min-height:275px}.notice{padding:18px 22px}.section{padding:50px 22px}.section-head{display:block}.section-head h2,.line-box h2{font-size:27px}.section-head p{max-width:none;margin-top:9px;text-align:left}.estimate-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr;gap:12px}.step:not(:last-child):after{top:auto;right:auto;bottom:-25px;left:calc(50% - 19px);transform:rotate(90deg)}.line-box{grid-template-columns:1fr;gap:23px;padding:45px 22px}.sl-page footer{display:block;padding:24px 22px}.sl-page footer span:last-child{display:block;margin-top:12px}}
@media(max-width:430px){.estimate-card{grid-template-columns:52px 1fr;padding:19px;gap:12px}.item-icon{width:44px;height:44px}.estimate-card h3{font-size:17px}.visual-copy{left:14px;bottom:16px}}
@media(max-width:430px){.estimate-card .item-icon{height:auto;aspect-ratio:3 / 2}.estimate-card>div{padding:18px}}
@media (max-width:720px){#sunling-full .utility,#sunling-full .nav { padding-left:20px; padding-right:20px;}#sunling-full .navlinks{display:none;}#sunling-full .mobile-book{display:inline-block;}#sunling-full .hero{grid-template-columns:1fr;}#sunling-full .hero-copy{padding:45px 22px 32px;}#sunling-full h1{font-size:33px;}#sunling-full .hero-photo{margin:0 22px 30px; min-height:280px;}#sunling-full .hero-photo img{min-height:280px;}#sunling-full .trust{padding:22px; grid-template-columns:1fr 1fr;}#sunling-full .trust div{margin:9px 0; padding:0 11px;}#sunling-full .campaign-carousel{padding:30px 22px 34px;}#sunling-full .campaign-head{align-items:flex-start;}#sunling-full .campaign-head span{text-align:right; line-height:1.55;}#sunling-full .carousel-slide{min-height:365px;}#sunling-full .carousel-slide img{object-position:68% center;}#sunling-full .carousel-slide::before{background:linear-gradient(90deg,rgba(15,30,61,.91) 0%,rgba(20,36,69,.79) 58%,rgba(25,40,70,.22) 100%);}#sunling-full .campaign-copy{width:78%; padding:48px 0 42px 32px;}#sunling-full .campaign-copy h3{font-size:25px;}#sunling-full .campaign-copy p{font-size:13px;}#sunling-full .carousel-arrow{width:34px; height:34px;}#sunling-full .carousel-prev{left:9px;}#sunling-full .carousel-next{right:9px;}#sunling-full .section,#sunling-full .craft-zone,#sunling-full .schedule{padding-left:22px; padding-right:22px;}#sunling-full .section-head{display:block;}#sunling-full .hint{display:block; margin-top:10px; white-space:normal;}#sunling-full .story,#sunling-full .visit{grid-template-columns:1fr;}#sunling-full .service-grid{grid-template-columns:1fr 1fr;}#sunling-full .craft-grid{grid-template-columns:1fr;}#sunling-full .care{padding:42px 22px;}#sunling-full .care-head{display:block;}#sunling-full .care-note{display:block; margin-top:9px; white-space:normal;}#sunling-full .care-panels{grid-template-columns:1fr;}#sunling-full .care-panel{min-height:auto; padding:30px 25px;}#sunling-full .steps{grid-template-columns:1fr;}#sunling-full .steps::before{top:38px; bottom:38px; left:37px; right:auto; width:3px; height:auto;}#sunling-full .step{min-height:108px; display:block; padding:0 0 22px 102px; text-align:left;}#sunling-full .step-num{position:absolute; top:0; left:0;}#sunling-full .step b{display:block; width:auto; min-height:0; margin-top:0; text-align:left;}#sunling-full .step > span:not(.step-num){width:auto; min-height:0; text-align:left;}#sunling-full .story-photo{min-height:250px;}#sunling-full .story-photo img{min-height:250px; object-position:58% center;}#sunling-full .story-year{left:24px; bottom:45px; font-size:52px;}#sunling-full .story-caption{left:25px; bottom:21px; font-size:11px;}#sunling-full .story-copy{padding:42px 22px;}#sunling-full .schedule-box{grid-template-columns:1fr;}#sunling-full .schedule-box div{border-right:0; border-bottom:1px solid #d9e1e8;}#sunling-full .visit{padding:44px 22px;}#sunling-full footer{padding:21px; flex-direction:column;}
}
/* ============================================================
* 移植修正（實測量出來的，不在設計交付包裡）
* ============================================================ */
/* 1. 商品格狀改成自適應。
設計稿寫死三欄，前提是整頁 1120px 沒有側邊欄；
但 ECShop 的商品分類頁有側邊欄，實測格狀只分到 750px，
三欄硬切成 241px，卡片內容被擠爛。
改成最小 220px 自動排列，有幾欄由可用寬度決定。 */
.sl-page .grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
/* 2. 卡片動作列。原本有三顆（含收藏）要換行，收藏拿掉之後只剩兩顆，
改回設計稿的等分兩欄。 */
.sl-page .card .actions > a,
.sl-page .card .actions > button {
flex: 1 1 0;
min-width: 0;
white-space: nowrap;
}
.sl-page .card .actions > .btn-collect-icon {
flex: 0 0 auto;
min-width: 0;
padding: 10px;
border-color: transparent;
background: transparent;
}
/* 3. 「查看服務」被舊 style.css 塗成紅底（rgb(217,38,48)）。
設計稿是白底藍框，這裡把它蓋回來。
指定到 .sl-page .card .actions 這一層才贏得過舊規則。 */
.sl-page .card .actions > a {
background: #fff;
border: 1px solid var(--blue, #26398c);
color: var(--blue, #26398c);
text-decoration: none;
}
.sl-page .card .actions > button {
background: var(--blue, #26398c);
border: 1px solid var(--blue, #26398c);
color: #fff;
cursor: pointer;
}
/* 4. 舊 style.css 用 !important 鎖死了按鈕底色：
.product_list .actions a background:#007bff !important
.button, a.button, ... background:#d92630 !important
保留舊 CSS 的前提下，只能用同樣的武器蓋回來。
範圍限定在 .sl-page .card 底下，不影響站上其他還沒換版的按鈕。 */
.sl-page .card .actions > a {
background: #fff !important;
border: 1px solid var(--blue, #26398c) !important;
color: var(--blue, #26398c) !important;
text-shadow: none !important;
}
.sl-page .card .actions > button {
background: var(--blue, #26398c) !important;
border: 1px solid var(--blue, #26398c) !important;
color: #fff !important;
text-shadow: none !important;
}
.sl-page .card .actions > .btn-collect-icon {
background: transparent !important;
border-color: transparent !important;
color: #d92630 !important;
}
/* 5. 手機版商品格狀溢出修正（390px 實測）。
minmax(220px, 1fr) 的 220px 是硬下限，容器比它窄時卡片就衝出畫面
（量到卡片右緣 572px，視窗只有 390px）。
改成 min(220px, 100%)，窄螢幕時下限跟著容器縮。 */
.sl-page .grid {
grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}
@media (max-width: 700px) {
.sl-page .grid,
.sl-page .article-grid,
.sl-page .case-grid {
grid-template-columns: 1fr;
}
.sl-page .card img,
.sl-page .card .photo-slot {
max-width: 100%;
height: auto;
}
}
/* 6. 商品格狀被排序列推到右邊 350px 的修正（1440px 實測）。
舊 style.css 把排序列 p.tabs 設成 float:left，寬 350px。
設計稿的 .grid 是 grid 容器，會自成一個格式化脈絡，
所以不像一般 block 那樣蓋在浮動元素上，而是被整塊擠到旁邊：
量到 .grid 起點 x=489、寬 750px，父層是 x=139、寬 1100px ——
左邊空出 350px，商品只排得下三欄。
把排序列改成 flex 並在容器收尾清除浮動。 */
.sl-page .tab_wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
}
.sl-page .tab_wrapper .tabs {
float: none;
width: auto;
margin: 0;
}
.sl-page .tab_wrapper::after {
content: "";
display: table;
clear: both;
}
/* 7. 拿掉設計稿的照片佔位字。
設計稿沒有真實商品照，所以 .photo-slot::before 印了「商品實拍照片預留」
這幾個字當示意。站上是真的有照片的，這幾個字會疊在商品照上面。
虛線框與漸層底也一起收掉，只留下比例與邊框。 */
.sl-page .card .photo-slot::before {
content: none;
}
.sl-page .card .photo-slot {
background: #fff;
}
/* 8. 服務清單頁（設計稿 services-catalog.html）。
設計稿裡這一頁的 .hero 是「滿版漸層 + 52px 內距」，
首頁的 .hero 卻是「兩欄格狀」，兩個同名。合併成一支 CSS 之後
只會剩一個定義，所以這一頁改用自己的 class。 */
.sl-page .catalog-hero {
padding: 52px;
background: linear-gradient(120deg, #fcfdfc, #e8f3f7 68%, #d4e7ef);
}
.sl-page .catalog-hero h1 {
margin: 14px 0 8px;
color: var(--blue, #26398c);
font-size: 38px;
line-height: 1.3;
}
.sl-page .catalog-hero p {
max-width: 650px;
margin: 0;
color: #4e5d71;
font-size: 15px;
line-height: 1.85;
}
.sl-page .catalog-hero .crumb,
.sl-page .catalog-hero .crumb a {
color: #68778b;
font-size: 12px;
}
.sl-page .catalog-hero .crumb a {
color: var(--blue, #26398c);
}
/* 麵包屑沿用 ur_here.lbi，裡面是一整段文字加連結，
舊 style.css 給過它邊框與底色，這裡收乾淨。 */
.sl-page .catalog-hero .crumb .ur_here,
.sl-page .catalog-hero .crumb > div {
padding: 0;
margin: 0;
border: 0;
background: none;
font-size: 12px;
line-height: 1.6;
}
/* 子分類篩選：設計稿用 button，站上是連結，樣式對齊。 */
.sl-page .filter a {
padding: 9px 13px;
border: 1px solid var(--line, #d9e1e8);
background: #fff;
color: #566579;
font-size: 13px;
line-height: 1.4;
}
.sl-page .filter a.is-current {
border-color: var(--blue, #26398c);
background: var(--blue, #26398c);
color: #fff;
}
/* 設計稿的 .empty 預設 display:none，靠 JS 打開。
站上是伺服器端判斷要不要印，印出來就是要給人看的。 */
.sl-page .empty {
display: block;
}
@media (max-width: 720px) {
.sl-page .catalog-hero {
padding: 42px 22px;
}
.sl-page .catalog-hero h1 {
font-size: 31px;
}
}
/* 9. 首圖兩顆按鈕的文字色被舊 style.css 的 a 規則吃掉。
量到「LINE 上傳照片估價」是 #333 疊在 #26398C 上，
對比大約 1.5:1，幾乎看不見。設計稿是白字藍底。
舊規則是 a 選擇器，這裡用三層選擇器贏過它，不用 important。 */
.sl-page .catalog-hero .hero-actions a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 12px 16px;
font-size: 13px;
font-weight: 700;
}
.sl-page .catalog-hero .hero-actions a.all-price {
border: 1px solid var(--blue, #26398c);
background: #fff;
color: var(--blue, #26398c);
}
.sl-page .catalog-hero .hero-actions a.estimate {
background: var(--blue, #26398c);
color: #fff;
}
/* 10. 商品照沒有填滿 4:3 的框。
設計稿的 .photo-slot 只是空的佔位框，沒設 img；
站上放進真照片之後，圖片自己撐高度（量到 220 與 244 兩種），
同一列卡片高度就差 25px。把圖片鎖進框裡，
用 contain 不用 cover —— 衣服被裁掉比留白更難看。 */
.sl-page .card .photo-slot {
overflow: hidden;
}
.sl-page .card .photo-slot img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* 11. 商品卡內容對齊設計稿：簡述、洗法價、方角按鈕。
舊 style.css 的 .button 有 border-radius:5px、漸層底、陰影與 text-shadow，
而且整條是 id 之外最強的那種寫法，所以按鈕會變成圓角立體的樣子。
設計稿是完全方角的扁平按鈕，這裡逐項蓋掉。 */
.sl-page .card .note {
display: block;
margin-bottom: 2px;
color: var(--muted, #5b697b);
font-size: 13px;
line-height: 1.6;
}
.sl-page .card .price {
margin: 18px 0 0;
color: #536277;
font-size: 12px;
}
.sl-page .card .price .wash-line {
display: block;
}
.sl-page .card .price strong {
display: block;
margin-top: 4px;
color: var(--blue, #26398c);
font-size: 18px;
font-weight: 700;
}
.sl-page .card .actions {
display: flex;
gap: 8px;
margin-top: auto;
padding-top: 19px;
}
.sl-page .card .actions > a,
.sl-page .card .actions > button {
flex: 1;
min-height: 44px;
/* 這四條都要 important，因為 style.css:2380 那條是 important。 */
padding: 10px 7px !important;
margin: 0 !important;
border-radius: 0 !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
font: inherit;
font-size: 12px !important;
font-weight: 700;
letter-spacing: normal;
line-height: 1.4;
text-align: center;
text-shadow: none;
background-image: none;
box-shadow: none;
cursor: pointer;
}
/* 12. 商品簡述限兩行。
設計稿的簡述是一句話（例：厚薄與材質確認），
站上 goods_brief 填的是整段介紹，量到 8 行 157px，
卡片被撐到 696px（設計稿約 340px）。
只在清單上收成兩行，商品頁仍然完整顯示。 */
.sl-page .card .note {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 13. 拿掉「示意影像」浮水印 —— 只在放真照片的地方拿掉。
設計稿的圖都是示意圖，所以 hero-photo、craft-photo、story-photo
都用 ::before / ::after 壓了一個「示意影像」的角標。
三羚的首圖與職人工藝四張都是門市實拍，掛這個角標會誤導客人。
品牌故事那張目前還是設計稿的示意圖，角標留著。
輪播三張也是示意圖，角標是寫在 HTML 裡的 carousel-demo，不動。 */
#sunling-full .hero-photo:before,
#sunling-full .craft-photo:after {
content: none;
}
/* 14. 特殊件估價頁的兩個衝突。
(a) 按鈕：設計稿用 .button primary / secondary，
但 ECShop 舊 style.css 也有一個 .button，而且整條 important
（紅底、50px 圓角、陰影）。量到首圖兩顆按鈕變成紅色膠囊。
(b) 提醒列：.notice 這個 class 在兩頁有兩種長相 ——
價目表那頁是白底多欄，估價頁是深藍底單欄。
合併成一支 CSS 之後互相打架，深藍底上印了灰字。
估價頁那個另外掛 estimate-notice 區分。 */
.sl-page .hero-actions .button,
.sl-page .line-box .button {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 11px 16px !important;
margin: 0 !important;
border-radius: 0 !important;
font-size: 13px !important;
font-weight: 700;
letter-spacing: normal;
text-shadow: none;
background-image: none;
box-shadow: none;
}
.sl-page .hero-actions .button.primary {
background: var(--blue, #26398c) !important;
border: 1px solid var(--blue, #26398c) !important;
color: #fff !important;
}
.sl-page .hero-actions .button.secondary {
background: #fff !important;
border: 1px solid var(--blue, #26398c) !important;
color: var(--blue, #26398c) !important;
}
.sl-page .line-box .button {
background: var(--yellow, #f6d74a) !important;
border: 1px solid var(--yellow, #f6d74a) !important;
color: var(--blue, #26398c) !important;
}
.sl-page .estimate-notice div {
padding: 0;
border-right: 0;
}
.sl-page .estimate-notice b {
color: var(--yellow, #f6d74a);
font-size: 15px;
}
.sl-page .estimate-notice p,
.sl-page .estimate-notice span {
margin: 6px 0 0;
color: #dce8ff;
font-size: 13px;
line-height: 1.7;
}
.sl-page .estimate-notice .notice-icon {
display: grid;
place-items: center;
width: 26px;
height: 26px;
background: var(--yellow, #f6d74a);
color: var(--blue, #26398c);
font-weight: 700;
font-style: normal;
}
/* 合併後 .notice 有兩份，白底那份排在後面贏了，
估價頁的深藍底沒吃到，量到黃字對白底只有 1.42:1。
底色也一起指定在 estimate-notice 上。 */
.sl-page .estimate-notice {
display: grid;
grid-template-columns: auto 1fr;
gap: 15px;
align-items: start;
padding: 20px 52px;
background: var(--blue, #26398c);
color: #fff;
}
@media (max-width: 720px) {
.sl-page .estimate-notice {
padding: 18px 22px;
}
}
/* 估價卡的小標籤量到 4.45:1，差一點點過不了 4.5:1 的門檻。
底色不動，字色往深處挪一階就夠。 */
.sl-page .estimate-card .needs span {
color: #56657a;
}
/* 15. 手機可點區域補到 44×44（375px 實測）。
輪播的左右箭頭量到 34×34、圓點只有 9×9，手指點不準。
圓點的視覺大小不變，用 before 把可點範圍撐開，
版面不會因此位移。輪播連結差 1px，補一下就過。 */
@media (max-width: 720px) {
.sl-page .campaign-copy a,
#sunling-full .campaign-copy a {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
#sunling-full .carousel-arrow {
width: 44px;
height: 44px;
}
#sunling-full .carousel-dot {
position: relative;
}
#sunling-full .carousel-dot::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 44px;
height: 44px;
transform: translate(-50%, -50%);
}
#sunling-full .carousel-dots {
gap: 14px;
}
}
/* 16. 分頁列。
設計稿 24 頁裡**沒有任何一頁畫過分頁** ——
服務清單是用 JS 一次把 43 項全部渲染出來的。
站上是真的有分頁（16 筆一頁、共 3 頁），不能不管，
所以照設計稿的語彙自己接：方角、藍白、44px 可點。
量到原本是 3px 圓角、#333 灰字、高度只有 27px。 */
.sl-page .pagination {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
justify-content: center;
margin: 32px 0 0;
padding: 24px 0 0;
border-top: 1px solid var(--line, #d9e1e8);
}
.sl-page .pagination .total {
flex: 1 1 100%;
margin-bottom: 4px;
color: var(--muted, #5b697b);
font-size: 13px;
text-align: center;
}
.sl-page .pagination a,
.sl-page .pagination select {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 10px 14px;
border: 1px solid var(--line, #d9e1e8);
border-radius: 0;
background: #fff;
color: var(--blue, #26398c);
font: inherit;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
}
.sl-page .pagination a:hover,
.sl-page .pagination a:focus-visible {
border-color: var(--blue, #26398c);
background: var(--mist, #eaf3f8);
}
.sl-page .pagination a.current {
border-color: var(--blue, #26398c);
background: var(--blue, #26398c);
color: #fff;
}
.sl-page .pagination .gap {
color: var(--muted, #5b697b);
}
/* 分頁列在 form 裡面，form 本身沒有 class，
讓它不要在 content 裡多撐出一層寬度。 */
.sl-page .product_list > form {
margin: 0;
}
/* 17. 簡述真正收成兩行。
上一版的 line-clamp 沒生效：量到 display 是 flow-root 不是 -webkit-box，
而且 .note 這個 class 在別頁是一個有內距的說明框（padding:16px 18px），
合併之後把商品卡的簡述也套進去 ——
結果是「有裁切但裁在半行上」，量到渲染 6 行、被硬切在 74px。
這裡把 display 與內距一起指定死，範圍限定在商品卡底下。 */
.sl-page .card .card-copy .note {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
padding: 0;
margin: 0 0 2px;
max-height: calc(1.6em * 2);
color: var(--muted, #5b697b);
font-size: 13px;
line-height: 1.6;
}
/* 18. 商品頁的照片蓋住文字。
量到 .bd.detail 是 flex，兩個子項目：
.details.copy x=509 w=540
.extra_details.visual x=98 w=375
但裡面的 .gallery 是舊 style.css 的 float:left、寬度寫死 480px，
比容器還寬，整塊浮出去疊在文字上 —— 品名、價格全被蓋住。
設計稿的 .detail 是 grid（.82fr 1.18fr），照片在左、文字在右。
這裡把容器改成 grid，照片那一欄用 order 排到前面，
再把 gallery 的 float 與寫死寬度拆掉。 */
.sl-page .bd.detail {
display: grid;
grid-template-columns: 0.82fr 1.18fr;
gap: 42px;
align-items: start;
margin-top: 23px;
}
.sl-page .bd.detail > .extra_details.visual {
order: 1;
min-width: 0;
}
.sl-page .bd.detail > .details.copy {
order: 2;
min-width: 0;
}
.sl-page .bd.detail .gallery {
float: none;
width: 100%;
margin: 0;
}
.sl-page .bd.detail .gallery .cover,
.sl-page .bd.detail .gallery .cover img {
width: 100%;
height: auto;
}
.sl-page .bd.detail .gallery .cover {
aspect-ratio: 1 / 1;
overflow: hidden;
}
.sl-page .bd.detail .gallery .cover img {
height: 100%;
object-fit: contain;
}
@media (max-width: 900px) {
.sl-page .bd.detail {
grid-template-columns: 1fr;
gap: 24px;
}
}
/* 19. 商品頁的分享列（收藏／LINE 分享／推薦賺獎金）。
設計稿的 .product-tools 是方角、藍白；
站上這一列自己帶了一段 inline style，圓角 6px、灰字灰框。
三顆都在，只是長相不一樣，這裡對齊。 */
.sl-page .goods-share-bar .goods-share-btn {
border-radius: 0;
border-color: var(--line, #d9e1e8);
color: var(--blue, #26398c);
font-size: 13px;
font-weight: 700;
}
.sl-page .goods-share-bar .goods-share-btn:hover {
border-color: var(--blue, #26398c);
background: var(--mist, #eaf3f8);
}
.sl-page .goods-share-bar .goods-share-affiliate {
background: #fff;
border-color: var(--yellow, #f6d74a);
color: #8a6d00;
}
/* 20. 品名上面的分類標籤（設計稿的 .tag）。 */
.sl-page .pd-title .tag {
display: inline-block;
margin-bottom: 8px;
padding: 6px 10px;
background: var(--mist, #eaf3f8);
color: var(--blue, #26398c);
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
}
/* 21. 品名列：分類標籤要在品名上面一行，不是併排。
.pd-title 是 flex，標籤與 h1 被排成同一列。 */
.sl-page .pd-title {
flex-wrap: wrap;
}
.sl-page .pd-title .tag {
flex: 0 0 100%;
width: max-content;
}
/* 22. 下單按鈕與數量鈕。
量到「下單」是 #d92630 紅底、50px 圓角 —— 那是舊 style.css 的
.button 與 .bright_button，設計稿是深藍方角。
數量的加減鈕只有 28px 高，設計稿是 42px。 */
.sl-page .product_details .cart .button,
.sl-page .product_details input[type="submit"].button,
.sl-page #purchase_form .button {
min-height: 44px;
padding: 11px 21px !important;
border: 1px solid var(--blue, #26398c) !important;
border-radius: 0 !important;
background: var(--blue, #26398c) !important;
background-image: none !important;
box-shadow: none !important;
color: #fff !important;
font-size: 13px !important;
font-weight: 700;
letter-spacing: normal;
text-shadow: none !important;
}
.sl-page #purchase_form .btn-minus,
.sl-page #purchase_form .btn-plus {
width: 36px;
height: 42px;
border: 1px solid var(--line, #d9e1e8);
border-radius: 0;
background: #fff;
color: var(--blue, #26398c);
font-size: 18px;
line-height: 1;
}
/* 標籤搬出 .pd-title 之後，前面那段 flex 的處理就不需要了。 */
.sl-page .pd-title .tag {
flex: none;
width: auto;
}
/* 23. 商品說明被當成「分類頁的兩格說明條」。
.intro 這個 class 在服務清單頁是一條白底、左右 52px 內距的說明條，
商品頁拿來放商品簡述，於是量到 padding 25px 52px、字色 #999 ——
看起來像一個縮進去的灰框。設計稿的商品說明就是一般段落。 */
.sl-page .details.copy .intro {
padding: 0;
margin: 12px 0 0;
background: none;
color: var(--sub, #59697d);
font-size: 15px;
line-height: 1.85;
}
/* 24. 舊主題的按鈕樣式（紅底、圓角、漸層、文字陰影）在換版區塊裡一律收掉。
前面是逐個蓋，會一直有漏網的（例如商品標籤的「新增」）。
這裡在 .sl-page 底下統一處理，
已經自己指定過顏色的（卡片、首圖、分頁）不受影響，因為那些更具體。 */
.sl-page .button,
.sl-page .dim_button,
.sl-page .bright_button,
.sl-page input[type="submit"],
.sl-page input[type="button"] {
border-radius: 0 !important;
background-image: none !important;
box-shadow: none !important;
text-shadow: none !important;
letter-spacing: normal;
}
.sl-page .dim_button,
.sl-page .bright_button {
min-height: 44px;
padding: 11px 18px !important;
border: 1px solid var(--blue, #26398c) !important;
background-color: var(--blue, #26398c) !important;
color: #fff !important;
font-size: 13px !important;
font-weight: 700;
}
/* 25. 商品頁手機可點區域（375px 實測）。
真的是「控制項」的三處補到 44px：
上一個／下一個商品 26px、注意事項與商品評論的分頁籤 32px、「更多」21px。
麵包屑的連結維持原樣 —— 那是行內文字，撐高會把整行拉開，
跟先前的稽核結論一致。 */
@media (max-width: 720px) {
.sl-page .pd-nav .pd-btn,
.sl-page .has_tab_box .tabs a,
.sl-page #goods_info .tabs a,
.sl-page .hd .extra a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 10px 14px;
}
}
/* 26. 購物袋（設計稿 service-cart.html）。
設計稿是左邊清單、右邊一張結帳卡；
站上原本是一整塊 box，結帳按鈕擠在表格下面。
表格本身的功能（數量增減、刪除、更新、清空）一行都沒動。 */
.sl-page .flow-main .layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 24px;
align-items: start;
margin-top: 24px;
}
.sl-page .flow-main .items {
min-width: 0;
border: 1px solid var(--line, #d9e1e8);
background: #fff;
}
.sl-page .flow-main .summary {
position: sticky;
top: 24px;
padding: 22px;
border: 1px solid var(--line, #d9e1e8);
background: #fff;
}
.sl-page .flow-main .summary h2 {
margin: 0 0 10px;
color: var(--blue, #26398c);
font-size: 18px;
}
.sl-page .flow-main .summary p {
margin: 0 0 14px;
color: var(--muted, #58677a);
font-size: 13px;
line-height: 1.75;
}
.sl-page .flow-main .summary .line-confirm {
display: flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 12px 16px;
background: var(--blue, #26398c);
color: #fff;
font-size: 14px;
font-weight: 700;
}
.sl-page .flow-main .summary .line-hint {
display: block;
margin-top: 12px;
color: var(--muted, #58677a);
font-size: 12px;
line-height: 1.7;
}
.sl-page .flow-main .summary .summary-quote,
.sl-page .flow-main .summary .summary-back {
color: var(--blue, #26398c);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
/* 表格塞在卡片裡，左右留一點內距，最外圈的框由 .items 負責 */
.sl-page .flow-main .items .data_table {
width: 100%;
margin: 0;
border: 0;
}
@media (max-width: 900px) {
.sl-page .flow-main .layout {
grid-template-columns: 1fr;
}
.sl-page .flow-main .summary {
position: static;
}
}
/* 27. 舊 style.css:2380 那條 `display:inline-block !important` 會把
模板故意藏起來的按鈕變回可見 ——
購物袋的「更新購物車」寫了 style="display:none"，
量到 computed 還是 inline-block，所以一直露在畫面上。
行內樣式贏不過 important，只能用同樣的武器擋回去。 */
.sl-page [style*="display:none"],
.sl-page [style*="display: none"] {
display: none !important;
}
/* 「清空購物車」是破壞性動作，設計稿沒有給它主要按鈕的份量。
收成安靜的文字連結，紅色留給真的危險的地方。 */
.sl-page .button.text_button {
min-height: 0;
padding: 6px 2px !important;
border: 0 !important;
background: none !important;
color: var(--muted, #58677a) !important;
font-weight: 400;
text-decoration: underline;
text-underline-offset: 3px;
}
.sl-page .button.text_button:hover {
color: var(--blue, #26398c) !important;
}
/* 購物袋的數量加減鈕量到只有 28px，跟商品頁對齊成 36×42。 */
.sl-page .flow-main .quantity-selector .btn-minus,
.sl-page .flow-main .quantity-selector .btn-plus {
width: 36px;
height: 42px;
border: 1px solid var(--line, #d9e1e8);
border-radius: 0;
background: #fff;
color: var(--blue, #26398c);
font-size: 18px;
line-height: 1;
}
.sl-page .flow-main .quantity-selector .qty-input {
height: 42px;
border: 1px solid var(--line, #d9e1e8);
border-left: 0;
border-right: 0;
text-align: center;
}
/* 28. 送洗資料與確認頁（設計稿 checkout.html）。
設計稿是白底有框的卡片、兩欄表單、標籤在輸入框上方。
站上的欄位是 label 包 b 再包 input，所以直接對那個結構下手，
表單欄位、驗證與縣市連動一行都沒動。 */
.sl-page .flow-main .checkout-layout {
margin-top: 24px;
}
.sl-page .flow-main .checkout-card {
padding: 26px;
border: 1px solid var(--line, #d9e1e8);
background: #fff;
}
.sl-page .flow-main .checkout-card > h2 {
margin: 0 0 6px;
color: var(--blue, #26398c);
font-size: 20px;
}
.sl-page .flow-main .checkout-card > .intro {
margin: 0 0 20px;
padding: 0;
background: none;
color: var(--muted, #58677a);
font-size: 13px;
line-height: 1.8;
}
.sl-page .flow-main .address_form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 20px;
}
.sl-page .flow-main .address_form > label,
.sl-page .flow-main .address_form > p.label {
display: block;
margin: 0;
min-width: 0;
}
/* 區域選單與送出鈕各自佔滿一整行 */
.sl-page .flow-main .address_form > .region_select,
.sl-page .flow-main .address_form > .button_wrapper,
.sl-page .flow-main .address_form > p:last-child {
grid-column: 1 / -1;
}
.sl-page .flow-main .address_form b {
display: block;
margin-bottom: 6px;
color: #40506a;
font-size: 13px;
font-weight: 700;
}
.sl-page .flow-main .address_form input[type="text"],
.sl-page .flow-main .address_form input[type="email"],
.sl-page .flow-main .address_form input[type="tel"],
.sl-page .flow-main .address_form select,
.sl-page .flow-main .address_form textarea {
width: 100%;
min-height: 44px;
padding: 10px 12px;
border: 1px solid var(--line, #d9e1e8);
border-radius: 0;
background: #fff;
font: inherit;
font-size: 14px;
}
.sl-page .flow-main .address_form input:focus,
.sl-page .flow-main .address_form select:focus,
.sl-page .flow-main .address_form textarea:focus {
outline: 2px solid var(--blue, #26398c);
outline-offset: -2px;
}
/* 區域那一排四個下拉排成一列，窄螢幕自動換行 */
.sl-page .flow-main .address_form .region_select select {
width: auto;
min-width: 120px;
margin-right: 8px;
}
.sl-page .flow-main .address_form .required b::after {
content: " *";
color: #c8102e;
}
@media (max-width: 720px) {
.sl-page .flow-main .address_form {
grid-template-columns: 1fr;
}
.sl-page .flow-main .checkout-card {
padding: 20px;
}
}
/* 29. 送洗資料表單：把舊版的浮動排版拆乾淨。
量到 label 與 input 都是 float:left、寬度用 em 寫死
（.form .label b 是 10em、input 只剩 26.6px），
塞進 grid 之後欄位互相疊在一起。
這裡在 .sl-page .flow-main 底下把 float 與寬度全部收掉。
欄位名稱與必填星號是模板自己印的，不另外加。 */
.sl-page .flow-main .address_form > label,
.sl-page .flow-main .address_form > .label,
.sl-page .flow-main .address_form b,
.sl-page .flow-main .address_form input,
.sl-page .flow-main .address_form select,
.sl-page .flow-main .address_form textarea,
.sl-page .flow-main .address_form em {
float: none;
}
.sl-page .flow-main .address_form > label,
.sl-page .flow-main .address_form > .label {
width: auto;
}
.sl-page .flow-main .address_form b {
width: auto;
text-align: left;
padding: 0;
}
.sl-page .flow-main .address_form input[type="text"],
.sl-page .flow-main .address_form input[type="email"],
.sl-page .flow-main .address_form input[type="tel"],
.sl-page .flow-main .address_form input:not([type]),
.sl-page .flow-main .address_form textarea {
width: 100%;
max-width: none;
margin: 0;
}
.sl-page .flow-main .address_form select {
width: auto;
max-width: 100%;
min-height: 44px;
margin: 0 8px 8px 0;
}
.sl-page .flow-main .address_form .submit_wrap {
grid-column: 1 / -1;
padding: 6px 0 0;
}
/* 模板自己就印了紅色星號，不要再用 ::after 加一顆 */
.sl-page .flow-main .address_form .required b::after {
content: none;
}
/* 30. 送出完成（設計稿 order-complete.html）。
設計稿的 success-* 樣式沒有被抽進來（那一頁的 CSS 只在該頁內嵌），
照設計稿的數值補上。訂單編號、付款方式、金額那一段是真資料，保留。 */
.sl-page .success-main {
max-width: 720px;
margin: 28px auto 0;
padding: 36px 32px;
border: 1px solid var(--line, #d9e1e8);
background: #fff;
text-align: center;
}
.sl-page .success-badge {
display: grid;
place-items: center;
width: 62px;
height: 62px;
margin: 0 auto 18px;
background: var(--blue, #26398c);
color: #fff;
font-size: 30px;
line-height: 1;
}
.sl-page .success-main .flow_done {
margin: 0;
text-align: left;
}
.sl-page .success-main .flow_done .title {
color: var(--blue, #26398c);
font-size: 17px;
font-weight: 700;
}
.sl-page .success-main .flow_done dd {
margin: 8px 0 0;
color: var(--muted, #58677a);
font-size: 14px;
line-height: 1.8;
}
.sl-page .success-info {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin: 26px 0 0;
padding: 20px 0 0;
border-top: 1px solid var(--line, #d9e1e8);
text-align: left;
}
.sl-page .success-info b {
display: block;
color: var(--blue, #26398c);
font-size: 14px;
}
.sl-page .success-info span {
display: block;
margin-top: 4px;
color: var(--muted, #58677a);
font-size: 13px;
line-height: 1.7;
}
.sl-page .success-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-top: 26px;
}
.sl-page .success-actions a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 12px 22px;
font-size: 14px;
font-weight: 700;
}
.sl-page .success-actions .submit-button {
background: var(--blue, #26398c);
border: 1px solid var(--blue, #26398c);
color: #fff;
}
.sl-page .success-actions .secondary-button {
background: #fff;
border: 1px solid var(--blue, #26398c);
color: var(--blue, #26398c);
}
@media (max-width: 720px) {
.sl-page .success-main {
padding: 26px 20px;
}
.sl-page .success-info {
grid-template-columns: 1fr;
}
}
/* 結帳頁明細的「刪除」是店家自己做的小按鈕，量到 6px 圓角，收成方角。 */
.sl-page .drop.button {
border-radius: 0;
}
/* 31. 完成頁出現兩個打勾。
店家自己在 style.css 給 .flow_done dt.title 加了一個綠色圓形 ::before，
設計稿是方形深藍徽章，兩個一起出現。留設計稿那個。
.flow_done 自己也有圓角卡片與陰影，外層已經是卡片了，一併收掉。 */
.sl-page .success-main .flow_done {
max-width: none;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
text-align: left;
}
.sl-page .success-main .flow_done dt.title {
display: block;
font-size: 17px;
color: var(--blue, #26398c);
}
.sl-page .success-main .flow_done dt.title::before {
content: none;
}
/* 32. 按鈕文字置中的兩處漏網（量出來的，不是看出來的）。
(a) 排序連結「價格↑」：按鈕 88px、左右內距各 20px，內容框只剩 48px，
但「價格」28px 加上箭頭 em 20px 剛好 48px 再多一點，
箭頭被擠出內容框右邊 5px，整串文字看起來偏左 9px。
內距收窄並置中，箭頭改成不佔額外寬度。
(b) 分頁的頁碼下拉：旁邊的頁碼鈕都是置中的方塊，
只有這顆原生 select 的文字靠左，一排看起來就歪掉。
其餘按鈕全部量過：首頁 14、商品頁 14、購物袋 5、價目表 6、
標籤雲 4、留言板 5、文章 14、搜尋 4 顆，偏移都在 2px 以內。 */
.sl-page .tabs a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 12px;
text-align: center;
}
.sl-page .tabs a > span {
display: inline-flex;
align-items: center;
justify-content: center;
}
.sl-page .tabs a em.arrow_up,
.sl-page .tabs a em.arrow_down {
margin-left: 2px;
font-style: normal;
}
.sl-page .pagination select {
text-align: center;
text-align-last: center;
}
/* 33. 文章列表補上 2 欄那一階。
量到原本是 3 欄（901px 以上）直接掉到 1 欄（900px 以下），
中間 700～900px 的平板寬度只排得下一欄，右邊空一大半。
補一個 2 欄的中間階段：
901px 以上 → 3 欄
701～900px → 2 欄
700px 以下 → 1 欄
案例列表（case-grid）同一個問題，一起補。 */
@media (min-width: 701px) and (max-width: 900px) {
.sl-page .article-grid,
.sl-page .case-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* 洗前・洗後列表用的是文章內文的第一張圖，不是設計稿那兩個預留框。
.case-media 在設計稿是兩欄（洗前／洗後），這裡只有一張圖，所以改成單格。 */
.sl-page .case-media.case-photo{display:block;grid-template-columns:none;min-height:0;aspect-ratio:3/2;overflow:hidden;background:#eef3f7}
.sl-page .case-media.case-photo img{display:block;width:100%;height:100%;object-fit:cover}
.sl-page .case-media.case-photo:before{content:none}
/* 舊版型的 .wrapper 是固定 980px（static/css/style.css），
改版後的頁面設計寬度是 1120px，被它夾住就會縮成一條靠左的窄欄，
右邊露出底色。只放開有換版的那幾頁（同一個元素上同時有 .sl-page）。 */
.wrapper.sl-page{width:auto;max-width:none;margin:0}
/* 底色照設計稿：內頁 #f1f5f6、首頁 #f3f6f7。
站上原本吃的是佈景 static/theme10/style.css 的米色 #f7f3e2（首頁甚至是 #dabea7 的土黃），
在 1120px 的版心兩側露出來，跟設計稿差很多。
只改有換版的頁面：body 用 :has() 認得出來，沒換版的舊頁面照舊。 */
body:has(.sl-page){background:#f1f5f6}
.wrapper.sl-page{background:#f1f5f6}
#main.sl-page{background:#f3f6f7}
/* 最新動態的公告列表。設計稿只畫了「目前沒有公告」的空狀態，
這幾條是有公告時用的，配色與間距照設計稿同頁的其他區塊。 */
/* === 設計稿整頁樣式（限定範圍＋強制優先） ================================
關於三羚、最新動態、特殊件估價這三頁，是把設計稿的