/* 服務項目 = V2-B タニカ清單(11-13 Eric 選)的加工。搬來的樣式在 port/sv-tanica/block.css(權重 = 兩個 #ctp-sv-tanica),
   這支排在它後面載入、用同樣的權重,才蓋得過。 */
#ctp-sv-tanica { scroll-margin-top: 80px; }

/* 滑過哪一列,左邊換那一項的圖(11-13 Eric「hover的時候 左邊有出現對應的圖片」):沒滑過時先放第一項,左欄不空著;
   左欄撐到跟清單一樣高,圖貼底,圖底 = 清單最後一條線 */
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-index__products__support { align-items: stretch; }
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-index__products__support__heading { display: flex; flex-direction: column; }
#ctp-sv-tanica#ctp-sv-tanica .ct-svimg { position: relative; display: block; margin: auto 0 0; align-self: stretch; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #f3f3f3; }
#ctp-sv-tanica#ctp-sv-tanica .ct-svimg img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .6s cubic-bezier(.65, 0, .35, 1), transform 1.2s cubic-bezier(.19, 1, .22, 1); }
#ctp-sv-tanica#ctp-sv-tanica .ct-svimg img.is-cut { object-fit: contain; padding: 8%; box-sizing: border-box; }
#ctp-sv-tanica#ctp-sv-tanica .ct-svimg img.is-on { opacity: 1; transform: none; }
@media (max-width: 767px) { #ctp-sv-tanica#ctp-sv-tanica .ct-svimg { display: none; } }   /* 手機沒有滑過,不放 */

/* 每列尾巴:圓圈細線箭頭(11-13 Eric「現在表格沒有圓圈箭頭按鈕」;原版是黑方塊 + 文字箭頭,換掉)。滑過整列 → 圈變品牌紅實心、箭頭白 */
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-linkrectarrow { padding-right: 5rem; }
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-linklist__link .sv-tanica-linkrectarrow__rect { background: none; width: 44px; height: 44px; top: calc(50% - 22px); overflow: visible; }
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-linkrectarrow__rect .ct-svarw { position: static; display: grid; place-items: center; box-sizing: border-box; width: 44px; height: 44px; border: 1px solid rgba(22, 22, 21, .25); border-radius: 50%; color: #161615; transition: background-color .3s, border-color .3s, color .3s; }
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-linkrectarrow__rect .ct-svarw::before,
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-linkrectarrow__rect .ct-svarw::after { content: none; }
#ctp-sv-tanica#ctp-sv-tanica .ct-svarw .ct-i { width: 18px; height: 18px; }
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-linklist__link:hover .ct-svarw,
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-linklist__link:focus-visible .ct-svarw { border-color: var(--ct-red, #EA2326); background: var(--ct-red, #EA2326); color: #fff; }

/* ══ 11-13 Eric 熱鍵 5 處(標註/20261113-024438)══════════════════════════════
   ①②「對齊圖片左緣」:原版這欄是「小標左上、大標靠右下」(flex 靠右),SERVICE 前面還有小方塊記號 → 全部靠左、拿掉方塊,
       SERVICE、服務項目、圖的左緣同一條線
   ④「第一條線不要」:第一列的上框線拿掉
   ⑤「上緣對齊 服務項目下緣」:清單上緣 = 「服務項目」字的下緣(標題行高改 1,字框 = 字身;下緣扣掉字身內留白約 .06em)
   ③「hover選項要出現對應的圖片」:程式本來就有,Eric 那邊是瀏覽器還在用舊的 ct.js → build.py 幫 css/js 網址加版本號 */
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-index__products__support__heading { align-items: flex-start; justify-content: flex-start; }
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-sectionheading__label { padding-left: 0; }
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-sectionheading__label::before { content: none; }
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-sectionheading--sub .sv-tanica-sectionheading__title { line-height: 1; }
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-linklist__item:first-child { border-top: 0; }
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-index__products__support__list { margin-top: calc(2.6 * var(--ctp-rem) + max(calc(3.6 * var(--ctp-rem)), 10px) * 1.015); }   /* 1.015 = 用 canvas 量字身實際下緣對出來的 */
@media (max-width: 767px) { #ctp-sv-tanica#ctp-sv-tanica .sv-tanica-index__products__support__list { margin-top: 2rem; } }

/* ══ 11-13 全站左右版邊統一(--ct-x 定義在 ct.css 最後):原本這塊自己算 6vw(1440 寬 69px),改讀全站那一組 ══ */
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-index__products__support { width: calc(100% - var(--ct-x) * 2); }

/* ══ 11-13 Eric 熱鍵 3 處(標註/20261113-031725)══════════════════════════════
   ①「和hero遮罩之間 加一條灰色細線」:服務項目最上面、版邊到版邊一條 1px 灰線(跟清單每列的線同一個灰 #ccc),
       線到 SERVICE 字頂 4rem(1645 寬 66px,照他畫的位置);SERVICE 本身不動
   ②「表格寬度」③「空白間距」:照片和清單中間原本只空 26px → 空 7.5rem(1645 寬 123px),清單從那裡開始、右緣照舊停版邊
       (1645 寬清單 651–1548,照他框的 650–1546);左欄標題和照片寬度不動 */
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-index__products__support { position: relative; }
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-index__products__support::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-4rem - 1px); height: 0; border-top: var(--ct-rule); }   /* 11-13 第二輪改用框線畫,見最後一段 */
@media (min-width: 768px) {
  #ctp-sv-tanica#ctp-sv-tanica .sv-tanica-index__products__support__list { flex: 1 1 0; min-width: 0; margin-left: 7.5rem; }
}
@media (max-width: 767px) {
  #ctp-sv-tanica#ctp-sv-tanica .sv-tanica-index__products__support::before { top: calc(-2rem - 1px); }
}

/* ══ 11-13 Eric「縮小」(手機白板底到 SERVICE 空 347px)══════════════════════════════
   根因:port-block.py 搬區塊時把原版程式算好的 --vw:1645px(搬的那台螢幕寬)寫死在外層 style,
   整塊的單位(--ctp-rem = 寬 / 144,手機 / 37.5)永遠照 1645 寬算 → 手機上單位 43.9px(應該 10px),
   上方空白 351px、標題 158px、每列 580–770px 高;桌機 1440 寬也照 1645 的大小沒縮。
   改成跟著螢幕寬(1645 寬跟原本一模一樣)。inline style 要 !important 才蓋得過。 */
#ctp-sv-tanica#ctp-sv-tanica { --vw: 100vw !important; }

/* ══ 11-13 Eric 熱鍵 2 處(標註/20261113-032320)══════════════════════════════
   ①「不該有這個小區塊 應該是區塊間沒接好」:首屏大字「廚房設備領先者/承泰商業」是固定在畫面上的近白色字,
       原站每個區塊都是 position:relative 會蓋過它,搬來的服務項目是 static 蓋不住 → 捲動時大字從白板底下露出一截。改成 relative。
   ②「灰線粗細顏色 對齊下方的表格分隔線」:全站灰線 = 清單分隔線 --ct-rule(1px #ccc,定義在 ct.css);
       上面那條原本是 1px 底色塊,高解析螢幕落在小數位置會畫成 2–3 個像素,比框線畫的清單線粗 → 改用框線。圓圈箭頭的細框也同一個灰 */
#ctp-sv-tanica#ctp-sv-tanica { position: relative; }
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-linklist__item { border-top: var(--ct-rule); }
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-linklist__item:first-child { border-top: 0; }
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-linkrectarrow__rect .ct-svarw { border-color: var(--ct-rule-c); }

/* 11-13 Eric 熱鍵(標註/20261113-032409)「加分隔線」:清單最後一列(專用藥劑零售)底下補一條收尾線,同全站灰線 --ct-rule;
   左欄照片照舊撐到清單底 → 照片底 = 這條線 */
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-linklist__item:last-child { border-bottom: var(--ct-rule); }

/* 11-13 Eric 熱鍵(標註/20261113-035614)「這邊還是有一條線 怎麻回事」:白板底和服務項目交界停在小數像素(1645 寬 1848.5),
   高解析螢幕上那一排像素白板只蓋一部分,後面固定的深色照片透出來變成一條淡灰線。服務項目往上疊 1px 蓋住接縫
   (它是 relative、排在首屏後面,疊在白板上面;那 1px 本來就是白的) */
#ctp-sv-tanica#ctp-sv-tanica { margin-top: -1px; }

/* 11-13 Eric 熱鍵(標註/20261113-043252)「logo改紅色 然後畫得太簡單了 去flaticon下載相對應的」:
   每列前面的圖示換成 Flaticon(build.py SV_ICONS),顏色 = 品牌紅 */
#ctp-sv-tanica#ctp-sv-tanica .ct-svico { color: var(--ct-red, #EA2326); }

/* ══ 11-13 V8 Eric「每個區塊的英文小標加中文大標 統一用現在的服務項目的排法 英文小標用紅色」══
   全頁其他區塊照這塊的排法改(寫在 ct.css 最後,--ct-shr 跟這塊的 --ctp-rem 同一套算法);這塊只改 SERVICE 顏色 + 平板下限 */
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-sectionheading__label { color: var(--ct-red, #EA2326); }
@media (min-width: 768px) {   /* 我加的:平板下限,跟 ct.css 同一組(英文 12、中文 28、中文頂離英文頂 22);清單上緣照舊對「服務項目」字身下緣 */
  #ctp-sv-tanica#ctp-sv-tanica .sv-tanica-sectionheading--sub { padding-top: max(calc(2.6 * var(--ctp-rem)), 22px); }
  #ctp-sv-tanica#ctp-sv-tanica .sv-tanica-sectionheading__label { font-size: max(calc(1.4 * var(--ctp-rem)), 12px); }
  #ctp-sv-tanica#ctp-sv-tanica .sv-tanica-sectionheading--sub .sv-tanica-sectionheading__title { font-size: max(calc(3.6 * var(--ctp-rem)), 28px); }
  #ctp-sv-tanica#ctp-sv-tanica .sv-tanica-index__products__support__list { margin-top: calc(max(calc(2.6 * var(--ctp-rem)), 22px) + max(calc(3.6 * var(--ctp-rem)), 28px) * 1.015); }
}

/* ══ 11-13 V8 英文小標 Inter Tight(試過 Genos,Eric 嫌不好看改回):SERVICE 跟其他區塊同一組(說明在 ct.css 最後一段)══ */
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-sectionheading__label { font-family: var(--ct-en) !important; line-height: 1.43em; }
@media (max-width: 767px) { #ctp-sv-tanica#ctp-sv-tanica .sv-tanica-sectionheading__label { line-height: 1.6em; } }

/* 11-14 V17 實拍會動:滑過「試菜服務」→ 照片上淡入料理冒煙短片(跟換照片同一條淡入曲線);程式在 ct.js「實拍會動」 */
#ctp-sv-tanica#ctp-sv-tanica .ct-svimg .ct-svvid { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04); transition: opacity .6s cubic-bezier(.65, 0, .35, 1), transform 1.2s cubic-bezier(.19, 1, .22, 1); pointer-events: none; }
#ctp-sv-tanica#ctp-sv-tanica .ct-svimg .ct-svvid.is-on { opacity: 1; transform: none; }

/* ══ 11-15 V20 Eric 在「服務項目太白・優化方向」頁勾「包進圓角大框」+「淡背景照片」(參考/服務項目太白/)══
   ① 大框 = 跟產品分類大框同一套:版心寬、淺灰 #f3f3f3、圓角 16;框內留白量字墨 = 6 單位(1645 約 68px),上面扣掉 SERVICE 字頂離字框頂那段(--svp-k × 字級,實測)。
      框頂位置由 ct.js 算(白板大字最下緣 + 區塊間距 --ct-svmt;11-15 V21 白板換字母遮罩後改由 ct-mk.js 算,終點字底 + 區塊間距);框底到「關於我們」那條線 = 關於我們的上內距 = 區塊間距,上下一樣。
      原本服務項目上方那條灰線拿掉(有框就分得開)。手機框內留 20px(同產品分類手機版)。
   ② 淡背景照片 = 產品分類、最新消息用過的同一招:框的左上角放一張灰階淡照片,往右、往下淡出;疊色彩增值(白的地方直接融進灰框,不會出現一塊亮白)。
      圖 = 杯架推進洗碗機(nwbg/glasses.webp,11-15 從洗碗機去背剪影換掉),旋鈕 --svbg-* 在下面。
   ③(我加的)左邊照片框的墊底改白:原本墊底跟大框同一個灰,滑到「專用藥劑零售」那張去背照時,照片框的邊會消失。 */
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-index__products__support {
  --svp: calc(6 * var(--ct-shr)); --svp-k: .29;
  box-sizing: border-box;
  padding: calc(var(--svp) - var(--svp-k) * max(calc(1.4 * var(--ctp-rem)), 12px)) var(--svp) var(--svp);
  background: #f3f3f3; border-radius: 16px; isolation: isolate; }
/* 框頂位置:元件自己有一條 .sv-tanica-ct-svc …support { margin: 0 }(多一個 class 比較強),要寫到一樣強才推得動 */
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-ct-svc .sv-tanica-index__products__support { margin-top: var(--ct-svmt, 0px); }
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-index__products__support::before { content: none; }
#ctp-sv-tanica#ctp-sv-tanica .sv-tanica-index__products__support::after {
  --svbg-op: .15; --svbg-w: 100%; --svbg-x0: 0%; --svbg-y0: 32%; --svbg-py: 49%; --svbg-gray: 1;   /* 11-15 Eric 在 tune-svbg 拉桿定 */
  content: ""; position: absolute; z-index: -1; left: 0; top: 0; width: var(--svbg-w); height: 100%; border-radius: 16px 0 0 0; pointer-events: none;
  /* 11-15 V20 熱鍵(標註/20261115-041129)「底圖換一張」:洗碗機去背剪影 → 杯架推進洗碗機(客戶影片 02 第 12 秒,戴手套的手在操作,最像「服務」;
     最新消息已用倉庫展示間、產品分類已用中央廚房,不重複)。拉桿頁 tune-svbg.html 可以換別張、調淡度和淡出 */
  background: url(img/nwbg/showroom.webp) 50% var(--svbg-py, 50%) / cover no-repeat;   /* 11-15 Eric 拉桿選:倉庫展示間・整排洗碗機 */ filter: grayscale(var(--svbg-gray, 1)); opacity: var(--svbg-op); mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(90deg, #000 var(--svbg-x0), transparent), linear-gradient(180deg, #000 var(--svbg-y0), transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 var(--svbg-x0), transparent), linear-gradient(180deg, #000 var(--svbg-y0), transparent); mask-composite: intersect; }
#ctp-sv-tanica#ctp-sv-tanica .ct-svimg { background: #fff; }
@media (max-width: 767px) {
  #ctp-sv-tanica#ctp-sv-tanica .sv-tanica-index__products__support { --svp: 20px; }
  #ctp-sv-tanica#ctp-sv-tanica .sv-tanica-index__products__support::after { width: 100%; height: 60%; border-radius: 16px 16px 0 0;
    -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent); mask-image: linear-gradient(180deg, #000 20%, transparent); }
}