/* ==========================================================================
* KARAT凱樂衛浴 B 站（karat-b）整站客製樣式
* --------------------------------------------------------------------------
* 主題 2026-09-19 由 horizon 分家；這支在 style.css 之後載入。設計決策見
* app/Custom/sites/karat-b/DESIGN.md，局部調整紀錄見同資料夾 NOTES.md。
*
* 1. 變數（C 站換配色只改這一段）
* 2. 基礎覆寫：品牌紅、深灰取代海軍藍、關掉進場動畫
* 3. 頁首／頁尾
* 4. 首頁客製元件（kb-*）
* 5. 商品：卡片、分類側欄、商品頁
* 6. 內頁
* 7. 手機
* ========================================================================== */
/* ---------- 1. 變數 ---------- */
:root {
--kb-red: #E50813; /* logo 原色：主要按鈕、價格、小面積重點 */
--kb-red-ink: #B8060F; /* hover、紅色文字（白底 6.5:1） */
--kb-ink: #1C1F22;
--kb-muted: #5A6168; /* 白底 6.2:1、石灰底 5.6:1 */
/* 2026-09-21 老大：灰底不要帶黃 → 改中性灰階（原本是暖灰 #F3F2EF／線 #E3E1DD） */
--kb-line: #E4E4E6;
--kb-stone: #F4F4F5;
--kb-dark: #202124;
--kb-dark-2: #17181A;
--kb-on-dark: #FFFFFF;
--kb-on-dark-2: #C9CDD1;
--kb-maxw: 1440px; /* 內容寬度：老大 2026-09-21 兩次要求加寬（1200 → 1360 → 1440；大螢幕才看得出差別，1440 螢幕本來就滿版留 48px） */
--kb-gut: clamp(20px, 4vw, 48px);
--kb-sec: clamp(64px, 8vw, 104px);
/* 蓋掉 horizon 的主色與「從主色調出來的海軍藍」：主色是紅，調出來會變暗紅色帶，不是我們要的 */
--hz-accent: var(--kb-red);
--accent-ink: var(--kb-red-ink);
--heading: var(--kb-ink);
--ink: var(--kb-ink);
--muted: var(--kb-muted);
--line: var(--kb-line);
--line-2: #D3D0CA;
--navy: var(--kb-dark);
--navy-deep: var(--kb-dark-2);
--soft: var(--kb-stone);
--accent-soft: #FBECEC;
--accent-on-navy: #FFFFFF;
--on-navy-2: var(--kb-on-dark-2);
--on-navy-3: #AEB4BA;
--maxw: var(--kb-maxw);
}
@supports (color: color-mix(in srgb, red, blue)) {
:root {
--navy: var(--kb-dark);
--navy-deep: var(--kb-dark-2);
--soft: var(--kb-stone);
--accent-soft: #FBECEC;
--accent-ink: var(--kb-red-ink);
--accent-on-navy: #FFFFFF;
}
}
/* ---------- 2. 基礎覆寫 ---------- */
body.theme-karatb { letter-spacing: 0; color: var(--kb-ink); }
.theme-karatb .hz-num { font-family: inherit; }
.theme-karatb a { color: var(--kb-red-ink); }
.theme-karatb h1, .theme-karatb h2, .theme-karatb h3 { letter-spacing: 0; }
/* 設計準則：不做進場動畫（例外＝主視覺的「緩慢放大」，那是老大 2026-09-21 指定、後台可關的效果） */
.theme-karatb *:not(.kb-hero-img), .theme-karatb *::before, .theme-karatb *::after { animation: none !important; }
.theme-karatb .btn { min-height: 52px; border-radius: 6px; font-size: 17px; font-weight: 700; letter-spacing: 0; }
.theme-karatb .btn:not(.btn-secondary):not(.btn-onnavy) { background: var(--kb-red); border-color: var(--kb-red); color: #fff; }
.theme-karatb .btn:not(.btn-secondary):not(.btn-onnavy):hover { background: var(--kb-red-ink); border-color: var(--kb-red-ink); }
.theme-karatb .btn-onnavy { background: #fff; color: var(--kb-ink) !important; }
/* 卡片上緣 3px 主色線是 horizon 的招牌，B 站不要紅線滿頁跑 */
.theme-karatb .columns-grid .col::before,
.theme-karatb .post-card::before { display: none !important; }
/* ---------- 3. 頁首／頁尾 ---------- */
.theme-karatb .hz-util { background: var(--kb-stone); color: var(--kb-muted); border-bottom: 0; font-size: 15px; }
.theme-karatb .hz-util a { color: var(--kb-ink); }
.theme-karatb .hz-util a:hover { color: var(--kb-red-ink); }
.theme-karatb .hz-util svg { color: var(--kb-red); }
.theme-karatb .hz-util-k, .theme-karatb .hz-util-note { color: var(--kb-muted); }
.theme-karatb .hz-util-shop a { font-weight: 700; }
.theme-karatb .hz-bar { border-bottom: 1px solid var(--kb-line); box-shadow: none; }
.theme-karatb .hz-brand img { display: block; height: 55px; width: auto; max-width: none; max-height: none; } /* ⚠️ 工版有 max-height:44px 的上限，不解除的話設 height 也只會顯示 44px */ /* 2026-09-21 老大在正式機上調成 55px，寫回檔案 */
.theme-karatb .hz-brand { flex: 0 0 auto; }
.theme-karatb .hz-brand { gap: 12px; }
.theme-karatb .hz-brand-name { font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: .06em; color: var(--kb-ink); white-space: nowrap; }
@media (max-width: 1024px) { .theme-karatb .hz-brand-name { font-size: 1.125rem; letter-spacing: .04em; gap: 8px; } }
.theme-karatb .hz-nav .nav-link { color: var(--kb-ink); font-weight: 500; }
.theme-karatb .hz-nav .nav-link[aria-current="page"], .theme-karatb .hz-nav .nav-link.is-active { color: var(--kb-red-ink); }
/* 找服務據點：很淡的細線條（老大 2026-09-21），滑過才變明顯 */
.theme-karatb .hz-cta { background: transparent !important; color: var(--kb-ink) !important; border: 1px solid rgba(28, 31, 34, .22) !important;
min-height: 42px; padding: 0 20px; font-size: 15px; font-weight: 500; border-radius: 4px; transition: border-color .15s, color .15s, background-color .15s; }
.theme-karatb .hz-cta:hover { background: transparent !important; border-color: var(--kb-red) !important; color: var(--kb-red-ink) !important; }
.theme-karatb .hz-cta::after { display: none; }
.theme-karatb .hz-footer { background: var(--kb-dark); }
.theme-karatb .hz-foot-cta { background: var(--kb-dark-2); }
.theme-karatb .hz-foot-cta h2 { color: #fff; }
.theme-karatb .hz-foot-tel .hz-num { color: #fff; }
.theme-karatb .hz-footer a { color: var(--kb-on-dark-2); }
.theme-karatb .hz-footer a:hover { color: #fff; }
.theme-karatb .cms-footer-extra { background: var(--kb-dark-2); }
/* 下拉選單（2026-09-21 老大：兩條紅線很醜、排版也鬆）
工版是「選單項目 3px 紅底線」＋「面板上緣 3px 紅線」兩條疊在一起。
B 版是紅色品牌，所以保留項目那條（細一點）當識別，面板那條拿掉改細線外框；
項目收緊到 44px 一列，超過 8 項自動兩欄（商品有 11 個品類，單欄會拉成一長條）。 */
.theme-karatb .hz-nav .nav-list > .nav-item > .nav-link::after { height: 2px; left: 12px; right: 12px; }
.theme-karatb .hz-nav .nav-sub {
background: #fff; border: 1px solid var(--kb-line); border-radius: 0; padding: 8px;
box-shadow: 0 16px 34px -20px rgba(28, 31, 34, .45); min-width: 220px; columns: 1; column-gap: 8px;
}
/* hong-c：桌機分欄改用系統共用的 menu-columns（後台「網站設定 › 下拉選單欄數」；自動／固定幾欄）。
原本 karat-b 的「超過 8 項固定兩欄的 grid」拿掉了——grid 同一列會等高，品類名稱一換行整列都被撐高，欄與欄之間留一堆空白；
改成 column-count，每欄各自往下排，項目不會互相撐高。第三層飛出面板的選單 JS 會自己略過、維持單欄。 */
@media (min-width: 1025px) {
.theme-karatb .hz-nav .nav-sub.cms-mc:not(.cms-mc-f) { column-count: var(--mc-cols, 1); column-gap: 8px; }
.theme-karatb .hz-nav .nav-sub.cms-mc .nav-link { padding-right: 12px; line-height: 1.5; }
}
.theme-karatb .hz-nav .nav-sub .nav-item { break-inside: avoid; }
.theme-karatb .hz-nav .nav-sub .nav-link { display: flex; align-items: center; min-height: 44px; padding: 8px 14px; font-size: 16px; letter-spacing: 0; border-radius: 3px; }
.theme-karatb .hz-nav .nav-sub .nav-link:hover, .theme-karatb .hz-nav .nav-sub .nav-link:focus-visible { background: var(--kb-stone); color: var(--kb-red-ink); }
.theme-karatb .hz-nav .nav-sub .nav-link.is-active { background: var(--kb-stone); font-weight: 700; }
/* 左欄分類與關鍵字（商品標籤，migrations/071）：目前項不要粉紅底，用紅字＋粗體 */
.theme-karatb .csb-item.is-cur, .theme-karatb .csb-item.is-cur > .csb-row { background: transparent !important; }
.theme-karatb .csb-link[aria-current="page"], .theme-karatb .csb-item.is-cur > .csb-row > .csb-link { color: var(--kb-red-ink); font-weight: 700; }
/* 左欄 sticky 要避開固定頁首（karat-b 的頁首高度） */
.theme-karatb .csb-layout { --csb-sticky-top: 116px; }
.theme-karatb .csb-head { font-size: 18px; font-weight: 700; color: var(--kb-ink); }
/* 頁尾「網站導覽」9 條排一直行太長（老大 2026-09-21）→ 桌機分兩欄，手機維持一欄 */
.theme-karatb .hz-foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
@media (max-width: 760px) { .theme-karatb .hz-foot-links { grid-template-columns: 1fr; } }
/* 頁面進場動態（老大 2026-10-19：「像 jc-aed 一樣增加頁面動態」；原本只有首頁區塊 26px 淡入、只播一次）。
觀察對象與子項由 theme.js 掛 .is-in／.no-anim／.kb-stagger；初始透明只在 .kb-reveal（JS 就緒）時套用，沒 JS 照樣看得到。
⚠️ 用 transition 不用 animation：上面「不做進場動畫」那條是 animation:none !important。 */
.kb-reveal .theme-karatb .kb-sec, .kb-reveal .theme-karatb .kb-hero-copy-in, .kb-reveal .theme-karatb .hc-about-intro, .kb-reveal .theme-karatb .hc-about-strip,
.kb-reveal .theme-karatb .hc-about-sec, .kb-reveal .theme-karatb .hc-line, .kb-reveal .theme-karatb.kb-page-contact #wsite-content > .block,
.kb-reveal .theme-karatb .product-card, .kb-reveal .theme-karatb .cms-list-cards > .cms-card, .kb-reveal .theme-karatb .pd-top { opacity: 0; transform: translateY(30px); }
.theme-karatb .kb-sec, .theme-karatb .kb-hero-copy-in, .theme-karatb .hc-about-intro, .theme-karatb .hc-about-strip, .theme-karatb .hc-about-sec, .theme-karatb .hc-line,
.theme-karatb.kb-page-contact #wsite-content > .block, .theme-karatb .product-card, .theme-karatb .cms-list-cards > .cms-card, .theme-karatb .pd-top {
transition: opacity .6s ease var(--kb-d, 0s), transform .6s cubic-bezier(.22, 1, .36, 1) var(--kb-d, 0s); }
.theme-karatb .is-in { opacity: 1 !important; transform: none !important; }
.theme-karatb .no-anim, .theme-karatb .no-anim .kb-stagger, .theme-karatb .no-anim img { transition: none !important; }
/* 圖片由上往下揭開（跟箴擎「我們到過的地方」同一招，用 clip-path 不用遮罩層，圖本身一直在）；手機與「減少動態」不做 */
.kb-reveal .theme-karatb .kb-cats-img img, .kb-reveal .theme-karatb .kb-feat-icon img, .kb-reveal .theme-karatb .hc-about-strip img, .kb-reveal .theme-karatb .hc-about-intro > img,
.kb-reveal .theme-karatb .hc-line-join img { clip-path: inset(0 0 100% 0); transition: clip-path .7s ease .15s; }
.theme-karatb .is-in .kb-cats-img img, .theme-karatb .is-in .kb-feat-icon img, .theme-karatb .is-in .hc-about-strip img, .theme-karatb .is-in .hc-about-intro > img,
.theme-karatb .is-in .hc-line-join img, .theme-karatb .kb-stagger.is-in img { clip-path: inset(0 0 0 0); }
@media (max-width: 992px), (prefers-reduced-motion: reduce) {
.kb-reveal .theme-karatb .kb-cats-img img, .kb-reveal .theme-karatb .kb-feat-icon img, .kb-reveal .theme-karatb .hc-about-strip img, .kb-reveal .theme-karatb .hc-about-intro > img,
.kb-reveal .theme-karatb .hc-line-join img { clip-path: none; transition: none; }
}
@media (prefers-reduced-motion: reduce) { .kb-reveal .theme-karatb * { opacity: 1 !important; transform: none !important; } }
.cms-canvas .theme-karatb .kb-sec, .cms-canvas .theme-karatb .kb-stagger, .cms-canvas .theme-karatb .product-card { opacity: 1 !important; transform: none !important; }
/* ---------- 4. 首頁客製元件 ---------- */
/* 客製元件外層會包在積木容器裡；讓每一區自己決定底色與上下間距 */
.theme-karatb .kb-sec { padding-block: var(--kb-sec); background: #fff; }
.theme-karatb .kb-sec--stone { background: var(--kb-stone); }
.theme-karatb .kb-in { max-width: calc(var(--kb-maxw) + var(--kb-gut) * 2); margin-inline: auto; padding-inline: var(--kb-gut); }
.theme-karatb .kb-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.theme-karatb .kb-h2 { margin: 0; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.3; font-weight: 700; color: var(--kb-ink); }
.theme-karatb .kb-lead { flex: 1 1 100%; order: 3; margin: 0; max-width: 40em; font-size: 17px; line-height: 1.8; color: var(--kb-muted); }
.theme-karatb .kb-more { margin-left: auto; font-size: 16px; font-weight: 700; color: var(--kb-ink); text-decoration: none; white-space: nowrap; border-bottom: 1.5px solid var(--kb-red); padding-bottom: 2px; }
.theme-karatb .kb-more:hover { color: var(--kb-red-ink); }
.theme-karatb .kb-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; border-radius: 6px; border: 1.5px solid var(--kb-red); background: var(--kb-red); color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.theme-karatb .kb-btn:hover { background: var(--kb-red-ink); border-color: var(--kb-red-ink); color: #fff; }
.theme-karatb .kb-btn-line { background: transparent; border-color: var(--kb-ink); color: var(--kb-ink); }
.theme-karatb .kb-btn-line:hover { background: var(--kb-ink); border-color: var(--kb-ink); color: #fff; }
.theme-karatb .kb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 主視覺：橫幅（預設）＝照片照原比例滿版、下方文字帶；對開＝左 7 右 5。兩種都不把字壓在照片上 */
.theme-karatb .kb-hero { background: var(--kb-stone); }
.theme-karatb .kb-hero-media { position: relative; overflow: hidden; background: var(--kb-stone); } /* 老大 2026-10-19：照片區與右側文字面板同一個底色（原本 #e8e6e1，輪播淡入淡出時會露出偏灰的底） */
.theme-karatb .kb-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
transition: opacity .8s ease; } /* 切換用交叉淡入淡出，不要瞬間跳（老大 2026-09-21：太生硬） */
.theme-karatb .kb-hero-img.is-on { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .theme-karatb .kb-hero-img { transition-duration: .01ms; } }
.theme-karatb .kb-hero-img.is-on { opacity: 1; }
.theme-karatb .kb-hero--band .kb-hero-media { aspect-ratio: 10 / 3; }
.theme-karatb .kb-hero--band .kb-hero-copy { max-width: calc(var(--kb-maxw) + var(--kb-gut) * 2); margin-inline: auto; padding: clamp(32px, 4.4vw, 56px) var(--kb-gut); }
.theme-karatb .kb-hero--band .kb-hero-copy-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 16px clamp(32px, 5vw, 72px); align-items: end; }
.theme-karatb .kb-hero--band .kb-hero-title { grid-row: span 2; }
.theme-karatb .kb-hero--band .kb-hero-lead { margin: 0; }
.theme-karatb .kb-hero--band .kb-hero-acts { margin-top: 8px; }
.theme-karatb .kb-hero--split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.theme-karatb .kb-hero--split .kb-hero-media { aspect-ratio: 16 / 10; }
.theme-karatb .kb-hero--split .kb-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 5vw, 72px) clamp(24px, 4.5vw, 64px); }
.theme-karatb .kb-hero--split .kb-hero-acts { margin-top: 32px; }
.theme-karatb .kb-hero--split .kb-hero-lead { margin: 20px 0 0; }
/* 輪播控制（2026-09-21 老大指定）：左右箭頭貼在照片兩側、導覽圈圈在照片下緣置中。
圈圈不是單純的點——目前這張是一條品牌紅的短橫條，其他是半透明白點，遠看就知道現在第幾張。
沒有 JS 時整組不顯示（.is-js 才出現），第一張照常看得到。 */
.theme-karatb .kb-hero-arrow { display: none; position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -24px;
place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--kb-ink); cursor: pointer;
box-shadow: 0 2px 10px rgba(28, 31, 34, .18); transition: background-color .15s, color .15s; }
.theme-karatb .kb-hero.is-js .kb-hero-arrow { display: grid; }
.theme-karatb .kb-hero-arrow--prev { left: clamp(12px, 2vw, 28px); }
.theme-karatb .kb-hero-arrow--next { right: clamp(12px, 2vw, 28px); }
.theme-karatb .kb-hero-arrow:hover { background: #fff; color: var(--kb-red-ink); box-shadow: 0 4px 16px rgba(28, 31, 34, .24); }
/* 桌機（有滑鼠的裝置）：滑到照片上才淡入箭頭，平常畫面乾淨；鍵盤 Tab 到也會出現（:focus-within）。
觸控裝置沒有 hover，箭頭一律常駐，不然使用者找不到。 */
@media (hover: hover) {
.theme-karatb .kb-hero.is-js .kb-hero-arrow { opacity: 0; pointer-events: none; transform: scale(.94);
transition: opacity .25s ease, transform .25s ease, background-color .15s, color .15s, box-shadow .15s; }
.theme-karatb .kb-hero.is-js:hover .kb-hero-arrow,
.theme-karatb .kb-hero.is-js:focus-within .kb-hero-arrow { opacity: 1; pointer-events: auto; transform: none; }
}
.theme-karatb .kb-hero-arrow svg { width: 22px; height: 22px; }
.theme-karatb .kb-hero-dots { display: none; position: absolute; left: 0; right: 0; bottom: clamp(6px, .8vw, 10px); z-index: 2;
justify-content: center; align-items: center; gap: 2px; }
.theme-karatb .kb-hero.is-js .kb-hero-dots { display: flex; }
.theme-karatb .kb-hero-dot { display: grid; place-items: center; width: 34px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; }
.theme-karatb .kb-hero-dot span { display: block; width: 28px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .7);
box-shadow: 0 1px 3px rgba(0, 0, 0, .22); transform: scaleX(.143); transform-origin: 50% 50%;
transition: transform .3s ease, background-color .3s ease; }
/* 細一點：4px 高的短橫條；沒選中的縮成 4px 的小方點（.143 ≒ 4/28），選中的才拉長到 28px */
/* ⚠️ 伸縮用 transform 不用 width：改 width 會觸發版面重排（雖然這裡只有幾顆點，習慣要對）。
寬度固定 26px，預設縮成 .346（＝9px 的圓點），目前這張才放到滿。 */
.theme-karatb .kb-hero-dot:hover span { background: #fff; }
.theme-karatb .kb-hero-dot.is-on span { transform: scaleX(1); background: var(--kb-red); }
.theme-karatb .kb-hero-title { margin: 0; font-size: clamp(32px, 4vw, 54px); line-height: 1.25; font-weight: 700; color: var(--kb-ink); }
.theme-karatb .kb-hero-lead { font-size: 18px; line-height: 1.8; color: var(--kb-muted); }
.theme-karatb .kb-hero-acts { display: flex; flex-wrap: wrap; gap: 12px; }
/* 品類入口：白底商品照＋名稱＋件數 */
/* 品類入口（老大 2026-09-21：改用原站那 9 張分類照、不顯示件數、UI 重做）
9 個剛好排 3×3。原站的圖是白底去背＋紅色手寫英文，所以格子平常留白、滑過才上灰底，
不再用 1px 格線把九宮格框起來（老大：不要那麼多線條）。 */
.theme-karatb .kb-cats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 2.6vw, 38px) clamp(16px, 1.8vw, 24px);
margin: 0; padding: 0; list-style: none; background: none; border: 0; }
.theme-karatb .kb-cats-grid li { background: none; }
.theme-karatb .kb-cats-grid a { display: block; height: 100%; padding: 0; color: var(--kb-ink); text-decoration: none; }
.theme-karatb .kb-cats-img { position: relative; display: block; aspect-ratio: 3 / 2; margin: 0; background: #fff;
border: 1px solid var(--kb-line); overflow: hidden;
transition: background-color .35s ease, border-color .35s ease, transform .45s var(--ease-out, cubic-bezier(.2,.7,.3,1)), box-shadow .45s ease; }
.theme-karatb .kb-cats-img img { width: 100%; height: 100%; object-fit: contain;
transition: transform .6s var(--ease-out, cubic-bezier(.2,.7,.3,1)); }
/* 滑過時從格子底部升起的品牌紅色條（收在 overflow 裡，平常看不到） */
.theme-karatb .kb-cats-img::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
background: var(--kb-red); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out, ease); }
/* 老大 2026-09-21：hover 動態大一點、多一點層次 → 整格上浮＋淡陰影、底色轉灰、圖放大、底部紅條展開 */
.theme-karatb .kb-cats-grid a:hover .kb-cats-img, .theme-karatb .kb-cats-grid a:focus-visible .kb-cats-img {
background: var(--kb-stone); border-color: transparent; transform: translateY(-8px); box-shadow: 0 22px 36px -26px rgba(26, 24, 22, .55); }
.theme-karatb .kb-cats-grid a:hover .kb-cats-img img, .theme-karatb .kb-cats-grid a:focus-visible .kb-cats-img img { transform: scale(1.09); }
.theme-karatb .kb-cats-grid a:hover .kb-cats-img::after, .theme-karatb .kb-cats-grid a:focus-visible .kb-cats-img::after { transform: scaleX(1); }
.theme-karatb .kb-cats-name { display: flex; align-items: center; gap: 8px; padding: 13px 2px 0;
font-size: 17px; font-weight: 700; line-height: 1.4; transition: color .25s ease, transform .35s var(--ease-out, ease); }
.theme-karatb .kb-cats-grid a:hover .kb-cats-name { transform: translateY(-4px); }
.theme-karatb .kb-cats-name::after { content: ''; width: 22px; height: 1px; background: currentColor; opacity: 0;
transform: translateX(-10px); transition: opacity .3s ease, transform .35s var(--ease-out, ease); }
.theme-karatb .kb-cats-grid a:hover .kb-cats-name { color: var(--kb-red-ink); }
.theme-karatb .kb-cats-grid a:hover .kb-cats-name::after { opacity: 1; transform: none; }
.theme-karatb .kb-cats-n { margin-top: 2px; font-size: 15px; color: var(--kb-muted); font-variant-numeric: tabular-nums; }
/* 圖文重點區 */
.theme-karatb .kb-feat-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.theme-karatb .kb-feat--flip .kb-feat-img { order: 2; }
.theme-karatb .kb-feat--noimg .kb-feat-in { grid-template-columns: 1fr; }
.theme-karatb .kb-feat-img { margin: 0; }
.theme-karatb .kb-feat-img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.theme-karatb .kb-feat-copy .kb-h2 { margin-bottom: 16px; }
.theme-karatb .kb-feat-copy .kb-lead { margin-bottom: 8px; }
.theme-karatb .kb-feat-list { margin: 24px 0 0; }
.theme-karatb .kb-feat-list > div { padding: 16px 0; border-top: 1px solid var(--kb-line); }
.theme-karatb .kb-feat-list > div:last-child { border-bottom: 1px solid var(--kb-line); }
.theme-karatb .kb-feat-list dt { font-size: 19px; font-weight: 700; }
.theme-karatb .kb-feat-list dt a { color: var(--kb-ink); }
.theme-karatb .kb-feat-list dd { margin: 4px 0 0; font-size: 16px; line-height: 1.75; color: var(--kb-muted); }
.theme-karatb .kb-feat-act { margin: 28px 0 0; }
/* 三欄小圖版（沒有大圖、每項都有小圖時） */
.theme-karatb .kb-feat--tiles .kb-feat-copy .kb-h2 { margin-bottom: 12px; }
.theme-karatb .kb-feat--tiles .kb-feat-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.theme-karatb .kb-feat--tiles .kb-feat-list > div { display: flex; flex-direction: column; padding: 0; border: 0; background: #fff; }
.theme-karatb .kb-feat--tiles .kb-feat-list > div:last-child { border: 0; }
.theme-karatb .kb-feat--tiles .kb-feat-icon { order: -1; margin: 0; padding: 28px 28px 0; }
.theme-karatb .kb-feat--tiles .kb-feat-icon img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.theme-karatb .kb-feat--tiles dt { padding: 20px 28px 0; }
.theme-karatb .kb-feat--tiles dd:not(.kb-feat-icon) { padding: 0 28px 28px; }
/* 細線列表（技術與認證） */
.theme-karatb .kb-rows { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--kb-ink); }
.theme-karatb .kb-rows li { display: grid; grid-template-columns: minmax(160px, 3fr) minmax(0, 7fr) auto; gap: 8px 32px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--kb-line); }
.theme-karatb .kb-rows-t { margin: 0; font-size: 20px; font-weight: 700; }
.theme-karatb .kb-rows-d { margin: 0; font-size: 17px; line-height: 1.75; color: var(--kb-muted); }
.theme-karatb .kb-rows-a { font-size: 16px; font-weight: 700; color: var(--kb-ink); white-space: nowrap; }
.theme-karatb .kb-rows-a:hover { color: var(--kb-red-ink); }
/* 橫排文字連結（售後服務） */
.theme-karatb .kb-list--inline { padding-block: clamp(40px, 5vw, 56px); border-top: 1px solid var(--kb-line); }
.theme-karatb .kb-list--inline .kb-head { margin-bottom: 18px; }
.theme-karatb .kb-inline { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; }
.theme-karatb .kb-inline li + li { border-left: 1px solid var(--kb-line); }
.theme-karatb .kb-inline a, .theme-karatb .kb-inline span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; font-size: 18px; font-weight: 500; color: var(--kb-ink); text-decoration: none; }
.theme-karatb .kb-inline li:first-child a, .theme-karatb .kb-inline li:first-child span { padding-left: 0; }
.theme-karatb .kb-inline a:hover { color: var(--kb-red-ink); text-decoration: underline; }
/* 商品輪播（新品）：桌機四欄、手機兩欄，箭頭翻頁、可滑；預設不自動播（老大 2026-09-21） */
.theme-karatb .kb-prods-nav { display: flex; gap: 8px; margin-left: auto; }
.theme-karatb .kb-prods-nav + .kb-more { margin-left: 16px; }
.theme-karatb .kb-prods-arrow { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--kb-line); border-radius: 50%; background: #fff; color: var(--kb-ink); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.theme-karatb .kb-prods-arrow:hover { border-color: var(--kb-red); background: var(--kb-red); color: #fff; }
.theme-karatb .kb-prods-arrow svg { width: 20px; height: 20px; }
.theme-karatb .kb-prods.is-carousel .kb-prods-row { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.theme-karatb .kb-prods.is-carousel .kb-prods-row::-webkit-scrollbar { display: none; }
.theme-karatb .kb-prods.is-carousel .kb-pcard { flex: 0 0 calc((100% - 3 * clamp(16px, 2vw, 28px)) / 4); scroll-snap-align: start; }
/* 商品列（新品） */
.theme-karatb .kb-prods-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
.theme-karatb .kb-pcard a, .theme-karatb .kb-pcard > div { display: flex; flex-direction: column; color: var(--kb-ink); text-decoration: none; }
.theme-karatb .kb-pcard-img { display: block; aspect-ratio: 1; margin-bottom: 14px; background: #fff; border: 1px solid var(--kb-line); }
.theme-karatb .kb-sec--stone .kb-pcard-img { border-color: transparent; }
.theme-karatb .kb-pcard-img img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.theme-karatb .kb-pcard-sku { font-size: 15px; color: var(--kb-muted); font-variant-numeric: tabular-nums; }
.theme-karatb .kb-pcard-name { font-size: 18px; font-weight: 700; line-height: 1.5; }
.theme-karatb .kb-pcard-price { margin-top: 6px; font-size: 17px; color: var(--kb-red-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.theme-karatb .kb-pcard a:hover .kb-pcard-name { color: var(--kb-red-ink); }
/* 品牌影片 */
.theme-karatb .kb-video-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.theme-karatb .kb-video-copy .kb-h2 { margin-bottom: 16px; }
.theme-karatb .kb-video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 4px; overflow: hidden; }
.theme-karatb .kb-video-frame iframe, .theme-karatb .kb-video-poster, .theme-karatb .kb-video-poster img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.theme-karatb .kb-video-poster img { object-fit: cover; }
.theme-karatb .kb-video-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; display: grid; place-items: center; border-radius: 50%; background: var(--kb-red); color: #fff; }
.theme-karatb .kb-video-play svg { width: 34px; height: 34px; margin-left: 4px; }
.theme-karatb .kb-video-poster:hover .kb-video-play { background: var(--kb-red-ink); }
/* 專業資源：深底三欄 */
.theme-karatb .kb-pro { background: var(--kb-dark); color: var(--kb-on-dark-2); }
.theme-karatb .kb-pro .kb-h2 { color: #fff; }
.theme-karatb .kb-pro .kb-lead { color: var(--kb-on-dark-2); }
.theme-karatb .kb-pro-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.theme-karatb .kb-pro-cols li { display: flex; flex-direction: column; padding: 4px 32px; border-left: 1px solid rgba(255, 255, 255, .18); }
.theme-karatb .kb-pro-cols li:first-child { padding-left: 0; border-left: 0; }
.theme-karatb .kb-pro-cols h3 { margin: 0 0 10px; font-size: 21px; color: #fff; }
.theme-karatb .kb-pro-cols p { margin: 0 0 18px; font-size: 16px; line-height: 1.75; }
.theme-karatb .kb-pro-cols a { margin-top: auto; align-self: flex-start; color: #fff; font-weight: 700; font-size: 16px; border-bottom: 1.5px solid var(--kb-red); text-decoration: none; padding-bottom: 2px; }
/* 最新消息：日期列表 */
.theme-karatb .kb-news-list { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--kb-ink); }
.theme-karatb .kb-news-list a { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--kb-line); color: var(--kb-ink); text-decoration: none; font-size: 17px; }
.theme-karatb .kb-news-list time { color: var(--kb-muted); font-size: 16px; font-variant-numeric: tabular-nums; }
.theme-karatb .kb-news-list a:hover span { color: var(--kb-red-ink); text-decoration: underline; }
/* 找服務據點 */
.theme-karatb .kb-find-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.theme-karatb .kb-find-form { display: flex; gap: 12px; }
.theme-karatb .kb-find-form select { flex: 1; min-height: 54px; padding: 0 14px; border: 1.5px solid var(--kb-line); border-radius: 6px; background: #fff; font: inherit; font-size: 17px; color: var(--kb-ink); }
.theme-karatb .kb-find-tel { margin: 20px 0 0; font-size: 16px; color: var(--kb-muted); }
.theme-karatb .kb-find-offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 0; padding: 0; list-style: none; }
.theme-karatb .kb-find-offices li { padding: 18px 0; border-top: 1px solid #DAD7D1; }
.theme-karatb .kb-find-offices h3 { margin: 0 0 4px; font-size: 18px; }
.theme-karatb .kb-find-offices p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--kb-muted); }
.theme-karatb .kb-find-offices a { color: var(--kb-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.theme-karatb .kb-find-tel a { color: var(--kb-ink); font-weight: 700; font-size: 22px; text-decoration: none; font-variant-numeric: tabular-nums; }
/* 服務據點頁：依縣市篩選的列表 */
.theme-karatb .kb-dealers-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 28px; padding: 18px 20px; background: var(--kb-stone); border-radius: 6px; }
.theme-karatb .kb-dealers-bar label { font-weight: 700; }
.theme-karatb .kb-dealers-bar select { min-height: 50px; min-width: 240px; padding: 0 12px; border: 1.5px solid var(--kb-line); border-radius: 6px; background: #fff; font: inherit; font-size: 17px; }
.theme-karatb .kb-dealers-count { margin: 0; color: var(--kb-muted); }
.theme-karatb .kb-dealers-group { margin-top: 36px; }
.theme-karatb .kb-dealers-city { display: flex; align-items: baseline; gap: 12px; margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1.5px solid var(--kb-ink); font-size: 22px; }
.theme-karatb .kb-dealers-city span { font-size: 15px; font-weight: 400; color: var(--kb-muted); }
.theme-karatb .kb-dealers-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; }
.theme-karatb .kb-dealers-list li { padding: 16px 0; border-bottom: 1px solid var(--kb-line); }
.theme-karatb .kb-dealers-list p { margin: 0; font-size: 16px; line-height: 1.65; }
.theme-karatb .kb-dealers-name { font-weight: 700; font-size: 17px !important; }
.theme-karatb .kb-dealers-kind { margin-left: 8px; padding: 1px 8px; border-radius: 3px; background: var(--kb-stone); font-size: 15px; font-weight: 500; color: var(--kb-muted); }
.theme-karatb .kb-dealers-area { color: var(--kb-muted); }
.theme-karatb .kb-dealers-addr a, .theme-karatb .kb-dealers-tel a { color: var(--kb-ink); }
.theme-karatb .kb-dealers-tel a { font-variant-numeric: tabular-nums; }
@media (max-width: 1080px) { .theme-karatb .kb-dealers-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
.theme-karatb .hz-brand img { height: 38px; max-height: none; }
/* 手機：箭頭縮小、靠邊一點，不要擋住照片（老大 2026-09-21）；2026-09-22 再淡：半透明白底、不打陰影、圖示淡一點，
不藏掉——這套主視覺沒有手勢滑動，藏了訪客就沒得換張 */
.theme-karatb .kb-hero-arrow { width: 32px; height: 32px; margin-top: -16px; background: rgba(255, 255, 255, .42); box-shadow: none; color: rgba(26, 24, 22, .75); }
.theme-karatb .kb-hero-arrow svg { width: 16px; height: 16px; }
.theme-karatb .kb-hero-arrow--prev { left: 8px; }
.theme-karatb .kb-hero-arrow--next { right: 8px; }
.theme-karatb .kb-hero-dot { width: 28px; height: 26px; }
}
@media (max-width: 560px) { .theme-karatb .kb-dealers-list { grid-template-columns: 1fr; } .theme-karatb .kb-dealers-bar select { min-width: 0; width: 100%; } }
/* 文章列表卡（產品專刊、最新消息）——2026-09-21 重做
DOM 順序是「封面 → 標題 → 日期 → 摘要」，畫面要的是「封面 → 日期 → 標題 → 摘要」，用 flex order 調，不動共用樣板。
規則：封面 3:2 滿版；內容區左右各 22px；日期 14.5px 灰、字距 .06em；標題 17px/1.6 兩行；摘要 15px/1.8 兩行。
高度用「行數」對齊（min-height 只算 em，不混 padding），一列卡片底部才會齊。 */
.theme-karatb .post-list { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: clamp(20px, 2.2vw, 30px) !important; grid-auto-rows: 1fr; }
.theme-karatb .post-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--kb-line);
border-radius: 0; box-shadow: none; overflow: hidden; transition: border-color .2s ease; }
.theme-karatb .post-card:hover { border-color: var(--kb-ink); }
.theme-karatb .post-card > a:first-child { order: 1; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--kb-stone); }
.theme-karatb .post-card > a:first-child img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.theme-karatb .post-card:hover > a:first-child img { transform: scale(1.04); }
.theme-karatb .post-card .post-date { order: 2; margin: 0; padding: 20px 22px 0; font-size: 14.5px; line-height: 1.4; letter-spacing: .06em;
color: var(--kb-muted); font-variant-numeric: tabular-nums; }
/* ⚠️ 卡片是 flex 容器，子元素的 display:-webkit-box 會被瀏覽器轉成 block，-webkit-line-clamp 直接失效
（2026-09-21 實測：摘要第三行露出一半）。改用「固定兩行高度＋overflow:hidden」，任何瀏覽器都成立。 */
.theme-karatb .post-card h2 { order: 3; margin: 0; padding: 8px 22px 0; font-size: 17px; line-height: 1.6; font-weight: 700;
height: calc(2 * 1.6em + 8px); overflow: hidden; } /* box-sizing 是 border-box，高度要把 padding-top 算進去，否則第二行被切 */
.theme-karatb .post-card h2 a { color: var(--kb-ink); text-decoration: none; }
.theme-karatb .post-card h2 a:hover { color: var(--kb-red-ink); }
.theme-karatb .post-card > p:not(.post-date) { order: 4; margin: 10px 0 22px; padding: 0 22px; font-size: 15px; line-height: 1.8;
color: var(--kb-muted); height: calc(2 * 1.8em); overflow: hidden; }
.theme-karatb .post-card .pl-sub { order: 4; padding: 0 22px 22px; font-size: 15px; }
/* 沒有封面的文章：不留空白框，改成上緣一條墨線的純文字卡 */
.theme-karatb .post-card:not(:has(img)) { border-top: 3px solid var(--kb-ink); }
.theme-karatb .post-card:not(:has(img)) .post-date { padding-top: 22px; }
/* 「置中標題」文字積木與列表積木的上下距疊起來會空一大塊（老大 2026-09-21：前後空白太大，業主都不喜歡）
→ 標題區塊上下各收到 24/8px，列表區塊自己的上距歸零，手機再收一階。 */
.theme-karatb .block-text:has(+ .block-post-list) { padding-top: 24px; padding-bottom: 8px; }
.theme-karatb .block-text + .block-post-list { padding-top: 0; }
.theme-karatb .block-post-list { padding-bottom: clamp(36px, 4vw, 56px); }
.theme-karatb .post-list { margin-top: 8px !important; }
@media (max-width: 760px) {
.theme-karatb .block-text:has(+ .block-post-list) { padding-top: 14px; padding-bottom: 4px; }
.theme-karatb .block-post-list { padding-bottom: 28px; }
}
@media (max-width: 1080px) { .theme-karatb .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { .theme-karatb .post-list { grid-template-columns: 1fr !important; grid-auto-rows: auto; } }
/* ---------- 5. 商品 ---------- */
.theme-karatb .product-card { border-radius: 0; box-shadow: none; border: 1px solid var(--kb-line); }
.theme-karatb .product-card::before { display: none !important; }
.theme-karatb .product-thumb { background: #fff; }
.theme-karatb .product-thumb img { object-fit: contain !important; }
.theme-karatb .product-card h3 { font-size: 17px; }
.theme-karatb .product-price, .theme-karatb .pd-price { color: var(--kb-red-ink); font-variant-numeric: tabular-nums; }
.theme-karatb .product-card .product-desc { display: none !important; }
/* 品名下方的分類小字（2026-09-21 起卡片共用；B 版跟著 C 版一起有） */
.theme-karatb .product-cats { margin: 0; padding: 0 var(--product-pad, 16px) 2px; font-size: 15px; color: var(--kb-muted); }
.theme-karatb .product-related { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--kb-line); }
.theme-karatb .product-related > h2 { font-size: 22px; } /* 說明是整段規格（清單＋規格表），卡片上不印；詳細頁才看 */
/* 商品頁的規格表（補資料時把原站的規格段落轉成 table.kb-spec） */
.theme-karatb table.kb-spec { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 16px; }
.theme-karatb table.kb-spec th, .theme-karatb table.kb-spec td { padding: 12px 14px; border-bottom: 1px solid var(--kb-line); text-align: left; vertical-align: top; }
.theme-karatb table.kb-spec th { width: 30%; color: var(--kb-muted); font-weight: 500; background: var(--kb-stone); }
.theme-karatb .kb-downloads { margin: 16px 0; padding: 0; list-style: none; border-top: 1px solid var(--kb-line); }
.theme-karatb .kb-downloads li a { display: flex; align-items: center; gap: 10px; min-height: 52px; border-bottom: 1px solid var(--kb-line); color: var(--kb-ink); font-weight: 500; text-decoration: none; }
.theme-karatb .kb-downloads li a:hover { color: var(--kb-red-ink); }
/* ---------- 6. 內頁 ---------- */
.theme-karatb .kb-pagehead { background: var(--kb-stone); border-bottom: 1px solid var(--kb-line); padding: 20px 0 clamp(28px, 3.6vw, 44px); }
.theme-karatb .kb-pagehead .cms-breadcrumbs { padding: 0 0 clamp(16px, 2.4vw, 28px); background: none; border: 0; }
.theme-karatb .kb-pagehead h1 { margin: 0; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.25; font-weight: 700; color: var(--kb-ink); }
.theme-karatb .hz-pagehead { background: var(--kb-stone); color: var(--kb-ink); border-bottom: 1px solid var(--kb-line); }
.theme-karatb .hz-pagehead h1 { color: var(--kb-ink); }
.theme-karatb .hz-pagehead-sub { color: var(--kb-muted); }
.theme-karatb .cms-breadcrumbs { font-size: 15px; }
/* ---------- 7. 手機與平板 ---------- */
@media (max-width: 1080px) {
.theme-karatb .kb-prods-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.theme-karatb .kb-prods.is-carousel .kb-pcard { flex: 0 0 calc((100% - clamp(16px, 2vw, 28px)) / 2); } /* 手機兩欄（老大指定） */
}
@media (max-width: 860px) {
.theme-karatb .kb-hero--split { grid-template-columns: 1fr; }
.theme-karatb .kb-hero--split .kb-hero-media { aspect-ratio: 4 / 3; }
.theme-karatb .kb-hero--band .kb-hero-media { aspect-ratio: auto; height: clamp(200px, 42vw, 320px); }
.theme-karatb .kb-hero--band .kb-hero-copy-in { grid-template-columns: 1fr; }
.theme-karatb .kb-hero--band .kb-hero-title { grid-row: auto; }
.theme-karatb .kb-feat-in, .theme-karatb .kb-video-in, .theme-karatb .kb-find-in { grid-template-columns: 1fr; }
.theme-karatb .kb-feat--flip .kb-feat-img { order: 0; }
.theme-karatb .kb-feat--tiles .kb-feat-list { grid-template-columns: 1fr; gap: 12px; }
.theme-karatb .kb-feat--tiles .kb-feat-list > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 16px; padding: 16px; align-items: start; }
.theme-karatb .kb-feat--tiles .kb-feat-icon { grid-row: 1 / span 2; padding: 0; }
.theme-karatb .kb-feat--tiles .kb-feat-icon img { aspect-ratio: 1; }
.theme-karatb .kb-feat--tiles dt { padding: 0; }
.theme-karatb .kb-feat--tiles dd:not(.kb-feat-icon) { padding: 0; }
.theme-karatb .kb-rows li { grid-template-columns: 1fr; gap: 4px; }
.theme-karatb .kb-pro-cols { grid-template-columns: 1fr; }
.theme-karatb .kb-pro-cols li { padding: 20px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.theme-karatb .kb-pro-cols li:first-child { border-top: 0; padding-top: 0; }
}
@media (max-width: 560px) {
.theme-karatb .kb-cats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.theme-karatb .kb-cats-name { font-size: 17px; }
.theme-karatb .kb-hero-acts .kb-btn { flex: 1 1 100%; }
.theme-karatb .kb-news-list a { grid-template-columns: 1fr; gap: 2px; }
.theme-karatb .kb-inline { flex-direction: column; }
.theme-karatb .kb-inline li + li { border-left: 0; border-top: 1px solid var(--kb-line); }
.theme-karatb .kb-inline a, .theme-karatb .kb-inline span { padding-left: 0; }
.theme-karatb .kb-find-form { flex-direction: column; }
.theme-karatb .kb-find-offices { grid-template-columns: 1fr; }
.theme-karatb .kb-more { margin-left: 0; }
}
/* 麵包屑不要底色（2026-09-21 老大：太搶眼）：留一條細線分隔就好 */
/* 上方原本有三條線（工具列下緣、頁首下緣、麵包屑下緣）很亂（老大 2026-09-21）→ 只留頁首那一條 */
.theme-karatb .hz-crumbbar { background: transparent; border-bottom: 0; padding-block: 6px; }
.theme-karatb .cms-breadcrumbs { font-size: 15px; color: var(--kb-muted); }
.theme-karatb .cms-breadcrumbs a { color: var(--kb-muted); }
.theme-karatb .cms-breadcrumbs a:hover { color: var(--kb-ink); }
/* 左欄目前項：底色在連結上（工版 accent-soft＝粉紅），要蓋在 .csb-link 才有用 */
.theme-karatb .csb-link[aria-current="page"], .theme-karatb .csb-item.is-cur > .csb-row > .csb-link {
position: relative; background: transparent !important; color: var(--kb-red-ink) !important; font-weight: 700; padding-left: 12px; }
.theme-karatb .csb-link[aria-current="page"]::before, .theme-karatb .csb-item.is-cur > .csb-row > .csb-link::before {
content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 18px; margin-top: -9px; background: var(--kb-red); }
.theme-karatb .csb-list > .csb-item { border-bottom: 1px solid var(--kb-line); }
.theme-karatb .csb-list .csb-sub .csb-item { border-bottom: 0; }
/* 主視覺「緩慢放大」（2026-09-21 老大指定，原站的效果；積木勾了才有）
18 秒從 100% 推到 108%，只放大圖片不動版面；設定「減少動態」的使用者不套用。 */
@media (prefers-reduced-motion: no-preference) {
.theme-karatb .kb-hero.is-kenburns .kb-hero-img.is-on { animation: kb-kenburns 18s ease-out both !important; } /* ⚠️ 要 !important：上面「不做進場動畫」那條是 animation:none !important */
@keyframes kb-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
}
/* 下載區／單元的分類標籤（老大 2026-09-21：標籤設計好看一點）
跟商品關鍵字同一套語言：淺灰色塊、無框線、目前項用墨色實心。不要大圓角灰框那種公版感。 */
.theme-karatb .cms-unit-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(20px, 2.4vw, 28px); padding: 0; border: 0; }
.theme-karatb .cms-unit-tabs a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border: 0; border-radius: 4px;
background: rgba(128, 128, 128, .11); color: var(--kb-ink); opacity: .85; font-size: 15px; line-height: 1.3; text-decoration: none;
transition: background-color .15s ease, color .15s ease, opacity .15s ease; }
.theme-karatb .cms-unit-tabs a:hover { background: rgba(128, 128, 128, .18); opacity: 1; }
.theme-karatb .cms-unit-tabs a.on { background: var(--kb-ink); color: #fff; opacity: 1; font-weight: 700; }
/* 下載列：檔名 17px、副資訊 15px 灰；「下載」鈕改細線，滑過才轉主色 */
.theme-karatb .cms-dl-item { padding-block: 18px; }
.theme-karatb .cms-dl-title { font-size: 17px; font-weight: 700; }
.theme-karatb .cms-dl-meta { font-size: 15px; color: var(--kb-muted); }
.theme-karatb .cms-dl-ico { color: var(--kb-muted); }
.theme-karatb .cms-dl-btn { min-height: 40px; padding: 0 18px; border: 1px solid rgba(128, 128, 128, .35); border-radius: 4px;
background: transparent; color: var(--kb-ink); font-size: 15px; font-weight: 500; }
.theme-karatb .cms-dl-btn:hover { border-color: var(--kb-red); color: var(--kb-red); background: transparent; }
/* 單元列表「卡片模式」（最新消息）——2026-09-21 老大指定改卡片式
⚠️ 標題 h1 是 grid 容器的直接子元素，不處理會被當成一格擠在左邊（實測）→ 讓它跨整列。
其餘比照專刊卡片：封面 3:2、標題兩行、摘要兩行、同列等高、只用細線不用陰影。 */
.theme-karatb .cms-list-cards { align-items: stretch; }
.theme-karatb .cms-list-cards > .cms-unit-h1 { grid-column: 1 / -1; margin-bottom: 4px; }
/* ⚠️ 共用的卡片樣式用了 !important（border:0／padding:0／圓角），這裡要同等權重才蓋得過 */
.theme-karatb .cms-list-cards > .blog-post.cms-card { display: flex; flex-direction: column; height: 100%; background: #fff;
border: 1px solid var(--kb-line) !important; border-radius: 0 !important; box-shadow: none; overflow: hidden; transition: border-color .2s ease; }
.theme-karatb .cms-list-cards > .blog-post.cms-card:hover { border-color: var(--kb-ink); }
.theme-karatb .cms-list-cards > .blog-post.cms-card > .cms-entry-cover { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--kb-stone);
margin: 0 !important; border-radius: 0 !important; }
.theme-karatb .cms-list-cards .cms-entry-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.theme-karatb .cms-list-cards > .blog-post.cms-card:hover .cms-entry-cover img { transform: scale(1.04); }
.theme-karatb .cms-list-cards > .blog-post.cms-card > .blog-header { padding: 18px 20px 0 !important; }
/* 卡片裡的分隔線與紅箭頭：整張卡片本來就可以點，不需要再一個「更多」記號 */
.theme-karatb .cms-list-cards .blog-title-link::after,
.theme-karatb .cms-list-cards > .blog-post.cms-card::after { display: none !important; } /* 工版在卡片右下角放一個紅箭頭，整張卡片本來就可以點，不需要 */ /* 工版在連結後面加箭頭，卡片整張可點，不需要 */
.theme-karatb .cms-list-cards .blog-separator, .theme-karatb .cms-list-cards .blog-post-separator { display: none !important; }
.theme-karatb .cms-list-cards .blog-title { margin: 0; font-size: 17px; line-height: 1.6; font-weight: 700; height: calc(2 * 1.6em); overflow: hidden; }
.theme-karatb .cms-list-cards .blog-title a { color: var(--kb-ink); text-decoration: none; }
.theme-karatb .cms-list-cards .blog-date { margin: 8px 0 0; font-size: 14.5px; letter-spacing: .06em; color: var(--kb-muted); font-variant-numeric: tabular-nums; }
.theme-karatb .cms-list-cards .cms-tags { margin: 10px 0 0; padding: 0 20px; }
.theme-karatb .cms-list-cards .cms-tag { border-radius: 4px; border: 0; background: rgba(128, 128, 128, .11); color: var(--kb-ink); opacity: .85; font-size: 13.5px; }
.theme-karatb .cms-list-cards > .blog-post.cms-card > .cms-entry-excerpt { padding: 0 20px 20px; font-size: 15px; line-height: 1.8; color: var(--kb-muted); }
.theme-karatb .cms-list-cards .cms-entry-excerpt p { margin: 10px 0 0 !important; height: calc(2 * 1.8em); overflow: hidden; }
.theme-karatb .cms-list-cards .cms-entry-more, .theme-karatb .cms-list-cards .blog-readmore { display: none; } /* 卡片整張可點，不需要再一個紅箭頭 */
/* 置中標題後面接內容區塊時，兩邊的上下距會疊成一大塊空白（老大 2026-09-21 再次退件）
→ 標題區塊下距收到 8px，後面那一塊的上距歸零。常見問題、下載區、表單都適用。 */
.theme-karatb .block-text:has(+ .block-faq), .theme-karatb .block-text:has(+ .block-download-list),
.theme-karatb .block-text:has(+ .block-form), .theme-karatb .block-text:has(+ .cms-custom) { padding-bottom: 8px !important; }
.theme-karatb .block-text + .block-faq, .theme-karatb .block-text + .block-download-list,
.theme-karatb .block-text + .block-form, .theme-karatb .block-text + .cms-custom .kb-sec, .theme-karatb .block-text + .cms-custom > section { padding-top: 10px; }
/* ===== 聯絡頁（老大 2026-09-21 退件「重新設計」：標題重複、資料是一串紅連結、表單下面一大片空白） =====
1) 聯絡方式改成 contact 客製元件（後台一行一筆），一欄一項、靠細直線分欄，不加底色
2) 表單欄位排成兩欄（姓名/電話、信箱/主旨 同排，內容整排），版面不再是一長條細欄
3) 表單標題在後台用「不顯示標題」關掉，不跟頁面標題重複 */
.theme-karatb .kb-contact { padding: 4px 0 8px; }
.theme-karatb .kb-contact-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding: 0; list-style: none;
border-top: 1px solid var(--kb-line); border-bottom: 1px solid var(--kb-line); }
.theme-karatb .kb-contact-item { display: flex; flex-direction: column; gap: 6px; padding: 24px 26px; border-left: 1px solid var(--kb-line); }
.theme-karatb .kb-contact-item:first-child { border-left: 0; padding-left: 0; }
.theme-karatb .kb-contact-k { font-size: 12.5px; letter-spacing: .14em; color: #8a8a90; }
.theme-karatb .kb-contact-x { font-size: 13.5px; line-height: 1.6; color: #77777d; }
.theme-karatb .kb-contact-note { margin: 14px 0 0; font-size: 13.5px; color: #77777d; }
@media (max-width: 900px) {
.theme-karatb .kb-contact-list { grid-template-columns: 1fr 1fr; }
.theme-karatb .kb-contact-item { padding: 18px 16px; }
.theme-karatb .kb-contact-item:nth-child(odd) { border-left: 0; padding-left: 0; }
.theme-karatb .kb-contact-item:nth-child(n+3) { border-top: 1px solid var(--kb-line); }
}
@media (max-width: 560px) {
.theme-karatb .kb-contact-list { grid-template-columns: 1fr; }
.theme-karatb .kb-contact-item { border-left: 0; padding: 16px 0; }
.theme-karatb .kb-contact-item + .kb-contact-item { border-top: 1px solid var(--kb-line); }
}
/* 表單：兩欄格線 */
.theme-karatb .block-form { padding-top: 36px; }
.theme-karatb .block-form .site-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.theme-karatb .block-form .form-field { margin: 0; min-width: 0; }
/* 表單裡還有 csrf/return_to 兩個隱藏 input，格線會把它們當成一格 → 直接藏起來（蜜罐是絕對定位，不佔格） */
.theme-karatb .block-form .site-form > input[type="hidden"] { display: none; }
.theme-karatb .block-form .form-field:has(textarea) { grid-column: 1 / -1; }
.theme-karatb .block-form .site-form > div:last-of-type { grid-column: 1 / -1; }
.theme-karatb .block-form .site-form > button { grid-column: 1 / -1; justify-self: start; }
.theme-karatb .block-form .form-field label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 600; color: #4a4a50; }
.theme-karatb .block-form .form-field input, .theme-karatb .block-form .form-field textarea, .theme-karatb .block-form .form-field select {
width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit; font-size: 15px; color: inherit;
background: #fff; border: 1px solid var(--kb-line); border-radius: 2px; transition: border-color .15s; }
.theme-karatb .block-form .form-field textarea { min-height: 140px; resize: vertical; }
.theme-karatb .block-form .form-field input:focus, .theme-karatb .block-form .form-field textarea:focus { outline: 0; border-color: var(--kb-red); }
@media (max-width: 700px) { .theme-karatb .block-form .site-form { grid-template-columns: 1fr; } }
/* 表單下面那塊「服務據點」導引：收成一條細列，不要再空一大片 */
.theme-karatb .block-form + .block-text { padding-top: 40px !important; padding-bottom: 28px !important; }
.theme-karatb .block-form + .block-text .wrap { border-top: 1px solid var(--kb-line); padding-top: 28px; }
.theme-karatb .block-form + .block-text h2 { font-size: 20px; margin: 0 0 8px; }
.theme-karatb .block-form + .block-text p { margin: 0; color: #62626a; }
.theme-karatb .block-map { padding-top: 0 !important; }
.theme-karatb .block-map iframe { display: block; filter: grayscale(1); transition: filter .3s; }
.theme-karatb .block-map iframe:hover { filter: none; }
.theme-karatb .kb-contact-v { font-size: 19px; font-weight: 700; letter-spacing: .01em; color: var(--kb-ink); text-decoration: none; }
.theme-karatb a.kb-contact-v:hover { color: var(--kb-red); }
/* 表單本身置中收在 880，配合置中的頁面標題；標題也置中 */
.theme-karatb .block-form .wrap > h2 { text-align: center; margin: 0 0 28px; font-size: 24px; }
.theme-karatb .block-form .site-form { max-width: 880px; margin: 0 auto; }
/* ===== 服務據點頁：直營門市與辦事處（offices 元件；老大 2026-09-21 退件「像通訊錄」） =====
一個據點一格，左右兩欄；資料用 dl 排成「標籤｜內容」，電話 Email 可以直接按。 */
.theme-karatb .kb-offices { padding: 4px 0 12px; }
.theme-karatb .kb-office-list { display: grid; grid-template-columns: 1fr 1fr; margin: 26px 0 0; padding: 0; list-style: none;
border-top: 1px solid var(--kb-line); }
.theme-karatb .kb-office { padding: 26px 40px 26px 0; border-bottom: 1px solid var(--kb-line); }
.theme-karatb .kb-office:nth-child(even) { padding: 26px 0 26px 40px; border-left: 1px solid var(--kb-line); }
.theme-karatb .kb-office-n { margin: 0 0 14px; font-size: 19px; font-weight: 700; letter-spacing: .01em; }
.theme-karatb .kb-office-d { display: grid; grid-template-columns: 66px 1fr; gap: 7px 16px; margin: 0; font-size: 15px; line-height: 1.7; }
.theme-karatb .kb-office-d dt { color: #8a8a90; font-size: 13.5px; padding-top: 2px; }
.theme-karatb .kb-office-d dd { margin: 0; color: #3a3a40; }
.theme-karatb .kb-office-d a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--kb-line); }
.theme-karatb .kb-office-d a:hover { color: var(--kb-red); border-bottom-color: currentColor; }
.theme-karatb .kb-office-map { margin: 14px 0 0; font-size: 14px; }
.theme-karatb .kb-office-map a { color: var(--kb-red); font-weight: 600; text-decoration: none; }
.theme-karatb .kb-office-map a::after { content: " →"; }
@media (max-width: 820px) {
.theme-karatb .kb-office-list { grid-template-columns: 1fr; }
.theme-karatb .kb-office, .theme-karatb .kb-office:nth-child(even) { padding: 22px 0; border-left: 0; }
}
/* ===== 品牌介紹頁（老大 2026-09-21「這頁很醜／重新設計」） =====
原本是「一張圖＋一段置中文字」一路疊下去，改成左右圖文交錯（feature）＋中間一段引言。
b2.png 是去背的品牌圖，用 cover 裁會切到主體 → 品牌頁的圖一律 contain。 */
.theme-karatb .kb-quote { text-align: center; }
.theme-karatb .kb-quote-t { max-width: 26em; margin: 0 auto; font-size: clamp(21px, 2.1vw, 27px); font-weight: 500;
line-height: 1.85; letter-spacing: .01em; color: var(--kb-ink); }
.theme-karatb .kb-quote-c { margin: 20px 0 0; font-size: 14px; letter-spacing: .1em; color: #8a8a90; }
.theme-karatb.kb-page-brand-story .kb-feat-img img { aspect-ratio: 4 / 3; object-fit: cover; background: #fff; }
.theme-karatb.kb-page-brand-story .kb-feat-img img[src$=".png"] { aspect-ratio: auto; height: auto; object-fit: contain; }
.theme-karatb.kb-page-brand-story .kb-lead { font-size: 16px; line-height: 2; color: #4a4a50; }
.theme-karatb.kb-page-brand-story .kb-feat--noimg .kb-feat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 48px; }
.theme-karatb.kb-page-brand-story .kb-feat--noimg .kb-feat-list dt { font-size: 18px; font-weight: 700; margin: 0 0 10px; }
.theme-karatb.kb-page-brand-story .kb-feat--noimg .kb-feat-list dd { margin: 0; font-size: 15.5px; line-height: 1.9; color: #4a4a50; }
@media (max-width: 760px) { .theme-karatb.kb-page-brand-story .kb-feat--noimg .kb-feat-list { grid-template-columns: 1fr; } }
/* 品牌頁：置中標題後面接客製區塊時，元件自己的上距也要收（不然標題跟第一段之間空一大塊） */
/* ⚠️ 客製元件的外框是 .cms-custom，不是 .block block-custom（找很久）。 */
.theme-karatb.kb-page-brand-story .block-text + .cms-custom .kb-sec { padding-top: 10px; }
/* 原站的同層排水橫幅在這頁排成滿版一條 */
.theme-karatb.kb-page-brand-story .block-image { padding: 0 !important; }
.theme-karatb.kb-page-brand-story .block-image .wrap { max-width: none; padding: 0; }
.theme-karatb.kb-page-brand-story .block-image img { display: block; width: 100%; height: auto; border-radius: 0; }
/* 沒有圖的段落：文字收在可讀寬度，不要拉成滿版一行 */
.theme-karatb.kb-page-brand-story .kb-feat--noimg .kb-feat-copy { max-width: 46em; }
/* ===== 內頁頁首帶改成「麵包屑在左、標題置中」（老大 2026-09-21：麵包屑簡單、標題置中就好） =====
本來是暖石灰底＋靠左大標，跟有置中標題的那幾頁長得不一樣，同一個站看起來像兩套設計。 */
.theme-karatb .kb-pagehead { background: #fff; border-bottom: 0; padding: 18px 0 clamp(20px, 2.4vw, 30px); }
.theme-karatb .kb-pagehead .cms-breadcrumbs { padding: 0; }
.theme-karatb .kb-pagehead h1 { margin: clamp(30px, 4vw, 52px) 0 0; text-align: center;
font-size: clamp(27px, 3vw, 36px); line-height: 1.3; font-weight: 700; }
.theme-karatb .kb-pagehead h1::before { content: ''; display: block; width: 40px; height: 3px; margin: 0 auto 20px; background: var(--kb-red); }
.theme-karatb .kb-pagehead + #wsite-content > .block:first-child,
.theme-karatb .kb-pagehead + #wsite-content > .cms-custom:first-child > section { padding-top: clamp(30px, 3.6vw, 48px) !important; }
/* ===== 商品內頁：圖與資訊欄的比例、詢問按鈕（2026-09-21 內頁逐頁打磨） =====
系統的 inline CSS 是 1:1 cover 大圖，KARAT 的商品圖都是去背白底，cover 會切到邊、
右欄又只有標題價格，整頁看起來左重右空。改成 contain、限高，並把兩欄比例調成 5:6。 */
.theme-karatb .pd-top { gap: clamp(28px, 4vw, 56px); }
.theme-karatb .pd-media { flex: 1 1 42%; }
.theme-karatb .pd-info { flex: 1 1 50%; }
.theme-karatb .pd-main-img { aspect-ratio: 1 / 1; max-height: 520px; object-fit: contain; background: #fff;
border: 1px solid var(--kb-line); border-radius: 2px; }
.theme-karatb .pd-thumbs img { border-radius: 2px; border: 1px solid var(--kb-line); }
.theme-karatb .pd-extras { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.theme-karatb .pd-ask { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px;
border: 1px solid var(--kb-red); border-radius: 2px; color: var(--kb-red); font-size: 15px; font-weight: 600;
text-decoration: none; transition: background-color .15s, color .15s; }
.theme-karatb .pd-ask:hover { background: var(--kb-red); color: #fff; }
.theme-karatb .pd-wish { min-height: 46px; border-radius: 2px; border-color: var(--kb-line); }
/* 購物車關著的時候，「已售完」只會讓人以為斷貨；庫存資訊等開店再顯示 */
.theme-karatb .product-soldout, .theme-karatb .pd-tag { display: none !important; }
/* ===== 單元列表頁的標題（.cms-unit-h1）與頁面置中標題統一 =====
最新消息是單元頁，標題由系統補（靠左大字）；其他內頁是置中標題帶 → 同一個站兩種長相。
這裡把它也排成置中＋細線；若頁面自己已經放了置中標題（產品專刊），就把系統這一顆藏起來，不要兩個。 */
.theme-karatb .cms-unit-h1 { text-align: center; margin: clamp(30px, 4vw, 52px) 0 clamp(26px, 3vw, 36px); font-size: clamp(27px, 3vw, 36px); font-weight: 700; }
.theme-karatb .cms-unit-h1::before { content: ''; display: block; width: 40px; height: 3px; margin: 0 auto 20px; background: var(--kb-red); }
.theme-karatb #wsite-content:has(> .block-text .wrap > h2) .cms-unit-h1 { display: none; }
.theme-karatb #wsite-content .container:empty { display: none; }
/* 列表卡片上的單元標籤（#最新消息/企業徵才…）每張都一樣，是雜訊，列表不顯示；內頁保留 */
/* 2026-09-21 老大：原站最新消息有標籤，要顯示 → 這條拿掉，樣式在最後面「列表卡片標籤」 */
/* 「更早的文章」做成細框按鈕，不要是一條紅底線 */
.theme-karatb .blog-page-nav a, .theme-karatb .blog-page-nav-next a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px;
border: 1px solid var(--kb-line); border-radius: 2px; color: var(--kb-ink); font-size: 15px; text-decoration: none; }
.theme-karatb .blog-page-nav a:hover, .theme-karatb .blog-page-nav-next a:hover { border-color: var(--kb-red); color: var(--kb-red); }
/* 文章頁的標題帶：跟內頁頁首帶一起改成白底（老大：不要一堆底色），只留一條細線 */
.theme-karatb .hz-article-head { background: #fff; border-bottom: 1px solid var(--kb-line); padding-block: clamp(30px, 4vw, 48px) clamp(26px, 3.4vw, 40px); }
/* 常見問題：列高收一點、問題字級與字重調整（老大 2026-09-21：這頁重新設計） */
.theme-karatb .block-faq { padding-bottom: clamp(48px, 5vw, 72px); }
.theme-karatb .block-faq .wrap > .faq-item:first-child { border-top: 1px solid var(--kb-ink); }
.theme-karatb .faq-item summary { padding: 20px 64px 20px 0; font-size: 17px; font-weight: 600; }
.theme-karatb .faq-item summary::after { width: 30px; height: 30px; margin-top: -15px; }
.theme-karatb .faq-answer { padding: 0 64px 24px 0; font-size: 15.5px; line-height: 1.95; color: #4a4a50; }
/* 置中標題接列表區塊時也要收距（文章列表、商品列表、相簿） */
.theme-karatb .block-text:has(+ .block-post-list), .theme-karatb .block-text:has(+ .block-product-list),
.theme-karatb .block-text:has(+ .block-album-list), .theme-karatb .block-text:has(+ .block-image-grid) { padding-bottom: 8px !important; }
.theme-karatb .block-text + .block-post-list, .theme-karatb .block-text + .block-product-list,
.theme-karatb .block-text + .block-album-list, .theme-karatb .block-text + .block-image-grid { padding-top: 0 !important; }
/* 「更早的文章／較新的文章」：兩個 class 名稱都要接（previous／next） */
.theme-karatb .blog-page-nav-previous a, .theme-karatb .blog-page-nav-next a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px;
border: 1px solid var(--kb-line); border-radius: 2px; color: var(--kb-ink); font-size: 15px; text-decoration: none; }
.theme-karatb .blog-page-nav-previous a:hover, .theme-karatb .blog-page-nav-next a:hover { border-color: var(--kb-ink); }
.theme-karatb .blog-page-nav-previous, .theme-karatb .blog-page-nav-next { margin-top: clamp(24px, 3vw, 36px); }
/* 服務據點頁：單數個據點時最後一格跨兩欄，底線才不會只畫一半 */
.theme-karatb .kb-office:last-child:nth-child(odd) { grid-column: 1 / -1; }
.theme-karatb .kb-office:last-child:nth-child(odd) .kb-office-d { max-width: 560px; }
/* 經銷據點：說明句子換行放在標題下面（.kb-head 預設是同一行，那是首頁區塊用的） */
.theme-karatb .kb-dealers .kb-head { display: block; }
.theme-karatb .kb-dealers .kb-head .kb-lead { margin: 10px 0 0; }
/* 商品卡：卡片等高時，價格一律對齊卡片底部（標題一行或兩行都不會讓價格跳來跳去） */
.theme-karatb .product-card { display: flex; flex-direction: column; }
.theme-karatb .product-card .product-thumb { flex: 0 0 auto; }
.theme-karatb .product-card .product-price { margin-top: auto; padding-top: 10px; }
/* 品牌頁的圖不要比整段文字還高（圖一高，段落下方就空一大塊） */
.theme-karatb.kb-page-brand-story .kb-feat-img img { max-height: 420px; width: 100%; object-fit: contain; }
/* 下載區：一列一檔案，收緊高度；檔名與檔案資訊放同一行（原本一列 88px，整頁很空） */
.theme-karatb .cms-dl-item { align-items: center; gap: 12px; padding: 12px 2px; border-color: var(--kb-line) !important; }
.theme-karatb .cms-dl-item:first-of-type { border-top-color: var(--kb-line) !important; }
.theme-karatb .cms-dl-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.theme-karatb .cms-dl-title { margin: 0; font-size: 16px; }
.theme-karatb .cms-dl-desc, .theme-karatb .cms-dl-meta { margin: 0; font-size: 13.5px; color: #8a8a90; opacity: 1; }
/* 經銷據點：地址、電話原本整排底線，一頁 266 筆看起來全是線。改成滑過才出現底線。 */
.theme-karatb .kb-dealers-addr a, .theme-karatb .kb-dealers-tel a { color: inherit; text-decoration: none; }
.theme-karatb .kb-dealers-addr a:hover, .theme-karatb .kb-dealers-tel a:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--kb-red-ink); }
/* 縣市篩選列：改細框不填底色（老大：不要用有底色，用框線就好） */
.theme-karatb .kb-dealers-bar { background: none; border: 1px solid var(--kb-line); border-radius: 2px; }
/* 頁首搜尋面板：老大 2026-09-21「滑鼠上去的效果很差，不需要紅色框線，底線加深就好」。
紅框來自共用的 .theme-horizon :focus-visible{outline:2px solid 重點色}——這個輸入框本來就有
2px 底線當焦點指示，再套一圈紅框只是吵。這裡只關掉這個輸入框的外框，其他元素的鍵盤焦點框不動。 */
.theme-karatb .cms-search-panel__in input { border-radius: 0; height: auto; padding: 10px 2px; background: transparent; border-bottom: 2px solid var(--kb-line); transition: border-color .15s ease; } /* 共用搜尋面板 2026-10-20 改成膠囊，karat-b 要維持原本的底線款 */
.theme-karatb .cms-search-panel__in input:hover { border-bottom-color: #b5b5ba; }
.theme-karatb .cms-search-panel__in input:focus,
.theme-karatb .cms-search-panel__in input:focus-visible { outline: none; border-bottom-color: var(--kb-ink); }
/* 這一區的標題改成英文「Products」：中文黑體直接排英文會偏鬆，補字距與字重 */
.theme-karatb .kb-cats .kb-h2 { letter-spacing: .02em; }
/* 設定「減少動態」的使用者：只留顏色變化，不做位移與縮放 */
@media (prefers-reduced-motion: reduce) {
.theme-karatb .kb-cats-grid a:hover .kb-cats-img,
.theme-karatb .kb-cats-grid a:hover .kb-cats-img img,
.theme-karatb .kb-cats-grid a:hover .kb-cats-name { transform: none; box-shadow: none; }
}
/* 商品頁的「檔案下載」（資料來自原站商品頁的 PDF／CAD 連結，老大 2026-09-21 指示保留）：
本來只是兩行純文字連結，看不出是可下載的檔案 → 補一個檔案圖示與右側的副檔名標示。
副檔名用 href 結尾判斷，純 CSS，不動資料。 */
.theme-karatb .kb-downloads li a { gap: 12px; padding-right: 2px; }
.theme-karatb .kb-downloads li a::before { content: ''; flex: 0 0 auto; width: 17px; height: 20px; opacity: .45;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
.theme-karatb .kb-downloads li a::after { margin-left: auto; font-size: 13px; font-weight: 500; letter-spacing: .08em; color: #8a8a90; }
.theme-karatb .kb-downloads li a[href$=".pdf"]::after { content: 'PDF'; }
.theme-karatb .kb-downloads li a[href$=".jpg"]::after,
.theme-karatb .kb-downloads li a[href$=".jpeg"]::after { content: 'JPG'; }
.theme-karatb .kb-downloads li a[href$=".png"]::after { content: 'PNG'; }
.theme-karatb .kb-downloads li a[href$=".dwg"]::after { content: 'DWG'; }
.theme-karatb .kb-downloads li a[href$=".zip"]::after { content: 'ZIP'; }
.theme-karatb .kb-downloads li a:hover::before { opacity: 1; }
.theme-karatb .kb-downloads li a:hover::after { color: var(--kb-red-ink); }
/* 整體衛浴 × 同層排水：SD／UB／UT 的字標圖本身就寫著「同層排水／整體衛浴／公共衛廁」，
圖下再放一次同樣的標題是重複（老大 2026-09-21：先關閉圖下的標題）。
⚠️ 標題裡原本是連到工程專區的連結，隱藏後同一區塊底部的「前往工程專區」按鈕仍可到達同一頁。
要恢復顯示：把下面這條刪掉即可。 */
.theme-karatb .kb-feat--tiles dt { display: none; }
.theme-karatb .kb-feat--tiles dd:not(.kb-feat-icon) { padding-top: 16px; }
/* 區塊裡的卡片逐張滑入（JS 會給每張一個 --kb-d 延遲；沒有 JS 或設定「減少動態」時完全不套用） */
.kb-reveal .theme-karatb .kb-stagger { opacity: 0; transform: translateY(30px); }
.theme-karatb .kb-stagger { transition: opacity .6s ease var(--kb-d, 0s), transform .6s var(--ease-out, cubic-bezier(.2, .7, .3, 1)) var(--kb-d, 0s); }
.theme-karatb .kb-stagger.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.kb-reveal .theme-karatb .kb-stagger { opacity: 1; transform: none; }
}
/* ===== 最新消息改卡片輪播（老大 2026-09-21：「最新消息改成有圖片的方式」「可以多則輪播」） ===== */
.theme-karatb .kb-news-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px);
margin: 0; padding: 0; list-style: none; }
.theme-karatb .kb-news.is-carousel .kb-news-row { display: flex; grid-template-columns: none; overflow-x: auto;
scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.theme-karatb .kb-news.is-carousel .kb-news-row::-webkit-scrollbar { display: none; }
.theme-karatb .kb-news.is-carousel .kb-ncard { flex: 0 0 calc((100% - clamp(16px, 1.8vw, 24px) * 3) / 4); scroll-snap-align: start; }
.theme-karatb .kb-ncard a { display: block; color: var(--kb-ink); text-decoration: none; }
.theme-karatb .kb-ncard-img { display: block; aspect-ratio: 16 / 10; background: var(--kb-stone); border: 1px solid var(--kb-line);
overflow: hidden; transition: border-color .25s ease, box-shadow .45s ease, transform .45s var(--ease-out, ease); }
.theme-karatb .kb-ncard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out, ease); }
.theme-karatb .kb-ncard a:hover .kb-ncard-img { border-color: transparent; transform: translateY(-6px); box-shadow: 0 20px 32px -26px rgba(26, 24, 22, .5); }
.theme-karatb .kb-ncard a:hover .kb-ncard-img img { transform: scale(1.06); }
.theme-karatb .kb-ncard-date { display: block; margin: 14px 0 6px; font-size: 14.5px; color: var(--kb-muted); font-variant-numeric: tabular-nums; }
.theme-karatb .kb-ncard-title { display: block; font-size: 16.5px; font-weight: 700; line-height: 1.6; height: calc(2 * 1.6em); overflow: hidden; }
.theme-karatb .kb-ncard a:hover .kb-ncard-title { color: var(--kb-red-ink); }
@media (max-width: 1080px) { .theme-karatb .kb-news.is-carousel .kb-ncard { flex-basis: calc((100% - 20px * 2) / 3); } .theme-karatb .kb-news-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .theme-karatb .kb-news.is-carousel .kb-ncard { flex-basis: calc((100% - 16px) / 2); } .theme-karatb .kb-news-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ===== 內頁主視覺（pagehero）：照原站品牌介紹頁的作法，滿版橫幅＋左下標題 ===== */
.theme-karatb .kb-phero { position: relative; }
.theme-karatb .kb-phero-img { display: block; width: 100%; height: clamp(220px, 26vw, 380px); object-fit: cover;
object-position: center 42%; } /* 原圖主體偏中下，取景往上一點才不會只看到牆 */
.theme-karatb .kb-phero-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 0 clamp(24px, 3.4vw, 46px);
background: linear-gradient(to top, rgba(26, 24, 22, .55), rgba(26, 24, 22, 0)); }
.theme-karatb .kb-phero-title { margin: 0; color: #fff; font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; line-height: 1.25;
text-shadow: 0 2px 18px rgba(0, 0, 0, .25); }
.theme-karatb .kb-phero-lead { margin: 10px 0 0; color: rgba(255, 255, 255, .92); font-size: 16px; }
.theme-karatb .kb-phero--center .kb-phero-copy { text-align: center; }
/* 有主視覺的內頁：麵包屑壓在圖上方那一條白列，下面不要再留一大塊空白 */
.theme-karatb .kb-phero + .block, .theme-karatb .cms-custom:first-child .kb-phero { margin-top: 0; }
/* ===== 工程專區圖片輪播（engzone）：原站是一次 3 張、5 秒自動換、無箭頭 ===== */
.theme-karatb .kb-eng-row { display: flex; gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none;
overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.theme-karatb .kb-eng-row::-webkit-scrollbar { display: none; }
.theme-karatb .kb-eng-item { flex: 0 0 calc((100% - clamp(16px, 2vw, 28px) * 2) / 3); scroll-snap-align: start; }
.theme-karatb .kb-eng-item a, .theme-karatb .kb-eng-item > div { display: block; background: #fff; border: 1px solid var(--kb-line);
overflow: hidden; transition: border-color .25s ease, transform .45s var(--ease-out, ease), box-shadow .45s ease; }
.theme-karatb .kb-eng-item img { display: block; width: 100%; height: auto; }
.theme-karatb .kb-eng-item a:hover { border-color: transparent; transform: translateY(-6px); box-shadow: 0 20px 32px -26px rgba(26, 24, 22, .5); }
.theme-karatb .kb-eng .kb-prods-nav { display: none; } /* 原站沒有箭頭 */
@media (max-width: 760px) { .theme-karatb .kb-eng-item { flex-basis: calc((100% - 16px) / 2); } }
/* ===== 最新消息列表頁的卡片（老大 2026-09-21：「看起來雜亂，間距字級細節沒處理好」） =====
查過實際算出來的值：標題 19.55px、日期 15.3px、摘要沒有左右內距——前面那組規則被共用樣式蓋掉了，
這裡用更高的權重＋!important 一次定死。節奏：封面 → 日期（小、灰）→ 標題（兩行）→ 摘要（兩行）。 */
.theme-karatb .cms-list-cards { gap: clamp(18px, 2vw, 26px) !important; }
.theme-karatb .cms-list-cards > .blog-post.cms-card { border-color: var(--kb-line) !important; }
.theme-karatb .cms-list-cards > .blog-post.cms-card > .blog-header { display: flex !important; flex-direction: column; padding: 16px 18px 0 !important; }
.theme-karatb .cms-list-cards > .blog-post.cms-card > .blog-header > .blog-date { order: 1; margin: 0 0 6px !important; padding: 0 !important;
font-size: 13px !important; letter-spacing: .08em; line-height: 1.4; color: var(--kb-muted) !important; }
.theme-karatb .cms-list-cards > .blog-post.cms-card > .blog-header > .blog-title { order: 2; margin: 0 !important; padding: 0 !important;
font-size: 17px !important; line-height: 1.55 !important; font-weight: 700; height: calc(2 * 1.55em) !important; overflow: hidden; }
.theme-karatb .cms-list-cards > .blog-post.cms-card > .blog-header > .blog-title a { color: var(--kb-ink); text-decoration: none; }
.theme-karatb .cms-list-cards > .blog-post.cms-card > .cms-entry-excerpt { padding: 0 18px 18px !important; margin: 0 !important;
font-size: 14.5px !important; line-height: 1.75 !important; color: var(--kb-muted) !important; }
.theme-karatb .cms-list-cards > .blog-post.cms-card > .cms-entry-excerpt p { margin: 8px 0 0 !important; height: calc(2 * 1.75em) !important; overflow: hidden; }
.theme-karatb .cms-list-cards > .blog-post.cms-card:hover .blog-title a { color: var(--kb-red-ink); }
/* 這頁的置中標題到卡片之間也收一點 */
.theme-karatb .cms-list-cards > .cms-unit-h1 { margin-bottom: 0 !important; }
/* 列表卡片的標籤：小、灰、不加框，排在標題下面（DOM 上標籤跟標題同在 .blog-header 裡，排不到摘要後面） */
.theme-karatb .cms-list-cards > .blog-post.cms-card > .blog-header > .cms-tags,
.theme-karatb .cms-list-cards > .blog-post.cms-card > .blog-header > .cms-entry-tags { order: 3; display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 8px 0 0 !important; padding: 0 !important; }
.theme-karatb .cms-list-cards .cms-tag { display: inline-block; padding: 2px 8px !important; border: 0 !important; border-radius: 3px;
background: rgba(128, 128, 128, .1); color: var(--kb-muted) !important; font-size: 12.5px !important; line-height: 1.6; opacity: 1; text-decoration: none; }
.theme-karatb .cms-list-cards .cms-tag:hover { background: rgba(128, 128, 128, .18); color: var(--kb-ink) !important; }
/* ===== 產品專刊改「圖文列表式」（老大 2026-09-21：專刊跟最新消息不要兩個都卡片） =====
只限專刊頁（body 有 kb-page-media-detail）；最新消息維持卡片。一列一篇：左圖 3:2、右邊日期／標題／摘要，細線分隔。 */
.theme-karatb.kb-page-media-detail .post-list { grid-template-columns: 1fr !important; gap: 0 !important; grid-auto-rows: auto; border-top: 1px solid var(--kb-ink); }
.theme-karatb.kb-page-media-detail .post-card { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); grid-template-rows: auto auto 1fr;
gap: 0 clamp(24px, 3vw, 44px); align-items: start; height: auto; padding: clamp(20px, 2.4vw, 28px) 0; background: none;
border: 0; border-bottom: 1px solid var(--kb-line); }
.theme-karatb.kb-page-media-detail .post-card:hover { border-color: var(--kb-line); }
.theme-karatb.kb-page-media-detail .post-card > a:first-child { grid-column: 1; grid-row: 1 / span 3; order: 0; aspect-ratio: 3 / 2; border: 1px solid var(--kb-line); }
.theme-karatb.kb-page-media-detail .post-card .post-date { grid-column: 2; grid-row: 1; order: 0; padding: 4px 0 0; font-size: 13px; letter-spacing: .08em; }
.theme-karatb.kb-page-media-detail .post-card h2 { grid-column: 2; grid-row: 2; order: 0; padding: 8px 0 0; font-size: 20px; line-height: 1.5; height: auto; }
.theme-karatb.kb-page-media-detail .post-card > p:not(.post-date) { grid-column: 2; grid-row: 3; order: 0; margin: 10px 0 0; padding: 0;
font-size: 15px; line-height: 1.85; height: calc(3 * 1.85em); overflow: hidden; }
.theme-karatb.kb-page-media-detail .post-card:not(:has(img)) { border-top: 0; }
.theme-karatb.kb-page-media-detail .post-card:not(:has(img)) .post-date { padding-top: 4px; }
@media (max-width: 700px) {
.theme-karatb.kb-page-media-detail .post-card { grid-template-columns: 1fr; grid-template-rows: auto; }
.theme-karatb.kb-page-media-detail .post-card > a:first-child { grid-row: auto; margin-bottom: 12px; }
.theme-karatb.kb-page-media-detail .post-card .post-date,
.theme-karatb.kb-page-media-detail .post-card h2,
.theme-karatb.kb-page-media-detail .post-card > p:not(.post-date) { grid-column: 1; grid-row: auto; }
}
/* 常見問題展開（老大 2026-09-21：「+ 展開效果給動態」）：內容由 JS 做高度滑開（theme.js），
這裡只補「+」轉成「×」的過渡與答案的淡入；設定「減少動態」時 JS 不接手、維持原生瞬間展開。 */
.theme-karatb .faq-item summary::after { transition: transform .35s var(--ease-out, cubic-bezier(.2, .7, .3, 1)), background-color .2s, border-color .2s, color .2s; }
.theme-karatb .faq-item .faq-answer { will-change: height; }
/* ===== 商品分類側欄（老大 2026-09-21：參考原站的樣式、不顯示數量、左欄寬一點） =====
原站：明體標題＋紅色短底線、項目沒有框線與底色、右側是細線的「＋／－」、子項縮排。 */
.theme-karatb .csb-layout { grid-template-columns: clamp(200px, 21vw, 300px) minmax(0, 1fr); gap: clamp(28px, 3.4vw, 56px); } /* 老大 2026-09-22：只有螢幕窄的時候要縮左欄，寬螢幕維持原本的 300px（21vw：1440→300px、1280→269px、1100→231px） */ /* 老大 2026-09-22：左欄太寬把商品壓縮了 → 依視窗寬度縮放，窄螢幕 200px、寬螢幕最多 240px */
.theme-karatb .csb-head { display: inline-block; margin: 0 0 22px; padding-bottom: 12px; border-bottom: 2px solid var(--kb-red);
font-family: "Noto Serif TC", "Songti TC", PMingLiU, serif; font-size: 24px; font-weight: 500; letter-spacing: .06em; color: var(--kb-ink); }
.theme-karatb .csb-n { display: none !important; } /* 不顯示數量 */
.theme-karatb .csb-list > .csb-item { border-bottom: 0 !important; } /* 拿掉項目之間的線 */
.theme-karatb .csb-row { padding: 0; }
.theme-karatb .csb-link { padding: 9px 0 !important; font-size: 18px; color: #555559; background: none !important; }
.theme-karatb .csb-link:hover { color: var(--kb-ink); }
.theme-karatb .csb-link[aria-current="page"], .theme-karatb .csb-item.is-cur > .csb-row > .csb-link { color: var(--kb-ink); font-weight: 500; }
.theme-karatb .csb-link[aria-current="page"]::before, .theme-karatb .csb-item.is-cur > .csb-row > .csb-link::before { display: none; }
.theme-karatb .csb-sub .csb-link, .theme-karatb .csb-d1 .csb-link { padding: 8px 0 8px 24px !important; font-size: 17px; color: #6a6a70; }
.theme-karatb .csb-d1 .csb-link[aria-current="page"] { color: var(--kb-red-ink); }
/* ＋／－：用兩條細線畫，展開時橫線留著、直線收掉 */
.theme-karatb .csb-tg { position: relative; width: 32px; height: 32px; opacity: 1; background: none !important; }
.theme-karatb .csb-tg svg { display: none; }
.theme-karatb .csb-tg::before, .theme-karatb .csb-tg::after { content: ''; position: absolute; left: 50%; top: 50%; background: #555559;
transition: transform .3s var(--ease-out, ease), opacity .2s ease; }
.theme-karatb .csb-tg::before { width: 16px; height: 1.5px; margin: -1px 0 0 -8px; }
.theme-karatb .csb-tg::after { width: 1.5px; height: 16px; margin: -8px 0 0 -1px; }
.theme-karatb .csb-item.is-open > .csb-row > .csb-tg::after { transform: scaleY(0); opacity: 0; }
.theme-karatb .csb-tg:hover::before, .theme-karatb .csb-tg:hover::after { background: var(--kb-red); }
/* 關鍵字區塊的標題同一套 */
.theme-karatb .csb-taglist-head, .theme-karatb .csb-body > .csb-head ~ .csb-head { margin-top: 28px; }
.theme-karatb .csb-body > hr, .theme-karatb .csb-sep { border-color: var(--kb-line); }
/* 服務據點頁：地區經銷商（總經銷）獨立一張表，跟原站一樣；下面才是可篩縣市的經銷據點 */
.theme-karatb .kb-dealers-regional { margin: 0 0 clamp(36px, 4vw, 56px); }
.theme-karatb .kb-dealers-regional-h { margin: 0 0 14px; font-size: 20px; font-weight: 700; }
.theme-karatb .kb-dealers-table { width: 100%; border-collapse: collapse; font-size: 15.5px; border-top: 1px solid var(--kb-ink); }
.theme-karatb .kb-dealers-table th, .theme-karatb .kb-dealers-table td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--kb-line); text-align: left; vertical-align: top; }
.theme-karatb .kb-dealers-table th { font-size: 13px; font-weight: 500; letter-spacing: .08em; color: var(--kb-muted); }
.theme-karatb .kb-dealers-table td:first-child { font-weight: 700; white-space: nowrap; width: 72px; }
.theme-karatb .kb-dealers-table a { color: inherit; text-decoration: none; }
.theme-karatb .kb-dealers-table a:hover { color: var(--kb-red-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) {
.theme-karatb .kb-dealers-table thead { display: none; }
.theme-karatb .kb-dealers-table tr { display: grid; grid-template-columns: 64px 1fr; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--kb-line); }
.theme-karatb .kb-dealers-table td { display: block; padding: 0; border: 0; }
.theme-karatb .kb-dealers-table td:first-child { grid-row: 1 / span 3; }
}
/* 商品卡（老大 2026-09-21）：分類那行（馬桶、分體馬桶）照原站用紅字；價格縮小——這個站不是販售，價格只是參考 */
.theme-karatb .product-card .product-cats { color: var(--kb-red-ink) !important; font-size: 14px; letter-spacing: .02em; }
.theme-karatb .product-card .product-price { font-size: 15px !important; font-weight: 500 !important; color: var(--kb-muted) !important; letter-spacing: .01em; }
.theme-karatb .product-card .product-price .price-now { font-size: inherit; font-weight: inherit; }
.theme-karatb .kb-pcard-price { font-size: 15px !important; font-weight: 500 !important; color: var(--kb-muted) !important; }
.theme-karatb .pd-price { font-size: 18px !important; font-weight: 600 !important; color: var(--kb-ink) !important; }
/* 聯絡方式卡片：有圖（LINE QR）時，圖靠右、文字在左 */
.theme-karatb .kb-contact-item.has-img { display: grid; grid-template-columns: minmax(0, 1fr) 96px; grid-template-rows: auto auto auto; gap: 6px 14px; align-items: start; }
.theme-karatb .kb-contact-item.has-img > .kb-contact-k, .theme-karatb .kb-contact-item.has-img > .kb-contact-v, .theme-karatb .kb-contact-item.has-img > .kb-contact-x { grid-column: 1; }
.theme-karatb .kb-contact-qr { grid-column: 2; grid-row: 1 / span 3; width: 96px; height: auto; border: 1px solid var(--kb-line); border-radius: 2px; }
/* 商品名稱換行（老大 2026-09-21 問「為什麼標題斷行」）：中文沒有斷詞，寬度到了就折，
所以會出現「系｜列」這種斷在詞中間的情況。這裡三招一起用：字級收到 16px 讓一行裝得下更多字、
text-wrap: balance 讓兩行長度平均（不會剩一兩個字掛在第二行）、優先在空格與標點處斷。 */
.theme-karatb .product-card h3 { font-size: 16px !important; line-height: 1.55; text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; letter-spacing: 0; }
.theme-karatb .kb-pcard-name { text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
/* ===== 商品內頁（老大 2026-09-21 一批） =====
1) 「不要內縮」：系統把商品頁收在 1040px，兩側空一大塊 → 放開，跟其他頁同寬
2) 「產品圖不要有線框」：主圖與縮圖的 1px 框拿掉
3) 「沒有會員制度，不需要加入收藏」「詢問按鈕先取消」：兩顆都藏起來（資料與表單都還在，要開回來刪這兩行）
4) 「資料沒有抓完」：其實有抓到——規格圖（原站 DM 大圖）被收在第二個分頁，訪客看不到。
原站是直接接在特色下面，所以這裡把分頁全部攤開、分頁列藏起來，規格圖用小標接在後面。 */
.theme-karatb .pd-wrap { max-width: none; }
.theme-karatb .pd-main-img, .theme-karatb .pd-thumbs img { border: 0 !important; }
.theme-karatb .pd-wish-form { display: none !important; } /* hong-c：「詢問這件商品」按鈕與詢問表單要顯示（老大 2026-10-19：商品頁要兩個按鈕），只藏收藏 */
.theme-karatb .pd-tabs-nav { display: none !important; }
.theme-karatb .pd-tabs .pd-tab-panel { display: block !important; margin-top: 8px; min-height: 0; }
.theme-karatb .pd-tabs .pd-tab-panel[hidden] { display: block !important; }
.theme-karatb .pd-tabs .pd-tab-panel + .pd-tab-panel { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--kb-line); }
.theme-karatb .pd-tabs .pd-tab-panel + .pd-tab-panel::before { content: '規格圖'; display: block; margin: 0 0 14px; font-size: 17px; font-weight: 700; color: var(--kb-ink); }
.theme-karatb .pd-tabs .pd-tab-panel img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.theme-karatb .pd-tabs .pd-tab-panel p { margin: 0 0 12px; }
.theme-karatb .pd-tabs { margin-top: 24px; }
/* 商品附加檔案（系統功能，migrations/072）：跟原本商品介紹裡那串 .kb-downloads 同一套長相 */
.theme-karatb .pd-files { margin-top: 18px; }
.theme-karatb .pd-files h3 { font-size: 15px; font-weight: 700; opacity: 1; color: var(--kb-ink); margin-bottom: 8px; }
.theme-karatb .pd-files-list { border-top-color: var(--kb-line); }
.theme-karatb .pd-files-list a { min-height: 48px; padding: 8px 2px; border-bottom-color: var(--kb-line); font-weight: 500; color: var(--kb-ink); }
.theme-karatb .pd-files-list a::before { content: ''; flex: 0 0 auto; width: 17px; height: 20px; opacity: .45; background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
.theme-karatb .pd-files-list .pd-file-t { flex: 1 1 auto; }
.theme-karatb .pd-files-list .pd-file-m { color: #8a8a90; opacity: 1; font-weight: 500; }
.theme-karatb .pd-files-list a:hover { color: var(--kb-red-ink); }
.theme-karatb .pd-files-list a:hover::before { opacity: 1; }
/* 品牌介紹頁「服務理念／在地保固」那塊（feature 元件、沒圖也沒標題、只有兩個項目）：
老大 2026-09-21 回報「壞了」——兩欄被塞在 46em 的文字寬度裡、還帶著項目的上下框線，看起來像跑版。
這種「只有項目」的區塊改成滿寬兩欄、不畫線。 */
.theme-karatb.kb-page-brand-story .kb-feat--noimg .kb-feat-copy:has(.kb-feat-list):not(:has(.kb-h2)) { max-width: none; }
.theme-karatb.kb-page-brand-story .kb-feat--noimg .kb-feat-list { margin: 0; gap: 40px clamp(48px, 6vw, 96px); }
.theme-karatb.kb-page-brand-story .kb-feat--noimg .kb-feat-list > div { padding: 0 0 0 22px; border: 0 !important; border-left: 2px solid var(--kb-red) !important; }
.theme-karatb.kb-page-brand-story .kb-feat--noimg .kb-feat-list dt { font-size: 21px; margin-bottom: 12px; }
.theme-karatb.kb-page-brand-story .kb-feat--noimg .kb-feat-list dd { font-size: 16px; line-height: 1.9; color: #4a4a50; }
/* ===== 內頁標題（老大 2026-09-21）：紅線改放文字下面；麵包屑到標題的空白收掉 ===== */
.theme-karatb .block-text .wrap > h2::before, .theme-karatb .kb-pagehead h1::before, .theme-karatb .cms-unit-h1::before { display: none !important; }
.theme-karatb .block-text .wrap > h2::after, .theme-karatb .kb-pagehead h1::after, .theme-karatb .cms-unit-h1::after {
content: ''; display: block; width: 40px; height: 3px; margin: 16px 0 0; background: var(--kb-red); }
.theme-karatb .block-text[style*="center"] .wrap > h2::after, .theme-karatb .kb-pagehead h1::after, .theme-karatb .cms-unit-h1::after { margin-inline: auto; }
/* 麵包屑那列到標題之間本來疊了三層距（列、區塊上距、標題上距）→ 只留一層 */
.theme-karatb .hz-crumbbar + #wsite-content > .block:first-child,
.theme-karatb .hz-crumbbar + #wsite-content > .block-text:first-child { padding-top: clamp(22px, 2.6vw, 34px) !important; }
.theme-karatb .cms-unit-h1 { margin-top: 0 !important; margin-bottom: clamp(22px, 2.6vw, 32px) !important; }
.theme-karatb .kb-pagehead h1 { margin-top: clamp(16px, 2vw, 26px); }
.theme-karatb .block-search .wrap > .cms-unit-h1 { margin-top: 0 !important; }
/* ===== 產品專刊（老大 2026-09-21）：標題下黑線去掉、圖大一點、圓角 ===== */
.theme-karatb.kb-page-media-detail .post-list { border-top: 0 !important; }
.theme-karatb.kb-page-media-detail .post-card { grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); }
.theme-karatb.kb-page-media-detail .post-card > a:first-child { border: 0; border-radius: 10px; }
.theme-karatb.kb-page-media-detail .post-card > a:first-child img { border-radius: 10px; }
.theme-karatb.kb-page-media-detail .post-card:first-child { padding-top: 4px; }
/* 「繼續閱讀」（積木新選項 show_more） */
.theme-karatb .post-card .pl-more { grid-column: 2; margin: 14px 0 0; font-size: 14.5px; }
.theme-karatb .post-card .pl-more a { display: inline-flex; align-items: center; gap: 6px; color: var(--kb-red-ink); font-weight: 600; text-decoration: none; }
.theme-karatb .post-card .pl-more a::after { content: ''; width: 28px; height: 1px; background: currentColor; transform: scaleX(.64); transform-origin: left center; transition: transform .25s var(--ease-out, ease); } /* 用 transform 伸長，不動 width（版面不重排） */
.theme-karatb .post-card .pl-more a:hover::after { transform: scaleX(1); }
.theme-karatb.kb-page-media-detail .post-card { grid-template-rows: auto auto auto auto; }
.theme-karatb.kb-page-media-detail .post-card > a:first-child { grid-row: 1 / span 4; }
/* ===== 商品分類側欄二修（老大 2026-09-21：＋－太粗糙、次選單給淺灰底、前面加小方塊） ===== */
/* ＋／－：24px 的細圓框、1px 線條，展開時圓框轉墨色、直線轉走收掉 */
.theme-karatb .csb-tg { width: 24px; height: 24px; margin: 4px 2px 0 0; border: 1px solid #c9c9ce; border-radius: 50%;
transition: border-color .25s ease, background-color .25s ease; }
.theme-karatb .csb-tg::before, .theme-karatb .csb-tg::after { background: #6a6a70; }
.theme-karatb .csb-tg::before { width: 10px; height: 1px; margin: 0 0 0 -5px; }
.theme-karatb .csb-tg::after { width: 1px; height: 10px; margin: -5px 0 0 0; transition: transform .3s var(--ease-out, ease), opacity .2s ease; }
.theme-karatb .csb-item.is-open > .csb-row > .csb-tg { border-color: var(--kb-ink); background: var(--kb-ink); }
.theme-karatb .csb-item.is-open > .csb-row > .csb-tg::before { background: #fff; }
.theme-karatb .csb-item.is-open > .csb-row > .csb-tg::after { transform: rotate(90deg) scaleX(0); opacity: 0; }
.theme-karatb .csb-tg:hover { border-color: var(--kb-ink); }
.theme-karatb .csb-tg:hover::before, .theme-karatb .csb-tg:hover::after { background: var(--kb-ink); }
.theme-karatb .csb-item.is-open > .csb-row > .csb-tg:hover::before { background: #fff; }
/* 次選單：一塊很淺的灰底，每項前面一個 4px 小方塊 */
.theme-karatb .csb-d1 { margin: 6px 0 10px; padding: 8px 12px 8px 14px; background: #F6F6F7; border-radius: 4px; }
.theme-karatb .csb-d1 .csb-link { position: relative; padding: 7px 0 7px 16px !important; font-size: 16px; color: #5e5e64; }
.theme-karatb .csb-d1 .csb-link::before { content: ''; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: #b9b9be;
display: block; transition: background-color .2s ease; }
.theme-karatb .csb-d1 .csb-link:hover::before, .theme-karatb .csb-d1 .csb-link[aria-current="page"]::before { background: var(--kb-red); }
.theme-karatb .csb-d1 .csb-link[aria-current="page"] { color: var(--kb-red-ink); font-weight: 600; }
/* 展開狀態的圓框要填墨色——前面那條 .csb-tg{background:none!important} 會蓋掉，這裡權重補回來 */
.theme-karatb .csb-item.is-open > .csb-row > .csb-tg { background: var(--kb-ink) !important; border-color: var(--kb-ink) !important; }
/* 「繼續閱讀」要落在第 4 列，不然 grid 自動排會跟摘要疊在同一格 */
.theme-karatb.kb-page-media-detail .post-card .pl-more { grid-column: 2; grid-row: 4; align-self: end; }
/* 上面「> p:not(.post-date)」那條把摘要限成 3 行、也會抓到 .pl-more（它也是 p）→ 這裡用更高權重把它拉出來 */
.theme-karatb.kb-page-media-detail .post-card > p.pl-more { grid-column: 2; grid-row: 4; align-self: end; height: auto; overflow: visible; margin: 14px 0 0; padding: 0; }
/* 列表頁的狹長 hero（pagehero size=short）：比品牌介紹矮、不放標題，讓最新消息／產品專刊不要一片素白 */
.theme-karatb .kb-phero--short .kb-phero-img { height: clamp(110px, 12.5vw, 180px); object-position: center 50%; } /* 老大 2026-09-21：再更矮一點 */
.theme-karatb .kb-phero--short .kb-phero-copy { display: none; }
/* hero 後面接的第一個區塊（置中標題或單元列表）：上距只留一層，跟麵包屑那條規則一致 */
.theme-karatb .cms-custom:has(> .kb-phero) + .block { padding-top: clamp(22px, 2.6vw, 34px) !important; }
/* 專刊列表式的 hover（老大 2026-09-21：整列浮起來加陰影很突兀）：工版對 .post-card 的上浮＋陰影拿掉，
只留圖片微放大、標題轉紅、「繼續閱讀」的線伸長 */
.theme-karatb.kb-page-media-detail .post-card:hover { box-shadow: none !important; transform: none !important; }
.theme-karatb.kb-page-media-detail .post-card > a:first-child img { transition: transform .6s var(--ease-out, ease); }
.theme-karatb.kb-page-media-detail .post-card:hover > a:first-child img { transform: scale(1.03); }
/* 列表頁狹長 hero：換成寬幅構圖的照片後，取景回到中間 */
.theme-karatb .kb-phero--short .kb-phero-img { object-position: center 45%; }
/* ===== 常見問題頁重新設計（老大 2026-09-21：「這頁不好看，重新設計」） =====
原本：置中標題＋一條 920px 的細列表，整頁又窄又素。
改成：左欄（標題＋說明＋聯絡入口，捲動時黏住）＋右欄問答，問答有編號、展開時淺灰底。 */
.theme-karatb.kb-page-faq #wsite-content { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: 0 clamp(40px, 6vw, 104px);
align-items: start; max-width: calc(var(--kb-maxw) + var(--kb-gut) * 2); margin: 0 auto; padding: 0 var(--kb-gut); }
.theme-karatb.kb-page-faq #wsite-content > .block-text { grid-column: 1; position: sticky; top: calc(var(--csb-sticky-top, 96px) + 8px);
padding: clamp(28px, 3.4vw, 44px) 0 40px !important; text-align: left !important; }
.theme-karatb.kb-page-faq #wsite-content > .block-text .wrap { max-width: none; padding: 0; }
.theme-karatb.kb-page-faq #wsite-content > .block-text .wrap > h2 { font-size: clamp(28px, 2.6vw, 34px); margin: 0 0 18px; }
.theme-karatb.kb-page-faq #wsite-content > .block-text .wrap > h2::after { margin-left: 0; }
.theme-karatb.kb-page-faq #wsite-content > .block-text .wrap > p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.85; color: #5e5e64; }
.theme-karatb.kb-page-faq #wsite-content > .block-text .wrap > p > a { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 0 18px; min-height: 42px;
border: 1px solid var(--kb-ink); border-radius: 2px; color: var(--kb-ink); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: background-color .2s, color .2s; }
.theme-karatb.kb-page-faq #wsite-content > .block-text .wrap > p > a::after { content: '→'; }
.theme-karatb.kb-page-faq #wsite-content > .block-text .wrap > p > a:hover { background: var(--kb-ink); color: #fff; }
.theme-karatb.kb-page-faq #wsite-content > .block-faq { grid-column: 2; padding: clamp(28px, 3.4vw, 44px) 0 clamp(56px, 6vw, 88px) !important; }
.theme-karatb.kb-page-faq #wsite-content > .block-faq .wrap { max-width: none; padding: 0; counter-reset: kbfaq; }
.theme-karatb.kb-page-faq .block-faq .wrap > .faq-item:first-child { border-top: 1px solid var(--kb-line); }
.theme-karatb.kb-page-faq .faq-item { border-bottom: 1px solid var(--kb-line); transition: background-color .25s ease; }
.theme-karatb.kb-page-faq .faq-item[open] { background: #FAFAFA; }
.theme-karatb.kb-page-faq .faq-item summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) 30px; gap: 0 12px; align-items: center;
padding: 20px 14px 20px 16px; font-size: 17px; font-weight: 600; line-height: 1.55; color: var(--kb-ink); }
.theme-karatb.kb-page-faq .faq-item summary::before { counter-increment: kbfaq; content: counter(kbfaq, decimal-leading-zero); font-size: 13px; font-weight: 700; letter-spacing: .08em;
color: var(--kb-red); font-variant-numeric: tabular-nums; }
.theme-karatb.kb-page-faq .faq-item summary::after { position: static; margin: 0; width: 26px; height: 26px; border: 1px solid #c9c9ce; background: none; color: var(--kb-ink);
background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 10px 1px, 1px 10px; background-position: center; background-repeat: no-repeat; }
.theme-karatb.kb-page-faq .faq-item[open] summary { color: var(--kb-ink); }
.theme-karatb.kb-page-faq .faq-item[open] summary::after { transform: rotate(45deg); background-color: var(--kb-ink); border-color: var(--kb-ink); color: #fff; }
.theme-karatb.kb-page-faq .faq-item summary:hover { color: var(--kb-red-ink); }
.theme-karatb.kb-page-faq .faq-answer { max-width: none; padding: 0 60px 26px 72px; font-size: 15.5px; line-height: 1.95; color: #4a4a50; }
.theme-karatb.kb-page-faq .faq-answer p { margin: 0 0 10px; }
@media (max-width: 900px) {
.theme-karatb.kb-page-faq #wsite-content { display: block; padding: 0; }
.theme-karatb.kb-page-faq #wsite-content > .block-text { position: static; padding-bottom: 8px !important; }
.theme-karatb.kb-page-faq #wsite-content > .block-text .wrap, .theme-karatb.kb-page-faq #wsite-content > .block-faq .wrap { padding: 0 var(--kb-gut); }
.theme-karatb.kb-page-faq .faq-item summary { grid-template-columns: 36px minmax(0, 1fr) 26px; padding: 16px 6px 16px 8px; font-size: 16px; }
.theme-karatb.kb-page-faq .faq-answer { padding: 0 8px 20px 52px; }
}
/* ===== 經銷據點：原站模式（老大 2026-09-21）＝篩選列三格＋一張表 ===== */
.theme-karatb .kb-dealers-bar { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: center; margin: 0 0 6px; padding: 14px 16px;
background: #FAFAFA; border: 1px solid var(--kb-line); border-radius: 4px; }
.theme-karatb .kb-dealers-bar select, .theme-karatb .kb-dealers-search input { width: 100%; min-width: 0; min-height: 46px; padding: 0 14px; border: 1px solid var(--kb-line); border-radius: 3px;
background: #fff; font: inherit; font-size: 15.5px; color: var(--kb-ink); }
.theme-karatb .kb-dealers-bar select { appearance: none; -webkit-appearance: none; padding-right: 36px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.theme-karatb .kb-dealers-bar select:focus, .theme-karatb .kb-dealers-search input:focus { outline: none; border-color: var(--kb-ink); }
.theme-karatb .kb-dealers-search { display: flex; }
.theme-karatb .kb-dealers-search input { border-radius: 3px 0 0 3px; border-right: 0; }
.theme-karatb .kb-dealers-search button { flex: 0 0 52px; display: grid; place-items: center; border: 0; border-radius: 0 3px 3px 0; background: var(--kb-red); color: #fff; cursor: pointer; transition: background-color .2s; }
.theme-karatb .kb-dealers-search button:hover { background: var(--kb-red-ink); }
.theme-karatb .kb-dealers-count { grid-column: 1 / -1; margin: 0; font-size: 13.5px; color: var(--kb-muted); }
.theme-karatb .kb-dealers-count:empty { display: none; }
.theme-karatb .kb-dealers-grid { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 15.5px; }
.theme-karatb .kb-dealers-grid th { padding: 14px 12px; background: #FAFAFA; text-align: left; font-size: 14px; font-weight: 700; color: var(--kb-ink); border-bottom: 1px solid var(--kb-line); }
.theme-karatb .kb-dealers-grid td { padding: 13px 12px; border-bottom: 1px solid var(--kb-line); vertical-align: middle; color: #3a3a40; }
.theme-karatb .kb-dealers-grid tbody tr { transition: background-color .15s ease; }
.theme-karatb .kb-dealers-grid tbody tr:hover { background: #F4F4F5; }
.theme-karatb .kb-dealers-grid th:nth-child(1), .theme-karatb .kb-dealers-grid td:nth-child(1) { width: 8%; }
.theme-karatb .kb-dealers-grid th:nth-child(2), .theme-karatb .kb-dealers-grid td:nth-child(2) { width: 11%; }
.theme-karatb .kb-dealers-grid th:nth-child(3), .theme-karatb .kb-dealers-grid td:nth-child(3) { width: 12%; }
.theme-karatb .kb-dealers-grid th:nth-child(5), .theme-karatb .kb-dealers-grid td:nth-child(5) { width: 18%; }
.theme-karatb .kb-dealers-n { font-weight: 600; color: var(--kb-ink); }
.theme-karatb .kb-dealers-a a, .theme-karatb .kb-dealers-t a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.theme-karatb .kb-dealers-a a::before, .theme-karatb .kb-dealers-t a::before { content: ''; flex: 0 0 auto; width: 16px; height: 16px; background: var(--kb-red); }
.theme-karatb .kb-dealers-a a::before {
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
.theme-karatb .kb-dealers-t a::before {
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
.theme-karatb .kb-dealers-a a:hover, .theme-karatb .kb-dealers-t a:hover { color: var(--kb-red-ink); text-decoration: none; }
.theme-karatb .kb-dealers-t a { font-variant-numeric: tabular-nums; }
.theme-karatb .kb-dealers-empty { margin: 24px 0; color: var(--kb-muted); }
.theme-karatb .kb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) {
.theme-karatb .kb-dealers-bar { grid-template-columns: 1fr 1fr; }
.theme-karatb .kb-dealers-search { grid-column: 1 / -1; }
.theme-karatb .kb-dealers-grid thead { display: none; }
.theme-karatb .kb-dealers-grid tbody tr { display: grid; grid-template-columns: auto auto 1fr; gap: 4px 10px; padding: 12px 4px; border-bottom: 1px solid var(--kb-line); }
.theme-karatb .kb-dealers-grid td { display: block; padding: 0; border: 0; width: auto !important; }
.theme-karatb .kb-dealers-grid td:nth-child(1), .theme-karatb .kb-dealers-grid td:nth-child(2) { font-size: 13.5px; color: var(--kb-muted); }
.theme-karatb .kb-dealers-n { grid-column: 3; }
.theme-karatb .kb-dealers-a, .theme-karatb .kb-dealers-t { grid-column: 1 / -1; }
}
/* 專刊與聯絡頁共用原站聯絡頁那張 hero：取景錯開，一張看洗手檯、一張看馬桶與窗景，才不會兩頁一模一樣 */
.theme-karatb.kb-page-media-detail .kb-phero--short .kb-phero-img { object-position: 35% 48%; }
.theme-karatb.kb-page-contact .kb-phero--short .kb-phero-img { object-position: 70% 52%; }
/* 麵包屑移到 hero 下面（老大 2026-09-21）：hero 在 #wsite-content 外面自己一層，麵包屑那列在它下面 */
.theme-karatb .kb-phero-wrap + .hz-crumbbar { border-top: 0; }
.theme-karatb .hz-crumbbar { border-bottom: 1px solid var(--kb-line); }
/* 分類側欄的展開狀態（老大 2026-09-21：不要黑圈圈，用很淺的灰）：圓框填淺灰、線條墨色 */
.theme-karatb .csb-item.is-open > .csb-row > .csb-tg { background: #EDEDEF !important; border-color: #EDEDEF !important; }
.theme-karatb .csb-item.is-open > .csb-row > .csb-tg::before { background: var(--kb-ink); }
.theme-karatb .csb-item.is-open > .csb-row > .csb-tg:hover { background: #E2E2E5 !important; border-color: #E2E2E5 !important; }
.theme-karatb .csb-item.is-open > .csb-row > .csb-tg:hover::before { background: var(--kb-ink); }
/* 商品內頁寬度一致（老大 2026-09-21）：上半部的主圖用 contain 置中在欄裡，看起來像內縮；改成靠左對齊欄位，
跟下面的產品特色／規格同一條左緣。欄比也定死 5:7，不再靠 flex 算。 */
.theme-karatb .pd-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.theme-karatb .pd-media, .theme-karatb .pd-info { flex: none; min-width: 0; }
.theme-karatb .pd-main-img { width: 100%; aspect-ratio: 1 / 1; max-height: 560px; object-fit: contain; object-position: left center; }
.theme-karatb .pd-thumbs { justify-content: flex-start; }
@media (max-width: 760px) { .theme-karatb .pd-top { grid-template-columns: 1fr; } .theme-karatb .pd-main-img { object-position: center; } }
/* 規格圖也靠左，跟產品特色同一條左緣（不置中） */
.theme-karatb .pd-tabs .pd-tab-panel img { margin: 0; }
/* 最新消息列表卡片（老大 2026-09-21）：標籤明顯一點、標題下面那段摘要文不要 */
.theme-karatb .cms-list-cards .cms-tag { padding: 3px 10px !important; background: #EDEDEF; color: var(--kb-ink) !important; font-size: 13px !important; font-weight: 500; }
.theme-karatb .cms-list-cards .cms-tag:hover { background: var(--kb-ink); color: #fff !important; }
.theme-karatb .cms-list-cards > .blog-post.cms-card > .cms-entry-excerpt { display: none !important; }
.theme-karatb .cms-list-cards > .blog-post.cms-card > .blog-header { padding-bottom: 18px !important; }
.theme-karatb .cms-list-cards > .blog-post.cms-card > .blog-header > .cms-tags,
.theme-karatb .cms-list-cards > .blog-post.cms-card > .blog-header > .cms-entry-tags { margin-top: 12px !important; }
/* 文章內頁的標籤（老大 2026-09-21：放在下面 OK，但字過小 → 灰底黑字、字級大一點點） */
.theme-karatb .hz-article-wrap .cms-tags { gap: 8px 10px; margin: 28px 0 0; padding: 0; }
.theme-karatb .hz-article-wrap .cms-tag { display: inline-block; padding: 6px 14px; border: 0; border-radius: 3px; background: #EDEDEF; color: var(--kb-ink);
font-size: 14.5px; font-weight: 500; line-height: 1.6; text-decoration: none; opacity: 1; }
.theme-karatb .hz-article-wrap .cms-tag:hover { background: var(--kb-ink); color: #fff; }
/* 文章分享列（老大 2026-09-21：分享有點太小）：整列放大一階——「分享」字 16px、圓鈕 44px、圖示 20px */
.theme-karatb .cms-share { gap: 12px; margin-top: 28px; }
.theme-karatb .cms-share__label { font-size: 16px; gap: 8px; }
.theme-karatb .cms-share__label svg { width: 18px; height: 18px; }
.theme-karatb .cms-share__list { gap: 10px; }
.theme-karatb .cms-share__btn { width: 44px; height: 44px; }
.theme-karatb .cms-share .cms-share__btn, .theme-karatb .cms-share .cms-share__btn:visited, .theme-karatb .cms-share .cms-share__btn:hover { color: #fff; } /* 圖示白色（原本吃到連結紅色） */
.theme-karatb .cms-share__btn svg { width: 20px; height: 20px; }
.theme-karatb .cms-share__btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .14); }
/* 分享列在「社群圖示樣式」模式（.cms-share--si）下，按鈕大小是 SocialIcons 的 .cms-si 在管，不是 .cms-share__btn
→ 這裡直接放大 .cms-si（28 → 40px，圖示 20px），跟頁尾的社群圖示各自獨立、互不影響 */
.theme-karatb .cms-share--si .cms-si { width: 40px !important; height: 40px !important; min-width: 40px; font-size: 20px !important; }
.theme-karatb .cms-share--si .cms-si svg, .theme-karatb .cms-share--si .cms-si img { width: 20px !important; height: 20px !important; }
.theme-karatb .cms-share--si .cms-share__list { gap: 12px; }
/* 分類側欄三修（老大 2026-09-21：字深一點、標題不要明體） */
.theme-karatb .csb-head { font-family: inherit; font-weight: 700; font-size: 22px; letter-spacing: .02em; }
.theme-karatb .csb-link { color: #2f2f34; }
.theme-karatb .csb-d1 .csb-link { color: #3f3f45; }
/* 目前所在的子分類：前面的小方塊要留著（前面有條規則把 aria-current 的 ::before 藏了，這裡放回來） */
.theme-karatb .csb-d1 .csb-link[aria-current="page"]::before { display: block; background: var(--kb-red); }
/* ===== 品牌介紹（B）＝章節式（老大 2026-09-22：C 這版好看，交換過來） =====
章節式：編號＋標題在左欄、內文在右欄；照片是整條滿版帶當分隔；引言深色帶 */
.theme-karatb.kb-page-brand-story #wsite-content { counter-reset: kcch; }
.theme-karatb.kb-page-brand-story .kb-feat { padding: clamp(48px, 6vw, 88px) 0; }
.theme-karatb.kb-page-brand-story .kb-feat-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.theme-karatb.kb-page-brand-story .kb-feat-img { display: none; } /* 章節不配小圖，照片走滿版帶 */
.theme-karatb.kb-page-brand-story .kb-feat-copy { display: contents; }
.theme-karatb.kb-page-brand-story .kb-feat-copy > .kb-h2 { grid-column: 1; position: relative; margin: 0; padding-top: 4px;
font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; line-height: 1.45; letter-spacing: 0; }
/* 章節編號 01／02 老大 2026-09-22 說不要，拿掉；標題上方原本留給編號的距也收掉 */
.theme-karatb.kb-page-brand-story .kb-feat-copy > .kb-h2::after { content: ''; display: block; width: 40px; height: 3px; margin-top: 20px; background: var(--kb-red); }
.theme-karatb.kb-page-brand-story .kb-feat-copy > .kb-lead { grid-column: 2; margin: 0; padding-top: 8px; font-size: 16.5px; line-height: 2.1; color: #4a4a50; }
.theme-karatb.kb-page-brand-story .kb-feat--noimg .kb-feat-copy { max-width: none; }
/* 只有項目（服務理念／在地保固）的那塊：兩欄、明體小標、細線 */
.theme-karatb.kb-page-brand-story .kb-feat--noimg .kb-feat-copy > .kb-feat-list { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 32px clamp(40px, 6vw, 96px); margin: 0; }
.theme-karatb.kb-page-brand-story .kb-feat-list > div { padding: 22px 0 0; border: 0 !important; border-top: 1px solid var(--kb-ink) !important; }
.theme-karatb.kb-page-brand-story .kb-feat-list dt { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.theme-karatb.kb-page-brand-story .kb-feat-list dd { margin: 0; font-size: 15.5px; line-height: 1.95; color: #4a4a50; }
.theme-karatb.kb-page-brand-story .block-image { padding: 0 !important; }
.theme-karatb.kb-page-brand-story .block-image .wrap { max-width: none; padding: 0; }
.theme-karatb.kb-page-brand-story .block-image img { display: block; width: 100%; height: clamp(260px, 32vw, 460px); object-fit: cover; }
.theme-karatb.kb-page-brand-story .kb-quote.kb-sec--stone { background: var(--kb-dark); }
.theme-karatb.kb-page-brand-story .kb-quote-t { color: #fff; }
.theme-karatb.kb-page-brand-story .kb-quote-c { color: var(--kb-on-dark-2); }
@media (max-width: 800px) {
.theme-karatb.kb-page-brand-story .kb-feat-in { grid-template-columns: 1fr; gap: 16px; }
.theme-karatb.kb-page-brand-story .kb-feat-copy > .kb-h2, .theme-karatb.kb-page-brand-story .kb-feat-copy > .kb-lead { grid-column: 1; }
.theme-karatb.kb-page-brand-story .kb-feat-copy > .kb-lead { padding-top: 0; }
.theme-karatb.kb-page-brand-story .kb-feat--noimg .kb-feat-copy > .kb-feat-list { grid-template-columns: 1fr; }
}
/* B 章節式的 hero：標題置中、明體改黑體，白線改紅短線 */
.theme-karatb .kb-phero--center .kb-phero-copy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
background: linear-gradient(to bottom, rgba(26, 24, 22, .12), rgba(26, 24, 22, .38)); padding: 0; }
.theme-karatb .kb-phero--center .kb-phero-title { font-size: clamp(30px, 3.6vw, 46px); letter-spacing: .1em; }
.theme-karatb .kb-phero--center .kb-phero-title::after { content: ''; display: block; width: 40px; height: 3px; margin: 18px auto 0; background: var(--kb-red); }
/* 只有項目（服務理念／在地保固）那塊：老大 2026-09-22「表現怪怪」——上面空一大段、兩條孤零零的線。
收掉上距、兩欄各自用跟章節標題一樣的紅短線，不畫上線也不用側邊色條。 */
.theme-karatb.kb-page-brand-story .kb-feat:has(.kb-feat-list):not(:has(.kb-h2)) { padding-top: 0; }
.theme-karatb.kb-page-brand-story .kb-feat-list > div { padding: 0; border: 0 !important; }
.theme-karatb.kb-page-brand-story .kb-feat-list dt::after { content: ''; display: block; width: 40px; height: 3px; margin: 14px 0 12px; background: var(--kb-red); } /* 跟章節標題同一種紅短線，不用側邊色條（那是公版感） */
/* 手機抽屜子選單收合與陰影：改由共用 /assets/cms-nav-mobile.{css,js} 處理（2026-09-22） */
@media (max-width: 1024px) { .js .theme-karatb .hz-nav .nav-sub { display: block; columns: 1; grid-template-columns: 1fr; padding: 0 0 8px; background: #fff; } .theme-karatb .hz-nav .nav-sub .nav-link { padding: 10px 24px 10px 32px; font-size: 15.5px; } } /* 抽屜子選單一欄，兩欄會把「公共商業空間」擠出去 */
/* 商品內頁重排（老大 2026-09-22，B／C 共用同一段 JS，見 theme.js）：頁籤列藏、兩段攤平、留言詢問藏、產品特色搬到標題下 */
.theme-karatb .pd-tabs-nav { display: none !important; }
.theme-karatb .pd-tabs .pd-tab-panel, .theme-karatb .pd-tabs .pd-tab-panel[hidden] { display: block !important; margin-top: 0; min-height: 0; }
.theme-karatb .pd-tabs .pd-tab-panel + .pd-tab-panel { margin-top: 36px; padding-top: 0; border-top: 0; } /* 圖跟規格表之間只留空白，不畫線（原站就是圖接著內容） */
.theme-karatb .pd-tabs .pd-tab-panel + .pd-tab-panel::before { content: none !important; } /* 舊做法用 ::before 補「規格圖」字樣，現在改 JS 補 .kb-pd-h（順序換了） */
.theme-karatb .pd-tabs .pd-tab-panel img { display: block; max-width: 100%; height: auto; margin: 0; }
.theme-karatb .kb-pd-h { margin: 0 0 14px; font-size: 17px; font-weight: 700; color: var(--kb-ink); }
.theme-karatb .pd-tabs.is-flat .pd-desc > h3:first-of-type:not(.kb-pd-h) { margin-top: 0; }
.theme-karatb .pd-wish-form { display: none !important; }
.theme-karatb .kb-pd-feat { margin: 18px 0 6px; padding: 18px 0 6px; border-top: 1px solid var(--kb-line); }
.theme-karatb .kb-pd-feat h3 { margin: 0 0 10px; font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--kb-ink); }
.theme-karatb .kb-pd-feat ul, .theme-karatb .kb-pd-feat ol { margin: 0; padding: 0 0 0 18px; }
.theme-karatb .kb-pd-feat li { margin: 0 0 6px; font-size: 15.5px; line-height: 1.7; }
.theme-karatb .kb-pd-feat li::marker { color: var(--kb-red); }
/* 品牌頁「工程專區」（老大 2026-09-22：圖太大，重新設計）：三個 logo 縮成 84px 放左邊，右邊名稱＋「工法說明與案例 →」，
三筆並排、中間淡線隔開、整組淺灰底；首頁那組輪播不動（.kb-eng-txt 在首頁藏掉）。 */
.theme-karatb .kb-eng-txt { display: none; }
.theme-karatb.kb-page-brand-story .kb-eng-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; overflow: visible; background: var(--kb-stone); }
.theme-karatb.kb-page-brand-story .kb-eng-item { flex: none; min-width: 0; }
.theme-karatb.kb-page-brand-story .kb-eng-item + .kb-eng-item { border-left: 1px solid #DCDCE0; }
.theme-karatb.kb-page-brand-story .kb-eng-item a, .theme-karatb.kb-page-brand-story .kb-eng-item > div { display: flex; align-items: center; gap: 20px; height: 100%; padding: 26px 28px;
background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; color: var(--kb-ink); text-decoration: none; transition: background-color .3s ease; }
.theme-karatb.kb-page-brand-story .kb-eng-item a:hover { background: #fff; transform: none; box-shadow: none; border-color: transparent; }
.theme-karatb.kb-page-brand-story .kb-eng-item img { flex: 0 0 84px; width: 84px; height: 84px; object-fit: contain; background: #fff; border-radius: 50%; padding: 10px; mix-blend-mode: multiply; }
.theme-karatb.kb-page-brand-story .kb-eng-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.theme-karatb.kb-page-brand-story .kb-eng-name { font-size: 19px; font-weight: 700; line-height: 1.35; transition: color .2s ease; }
.theme-karatb.kb-page-brand-story .kb-eng-go { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--kb-muted); }
.theme-karatb.kb-page-brand-story .kb-eng-go::after { content: '\2192'; transition: transform .35s var(--ease-out, ease); }
.theme-karatb.kb-page-brand-story .kb-eng-item a:hover .kb-eng-name { color: var(--kb-red-ink); }
.theme-karatb.kb-page-brand-story .kb-eng-item a:hover .kb-eng-go { color: var(--kb-ink); }
.theme-karatb.kb-page-brand-story .kb-eng-item a:hover .kb-eng-go::after { transform: translateX(5px); }
@media (max-width: 900px) {
.theme-karatb.kb-page-brand-story .kb-eng-row { grid-template-columns: 1fr; }
.theme-karatb.kb-page-brand-story .kb-eng-item + .kb-eng-item { border-left: 0; border-top: 1px solid #DCDCE0; }
.theme-karatb.kb-page-brand-story .kb-eng-item a, .theme-karatb.kb-page-brand-story .kb-eng-item > div { padding: 18px 20px; }
.theme-karatb.kb-page-brand-story .kb-eng-item img { flex-basis: 64px; width: 64px; height: 64px; }
}
/* 側邊浮動社群（老大 2026-09-22：B／C 樣式交換）：B＝中灰底白 icon，滑過轉墨黑。
⚠️ C 的 body 也帶 .theme-karatb，所以要 :not(.theme-karatc) 擋住，C 才會維持共用預設的淺灰底黑 icon。 */
.theme-karatb:not(.theme-karatc) .cms-social-stack__item .cms-si, .theme-karatb:not(.theme-karatc) .cms-social-stack__item .cms-social-badge { background: var(--si-brand, var(--kb-red)) !important; /* 2026-10-19 老大：浮動 icon 要彩色（原本 karat-b 沿用的灰 #7C7C82） */ color: #fff !important; border: 0 !important; box-shadow: none !important; }
.theme-karatb:not(.theme-karatc) .cms-social-stack__item .cms-si svg, .theme-karatb:not(.theme-karatc) .cms-social-stack__item .cms-social-badge svg { color: #fff !important; fill: #fff !important; }
.theme-karatb:not(.theme-karatc) .cms-social-stack__fold { background: #3A3A40 !important; color: #fff !important; } /* 深灰底白圖示（老大 2026-09-22：白底在白頁上超不清楚） */
.theme-karatb:not(.theme-karatc) .cms-social-stack__item:hover .cms-si, .theme-karatb:not(.theme-karatc) .cms-social-stack__item:hover .cms-social-badge,
.theme-karatb:not(.theme-karatc) .cms-social-stack__item:focus-visible .cms-si, .theme-karatb:not(.theme-karatc) .cms-social-stack__item:focus-visible .cms-social-badge { background: var(--kb-ink) !important; color: #fff !important; }
/* 回到頂端鈕改品牌紅（老大 2026-09-22；預設吃 --accent 是海軍藍） */
.theme-karatb .cms-backtop { background: var(--kb-red); box-shadow: 0 6px 18px rgba(229, 8, 19, .28); }
.theme-karatb .cms-backtop:hover { background: var(--kb-red-ink); box-shadow: 0 10px 24px rgba(229, 8, 19, .34); }
/* 手機抽屜選單要壓在側邊直排、置頂鈕上面（老大 2026-09-22：選單圖層要更高）：抽屜與遮罩拉到 10000，
而且抽屜開著時把那兩組浮動鈕淡掉，免得透過遮罩還看得到 */
@media (max-width: 1080px) {
/* ⚠️ 抽屜 .hz-nav 在 .hz-bar（sticky＋z-index:60）裡面，是它的堆疊子層，z-index 拉再高也只在那層裡有效；
遮罩是 .hz-bar 的兄弟，拉到 9995 反而蓋在整個 header（含抽屜）上面——2026-09-22 踩到，畫面整塊灰掉。
所以不動 z-index，只在抽屜開著時把兩組浮動鈕藏掉，抽屜自然就在最上面。 */
.theme-karatb.nav-open .cms-social-stack, .theme-karatb.nav-open .cms-backtop { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.theme-karatb .hz-nav-close:focus, .theme-karatb .hz-toggle:focus { outline: none; } /* 版型的紅色 focus 框在關閉鈕上很突兀 */
.theme-karatb .hz-nav-close:focus-visible, .theme-karatb .hz-toggle:focus-visible { outline: 2px solid rgba(0, 0, 0, .3); outline-offset: 2px; }
}
/* 手機漢堡鈕重做（老大 2026-09-22：點擊要有動態、三條線很醜）：兩條細線 26px，點開變成 ×（兩條線各轉 45°），
鈕本身壓在抽屜上面當關閉鈕；抽屜自己那條「選單 ×」列藏掉、上緣留主列高度。選單項目開抽屜時逐條淡入。 */
@media (max-width: 1080px) {
.theme-karatb .hz-tools { position: relative; z-index: 95; } /* 要大於抽屜 .hz-nav 的 90，漢堡鈕才會蓋在抽屜上面（點得到、也看得到變 ×） */
.theme-karatb .hz-toggle { position: relative; width: 44px; height: 44px; margin-right: -6px; }
.theme-karatb .hz-toggle-bars { width: 26px; height: 14px; }
/* 位移只用 transform（不要動 top／width，那會讓瀏覽器每一幀重算版面、在低階手機上會卡） */
.theme-karatb .hz-toggle-bars span { height: 2px; border-radius: 0; transition: transform .35s cubic-bezier(.2,.7,.3,1), opacity .2s ease; }
.theme-karatb .hz-toggle-bars span:nth-child(1) { top: 1px; }
.theme-karatb .hz-toggle-bars span:nth-child(2) { top: 6px; width: 60%; left: auto; right: 0; opacity: 0; } /* 第二條拿掉，只留兩條 */
.theme-karatb .hz-toggle-bars span:nth-child(3) { top: 11px; }
.theme-karatb.nav-open .hz-toggle-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.theme-karatb.nav-open .hz-toggle-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.theme-karatb .js .hz-nav-head, .js .theme-karatb .hz-nav-head { display: none !important; }
.js .theme-karatb .hz-nav { padding-top: var(--bar-h, 64px); }
.js .theme-karatb .hz-nav .nav-list > .nav-item { opacity: 0; transform: translateX(16px); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.3,1); }
.js .theme-karatb.nav-open .hz-nav .nav-list > .nav-item { opacity: 1; transform: none; }
.js .theme-karatb.nav-open .hz-nav .nav-list > .nav-item:nth-child(1) { transition-delay: .06s; }
.js .theme-karatb.nav-open .hz-nav .nav-list > .nav-item:nth-child(2) { transition-delay: .10s; }
.js .theme-karatb.nav-open .hz-nav .nav-list > .nav-item:nth-child(3) { transition-delay: .14s; }
.js .theme-karatb.nav-open .hz-nav .nav-list > .nav-item:nth-child(4) { transition-delay: .18s; }
.js .theme-karatb.nav-open .hz-nav .nav-list > .nav-item:nth-child(5) { transition-delay: .22s; }
.js .theme-karatb.nav-open .hz-nav .nav-list > .nav-item:nth-child(6) { transition-delay: .26s; }
.js .theme-karatb.nav-open .hz-nav .nav-list > .nav-item:nth-child(n+7) { transition-delay: .30s; }
}
@media (prefers-reduced-motion: reduce) {
.theme-karatb .hz-toggle-bars span, .js .theme-karatb .hz-nav .nav-list > .nav-item { transition: none; }
}
/* ===== 商品分類側欄三修（老大 2026-09-22：＋換成箭頭、整區簡約一點） =====
做法：拿掉圓框、拿掉次選單的灰底方塊，只剩文字、細線與一個很輕的 chevron。
① 標題：紅短線收成 32px，字級降一階，不再是整條底線
② 每一列之間一條極淡的線，靠它分段，不靠底色
③ 展開鈕：1.2px 的 chevron（>），展開時轉 90° 朝下；沒有圓框、沒有實心
④ 子項：左邊一條淡直線＋縮排，目前項用紅字；不用灰底塊、不用小方塊
⑤ 目前所在的大分類左邊一條 2px 紅短豎線 */
.theme-karatb .csb-head { margin: 0 0 18px; padding-bottom: 10px; border-bottom-width: 2px; border-bottom-color: var(--kb-red);
font-size: 21px; letter-spacing: .08em; }
.theme-karatb .csb-list > .csb-item + .csb-item { border-top: 1px solid #EDEDEF; }
.theme-karatb .csb-row { position: relative; align-items: center; }
.theme-karatb .csb-link { padding: 13px 0 13px 14px !important; font-size: 16.5px; letter-spacing: .02em; color: #5a5a60; transition: color .2s ease; }
.theme-karatb .csb-link[aria-current="page"], .theme-karatb .csb-item.is-cur > .csb-row > .csb-link { color: var(--kb-ink); font-weight: 700; }
/* 目前所在的大分類：左邊紅豎線（取代底色與粗體之外的標示） */
.theme-karatb .csb-list > .csb-item > .csb-row > .csb-link::after { content: ''; position: absolute; left: 0; top: 50%; width: 2px; height: 16px; margin-top: -8px;
background: var(--kb-red); transform: scaleY(0); transform-origin: center; transition: transform .28s var(--ease-out, ease); } /* 用 scaleY 不用 height：動 height 每一幀都要重算版面 */
.theme-karatb .csb-list > .csb-item > .csb-row > .csb-link[aria-current="page"]::after,
.theme-karatb .csb-list > .csb-item.is-cur > .csb-row > .csb-link::after { transform: scaleY(1); }
/* 展開鈕：細 chevron，展開時轉 90°（朝下）。把舊版的圓框與加號兩條線全部拆掉 */
.theme-karatb .csb-tg { width: 30px; height: 30px; margin: 0; border: 0 !important; border-radius: 0; background: none !important; }
.theme-karatb .csb-tg::before { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -4px 0 0 -5px;
border-right: 1.2px solid #9a9aa0; border-bottom: 1.2px solid #9a9aa0; background: none;
transform: rotate(-45deg); transition: transform .3s var(--ease-out, ease), border-color .2s ease; }
.theme-karatb .csb-tg::after { display: none; }
.theme-karatb .csb-item.is-open > .csb-row > .csb-tg::before { transform: rotate(45deg); background: none !important; } /* 舊版的加號規則會把它填成實心（看起來像黑菱形），要壓掉 */
.theme-karatb .csb-tg:hover::before { border-color: var(--kb-ink); }
.theme-karatb .csb-item.is-open > .csb-row > .csb-tg { background: none !important; }
.theme-karatb .csb-item.is-open > .csb-row > .csb-tg::before { border-color: var(--kb-ink); background: none !important; }
/* 子選單：左邊一條淡直線，不用灰底塊、不用小方塊 */
.theme-karatb .csb-d1 { margin: 0 0 8px; padding: 2px 0 2px 15px; background: none; border-radius: 0; border-left: 1px solid #E4E4E6; margin-left: 14px; }
.theme-karatb .csb-d1 .csb-link { padding: 8px 0 !important; font-size: 15.5px; color: #77777d; }
.theme-karatb .csb-d1 .csb-link::before { display: none !important; }
.theme-karatb .csb-d1 .csb-link:hover { color: var(--kb-ink); }
.theme-karatb .csb-d1 .csb-link[aria-current="page"] { color: var(--kb-red-ink); font-weight: 600; }
/* ⚠️ 側欄子層曾經用 grid-template-rows: 0fr→1fr 做展開動畫（2026-09-22），
但收合狀態下子清單仍然把空間撐開，整個側欄出現大片空白（老大回報「B 版的選單壞掉」）→ 已移除，
回到工版的 display:none↔block。要再做動態的話要先解決「收合時高度真的歸零」這件事，不要再直接套 0fr。 */
/* 左欄「跟著捲動釘住」先取消（老大 2026-09-22：「滾軸效果不好，如果無法做到就先取消固定位置」）。
側欄一律跟著頁面一起捲，不吸頂、不出現自己的捲軸。theme.js 的量測還在但不會有作用（class 沒有樣式）。 */
.theme-karatb .csb-layout > .csb, .theme-karatb .csb-layout.kb-csb-pin > .csb, .theme-karatb .csb-layout > .csb.csb-nostick {
position: static !important; max-height: none !important; overflow: visible !important;
}
/* 手機抽屜裡的「父層頁面入口」（老二 2026-09-22 做的 .cms-navm-parent，共用腳本會插在子清單最前面）：
B／C 這兩套把它做得跟子項有區別——粗體墨色＋底下一條淡線，讓人看得出「這是這一組自己的頁面」。 */
@media (max-width: 1023px) {
.theme-karatb .cms-navm-parent > .nav-link { font-weight: 700; color: var(--kb-ink); }
.theme-karatb .cms-navm-parent { border-bottom: 1px solid var(--kb-line); margin-bottom: 4px; padding-bottom: 2px; }
}
/* 主列 auto-hide（配合 theme.js）：只動 transform，不加 will-change（會困住 fixed 的手機抽屜） */
.theme-karatb .hz-bar { transition: transform .32s var(--ease-out, cubic-bezier(.2,.7,.3,1)), box-shadow .3s ease; }
.theme-karatb.nav-open .hz-bar { transform: none !important; }
.theme-karatb .hz-bar.is-hidden { transform: translateY(-100%); box-shadow: none; }
.theme-karatb .hz-bar.is-hidden .cms-search-panel { display: none; }
@media (prefers-reduced-motion: reduce) { .theme-karatb .hz-bar { transition: none; } }
/* ⚠️ 左欄的字級不要跟著欄寬縮（老大 2026-09-22：「我覺得左選單字變小」）——
欄寬用 clamp 依螢幕縮放就夠了，字級一律維持原本大小（標題 21px／項目 16.5px／子項 15.5px）。 */
/* 左欄字級與顏色（老大 2026-09-22：字級大一點點、顏色加黑一點） */
.theme-karatb .csb-link { font-size: 17.5px !important; color: #33333a !important; }
.theme-karatb .csb-link:hover { color: var(--kb-ink) !important; }
.theme-karatb .csb-link[aria-current="page"], .theme-karatb .csb-item.is-cur > .csb-row > .csb-link { color: var(--kb-ink) !important; }
.theme-karatb .csb-d1 .csb-link { font-size: 16px !important; color: #55555c !important; }
.theme-karatb .csb-d1 .csb-link[aria-current="page"] { color: var(--kb-red-ink) !important; }
/* ===== 虹荃 hong-c 專用（這支只有 hong-c2 版型在用，不影響 karat-b）=====
2026-10-15 老大：「商品圖片太大了」。karat-b 的尺寸是給衛浴情境照用的；虹荃是小零件白底照，同樣大小顯得很空很大。
桌機才縮（手機照原本兩欄）：首頁商品列 4→5 欄、品類格 3→4 欄、列表頁卡片縮到約 240px、商品頁主圖欄 5:7→4:8，
卡片裡的圖多留一點白邊。 */
@media (min-width: 1025px) {
.theme-karatb .kb-prods-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.theme-karatb .kb-prods.is-carousel .kb-pcard { flex-basis: calc((100% - 4 * clamp(16px, 2vw, 28px)) / 5); }
.theme-karatb .kb-cats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 分類列表頁的欄數是積木模板寫死 3 欄＋!important（default/blocks/category_view.php），這裡用更高的權重蓋，只在這個版型 */
.theme-karatb .pcatg.pcatg.product-list { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.theme-karatb .pd-related .product-list.product-list { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.theme-karatb .pd-top { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}
.theme-karatb .product-card .product-thumb img { padding: 10%; background: #fff; }
.theme-karatb .kb-pcard-img img { padding: 12%; }
/* 2026-10-15 老大：「hero 圖太大，並且沒重點」→ 首頁主視覺改對開（左圖右文），只放一個主角商品，桌機高度壓在 460px 內 */
@media (min-width: 1025px) {
.theme-karatb .kb-hero--split .kb-hero-media { aspect-ratio: auto; height: clamp(340px, 32vw, 460px); }
.theme-karatb .kb-hero--split .kb-hero-title { font-size: clamp(30px, 2.8vw, 42px); line-height: 1.3; }
}
/* 2026-10-15：「商品介紹」在選單右邊，下拉（兩欄＋第三層往右彈出）會超出畫面右緣，整頁可以左右捲。
右邊兩個選單項的下拉改靠右對齊、第三層往左彈出。 */
@media (min-width: 1025px) {
.theme-karatb .hz-nav .nav-list > .nav-item:nth-last-child(-n+2) > .nav-sub { left: auto; right: 0; }
.theme-karatb .hz-nav .nav-list > .nav-item:nth-last-child(-n+2) .nav-sub .nav-sub { left: auto; right: 100%; }
}
/* ==== 文章「LINE 官方帳號」專用（.hc-line，hong-c 自己的版型，只作用在該文章內容） ==== */
.theme-karatb .hc-line { --hc-line: #06c755; --hc-line-deep: #04a244; max-width: 44em; }
.theme-karatb .hc-line-lead { font-size: 1.125rem; line-height: 1.75; margin: 0 0 1.8em; }
.theme-karatb .hc-line-join { display: flex; align-items: center; gap: 2rem; padding: 1.6rem 1.8rem; margin: 0 0 2.4em; background: #effbf3; border-radius: 12px; }
.theme-karatb .hc-line-join img { flex: 0 0 auto; width: 198px; height: 198px; background: #fff; padding: 10px; border-radius: 8px; }
.theme-karatb .hc-line-join h2 { margin: 0 0 .6em; font-size: 1.375rem; line-height: 1.35; }
.theme-karatb .hc-line-join p { margin: 0 0 .8em; line-height: 1.75; }
.theme-karatb .hc-line-btn { display: inline-block; padding: .7em 1.6em; background: var(--hc-line); color: #fff !important; font-weight: 700; border-radius: 999px; text-decoration: none; }
.theme-karatb .hc-line-btn:hover, .theme-karatb .hc-line-btn:focus-visible { background: var(--hc-line-deep); }
.theme-karatb .hc-line-tel { margin: 0; font-size: 1rem; }
.theme-karatb .hc-line h2 { margin: 2em 0 .7em; font-size: 1.375rem; line-height: 1.35; }
.theme-karatb .hc-line-list, .theme-karatb .hc-line-steps { padding-left: 1.4em; line-height: 1.8; }
.theme-karatb .hc-line-list li, .theme-karatb .hc-line-steps li { margin-bottom: .5em; }
.theme-karatb .hc-line-note { margin-top: 2em; color: #555; }
@media (max-width: 640px) {
.theme-karatb .hc-line-join { flex-direction: column; align-items: flex-start; gap: 1.2rem; padding: 1.3rem; }
}
/* ==== 商品頁桌機：規格表（材質／軸…）上移到商品名稱下面，補右欄的空白（hong-c 專用，只作用在 .theme-karatb） ====
做法：pd-top／pd-desc 用 display:contents 讓它們的子層直接參與 .pd-wrap 的格線；
左欄圖片跨兩列，右欄第一列＝標題＋料號，第二列＝.legacy-short（簡短規格表）；其餘內容整排鋪滿。 */
@media (min-width: 761px) {
.theme-karatb .pd-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(28px, 4vw, 56px); align-items: start; }
.theme-karatb .pd-wrap > * { grid-column: 1 / -1; }
.theme-karatb .pd-wrap > .pd-top, .theme-karatb .pd-wrap > .pd-desc { display: contents; }
.theme-karatb .pd-wrap .pd-media { grid-column: 1; grid-row: 1 / span 2; }
.theme-karatb .pd-wrap .pd-info { grid-column: 2; grid-row: 1; }
.theme-karatb .pd-wrap .pd-desc > * { grid-column: 1 / -1; }
.theme-karatb .pd-wrap .pd-desc > .legacy-short { grid-column: 2; grid-row: 2; align-self: start; }
}
/* 商品頁主圖加線框（hong-c；上面 .pd-main-img 有 border:0 !important，所以這裡也要 !important 才蓋得過） */
.theme-karatb .pd-wrap .pd-main-img { border: 1px solid var(--kb-line) !important; border-radius: 6px; padding: 16px; box-sizing: border-box; object-position: center; }
@media (min-width: 761px) { .theme-karatb .pd-wrap .pd-media { margin-bottom: 32px; } }
/* ==== 「關於虹荃」頁（.hc-about，沿用 .hc-line 的字級與版寬；聯絡資訊用帳目式列表，只有列與列之間的細線） ==== */
.theme-karatb .hc-about .hc-about-cats { list-style: none; padding-left: 0; }
.theme-karatb .hc-about .hc-about-cats li { padding: .7em 0; border-bottom: 1px solid var(--kb-line); margin: 0; }
.theme-karatb .hc-about .hc-about-cats li:first-child { border-top: 1px solid var(--kb-line); }
.theme-karatb .hc-about-info { margin: 0 0 1em; }
.theme-karatb .hc-about-info > div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 1em; padding: .75em 0; border-bottom: 1px solid var(--kb-line); }
.theme-karatb .hc-about-info > div:first-child { border-top: 1px solid var(--kb-line); }
.theme-karatb .hc-about-info dt { font-weight: 700; color: var(--kb-ink); }
.theme-karatb .hc-about-info dd { margin: 0; line-height: 1.75; }
@media (max-width: 640px) { .theme-karatb .hc-about-info > div { grid-template-columns: 5.5em minmax(0, 1fr); gap: .6em; } }
/* 最上面的公告（內容在後台「頁首設定 › 公告條」，一行一則；上下輪播，左右跟頁面內容同寬內縮）。
⚠️ 全站有一條 animation:none !important，所以這裡用 transition＋小段 JS（_header.php），不用 CSS 動畫。 */
.theme-karatb .hz-marquee { background: var(--kb-dark-2); color: #fff; font-size: var(--hc-bar-fs, 1rem); position: relative; } /* 字級後台可分桌機／手機設（2026-10-20） */
@media (max-width: 768px) { .theme-karatb .hz-marquee { font-size: var(--hc-bar-fs-m, .8125rem); } }
.theme-karatb .hz-marquee--closable .hz-ticker { padding-right: 2.5rem; }
.theme-karatb .hz-marquee-x { position: absolute; top: 50%; right: .5rem; transform: translateY(-50%); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .6; font-family: inherit; }
.theme-karatb .hz-marquee-x:hover { opacity: 1; background: rgba(255, 255, 255, .18); }
.theme-karatb .hz-ticker { position: relative; height: 2.75rem; overflow: hidden; }
.theme-karatb .hz-ticker-item { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.4; transform: translateY(100%); opacity: 0; transition: transform .6s ease, opacity .6s ease; }
.theme-karatb .hz-ticker-item.is-on { transform: none; opacity: 1; }
.theme-karatb .hz-ticker-item.is-out { transform: translateY(-100%); opacity: 0; }
.theme-karatb .hz-ticker-item.is-reset { transition: none; }
.theme-karatb .hz-ticker-item:first-child:last-child { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .theme-karatb .hz-ticker-item { transition: none; } }
/* 靜態文字公告條（後台「網站公告」選靜態文字）：第一則靠左、其餘靠右；窄螢幕折行 */
.theme-karatb .hz-static { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; min-height: 2.75rem; padding: .5rem 0; line-height: 1.5; }
.theme-karatb .hz-static-item--end { margin-left: auto; }
.theme-karatb .hz-marquee--text.hz-marquee--closable .hz-static { padding-right: 2.5rem; }
/* 主視覺每張各自的文字（hero 的 slide_copy）：[hidden] 要明確藏起來；非第一張不吃進場動畫（它們一開始是藏著的，進場旗標不會加） */
.theme-karatb .kb-hero-copy-in[hidden] { display: none; }
.kb-reveal .theme-karatb .kb-hero-copy-in[data-slide]:not([data-slide="0"]) { opacity: 1; transform: none; }
/* 關於虹荃改版（太空洞）：版寬放開、左文右圖開頭、三張主力產品圖、標題在左內容在右的對開區塊（用留白與列線分段，不做卡片） */
.theme-karatb .hc-about { max-width: none; }
.theme-karatb .hc-about-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-bottom: clamp(32px, 5vw, 64px); }
.theme-karatb .hc-about-intro h1 { margin: 0 0 .6em; font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); line-height: 1.25; }
.theme-karatb .hc-about-intro .hc-line-lead { margin: 0 0 1.2em; max-width: 28em; }
.theme-karatb .hc-about-intro img, .theme-karatb .hc-about-strip img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; }
.theme-karatb .hc-about-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); margin-bottom: clamp(32px, 5vw, 64px); }
.theme-karatb .hc-about-strip a { display: block; color: inherit; text-decoration: none; }
.theme-karatb .hc-about-strip span { display: block; margin-top: .7em; font-size: 1.0625rem; font-weight: 700; }
.theme-karatb .hc-about-strip a:hover span { color: var(--kb-red-ink); }
.theme-karatb .hc-about-sec { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 5vw, 72px); padding: clamp(28px, 4vw, 48px) 0; border-top: 1px solid var(--kb-line); }
.theme-karatb .hc-about-sec > h2 { margin: 0; }
.theme-karatb .hc-about-sec p:last-child, .theme-karatb .hc-about-sec dl { margin-bottom: 0; }
@media (max-width: 860px) {
.theme-karatb .hc-about-intro, .theme-karatb .hc-about-sec { grid-template-columns: minmax(0, 1fr); }
.theme-karatb .hc-about-intro img { order: -1; }
}
@media (max-width: 560px) { .theme-karatb .hc-about-strip { grid-template-columns: minmax(0, 1fr); } }
/* 商品卡上標題下面那行分類名稱（例：「H類 可調式把手(Adjustable handle)」）老大 2026-10-19：多餘。左欄已經有分類，只在 hong-c 隱藏。 */
.theme-karatb .product-card .product-cats { display: none; }
/* 商品的標籤（例「首頁精選」）是後台內部用的分群，不適合給訪客看——hong-c 商品頁、列表都不顯示（老大 2026-10-19） */
.theme-karatb .cms-tags { display: none; }
/* 商品頁「詢問這件商品」按鈕用品牌紅（預設會吃到藍色強調色，跟網站不搭）。LINE 詢問維持 LINE 綠。 */
.theme-karatb .pd-extras--ask .pd-ask--btn { background: var(--kb-red); border-color: var(--kb-red); color: #fff; }
.theme-karatb .pd-extras--ask .pd-ask--btn:hover { background: var(--kb-red-ink); border-color: var(--kb-red-ink); }
/* 側邊直排社群用彩色（老大 2026-10-19：「用彩色」）：預設是淺灰底、滑過才變品牌色；hong-c 平常就用各平台品牌色＋白圖示。
--si-brand 由 SocialIcons::badge 帶進來；電話沒有品牌色，用網站品牌紅。 */
.theme-karatb .cms-social-stack__item .cms-social-badge,
.theme-karatb .cms-social-stack__item .cms-si { background: var(--si-brand, var(--kb-red)) !important; color: #fff !important; }
.theme-karatb:not(.theme-karatc) .cms-social-stack__item[href^="tel:"] .cms-social-badge,
.theme-karatb:not(.theme-karatc) .cms-social-stack__item[href^="tel:"] .cms-si { background: var(--kb-red) !important; }
/* ==== 聯絡我們頁排版（老大 2026-10-19：「太醜，改成跟 quickstep 聯絡頁一樣的排版方式」）====
左：標題＋副標＋公司資訊（帳目式：只有列與列之間的細線）；右：表單放在淺灰面板；地圖在左下。
原本第一個文字區塊會被當成「深色頁首帶」，這頁不要。只作用在 body.kb-page-contact（hong-c 自己的頁面）。 */
.theme-karatb.kb-page-contact #wsite-content {
display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 72px); align-items: start;
max-width: calc(var(--kb-maxw) + var(--kb-gut) * 2); margin: 0 auto; padding: 0 var(--kb-gut) clamp(40px, 6vw, 80px);
}
.theme-karatb.kb-page-contact #wsite-content > .block { background: none !important; background-image: none !important; padding: 0 !important; margin: 0; border: 0; min-height: 0; } /* 水平／頂部原本的「深色頁首帶」規則權重高，這頁要蓋掉 */
.theme-karatb.kb-page-contact #wsite-content > .block .wrap { max-width: none; padding: 0; margin: 0; }
.theme-karatb.kb-page-contact #wsite-content > .block-text { grid-column: 1; grid-row: 1; color: var(--kb-ink) !important; }
.theme-karatb.kb-page-contact #wsite-content > .block-text h1, .theme-karatb.kb-page-contact #wsite-content > .block-text h3, .theme-karatb.kb-page-contact #wsite-content > .block-text p, .theme-karatb.kb-page-contact #wsite-content > .block-text td { color: var(--kb-ink) !important; }
.theme-karatb.kb-page-contact #wsite-content > .block-text .wrap > p:first-child, .theme-karatb.kb-page-contact #wsite-content > .block-text table + p, .theme-karatb.kb-page-contact #wsite-content > .block-text th { color: #5b6168 !important; }
.theme-karatb.kb-page-contact #wsite-content > .block-text a { color: var(--kb-red-ink) !important; text-decoration: none; }
.theme-karatb.kb-page-contact #wsite-content > .block-text a:hover { text-decoration: underline; }
.theme-karatb.kb-page-contact #wsite-content > .block-map { grid-column: 1; grid-row: 2; margin-top: clamp(28px, 4vw, 48px); }
.theme-karatb.kb-page-contact #wsite-content > .block-map iframe { display: block; width: 100%; height: 320px; border-radius: 6px; }
.theme-karatb.kb-page-contact #wsite-content > .block-form { grid-column: 2; grid-row: 1 / span 2; background: var(--kb-stone) !important; border-radius: 6px; padding: clamp(22px, 3vw, 40px) !important; }
.theme-karatb.kb-page-contact main h1 { text-align: left !important; margin: 0 0 .3em !important; padding: clamp(32px, 5vw, 64px) 0 0 !important; font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem) !important; line-height: 1.25; color: var(--kb-ink); }
.theme-karatb.kb-page-contact main h1::before, .theme-karatb.kb-page-contact main h1::after { display: none !important; }
.theme-karatb.kb-page-contact .block-text h1 { margin: 0 0 .35em; font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); line-height: 1.25; color: var(--kb-ink); }
.theme-karatb.kb-page-contact .block-text .wrap > p:first-child { margin: 0 0 1.8em; font-size: 1.0625rem; line-height: 1.75; color: var(--kb-ink-2, #5b6168); max-width: 30em; }
.theme-karatb.kb-page-contact .block-text h3 { margin: 1.4em 0 .4em; font-size: 1.25rem; line-height: 1.4; color: var(--kb-ink); }
.theme-karatb.kb-page-contact .block-text h3 + p { margin: 0 0 1.4em; line-height: 1.75; }
.theme-karatb.kb-page-contact .block-text table { width: 100%; border-collapse: collapse; margin: 0; }
.theme-karatb.kb-page-contact .block-text table th, .theme-karatb.kb-page-contact .block-text table td { padding: .75em 0; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--kb-line); line-height: 1.75; background: none; }
.theme-karatb.kb-page-contact .block-text table tr:first-child th, .theme-karatb.kb-page-contact .block-text table tr:first-child td { border-top: 1px solid var(--kb-line); }
.theme-karatb.kb-page-contact .block-text table th { width: 7em; padding-right: 1em; font-weight: 400; color: var(--kb-ink-2, #5b6168); white-space: nowrap; }
.theme-karatb.kb-page-contact .block-text table + p { margin: 1.4em 0 0; font-size: .9375rem; line-height: 1.7; color: var(--kb-ink-2, #5b6168); }
.theme-karatb.kb-page-contact .block-form h2 { margin: 0 0 1em; font-size: 1.375rem; }
@media (max-width: 860px) {
.theme-karatb.kb-page-contact #wsite-content { grid-template-columns: minmax(0, 1fr); }
.theme-karatb.kb-page-contact #wsite-content > .block-text, .theme-karatb.kb-page-contact #wsite-content > .block-map, .theme-karatb.kb-page-contact #wsite-content > .block-form { grid-column: 1; grid-row: auto; }
.theme-karatb.kb-page-contact #wsite-content > .block-form { margin-top: 32px; }
}