/* 自動合併（_tools/css_bundle_build.py），請改來源檔再重跑；來源順序：../assets/base.css css/inner.css css/subpage.css css/shop.css css/header.css css/footer.css css/theme-3d.css css/fab.css */
/* ==== ../assets/base.css ==== */
:root{
  /* 品牌色取自商標：天藍與深藍。 */
  --brand:#0267b9; --brand-2:#1e88e5; --brand-d:#014e8e; --sky:#4fc0f0; --sky-2:#a9d9f7;
  --tint:#eaf4ff; --tint-2:#f5f9ff; --white:#fff;
  --ink:#0f2747; --ink-2:#36506f; --ink-3:#5a7291; --line:#d6e4f5;
  --amber:#f59e0b; --amber-d:#d97706;
  --line-g:#06c755; --line-g2:#2ee86e; --line-gd:#04a844; --line-edge:#027a32;
  --r-xl:32px; --r-lg:22px; --r-md:16px; --r-sm:12px;
  --depth-3:0 1px 0 rgba(255,255,255,.95) inset,0 -3px 0 rgba(2,103,185,.06) inset,0 50px 90px -40px rgba(2,103,185,.38),0 22px 40px -22px rgba(15,39,71,.28),0 3px 8px rgba(15,39,71,.06);
  --depth-2:0 1px 0 rgba(255,255,255,.95) inset,0 -2px 0 rgba(15,39,71,.05) inset,0 18px 34px -18px rgba(15,39,71,.26),0 2px 6px rgba(15,39,71,.07);
  --depth-1:0 1px 0 rgba(255,255,255,.9) inset,0 6px 14px -8px rgba(15,39,71,.2);
  --font:"Microsoft JhengHei","PingFang TC","Noto Sans TC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-h1:clamp(30px,2.75vw,68px); --fs-h2:clamp(24px,1.9vw,46px); --fs-h3:clamp(19px,1.05vw,26px);
  --fs-body:clamp(17px,.82vw,20px); --fs-nav:clamp(17px,.78vw,19px); --fs-small:16px;
  --gap:clamp(16px,1.25vw,28px); --sec-y:clamp(56px,5.2vw,120px);
}
*{box-sizing:border-box}
html{scroll-padding-top:200px}
body{margin:0;color:var(--ink);font-family:var(--font);font-size:var(--fs-body);line-height:1.75;background:radial-gradient(ellipse at 100% 0,rgba(79,192,240,.11),transparent 42%),radial-gradient(ellipse at 0 100%,rgba(2,103,185,.06),transparent 40%),var(--tint-2)}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
figure,p,h1,h2,h3,ul{margin:0}
h1,h2,h3{color:var(--ink);font-weight:800;line-height:1.3;overflow-wrap:anywhere}
h1{font-size:var(--fs-h1);letter-spacing:.025em}
h2{font-size:var(--fs-h2);letter-spacing:.015em}
h3{font-size:var(--fs-h3)}
p{color:var(--ink-2)}
ul{list-style:none;padding:0}
small{font-size:var(--fs-small)}
[hidden]{display:none}
:focus-visible{outline:3px solid var(--brand);outline-offset:5px}
.band{width:min(88%,2200px);margin-inline:auto}
main>section{padding-block:calc(var(--sec-y)/2);scroll-margin-top:20px}
main>section:first-child{padding-top:clamp(36px,3.2vw,76px)}
main>section:last-child{padding-bottom:var(--sec-y)}
.btn{--button-edge:var(--brand-d);display:inline-flex;align-items:center;justify-content:center;gap:10px;flex-shrink:0;max-width:100%;height:56px;padding:3px 22px 0;border:1px solid rgba(2,103,185,.12);border-bottom:4px solid var(--button-edge);border-radius:14px;background:linear-gradient(var(--brand-2),var(--brand));color:var(--white);font-size:19px;font-weight:800;line-height:1.2;text-align:center;text-decoration:none;white-space:nowrap;box-shadow:var(--depth-1),0 8px 20px -10px rgba(2,103,185,.5);transition:transform 160ms,box-shadow 160ms}
.btn:hover,.chip--link:hover,.line-fab:hover{transform:translateY(-2px)}
.btn:active,.chip--link:active,.line-fab:active{transform:translateY(2px)}
.btn--line{--button-edge:var(--line-edge);background:linear-gradient(var(--line-g2),var(--line-g) 50%,var(--line-gd));box-shadow:var(--depth-1),0 8px 22px -10px rgba(6,199,85,.55)}
.btn--quote{--button-edge:var(--amber-d);background:linear-gradient(#ffd27b,var(--amber));color:var(--ink);box-shadow:var(--depth-1),0 8px 22px -10px rgba(245,158,11,.5)}
.btn--brand{background:linear-gradient(var(--brand-2),var(--brand))}
.btn--ghost{--button-edge:var(--line);background:linear-gradient(var(--white),var(--tint));color:var(--brand-d);border-top-color:var(--line);border-inline-color:var(--line);box-shadow:var(--depth-1),0 7px 18px -12px rgba(2,103,185,.35)}
.btn--lg{height:64px;padding-inline:30px}
.button-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);align-items:stretch}
.cards--four{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards>*{min-width:0}
.card{position:relative;display:flex;flex-direction:column;gap:18px;min-width:0;padding:clamp(24px,1.8vw,40px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);box-shadow:var(--depth-2)}
.card::before{position:absolute;content:"";height:6px;inset:0 18px auto;border-radius:0 0 6px 6px;background:linear-gradient(90deg,var(--brand),var(--sky))}
.card>:last-child{margin-top:auto}
.card>.btn{align-self:flex-start}
.stage{position:relative;isolation:isolate;min-width:0;border:1px solid rgba(214,228,245,.8);border-radius:var(--r-xl);background:radial-gradient(ellipse at 100% 100%,rgba(79,192,240,.24),transparent 52%),linear-gradient(145deg,var(--white),var(--tint));box-shadow:var(--depth-3)}
.scene-img{width:100%;height:auto;mix-blend-mode:multiply;border-radius:inherit}
.note-sim{position:absolute;right:18px;bottom:18px;padding:4px 12px;border-radius:50px;background:var(--white);color:var(--ink-3);font-size:16px;line-height:1.5}
.scene-item{display:flex;flex-direction:column;gap:20px;min-width:0}
.scene-item>h3{padding-inline:6px}
.scene-item .stage{margin-bottom:6px}
.stand{--stand-width:440px;display:flex;flex-direction:column;align-items:center;min-width:0;margin:0;padding:20px 8px 0}
.stand--lg{--stand-width:600px}
.stand--sm{--stand-width:320px}
.stand__photo{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:center;width:min(86%,var(--stand-width));height:clamp(230px,19vw,410px);margin-bottom:-24px;mix-blend-mode:multiply}
.stand__photo img{position:relative;z-index:1;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;mix-blend-mode:multiply;filter:brightness(1.035) contrast(1.06)}
.stand__photo::after{position:absolute;content:"";z-index:0;bottom:-14px;left:17%;width:66%;height:32px;background:radial-gradient(ellipse,rgba(15,39,71,.25),rgba(15,39,71,.07) 45%,transparent 72%)}
.stand__base{position:relative;isolation:isolate;width:min(94%,calc(var(--stand-width) + 60px));aspect-ratio:100/18;border-radius:50%;background:linear-gradient(90deg,#a9cdeb,#d9eafb 45%,#a1c8e9);box-shadow:0 22px 20px -18px rgba(15,39,71,.35)}
.stand__base::before{position:absolute;content:"";inset:0 0 12px;border-radius:50%;background:linear-gradient(155deg,var(--white),var(--tint) 68%,var(--sky-2));box-shadow:0 2px 0 rgba(255,255,255,.9) inset}
.stand__base::after{position:absolute;content:"";z-index:-1;inset:50% -4% -22%;border-radius:50%;background:radial-gradient(ellipse,rgba(15,39,71,.16),transparent 70%)}
.stand figcaption{width:100%;margin-top:28px;color:var(--ink);font-weight:700;text-align:center;overflow-wrap:anywhere}
.frame{min-width:0;margin:8px;border:10px solid var(--white);border-radius:var(--r-md);background:var(--white);box-shadow:var(--depth-2)}
.frame img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:6px;background:var(--tint)}
.frame figcaption{padding:16px 8px 8px;color:var(--ink-2);font-weight:700}
.frame--tilt-l{transform:perspective(1400px) rotateY(5deg)}
.frame--tilt-r{transform:perspective(1400px) rotateY(-5deg)}
.frame-slot{display:flex;min-width:0}
.frame-slot .frame{flex:1}
.num3d{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:72px;height:72px;padding-top:5px;border-bottom:5px solid var(--brand-d);border-radius:20px;background:linear-gradient(145deg,var(--brand-2),var(--brand));color:var(--white);font-size:30px;font-weight:800;line-height:1;box-shadow:var(--depth-1),0 10px 18px -12px rgba(2,103,185,.5)}
.icon3d{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:112px;height:112px;padding:8px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,var(--white),var(--tint));box-shadow:var(--depth-1)}
.icon3d img{width:100%;height:auto;mix-blend-mode:multiply}
.sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:32px}
.sec-head__eyebrow{display:flex;align-items:center;gap:12px;color:var(--brand-d);font-size:var(--fs-small);font-weight:800;letter-spacing:.08em}
.sec-head__eyebrow::before{content:"";width:8px;height:8px;flex-shrink:0;border-radius:2px;background:var(--brand);box-shadow:0 0 0 5px rgba(79,192,240,.13),0 0 14px rgba(2,103,185,.25)}
.sec-head--center{align-items:center;text-align:center}
.sec-head>p:last-child{max-width:64ch}
.chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:7px 16px;border:1px solid var(--line);border-radius:50px;background:linear-gradient(var(--white),var(--tint));color:var(--ink-2);font-size:16px;font-weight:700;line-height:1.5;box-shadow:var(--depth-1)}
.chip--link{min-height:48px;border-bottom:4px solid var(--line);color:var(--brand-d);text-decoration:none;transition:transform 160ms}
.chip-row{display:flex;flex-wrap:wrap;gap:12px}
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:clamp(28px,2.7vw,60px);border:1px solid var(--line);border-radius:var(--r-xl);background:linear-gradient(120deg,var(--tint),var(--white));box-shadow:var(--depth-2)}
.cta-band__copy{min-width:0;flex:1}
.cta-band__copy p{margin-top:14px;max-width:50ch}
.cta-band__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:14px}
.site-header{position:sticky;top:0;z-index:40;background:var(--white);box-shadow:0 10px 24px -20px rgba(15,39,71,.3)}
.topbar{background:var(--tint);border-bottom:1px solid var(--line);font-size:16px}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:10px 22px;padding-block:10px}
.topbar__inner p{flex:1;line-height:1.5}
.topbar__inner .btn{height:56px;padding-inline:12px;font-size:16px}
.topbar__phones{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.site-nav__inner{display:flex;align-items:center;gap:clamp(12px,1vw,24px);padding-block:16px}
.site-brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.site-brand img{width:64px;height:auto}
.site-brand__name{color:var(--ink);font-size:clamp(20px,1.1vw,28px);font-weight:800;line-height:1.25;white-space:nowrap}
.primary-nav{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-width:0}
.nav-link{height:56px;padding-inline:clamp(8px,.65vw,16px);font-size:var(--fs-nav)}
.header-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.header-actions .btn{padding-inline:16px}
.menu-toggle{display:none}
.menu-toggle__lines{display:flex;flex-direction:column;gap:4px;width:20px}
.menu-toggle__lines span{display:block;width:20px;height:2px;border-radius:2px;background:currentColor}
.mobile-menu{display:none}
.mobile-menu[hidden]{display:none}
.menu-open .line-fab{visibility:hidden}
.site-footer{padding-block:56px 28px;background:var(--tint);border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr .85fr 1fr;gap:clamp(24px,3vw,72px)}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0}
.footer-col h2,.footer-col h3{font-size:var(--fs-h3)}
.footer-col p,.footer-col li{font-size:var(--fs-small);color:var(--ink-2);overflow-wrap:anywhere}
.footer-col ul{display:flex;flex-direction:column;gap:10px}
.footer-link{display:inline-block;max-width:100%;text-decoration:none;color:var(--ink-2);transition:color 160ms,transform 160ms}
.footer-link:hover,.article-body a:hover{color:var(--brand);transform:translateX(3px)}
.footer-col .btn{max-width:100%}
.footer-actions{display:flex;flex-direction:column;align-items:stretch;gap:14px}
.footer-bottom{margin-top:40px;padding-top:22px;padding-right:84px;border-top:1px solid var(--line);color:var(--ink-3);font-size:var(--fs-small)}
.article-body a{display:inline-block;color:var(--brand-d);text-decoration:none;transition:color 160ms,transform 160ms}
.line-fab{position:fixed;bottom:20px;right:20px;z-index:50;border-radius:50px;padding:14px 22px;background:linear-gradient(var(--line-g2),var(--line-g) 50%,var(--line-gd));box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -2px 0 rgba(0,0,0,.15) inset,0 4px 0 var(--line-edge),0 10px 22px -6px rgba(6,199,85,.55);color:#fff;font-weight:800;letter-spacing:1px;text-decoration:none;transition:transform 160ms}
/* 展示頁只排列共用元件，不另造第二套樣式。 */
.kit-intro{display:grid;grid-template-columns:.75fr 1.25fr;align-items:center;gap:clamp(28px,4vw,90px)}
.kit-intro .sec-head{margin-bottom:24px}
.kit-intro .stage{max-width:100%}
.kit-demo{display:flex;flex-direction:column;gap:28px}
.kit-service-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px}
.kit-service-top .icon3d{width:96px;height:96px}
.kit-decorations .stage{padding:16px}
.kit-decorations img{max-width:500px;margin-inline:auto}
@media(max-width:1199px){
  .band{width:auto;margin-inline:24px}
  .cards--four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .primary-nav{display:none}
  .site-brand{margin-right:auto}
  .menu-toggle{display:inline-flex;gap:10px}
  .topbar__inner{flex-wrap:wrap;justify-content:flex-start}
  .topbar__inner p{flex-basis:100%}
  .mobile-menu.is-open{position:fixed;inset:0;z-index:100;display:block;overflow-y:auto;background:var(--white);overscroll-behavior:contain}
  .mobile-menu__inner{display:flex;flex-direction:column;gap:24px;padding-block:24px 40px;min-height:100dvh}
  .mobile-menu__inner>[data-menu-close]{align-self:flex-end}
  .mobile-menu__head{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .mobile-menu__nav{display:grid;gap:16px}
  .mobile-menu__nav .btn{width:100%}
  .mobile-menu__actions{display:flex;flex-wrap:wrap;gap:14px}
  body.menu-open{overflow:hidden}
  .cta-band{align-items:flex-start;flex-direction:column}
  .cta-band__actions{justify-content:flex-start}
  .footer-grid{grid-template-columns:1.2fr 1fr;gap:40px}
}
@media(max-width:900px){
  .cards,.cards--four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kit-intro{grid-template-columns:1fr;gap:28px}
  .kit-intro .stage{width:100%;max-width:760px;margin-inline:auto}
  .header-actions .btn{font-size:17px;padding-inline:12px}
  .site-nav__inner{flex-wrap:wrap}
  .header-actions{order:3;flex-basis:100%;justify-content:flex-end}
  .topbar__inner{gap:8px}
  .stand__photo{height:260px}
}
@media(max-width:600px){
  :root{--fs-small:15px}
  html{scroll-padding-top:100px}
  .band{margin-inline:16px}
  main>section{padding-block:28px}
  .btn,.btn--lg{height:52px;padding-inline:18px;font-size:19px}
  .button-row{gap:14px}
  .cards,.cards--four,.cards--two{grid-template-columns:1fr}
  .card{padding:26px 22px}
  .sec-head{gap:10px;margin-bottom:24px}
  .stage{border-radius:24px}
  .note-sim{right:12px;bottom:12px}
  .stand__photo{height:260px;margin-bottom:-18px}
  .stand__base::before{bottom:9px}
  .stand figcaption{margin-top:24px}
  .frame{margin:8px}
  .cta-band{padding:26px 22px;gap:24px}
  .cta-band__actions{flex-direction:column;align-items:stretch;width:100%}
  .cta-band__actions .btn--line{height:64px}
  .site-nav{position:relative}
  .site-nav__inner{gap:14px;padding-block:14px}
  .site-brand__name{font-size:22px}
  .site-brand{gap:8px}
  .topbar__inner{padding-block:12px}
  .topbar__phones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
  .topbar__inner .btn{height:52px;padding-inline:10px;font-size:15px;white-space:normal;gap:4px}
  .topbar__phone{flex:1;min-width:0}
  .topbar__inner p{font-size:15px;line-height:1.6}
  .header-actions{justify-content:stretch;gap:10px}
  .header-actions .btn{flex:1;padding-inline:12px;font-size:17px}
  .menu-toggle{margin-left:auto;padding-inline:12px;font-size:17px}
  .mobile-menu__actions{display:grid;grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:36px}
  .site-footer{padding-top:40px}
  .footer-col{gap:16px}
  .footer-bottom{padding-right:64px}
  .line-fab{display:flex;align-items:center;justify-content:center;width:60px;height:60px;padding:0;border-radius:50%;font-size:16px}
  .kit-intro{gap:28px}
  .kit-intro .button-row .btn{flex:1}
}
@media(min-width:1921px){
  .site-nav__inner{padding-block:22px}
  .primary-nav{gap:14px}
  .nav-link{padding-inline:22px}
  .card{gap:22px}
  .stand__photo{height:380px}
}

/* ==== css/inner.css ==== */
/* 多頁網站共用骨架：導覽目前頁、商標連結、分頁統一頁首（麵包屑＋標題＋一句說明＋立體圖）、分頁區塊節奏 */

/* 商標整塊連回首頁，不要底線 */
.site-brand{text-decoration:none}

/* 導覽列：目前所在頁＝按下去的實心藍鈕 */

/* 分頁統一頁首 */
.page-hero{padding-top:clamp(24px,2.2vw,48px)}
main>section.page-hero:first-child{padding-top:clamp(24px,2.2vw,48px);padding-bottom:0}
.page-hero__card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(20px,2vw,48px);
  min-height:clamp(200px,15vw,300px);
  padding:clamp(28px,2.6vw,56px) clamp(28px,3vw,64px);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:radial-gradient(ellipse at 100% 100%,rgba(79,192,240,.20),transparent 55%),linear-gradient(120deg,var(--white),var(--tint));
  box-shadow:var(--depth-2);
  overflow:hidden;
}
.page-hero__card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background:linear-gradient(90deg,var(--brand),var(--sky));
}
.page-hero__copy{display:flex;flex-direction:column;gap:14px;min-width:0}
.page-hero h1{margin:0;font-size:clamp(30px,2.4vw,56px);font-weight:800;line-height:1.25;letter-spacing:.02em;color:var(--ink)}
.page-hero__lead{margin:0;max-width:60ch;color:var(--ink-2);font-size:clamp(17px,.95vw,21px)}
.page-hero__art{display:flex;align-items:center;justify-content:center}
.page-hero__art img{width:clamp(150px,13vw,300px);height:auto;mix-blend-mode:multiply}

/* 麵包屑 */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none;color:var(--ink-3);font-size:16px}
.breadcrumb li{display:inline-flex;align-items:center;gap:8px}
.breadcrumb li+li::before{content:"›";color:var(--ink-3)}
.breadcrumb a{color:var(--brand-d);font-weight:700;text-decoration:none}
.breadcrumb a:not(.btn):hover{text-decoration:underline}
.breadcrumb a.btn,.breadcrumb a.btn:hover{text-decoration:none}
.breadcrumb [aria-current="page"]{color:var(--ink-2)}

/* 分頁內的區塊節奏：比首頁緊一點 */
.page-section{scroll-margin-top:120px}

/* 超寬螢幕：頁首卡不要太高、右側立體圖放大，避免中間一大片空 */
@media(min-width:1921px){
  .page-hero__card{min-height:240px}
  .page-hero__art img{width:clamp(240px,12vw,300px)}
}
@media(max-width:900px){
  .page-hero__card{grid-template-columns:minmax(0,1fr)}
  .page-hero__art{justify-content:flex-start}
  .page-hero__art img{width:140px}
}
@media(max-width:600px){
  .page-hero__card{min-height:0;padding:24px 20px}
  .page-hero__art{display:none}
}

/* ==== css/subpage.css ==== */
/* 次分類共用骨架：沿用原色票及元件，縮短頁首並讓同組連結完整換行。 */
main > section.page-hero--sub:first-child{padding-top:clamp(16px,1.5vw,32px)}
.page-hero--sub .page-hero__card{min-height:0;grid-template-columns:minmax(0,1fr) auto;gap:clamp(16px,2vw,40px);padding:clamp(20px,1.8vw,36px) clamp(20px,2.5vw,48px)}
.page-hero--sub .page-hero__copy{gap:clamp(10px,1vw,16px)}
.page-hero--sub .page-hero__art img{width:clamp(112px,9vw,188px);max-width:100%;height:auto}
.page-hero--sub .breadcrumb a.btn{height:44px;padding:2px 16px 0;font-size:16px}
.subnav{display:flex;flex-wrap:wrap;gap:clamp(10px,1vw,18px);margin-top:clamp(16px,1.5vw,28px)}
.subnav__link{min-height:48px;height:auto;padding-block:10px;text-align:center}
.subnav__link[aria-current="page"]{--button-edge:var(--brand-d);background:linear-gradient(var(--brand-2),var(--brand));color:var(--white);border-color:rgba(1,78,142,.35);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 16px -8px rgba(2,103,185,.55)}
.page-hero--sub + .page-section{padding-top:clamp(28px,3vw,64px)}
/* 移除重複標題後仍保留原段落間距；圖片上限由檔案寬度設定。 */
.page-hero--sub ~ .page-section img{max-width:min(100%,var(--source-width,1536px))}
.page-hero--sub ~ .page-section .sec-head:empty{display:none}
@media(max-width:600px){
  .page-hero--sub .page-hero__card{grid-template-columns:minmax(0,1fr);padding:20px}
  .page-hero--sub .page-hero__art{display:none}
  .subnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .subnav__link{padding-inline:10px;font-size:clamp(16px,3.8vw,19px)}
  .page-hero--sub .breadcrumb{gap:6px;font-size:15px}
  .page-hero--sub .breadcrumb li{gap:6px}
}

/* 產品／場域獨立頁：卡片沿用原展台比例，格線隨可用寬度調整。 */
.subpage-enhanced .products-grid,.subpage-enhanced .subpage-equipment{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(18px,1.6vw,32px)}
.subpage-enhanced .products-grid>.products-card:nth-child(n):nth-last-child(n){grid-column:auto}
.subpage-enhanced .products-card{padding:clamp(20px,1.5vw,32px) clamp(14px,1.2vw,26px);background:var(--tint);gap:0}
.subpage-enhanced .products-card::before{height:4px;background:linear-gradient(90deg,transparent,var(--sky-2),transparent)}
.subpage-enhanced .products-card:hover{border-color:var(--brand);box-shadow:var(--depth-3)}
.subpage-enhanced .products-card>.stand:last-child{margin-top:0}
.subpage-enhanced .products-card .stand{width:100%;padding:0}
/* 照片外層不得建立堆疊層，白底才能融入展台底色。 */
.subpage-enhanced .products-card,.subpage-enhanced .products-card .stand,.subpage-enhanced .products-card .stand__photo{z-index:auto;transform:none;filter:none;opacity:1;isolation:auto}
.subpage-enhanced .products-card .stand__photo{width:min(88%,300px);height:auto;min-height:0;aspect-ratio:1.2;margin-bottom:calc(6px - 8.28%);mix-blend-mode:normal}
.subpage-enhanced .products-card .stand__photo>img{position:absolute;left:var(--l,6%);bottom:var(--b,0%);width:var(--w,88%);max-width:var(--photo-natural-width);height:auto;max-height:none;margin:0;mix-blend-mode:multiply}
.subpage-enhanced .products-card .stand__base{width:92%;max-width:360px}
.subpage-enhanced .products-card .stand figcaption{margin-top:clamp(22px,1.6vw,32px)}
.subpage-enhanced .products-card h3{font-size:clamp(19px,1.3vw,28px);line-height:1.4}
.subpage-enhanced .products-card p{margin-top:10px;font-size:var(--fs-body);font-weight:400;line-height:1.65}
.subpage-enhanced .products-card p span{display:block}

/* 每個做法獨立為一段：左側說明，右側排列對應設備。 */
.subpage-method+.subpage-method{padding-top:0}
.subpage-method+.subpage-method>.band{padding-top:clamp(28px,3vw,64px);border-top:1px solid var(--line)}
.subpage-method__layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr);gap:clamp(24px,3vw,64px);align-items:center}
.subpage-method__intro{margin-bottom:0;align-self:center}
.subpage-method__equipment{min-width:0}
.subpage-method__equipment>h3{margin-bottom:clamp(16px,1.4vw,24px)}
.subpage-method .subpage-equipment{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.subpage-method .subpage-equipment>.products-card:only-child .stand{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:clamp(16px,2vw,40px)}
.subpage-method .subpage-equipment>.products-card:only-child .stand__photo{grid-column:1;grid-row:1;justify-self:center;align-self:end}
.subpage-method .subpage-equipment>.products-card:only-child .stand__base{grid-column:1;grid-row:2;justify-self:center;align-self:start}
.subpage-method .subpage-equipment>.products-card:only-child figcaption{grid-column:2;grid-row:1 / 3;margin-top:0;text-align:left}

/* 場景圖與問題保留原文，設備、案例改為完整圖卡。 */
.subpage-enhanced .subpage-scene__layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,64px)}
.subpage-enhanced .application-visual{display:flex;justify-content:center;aspect-ratio:auto}
.subpage-enhanced .application-visual .scene-img{width:min(100%,560px);height:auto;max-width:800px}
.subpage-enhanced .application-pains .nobr{display:inline;overflow-wrap:anywhere}
.subpage-enhanced .application-pains{margin-top:0}
.subpage-enhanced .subpage-scene-equipment,.subpage-enhanced .subpage-scene-cases{padding-top:0}
/* 常見問題區塊搬到頁面最後（產業應用四頁 2026-10-06）：接在任何內容區塊後面都維持同一個單段間距。 */
.subpage-enhanced .page-section+.application-scene{padding-top:0}
.subpage-case-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(20px,2vw,40px)}
.subpage-case-card{padding:clamp(20px,1.6vw,32px);gap:clamp(20px,1.6vw,32px)}
.subpage-case-card:hover{border-color:var(--brand);box-shadow:var(--depth-3)}
.subpage-case-card__photo{width:min(100%,var(--photo-natural-width));height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-md);align-self:center}
.subpage-case-card>.subpage-case-card__body:last-child{display:grid;gap:12px;margin-top:0}
.subpage-case-card__body>p:last-child{color:var(--ink-2)}
@media(max-width:760px){
  .subpage-method__layout,.subpage-enhanced .subpage-scene__layout{grid-template-columns:minmax(0,1fr)}
  .subpage-enhanced .application-visual .scene-img{width:min(100%,400px)}
  .subpage-method .subpage-equipment>.products-card:only-child .stand{display:flex}
  .subpage-method .subpage-equipment>.products-card:only-child figcaption{margin-top:24px;text-align:center}
}

/* 下載次分類：文件縮圖保留資料原比例與原寬；卡片底部下載鈕對齊。 */
.document-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.document-card{gap:clamp(16px,1.2vw,24px);padding:clamp(20px,1.8vw,32px);background:linear-gradient(170deg,var(--white) 55%,var(--tint-2))}
.document-card__visual{display:flex;align-items:center;justify-content:center;overflow:hidden;aspect-ratio:500/317;border:1px solid var(--line);border-radius:var(--r-md);background:var(--white)}
.document-card__visual img{width:100%;height:auto;object-fit:contain}
.document-card__copy{display:flex;flex-direction:column;gap:8px}
.document-card h2{font-size:var(--fs-h3)}
.document-card__meta{font-size:var(--fs-small);color:var(--ink-3)}
.document-card>.btn{align-self:stretch;width:100%;margin-top:auto}
.app-download-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.app-download-card{gap:clamp(18px,1.5vw,28px);padding:clamp(22px,2.2vw,44px);background:linear-gradient(150deg,var(--white),var(--tint-2))}
.app-download-card h2{font-size:var(--fs-h3)}
.app-download-card__actions{display:flex;flex-wrap:wrap;gap:clamp(12px,1vw,20px);padding-top:8px}
.app-download-card__actions .btn{flex:1 1 150px}

/* 任意張數維持固定欄寬與等高，末列自然置中。 */
.subpage-enhanced .subpage-equipment,.subpage-case-grid,.document-grid,.app-download-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:var(--gap)}
.subpage-enhanced .subpage-equipment>.products-card{flex:0 1 calc((100% - 3 * var(--gap))/4);min-width:min(100%,240px)}
.subpage-method .subpage-equipment>.products-card{flex:0 1 calc((100% - var(--gap))/2)}
.subpage-method .subpage-equipment>.products-card:only-child{flex-basis:100%}
.subpage-case-grid>.subpage-case-card{flex:0 1 calc((100% - var(--gap))/2);min-width:min(100%,340px)}
.document-grid>.document-card{flex:0 1 calc((100% - 2 * var(--gap))/3);min-width:min(100%,300px)}
.app-download-grid>.app-download-card{flex:0 1 calc((100% - var(--gap))/2);min-width:min(100%,380px)}
.subnav{justify-content:center}
.catalog-sync-note{padding:20px 24px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);box-shadow:var(--depth-1);text-align:center;color:var(--ink-2)}
.sitemap-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:var(--gap)}
.sitemap-card{flex:0 1 calc((100% - 2 * var(--gap))/3);min-width:min(100%,290px);padding:clamp(20px,1.8vw,32px)}
.sitemap-card h2{font-size:var(--fs-h3)}
.sitemap-card h2 .btn{width:100%;white-space:normal;height:auto;min-height:52px;padding-block:12px}
.sitemap-card>.sitemap-pages:last-child{margin-top:0}
.sitemap-pages{display:grid;gap:12px}
.sitemap-page-link{display:flex;flex-direction:column;gap:6px;min-height:44px;padding:14px 16px;border:1px solid var(--line);border-bottom:3px solid var(--line);border-radius:var(--r-sm);background:linear-gradient(var(--white),var(--tint-2));box-shadow:var(--depth-1);text-decoration:none}
.sitemap-page-link strong{color:var(--brand-d);font-size:18px}
.sitemap-page-link span{color:var(--ink-2);font-size:16px;line-height:1.75}
.sitemap-page-link:hover{border-color:var(--brand);transform:translateY(-2px)}
.sitemap-utility{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap);margin-top:var(--gap)}
.sitemap-utility>li{flex:0 1 400px}
.sitemap-utility .sitemap-page-link{height:100%}
/* 三欄時卡片數除 3 餘 1（2026-10-05 產品、服務拆開後共 10 張）：最後一張改佔整列、裡面的分頁連結橫排，不讓它落單 */
.sitemap-grid{container:sitemap/inline-size}
@container sitemap (min-width:902px){
  .sitemap-card:last-child:nth-child(3n+1){flex-basis:100%}
  .sitemap-card:last-child:nth-child(3n+1) .sitemap-pages{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .sitemap-card:last-child:nth-child(3n+1) .sitemap-page-link strong{word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
}
@media(max-width:600px){
  .subnav{display:flex}
  .subnav__link{flex:0 1 calc((100% - 10px)/2);white-space:normal}
  .subpage-enhanced .subpage-equipment>.products-card,.subpage-case-grid>.subpage-case-card,.document-grid>.document-card,.app-download-grid>.app-download-card,.sitemap-card{flex-basis:100%}
}

/* 產品資料頁沿用頁首卡；多層分類名稱可完整換行。 */
.shop-page[data-page="category"] #category-main .page-hero__card,
.shop-page[data-page="product"] #product-intro .page-hero__card{grid-template-columns:minmax(0,1fr)}
.shop-page[data-page="category"] #category-error-actions:empty{display:none}
.shop-page[data-page="category"] #category-main .page-hero__lead:empty,
.shop-page[data-page="category"] #category-main [data-sample-notice]:empty{display:none}
.shop-page[data-page="category"] .crumb li,
.shop-page[data-page="product"] .crumb li{min-width:0;max-width:100%;overflow-wrap:anywhere}
.shop-page[data-page="category"] .crumb a,
.shop-page[data-page="product"] .crumb a{height:auto;min-height:40px;white-space:normal;padding-block:8px;line-height:1.5;text-align:left}
.shop-page[data-page="product"] #product-intro .page-hero__card{padding-block:clamp(18px,1.6vw,32px)}
@media(max-width:400px){
  .shop-page[data-page="category"] .subnav__link,
  .shop-page[data-page="product"] .subnav__link{font-size:15px;padding-inline:8px}
}

/* 設備卡張數不固定：5 張排 3＋2；4 張一列放不下時排 2＋2（避免最後一列只剩一張） */
.subpage-enhanced .subpage-equipment:not(.subpage-method *){container-type:inline-size}
.subpage-enhanced .subpage-equipment:not(.subpage-method *):has(>.products-card:nth-child(5):last-child)>.products-card{flex-basis:calc((100% - 2 * var(--gap))/3)}
@container (max-width:1060px){
  .subpage-enhanced .subpage-equipment:not(.subpage-method *):has(>.products-card:nth-child(4):last-child)>.products-card{flex-basis:calc((100% - var(--gap))/2)}
}

/* 建議設備剛好 3 張時，601～759 寬改三張並排（原本 2+1，最後一張落單） */
@media (min-width:601px) and (max-width:759px){.subpage-enhanced .subpage-equipment:has(>.products-card:nth-child(3):last-child)>.products-card{min-width:min(100%,170px);flex-basis:calc((100% - 2 * var(--gap))/3)}}

/* ==== css/shop.css ==== */
/* 選購頁獨立樣式：共用檔保持原狀；所有互動按鈕沿用立體 .btn。 */

/* 新版頁首各頁共用，數字包含空清單的 0。 */

/* 頁首、區塊與可直接閱讀的靜態內容。 */
.shop-page main{overflow-wrap:anywhere}
.shop-page [hidden]{display:none}
.shop-page img{height:auto}
.shop-page .btn{box-sizing:border-box;text-decoration:none}
.shop-page .breadcrumb a.btn{height:44px;padding:2px 16px 0;font-size:16px}
.shop-page .card>:last-child{margin-top:0}
.shop-sample,.shop-sample-notice{width:fit-content;max-width:100%;margin:0;padding:9px 14px;border-radius:10px;background:#edf3f9;color:var(--ink-3);font-size:16px;line-height:1.65}
.shop-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;color:var(--ink-2)}
.shop-toolbar strong{color:var(--ink);font-size:var(--fs-h3)}
.shop-toolbar p,.shop-toolbar span{font-size:16px}








/* 商品卡使用固定照片高度與標題高度，價格及動作在整排同一條線。 */
.shop-grid,.shop-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);align-items:stretch}
.shop-product-card.card{display:grid;grid-row:span 7;grid-template-rows:subgrid;gap:14px;padding:22px 18px;background:linear-gradient(150deg,#fff,#f0f7ff)}
.shop-product-card>.shop-photo-link{grid-row:1}
.shop-product-card>.shop-status{grid-row:2}
.shop-product-card>.shop-product-title{grid-row:3}
.shop-product-card>.shop-chips{grid-row:4}
.shop-product-card>.shop-price{grid-row:5}
.shop-product-card>.shop-card-actions{grid-row:6}
.shop-product-card>.shop-feedback{grid-row:7}
.shop-product-card::before{height:4px;background:linear-gradient(90deg,var(--sky-2),var(--brand-2),var(--sky-2))}
.shop-photo-link{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0;padding:4px 5px 12px;border-radius:16px;background:linear-gradient(150deg,#f7fbff,#e4f0fb);border:1px solid #e1edf8;border-bottom:4px solid #caddef;box-shadow:0 9px 18px -16px rgba(15,39,71,.5);text-decoration:none}
.shop-photo-link:hover{border-color:var(--sky-2)}
.shop-photo-link:active{border-bottom-color:var(--brand)}
.shop-photo{display:flex;align-items:flex-end;justify-content:center;width:100%;height:230px;min-width:0}
.shop-photo img{width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.shop-plinth{width:90%;height:27px;margin-top:-2px;border-radius:50%;border-bottom:7px solid #b9d5ee;background:linear-gradient(150deg,#fff,#d5e7f9);box-shadow:0 12px 13px -10px rgba(15,39,71,.4)}
.shop-status{display:inline-flex;align-items:center;align-self:flex-start;gap:7px;width:fit-content;max-width:100%;padding:5px 12px;border-radius:30px;background:var(--tint);color:var(--brand-d);font-size:16px;font-weight:800;line-height:1.5}
.shop-status::before{content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:currentColor}
.shop-status--buy{color:#18683b;background:#e4f5e9}
.shop-status--quote,.shop-status--pending{color:#885305;background:#fff0d4}
.shop-product-title{height:70px;min-height:70px;font-size:clamp(17px,.95vw,23px);line-height:1.4}
.shop-product-title .btn{display:flex;width:100%;height:70px;padding:5px 10px 2px;border-radius:12px;font-size:inherit;line-height:1.4;text-align:left;justify-content:flex-start;white-space:normal}
.shop-product-title .btn span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shop-chips{display:flex;flex-wrap:wrap;align-content:flex-start;gap:7px;min-height:0}
.shop-chips .chip{height:auto;min-height:30px;padding:4px 9px;border-radius:9px;background:#fff;font-size:16px;line-height:1.45;box-shadow:none}
.shop-price{color:var(--brand-d);font-size:clamp(23px,1.28vw,34px);font-weight:800;line-height:1.3;font-variant-numeric:tabular-nums}
.shop-price small{font-size:16px;font-weight:600}
.shop-card-actions{display:flex;flex-direction:column;gap:12px;margin-top:0}
.shop-product-card .shop-card-actions:last-child{margin-top:0}
.shop-card-actions>.btn{width:100%;height:56px;padding-inline:10px;font-size:17px}
.shop-feedback{margin:0;color:#17673c;font-size:16px;line-height:1.7}
.shop-feedback>.btn{height:44px;margin-top:8px;padding-inline:12px;font-size:16px}
.shop-howto,.shop-howto-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.shop-guide.card{display:grid;grid-template-columns:80px minmax(0,1fr);align-items:start;gap:20px;padding:28px 24px}
.shop-guide>img{width:80px;height:auto;mix-blend-mode:multiply}
.shop-guide>.icon3d{width:80px;height:80px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.shop-guide h3{margin-bottom:10px}
.shop-guide p{font-size:17px}

/* 商品主區：照片不建立隔離層，白底直接與展台底色相融。 */
.shop-product-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,3vw,76px);align-items:stretch;margin-top:28px}
.shop-product-visual{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:clamp(26px,3vw,70px)}
.shop-product-photo{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:100%;height:clamp(360px,30vw,650px)}
.shop-product-photo img{width:auto;max-width:100%;height:auto;max-height:calc(100% - 64px);object-fit:contain;mix-blend-mode:multiply}
.shop-product-photo>.shop-plinth{flex-shrink:0}
.shop-product-visual .shop-plinth{width:92%;height:clamp(35px,3vw,64px);border-bottom-width:11px;margin-top:-2px}
.shop-dimensions{margin-top:26px;color:var(--ink-2);font-size:17px;text-align:center}
.shop-purchase.card{gap:22px;padding:clamp(26px,2.5vw,56px)}
.shop-product-heading{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.shop-purchase h1{font-size:clamp(30px,2vw,48px);line-height:1.35}
.shop-purchase .shop-price{font-size:clamp(30px,2vw,48px)}
.shop-purchase .shop-price small{display:block;margin-top:10px;color:var(--ink-3);font-size:16px;font-weight:400;line-height:1.6}
.shop-price-note{margin-top:8px;color:var(--ink-3);font-size:16px}
.shop-option-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:12px;margin-top:10px}
.shop-choice{position:relative;display:flex;align-items:center;gap:10px;min-width:0;height:64px;box-sizing:border-box;padding:8px 14px;border:1px solid var(--line);border-bottom:4px solid #c6dbf0;border-radius:13px;background:linear-gradient(#fff,#f1f7ff);box-shadow:var(--depth-1);color:var(--ink-2);font-size:17px;font-weight:700;line-height:1.4;cursor:pointer}
.shop-choice input{flex:0 0 auto;accent-color:var(--brand);width:19px;height:19px;margin:0}
.shop-choice:has(input:checked){border-color:var(--brand);border-bottom-color:var(--brand-d);background:#e8f3ff;color:var(--brand-d);box-shadow:0 0 0 1px var(--brand),var(--depth-1)}
.shop-choice:has(input:checked)::after{content:"✓";flex:0 0 auto;margin-left:auto;color:var(--brand);font-size:18px;font-weight:800}
.shop-choice:has(input:focus-visible){outline:3px solid var(--brand);outline-offset:4px}
.shop-choice:active{border-bottom-width:2px}
.shop-quantity{display:flex;align-items:center;gap:10px;flex-shrink:0;width:fit-content;max-width:100%}
.shop-quantity .btn{flex:0 0 46px;width:46px;height:48px;padding:0;font-size:23px;line-height:1}
.shop-quantity input{width:62px;min-width:0;height:48px;box-sizing:border-box;padding:5px 4px;border:1px solid #b7cfe7;border-radius:10px;background:var(--white);color:var(--ink);font:inherit;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;appearance:textfield}
.shop-quantity input::-webkit-inner-spin-button,.shop-quantity input::-webkit-outer-spin-button{margin:0;appearance:none}
.shop-action-row{display:flex;align-items:center;flex-wrap:wrap;gap:14px}
.shop-action-row>.btn{height:64px;flex:1;padding-inline:16px}
.shop-meta,.shop-meta dl{margin:0}
.shop-meta>div,.shop-meta dl>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:15px 0;border-top:1px solid var(--line);font-size:16px}
.shop-meta dt{color:var(--ink-3)}
.shop-meta dd{margin:0;color:var(--ink-2)}
.shop-spec-layout,.shop-spec-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:stretch;gap:var(--gap)}
.shop-spec-layout>.card,.shop-spec-grid>.card{height:100%;gap:22px}
.shop-spec-list{margin:0}
.shop-spec-list>div{display:grid;grid-template-columns:135px minmax(0,1fr);gap:22px;padding:17px 0;border-bottom:1px solid #e8eef6}
.shop-spec-list>div:first-child{padding-top:0}
.shop-spec-list>div:last-child{border-bottom:0;padding-bottom:0}
.shop-spec-list dt{color:var(--ink-3);font-weight:600}
.shop-spec-list dd{margin:0;color:var(--ink)}
.shop-spec-list small{display:block;margin-top:5px;color:var(--ink-3);line-height:1.65}
.shop-scenes{display:flex;flex-wrap:wrap;align-content:flex-start;gap:12px}
.shop-scenes li{display:flex;align-items:center;gap:12px;width:100%;padding:13px 0;border-bottom:1px solid #e8eef6}
.shop-scenes li::before{content:"✓";color:var(--brand);font-weight:800}
.shop-scenes li:last-child{border-bottom:0}
#shop-scenes{display:flex;flex:1}
#shop-scenes>.chip-row,#shop-scenes>.shop-scenes{display:grid;grid-auto-rows:1fr;align-content:stretch;gap:0;width:100%}
#shop-scenes .chip{justify-content:flex-start;gap:14px;min-height:64px;padding:18px 0;border-width:0 0 1px;border-radius:0;background:none;box-shadow:none;font-size:var(--fs-body)}
#shop-scenes .chip::before{content:"✓";color:var(--brand);font-weight:800}
#shop-scenes .chip:last-child{border-bottom:0}
.shop-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:var(--gap)}
.shop-feature-grid>.card{gap:14px}
.shop-feature-grid h3{color:var(--brand-d);line-height:1.5}
.shop-note,.shop-notes{gap:12px;background:#edf4fb}
.shop-note p,.shop-notes p{color:var(--ink-3);font-size:16px}

/* 三頁使用相同的流程列，不將尚未完成的步驟做成誤導連結。 */
.shop-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.shop-steps li{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;min-height:66px;padding:12px 14px;border:1px solid var(--line);border-bottom:4px solid #c8daed;border-radius:15px;background:linear-gradient(#fff,#edf5fd);box-shadow:var(--depth-1);color:var(--ink-3);font-size:clamp(17px,1vw,23px);font-weight:800}
.shop-steps li[aria-current="step"]{border-color:var(--brand);border-bottom-color:var(--brand-d);background:linear-gradient(var(--brand-2),var(--brand));color:#fff}
.shop-step-number{font-size:27px;font-weight:400;line-height:1}
.shop-steps li+li::before{position:absolute;content:"→";left:-18px;width:18px;color:var(--ink-3);font-size:16px;text-align:center}

/* 清單、填寫資料與完成頁共用的主欄和摘要欄。 */
.shop-columns{display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,24vw,460px);align-items:start;gap:var(--gap)}
.shop-main-stack{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
.shop-group.card{gap:0;padding:clamp(24px,1.6vw,38px)}
.shop-group h2{margin-bottom:20px;font-size:clamp(24px,1.4vw,34px)}
.shop-line{display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:14px 18px;padding:22px 0;border-top:1px solid var(--line)}
.shop-line-photo{display:flex;align-items:flex-end;justify-content:center;grid-row:span 2;width:76px;height:96px;border-radius:10px;background:#f0f6fc}
.shop-line-photo img{width:auto;max-width:100%;height:auto;max-height:96px;object-fit:contain;mix-blend-mode:multiply}
.shop-line-info{grid-column:2;min-width:0}
.shop-line-info h3{font-size:18px;line-height:1.5}
.shop-line-info p{margin-top:6px;font-size:16px}
.shop-line-info .btn,.shop-name-link{height:64px;max-width:100%;padding:5px 11px 2px;justify-content:flex-start;white-space:normal;font-size:17px;line-height:1.45;text-align:left}
.shop-line>.shop-quantity{grid-column:2;grid-row:2}
.shop-line-total{grid-column:3;grid-row:1;color:var(--brand-d);font-size:20px;font-weight:800;line-height:1.5;text-align:right;font-variant-numeric:tabular-nums}
.shop-line-total small{display:block;color:var(--ink-3);font-size:16px;font-weight:400}
.shop-line>.btn{grid-column:3;grid-row:2;justify-self:end;height:44px;padding-inline:14px;font-size:16px}
.shop-group>.shop-action-row{justify-content:flex-end;padding-top:22px;border-top:1px solid var(--line)}
.shop-group>.shop-action-row>.btn{flex:0 1 auto;height:56px}
.shop-removed{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 0;border-top:1px solid var(--line);color:var(--ink-3);font-size:16px}
.shop-removed .btn{height:44px;padding-inline:16px;font-size:16px}
.shop-summary.card{position:sticky;top:116px;gap:20px;padding:clamp(24px,1.5vw,34px)}
.shop-summary h2{font-size:clamp(25px,1.4vw,34px)}
.shop-summary>.btn,.shop-summary .shop-summary-actions>.btn{width:100%;height:56px}
.shop-summary>.btn--lg,.shop-summary .shop-summary-actions>.btn--lg{height:64px}
.shop-summary-actions{display:flex;flex-direction:column;gap:12px}
.shop-totals,.shop-totals dl{display:block;margin:0}
.shop-totals>div,.shop-totals dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;font-size:16px}
.shop-totals dt{color:var(--ink-2)}
.shop-totals dd{margin:0;color:var(--ink);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.shop-totals .shop-total,.shop-totals .shop-total-row,.shop-totals>div:last-child{margin-top:8px;padding-top:20px;border-top:1px solid var(--line);font-weight:800}
.shop-totals .shop-total dd,.shop-totals .shop-total-row dd,.shop-totals>div:last-child dd{color:var(--brand-d);font-size:clamp(25px,1.35vw,34px)}
.shop-empty.card{max-width:800px;align-items:center;gap:24px;margin-inline:auto;padding:clamp(34px,4vw,80px);text-align:center}
.shop-empty>img{width:128px;height:auto;mix-blend-mode:multiply}
.shop-empty h2{font-size:clamp(24px,1.7vw,40px)}
.shop-empty .shop-action-row{justify-content:center}
.shop-empty .shop-action-row>.btn{flex:0 1 auto;height:56px}
.shop-page .btn:disabled,.shop-page .btn[aria-disabled="true"]{--button-edge:#c7d0d9;background:#e6ebf0;color:#6b7a8b;border-color:#d1dae3;border-bottom-color:#c7d0d9;box-shadow:none;cursor:not-allowed;transform:none}

/* 表單：標籤、輸入與说明各自佔一行，錯誤不依賴原生對話框。 */
.shop-form.card{display:block;padding:clamp(26px,2.3vw,52px)}
.shop-form-section{margin:0 0 30px;padding:0 0 30px;border:0;border-bottom:1px solid var(--line);min-width:0}
.shop-form-section:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.shop-form-section h2,.shop-form-section legend{width:100%;margin:0 0 20px;padding:0;color:var(--ink);font-size:clamp(24px,1.3vw,32px);font-weight:800;line-height:1.4}
.shop-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:22px 24px}
.shop-field{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0}
fieldset.shop-field{margin:0;padding:0;border:0}
fieldset.shop-field>legend{margin-bottom:10px}
.shop-field--wide{grid-column:1 / -1}
.shop-field>label,.shop-field>legend,.shop-field-label{display:block;margin:0;padding:0;color:var(--ink);font-size:17px;font-weight:700;line-height:1.5}
.shop-required,.shop-field label>.required,.shop-field-label>.required{color:#ba303d;font-size:16px}
.shop-field>input:not([type="radio"]):not([type="checkbox"]),.shop-field select,.shop-field textarea{display:block;width:100%;min-width:0;height:54px;box-sizing:border-box;margin:0;padding:11px 14px;border:1px solid #b8cee4;border-bottom:3px solid #b4cae0;border-radius:11px;background:#fff;color:var(--ink);font:inherit;font-size:17px;line-height:1.5;box-shadow:0 2px 4px rgba(15,39,71,.04) inset}
.shop-field select{padding-right:26px}
.shop-field textarea{height:148px;min-height:120px;resize:vertical}
.shop-field input::placeholder,.shop-field textarea::placeholder{color:#728498;font-size:16px}
.shop-field input:focus,.shop-field select:focus,.shop-field textarea:focus{border-color:var(--brand)}
.shop-field>.shop-option-grid{margin-top:0}
.shop-help{margin:0;color:var(--ink-3);font-size:16px;line-height:1.65}
.shop-error{margin:0;color:#b12839;font-size:16px;font-weight:700;line-height:1.6}
.shop-error:empty{display:none}
.shop-invalid input:not([type="radio"]):not([type="checkbox"]),.shop-invalid select,.shop-invalid textarea,.shop-field [aria-invalid="true"],.shop-invalid .shop-choice{border-color:#c43847;background:#fff8f8}
.shop-check{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding-block:6px;box-sizing:border-box;color:var(--ink-2);font-size:17px;line-height:1.7}
.shop-check+.shop-check{margin-top:18px}
.shop-check input[type="checkbox"],.shop-check input[type="radio"]{flex:0 0 21px;width:21px;height:21px;margin:4px 0 0;accent-color:var(--brand);cursor:pointer}
.shop-check label{min-width:0}
.shop-field>label.shop-check{display:flex;font-weight:400}
.shop-check a{color:var(--brand-d);text-underline-offset:3px}
.shop-check a:hover{text-decoration:underline}
.shop-check:has(input:focus-visible){outline:3px solid var(--brand);outline-offset:6px;border-radius:5px}
.shop-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}
.shop-check-grid .shop-check{margin:0}
.shop-warning{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:4px 0 0;padding:17px 18px;border-left:4px solid #e6a437;border-radius:10px;background:#fff1d7;color:#805307;font-size:16px;line-height:1.7}
.shop-warning .btn{height:48px;padding-inline:14px;font-size:16px}
.shop-mini-list{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none}
.shop-mini-list li,.shop-mini-row{display:flex;flex-direction:column;gap:7px;padding:17px 0;border-bottom:1px solid var(--line);min-width:0;font-size:16px}
.shop-mini-list li:first-child{padding-top:0}
.shop-mini-list h3,.shop-mini-list strong{font-size:17px;line-height:1.5}
.shop-mini-list p,.shop-mini-list span{color:var(--ink-3);font-size:16px}
.shop-mini-list .shop-price{align-self:flex-end;color:var(--brand-d);font-size:19px;text-align:right}
.shop-mini-list .shop-mini-row{padding:0;border:0}
.shop-mini-list li>.shop-mini-row{flex-direction:row;justify-content:space-between;gap:12px}
.shop-mini-list li>.shop-mini-row>span:last-child{color:var(--brand-d);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
[data-field="unloading"] .shop-option-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
[data-field="unloading"] .shop-choice{height:100%;min-height:88px}
.shop-next-steps{display:flex;flex-direction:column;gap:28px;margin:0;padding:0;list-style:none}
.shop-next-steps li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px 22px;align-items:start}
.shop-next-steps .num3d{width:64px;height:64px;border-radius:18px;font-size:29px}
.shop-next-steps li h3{grid-column:2;align-self:end;line-height:1.45}
.shop-next-steps li p{grid-column:2;font-size:17px}
.shop-next-steps li>div{grid-column:2}
.shop-next-steps li>div p{margin-top:10px}
.shop-submission-meta{margin:0}
.shop-submission-meta>div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;padding:7px 0;font-size:16px}
.shop-submission-meta dt{color:var(--ink-3)}
.shop-submission-meta dd{margin:0;font-variant-numeric:tabular-nums}
.shop-remaining{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:28px;padding:24px 28px;border:1px solid #cbdff2;border-radius:var(--r-lg);background:#eaf4ff;box-shadow:var(--depth-1)}
.shop-remaining p{color:var(--brand-d);font-weight:700}
.shop-remaining>.btn{height:56px}
.shop-remaining.card{flex-direction:row}
.shop-complete-actions{margin-top:32px}
.shop-complete-actions>.btn{flex:0 1 auto;height:56px}
.shop-detail h2{font-size:clamp(25px,1.4vw,34px)}
.shop-detail .shop-meta>div{grid-template-columns:88px minmax(0,1fr);gap:12px;font-size:16px}
body[data-page="complete"] .shop-columns{align-items:stretch}
body[data-page="complete"] .shop-next-steps{flex:1;justify-content:space-between}

/* 條款全部展開；目錄維持可辨識的立體按鈕。 */
.shop-terms-layout.card,.shop-terms.card{display:grid;grid-template-columns:270px minmax(0,1fr);gap:clamp(30px,3vw,74px);padding:clamp(26px,2.8vw,64px)}
.shop-terms-nav{position:sticky;top:116px;display:flex;flex-direction:column;align-items:stretch;gap:12px;align-self:start;min-width:0}
.shop-terms-nav .btn{justify-content:flex-start;width:100%;height:56px;padding-inline:14px;white-space:normal;font-size:16px;line-height:1.45;text-align:left}
.shop-terms-content{min-width:0}
.shop-terms-content section{padding:0 0 30px;margin:0 0 30px;border-bottom:1px solid var(--line);scroll-margin-top:130px}
.shop-terms-content section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.shop-terms-content h2{margin-bottom:16px;font-size:clamp(25px,1.5vw,36px);line-height:1.45}
.shop-terms-content p,.shop-terms-content li{color:var(--ink-2);line-height:1.95}
.shop-terms-content a{color:var(--brand-d)}
.shop-terms-content a:hover{text-decoration:underline}
.shop-terms-content ul{display:grid;gap:8px}
#shop-print{display:none}

@media(max-width:1199px){
  .shop-howto,.shop-howto-grid{grid-template-columns:1fr}
  .shop-guide.card{grid-template-columns:76px minmax(0,1fr);padding:25px 26px}
  .shop-guide>img{width:76px}
  .shop-guide>.icon3d{width:76px;height:76px}
  .shop-spec-layout,.shop-spec-grid{grid-template-columns:1fr}
  .shop-columns{grid-template-columns:minmax(0,1fr)}
  .shop-summary.card{position:static}
  .shop-line{grid-template-columns:86px minmax(0,1fr) auto auto auto;gap:16px}
  .shop-line-photo{grid-row:1;width:86px}
  .shop-line-info{grid-column:2}
  .shop-line>.shop-quantity{grid-column:3;grid-row:1}
  .shop-line-total{grid-column:4;grid-row:1}
  .shop-line>.btn{grid-column:5;grid-row:1}
  .shop-terms-layout.card,.shop-terms.card{grid-template-columns:minmax(0,1fr);gap:30px}
  .shop-terms-nav{position:static;display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;padding-bottom:26px;border-bottom:1px solid var(--line)}
  .shop-terms-nav .btn{width:auto;height:48px;padding-inline:16px;border-radius:24px;font-size:16px}



}
@media(max-width:900px){
  [data-field="unloading"] .shop-option-grid{grid-template-columns:minmax(0,1fr)}
  .shop-grid,.shop-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shop-product-card.card{padding:24px;gap:16px}
  .shop-product-title,.shop-product-title .btn{height:72px;min-height:72px;font-size:19px}
  .shop-chips{min-height:0}
  .shop-product-layout{grid-template-columns:minmax(0,1fr);gap:26px}
  .shop-product-visual{padding:30px}
  .shop-product-photo{height:430px}
  .shop-purchase.card{padding:30px}
  .shop-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shop-field-grid{grid-template-columns:minmax(0,1fr)}
  .shop-field--wide{grid-column:auto}
  .shop-line{grid-template-columns:76px minmax(0,1fr) auto;gap:14px 18px}
  .shop-line-photo{grid-row:span 2;width:76px}
  .shop-line>.shop-quantity{grid-column:2;grid-row:2}
  .shop-line-total{grid-column:3;grid-row:1}
  .shop-line>.btn{grid-column:3;grid-row:2}
  .shop-summary.card{gap:20px}
  .shop-remaining{align-items:flex-start;flex-direction:column}
  .shop-remaining.card{flex-direction:column}


}
@media(max-width:600px){
  .shop-toolbar{align-items:flex-start;flex-direction:column;gap:6px;margin-bottom:20px}
  .shop-toolbar p,.shop-toolbar span{font-size:16px}
  .shop-sample,.shop-sample-notice{padding:10px 12px;font-size:16px}
  .shop-grid,.shop-product-grid,.shop-feature-grid{grid-template-columns:minmax(0,1fr)}
  .shop-product-card.card{padding:22px;gap:16px}
  .shop-photo{height:270px}
  .shop-photo-link{padding-inline:15px}
  .shop-product-title,.shop-product-title .btn{height:68px;min-height:68px;font-size:20px}
  .shop-chips{min-height:0;gap:8px}
  .shop-chips .chip{font-size:16px;padding:5px 10px}
  .shop-card-actions>.btn{height:56px;font-size:18px}
  .shop-price{font-size:29px}
  .shop-guide.card{grid-template-columns:64px minmax(0,1fr);gap:16px;padding:24px 20px}
  .shop-guide>img{width:64px}
  .shop-guide>.icon3d{width:64px;height:64px}
  .shop-guide p{font-size:16px}
  .shop-product-layout{margin-top:22px}
  .shop-product-visual{padding:24px 20px}
  .shop-product-photo{height:330px}
  .shop-dimensions{margin-top:24px;font-size:16px}
  .shop-purchase.card{padding:26px 20px;gap:22px}
  .shop-purchase h1{font-size:30px}
  .shop-purchase .shop-price{font-size:30px}
  .shop-option-grid{grid-template-columns:minmax(0,1fr)}
  .shop-choice{height:64px;padding-inline:14px;font-size:17px}
  .shop-action-row{gap:12px}
  .shop-action-row>.btn{flex-basis:100%;height:56px;font-size:18px}
  .shop-meta>div,.shop-meta dl>div{grid-template-columns:76px minmax(0,1fr);gap:14px;font-size:16px}
  .shop-spec-list>div{grid-template-columns:85px minmax(0,1fr);gap:15px;padding-block:15px}
  .shop-spec-list dt,.shop-spec-list dd{font-size:16px}
  .shop-spec-list small{font-size:16px}
  .shop-steps{gap:10px}
  .shop-steps li{flex-direction:column;gap:8px;min-height:88px;padding:12px 6px;border-radius:12px;font-size:16px;line-height:1.3}
  .shop-step-number{font-size:24px}
  .shop-steps li+li::before{left:-11px;width:11px;top:36px;font-size:12px}
  .shop-group.card,.shop-summary.card{padding:26px 20px}
  .shop-group h2,.shop-summary h2{font-size:25px}
  .shop-line{grid-template-columns:62px minmax(0,1fr);gap:14px;padding-block:22px}
  .shop-line-photo{grid-column:1;grid-row:1;width:62px;height:90px}
  .shop-line-photo img{max-height:90px}
  .shop-line-info{grid-column:2;grid-row:1}
  .shop-line-info .btn,.shop-name-link{height:68px;padding-inline:9px;font-size:16px}
  .shop-line-info p{font-size:16px}
  .shop-line>.shop-quantity{grid-column:1 / -1;grid-row:2;justify-self:start}
  .shop-line-total{grid-column:1 / -1;grid-row:3;justify-self:start;text-align:left;font-size:22px}
  .shop-line-total small{display:inline;margin-right:10px}
  .shop-line>.btn{grid-column:2;grid-row:2;height:44px;padding-inline:12px;font-size:16px}
  .shop-group>.shop-action-row>.btn{width:100%;flex-basis:100%;height:56px}
  .shop-removed{align-items:flex-start;flex-direction:column;gap:12px}
  .shop-totals>div,.shop-totals dl>div{font-size:16px;gap:10px}
  .shop-totals .shop-total dd,.shop-totals .shop-total-row dd,.shop-totals>div:last-child dd{font-size:27px}
  .shop-empty.card{padding:34px 22px;gap:22px}
  .shop-empty .shop-action-row{width:100%}
  .shop-empty .shop-action-row>.btn{flex-basis:100%;height:56px}
  .shop-form.card{padding:28px 20px}
  .shop-form-section{padding-bottom:27px;margin-bottom:27px}
  .shop-field-grid{gap:22px}
  .shop-field>label,.shop-field>legend,.shop-field-label{font-size:17px}
  .shop-field>input:not([type="radio"]):not([type="checkbox"]),.shop-field select,.shop-field textarea{height:54px;padding-inline:12px;font-size:16px}
  .shop-field textarea{height:148px}
  .shop-check{gap:10px;font-size:16px}
  .shop-check-grid{grid-template-columns:minmax(0,1fr)}
  .shop-warning{padding:14px 13px;font-size:16px}
  .shop-warning .btn{height:48px;font-size:16px}
  .shop-next-steps{gap:28px}
  .shop-next-steps li{grid-template-columns:48px minmax(0,1fr);gap:10px 14px}
  .shop-next-steps .num3d{width:48px;height:52px;border-radius:13px;font-size:23px}
  .shop-next-steps li h3{font-size:20px}
  .shop-next-steps li p{font-size:16px}
  .shop-remaining{padding:24px 20px;gap:18px}
  .shop-remaining>.btn{width:100%;height:56px}
  .shop-complete-actions>.btn{flex-basis:100%;height:56px}
  .shop-terms-layout.card,.shop-terms.card{padding:28px 20px;gap:28px}
  .shop-terms-nav{gap:10px;padding-bottom:24px}
  .shop-terms-nav .btn{width:100%;height:48px;font-size:16px}
  .shop-terms-content section{padding-bottom:26px;margin-bottom:26px;scroll-margin-top:100px}
  .shop-terms-content h2{font-size:25px}
  .shop-terms-content p,.shop-terms-content li{font-size:17px;line-height:1.9}




}
@media(min-width:1921px){
  .shop-grid,.shop-product-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .shop-product-card.card{padding:26px 24px;gap:18px}
  .shop-photo{height:300px}
  .shop-product-title,.shop-product-title .btn{height:78px;min-height:78px;font-size:23px}
  .shop-chips{min-height:0;gap:8px}
  .shop-chips .chip{font-size:16px;padding:5px 10px}
  .shop-card-actions>.btn{height:60px;font-size:20px}
  .shop-guide.card{grid-template-columns:100px minmax(0,1fr);gap:26px;padding:34px}
  .shop-guide>img{width:100px}
  .shop-guide>.icon3d{width:100px;height:100px}
  .shop-guide p{font-size:20px}
  .shop-line{grid-template-columns:96px minmax(0,1fr) auto minmax(130px,auto) auto;gap:24px}
  .shop-line-photo{grid-row:1;width:96px;height:108px}
  .shop-line-photo img{max-height:108px}
  .shop-line-info{grid-column:2}
  .shop-line-info .btn{height:64px;font-size:19px}
  .shop-line-info p{font-size:17px}
  .shop-line>.shop-quantity{grid-column:3;grid-row:1}
  .shop-line-total{grid-column:4;grid-row:1;font-size:23px}
  .shop-line>.btn{grid-column:5;grid-row:1}


}
/* 移除電話列與第四欄後，七項導覽和三欄頁尾使用同一份排版。 */
@media print{
  body[data-page="list"]{margin:0;background:#fff;color:#000;font-size:11pt;line-height:1.55}
  body[data-page="list"]>:not(#shop-print){display:none}
  body[data-page="list"]>#shop-print{display:block;width:100%;margin:0;padding:0;color:#000}
  #shop-print h1{margin:14pt 0 5pt;font-size:24pt;color:#000}
  #shop-print h2{margin:18pt 0 8pt;font-size:15pt;color:#000}
  #shop-print .shop-print-title{margin:14pt 0 5pt;font-size:24pt}
  #shop-print p{margin:8pt 0;color:#000;font-size:10pt}
  #shop-print table{width:100%;border-collapse:collapse;margin:10pt 0;font-size:10pt;table-layout:fixed}
  #shop-print th,#shop-print td{padding:7pt 6pt;border:1px solid #777;overflow-wrap:anywhere;vertical-align:top}
  #shop-print th{background:#eee;text-align:center;font-weight:700}
  #shop-print td:nth-child(n+3){text-align:right;font-variant-numeric:tabular-nums}
  #shop-print th:first-child{width:38%}
  #shop-print tr{break-inside:avoid}
  #shop-print thead{display:table-header-group}
  #shop-print .shop-totals{width:55%;margin-left:auto}
  #shop-print .shop-totals>div{padding:4pt 0;font-size:11pt}
  #shop-print .shop-totals dd,#shop-print .shop-totals>div:last-child dd{font-size:12pt;color:#000}
  #shop-print .btn,#shop-print img{display:none}
}

/* 只給螢幕報讀用的標籤（畫面上已有同名區塊標題，避免重複顯示） */
.shop-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 細分尺寸（2026-10-02 老闆：「所有呎吋都要適合，不能只設定手機、平板、電腦」）：中間尺寸改排法、手機上落單的最後一張置中 */
@media(min-width:720px) and (max-width:959px){
  .shop-product-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
}
@media(min-width:720px) and (max-width:1199px){
  .shop-spec-layout,.shop-spec-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
}

/* 同步產品分類與產品頁：任意張數使用固定卡寬，末列置中。 */
.shop-page[data-page="category"] .shop-grid,
.shop-page .shop-category-grid,
.shop-page .shop-related-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:clamp(16px,1.4vw,28px)}
.shop-page[data-page="category"] .shop-grid>.shop-product-card{flex:0 1 300px;max-width:320px;min-width:0}
.shop-page .shop-category-grid>.shop-category-card{flex:0 1 320px;max-width:340px;min-width:0}
.shop-page .shop-related-grid>.shop-related-card{flex:0 1 260px;max-width:300px;min-width:0}
.shop-page[data-page="category"] .shop-product-card.card,
.shop-page .shop-category-card,
.shop-page .shop-related-card{display:flex;flex-direction:column;gap:16px;padding:22px 18px;overflow-wrap:anywhere;background:linear-gradient(150deg,#fff,#f0f7ff)}
.shop-page .shop-category-card,.shop-page .shop-related-card{text-decoration:none}
.shop-page .shop-category-card:hover,.shop-page .shop-related-card:hover{border-color:var(--brand);box-shadow:var(--depth-3)}
.shop-page[data-page="category"] .shop-product-card .shop-photo-link{justify-content:center;padding:10px;width:100%}
.shop-page[data-page="category"] .shop-product-card .shop-photo,
.shop-page .shop-category-card .shop-photo,
.shop-page .shop-category-card>.shop-photo-placeholder{width:100%;height:220px;justify-content:center;align-items:center}
.shop-page .shop-related-card .shop-photo,
.shop-page .shop-related-card>.shop-photo-placeholder{width:100%;height:180px;justify-content:center;align-items:center}
.shop-page .shop-category-card .shop-photo,.shop-page .shop-related-card .shop-photo{border-radius:var(--r-md);background:linear-gradient(150deg,#f7fbff,#e4f0fb);padding:12px}
.shop-page .shop-photo img,.shop-page .shop-product-photo img{height:auto;max-width:min(100%,var(--photo-natural-width,var(--source-width,100%)));object-fit:contain}
/* 卡片照片一律撐滿同一個框（原圖小也放大），避免每張大小不一；!important 蓋掉 img 行內的原圖寬度上限 */
.shop-page .shop-category-card .shop-photo img,.shop-page[data-page="category"] .shop-product-card .shop-photo img,.shop-page .shop-related-card .shop-photo img{width:100%;height:100%;min-width:0;max-width:100%!important;max-height:100%}
.shop-page[data-page="category"] .shop-product-card .shop-product-title{height:calc(4.5em + 20px);min-height:calc(4.5em + 20px);font-size:20px;line-height:1.5}
.shop-page[data-page="category"] .shop-product-card .shop-product-title a{height:100%;min-height:0;width:100%;padding-block:6px;font-size:inherit;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.shop-page[data-page="category"] .shop-product-card .shop-product-title a:not(.btn){display:flex;align-items:center}
.shop-page[data-page="category"] .shop-product-card .shop-product-title a span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.shop-page[data-page="category"] .shop-product-card .shop-chips{min-height:74px;align-content:flex-start}
.shop-page[data-page="category"] .shop-product-card .shop-chips .chip{max-width:100%;white-space:normal;overflow-wrap:anywhere;font-size:15px}
.shop-page[data-page="category"] .shop-product-card>.shop-price{font-size:24px;line-height:1.45;min-height:2.9em;display:flex;align-items:center}
.shop-page[data-page="category"] .shop-product-card>.shop-card-actions{margin-top:auto}
.shop-page[data-page="category"] .shop-product-card>.shop-feedback{min-height:3.4em;font-size:15px}
.shop-page[data-page="category"] .shop-product-card>.shop-feedback[hidden]{display:block;visibility:hidden}
.shop-page .shop-category-card h2{font-size:25px;line-height:1.45}
.shop-page .shop-category-card>p:last-child{margin-top:auto;color:var(--ink-3);font-size:17px}
.shop-page .shop-related-card h3,.shop-page .shop-related-card h2{font-size:19px;line-height:1.5}
.shop-page .shop-related-card>.shop-price{margin-top:auto;font-size:22px}

/* 缺照仍保留與實品照片相同的展示區，圖示只作輔助。 */
.shop-page .shop-photo-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;min-width:0;min-height:0;padding:14px;border:1px solid #d6e8f8;border-radius:var(--r-md);background:linear-gradient(145deg,#eef7ff,#dfedfb);color:var(--ink-3);text-align:center}
.shop-page .shop-photo-placeholder img{flex:0 1 auto;width:88px;max-width:55%;height:auto;max-height:65%;object-fit:contain;mix-blend-mode:multiply}
.shop-page .shop-photo-placeholder span,.shop-page .shop-photo-placeholder small{font-size:14px;line-height:1.5}
.shop-page .shop-line-photo .shop-photo-placeholder{gap:4px;padding:6px;border-radius:10px}
.shop-page .shop-line-photo .shop-photo-placeholder img{width:44px;max-width:100%;max-height:54px}
.shop-page .shop-line-photo .shop-photo-placeholder span,.shop-page .shop-line-photo .shop-photo-placeholder small{font-size:11px;line-height:1.3}
.shop-page .shop-line-info .btn,.shop-page .shop-name-link{height:auto;min-height:64px;padding-block:10px;overflow-wrap:anywhere}

/* 單一規格購買面板：主圖保留原始尺寸上限，窄版依閱讀順序堆疊。 */
.shop-page[data-page="product"] #product-main>.shop-product-layout{margin-top:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,64px)}
.shop-page[data-page="product"] .shop-product-visual{padding:clamp(18px,2.3vw,48px)}
.shop-page[data-page="product"] .shop-product-photo{height:clamp(320px,32vw,640px);justify-content:center}
.shop-page[data-page="product"] .shop-product-photo>.shop-photo-placeholder{max-width:560px}
.shop-page[data-page="product"] .shop-product-photo>.shop-photo-placeholder img{width:144px;max-height:55%}
.shop-page[data-page="product"] .shop-purchase{min-width:0;display:flex;flex-direction:column}
.shop-page[data-page="product"] .shop-purchase h1{font-size:clamp(28px,2vw,46px);line-height:1.4;overflow-wrap:anywhere}
.shop-page[data-page="product"] .shop-purchase .shop-price{font-size:clamp(28px,2vw,44px)}
.shop-page[data-page="product"] .shop-purchase>.shop-meta{margin-top:auto}
.shop-page[data-page="product"] .shop-spec-card{max-width:1200px;margin-inline:auto;gap:24px}
.shop-page[data-page="product"] .shop-spec-text{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.shop-page[data-page="product"] .shop-spec-text h3{margin-bottom:12px}
.shop-page[data-page="product"] .shop-spec-text p{white-space:pre-line}
.shop-page .shop-list-unavailable{margin:0 0 24px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--tint);color:var(--ink-2)}
@media(max-width:900px){
  .shop-page[data-page="product"] #product-main>.shop-product-layout{grid-template-columns:minmax(0,1fr)}
  .shop-page[data-page="product"] .shop-product-photo{height:380px}
  .shop-page[data-page="product"] .shop-product-visual{padding:18px}
}
@media(max-width:600px){
  .shop-page[data-page="category"] .shop-grid>.shop-product-card,
  .shop-page .shop-category-grid>.shop-category-card{flex-basis:100%;max-width:340px}
  .shop-page .shop-related-grid>.shop-related-card{flex-basis:100%;max-width:320px}
  .shop-page[data-page="category"] .shop-product-card.card{padding:20px 16px}
  .shop-page[data-page="category"] .shop-product-card .shop-product-title{font-size:19px}
  .shop-page[data-page="product"] .shop-product-photo{height:300px}
  .shop-page[data-page="product"] .shop-purchase.card{padding:24px 18px}
  .shop-page[data-page="product"] .shop-meta>div{grid-template-columns:76px minmax(0,1fr);gap:12px}
  .shop-page[data-page="product"] .shop-spec-list>div{grid-template-columns:76px minmax(0,1fr);gap:14px}
}

/* 卡片列欄數由 shop.js 依寬度與張數決定（data-cols）：卡片撐滿整列、最後一列置中且不落單 */
.shop-page .shop-grid[data-cols]>.shop-product-card,
.shop-page .shop-category-grid[data-cols]>.shop-category-card,
.shop-page .shop-related-grid[data-cols]>.shop-related-card{flex:0 0 calc((100% - (var(--cols) - 1) * var(--g)) / var(--cols));max-width:none}
.shop-page .shop-grid[data-cols="1"]>.shop-product-card,
.shop-page .shop-category-grid[data-cols="1"]>.shop-category-card,
.shop-page .shop-related-grid[data-cols="1"]>.shop-related-card{max-width:400px}
/* 加入回饋只預留一行，按鈕下方不留大塊空白；規格膠囊與缺照說明字級不小於 16px */
.shop-page[data-page="category"] .shop-product-card>.shop-feedback{min-height:1.7em;font-size:16px;line-height:1.7}
.shop-page[data-page="category"] .shop-product-card .shop-chips .chip{font-size:16px}
.shop-page .shop-photo-placeholder span,.shop-page .shop-photo-placeholder small{font-size:16px}
/* 清單小縮圖放不下可讀的說明字，缺照時只留圖示 */
.shop-page .shop-line-photo .shop-photo-placeholder span,.shop-page .shop-line-photo .shop-photo-placeholder small{display:none}
.shop-page .shop-line-photo .shop-photo-placeholder img{width:52px;max-height:72%}

/* ===== 線上付款（js/shop-pay.js）2026-10-03 ===== */
/* 未開放：表單最上方的提示卡＋付款選項標「即將開放」 */
.shop-pay-closed{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px 18px;margin:0 0 30px;padding:20px 22px;border:1px solid #f0cf8f;border-bottom:4px solid #e6a437;border-radius:15px;background:linear-gradient(#fffaf0,#fff1d7);box-shadow:var(--depth-1);color:#6b4506}
.shop-pay-closed__icon{display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:#fff;color:#c27d0e;box-shadow:0 3px 0 #f0cf8f}
.shop-pay-closed__body strong{display:block;color:#5a3a05;font-size:clamp(19px,1.1vw,24px);font-weight:800;line-height:1.4}
.shop-pay-closed__body p{margin:4px 0 0;font-size:16px;line-height:1.7}
.shop-pay-closed .btn{height:52px;padding-inline:18px;font-size:16px;white-space:nowrap}
/* 付款方式三個選項：放得下就一排三個，放不下就一欄（避免「轉帳」「帳戶」被拆行、也不留落單的一個） */
.shop-form [data-field="payment"]{container-type:inline-size}
@container (max-width:780px){.shop-form [data-field="payment"] .shop-option-grid{grid-template-columns:minmax(0,1fr)}}
.shop-choice--soon{cursor:not-allowed;opacity:.72;background:#f4f6f9;border-bottom-color:#d5dde6}
.shop-choice--soon .shop-soon{position:absolute;top:-11px;right:12px;padding:1px 10px;border:1px solid #f0cf8f;border-radius:20px;background:#fff6e3;color:#885305;font-size:14px;font-weight:800;line-height:1.5;white-space:nowrap}
/* 開放：選了付款方式後顯示的內容 */
.shop-pay-box{display:flex;flex-direction:column;gap:14px;margin-top:4px;padding:20px 22px;border:1px solid var(--line);border-radius:15px;background:#f7fbff}
.shop-pay-panel{display:flex;flex-direction:column;gap:14px}
.shop-pay-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.shop-pay-brand{color:var(--brand-d);font-size:16px;font-weight:800;white-space:nowrap}
.shop-pay-fields{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:16px}
.shop-pay-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.shop-pay-label{color:var(--ink);font-size:17px;font-weight:700;line-height:1.5;white-space:nowrap}
.shop-tpfield{height:54px;box-sizing:border-box;padding:14px;border:1px solid #b8cee4;border-bottom:3px solid #b4cae0;border-radius:11px;background:#fff;box-shadow:0 2px 4px rgba(15,39,71,.04) inset}
.shop-tpfield.tappay-field-focus{border-color:var(--brand);outline:3px solid rgba(37,99,235,.18);outline-offset:0}
.shop-tpfield.shop-tpfield--error{border-color:#c43847;background:#fff8f8}
.shop-pay-secure{margin:0;padding-top:12px;border-top:1px solid var(--line);color:var(--ink-3);font-size:16px;line-height:1.6}
/* 完成頁：ATM 帳號與匯款資訊 */
.shop-atm .shop-atm__no{color:var(--brand-d);font-size:clamp(20px,1.2vw,26px);font-weight:800;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.shop-bank-info{margin:0;padding:14px 16px;border-radius:12px;background:#f7fbff;color:var(--ink-2);font-size:17px;line-height:1.7}
.shop-status--paid{color:#18683b;background:#e4f5e9}
.shop-status--closed{color:#5d6b7a;background:#edf1f5}
@media(max-width:900px){
  .shop-pay-closed{grid-template-columns:auto minmax(0,1fr)}
  .shop-pay-closed .btn{grid-column:1 / -1;width:100%}
  .shop-pay-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .shop-pay-field--number{grid-column:1 / -1}
}
@media(max-width:600px){
  .shop-pay-closed{padding:16px;gap:12px 14px}
  .shop-pay-closed__icon{width:46px;height:46px}
  .shop-pay-box{padding:16px}
  .shop-pay-label{font-size:16px}
}
@media(max-width:380px){
  .shop-pay-fields{grid-template-columns:minmax(0,1fr)}
}
/* 產品清單由程式排出來之前先佔位，避免頁尾先出現再被推走（版面跳動） */
#shop-products:not([class]){min-height:100vh}
/* 只有詢價時（產品都沒有標價）選購清單沒有右側摘要，品項列用滿整列寬：名稱｜數量｜移除排成一列（1199px 以下與 1921px 以上本來就是這個排法） */
@media(min-width:1200px) and (max-width:1920px){
  .shop-main-stack--full .shop-line{grid-template-columns:86px minmax(0,1fr) auto auto auto;gap:16px}
  .shop-main-stack--full .shop-line-photo{grid-row:1;width:86px}
  .shop-main-stack--full .shop-line>.shop-quantity{grid-column:3;grid-row:1}
  .shop-main-stack--full .shop-line-total{grid-column:4;grid-row:1}
  .shop-main-stack--full .shop-line>.btn{grid-column:5;grid-row:1}
}
/* 空清單卡片的按鈕跟圖示、標題一樣置中（共用樣式的卡片按鈕預設靠左） */
.shop-empty>.btn{align-self:center}
/* ===== 會員價（js/shop.js）2026-10-06：登入才看得到價格、依等級不同 ===== */
.shop-toolbar .shop-level{color:var(--brand-d);font-weight:800}
.shop-login-hint{display:inline-flex;align-items:center;gap:6px;color:var(--brand-d);font-size:16px;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.shop-login-hint::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.shop-help .shop-login-hint{font-size:inherit}
.shop-price-note{margin:6px 0 0;color:#885305;font-size:15px;font-weight:700}
/* ===== 遠端控制小卡（js/shop.js 的 remote_card）2026-10-06：通風、水冷、百葉類的分類頁與產品頁，產品格／同分類產品之後一張橫式卡 ===== */
.shop-remote-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(16px,1.8vw,40px);padding:clamp(18px,1.4vw,30px) clamp(22px,2vw,44px);background:linear-gradient(150deg,var(--white),var(--tint-2))}
.shop-remote-card>:last-child{margin-top:0}
.shop-remote-card>.btn{align-self:center}
.shop-remote-photo{display:block;width:clamp(88px,6vw,132px);aspect-ratio:1;padding:6px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);box-shadow:var(--depth-1)}
.shop-remote-photo img{display:block;width:100%;height:100%;object-fit:contain}
.shop-remote-text{margin:0;color:var(--ink);font-size:clamp(19px,1.1vw,26px);font-weight:800;line-height:1.6}
@media(max-width:720px){
  .shop-remote-card{grid-template-columns:auto minmax(0,1fr)}
  .shop-remote-card>.btn{grid-column:1 / -1;width:100%}
  .shop-remote-photo{width:76px}
  .shop-remote-text{font-size:18px}
}
/* ===== 產品詳細頁甲版「左圖右規格」（js/shop.js render_product）2026-10-07：老闆 2026-10-06 選定 =====
   照片在左（框跟右側內容一樣高、照片放大撐滿）；右邊依序是選擇電壓、詢價列、完整規格表、配送與安裝；產品名稱在頁首當 h1。
   只限產品頁的 .shop-pd（甲版卡片）與頁首標題；按鈕一律沿用既有 .btn，只調尺寸。 */
/* 頁首：產品名稱放在麵包屑下面；字級依頁首文字區寬度算，最長 35 字在桌機最多 3 行（頁首高度不變、不可被截） */
.fx3d.shop-page[data-page="product"] #product-intro .page-hero__copy{container-type:inline-size}
/* 換行優先落在括號前後與空白（「3段調速」「單相 110V」這類短語不被拆開）；整段放不下才任意斷 */
.fx3d.shop-page[data-page="product"] #product-intro .page-hero__title{margin:0;font-size:min(clamp(30px,2.3vw,46px),7.4cqi);line-height:1.3;text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}
@media(max-width:600px){.fx3d.shop-page[data-page="product"] #product-intro .page-hero__title{font-size:clamp(22px,7.6cqi,30px);line-height:1.32}}

/* 版面：照片欄寬＝照片框邊長（由程式依右側內容高度算出 --shop-pd-ph，夾在預設寬的一半～全寬之間） */
.fx3d.shop-page[data-page="product"] #product-main>.shop-product-layout.shop-pd{--shop-pd-fit:1;display:grid;grid-template-columns:var(--shop-pd-ph,clamp(340px,30vw,680px)) minmax(0,1fr);align-items:start;gap:var(--c-gap) calc(var(--c-gap) * 1.6);margin:0;padding:var(--c-pad);overflow-wrap:anywhere}
/* 右側比照片高時照片黏住（頁首最高 76px＋間距 16px） */
.fx3d.shop-page[data-page="product"] .shop-pd-media{position:sticky;top:92px;align-self:start;min-width:0}
.fx3d.shop-page[data-page="product"] .shop-pd>.shop-pd-info{display:flex;flex-direction:column;gap:var(--c-gap);min-width:0;margin:0;align-self:center;container-type:inline-size}
.fx3d.shop-page[data-page="product"] .shop-pd-h{margin:0;color:var(--ink);font-size:var(--fs-h3);line-height:1.35;letter-spacing:-.01em}

/* 照片框：白底（白底照片才不會露出白方塊）、照片一律放大撐滿框、四周留約 7% */
.fx3d.shop-page[data-page="product"] .shop-pd-photo{position:relative;box-sizing:border-box;width:100%;aspect-ratio:1/1;min-width:0;border:1px solid #e1ecf6;border-radius:calc(var(--c-radius) - 8px);background:#fff;box-shadow:inset 0 -4px 0 #edf4fa,0 10px 22px -18px rgba(15,39,71,.35);overflow:hidden}
.fx3d.shop-page[data-page="product"] .shop-pd-photo>img{position:absolute;inset:7%;width:86%;height:86%;max-width:none;max-height:none;object-fit:contain;mix-blend-mode:normal}
/* 沒照片：白底＋圖示＋「照片準備中」 */
.fx3d.shop-page[data-page="product"] .shop-pd-photo>.shop-photo-placeholder{position:absolute;inset:0;width:auto;height:auto;gap:12px;border:0;border-radius:0;background:#fff}
.fx3d.shop-page[data-page="product"] .shop-pd-photo>.shop-photo-placeholder img{width:44%;max-width:260px;max-height:none}
.fx3d.shop-page[data-page="product"] .shop-pd-photo>.shop-photo-placeholder span{color:var(--ink-3);font-size:16px;font-weight:700}

/* 選擇電壓（2026-10-09 起列出同款全部電壓）：其他電壓是連到該款產品頁的立體小鍵；目前這款填品牌藍標成「已選」，不能點 */
.fx3d.shop-page[data-page="product"] .shop-pd-volt{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.fx3d.shop-page[data-page="product"] .shop-pd-volt__label{color:var(--ink-3);font-size:16px;font-weight:800;white-space:nowrap}
.fx3d.shop-page[data-page="product"] .shop-pd-volt__keys{display:flex;flex-wrap:wrap;gap:10px}
.fx3d.shop-page[data-page="product"] .shop-pd-volt__key.btn{height:44px;padding:2px 16px 0;border-radius:11px;border-bottom-width:3px;font-size:16px}
.fx3d.shop-page[data-page="product"] .shop-pd-volt__key.is-current{background:var(--brand);border-color:var(--brand-d);color:#fff;cursor:default;pointer-events:none}

/* 詢價列：淡藍立體底；狀態＋價格在左、數量＋按鈕在右（右邊窄時數量一行、按鈕一行），整列放不下就價格在上、數量＋按鈕在下 */
.fx3d.shop-page[data-page="product"] .shop-pd-buybar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding:clamp(16px,1.3vw,28px) clamp(18px,1.6vw,32px);border:1px solid #d3e3f1;border-radius:calc(var(--c-radius) - 8px);background:linear-gradient(160deg,#f8fbff,#ecf4fc);box-shadow:inset 0 2px 0 #fff,inset 0 -3px 0 #dbe8f3}
.fx3d.shop-page[data-page="product"] .shop-pd-price-row{display:flex;flex:1 1 308px;flex-wrap:wrap;align-items:flex-start;gap:10px 12px;min-width:0}
/* 狀態膠囊固定佔「可直接購買」那麼寬（7.4 字），未登入「需報價」與登入後「可直接購買」排法一樣，登入後版面不跳 */
.fx3d.shop-page[data-page="product"] .shop-pd-price-row>.shop-pd-status{flex:0 0 7.4em;margin-top:2px;font-size:16px}
/* 價格區至少放得下「依現場條件報價」一行（7 個價格字），放不下就讓膠囊換到上一行，價格不折行；
   未登入（報價＋說明一行＋登入鍵）與登入後（會員價＋含稅說明最多兩行＋提醒一行）預留同樣高度，登入後版面不跳 */
.fx3d.shop-page[data-page="product"] .shop-pd #product-price{display:flex;flex:1 1 calc(7.1 * clamp(25px,1.55vw,38px));flex-direction:column;align-items:flex-start;gap:6px;min-width:0;min-height:calc(clamp(25px,1.55vw,38px) * 1.3 + 88px)}
.fx3d.shop-page[data-page="product"] .shop-pd #product-price .shop-price{margin:0;font-size:clamp(25px,1.55vw,38px);line-height:1.3}
/* 淡藍底上的小字用深一階灰，對比 4.5 以上 */
.fx3d.shop-page[data-page="product"] .shop-pd #product-price .shop-help{margin:0;color:var(--ink-2);font-size:16px;line-height:1.6}
.fx3d.shop-page[data-page="product"] .shop-pd #product-price .shop-price-note{margin:0;font-size:15px;line-height:1.6}
.fx3d.shop-page[data-page="product"] .shop-pd #product-price .shop-pd-login{height:44px;padding:2px 16px 0;border-radius:11px;border-bottom-width:3px;font-size:16px;text-decoration:none}
.fx3d.shop-page[data-page="product"] .shop-pd #product-price .shop-pd-login::before{content:none}
/* 數量＋加入詢價（＋規格比較的「加入比較」鍵，js/compare.js 插在加入詢價後面）：一列，加入詢價吃剩下的寬 */
.fx3d.shop-page[data-page="product"] .shop-pd-act{display:flex;flex:2 1 316px;flex-wrap:wrap;align-items:center;gap:12px 16px;min-width:0;max-width:680px}
.fx3d.shop-page[data-page="product"] .shop-pd-act>.shop-field{flex:0 0 auto;flex-direction:row;align-items:center;gap:10px}
.fx3d.shop-page[data-page="product"] .shop-pd-act .shop-label{color:var(--ink-2);font-size:16px;font-weight:700;white-space:nowrap}
.fx3d.shop-page[data-page="product"] .shop-pd-act>.shop-action-row{flex:1 1 316px;flex-wrap:wrap;gap:12px;min-width:0}
.fx3d.shop-page[data-page="product"] .shop-pd-act>.shop-action-row>.btn{flex:1 1 auto;width:auto;height:58px;padding-inline:20px;white-space:nowrap}
.fx3d.shop-page[data-page="product"] .shop-pd-act>.shop-action-row>.cmp-toggle{flex:0 0 auto}
.fx3d.shop-page[data-page="product"] .shop-pd .shop-feedback{margin:0}

/* 規格表：名稱小字灰、值黑粗；斑馬底以「列」為單位（shop-pd-shade 由程式依所在列標）、細線分隔；
   右欄寬 600 以下一小欄、600～979 兩小欄、980 以上三小欄；一行放不下的長值由程式移到下方 --wide 整列橫跨 */
.fx3d.shop-page[data-page="product"] .shop-pd-specs{--shop-pd-cg:clamp(16px,1.4vw,30px);display:flex;flex-direction:column;gap:0;min-width:0}
.fx3d.shop-page[data-page="product"] .shop-pd-specs>.shop-pd-h{margin-bottom:10px}
.fx3d.shop-page[data-page="product"] .shop-pd-spec{display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--shop-pd-cg);margin:0;border-top:1px solid #cddeed}
.fx3d.shop-page[data-page="product"] .shop-pd-spec>div,.fx3d.shop-page[data-page="product"] .shop-pd-spec::after{border-bottom:1px solid #dfe9f3}
.fx3d.shop-page[data-page="product"] .shop-pd-spec>div{display:grid;grid-template-columns:minmax(4.8em,36%) minmax(0,1fr);align-items:baseline;gap:12px;padding:8px 14px}
.fx3d.shop-page[data-page="product"] .shop-pd-spec>div.shop-pd-shade,.fx3d.shop-page[data-page="product"] .shop-pd-spec.shop-pd-fill-shade::after{background:#f1f7fd}
.fx3d.shop-page[data-page="product"] .shop-pd-spec dt{color:var(--ink-3);font-size:16px;font-weight:700;line-height:1.5}
.fx3d.shop-page[data-page="product"] .shop-pd-spec dd{margin:0;color:var(--ink);font-size:var(--fs-body);font-weight:700;line-height:1.5;text-wrap:balance}
.fx3d.shop-page[data-page="product"] .shop-pd-spec[data-empty="1"]::after{content:"";grid-column:span 1}
.fx3d.shop-page[data-page="product"] .shop-pd-spec[data-empty="2"]::after{content:"";grid-column:span 2}
/* 整列橫跨的長值：接在上面那張表下面（不另畫上框線），名稱欄寬跟上面第一小欄對齊 */
.fx3d.shop-page[data-page="product"] .shop-pd-spec--wide{border-top:0}
.fx3d.shop-page[data-page="product"] .shop-pd-spec[hidden]{display:none}
.fx3d.shop-page[data-page="product"] .shop-pd-spec--wide[data-cols="2"]>div{grid-template-columns:minmax(4.8em,calc((100% - var(--shop-pd-cg) - 28px) / 2 * .36)) minmax(0,1fr)}
.fx3d.shop-page[data-page="product"] .shop-pd-spec--wide[data-cols="3"]>div{grid-template-columns:minmax(4.8em,calc((100% - 2 * (var(--shop-pd-cg) + 28px)) / 3 * .36)) minmax(0,1fr)}
@container (min-width:600px){.fx3d.shop-page[data-page="product"] .shop-pd-spec:not(.shop-pd-spec--wide){grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:980px){.fx3d.shop-page[data-page="product"] .shop-pd-spec:not(.shop-pd-spec--wide){grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 配送／安裝：小字兩行，名稱一欄對齊 */
.fx3d.shop-page[data-page="product"] .shop-pd .shop-meta{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 14px;margin:0}
.fx3d.shop-page[data-page="product"] .shop-pd .shop-meta>div{display:contents}
.fx3d.shop-page[data-page="product"] .shop-pd .shop-meta dt{color:var(--ink-2);font-size:16px;font-weight:800;line-height:1.6}
.fx3d.shop-page[data-page="product"] .shop-pd .shop-meta dd{margin:0;color:var(--ink-3);font-size:16px;line-height:1.6}

/* 899 以下：單欄，照片寬框在上 */
@media(max-width:899px){
  .fx3d.shop-page[data-page="product"] #product-main>.shop-product-layout.shop-pd{--shop-pd-fit:0;grid-template-columns:minmax(0,1fr)}
  .fx3d.shop-page[data-page="product"] .shop-pd-media{position:static}
  .fx3d.shop-page[data-page="product"] .shop-pd-photo{aspect-ratio:16/10}
  .fx3d.shop-page[data-page="product"] .shop-pd-photo>img{inset:6% 8%;width:84%;height:88%}
}
/* 手機（599 以下）：名稱（頁首）→照片→詢價→規格；照片框回正方形 */
@media(max-width:599px){
  .fx3d.shop-page[data-page="product"] #product-main>.shop-product-layout.shop-pd{row-gap:16px;padding:16px}
  .fx3d.shop-page[data-page="product"] .shop-pd-photo{aspect-ratio:1/1;border-radius:16px}
  .fx3d.shop-page[data-page="product"] .shop-pd-photo>img{inset:7%;width:86%;height:86%}
  .fx3d.shop-page[data-page="product"] .shop-pd>.shop-pd-info{gap:16px}
  .fx3d.shop-page[data-page="product"] .shop-pd-buybar{padding:16px}
  .fx3d.shop-page[data-page="product"] .shop-pd-act{flex-basis:100%;max-width:none}
  .fx3d.shop-page[data-page="product"] .shop-pd-act>.shop-action-row>.btn,.fx3d.shop-page[data-page="product"] .shop-pd-act>.shop-action-row>.cmp-toggle{flex:1 1 100%;height:56px}
  .fx3d.shop-page[data-page="product"] .shop-pd-spec>div{padding:8px 10px}
  .fx3d.shop-page[data-page="product"] .shop-pd .shop-meta{display:flex;flex-direction:column;gap:6px}
  .fx3d.shop-page[data-page="product"] .shop-pd .shop-meta>div{display:block;padding:0;border:0;line-height:1.6}
  .fx3d.shop-page[data-page="product"] .shop-pd .shop-meta :is(dt,dd){display:inline}
  .fx3d.shop-page[data-page="product"] .shop-pd .shop-meta dt{margin-right:.6em}
}
@media(max-width:359px){
  .fx3d.shop-page[data-page="product"] .shop-pd-act .shop-quantity{gap:6px}
  .fx3d.shop-page[data-page="product"] .shop-pd-act .shop-quantity .btn{flex-basis:44px;width:44px}
  .fx3d.shop-page[data-page="product"] .shop-pd-act .shop-quantity input{width:50px}
}

/* ===== 產品頁頁首壓矮（2026-10-07 老闆決定：第一眼多看到規格）=====
   只限產品頁 #product-intro（其他頁的頁首不動）：高度改「依內容」（麵包屑＋品名，品名最多三行也完整），
   不再用全站同高的 --hero-h；右側 3D 舞台跟著變矮（取景以舞台高度為準，等比例縮小）；頁首上下的留白一起收小。
   手機：3D 舞台貼齊卡片上緣（跟其他頁一樣），品名下面不再留一大段空白。 */
.fx3d.fx3d.shop-page[data-page="product"] #product-intro{padding-top:clamp(12px,1vw,24px)}
.fx3d.fx3d.shop-page[data-page="product"] #product-intro .page-hero__card{height:auto;min-height:clamp(150px,calc(6vw + 80px),220px)}
.fx3d.fx3d.shop-page[data-page="product"] #product-intro+.page-section{padding-top:clamp(16px,1.4vw,32px)}
@media(max-width:600px){
 .fx3d.fx3d.shop-page[data-page="product"] #product-intro .page-hero__card{min-height:0;grid-template-rows:120px auto;padding-top:0}
}
/* 分類頁合併卡的電壓膠囊（2026-10-09 同款不同電壓合成一張卡）：規格區固定三排高不變，電壓膠囊可佔兩排、只在電壓之間換行，下面接一顆風量 */
.fx3d.fx3d.shop-page[data-page="category"] .shop-product-card .shop-chips .chip.shop-chip-volts{height:auto;max-height:71px;line-height:30px;white-space:normal;text-overflow:clip}
.shop-chip-volts>span{white-space:nowrap}

/* ==== css/header.css ==== */
/* 全站八組共用頁首；桌機與手機共用唯一的預約按鈕。 */
.site-header{position:sticky;top:0;z-index:40;overflow:visible;background:var(--white);box-shadow:0 10px 24px -20px rgba(15,39,71,.3)}
.header-inner{display:flex;align-items:center;gap:clamp(8px,.65vw,20px);overflow:visible}
.site-header .site-nav{position:relative;flex:1 1 auto;min-width:0;overflow:visible}
.site-nav__inner{display:flex;align-items:center;flex-wrap:nowrap;gap:clamp(8px,.65vw,20px);padding-block:16px;overflow:visible}
.site-header .site-brand{display:flex;align-items:center;flex:0 0 auto;gap:8px;margin:0;text-decoration:none}
.site-header .site-brand img{width:clamp(42px,2.5vw,64px);height:auto}
.site-header .site-brand__name{color:var(--ink);font-size:clamp(18px,.95vw,28px);font-weight:800;line-height:1.25;white-space:nowrap}
.site-header .primary-nav{display:flex;align-items:center;justify-content:center;flex:1 1 auto;min-width:0;gap:0}
.nav-menu{display:flex;align-items:center;flex-wrap:nowrap;gap:clamp(8px,calc(8px + (100vw - 1200px)/180),14px);margin:0;padding:0;list-style:none}
.nav-item{position:relative;flex:0 0 auto}
.site-header .btn{height:56px;box-sizing:border-box;text-decoration:none}
.site-header .nav-link{padding-inline:clamp(6px,calc(6px + (100vw - 1200px)/110),16px);font-size:clamp(16px,.88vw,19px)}
.site-header .header-actions{display:flex;align-items:center;flex:0 0 auto;gap:clamp(6px,.45vw,12px)}
.list-link{gap:8px;box-sizing:border-box}
.list-link [data-list-count]{display:inline-flex;align-items:center;justify-content:center;min-width:25px;height:26px;padding:0 7px;border-radius:20px;background:var(--brand);color:var(--white);font-size:14px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.site-header .list-link--icon{position:relative;width:64px;padding:5px 4px 0 0}
.list-link--icon svg{width:26px;height:26px;flex:0 0 26px}
.list-link--icon .list-count{position:absolute;top:2px;right:2px;min-width:22px;height:20px;padding-inline:5px}
.list-link--compact{display:none}
/* 縮小時清單鈕只留購物車圖示＋數字、選單鈕只留三條線（老闆 2026-10-04） */
.list-link--compact svg{width:26px;height:26px;flex:0 0 26px}
.list-link--compact .list-count{position:absolute;top:3px;right:3px;min-width:21px;height:20px;padding-inline:5px;font-size:13px}
.nav-link[aria-current="page"],
.mobile-menu__nav .btn[aria-current="page"],
.list-link[aria-current="page"]{--button-edge:var(--brand-d);background:linear-gradient(var(--brand-2),var(--brand));color:var(--white);border-color:rgba(1,78,142,.35);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 16px -8px rgba(2,103,185,.55)}
.nav-link[aria-current="page"],.mobile-menu__nav .btn[aria-current="page"]{transform:translateY(1px)}
.list-link[aria-current="page"] [data-list-count]{background:var(--white);color:var(--brand-d)}

/* 透明橋覆蓋十像素間隙；隱藏子項不進入滑鼠與鍵盤操作。 */
.nav-sub{position:absolute;top:calc(100% + 10px);left:50%;z-index:1;min-width:180px;width:max-content;margin:0;padding:8px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);box-shadow:var(--depth-2);list-style:none;transform:translateX(-50%);visibility:hidden;opacity:0;pointer-events:none;transition:opacity 120ms,visibility 120ms}
.nav-sub::before{content:"";position:absolute;left:-1px;right:-1px;top:-13px;height:13px;background:transparent}
.nav-sub::after{content:"";position:absolute;top:0;left:14px;right:14px;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--brand),var(--sky));pointer-events:none}
.nav-item:hover>.nav-sub,.nav-item:focus-within>.nav-sub{visibility:visible;opacity:1;pointer-events:auto}
/* 滑鼠指到哪一項就只開那一項（鍵盤焦點留在別項時，不要同時開兩個） */
.nav-menu:hover>.nav-item:not(:hover)>.nav-sub{visibility:hidden;opacity:0;pointer-events:none}
.nav-sub a{display:block;padding:10px 14px;border-radius:8px;color:var(--ink-2);font-size:clamp(16px,.74vw,19px);line-height:1.5;white-space:nowrap;text-decoration:none}
.nav-sub a:hover,.nav-sub a:focus-visible{background:var(--tint);color:var(--brand);text-decoration:none}

/* 桌機只顯示手機容器內的共用預約按鈕，不複製第二顆。 */
.site-header .mobile-menu,.site-header .mobile-menu[hidden],.site-header .mobile-menu__inner{display:contents}
.site-header .mobile-menu__head,.site-header .mobile-menu__nav{display:none}
.mobile-menu__actions{display:flex;align-items:center;flex:0 0 auto;gap:14px}
.mobile-menu__actions>.btn{width:100%;padding-inline:clamp(8px,.65vw,16px);font-size:clamp(16px,.88vw,19px)}
.menu-toggle{display:none}
.menu-toggle__lines{display:flex;flex-direction:column;gap:4px;width:20px}
.menu-toggle__lines span{display:block;width:20px;height:2px;border-radius:2px;background:currentColor}

@media(max-width:1535.98px){
  .header-inner{display:block}
  .site-nav__inner{flex-wrap:nowrap;gap:14px}
  .site-header .site-brand{margin-right:auto}
  .site-header .site-brand img{width:52px}
  .site-header .site-brand__name{font-size:22px}
  .site-header .primary-nav,.site-header .header-actions{display:none}
  .site-header .list-link--compact{display:inline-flex;position:relative;width:52px;height:52px;padding:5px 4px 0 0}
  .site-header .menu-toggle{display:inline-flex;width:52px;height:52px;padding:0;margin-left:0}
  .menu-toggle__lines,.menu-toggle__lines span{width:22px}
  .site-header .mobile-menu,.site-header .mobile-menu[hidden]{display:none}
  .site-header .mobile-menu.is-open:not([hidden]){position:fixed;inset:0;z-index:100;display:block;overflow-y:auto;background:var(--white);overscroll-behavior:contain}
  .site-header .mobile-menu__inner{display:flex;flex-direction:column;gap:24px;padding-block:24px 40px;min-height:100dvh}
  .site-header .mobile-menu__head{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .site-header .mobile-menu__nav{display:grid;gap:16px}
  .mobile-menu__nav .btn{width:100%}
  .mobile-menu__actions{display:flex;flex-wrap:wrap;gap:14px}
  .mobile-menu__actions>.btn{font-size:19px;padding-inline:22px}
  body.menu-open{overflow:hidden}
}
@media(max-width:900px){
  .site-nav__inner{flex-wrap:nowrap}
}
@media(max-width:600px){
  .site-nav__inner{gap:8px;padding-block:12px}
  .site-header .site-brand{gap:6px;min-width:0}
  .site-header .site-brand img{width:36px}
  .site-header .site-brand__name{font-size:18px}
  .site-header .btn{height:52px}
  .site-header .list-link--compact{width:48px;height:48px}
  .list-link--compact svg{width:24px;height:24px;flex-basis:24px}
  .list-link--compact .list-count{top:2px;right:2px;min-width:19px;height:18px;padding-inline:4px;font-size:12px}
  .site-header .menu-toggle{width:48px;height:48px}
  .menu-toggle__lines,.menu-toggle__lines span{width:20px}
  .mobile-menu__actions{display:grid;grid-template-columns:1fr}
}
@media(min-width:1921px){
  .site-nav__inner{padding-block:22px}
}

/* 手機八組導覽，各組的次分類完整換行呈現。 */
@media(max-width:1535.98px){
  .mobile-menu__group{display:grid;gap:12px;min-width:0}
  .mobile-menu__subnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr));gap:10px}
  .site-header .mobile-menu__subnav .btn{min-height:44px;height:auto;padding:10px 12px;font-size:clamp(16px,1.5vw,18px);line-height:1.5;white-space:normal;text-align:center}
}

/* 頁首會員入口（2026-10-04 老闆規格）：放在購物車與橘色預約鈕之間。
   未登入＝立體按鈕「會員登入」、已登入沒頭像＝「會員中心」、有頭像＝圓形頭像（跟購物車鈕同大小、同一套立體外框）；空間不夠時縮成人像＋「會員」。
   手機頂列同樣一顆，手機選單第一項放「會員登入／會員中心」。 */
.member-link{position:relative;box-sizing:border-box;gap:6px;white-space:nowrap}
.member-link svg{width:22px;height:22px;flex:0 0 22px}
.member-link__text{display:inline-flex}
.member-link__short{display:none}
.member-link__avatar{display:none;width:34px;height:34px;flex:0 0 34px;border-radius:50%;object-fit:cover;background:var(--tint);box-shadow:0 0 0 2px var(--white),0 0 0 3px var(--line)}
.member-link.has-avatar .member-link__avatar{display:block}
.member-link.has-avatar svg{display:none}
.site-header .member-link--icon.has-avatar .member-link__text,.site-header .member-link--compact.has-avatar .member-link__text{display:none}
.member-link[aria-current="page"]{--button-edge:var(--brand-d);background:linear-gradient(var(--brand-2),var(--brand));color:var(--white);border-color:rgba(1,78,142,.35);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 16px -8px rgba(2,103,185,.55)}
.site-header .member-link--icon{padding:3px 14px 0;font-size:clamp(16px,.88vw,19px);font-weight:800}
.site-header .member-link--icon.has-avatar{width:64px;padding:0}
.member-link--compact,.member-link--menu{display:none}
.fx3d .site-header .member-link--icon{height:48px}
.fx3d .site-header .member-link--icon.has-avatar{width:50px}
@media(min-width:1536px){.fx3d .site-header .member-link--icon{height:50px;border-radius:13px}.fx3d .site-header .member-link--icon.has-avatar{width:52px}}
@media(min-width:1800px){.fx3d .site-header .member-link--icon{height:56px;font-size:20px}}
@media(max-width:1535.98px){
  .site-header .member-link--compact{display:inline-flex;height:52px;padding:3px 14px 0;font-size:17px;font-weight:800}
  .site-header .member-link--compact.has-avatar{width:52px;padding:0}
  .fx3d .site-header .member-link--compact{border-radius:13px;border-bottom-width:3px}
  .site-header .mobile-menu__nav .member-link--menu{display:flex;grid-column:1/-1;gap:10px;font-weight:800}
  .member-link--menu .member-link__avatar{width:30px;height:30px;flex-basis:30px}
}
@media(max-width:600px){
  .site-header .member-link--compact{height:48px;padding:3px 10px 0;gap:4px;font-size:16px}
  .site-header .member-link--compact.has-avatar{width:48px}
  .fx3d .site-header .member-link--compact{height:44px}
  .fx3d .site-header .member-link--compact.has-avatar{width:44px}
  .member-link--compact .member-link__full{display:none}
  .member-link--compact .member-link__short{display:inline}
  .member-link--compact svg{width:20px;height:20px;flex-basis:20px}
  .member-link--compact .member-link__avatar{width:30px;height:30px;flex-basis:30px}
}
/* 1535 以下收成選單鈕（老闆 2026-10-06：視窗小時整排按鍵很擠，提早改選單鈕）；1536 以上才整排顯示。
   改這個寬度要一起改 theme-3d.css 的頁首段與 assets/base.js 的 matchMedia。 */
/* 小螢幕（1535 以下，頁首收成選單時）：會員鈕只留人像圖示、不放文字，做成跟購物車鈕一樣的正方形（老闆 2026-10-04） */
@media(max-width:1535.98px){.site-header .member-link--compact{width:auto;aspect-ratio:1;padding:0;justify-content:center}.site-header .member-link--compact .member-link__text{display:none}.site-header .member-link--compact svg{width:24px;height:24px;flex-basis:24px}}

/* ==== css/footer.css ==== */
/* 全站共用頁尾「品牌光帶」（2026-10-03 老闆選定）：深海軍藍底，背後是 three.js 的立體光帶（取自商標兩道弧線，程式 js/footer3d.js），
   文字一律在一般 HTML 層。頁尾內容由 _tools/footer_build.py 產生，每頁逐字相同；頁尾樣式只寫在這個檔。
   2026-10-09 老闆三版比稿選定「乙 名片版」（.ftr--b 段）：左公司資料名片卡＋服務專線大鈕、右網站地圖。 */
.ftr{
  --g:clamp(14px,1.15vw,26px);
  --r:clamp(18px,1.4vw,28px);
  position:relative;isolation:isolate;overflow:hidden;
  margin:0;padding-block:clamp(56px,4.4vw,100px) 20px;border:0;
  color:#fff;font-size:16px;line-height:1.7;
  background:
    radial-gradient(70% 90% at 12% 0%,#0d4f8f 0%,#0d4f8f00 62%),
    radial-gradient(60% 70% at 100% 100%,#0b3f78 0%,#0b3f7800 60%),
    linear-gradient(180deg,#06264b 0%,#041c38 52%,#031429 100%);
}
.ftr::before{content:"";position:absolute;inset:0 0 auto;height:2px;z-index:1;background:linear-gradient(90deg,#4fc0f000,#7fd3ff 22%,#ffffff 50%,#7fd3ff 78%,#4fc0f000);box-shadow:0 0 28px 6px #4fc0f055;pointer-events:none}
.ftr a{color:inherit;text-decoration:none}
.ftr a:focus-visible{outline:3px solid #a9d9f7;outline-offset:4px}
.ftr .nw{white-space:nowrap}
.ftr-sky{position:absolute;inset:0;z-index:-1;pointer-events:none}
.ftr-flow{display:block;width:100%;height:100%;opacity:0;transition:opacity 1.4s ease}
.ftr-flow.is-live{opacity:1}
.ftr-inner{position:relative;container:ftr/inline-size}

/* 第一排：品牌＋三顆主要聯絡鍵 */
.ftr-head{display:grid;grid-template-columns:minmax(300px,.92fr) minmax(0,3fr);align-items:stretch;gap:var(--g)}
.ftr-brand{display:flex;align-items:center;gap:clamp(16px,1.2vw,26px);min-width:0;padding-block:6px;transition:transform .25s}
.ftr-brand:hover{transform:translateY(-3px)}
.ftr-brand img{flex:0 0 auto;width:clamp(78px,5.2vw,120px);height:auto;filter:drop-shadow(0 12px 22px #00060fcc)}
.ftr-brand__text{display:flex;flex-direction:column;gap:4px;min-width:0}
.ftr-brand__text strong{font-size:clamp(22px,1.45vw,34px);font-weight:800;line-height:1.35;letter-spacing:.03em;white-space:nowrap;text-shadow:0 2px 12px #0008}
.ftr-brand__text span{color:#a9d9f7;font-size:clamp(16px,.8vw,18px)}
.ftr-keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);margin:0;padding:0;list-style:none}
.ftr-keys li{display:flex;min-width:0}
.ftr-key{display:flex;align-items:center;gap:clamp(12px,1vw,20px);width:100%;min-width:0;padding:clamp(16px,1.25vw,28px) clamp(16px,1.3vw,30px);border:1px solid #a6dbff40;border-bottom:5px solid #01152b;border-radius:var(--r);background:linear-gradient(160deg,#ffffff2e,#ffffff0d 58%,#ffffff05),linear-gradient(180deg,#0d3a6af2,#082c55f5);box-shadow:inset 0 1px 0 #ffffff66,inset 0 -1px 0 #ffffff14,0 22px 34px -20px #000e;transition:transform .2s,box-shadow .2s,background .2s,border-bottom-width .12s}
.ftr-key:hover{transform:translateY(-4px);background:linear-gradient(160deg,#ffffff3d,#ffffff14 58%,#ffffff08),linear-gradient(180deg,#0f4074f2,#0a3260f5);box-shadow:inset 0 1px 0 #ffffff80,0 0 0 1px #7fd3ff59,0 28px 40px -20px #000e,0 0 36px -8px #4fc0f066}
.ftr-key:active{transform:translateY(2px);border-bottom-width:2px}
.ftr-key__body{display:flex;flex-direction:column;min-width:0}
.ftr-key::after{content:"";flex:0 0 auto;width:38px;height:38px;margin-left:auto;border:1px solid #a6dbff4d;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat,linear-gradient(180deg,#ffffff2e,#ffffff0d);box-shadow:inset 0 1px 0 #ffffff4d;transition:transform .2s,background-color .2s}
.ftr-key:hover::after{transform:translateX(3px);background-color:#1e88e5}
.ftr-lbl{display:block;color:#a9d9f7;font-size:clamp(16px,.8vw,18px);line-height:1.5;white-space:nowrap}
.ftr-key__val{font-size:clamp(20px,1.15vw,28px);font-weight:800;line-height:1.35;letter-spacing:.01em;white-space:nowrap}
.ftr-ico{flex:0 0 auto;display:grid;place-items:center;width:clamp(46px,2.9vw,60px);height:clamp(46px,2.9vw,60px);border:1px solid #ffffff8c;border-bottom:3px solid #014e8e;border-radius:clamp(13px,.85vw,17px);background:linear-gradient(145deg,#86dcfc,#1e88e5 55%,#0267b9);box-shadow:inset 0 1px 0 #ffffffb3,0 10px 18px -8px #000c}
.ftr-ico svg{width:46%;height:46%;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}


/* 第二排：玻璃網站地圖 */
.ftr-map{margin-top:var(--g);padding:clamp(22px,2vw,46px);border:1px solid #a6dbff33;border-radius:var(--r);background:linear-gradient(160deg,#0e3c6dd9,#072a50c7 55%,#05203fcc);box-shadow:inset 0 1px 0 #ffffff33,inset 0 -5px 0 #000f2299,0 34px 54px -32px #000e}
.ftr-map{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(22px,1.8vw,40px) clamp(14px,1.3vw,30px)}
.ftr-group{min-width:0}
/* 網站地圖排法（2026-10-05 產品、服務拆成兩組）：服務與產業應用、安裝實績與影音專區、線上選購與聯絡我們各疊在同一欄，讓每欄高度接近 */
.ftr-map{grid-template-rows:auto 1fr}
.ftr-group{grid-row:1/3}
.ftr-group--about{grid-column:1}.ftr-group--products{grid-column:2}.ftr-group--services{grid-column:3;grid-row:1}.ftr-group--apps{grid-column:3;grid-row:2}.ftr-group--projects{grid-column:4;grid-row:1}.ftr-group--videos{grid-column:4;grid-row:2}
.ftr-group--downloads{grid-column:5}.ftr-group--shop{grid-column:6;grid-row:1}.ftr-group--contact{grid-column:6;grid-row:2}.ftr-group--faq{grid-column:7}
.ftr-group__title{color:#fff}
.ftr-group__title{margin:0 0 12px;font-size:clamp(17px,.92vw,21px);line-height:1.4}
.ftr-group__title a{display:flex;align-items:center;gap:9px;min-height:46px;padding:8px 14px;border:1px solid #a6dbff47;border-bottom:3px solid #011a35;border-radius:13px;background:linear-gradient(180deg,#ffffff26,#ffffff0a);box-shadow:inset 0 1px 0 #ffffff4d,0 10px 16px -12px #000e;font-weight:800;white-space:nowrap;transition:transform .18s,background .18s,box-shadow .18s,border-bottom-width .12s}
.ftr-group__title a::before{content:"";flex:0 0 8px;width:8px;height:8px;border-radius:3px;background:linear-gradient(145deg,#a9e6ff,#1e88e5);box-shadow:0 0 10px #4fc0f0}
.ftr-group__title a:hover{transform:translateY(-3px);background:linear-gradient(180deg,#ffffff38,#ffffff12);box-shadow:inset 0 1px 0 #ffffff66,0 0 0 1px #7fd3ff4d,0 14px 20px -12px #000e}
.ftr-group__title a:active{transform:translateY(1px);border-bottom-width:1px}
.ftr-group__list{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.ftr-group__list a{position:relative;display:flex;align-items:center;min-height:40px;padding:6px 10px 6px 18px;border:1px solid transparent;border-radius:11px;color:#cfe6fb;font-size:clamp(16px,.74vw,18px);line-height:1.5;word-break:keep-all;overflow-wrap:anywhere;transition:color .16s,background .16s,box-shadow .16s,transform .16s}
.ftr-group__list a::before{content:"";position:absolute;left:8px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#4fc0f0;opacity:.65;transition:opacity .16s,box-shadow .16s}
.ftr-group__list a:hover{transform:translateY(-1px);border-color:#a6dbff33;background:linear-gradient(180deg,#ffffff21,#ffffff0b);box-shadow:inset 0 1px 0 #ffffff33,0 8px 14px -10px #000c;color:#fff}
.ftr-group__list a:hover::before{opacity:1;box-shadow:0 0 8px #7fd3ff}
.ftr-group__list a:active{transform:translateY(1px)}

/* 第三排：地址、傳真、營業時間 */
.ftr-info{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.72fr) minmax(0,1.7fr);margin:var(--g) 0 0;padding:0;list-style:none;border:1px solid #a6dbff33;border-radius:var(--r);background:linear-gradient(160deg,#0e3c6dc7,#062849b8);box-shadow:inset 0 1px 0 #ffffff2e,inset 0 -4px 0 #000f2280,0 26px 44px -30px #000d}
.ftr-ci{display:flex;align-items:center;justify-content:center;gap:16px;min-width:0;padding:clamp(16px,1.25vw,26px) clamp(18px,1.45vw,32px)}
.ftr-ci+.ftr-ci{border-left:1px solid #a6dbff29}
.ftr-ci .ftr-ico{width:46px;height:46px;border-radius:13px}
.ftr-ci__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.ftr-val{display:block;color:#fff;font-size:clamp(16px,.86vw,19px);font-weight:700;line-height:1.65}
a.ftr-val{display:inline-block;border-radius:8px;transition:color .16s,text-shadow .16s}
a.ftr-val:hover{color:#fff;text-shadow:0 0 14px #7fd3ffcc}
.ftr-ci--clock .ftr-val{font-weight:600}
.ftr-ci--clock .hl+.hl::before{content:" "}

/* 底列：社群、版權、網站資訊（右側讓出 LINE 浮動鈕） */
.ftr-bottom{display:flex;align-items:center;flex-wrap:wrap;gap:14px 28px;margin-top:clamp(22px,1.7vw,36px);padding-top:20px;padding-right:max(0px,calc(150px - (100vw - 100%) / 2));border-top:1px solid #a6dbff29}
.ftr-social{display:flex;align-items:center;gap:12px}
.ftr-social__label{margin-right:4px;font-weight:700;color:#dff1ff}
.ftr .ftr-soc{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border:1px solid #fff;border-bottom:3px solid #8db6d6;border-radius:50%;background:linear-gradient(180deg,#fff,#dcecf9);color:#0267b9;box-shadow:0 10px 18px -8px #000d;transition:transform .18s,box-shadow .18s,border-bottom-width .12s}
.ftr-soc:hover{transform:translateY(-3px);box-shadow:0 14px 22px -8px #000e,0 0 0 4px #7fd3ff33}
.ftr-soc:active{transform:translateY(1px);border-bottom-width:1px}
.ftr-soc svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ftr-copy{margin:0 0 0 auto;color:#cfe6fb;font-size:clamp(16px,.72vw,17px)}
.ftr-legal{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ftr-legal a{display:flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid #a6dbff40;border-bottom:3px solid #011a35;border-radius:12px;background:linear-gradient(180deg,#ffffff21,#ffffff08);box-shadow:inset 0 1px 0 #ffffff40;font-size:16px;font-weight:700;white-space:nowrap;transition:transform .18s,background .18s,border-bottom-width .12s}
.ftr-legal a:hover{transform:translateY(-2px);background:linear-gradient(180deg,#ffffff33,#ffffff12)}
.ftr-legal a:active{transform:translateY(1px);border-bottom-width:1px}

/* 寬度細分：依頁尾內容寬度（band）切換，320～2560 連續調整 */
@container ftr (max-width:1649px){
  .ftr-map{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto auto auto}
  .ftr-group--about{grid-column:1;grid-row:1/3}.ftr-group--products{grid-column:2;grid-row:1/3}.ftr-group--services{grid-column:3;grid-row:1/3}.ftr-group--apps{grid-column:4;grid-row:1/3}
  .ftr-group--projects{grid-column:1;grid-row:3}.ftr-group--videos{grid-column:1;grid-row:4}.ftr-group--downloads{grid-column:2;grid-row:3/5}.ftr-group--shop{grid-column:3;grid-row:3}.ftr-group--contact{grid-column:3;grid-row:4}.ftr-group--faq{grid-column:4;grid-row:3/5}
}
@container ftr (max-width:1799px){
  .ftr-head{grid-template-columns:minmax(0,1fr)}
  .ftr-brand{padding-block:0 4px}
}
@container ftr (max-width:1079px){
  .ftr-key{flex-direction:column;align-items:flex-start;gap:12px}
  .ftr-key::after{display:none}
}
@container ftr (max-width:1049px){
  .ftr-ci{justify-content:flex-start}
  .ftr-info{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ftr-ci.ftr-ci--clock{grid-column:1/-1;border-left:0;border-top:1px solid #a6dbff29}
}
@container ftr (max-width:860px){
  .ftr-copy{flex-basis:100%;order:3;margin:0}
  .ftr-legal{margin-left:auto}
}
@container ftr (max-width:759px){
  .ftr-keys{grid-template-columns:minmax(0,1fr)}
  .ftr-key{flex-direction:row;align-items:center}
  .ftr-key::after{display:block;width:34px;height:34px}
}
@container ftr (max-width:599px){
  .ftr-map{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
  .ftr-map{grid-template-rows:auto auto auto auto auto auto}
  .ftr-group--about{grid-column:1;grid-row:1}.ftr-group--apps{grid-column:2;grid-row:1}
  .ftr-group--products{grid-column:1;grid-row:2/4}.ftr-group--services{grid-column:2;grid-row:2}.ftr-group--contact{grid-column:2;grid-row:3}
  .ftr-group--projects{grid-column:1;grid-row:4}.ftr-group--videos{grid-column:2;grid-row:4}
  .ftr-group--downloads{grid-column:1;grid-row:5}.ftr-group--shop{grid-column:2;grid-row:5}
  .ftr-group--faq{grid-column:1/-1;grid-row:6}
  .ftr-info{grid-template-columns:minmax(0,1fr)}
  .ftr-ci+.ftr-ci{border-left:0;border-top:1px solid #a6dbff29}
  .ftr-brand img{width:68px}
  .ftr-brand__text strong{font-size:21px}
  .ftr-social{flex-wrap:wrap}
  .ftr-legal{margin-left:0}
}
@container ftr (max-width:400px){
  .ftr-group__title a{padding:8px 10px;gap:7px;font-size:16px}
  .ftr-group__list a{padding-left:16px;padding-right:6px}
  .ftr-group__list a::before{left:6px}
  .ftr-ci{padding:14px 16px;gap:12px}
}
@media (max-width:899px){.ftr{padding-top:48px}}
@media (max-width:640px){.ftr-group__list a{min-height:44px}}
@media (max-width:600px){.ftr-bottom{padding-right:84px}}
@container ftr (max-width:419px){.ftr-key::after{display:none!important}.ftr-key__val{font-size:18px}}

/* ===== 乙 名片版（2026-10-09 老闆選定）===== */
/* 服務專線大按鈕 */
.ftr .ftr-hot{display:flex;align-items:center;gap:16px;margin-top:auto;padding:clamp(16px,1.2vw,24px) clamp(18px,1.3vw,28px);border:1px solid #ffd27a66;border-bottom:5px solid #7a4504;border-radius:var(--r);background:linear-gradient(160deg,#ffffff1a,#ffffff08 55%,#ffffff03),linear-gradient(180deg,#e38a0f,#b45309);box-shadow:inset 0 1px 0 #ffffff8c,0 0 34px -6px #f59e0b99,0 22px 34px -20px #000e;color:#fff;transition:transform .2s,box-shadow .2s,border-bottom-width .12s}
.ftr .ftr-hot:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 #ffffff8c,0 0 44px -4px #f59e0bcc,0 28px 40px -20px #000e}
.ftr .ftr-hot:active{transform:translateY(2px);border-bottom-width:2px}
.ftr .ftr-hot .ftr-ico{width:56px;height:56px;border-color:#fff;border-bottom-color:#9a5a05;background:linear-gradient(145deg,#fff1cc,#ffd27a 60%,#f0a62a)}
.ftr .ftr-hot .ftr-ico svg{stroke:#7a4504}
.ftr .ftr-hot .ftr-lbl{color:#fff;white-space:normal;text-shadow:0 1px 2px #0006}
.ftr .ftr-hot__body{display:flex;flex-direction:column;min-width:0}
.ftr .ftr-hot__val{font-size:clamp(24px,1.5vw,32px);font-weight:800;line-height:1.25;white-space:nowrap;text-shadow:0 1px 3px #0006}
.ftr .ftr-hot__go{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;margin-left:auto;border:1px solid #ffffff8c;border-bottom:3px solid #c98a2a;border-radius:50%;background:linear-gradient(180deg,#fff,#ffe9bf);color:#7a4504;font-size:0;box-shadow:0 8px 14px -8px #000c}
.ftr .ftr-hot__go::after{content:"›";font-size:26px;font-weight:800;line-height:1;transform:translateY(-1px)}

/* ===== 乙 名片版：上排品牌＋定位句；中段左名片卡、右地圖 ===== */
.ftr--b .ftr-head{grid-template-columns:auto minmax(0,1fr);align-items:center}
.ftr--b .ftr-slogan{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin:0;text-align:right;color:#fff;font-size:clamp(20px,1.3vw,30px);font-weight:800;letter-spacing:.04em;text-shadow:0 2px 18px #000e,0 0 2px #000}
.ftr--b .ftr-slogan span{color:#a9d9f7;font-size:clamp(15px,.8vw,18px);font-weight:600;letter-spacing:.06em}
.ftr--b .ftr-body{display:grid;grid-template-columns:minmax(340px,1.05fr) minmax(0,3fr);gap:var(--g);margin-top:var(--g)}
.ftr--b .ftr-map{margin-top:0;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto 1fr}
.ftr--b .ftr-group--about{grid-column:1;grid-row:1}.ftr--b .ftr-group--projects{grid-column:1;grid-row:2}
.ftr--b .ftr-group--products{grid-column:2;grid-row:1}.ftr--b .ftr-group--videos{grid-column:2;grid-row:2}
.ftr--b .ftr-group--services{grid-column:3;grid-row:1}.ftr--b .ftr-group--apps{grid-column:3;grid-row:2}
.ftr--b .ftr-group--downloads{grid-column:4;grid-row:1}.ftr--b .ftr-group--shop{grid-column:4;grid-row:2}
.ftr--b .ftr-group--contact{grid-column:5;grid-row:1}.ftr--b .ftr-group--faq{grid-column:5;grid-row:2}
.ftr--b .ftr-vcard{display:flex;flex-direction:column;gap:14px;padding:clamp(20px,1.6vw,32px);border:1px solid #a6dbff40;border-bottom:5px solid #01152b;border-radius:var(--r);background:linear-gradient(160deg,#ffffff24,#ffffff0a 58%,#ffffff04),linear-gradient(180deg,#0d3a6af2,#082c55f5);box-shadow:inset 0 1px 0 #ffffff66,0 34px 54px -32px #000e}
.ftr--b .ftr-vcard__title{color:#fff;display:flex;align-items:center;gap:9px;margin:0 0 4px;font-size:clamp(17px,.95vw,21px);font-weight:800}
.ftr--b .ftr-vcard__title::before{content:"";width:8px;height:8px;border-radius:3px;background:linear-gradient(145deg,#a9e6ff,#1e88e5);box-shadow:0 0 10px #4fc0f0}
.ftr--b .ftr-vcard__list{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.ftr--b .ftr-ci{justify-content:flex-start;gap:14px;padding:10px 6px;border:0!important;border-radius:12px}
.ftr--b .ftr-ci+.ftr-ci{border-top:1px solid #a6dbff24!important;border-radius:0}
.ftr--b .ftr-ci .ftr-ico{width:42px;height:42px;border-radius:12px}
.ftr--b .ftr-val{max-width:100%;font-size:clamp(16px,.9vw,19px);overflow-wrap:anywhere}
.ftr--b .ftr-ci--clock .ftr-val .hl{display:block}
.ftr--b .ftr-ci--clock .hl+.hl::before{content:none}
@container ftr (max-width:1399px){
  .ftr--b .ftr-body{grid-template-columns:minmax(0,1fr)}
  .ftr--b .ftr-vcard{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px clamp(20px,2vw,40px)}
  .ftr--b .ftr-vcard__title{grid-column:1/-1}
  .ftr--b .ftr-vcard__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px}
  .ftr--b .ftr-ci+.ftr-ci{border-top:0!important}
  .ftr--b .ftr-ci--clock{grid-column:1/-1}
  .ftr--b .ftr-hot{margin-top:0;align-self:center;min-width:300px}
  .ftr--b .ftr-map{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@container ftr (max-width:1079px){
  .ftr--b .ftr-head{grid-template-columns:minmax(0,1fr)}
  .ftr--b .ftr-slogan{align-items:flex-start;text-align:left}
  .ftr--b .ftr-vcard__list{grid-template-columns:minmax(0,1fr)}
  .ftr--b .ftr-ci+.ftr-ci{border-top:1px solid #a6dbff24!important}
  .ftr--b .ftr-map{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto auto}
  .ftr--b .ftr-group--about{grid-column:1;grid-row:1}.ftr--b .ftr-group--products{grid-column:2;grid-row:1}.ftr--b .ftr-group--services{grid-column:3;grid-row:1}.ftr--b .ftr-group--apps{grid-column:4;grid-row:1/3}
  .ftr--b .ftr-group--projects{grid-column:1;grid-row:2}.ftr--b .ftr-group--videos{grid-column:2;grid-row:2}.ftr--b .ftr-group--downloads{grid-column:3;grid-row:2}
  .ftr--b .ftr-group--shop{grid-column:1;grid-row:3}.ftr--b .ftr-group--contact{grid-column:2;grid-row:3}.ftr--b .ftr-group--faq{grid-column:3/5;grid-row:3}
}
@container ftr (max-width:759px){
  .ftr--b .ftr-vcard{grid-template-columns:minmax(0,1fr)}
  .ftr--b .ftr-vcard__list{grid-template-columns:minmax(0,1fr)}
  .ftr--b .ftr-ci+.ftr-ci{border-top:1px solid #a6dbff24!important}
  .ftr--b .ftr-hot{min-width:0}
}
@container ftr (max-width:599px){
  .ftr--b .ftr-map{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto auto auto}
  .ftr--b .ftr-group--about{grid-column:1;grid-row:1}.ftr--b .ftr-group--products{grid-column:2;grid-row:1}
  .ftr--b .ftr-group--services{grid-column:1;grid-row:2}.ftr--b .ftr-group--apps{grid-column:2;grid-row:2/4}
  .ftr--b .ftr-group--projects{grid-column:1;grid-row:3}
  .ftr--b .ftr-group--videos{grid-column:1;grid-row:4}.ftr--b .ftr-group--downloads{grid-column:2;grid-row:4}
  .ftr--b .ftr-group--shop{grid-column:1;grid-row:5}.ftr--b .ftr-group--contact{grid-column:2;grid-row:5}
  .ftr--b .ftr-group--faq{grid-column:1/-1;grid-row:6}
}

@container ftr (max-width:419px){.ftr--b .ftr-hot__go{display:none}.ftr--b .ftr-hot__val{font-size:22px}}
/* 服務專線 0809 只給市話撥（老闆 2026-10-09）：寬度 760 以上顯示 0809 大鈕；759 以下（手機）換成公司電話大鈕，名片卡裡的公司電話列收起 */
.ftr .ftr-hot--mobile{display:none}
@container ftr (max-width:759px){
  .ftr .ftr-hot--pc{display:none}
  .ftr .ftr-hot--mobile{display:flex}
  .ftr--b .ftr-ci--phone{display:none}
}
@container ftr (max-width:359px){.ftr--b .ftr-hot__val{font-size:19px}.ftr--b .ftr-hot{gap:12px;padding-inline:16px}}

/* ==== css/theme-3d.css ==== */
/* 通風官網「立體」設計系統（2026-10-03，老闆選定三版合併：甲＝即時 3D 首屏與懸浮頁首、丙＝立體拼貼格與內頁、乙＝實拍照片立體牆與串頁氣流線）
   規則：文字不放進 3D 旋轉容器；內容預設可見，進場動畫只在確認畫格有在跑時才加；不因「減少動態」關閉動畫（老闆要求）。 */

/* ===== 丙：拼貼格系統 ===== */
/* 丙版：以有厚度的拼貼格承載內容。所有文字固定正向，景深只交給圖片。 */
.fx3d {
  --c-gap: clamp(14px, 1.1vw, 24px);
  --c-radius: clamp(20px, 1.6vw, 32px);
  --c-pad: clamp(22px, 2vw, 46px);
  --c-shadow: inset 0 2px 0 #fff, inset 0 -5px 0 #dbe8f3,
    0 3px 3px #193f6412, 0 12px 22px -12px #154a7442, 0 34px 55px -32px #366d984a;
  --fs-body: clamp(17px, .86vw, 21px);
  --fs-h2: clamp(28px, 2.1vw, 48px);
  --fs-h3: clamp(19px, 1.18vw, 29px);
  background: #eef5fb;
  isolation: isolate;
}
.fx3d .band { width: min(88%, 2200px); margin-inline: auto; }
.fx3d main { position: relative; z-index: 1; }
.fx3d h1, .fx3d h2, .fx3d h3 { letter-spacing: -.025em; }
.fx3d main p { text-wrap: pretty; }
.fx3d main > section { padding-block: clamp(22px, 2.7vw, 60px); }
.fx3d main > section:last-child { padding-bottom: clamp(52px, 5vw, 110px); }
.fx3d :is(.scene-img, .shop-photo img, .shop-product-photo img, .shop-photo-placeholder img) { mix-blend-mode: normal; }
.fx3d .btn { transition: transform .18s, box-shadow .18s, background .18s; }
.fx3d .btn:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 #ffffffa6, 0 10px 17px -8px #0c517b66; }
.fx3d .btn:active { transform: translateY(2px); }
.fx3d .btn--quote { background: linear-gradient(160deg, #ffd687, #ffb42e 58%, #f59e0b); }
.fx3d .site-header { background: #f8fcffed; backdrop-filter: blur(18px); border-bottom: 1px solid #d1e1ef; }
.fx3d .nav-link { border-radius: 12px; }
.fx3d .nav-sub { border-radius: 18px; box-shadow: var(--c-shadow); transition: opacity .2s, visibility .2s; }

/* 光暈位於所有卡片後面，範圍固定在視窗內，不製造水平溢出。 */
.c-ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.c-ambient i { position: absolute; width: 62vw; height: 68vh; border-radius: 50%; background: radial-gradient(ellipse, #8ed8ff30, transparent 68%); animation: c-halo 21s ease-in-out infinite alternate; }
.c-ambient i:nth-child(1) { left: 0; top: -12%; }
.c-ambient i:nth-child(2) { right: -10%; top: 26%; background: radial-gradient(ellipse, #5aaceb25, transparent 68%); animation-duration: 24s; animation-delay: -10s; }
.c-ambient i:nth-child(3) { left: 2%; bottom: -10%; animation-duration: 18s; animation-delay: -5s; }
@keyframes c-halo { from { transform: translate(-5%, -5%) scale(.88); } to { transform: translate(14%, 12%) scale(1.1); } }

.c-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--c-gap); align-items: stretch; }
.c-tile, .fx3d .shop-category-card, .fx3d .shop-product-card,
.fx3d .shop-product-visual, .fx3d .shop-purchase, .fx3d .shop-spec-card, .fx3d .shop-related-card {
  min-width: 0; position: relative; border: 1px solid #cdddea; border-radius: var(--c-radius);
  background: linear-gradient(150deg, #fff 45%, #f2f8fd); box-shadow: var(--c-shadow);
}
.c-tile { padding: var(--c-pad); transition: transform .35s ease, box-shadow .35s ease; }
.c-tile::before { content: ""; pointer-events: none; position: absolute; inset: 1px 18px auto; height: 1px; background: #fff; }
.c-tile > * { min-width: 0; }
@media (hover: hover) {
  .fx3d:not(.fx3d-detail) .c-tile:hover,
  .fx3d-category :is(.shop-product-card, .shop-category-card):hover {
    transform: translateY(-6px);
    box-shadow: inset 0 2px 0 #fff, inset 0 -5px 0 #cfdfed, 0 6px 8px -5px #16456b30, 0 20px 34px -14px #134b764a, 0 42px 65px -35px #256e9b55;
  }
}
.c-depth { transform: translate3d(var(--c-depth-x, 0px), var(--c-depth-y, 0px), 0) scale(var(--c-depth-scale, 1)); transition: transform .28s ease-out; }
.c-float { animation: c-float 5.2s ease-in-out infinite; }
.c-trust:nth-child(even) .c-float { animation-delay: -2.6s; }
@keyframes c-float { 0%, 100% { transform: translateY(6px); } 50% { transform: translateY(-8px); } }
html.fx-on .c-reveal:not(.is-in) { opacity: 0; transform: translate3d(0, 56px, 0) scale(.94); }
html.fx-on .c-entering { animation: c-tile-in .7s cubic-bezier(.18,.7,.28,1) both; animation-delay: var(--c-enter-delay, 0ms); }
@keyframes c-tile-in { from { opacity: 0; transform: translate3d(0,56px,0) scale(.94); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } }

/* 首屏只放兩格：左側完整敘事與持續氣流，右側三個氣流步驟。 */
.fx3d-home #hero { padding-top: clamp(22px, 2.2vw, 48px); padding-bottom: 0; }
.c-hero-grid { grid-template-areas: "hero hero hero hero hero hero hero flow flow flow flow flow"; }
.c-hero { grid-area: hero; min-height: clamp(690px, 47vw, 1020px); overflow: hidden; padding: clamp(26px, 2.5vw, 56px); background: #fff; }
.c-hero-copy { position: relative; z-index: 4; display: flex; align-items: flex-start; flex-direction: column; gap: clamp(16px, 1.35vw, 28px); pointer-events: none; }
.c-hero-copy > * { pointer-events: auto; }
.c-hero h1 { font-size: clamp(38px, 3.25vw, 78px); line-height: 1.22; }
.c-hero h1 span { display: block; }
.c-hero h1 span:last-child { color: #0267b9; }
.c-hero .hero-lead { max-width: 32em; font-size: clamp(17px, 1vw, 23px); word-break: normal; }
.c-hero-cta { border-radius: 50px; padding-inline: clamp(24px, 2vw, 42px); }
.c-hero-scene { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; overflow: hidden; }
.c-hero-picture { position: absolute; width: 91%; height: 100%; right: -1%; bottom: 0; z-index: 2; display: block; }
.c-hero-picture img { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
.c-hero-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.c-air-back { z-index: 1; }
.c-air-front { z-index: 3; }
.c-flow { grid-area: flow; display: flex; flex-direction: column; justify-content: center; gap: clamp(24px, 2.3vw, 50px); padding: clamp(24px, 2.8vw, 62px); }
.c-flow h2 { font-size: clamp(28px, 2vw, 47px); }
.c-flow-copy { display: grid; gap: 18px; }
.c-flow-copy > p { max-width: 33em; font-size: clamp(17px, .95vw, 22px); }
.c-flow-copy > p span { display: block; }
.c-flow-steps { position: relative; display: grid; gap: clamp(20px, 2vw, 43px); }
.c-flow-steps::before { content: ""; position: absolute; left: 50px; top: 50px; bottom: 50px; width: 3px; background: repeating-linear-gradient(to bottom, #0f7cd4 0 10px, #8dd7fc55 10px 24px); background-size: 3px 48px; animation: c-stream 1.4s linear infinite; }
@keyframes c-stream { to { background-position: 0 48px; } }
.c-flow-step { position: relative; padding: clamp(18px, 1.3vw, 28px); border: 1px solid #dce9f3; border-radius: clamp(16px, 1.3vw, 26px); background: #ffffffeb; box-shadow: inset 0 1px 0 #fff, 0 4px 0 #e4edf5; transition: background .45s, box-shadow .45s, border-color .45s; }
.c-flow-step.is-active { border-color: #3bb7ef; background: linear-gradient(110deg, #e2f4ff, #fff); box-shadow: inset 0 0 0 2px #92d9fd, 0 5px 0 #b9def5, 0 0 24px #4fc0f04d; }
.c-step-title { display: flex; align-items: center; gap: 18px; }
.c-step-title h2 { font-size: clamp(23px, 1.45vw, 34px); white-space: nowrap; }
.c-step-title .num3d { width: 50px; height: 50px; font-size: 25px; border-radius: 15px; }
.c-flow-step p { margin: 10px 0 0 68px; line-height: 1.65; }
.c-flow-step p span { display: inline; }

/* 四個服務承諾共享一條底線，圖示獨立漂浮。 */
.fx3d-home #trust { margin-top: 0; padding-top: var(--c-gap); }
.c-trust-grid { grid-template-areas: "t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4"; }
.c-trust:nth-child(1) { grid-area: t1; }.c-trust:nth-child(2) { grid-area: t2; }
.c-trust:nth-child(3) { grid-area: t3; }.c-trust:nth-child(4) { grid-area: t4; }
.c-trust { display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 1.8vw, 40px); }
.c-trust-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.c-trust-heading h2 { font-size: clamp(21px, 1.35vw, 32px); white-space: nowrap; }
.c-icon { display: block; width: clamp(80px, 6.5vw, 144px); height: clamp(80px, 6.5vw, 144px); background: #fff; border-radius: 24px; }
.c-icon img { width: 100%; height: 100%; object-fit: contain; }
.c-trust > p { margin: 0; font-size: clamp(17px, .85vw, 21px); }

/* 五類產品有一個主角，白色照片與展示盤自然融合，固定不傾斜。 */
.c-products-grid { grid-template-areas: "title title title title p1 p1 p1 p1 p2 p2 p3 p3" "title title title title p1 p1 p1 p1 p4 p4 p5 p5"; grid-template-rows: repeat(2, minmax(245px, auto)); }
.c-section-title { grid-area: title; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: clamp(24px, 3vw, 62px); background: linear-gradient(140deg, #fff 5%, #e4f3ff); }
.c-section-title .sec-head { margin: 0; gap: clamp(14px, 1.3vw, 27px); }
.c-section-title .sec-head > p:last-child { max-width: 23em; }
.c-section-title h2 { text-wrap: balance; }
.c-section-title .btn { height: auto; min-height: 54px; padding-block: 13px 10px; }
.c-product-1 { grid-area: p1; }.c-product-2 { grid-area: p2; }.c-product-3 { grid-area: p3; }.c-product-4 { grid-area: p4; }.c-product-5 { grid-area: p5; }
.c-product { padding: clamp(16px, 1.35vw, 30px); display: flex; align-items: stretch; background: linear-gradient(#fff 70%, #edf7ff); }
.c-display { display: flex; flex-direction: column; width: 100%; align-items: center; justify-content: center; }
.c-product-photo { display: flex; align-items: center; justify-content: center; width: 100%; height: clamp(132px, 11vw, 248px); background: #fff; border-radius: 16px; z-index: 1; }
.c-product-photo img { width: auto; height: auto; max-height: 100%; object-fit: contain; }
.c-product-1 .c-product-photo { height: clamp(280px, 24vw, 500px); }
.c-podium { position: relative; width: 91%; height: clamp(20px, 2vw, 42px); margin-top: -3px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(170deg,#fff 25%,#eff9ff 65%,#d1eaff); border-bottom: 6px solid #bbd5e9; box-shadow: 0 9px 14px -7px #19568a59, 0 15px 23px -4px #4fc0f035; }
.c-podium::after { content: ""; position: absolute; inset: -6px -6px -8px; border: 1px solid #91cde7; border-radius: 50%; }
.c-display figcaption { padding-top: 25px; width: 100%; text-align: center; }
.c-product h3 { font-size: clamp(19px, 1.15vw, 28px); line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.c-product-1 h3 { font-size: clamp(25px, 1.8vw, 42px); }

/* 場域的重要性決定格子大小，四種場域都只出现一次。 */
.c-scenes-grid { grid-template-areas: "title title title s1 s1 s1 s1 s1 s2 s2 s2 s2" "title title title s1 s1 s1 s1 s1 s3 s3 s4 s4"; grid-template-rows: repeat(2,minmax(255px,auto)); }
.c-scene-1 { grid-area: s1; }.c-scene-2 { grid-area: s2; }.c-scene-3 { grid-area: s3; }.c-scene-4 { grid-area: s4; }
.c-scene { display: flex; flex-direction: column; padding: clamp(16px, 1.55vw, 34px); gap: 16px; overflow: hidden; background: #fff; }
.c-scene-visual { position: relative; flex: 1; display: grid; place-items: center; min-height: 130px; }
.c-scene-visual .c-depth { width: 100%; }
.c-scene-visual img { width: 100%; height: clamp(150px, 11vw, 260px); object-fit: contain; }
.c-scene-1 .c-scene-visual img { height: clamp(330px, 27vw, 580px); }
.c-scene-copy { display: grid; gap: 10px; padding: 0 3px 8px; }
.c-scene h3 { font-size: clamp(20px, 1.25vw, 30px); }
.c-scene-1 h3 { font-size: clamp(26px, 1.8vw, 42px); }
.c-scene .scene-equipment { font-size: clamp(16px, .85vw, 20px); }
.c-scene .scene-equipment span { display: inline; }
.c-scene-2 { flex-direction: row; align-items: center; }
.c-scene-2 .c-scene-visual { width: 48%; flex: 0 0 48%; }
.c-scene-2 .c-scene-copy { flex: 1; }

/* 實績照片占滿格子，資訊收在底部霧面說明牌。 */
.c-cases-grid { grid-template-areas: "title title title k1 k1 k1 k2 k2 k2 k3 k3 k3"; }
.c-case-1 { grid-area: k1; }.c-case-2 { grid-area: k2; }.c-case-3 { grid-area: k3; }
.c-case { min-height: clamp(440px, 29vw, 660px); padding: clamp(15px, 1.2vw, 26px); overflow: hidden; display: flex; align-items: flex-end; }
.c-case-photo { position: absolute; inset: 0; }
.c-case-photo img { width: 100%; height: 100%; object-fit: cover; }
.c-case-copy { position: relative; z-index: 1; width: 100%; padding: clamp(18px, 1.5vw, 32px); border-radius: 18px; border: 1px solid #ffffffce; background: #fffffff0; backdrop-filter: blur(16px); box-shadow: 0 4px 20px #17395320; display: grid; gap: 13px; }
.c-case-copy .case-industry { justify-self: start; border: 1px solid #bddbee; border-radius: 30px; padding: 4px 11px; background: #eaf6ff; font-size: 16px; }
.c-case-copy h3 { font-size: clamp(22px, 1.3vw, 31px); }
.c-case-copy .case-result { font-size: clamp(16px, .86vw, 21px); padding-top: 12px; }

/* 內頁頁首、分類與選購卡沿用同一組厚度與留白。 */
.c-page-head { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); grid-template-areas: "intro intro intro intro intro intro intro intro deco deco deco deco" "tabs tabs tabs tabs tabs tabs tabs tabs tabs tabs tabs tabs"; gap: var(--c-gap); }
.fx3d .c-page-intro { grid-area: intro; display: flex; min-height: clamp(230px, 18vw, 380px); padding: var(--c-pad); }
.c-page-intro .page-hero__copy { width: 100%; gap: 22px; }
.c-page-intro::before { height: 1px; background: #fff; }
.c-page-deco { grid-area: deco; display: grid; place-items: center; padding: 15px; overflow: hidden; background: #fff; }
.c-page-deco .c-depth { width: min(90%, 360px); }
.c-page-deco img { width: 100%; height: clamp(180px, 15vw, 330px); object-fit: contain; }
.fx3d-category .c-page-deco img { animation: c-float 5.8s ease-in-out infinite; }
.c-page-tabs { grid-area: tabs; padding: clamp(16px, 1.4vw, 30px); }
.fx3d .c-page-tabs .subnav { margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.fx3d .subnav .btn { border-radius: 50px; min-height: 50px; height: auto; padding: 12px 20px 9px; }
.fx3d .subnav .btn[aria-current="page"] { background: linear-gradient(145deg,#218fe7,#0267b9); color: #fff; border-color: #1166a6; border-bottom-color: #004879; }
.fx3d .shop-toolbar { margin-bottom: var(--c-gap); }
.fx3d.shop-page[data-page="category"] .shop-grid, .fx3d .shop-category-grid, .fx3d .shop-related-grid { gap: var(--c-gap); align-items: stretch; }
.fx3d.shop-page .shop-grid[data-cols], .fx3d.shop-page .shop-category-grid[data-cols], .fx3d.shop-page .shop-related-grid[data-cols] { display: flex; flex-wrap: wrap; }
/* 尊重 shop.js 的 --cols；最後一列不足時共同填滿，五張卡也不留洞。 */
.fx3d.shop-page .shop-grid[data-cols] > .shop-product-card,
.fx3d.shop-page .shop-category-grid[data-cols] > .shop-category-card,
.fx3d.shop-page .shop-related-grid[data-cols] > .shop-related-card {
  flex: 1 0 calc((100% - (var(--cols) - 1) * var(--g)) / var(--cols)); max-width: none;
}
.fx3d.shop-page[data-page="category"] .shop-product-card.card { display: flex; flex-direction: column; gap: 17px; padding: clamp(18px, 1.5vw, 32px); background: linear-gradient(150deg,#fff 45%,#f2f8fd); transition: transform .3s, box-shadow .3s; }
.fx3d .shop-product-card::before, .fx3d .shop-category-card::before, .fx3d .shop-purchase::before, .fx3d .shop-related-card::before { height: 1px; background: #fff; }
.fx3d.shop-page[data-page="category"] .shop-product-card .shop-photo-link { padding: 14px 12px 22px; border: 1px solid #e2edf5; border-bottom: 0; border-radius: 18px; background: #fff; box-shadow: 0 7px 0 #e4eef7; }
.fx3d.shop-page[data-page="category"] .shop-product-card .shop-photo, .fx3d .shop-photo { background: #fff; border-radius: 18px; height: clamp(190px, 13vw, 285px); }
.fx3d .shop-photo img { mix-blend-mode: normal; }
.fx3d .shop-plinth { background: linear-gradient(160deg,#fff,#eef9ff); border-bottom-color: #c1dcec; box-shadow: 0 8px 11px -5px #1b5f843d, 0 12px 20px -5px #4fc0f045; outline: 1px solid #b1ddef; outline-offset: 4px; }
.fx3d.shop-page .shop-product-card .shop-product-title { height: auto; min-height: 5.6em; margin-top: 0; font-size: clamp(19px, 1.05vw, 26px); }
.fx3d.shop-page[data-page="category"] .shop-product-card .shop-product-title a { height: 100%; min-height: 5.6em; padding: 14px 16px; }
.fx3d.shop-page[data-page="category"] .shop-product-card .shop-product-title a span { display: block; overflow: visible; -webkit-line-clamp: unset; }
.fx3d.shop-page .shop-product-card .shop-chips { min-height: 88px; }
.fx3d.shop-page .shop-product-card .shop-price { margin-top: auto; padding-top: 6px; }
.fx3d.shop-page[data-page="category"] .shop-product-card > .shop-card-actions { margin-top: 0; }
.fx3d .shop-category-card { padding: clamp(20px, 1.8vw, 36px); transition: transform .3s, box-shadow .3s; }
.fx3d .shop-category-card .shop-photo { margin-bottom: 10px; background: #fff; border-bottom: 7px solid #dbeaf5; box-shadow: 0 9px 14px -8px #1773a649; }
.fx3d .shop-category-card h2 { font-size: clamp(23px,1.5vw,34px); }
.fx3d.shop-page .shop-product-layout { gap: var(--c-gap); }
.fx3d.shop-page[data-page="product"] #product-main > .shop-product-layout { grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: var(--c-gap); }
.fx3d .shop-product-visual { background: #fff; }
.fx3d.shop-page[data-page="product"] .shop-spec-card { max-width: none; }
.fx3d .shop-spec-list > div { padding-inline: clamp(0px, 1vw, 20px); }
.fx3d .shop-spec-list > div:nth-child(even) { background: #f1f7fc; }
/* 功能頁沒有持續背景、漂浮、視差或購買格進場。 */
.fx3d-detail .c-depth { transform: none; transition: none; }
.fx3d-detail .c-tile { transition: none; }


/* 八欄拼貼：標題與主角並排，支線入口完整佔滿下一列。 */
@media (min-width:900px) and (max-width:1279px) {
  .c-grid { grid-template-columns: repeat(8,minmax(0,1fr)); }
  .c-hero-grid { grid-template-areas: "hero hero hero hero hero flow flow flow"; }
  .c-hero { min-height: 720px; }
  .c-flow { padding: 24px; gap: 25px; }
  .c-flow-step { padding: 17px; }
  .c-flow-step p { margin-left: 0; }
  .c-flow-steps::before { left: 42px; }
  .c-trust-grid { grid-template-areas: "t1 t1 t1 t1 t2 t2 t2 t2" "t3 t3 t3 t3 t4 t4 t4 t4"; }
  .c-trust-heading { flex-direction: row; align-items: center; }
  .c-products-grid { grid-template-areas: "title title title title p1 p1 p1 p1" "p2 p2 p3 p3 p4 p4 p5 p5"; grid-template-rows: auto auto; }
  .c-scenes-grid { grid-template-areas: "title title title s1 s1 s1 s1 s1" "s2 s2 s2 s2 s3 s3 s4 s4"; grid-template-rows: auto auto; }
  .c-cases-grid { grid-template-areas: "title title title title k1 k1 k1 k1" "k2 k2 k2 k2 k3 k3 k3 k3"; }
  .c-case { min-height: 440px; }
  .c-hero h1 { font-size: clamp(37px,3.6vw,46px); }
}
/* 四欄與窄版均明確指定每個格子，不使用自動補空白。 */
@media (max-width:899px) {
  .fx3d .band { width: calc(100% - 40px); }
  .c-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .c-hero-grid { grid-template-areas: "hero hero hero hero" "flow flow flow flow"; }
  .c-hero { min-height: 720px; }
  .c-hero h1 { font-size: clamp(38px,6vw,56px); }
  .c-hero-scene { height: 56%; }
  .c-hero-picture { width: 80%; right: 2%; }
  .c-flow { gap: 28px; padding: clamp(24px,4vw,40px); }
  .c-flow-steps { gap: 22px; }
  .c-flow-step { padding: 18px 23px; display: flex; align-items: center; gap: 24px; }
  .c-flow-step p { margin: 0; }
  .c-step-title { flex-shrink: 0; }
  .c-flow-steps::before { left: 48px; }
  .c-trust-grid { grid-template-areas: "t1 t1 t2 t2" "t3 t3 t4 t4"; }
  .c-products-grid { grid-template-areas: "title title p1 p1" "p2 p2 p3 p3" "p4 p4 p5 p5"; grid-template-rows: auto auto auto; }
  .c-product-photo { height: clamp(160px,25vw,250px); }
  .c-product-1 .c-product-photo { height: 240px; }
  .c-scenes-grid { grid-template-areas: "title title s1 s1" "s2 s2 s2 s2" "s3 s3 s4 s4"; grid-template-rows: auto auto auto; }
  .c-scene-1 .c-scene-visual img { height: 280px; }
  .c-scene-visual img { height: 190px; }
  .c-cases-grid { grid-template-areas: "title title k1 k1" "k2 k2 k3 k3"; }
  .c-case { min-height: 425px; }
  .c-section-title { gap: 28px; }
  .c-page-head { grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-areas: "intro intro intro deco" "tabs tabs tabs tabs"; }
  .c-page-deco { padding: 10px; }
  .c-page-deco .c-depth { width: 100%; }
  .fx3d.shop-page[data-page="product"] #product-main > .shop-product-layout { grid-template-columns: minmax(0,1fr); }
}
@media (max-width:599px) {
  .fx3d { --c-pad: 24px; }
  .fx3d .band { width: calc(100% - 28px); }
  .fx3d main > section { padding-block: 24px; }
  .c-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .c-hero-grid { grid-template-areas: "hero hero" "flow flow"; }
  .c-hero { min-height: 680px; padding: 27px 23px; }
  .c-hero h1 { font-size: clamp(30px,6.6vw,39px); line-height: 1.32; }
  .c-hero-copy { gap: 20px; }
  .c-hero .hero-lead { font-size: 17px; }
  .c-hero-scene { height: 48%; }
  .c-hero-picture { width: 110%; right: -5%; bottom: 0; }
  .c-flow-step { display: block; padding: 18px 20px; }
  .c-flow-step p { margin-top: 12px; }
  .c-flow-steps::before { left: 45px; }
  .c-flow-copy > p { font-size: 17px; }
  .c-trust-grid { grid-template-areas: "t1 t2" "t3 t4"; }
  .c-trust { padding: 21px 17px; }
  .c-trust-heading h2 { font-size: 20px; white-space: normal; word-break: keep-all; }
  .c-icon { width: 80px; height: 80px; }
  .c-products-grid { grid-template-areas: "title title" "p1 p1" "p2 p3" "p4 p5"; }
  .c-section-title { padding: 28px; gap: 25px; }
  .c-section-title .btn { align-self: flex-start; }
  .c-product { padding: 18px 12px 24px; }
  .c-product-photo { height: clamp(135px,32vw,190px); }
  .c-product-1 .c-product-photo { height: 275px; }
  .c-product h3 { font-size: 19px; }
  .c-product-1 h3 { font-size: 28px; }
  .c-scenes-grid { grid-template-areas: "title title" "s1 s1" "s2 s2" "s3 s4"; }
  .c-scene-1 .c-scene-visual img { height: 320px; }
  .c-scene { padding: 18px 14px; }
  .c-scene-visual img { height: 155px; }
  .c-scene h3 { font-size: 21px; }
  .c-scene .scene-equipment { font-size: 16px; }
  .c-cases-grid { grid-template-areas: "title title" "k1 k1" "k2 k2" "k3 k3"; }
  .c-case { min-height: 440px; }
  .c-page-head { grid-template-columns: minmax(0,1fr); grid-template-areas: "intro" "deco" "tabs"; }
  .fx3d .c-page-intro { padding: 25px 21px; min-height: 0; }
  .c-page-deco { min-height: 180px; }
  .c-page-deco .c-depth { width: 180px; }
  .c-page-deco img { height: 180px; }
  .c-page-tabs { padding: 16px; }
  .fx3d .c-page-tabs .subnav { gap: 10px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fx3d .subnav .btn { font-size: 16px; padding-inline: 8px; white-space: normal; word-break: keep-all; }
  .fx3d .subnav .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width:419px) {
  .c-trust-grid { grid-template-areas: "t1 t1" "t2 t2" "t3 t3" "t4 t4"; }
  .c-trust { padding: 23px; }
  .c-trust-heading { flex-direction: row; align-items: center; gap: 17px; }
  .c-trust-heading h2 { white-space: nowrap; font-size: 21px; }
  .c-icon { flex-shrink: 0; width: 68px; height: 68px; }
  .c-products-grid { grid-template-areas: "title title" "p1 p1" "p2 p2" "p3 p3" "p4 p4" "p5 p5"; }
  .c-product-photo { height: 215px; }
  .c-product-1 .c-product-photo { height: 255px; }
  .c-product h3 { font-size: 24px; }
  .c-scenes-grid { grid-template-areas: "title title" "s1 s1" "s2 s2" "s3 s3" "s4 s4"; }
  .c-scene-2 { flex-direction: column; }
  .c-scene-2 .c-scene-visual { width: 100%; flex: 1; }
  .c-scene-visual img { height: 245px; }
  .c-scene-1 .c-scene-visual img { height: 265px; }
  .c-scene-copy { width: 100%; padding-inline: 8px; }
  .c-case { min-height: 405px; }
}



/* 步驟卡蓋在連接線上方：連接線只在卡片之間露出，不穿過文字 */
.c-flow-steps::before{z-index:0}
.c-flow-steps>*{position:relative;z-index:1}
.c-flow-steps>*::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#fff}

/* ====== 合併版（甲首屏＋丙拼貼格＋乙照片牆與串頁氣流線）====== */
/* --- 甲：懸浮玻璃頁首 --- */
/* 懸浮頁首的玻璃在獨立背景層，避免把手機選單困在濾鏡容器內。 */
.fx3d .site-header{position:fixed;inset:18px 0 auto;z-index:40;background:none;box-shadow:none;pointer-events:none}
.fx3d .header-inner{position:relative;padding-inline:clamp(12px,1.4vw,30px);border:1px solid #fff;border-radius:20px;pointer-events:auto;box-shadow:0 9px 30px -17px #1a547b66}
.fx3d .header-inner::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#ffffffe0;backdrop-filter:blur(20px);transition:background .25s}
.fx3d .site-header.is-scrolled .header-inner::before{background:#fffffff7}
.fx3d .site-nav__inner{padding-block:12px}
.fx3d .site-header .nav-link{border:0;border-radius:9px;background:transparent;box-shadow:none;height:44px;padding-inline:clamp(5px,.6vw,14px)}
.fx3d .site-header .nav-link:hover{background:#eaf4ff;box-shadow:0 2px 0 #d8e8f7;transform:translateY(-2px)}
.fx3d .site-header .nav-link[aria-current="page"]{background:#e7f3fd;color:#0267b9;box-shadow:0 2px 0 #c7ddeb}
.fx3d .nav-menu{gap:clamp(3px,.4vw,10px)}
.fx3d .site-header .list-link--icon{width:50px;height:48px}
.fx3d .mobile-menu__actions>.btn{height:48px;border-radius:12px}
.fx3d .nav-sub{border-radius:16px;box-shadow:0 18px 48px -15px #0f27474d;transition:opacity .15s,visibility .15s}

/* --- 甲：即時 3D 首屏 --- */
/* 首屏的整片天空與地面，不把廠房包成圖片卡。 */
.fx3d #hero{position:relative;isolation:isolate;height:clamp(620px,92svh,1040px);min-height:620px;padding:140px 0 120px;background:radial-gradient(ellipse at 76% 25%,#ffffff 0,transparent 48%),linear-gradient(160deg,#fff 4%,#eaf4ff 67%,#dceffa 100%)}
.fx3d #hero::after{content:"";position:absolute;inset:62% 0 0;z-index:-1;background:repeating-linear-gradient(0deg,transparent 0 42px,#7fabc61c 43px 44px),repeating-conic-gradient(from 80deg at 50% -40%,transparent 0 7deg,#7fabc61c 7.1deg 7.3deg,transparent 7.4deg 14deg);mask-image:linear-gradient(transparent,#0009);pointer-events:none}
.fx3d .a-hero-layout{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);gap:0;height:100%;align-items:center}
.fx3d .hero-copy{position:relative;z-index:2;align-items:flex-start;gap:clamp(16px,1.3vw,28px);max-width:none;margin:0;text-align:left;padding-right:clamp(8px,1.7vw,38px)}
.fx3d .hero-copy .sec-head__eyebrow{justify-content:flex-start}
.fx3d .hero-copy h1{font-size:clamp(34px,3.6vw,84px);font-weight:900;line-height:1.22;max-width:none;text-wrap:initial}
.fx3d .hero-copy h1 span{display:block;white-space:nowrap}
.fx3d .hero-copy h1 span:last-child{color:#0267b9}
.fx3d .hero-lead{font-size:clamp(17px,1.05vw,24px);line-height:1.9;max-width:31em;text-wrap:pretty;word-break:normal}
.fx3d .hero-copy>.btn{margin-top:4px;align-self:flex-start;background:linear-gradient(#ffc866,#f59e0b);color:#0f2747;border-color:#e99516;border-bottom-color:#c97d08;box-shadow:0 2px 0 #ffe5a9 inset,0 4px 0 #c97d08,0 15px 25px -14px #bc7b25a0}
.fx3d .hero-copy>.btn svg{margin-left:16px}
.fx3d .hero-caption{position:static;align-items:flex-start;max-width:38em;gap:6px;padding:clamp(10px,1vw,24px) 0 0;margin:0;border-top:1px solid #9bbdd54d;text-align:left}
.fx3d .hero-caption p{font-size:clamp(15px,.72vw,17px);line-height:1.8;text-wrap:pretty}
.fx3d .hero-caption .sec-head__eyebrow{font-size:15px;letter-spacing:.06em}
.fx3d .hero-caption .sec-head__eyebrow::before{display:none}
.fx3d .hero-caption p span{display:inline}
.fx3d #airflow-stage{position:relative;min-width:0;height:100%;min-height:400px;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;isolation:auto;overflow:hidden}
.fx3d #airflow-canvas,.fx3d .hero-poster{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;transition:opacity .7s;pointer-events:none}
.fx3d #airflow-canvas{opacity:0}
.fx3d #airflow-stage.is-ready #airflow-canvas{opacity:1}
.fx3d #airflow-stage.is-ready .hero-poster{opacity:0}
.fx3d #airflow-steps{position:absolute;inset:0;display:block;margin:0;z-index:3;pointer-events:none}
.fx3d .airflow-step{position:absolute;inset:auto;display:flex;width:clamp(148px,12.5vw,248px);gap:8px;margin:0;padding:clamp(10px,1vw,18px);border:1px solid #ffffffed;border-bottom-color:#bad9e9;border-radius:16px;background:#ffffffd9;box-shadow:0 4px 0 #c3dce966,0 16px 30px -18px #31729377;backdrop-filter:blur(12px);pointer-events:auto;transition:box-shadow .2s,border-color .2s}
.fx3d .airflow-step:hover,.fx3d .airflow-step:focus-visible{border-color:#4fc0f0;box-shadow:0 3px 0 #9bccdf,0 12px 25px -12px #0267b955}
.fx3d .airflow-step::after{display:none}
.fx3d .airflow-step--1{left:2%;top:58%}
.fx3d .airflow-step--2{left:37%;top:78%}
.fx3d .airflow-step--3{left:auto;right:2%;top:38%}
.fx3d .airflow-step__title{gap:9px}
.fx3d .airflow-step h2{font-size:clamp(17px,1vw,23px);white-space:nowrap}
.fx3d .airflow-step .num3d{width:32px;height:34px;border-radius:10px;font-size:18px;padding-top:2px;border-bottom-width:3px}
.fx3d .airflow-step p{font-size:clamp(15px,.69vw,17px);line-height:1.55;min-height:0;text-wrap:pretty}
.fx3d .airflow-step p span{display:inline}
.fx3d #airflow-toggle{position:absolute;right:15px;bottom:18px;z-index:5;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid #fff;border-bottom:3px solid #b6d3e5;border-radius:50%;background:#ffffffdb;color:#0267b9;box-shadow:0 8px 20px -9px #28688b66;transition:transform .2s}
.fx3d #airflow-toggle:hover{transform:translateY(-3px)}
.fx3d #airflow-toggle:active{transform:translateY(2px)}
.fx3d #airflow-toggle svg{width:18px;height:18px;display:block}
.fx3d #airflow-toggle[hidden]{display:none}
.fx3d #airflow-stage.is-fallback #airflow-toggle{display:none}


/* 三步驟：場景裡只放編號標記，說明卡一排在畫布下方（同一資訊只出現一次） */
.fx3d .airflow-pins{position:absolute;inset:0 0 var(--steps-h,150px);z-index:3;pointer-events:none}
.fx3d .airflow-pin{position:absolute;left:0;top:0;width:40px;height:40px;margin:-20px 0 0 -20px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(#2a95ec,#0267b9);color:#fff;font:900 19px/1 "Outfit",var(--font);box-shadow:0 0 0 5px #ffffffcc,0 10px 22px -6px #0267b9b0;transition:box-shadow .25s}
.fx3d .airflow-pin::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #4fc0f0;animation:a-pin-pulse 2.2s ease-out infinite}
.fx3d .airflow-pin[data-step="1"]::after{animation-delay:.7s}.fx3d .airflow-pin[data-step="2"]::after{animation-delay:1.4s}
.fx3d .airflow-pin.is-active{box-shadow:0 0 0 7px #4fc0f0aa,0 12px 26px -6px #0267b9}
@keyframes a-pin-pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.1);opacity:0}}
.fx3d #airflow-stage.is-fallback .airflow-pins,.fx3d #airflow-stage:not(.is-ready) .airflow-pins{display:none}
@media(min-width:901px){.fx3d #hero{padding:118px 0 76px}}

@media(max-width:1199px){
 .fx3d .site-header{top:12px}
 .fx3d .header-inner{width:calc(100% - 40px)}
}
@media(min-width:901px) and (max-width:1199px){
 .fx3d #hero{padding-top:120px;padding-bottom:110px}
 .fx3d .hero-copy h1{font-size:clamp(30px,3.5vw,42px)}
 .fx3d .hero-caption{padding-top:12px}
 .fx3d .hero-caption p{font-size:15px}
 .fx3d .hero-copy{gap:16px}
 .fx3d .airflow-step{width:145px;padding:10px}
}
@media(max-width:900px){
 .fx3d #hero{height:auto;min-height:clamp(620px,92svh,1040px);padding:122px 0 98px}
 .fx3d .a-hero-layout{grid-template-columns:minmax(0,1fr);gap:22px}
 .fx3d .hero-copy{padding:0;max-width:650px;gap:18px}
 .fx3d .hero-copy h1{font-size:clamp(34px,6vw,54px);line-height:1.24}
 .fx3d .hero-lead{font-size:17px;max-width:39em}
 .fx3d .hero-caption{padding-top:14px;max-width:100%}
 .fx3d #airflow-stage{height:auto;min-height:0;padding-top:340px;padding-bottom:0;overflow:hidden}
 .fx3d #airflow-canvas,.fx3d .hero-poster{height:340px}
 .fx3d #airflow-steps{position:relative;inset:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:2px}
 .fx3d .airflow-step{position:relative;inset:auto!important;width:auto;min-width:0;margin:0;padding:12px 10px;gap:10px;border-radius:13px;backdrop-filter:none}
 .fx3d .airflow-step__title{gap:7px}
 .fx3d .airflow-step h2{font-size:18px}
 .fx3d .airflow-step .num3d{width:28px;height:30px;font-size:17px;border-radius:8px}
 .fx3d .airflow-step p{font-size:15px;line-height:1.65;word-break:normal}
 .fx3d .airflow-step p span{display:inline}
 .fx3d #airflow-toggle{top:278px;bottom:auto;right:8px}
}
@media(max-width:600px){
 .fx3d .site-header{top:10px}
 .fx3d .header-inner{width:calc(100% - 20px);padding-inline:10px;border-radius:16px}
 .fx3d .site-nav__inner{padding-block:10px}
 .fx3d .site-header .site-brand img{width:30px}
 .fx3d .site-header .site-brand__name{font-size:17px}
 .fx3d .site-header .list-link--compact{width:44px;height:44px;padding:4px 3px 0 0}
 .fx3d .site-header .menu-toggle{width:44px;height:44px;padding:0}
 .fx3d #hero{padding-top:116px}
 .fx3d .hero-copy h1{font-size:clamp(32px,8.5vw,48px)}
 .fx3d .hero-copy .sec-head__eyebrow{font-size:15px}
 .fx3d .hero-lead{line-height:1.85}
 .fx3d .hero-caption p{font-size:15px}
 .fx3d .hero-copy>.btn{height:54px;font-size:18px}
 .fx3d .a-hero-layout{gap:8px}
 .fx3d #airflow-steps{gap:6px}
 .fx3d .airflow-step{padding:12px 8px}
 .fx3d .airflow-step__title{gap:5px}
 .fx3d .airflow-step h2{font-size:17px}
 .fx3d .airflow-step p{font-size:15px;line-height:1.55}
}
@media(max-width:359px){
 .fx3d .site-header .site-brand__name{font-size:15px}
 .fx3d .site-header .site-brand{gap:3px}
 .fx3d .site-header .site-brand img{width:26px}
 .fx3d .site-nav__inner{gap:5px}
 .fx3d .hero-copy h1{font-size:32px}
 .fx3d .airflow-step{padding:10px 6px}
 .fx3d .airflow-step .num3d{width:22px;height:27px;font-size:16px}
 .fx3d .airflow-step h2{font-size:16px}
}
@media(min-width:901px){
 .fx3d #airflow-stage{--steps-h:clamp(110px,7.4vw,140px)}
 .fx3d #airflow-canvas,.fx3d .hero-poster{inset:0 auto auto 0!important;width:100%;height:calc(100% - var(--steps-h) - 12px)!important}
 .fx3d .airflow-pins{bottom:calc(var(--steps-h) + 12px)}
 .fx3d #airflow-steps{position:absolute;inset:auto 2% 0 2%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1vw,20px);pointer-events:auto}
 .fx3d .airflow-step{position:relative;width:auto;height:100%}
 .fx3d .airflow-step--1,.fx3d .airflow-step--2,.fx3d .airflow-step--3{left:auto;right:auto;top:auto}
 .fx3d #airflow-toggle{top:6px;bottom:auto}
}

.fx3d .airflow-step::before{display:none}

/* --- 合併版：首屏與拼貼格的銜接 --- */
.fx3d-home #hero{position:relative;z-index:2}
.fx3d-home #trust{position:relative;z-index:3;margin-top:calc(var(--c-gap) * -1);padding-top:0}
.fx3d .site-header{border-bottom:0;backdrop-filter:none}

/* --- 乙：安裝實績第一案做成立體照片牆（照片轉向、說明牌不轉向） --- */
.fx3d .m-case-wall{background:linear-gradient(180deg,#fff 0 55%,#eef4f9);overflow:hidden}
.fx3d .m-case-wall::after{content:"";position:absolute;left:-15%;right:-15%;bottom:0;height:48%;z-index:0;background:repeating-linear-gradient(90deg,#c3d6e4 0 1px,transparent 1px 72px),repeating-linear-gradient(0deg,#c3d6e4 0 1px,transparent 1px 46px);transform:perspective(520px) rotateX(62deg);transform-origin:50% 100%;opacity:.55;-webkit-mask-image:linear-gradient(transparent,#000 70%);mask-image:linear-gradient(transparent,#000 70%);pointer-events:none}
.fx3d .m-case-wall .c-case-photo{inset:7% 9% auto 9%;height:58%;z-index:1;border:clamp(7px,.6vw,12px) solid #fff;border-radius:4px;overflow:hidden;background:#fff;transform:perspective(1300px) rotateY(-16deg) translate3d(var(--c-depth-x,0px),var(--c-depth-y,0px),0);box-shadow:2px 0 0 #e9eef2,14px 9px 0 #c7d3dc,15px 10px 0 #b3c3cf,30px 40px 44px -22px #26496373}
.fx3d .m-case-wall .c-case-photo img{animation:m-kenburns 18s ease-in-out infinite alternate;transform-origin:40% 55%}
.fx3d .m-case-wall .c-case-photo::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:28%;background:linear-gradient(100deg,#fff0,#ffffff6e 45%,#fff0);transform:skewX(-14deg);animation:m-sheen 7s ease-in-out infinite;pointer-events:none}
.fx3d .m-case-wall .c-case-copy{z-index:2}
@keyframes m-kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes m-sheen{0%,55%{transform:translateX(0) skewX(-14deg)}85%,100%{transform:translateX(560%) skewX(-14deg)}}
@media(min-width:1280px){
 .fx3d .c-cases-grid{grid-template-areas:"title title title k1 k1 k1 k1 k1 k2 k2 k2 k2" "title title title k1 k1 k1 k1 k1 k3 k3 k3 k3";grid-template-rows:repeat(2,minmax(clamp(260px,15vw,340px),auto))}
 .fx3d .c-case-2,.fx3d .c-case-3{min-height:0;display:grid;grid-template-columns:minmax(0,48%) minmax(0,1fr);align-items:stretch;gap:clamp(14px,1.2vw,26px);padding:clamp(12px,1vw,18px)}
 .fx3d .c-case-2 .c-case-photo,.fx3d .c-case-3 .c-case-photo{position:relative;inset:auto;border-radius:clamp(14px,1.1vw,22px);overflow:hidden;min-height:100%}
 .fx3d .c-case-2 .c-case-copy,.fx3d .c-case-3 .c-case-copy{align-content:center;padding:6px 8px 6px 0;border:0;background:transparent;box-shadow:none;backdrop-filter:none}
 .fx3d .m-case-wall{min-height:0}
 .fx3d .m-case-wall .c-case-photo{height:52%}
 .fx3d .c-case-copy h3,.fx3d .c-case-copy .case-result{word-break:keep-all;overflow-wrap:anywhere}
}
@media(min-width:1900px){.fx3d .c-cases-grid{grid-template-areas:"title title title k1 k1 k1 k1 k1 k1 k2 k2 k2" "title title title k1 k1 k1 k1 k1 k1 k3 k3 k3"}}
@media(max-width:599px){.fx3d .m-case-wall .c-case-photo{transform:perspective(1000px) rotateY(-9deg);inset:6% 7% auto 7%;height:52%}}

/* --- 乙：從首屏串到頁尾的氣流線（長線靜止、光點沿線移動；手機不畫） --- */
.m-route{position:absolute;left:0;top:0;z-index:0;pointer-events:none;overflow:visible}
.m-route path{fill:none;stroke-linecap:round}
.m-route .m-route-glow{stroke:#73cdf2;stroke-width:12;opacity:.12}
.m-route .m-route-base{stroke:#59bce8;stroke-width:2;opacity:.45}
.m-route .m-route-dash{stroke:#188ccc;stroke-width:3;stroke-dasharray:16 44;opacity:.5}
.m-comet{position:absolute;left:0;top:0;z-index:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle,#fff 0 22%,#4fc0f0 45%,#4fc0f000 72%);box-shadow:0 0 18px 6px #4fc0f066;pointer-events:none;offset-rotate:0deg;animation:m-comet 20s linear infinite}
@keyframes m-comet{from{offset-distance:0%}to{offset-distance:100%}}
.fx3d main{position:relative;z-index:1}
@media(max-width:899px){.m-route,.m-comet{display:none!important}}

/* 內頁：懸浮頁首底下留出空間 */
.fx3d:not(.fx3d-home) main{padding-top:clamp(98px,7.4vw,124px)}
@media(max-width:600px){.fx3d:not(.fx3d-home) main{padding-top:86px}}

/* ===== 內頁：頁首拆成兩塊立體方格（文字格＋立體圖格），分類切換列也是一格（不改各頁內容結構） ===== */
.fx3d .page-hero .page-hero__card{display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,26%,460px);gap:var(--c-gap);align-items:stretch;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.fx3d .page-hero .page-hero__card::before,.fx3d .page-hero .page-hero__card::after{display:none}
.fx3d .page-hero .page-hero__card:not(:has(.page-hero__art)){grid-template-columns:minmax(0,1fr)}
.fx3d .page-hero .page-hero__copy,.fx3d .page-hero .page-hero__art,.fx3d .page-hero .subnav{position:relative;border:1px solid #cdddea;border-radius:var(--c-radius);background:linear-gradient(150deg,#fff 45%,#f2f8fd);box-shadow:var(--c-shadow)}
.fx3d .page-hero .page-hero__copy{justify-content:center;gap:clamp(12px,1.1vw,22px);padding:var(--c-pad);min-height:clamp(200px,15vw,330px)}
.fx3d .page-hero .page-hero__copy::before,.fx3d .page-hero .subnav::before{content:"";position:absolute;inset:1px 18px auto;height:1px;background:#fff;pointer-events:none}
.fx3d .page-hero .page-hero__art{display:grid;place-items:center;padding:clamp(14px,1.2vw,26px);background:#fff;overflow:hidden}
.fx3d .page-hero .page-hero__art img{width:min(76%,300px);height:auto;mix-blend-mode:normal;animation:c-float 5.8s ease-in-out infinite}
.fx3d .page-hero h1{font-size:clamp(32px,2.6vw,60px);letter-spacing:-.02em}
.fx3d .page-hero .subnav{margin-top:var(--c-gap);padding:clamp(14px,1.2vw,26px);display:flex;flex-wrap:wrap;gap:12px}
.fx3d .page-hero .subnav .btn{border-radius:50px;min-height:50px;height:auto;padding:12px 20px 9px}
.fx3d .page-hero .subnav .btn[aria-current="page"]{background:linear-gradient(145deg,#218fe7,#0267b9);color:#fff;border-color:#1166a6;border-bottom-color:#004879}
.fx3d main>section.page-hero:first-child{padding-bottom:0}
.fx3d .page-hero + .page-section{padding-top:clamp(26px,2.6vw,56px)}

/* 內頁內容卡：統一成丙版立體方格（白到淡藍、細邊、多層投影；可點的整張浮起） */
.fx3d main>section:not(.page-hero):not(#hero) .card{border:1px solid #cdddea;border-radius:var(--c-radius);background:linear-gradient(150deg,#fff 45%,#f2f8fd);box-shadow:var(--c-shadow);transition:transform .3s,box-shadow .3s}
.fx3d main>section:not(.page-hero):not(#hero) .card::before{inset:1px 18px auto;height:1px;border-radius:0;background:#fff}
@media(hover:hover){
 .fx3d main>section:not(.page-hero):not(#hero) a.card:hover{transform:translateY(-6px);box-shadow:inset 0 2px 0 #fff,inset 0 -5px 0 #cfdfed,0 6px 8px -5px #16456b30,0 20px 34px -14px #134b764a,0 42px 65px -35px #256e9b55}
}
.fx3d main .sec-head h2{font-size:var(--fs-h2)}

@media(max-width:899px){
 .fx3d .page-hero .page-hero__card{grid-template-columns:minmax(0,1fr) clamp(140px,30%,220px)}
 .fx3d .page-hero .page-hero__art{display:grid}
}
@media(max-width:600px){
 .fx3d .page-hero .page-hero__card{grid-template-columns:minmax(0,1fr)}
 .fx3d .page-hero .page-hero__art{display:none}
 .fx3d .page-hero .page-hero__copy{min-height:0;padding:24px 20px}
 .fx3d .page-hero .subnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px}
 .fx3d .page-hero .subnav .btn{font-size:16px;padding-inline:8px;white-space:normal;word-break:keep-all}
 .fx3d .page-hero .subnav .btn:last-child:nth-child(odd){grid-column:1 / -1}
}

/* 首屏說明字至少 16px；手機上三步驟改成直排（一列一步，卡片不會擠成一條） */
.fx3d .hero-caption p,.fx3d .hero-caption .sec-head__eyebrow{font-size:max(16px,.72vw)}
@media(max-width:600px){
 .fx3d #airflow-steps{grid-template-columns:minmax(0,1fr);gap:8px}
 .fx3d .airflow-step{display:flex;flex-direction:row;align-items:center;gap:14px;padding:12px 14px;text-align:left}
 .fx3d .airflow-step__title{flex:0 0 auto}
 .fx3d .airflow-step p{margin:0;font-size:16px;line-height:1.55}
}
.fx3d .airflow-step p{font-size:max(16px,.69vw)}

/* 離開畫面暫停（fx.js 依位置切換 m-paused） */
.fx3d .m-paused,.fx3d .m-paused *,.fx3d .m-paused::after,.fx3d .m-paused *::after{animation-play-state:paused!important}
/* 列印：進場前的隱藏狀態一律取消，內容完整印出 */
@media print{html.fx-on .c-reveal:not(.is-in),html.fx-on .c-reveal{opacity:1!important;transform:none!important;animation:none!important}.m-route,.m-comet,.c-ambient{display:none!important}}
/* 產品詳情頁頁首只有麵包屑，不撐高 */
.fx3d-detail .page-hero .page-hero__copy{min-height:0}
/* 產品詳情：大照片固定在格子上方（不隨右側資訊變高而掉到下半部） */
.fx3d .shop-page[data-page="product"] .shop-product-visual,.fx3d.shop-page[data-page="product"] .shop-product-visual{justify-content:flex-start}

/* 實績照片牆加強立體：牆厚分層加深、說明牌縮到左下，露出右下的透視地坪 */
.fx3d .m-case-wall .c-case-photo{box-shadow:1px 0 0 #e4ebf0,5px 3px 0 #ccd8e1,9px 5px 0 #bfcdd8,13px 7px 0 #b2c3cf,17px 9px 0 #a6b9c7,40px 50px 50px -26px #1f415e80}
@media(min-width:900px){
 .fx3d .m-case-wall{align-items:flex-end;justify-content:flex-start}
 .fx3d .m-case-wall .c-case-copy{width:min(64%,460px);margin-right:auto}
 .fx3d .m-case-wall .c-case-photo{height:60%}
}

/* ======================================================================
   v2（2026-10-03 老闆回饋：頁尾沒改、導航列不 OK、標題格太空、內頁要明顯改）
   ====================================================================== */

/* ---------- 頁首：滿版玻璃頁首＋中間一排立體按鍵（目前頁＝按下去的藍鍵） ---------- */
.fx3d .site-header{position:fixed;inset:0 0 auto;z-index:40;pointer-events:auto;background:linear-gradient(180deg,#ffffffeb,#f6faffe0);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 1px 0 #0f274712,0 14px 34px -26px #0f274780;border-bottom:0}
.fx3d .site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#4fc0f0 20%,#1e88e5 50%,#4fc0f0 80%,transparent);opacity:.75;pointer-events:none}
.fx3d .header-inner{border:0;border-radius:0;box-shadow:none;padding-inline:0}
.fx3d .header-inner::before{display:none}
.fx3d .site-nav__inner{padding-block:12px}
@media(min-width:1536px){
 .fx3d .nav-menu{gap:4px;padding:5px;border-radius:16px;background:linear-gradient(180deg,#e6eef6,#f4f8fc);box-shadow:inset 0 2px 5px #0f27471f,inset 0 -1px 0 #fff,0 1px 0 #fff}
 .fx3d .site-header .nav-link{height:44px;padding:2px clamp(9px,.72vw,17px) 0;border:1px solid #d6e2ec;border-bottom:3px solid #c3d4e2;border-radius:11px;background:linear-gradient(180deg,#fff,#f0f5fa);color:#173a5e;font-weight:800;box-shadow:0 1px 0 #fff inset,0 3px 6px -3px #0f274740;transition:transform .16s,box-shadow .16s,border-color .16s,color .16s}
 .fx3d .site-header .nav-link:hover,.fx3d .site-header .nav-item:focus-within>.nav-link{transform:translateY(-2px);color:#0267b9;border-color:#bfe0f5;border-bottom-color:#4fc0f0;box-shadow:0 1px 0 #fff inset,0 8px 14px -8px #0267b980;background:linear-gradient(180deg,#fff,#eaf5fd)}
 .fx3d .site-header .nav-link[aria-current="page"]{transform:translateY(1px);background:linear-gradient(180deg,#2a95ec,#0267b9);color:#fff;border-color:#0a5fa6;border-bottom-color:#014e8e;box-shadow:inset 0 2px 4px #00000026,0 1px 0 #ffffff8c}
 .fx3d .site-header .list-link--icon{width:52px;height:50px;border-radius:13px}
 .fx3d .site-header .mobile-menu__actions>.btn{height:50px;border-radius:13px}
}
/* 子選單：立體卡片，項目滑過出現藍色指示條 */
.fx3d .nav-sub{top:calc(100% + 12px);padding:10px;border:1px solid #d3e2ee;border-radius:18px;background:linear-gradient(180deg,#fff,#f4f9fd);box-shadow:0 1px 0 #fff inset,0 24px 50px -18px #0f274766,0 6px 14px -8px #0f274733}
.fx3d .nav-sub::after{left:18px;right:18px;height:3px}
.fx3d .nav-sub a{position:relative;padding:10px 16px 10px 20px;border-radius:10px;font-weight:600;color:#26486b}
.fx3d .nav-sub a::before{content:"";position:absolute;left:8px;top:50%;width:4px;height:0;border-radius:4px;background:linear-gradient(#4fc0f0,#0267b9);transform:translateY(-50%);transition:height .16s}
.fx3d .nav-sub a:hover,.fx3d .nav-sub a:focus-visible{background:#eaf4fd;color:#0267b9}
.fx3d .nav-sub a:hover::before,.fx3d .nav-sub a:focus-visible::before{height:60%}
/* 手機：清單與選單鈕也是立體按鍵 */
/* 1200～1535 收成選單鈕時頁首內框維持與內容同寬（商標對齊內容左緣），1199 以下才貼近兩側 */
@media(max-width:1199px){.fx3d .header-inner{width:calc(100% - 32px)}}
@media(max-width:1535.98px){
 .fx3d .site-header{inset:0 0 auto}
 .fx3d .site-header .list-link--compact,.fx3d .site-header .menu-toggle{border-radius:13px;border-bottom-width:3px}
 .fx3d .mobile-menu__nav .btn{border-radius:14px;border-bottom-width:4px}
}
.fx3d:not(.fx3d-home) main{padding-top:clamp(92px,6.6vw,112px)}
@media(max-width:1535.98px){.fx3d:not(.fx3d-home) main{padding-top:86px}}
@media(max-width:600px){.fx3d:not(.fx3d-home) main{padding-top:80px}}
@media(min-width:901px){.fx3d #hero{padding-top:104px}}

/* ---------- 首頁：區塊標題改成橫向標題列（不再佔一個大空格），下面全部給內容 ---------- */
.fx3d .c-section-title{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:var(--c-gap);padding:0 0 clamp(6px,.6vw,12px);border:0;border-radius:0;background:none;box-shadow:none;min-height:0}
.fx3d .c-section-title::before{display:none}
.fx3d .c-section-title .sec-head{position:relative;padding-left:clamp(16px,1.2vw,24px)}
.fx3d .c-section-title .sec-head::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:5px;border-radius:5px;background:linear-gradient(#4fc0f0,#0267b9);box-shadow:0 0 14px #4fc0f088}
.fx3d .c-section-title .sec-head>p:last-child{max-width:none}
.fx3d .c-section-title h2{font-size:clamp(30px,2.3vw,54px)}
.fx3d .c-section-title .btn{flex:0 0 auto}
@media(hover:hover){.fx3d:not(.fx3d-detail) .c-section-title.c-tile:hover{transform:none;box-shadow:none}}
.fx3d .c-products-grid{grid-template-areas:"title title title title title title title title title title title title" "p1 p1 p1 p1 p1 p1 p2 p2 p2 p3 p3 p3" "p1 p1 p1 p1 p1 p1 p4 p4 p4 p5 p5 p5";grid-template-rows:auto repeat(2,minmax(clamp(240px,15vw,330px),auto))}
.fx3d .c-scenes-grid{grid-template-areas:"title title title title title title title title title title title title" "s1 s1 s1 s1 s1 s1 s2 s2 s2 s2 s2 s2" "s1 s1 s1 s1 s1 s1 s3 s3 s3 s4 s4 s4";grid-template-rows:auto repeat(2,minmax(clamp(240px,15vw,330px),auto))}
@media(min-width:1280px){
 .fx3d .c-cases-grid{grid-template-areas:"title title title title title title title title title title title title" "k1 k1 k1 k1 k1 k1 k1 k2 k2 k2 k2 k2" "k1 k1 k1 k1 k1 k1 k1 k3 k3 k3 k3 k3";grid-template-rows:auto repeat(2,minmax(clamp(250px,14vw,330px),auto))}
}
@media(min-width:1900px){.fx3d .c-cases-grid{grid-template-areas:"title title title title title title title title title title title title" "k1 k1 k1 k1 k1 k1 k1 k2 k2 k2 k2 k2" "k1 k1 k1 k1 k1 k1 k1 k3 k3 k3 k3 k3"}}
.fx3d .c-product-1 .c-product-photo{height:clamp(300px,25vw,560px)}
.fx3d .c-scene-1 .c-scene-visual img{height:clamp(330px,26vw,600px)}
@media(min-width:900px) and (max-width:1279px){
 .fx3d .c-products-grid{grid-template-areas:"title title title title title title title title" "p1 p1 p1 p1 p2 p2 p3 p3" "p1 p1 p1 p1 p4 p4 p5 p5";grid-template-rows:auto auto auto}
 .fx3d .c-scenes-grid{grid-template-areas:"title title title title title title title title" "s1 s1 s1 s1 s2 s2 s2 s2" "s1 s1 s1 s1 s3 s3 s4 s4";grid-template-rows:auto auto auto}
 .fx3d .c-cases-grid{grid-template-areas:"title title title title title title title title" "k1 k1 k1 k1 k1 k1 k1 k1" "k2 k2 k2 k2 k3 k3 k3 k3"}
}
@media(max-width:899px){
 .fx3d .c-products-grid{grid-template-areas:"title title title title" "p1 p1 p1 p1" "p2 p2 p3 p3" "p4 p4 p5 p5";grid-template-rows:auto}
 .fx3d .c-scenes-grid{grid-template-areas:"title title title title" "s1 s1 s1 s1" "s2 s2 s2 s2" "s3 s3 s4 s4";grid-template-rows:auto}
 .fx3d .c-cases-grid{grid-template-areas:"title title title title" "k1 k1 k1 k1" "k2 k2 k3 k3"}
}
@media(max-width:599px){
 .fx3d .c-section-title{flex-direction:column;align-items:flex-start}
 .fx3d .c-products-grid{grid-template-areas:"title title" "p1 p1" "p2 p3" "p4 p5"}
 .fx3d .c-scenes-grid{grid-template-areas:"title title" "s1 s1" "s2 s2" "s3 s4"}
 .fx3d .c-cases-grid{grid-template-areas:"title title" "k1 k1" "k2 k2" "k3 k3"}
}
@media(max-width:419px){
 .fx3d .c-products-grid{grid-template-areas:"title title" "p1 p1" "p2 p2" "p3 p3" "p4 p4" "p5 p5"}
 .fx3d .c-scenes-grid{grid-template-areas:"title title" "s1 s1" "s2 s2" "s3 s3" "s4 s4"}
}

@media(min-width:900px){.fx3d .m-case-wall .c-case-photo{height:54%}}

/* ---------- 內頁頁首：一整座有景深的舞台（天空漸層＋流動風線＋透視地面＋漂浮立體圖），分類切換列＝立體按鍵列 ---------- */
.fx3d .page-hero .page-hero__card{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,32%);align-items:center;gap:var(--c-gap);min-height:clamp(250px,19vw,420px);padding:clamp(28px,2.8vw,64px);border:1px solid #cfe0ee;border-radius:var(--c-radius);background:radial-gradient(ellipse 55% 80% at 80% 30%,#ffffff 0,transparent 60%),linear-gradient(120deg,#ffffff 0%,#eef6fd 45%,#d8edfc 100%);box-shadow:var(--c-shadow);overflow:hidden}
.fx3d .page-hero .page-hero__card:not(:has(.page-hero__art)){grid-template-columns:minmax(0,1fr)}
.fx3d .page-hero .page-hero__card::before{content:"";display:block;position:absolute;inset:0 -50% 0 0;z-index:-1;width:auto;height:auto;border-radius:0;background:repeating-linear-gradient(176deg,transparent 0 46px,#4fc0f01c 46px 48px,transparent 48px 92px,#1e88e514 92px 93px,transparent 93px 140px);animation:ph-wind 14s linear infinite;pointer-events:none}
.fx3d .page-hero .page-hero__card::after{content:"";display:block;position:absolute;left:30%;right:-20%;bottom:0;top:auto;width:auto;height:46%;z-index:-1;border-radius:0;background:repeating-linear-gradient(90deg,#86b4d24d 0 1px,transparent 1px 64px),repeating-linear-gradient(0deg,#86b4d24d 0 1px,transparent 1px 40px);transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(transparent,#000 70%);mask-image:linear-gradient(transparent,#000 70%);pointer-events:none;animation:none}
@keyframes ph-wind{from{transform:translateX(0)}to{transform:translateX(-33.33%)}}
.fx3d .page-hero .page-hero__copy{position:relative;z-index:1;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;gap:clamp(12px,1.1vw,22px)}
.fx3d .page-hero .page-hero__copy::before{display:none}
.fx3d .page-hero h1{font-size:clamp(34px,3vw,68px);font-weight:900;letter-spacing:-.02em;background:linear-gradient(90deg,#0f2747,#0267b9 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx3d .page-hero .page-hero__lead{font-size:clamp(17px,1vw,22px);max-width:40em}
.fx3d .page-hero .page-hero__art{position:relative;z-index:1;display:grid;place-items:center;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;align-self:stretch}
.fx3d .page-hero .page-hero__art::after{content:"";position:absolute;left:18%;right:18%;bottom:4%;height:10%;border-radius:50%;background:radial-gradient(ellipse,#0f274740,transparent 70%);filter:blur(2px);animation:ph-shadow 5.8s ease-in-out infinite;z-index:-1}
.fx3d .page-hero .page-hero__art img{width:min(84%,340px);mix-blend-mode:multiply;animation:c-float 5.8s ease-in-out infinite}
@keyframes ph-shadow{0%,100%{transform:scaleX(1);opacity:.9}50%{transform:scaleX(.82);opacity:.6}}
/* 分類切換列＝與頁首導航同款的立體按鍵列 */
.fx3d .page-hero .subnav{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px;margin-top:var(--c-gap);padding:6px;border:0;border-radius:18px;background:linear-gradient(180deg,#e3ecf5,#f2f7fb);box-shadow:inset 0 2px 6px #0f27471f,inset 0 -1px 0 #fff,0 1px 0 #fff}
.fx3d .page-hero .subnav::before{display:none}
.fx3d .page-hero .subnav .btn{min-height:48px;height:auto;padding:12px clamp(16px,1.2vw,26px) 9px;border:1px solid #d6e2ec;border-bottom:3px solid #c3d4e2;border-radius:13px;background:linear-gradient(180deg,#fff,#f0f5fa);color:#173a5e;font-weight:800;box-shadow:0 1px 0 #fff inset,0 3px 6px -3px #0f274740;transition:transform .16s,box-shadow .16s,border-color .16s,color .16s}
.fx3d .page-hero .subnav .btn:hover{transform:translateY(-2px);color:#0267b9;border-bottom-color:#4fc0f0;box-shadow:0 1px 0 #fff inset,0 8px 14px -8px #0267b980}
.fx3d .page-hero .subnav .btn[aria-current="page"]{transform:translateY(1px);background:linear-gradient(180deg,#2a95ec,#0267b9);color:#fff;border-color:#0a5fa6;border-bottom-color:#014e8e;box-shadow:inset 0 2px 4px #00000026,0 1px 0 #ffffff8c}
.fx3d .page-hero .breadcrumb a.btn{border-radius:11px;border-bottom-width:3px}
/* 內頁區塊標題：小標膠囊＋左側發光色條（跟首頁標題列同語言） */
.fx3d main>section:not(.page-hero):not(#hero) .sec-head{position:relative;padding-left:clamp(16px,1.2vw,24px)}
.fx3d main>section:not(.page-hero):not(#hero) .sec-head:not(:empty)::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:5px;border-radius:5px;background:linear-gradient(#4fc0f0,#0267b9);box-shadow:0 0 14px #4fc0f088}
@media(max-width:899px){
 .fx3d .page-hero .page-hero__card{grid-template-columns:minmax(0,1fr) clamp(130px,30%,220px)}
}
@media(max-width:600px){
 .fx3d .page-hero .page-hero__card{grid-template-columns:minmax(0,1fr);min-height:0;padding:26px 20px}
 .fx3d .page-hero .page-hero__art{display:none}
 .fx3d .page-hero .subnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:6px}
 .fx3d .page-hero .subnav .btn{font-size:16px;padding-inline:8px;white-space:normal;word-break:keep-all}
}
.fx3d-detail .page-hero .page-hero__card{min-height:0;padding-block:clamp(18px,1.6vw,30px)}
.fx3d .page-hero .page-hero__art{z-index:auto}

/* ---------- 專業工程安裝：五張服務卡（照片＋編號＋說明），6 欄格線排成 3＋2，不落單 ---------- */
.fx3d .svc-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--c-gap)}
.fx3d .svc-grid>.svc-card{grid-column:span 2;flex:none;display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;text-decoration:none}
.fx3d .svc-grid>.svc-card:nth-child(n+4){grid-column:span 3}
.fx3d .svc-card__photo{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:#e8f1f8}
.fx3d .svc-card__photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.fx3d .svc-card:hover .svc-card__photo img{transform:scale(1.06)}
.fx3d .svc-card__photo::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,#0f274733);pointer-events:none}
.fx3d .svc-card__body{position:relative;display:flex;flex-direction:column;gap:12px;flex:1;padding:clamp(22px,1.8vw,36px)}
.fx3d .svc-card__no{position:absolute;right:clamp(18px,1.4vw,30px);top:calc(clamp(22px,1.8vw,36px) * -1 - 28px);display:grid;place-items:center;width:56px;height:56px;border:1px solid #fff;border-bottom:4px solid #014e8e;border-radius:16px;background:linear-gradient(145deg,#4fc0f0,#1e88e5 55%,#0267b9);color:#fff;font:900 22px/1 "Outfit",var(--font);box-shadow:0 12px 20px -10px #0267b9aa}
.fx3d .svc-card h2{margin:0;color:#0f2747;font-size:clamp(22px,1.4vw,32px)}
.fx3d .svc-card p{margin:0;color:#36506f}
.fx3d .svc-card__more{align-self:flex-start;margin-top:auto}
@media(max-width:1023px){.fx3d .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fx3d .svc-grid>.svc-card,.fx3d .svc-grid>.svc-card:nth-child(n+4){grid-column:span 1}.fx3d .svc-grid>.svc-card:last-child{grid-column:1 / -1}.fx3d .svc-grid>.svc-card:last-child .svc-card__photo{aspect-ratio:21/8}}
@media(max-width:600px){.fx3d .svc-grid{grid-template-columns:minmax(0,1fr)}.fx3d .svc-grid>.svc-card:last-child .svc-card__photo{aspect-ratio:16/10}}

/* ---------- 電商平台：兩張大平台卡（左邊立體徽章、右邊說明） ---------- */
.fx3d .plat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--c-gap)}
.fx3d .plat-grid>.plat-card{flex:none;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(20px,2vw,40px);padding:clamp(26px,2.4vw,52px);text-align:left;min-height:clamp(230px,15vw,320px)}
.fx3d .plat-card__badge{display:grid;place-items:center;width:clamp(110px,8vw,160px);aspect-ratio:1;border:1px solid #fff;border-radius:30px;color:#fff;box-shadow:inset 0 2px 0 #ffffff80,inset 0 -8px 0 #00000026,0 26px 40px -22px #0f2747aa;animation:c-float 5.6s ease-in-out infinite}
.fx3d .plat-card--shopee .plat-card__badge{background:linear-gradient(145deg,#ff9a5a,#f5572d 60%,#d9411c)}
.fx3d .plat-card--site .plat-card__badge{background:linear-gradient(145deg,#4fc0f0,#1e88e5 55%,#0267b9);animation-delay:-2.8s}
.fx3d .plat-card__badge svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.fx3d .plat-card__body{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.fx3d .plat-card h2{color:#0f2747;font-size:clamp(26px,1.9vw,42px)}
.fx3d .extra-platform>.plat-card__body>.btn{align-self:flex-start;margin-top:6px}
@media(max-width:899px){.fx3d .plat-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){.fx3d .plat-grid>.plat-card{grid-template-columns:minmax(0,1fr)}}

/* ---------- 產業應用：場域圖已在頁首，內容區不重複放；改成一條「常見問題」橫向方格 ---------- */
.fx3d .application-scene .application-visual{display:none}
.fx3d .application-scene .application-layout{display:block}
.fx3d .application-scene .application-copy{display:flex;align-items:center;justify-content:space-between;gap:var(--c-gap);flex-wrap:wrap;padding:clamp(22px,2vw,40px) clamp(24px,2.4vw,48px);border:1px solid #cdddea;border-radius:var(--c-radius);background:linear-gradient(120deg,#fff 40%,#e9f4fd);box-shadow:var(--c-shadow)}
.fx3d .application-scene .application-copy .sec-head{display:flex;align-items:center;flex-wrap:wrap;gap:14px 26px;margin:0}
.fx3d .application-scene .application-copy h2{margin:0;white-space:nowrap}
.fx3d .application-scene .application-pains{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.fx3d .application-scene .application-pains li{display:inline-flex;align-items:center;gap:8px;padding:9px 18px 7px;border:1px solid #f3c58a;border-bottom:3px solid #e8a24a;border-radius:40px;background:linear-gradient(#fff8ee,#ffeacc);color:#8a4b06;font-weight:800;font-size:clamp(16px,.95vw,20px)}
.fx3d .application-scene .application-pains li::before{content:"";width:9px;height:9px;border-radius:50%;background:#f59e0b;box-shadow:0 0 8px #f59e0b99}
.fx3d .application-scene .application-solution{margin:0}
.fx3d .application-scene .application-copy{flex-direction:row;text-align:left}
.fx3d .application-scene .application-copy .sec-head{flex-direction:row;align-items:center;justify-content:flex-start;padding-left:0;text-align:left}
.fx3d .application-scene .application-copy .sec-head::before{display:none}
.fx3d .application-scene .application-copy h2{position:relative;padding-left:22px;font-size:clamp(24px,1.6vw,34px)}
.fx3d .application-scene .application-copy h2::before{content:"";position:absolute;left:0;top:10%;bottom:10%;width:5px;border-radius:5px;background:linear-gradient(#f5b54a,#e8890c);box-shadow:0 0 12px #f59e0b88}
@media(max-width:600px){.fx3d .application-scene .application-copy{flex-direction:column;align-items:flex-start}}
.fx3d .application-scene .application-copy .sec-head{width:auto;flex:1 1 auto}
.fx3d .application-scene .application-pains li{padding-left:18px}
.fx3d .application-scene .application-pains li::before{position:static;box-shadow:0 0 8px #f59e0b99}
.fx3d .svc-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fx3d .svc-grid--3>.svc-card,.fx3d .svc-grid--3>.svc-card:nth-child(n+4){grid-column:auto}
@media(max-width:1023px){.fx3d .svc-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}.fx3d .svc-grid--3>.svc-card:last-child{grid-column:1 / -1}}
@media(max-width:600px){.fx3d .svc-grid--3{grid-template-columns:minmax(0,1fr)}}

/* ---------- 改善做法：每種做法＝一整塊方格（左：編號＋做法；右：建議設備），三塊之間不畫分隔線 ---------- */
.fx3d .subpage-method+.subpage-method>.band{border-top:0;padding-top:0}
.fx3d .subpage-method{counter-increment:fxmethod}
.fx3d main{counter-reset:fxmethod}
.fx3d .subpage-method__layout{grid-template-columns:minmax(260px,.75fr) minmax(0,2fr);align-items:stretch;gap:0;border:1px solid #cdddea;border-radius:var(--c-radius);background:#fff;box-shadow:var(--c-shadow);overflow:hidden}
.fx3d .subpage-method__intro{position:relative;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:clamp(28px,2.6vw,56px) clamp(24px,2.2vw,48px) !important;background:radial-gradient(ellipse at 0% 100%,#4fc0f040,transparent 60%),linear-gradient(150deg,#e9f5fe,#d2e9fb);color:#0f2747}
.fx3d .subpage-method__intro::before{content:counter(fxmethod,decimal-leading-zero) !important;position:static !important;display:grid !important;place-items:center;width:62px !important;height:62px;border:1px solid #fff;border-bottom:4px solid #014e8e;border-radius:18px !important;background:linear-gradient(145deg,#4fc0f0,#1e88e5 55%,#0267b9) !important;color:#fff;font:900 24px/1 "Outfit",var(--font);box-shadow:0 14px 22px -12px #0267b9aa !important}
.fx3d .subpage-method__intro h2{font-size:clamp(28px,2.1vw,46px)}
.fx3d .subpage-method__intro p{font-size:clamp(17px,1vw,22px);color:#36506f}
.fx3d .subpage-method__equipment{padding:clamp(22px,2vw,40px)}
.fx3d .subpage-method__equipment>h3{font-size:16px;letter-spacing:.12em;color:#0267b9;margin-bottom:14px}
.fx3d .subpage-method .subpage-equipment{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.fx3d .subpage-method .subpage-equipment>.products-card{box-shadow:inset 0 2px 0 #fff,inset 0 -4px 0 #dbe8f3,0 10px 20px -14px #154a7466}
.fx3d .subpage-method .subpage-equipment>.products-card:only-child{max-width:520px}
@media(max-width:899px){.fx3d .subpage-method__layout{grid-template-columns:minmax(0,1fr)}}
.fx3d .subpage-method__intro{align-self:stretch}
.fx3d .subpage-method .subpage-equipment>.products-card:only-child{max-width:none}
.fx3d .subpage-method .subpage-equipment>.products-card:only-child figcaption h3{font-size:clamp(24px,1.7vw,36px)}
@media(min-width:1536px){.fx3d .nav-menu{gap:6px}}
@media(min-width:1800px){.fx3d .site-header .nav-link{height:52px;font-size:20px;padding-inline:clamp(16px,.9vw,24px)}.fx3d .nav-menu{gap:8px;padding:6px}.fx3d .site-header .list-link--icon,.fx3d .site-header .mobile-menu__actions>.btn{height:56px}}
/* 主選單 10 項、每項四個字（2026-10-05 老闆：「我要都四個字」，產品系列、服務項目）：選單比原本寬，各寬度重新配空間，
   品牌字、選單、購物車之間留 6px 以上（量測工具 _tools/member_header_sweep.js）。
   區間上限寫 .98 是為了瀏覽器縮放時的小數寬度不漏接。
   1536～1599：會員鈕只留人像圖示，做成跟購物車鈕一樣的方鈕（1535 以下收成選單鈕時本來就是這樣）；1600 以上才顯示「會員登入」。 */
@media(min-width:1536px) and (max-width:1599.98px){
 .fx3d .site-header .member-link--icon,.fx3d.fx3d-home .site-header .member-link--icon{width:52px;padding:0;gap:0;justify-content:center}
 .fx3d .site-header .member-link--icon .member-link__text{display:none}
}
/* 選單鍵內距：1536～1599、1800 以上（1535 以下收成選單鈕） */
@media(min-width:1536px) and (max-width:1599.98px){.fx3d .site-header .primary-nav .nav-link,.fx3d.fx3d-home .site-header .primary-nav .nav-link{padding-inline:clamp(3px,calc(6.7px + (100vw - 1400px) * .042),11.5px)}}
@media(min-width:1800px){.fx3d .site-header .primary-nav .nav-link{padding-inline:min(clamp(16px,.9vw,24px),calc(10.3px + (100vw - 1800px) * .037))}}

/* ======================================================================
   內頁頁首 v3（2026-10-03 老闆：每頁頁首要不一樣、不要太空；所有頁大小要一樣；右邊全部都要有 3D 動態圖）
   右側＝即時 3D 小場景（js/hero-stage.js，每頁主題不同）；六種色調；左側數量標籤
   高度：固定 var(--hero-h)，同一寬度下全站每一頁一樣高（不用 min-height，內容不可撐高）
   ====================================================================== */
.fx3d{--hero-h:clamp(340px,24vw,480px)}
.fx3d .page-hero .page-hero__card{grid-template-columns:minmax(0,1fr) minmax(320px,48%);height:var(--hero-h);min-height:0;padding:clamp(18px,1.6vw,32px) clamp(28px,2.8vw,64px);box-sizing:border-box;align-items:stretch}
.fx3d .page-hero .page-hero__copy{min-height:0;max-height:100%;overflow:hidden;justify-content:center}
/* 麵包屑固定一行（太長可左右滑），不讓它換行撐高 */
.fx3d .page-hero .breadcrumb{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;white-space:nowrap;max-width:100%;padding-bottom:4px}
.fx3d .page-hero .breadcrumb::-webkit-scrollbar{display:none}
.fx3d .page-hero .breadcrumb li{flex:0 0 auto}
.fx3d .page-hero .page-hero__lead{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.fx3d .page-hero .page-hero__card:has(.hv-tone-sky){background:radial-gradient(ellipse 60% 90% at 78% 40%,#fff 0,transparent 60%),linear-gradient(120deg,#fff 0%,#eef6fd 42%,#cfe6fa 100%)}
.fx3d .page-hero .page-hero__card:has(.hv-tone-ice){background:radial-gradient(ellipse 60% 90% at 78% 40%,#fff 0,transparent 60%),linear-gradient(120deg,#fff 0%,#ebf9fd 42%,#c6ecf8 100%)}
.fx3d .page-hero .page-hero__card:has(.hv-tone-teal){background:radial-gradient(ellipse 60% 90% at 78% 40%,#fff 0,transparent 60%),linear-gradient(120deg,#fff 0%,#ecf9f7 42%,#c8ece6 100%)}
.fx3d .page-hero .page-hero__card:has(.hv-tone-steel){background:radial-gradient(ellipse 60% 90% at 78% 40%,#fff 0,transparent 60%),linear-gradient(120deg,#fff 0%,#eff3fb 42%,#d3ddf3 100%)}
.fx3d .page-hero .page-hero__card:has(.hv-tone-warm){background:radial-gradient(ellipse 50% 80% at 82% 30%,#fff3dd 0,transparent 60%),linear-gradient(120deg,#fff 0%,#f4f8fd 45%,#d9eaf9 100%)}
.fx3d .page-hero .page-hero__card:has(.hv-tone-mist){background:radial-gradient(ellipse 60% 90% at 78% 40%,#fff 0,transparent 60%),linear-gradient(120deg,#fff 0%,#f1f7fd 42%,#dde9f8 100%)}

/* 數量標籤：立體小方塊（大數字＋單位） */
.fx3d .hv-stats{display:flex;flex-wrap:wrap;gap:12px;margin:2px 0 0;padding:0;list-style:none}
.fx3d .hv-stats li{display:inline-flex;align-items:baseline;gap:8px;padding:9px 16px 8px;border:1px solid #fff;border-bottom:3px solid #c9dbea;border-radius:16px;background:linear-gradient(180deg,#ffffffee,#eef6fdd9);box-shadow:0 10px 22px -14px #0f274766}
.fx3d .hv-stats b{font:900 clamp(22px,1.6vw,34px)/1 "Outfit",var(--font);color:#0267b9}
.fx3d .hv-stats span{font-size:16px;font-weight:700;color:#36506f;white-space:nowrap}

/* 右側 3D 舞台 */
.fx3d .page-hero .hv{position:relative;display:grid;place-items:center;align-self:stretch;height:100%;min-height:0;container-type:size;margin:calc(clamp(18px,1.6vw,32px) * -1) calc(clamp(28px,2.8vw,64px) * -1) calc(clamp(18px,1.6vw,32px) * -1) 0;padding:0;isolation:isolate;overflow:hidden;border-radius:0 var(--c-radius) var(--c-radius) 0;cursor:grab}
.fx3d .page-hero .hv::after{display:none}
.fx3d .hv__glow{position:absolute;left:10%;right:10%;top:6%;bottom:10%;z-index:0;border-radius:50%;background:radial-gradient(circle,#ffffffd9 0,#ffffff00 68%);pointer-events:none}
/* 備援圖＝該頁 3D 第一個畫面的實拍圖（長寬比 3）：取景跟 3D 鏡頭一樣以「寬、高較小的一邊」為準置中，3D 畫好後直接換手，畫面不跳 */
.fx3d .page-hero .hv .hv__img{position:absolute;z-index:1;left:50%;top:50%;width:auto;height:min(100cqh,100cqw);max-width:none;aspect-ratio:3;transform:translate(-50%,-50%);object-fit:contain;mix-blend-mode:normal;animation:none}
.fx3d .hv__canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block;opacity:0}
/* 沒有實拍圖（新加的產品分類）才讓 3D 淡入 */
.fx3d .hv:not(:has(.hv__img[src])) .hv__canvas{transition:opacity .6s}
.fx3d .hv.is-live .hv__canvas{opacity:1}
.fx3d .hv.is-live .hv__img{opacity:0}

/* 寬度調整：同一寬度全站同高 */
@media(max-width:1199px){.fx3d{--hero-h:350px}.fx3d .page-hero .page-hero__card{grid-template-columns:minmax(0,1fr) minmax(260px,46%)}}
@media(max-width:899px){.fx3d{--hero-h:330px}.fx3d .page-hero .page-hero__card{grid-template-columns:minmax(0,1fr) minmax(200px,44%)}}
@media(max-width:600px){
 .fx3d{--hero-h:460px}
 .fx3d .page-hero .page-hero__card{grid-template-columns:minmax(0,1fr);grid-template-rows:200px minmax(0,1fr);padding:0 18px 18px;gap:4px}
 .fx3d .page-hero .page-hero__art.hv{display:grid;order:-1;height:200px;margin:0 -18px;border-radius:var(--c-radius) var(--c-radius) 0 0}
 .fx3d .page-hero .page-hero__copy{justify-content:flex-start}
}

/* 頁首玻璃改由底層繪製：頁首本身不可有 backdrop-filter（會把全螢幕手機選單框在頁首那一條裡） */
.fx3d .site-header{background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.fx3d .site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#ffffffeb,#f6faffe0);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);pointer-events:none}

/* ---------- 手機／平板／窄桌機選單（寬度 ≤1535）：頂端固定的商標列＋每組一張立體卡片＋底部固定的預約鈕 ---------- */
@media(max-width:1535.98px){
 .fx3d .site-header .mobile-menu.is-open:not([hidden]){background:radial-gradient(ellipse 80% 40% at 100% 0,#d8edfc,transparent 60%),linear-gradient(180deg,#f6faff,#eaf3fb)}
 .fx3d .site-header .mobile-menu__inner{gap:14px;padding:0 0 calc(96px + env(safe-area-inset-bottom));width:calc(100% - 32px)}
 .fx3d .site-header .mobile-menu__head{position:sticky;top:0;z-index:2;margin:0 -16px;padding:12px 16px;background:#f6fafff2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 #0f274712,0 10px 20px -18px #0f274766}
 .fx3d .site-header .mobile-menu__head .site-brand__name{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:900;color:#0f2747}
 .fx3d .site-header .mobile-menu__head .site-brand__name::before{content:"";width:40px;height:35px;background:url('../../assets/img/logo-sm.webp') center/contain no-repeat}
 .fx3d .site-header .mobile-menu__head [data-menu-close]{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 16px;border-radius:14px;border-bottom-width:3px;font-size:17px}
 .fx3d .site-header .mobile-menu__head [data-menu-close]::before{content:"";width:16px;height:16px;background:linear-gradient(45deg,transparent 44%,currentColor 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,currentColor 44% 56%,transparent 56%)}
 .fx3d .site-header .mobile-menu__nav{gap:14px}
 .fx3d .mobile-menu__group{gap:10px;padding:12px;border:1px solid #d6e4f0;border-radius:20px;background:linear-gradient(160deg,#fff 50%,#f1f7fd);box-shadow:inset 0 2px 0 #fff,0 12px 24px -18px #0f274766}
 .fx3d .mobile-menu__group>.btn{justify-content:space-between;height:50px;padding:0 16px;border:0;border-radius:14px;background:linear-gradient(90deg,#eaf4fd,#f7fbff);color:#0f2747;font-size:18px;font-weight:900;box-shadow:inset 4px 0 0 #1e88e5}
 .fx3d .mobile-menu__group>.btn::after{content:"›";font-size:24px;line-height:1;color:#1e88e5}
 .fx3d .mobile-menu__group>.btn[aria-current="page"]{background:linear-gradient(90deg,#1e88e5,#0267b9);color:#fff;box-shadow:inset 0 2px 4px #00000026}
 .fx3d .mobile-menu__group>.btn[aria-current="page"]::after{color:#fff}
 .fx3d .mobile-menu__subnav{display:flex;flex-wrap:wrap;gap:8px}
 .fx3d .site-header .mobile-menu__subnav .btn{flex:1 1 calc(50% - 8px);min-width:0;min-height:46px;padding:9px 10px;border:1px solid #d6e2ec;border-bottom:3px solid #c3d4e2;border-radius:12px;background:linear-gradient(180deg,#fff,#f0f5fa);color:#173a5e;font-weight:700;box-shadow:0 3px 6px -4px #0f274740}
 .fx3d .site-header .mobile-menu__subnav .btn[aria-current="page"]{background:linear-gradient(180deg,#2a95ec,#0267b9);color:#fff;border-color:#0a5fa6;border-bottom-color:#014e8e}
 .fx3d .site-header .mobile-menu.is-open .mobile-menu__actions{position:fixed;left:0;right:0;bottom:0;z-index:3;display:flex;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#f6fafff2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 -1px 0 #0f274712,0 -10px 20px -18px #0f274766}
 .fx3d .site-header .mobile-menu.is-open .mobile-menu__actions>.btn{flex:1 1 auto;height:54px;font-size:18px}
}
@media(min-width:600px) and (max-width:1535.98px){
 .fx3d .site-header .mobile-menu__subnav .btn{flex-basis:calc(33.33% - 8px)}
 .fx3d .site-header .mobile-menu__nav{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
}
@media(min-width:900px) and (max-width:1535.98px){.fx3d .site-header .mobile-menu__subnav .btn{flex-basis:calc(50% - 8px)}}
@media(max-width:1535.98px){
 .fx3d .site-header .mobile-menu__subnav .btn,.fx3d .site-header .mobile-menu__subnav .btn{flex:1 1 auto;white-space:nowrap;padding-inline:14px}
 .fx3d .site-header .mobile-menu__nav{align-items:stretch}
}
@media(min-width:600px) and (max-width:1535.98px){.fx3d .site-header .mobile-menu__subnav .btn{flex-basis:auto}}
@media(min-width:900px) and (max-width:1535.98px){.fx3d .site-header .mobile-menu__subnav .btn{flex-basis:auto}}
@media(max-width:1535.98px){.fx3d .site-header .mobile-menu__subnav .btn{width:auto}.fx3d .mobile-menu__group{align-content:start}}
/* 頁首文字區：間距收緊，固定高度內放得下（說明最多 3 行） */
.fx3d .page-hero .page-hero__copy{gap:clamp(8px,.75vw,16px)}
.fx3d .page-hero .shop-sample{margin:0;padding:8px 12px;font-size:16px;line-height:1.5}
.fx3d .page-hero .shop-action-row:empty{display:none}

/* ---------- 首頁產業應用四格：各寬度一致（2026-10-03 老闆：手機版商用顯示有問題） ---------- */
.fx3d .c-scene{position:relative}
.fx3d .c-scene .c-scene-visual{position:static}
.fx3d .c-scene-visual img{display:block;margin-inline:auto}
@media(max-width:899px){
 .fx3d .c-scenes-grid{grid-template-areas:"title title title title" "s1 s1 s2 s2" "s3 s3 s4 s4"}
 .fx3d .c-scene,.fx3d .c-scene-2{flex-direction:column;align-items:stretch}
 .fx3d .c-scene-2 .c-scene-visual,.fx3d .c-scene .c-scene-visual{width:100%;flex:1 1 auto}
 .fx3d .c-scene-visual img,.fx3d .c-scene-1 .c-scene-visual img{height:clamp(150px,26vw,230px);width:100%;object-fit:contain}
 .fx3d .c-scene-1 h3,.fx3d .c-scene h3{font-size:clamp(20px,3vw,26px)}
}
@media(max-width:599px){.fx3d .c-scenes-grid{grid-template-areas:"title title" "s1 s2" "s3 s4"}}
@media(max-width:479px){
 .fx3d .c-scenes-grid{grid-template-areas:"title title" "s1 s1" "s2 s2" "s3 s3" "s4 s4"}
 .fx3d .c-scene{flex-direction:row;align-items:center;gap:14px}
 .fx3d .c-scene .c-scene-visual,.fx3d .c-scene-2 .c-scene-visual{width:44%;flex:0 0 44%}
 .fx3d .c-scene-visual img,.fx3d .c-scene-1 .c-scene-visual img{height:auto;max-height:150px}
 .fx3d .c-scene .c-scene-copy{flex:1;min-width:0;padding:0}
}
@media(min-width:340px) and (max-width:419px){
 .fx3d .c-products-grid{grid-template-areas:"title title" "p1 p1" "p2 p3" "p4 p5"}
 .fx3d .c-product-photo{height:clamp(120px,34vw,150px)}
 .fx3d .c-product h3{font-size:18px}
}
@media(min-width:340px) and (max-width:419px){
 .fx3d .c-products-grid{grid-template-areas:"title title" "p1 p1" "p2 p3" "p4 p5" !important}
}
@media(max-width:339px){.fx3d .c-products-grid{grid-template-areas:"title title" "p1 p1" "p2 p2" "p3 p3" "p4 p4" "p5 p5"}}
/* 產品分類／產品詳情頁：舊樣式用 #id 把頁首壓成單欄，這裡用同等權重蓋回左右兩欄 */
.fx3d.shop-page[data-page] #category-main .page-hero__card,.fx3d.shop-page[data-page] #product-intro .page-hero__card{grid-template-columns:minmax(0,1fr) minmax(320px,48%)}
@media(max-width:1199px){.fx3d.shop-page[data-page] #category-main .page-hero__card,.fx3d.shop-page[data-page] #product-intro .page-hero__card{grid-template-columns:minmax(0,1fr) minmax(260px,46%)}}
@media(max-width:899px){.fx3d.shop-page[data-page] #category-main .page-hero__card,.fx3d.shop-page[data-page] #product-intro .page-hero__card{grid-template-columns:minmax(0,1fr) minmax(200px,44%)}}
@media(max-width:600px){.fx3d.shop-page[data-page] #category-main .page-hero__card,.fx3d.shop-page[data-page] #product-intro .page-hero__card{grid-template-columns:minmax(0,1fr)}}
.fx3d .page-hero .shop-sample:empty,.fx3d .page-hero .page-hero__lead:empty{display:none}
.fx3d #product-intro .page-hero__card{padding-block:clamp(18px,1.6vw,32px)}
.fx3d.shop-page[data-page="product"] .crumb a{min-height:0;height:auto;white-space:nowrap}
/* 備援圖白底要能融進背景：舞台本身不可自成混合群組 */
.fx3d .page-hero .hv{isolation:auto}
.fx3d .page-hero .page-hero__card{isolation:isolate}
/* 產品詳情頁：頁首只有麵包屑，品名可換行完整顯示 */
.fx3d #product-intro .breadcrumb{flex-wrap:wrap;white-space:normal;overflow:visible}
.fx3d #product-intro .breadcrumb li{flex:0 1 auto;white-space:normal}
/* 產品詳情頁麵包屑按鈕維持好點的高度 */
.fx3d.shop-page[data-page="product"] .crumb a{min-height:44px;padding-block:6px}
/* 手機：麵包屑只留「首頁 › 上一層 › 本頁」並可換行，不左右溢出；頁首高度統一放寬 */
@media(max-width:600px){
 .fx3d{--hero-h:500px}
 .fx3d .page-hero .breadcrumb{flex-wrap:wrap;overflow:visible;white-space:normal;row-gap:6px}
 .fx3d .page-hero .breadcrumb li:not(:first-child):not(:last-child):not(:nth-last-child(2)){display:none}
 .fx3d .page-hero .breadcrumb li{flex:0 1 auto;min-width:0}
 .fx3d .page-hero .breadcrumb a.btn{min-height:44px;height:auto;padding:6px 12px}
 .fx3d .page-hero .page-hero__card{grid-template-rows:190px minmax(0,1fr)}
 .fx3d .page-hero .page-hero__art.hv{height:190px}
}
@media(max-width:600px){.fx3d{--hero-h:540px}.fx3d .page-hero .page-hero__lead{-webkit-line-clamp:4}.fx3d .page-hero .shop-sample{padding:6px 10px}}
.fx3d .page-hero .hv{cursor:default}
.fx3d .page-hero .hv.hv--drag{cursor:grab}
.fx3d .page-hero .hv.hv--drag:active{cursor:grabbing}
@keyframes hv-chip{from{opacity:0}to{opacity:1}}
.fx3d .page-hero .hv.hv--drag::before{animation:hv-chip .5s ease both;content:"可拖曳旋轉";position:absolute;right:14px;bottom:12px;z-index:3;padding:4px 10px;border-radius:20px;background:#ffffffcc;color:#36506f;font-size:16px;font-weight:700;box-shadow:0 4px 10px -6px #0f274766;pointer-events:none}

/* 手機頁首縮矮（2026-10-04 老闆同意「縮矮」）：3D 舞台 120px、標題 30px、說明最多 3 行；分頁鍵照字數排、一行放多顆。
   高度仍是同一寬度全站同高（--hero-h），數值依全站 68 頁實測內容最高者訂 */
@media(max-width:600px){
 .fx3d{--hero-h:460px}
 .fx3d .page-hero .page-hero__card{grid-template-rows:120px minmax(0,1fr);padding:0 16px 16px;gap:4px}
 .fx3d .page-hero .page-hero__art.hv{height:120px;margin:0 -16px}
 .fx3d .page-hero .page-hero__copy{gap:10px}
 .fx3d .page-hero h1{font-size:30px}
 .fx3d .page-hero .page-hero__lead{-webkit-line-clamp:3}
 .fx3d .page-hero .subnav{display:flex;flex-wrap:wrap;gap:6px;padding:6px}
 .fx3d .page-hero .subnav .btn{flex:1 1 auto;min-height:44px;padding:9px 12px 7px;white-space:nowrap}
}
@media(min-width:360px) and (max-width:600px){.fx3d{--hero-h:436px}}
@media(max-width:339px){.fx3d .page-hero .subnav .btn{flex-basis:calc(50% - 3px);padding-inline:8px;white-space:normal;word-break:keep-all}}
@media(max-width:600px){.fx3d .page-hero h1{text-wrap:balance}}

/* LINE 浮動鈕（2026-10-04 老闆同意「縮小成圓鈕」）：手機、平板、一般筆電只留 LINE 對話框圖示的小圓鈕，少蓋內容；更大的螢幕維持原本的「LINE」字樣鈕。
   文字改用圖示呈現，連結名稱仍由 aria-label「LINE 詢價」提供；用 flex 置中（grid 會讓隱藏的「LINE」字多佔一列，把圖示往上擠約 4px） */
@media(max-width:1599px){
 .line-fab{display:flex;align-items:center;justify-content:center;width:52px;height:52px;padding:0;border-radius:50%;font-size:0;letter-spacing:0}
 .line-fab::before{content:"";width:34px;height:32px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 38'%3E%3Cpath fill='%23fff' d='M20 2C9.5 2 1 8.9 1 17.4c0 7.6 6.8 14 15.9 15.2.6.1 1.5.4 1.7.9.2.5.1 1.2.1 1.7l-.3 1.6c-.1.5-.4 1.9 1.7 1 2.1-.9 11.2-6.6 15.3-11.3C38.2 23.4 39 20.5 39 17.4 39 8.9 30.5 2 20 2z'/%3E%3Ctext x='20' y='21.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-weight='900' font-size='10' fill='%2306c755'%3ELINE%3C/text%3E%3C/svg%3E") center/contain no-repeat}
}
@media(max-width:600px){
 .line-fab{width:48px;height:48px;right:14px;bottom:14px}
 .line-fab::before{width:31px;height:29px}
}

/* 內頁頁首降低高度（2026-10-05 老闆：「太高了，高度降低…每一頁都要改，高度都要一樣」）：寬度 601 以上
   上下內距、標題、說明、數量標籤一起收小，3D 舞台跟著變矮（取景以舞台高度為準，會等比例縮小）；
   高度仍是同一寬度全站同高（--hero-h），數值依全站實測內容最高的頁訂。手機（600 以下）10/04 已縮過，不動 */
@media(min-width:601px){
 .fx3d{--hero-py:clamp(14px,1.1vw,20px);--hero-h:330px}
 .fx3d .page-hero .page-hero__card,.fx3d.shop-page[data-page] #product-intro .page-hero__card{padding-block:var(--hero-py)}
 .fx3d .page-hero .hv{margin-block:calc(var(--hero-py) * -1);height:calc(100% + var(--hero-py) * 2)}
 .fx3d .page-hero .page-hero__copy{gap:clamp(6px,.5vw,12px)}
 .fx3d .page-hero h1{font-size:clamp(30px,2.3vw,46px)}
 .fx3d .art-page .page-hero .page-hero__copy h1{font-size:clamp(26px,1.7vw,40px)}
 .fx3d .page-hero .page-hero__lead{font-size:clamp(17px,.9vw,20px)}
 .fx3d .hv-stats li{padding:6px 14px 5px}
 .fx3d .hv-stats b{font-size:clamp(20px,1.3vw,28px)}
}
@media(min-width:760px){.fx3d{--hero-h:300px}}
@media(min-width:840px){.fx3d{--hero-h:clamp(290px,calc(12vw + 62px),312px)}}

/* 卡片一律同寬、照片框一律正方（2026-10-06 老闆：不要有的長有的胖）：張數少也不拉寬，不足一列時置中 */
.fx3d.shop-page .shop-grid[data-cols], .fx3d.shop-page .shop-category-grid[data-cols], .fx3d.shop-page .shop-related-grid[data-cols] { justify-content: center; }
.fx3d.shop-page .shop-grid[data-cols] > .shop-product-card,
.fx3d.shop-page .shop-category-grid[data-cols] > .shop-category-card,
.fx3d.shop-page .shop-related-grid[data-cols] > .shop-related-card { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--g)) / var(--cols)); }
.fx3d.fx3d.shop-page :is(.shop-product-card, .shop-category-card, .shop-related-card) :is(.shop-photo, .shop-photo-placeholder) { box-sizing: border-box; height: auto; aspect-ratio: 1 / 1; overflow: hidden; }
.fx3d.fx3d.shop-page :is(.shop-product-card, .shop-category-card, .shop-related-card) .shop-photo { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }

/* 麵包屑每一節都是立體按鍵（2026-10-06 老闆：有的有立體有的沒有）：中間層＝淡色鍵、本頁＝按下去的藍鍵；分隔符號改掛在前一節後面，才不會跑進按鍵裡 */
.fx3d .breadcrumb li+li::before{content:none}
.fx3d .breadcrumb li:not(:last-child)::after{content:"›";color:var(--ink-3)}
.fx3d .breadcrumb li>span,.fx3d .breadcrumb li[aria-current="page"]{display:inline-flex;align-items:center;height:44px;padding:2px 16px 0;border:1px solid var(--line);border-bottom:3px solid var(--line);border-radius:11px;background:linear-gradient(var(--white),var(--tint));color:var(--brand-d);font-size:16px;font-weight:700;line-height:1;white-space:nowrap;box-shadow:var(--depth-1),0 7px 18px -12px rgba(2,103,185,.35)}
.fx3d .breadcrumb li[aria-current="page"]{transform:translateY(1px);background:linear-gradient(180deg,#2a95ec,#0267b9);color:#fff;border-color:#0a5fa6;border-bottom-color:#014e8e;box-shadow:inset 0 2px 4px #00000026,0 1px 0 #ffffff8c}
@media(max-width:600px){
 .fx3d .page-hero .breadcrumb li>span,.fx3d .page-hero .breadcrumb li[aria-current="page"]{min-height:44px;height:auto;padding:6px 12px;white-space:normal}
}

/* 應用方案頁：第一排分頁＝產業應用／改善方案（跟選單一致），第二排＝四個場域（2026-10-06 老闆：分頁要跟選單同步） */
.fx3d .page-hero .subnav+.subnav--sub{margin-top:8px}

/* 分類頁產品名稱固定三行高（2026-10-06 老闆：卡片大小要一樣）：名稱兩行、三行的卡片同高，不再「有的列高 12px」。
   名稱字級改依「卡片寬度」算（不是螢幕寬度），卡片窄時字小一點、名稱最長的也放得進三行；超過三行只隱藏不撐高 */
.fx3d.fx3d.shop-page[data-page="category"] .shop-grid>.shop-product-card{container-type:inline-size}
.fx3d.fx3d.shop-page[data-page="category"] .shop-product-card .shop-product-title{height:calc(4.5em + 33px);min-height:0;font-size:clamp(16px,6.25cqw,24px)}
.fx3d.fx3d.shop-page[data-page="category"] .shop-product-card .shop-product-title a{height:100%;min-height:0;padding:14px 12px;overflow:hidden}
.fx3d.fx3d.shop-page[data-page="category"] .shop-product-card .shop-product-title a span{display:block;max-height:4.5em;overflow:hidden}
/* 規格膠囊區同樣固定三排高、每顆膠囊單行（長文字以「…」收尾），膠囊換排數不同的卡片才不會高低不一 */
.fx3d.fx3d.shop-page[data-page="category"] .shop-product-card .shop-chips{height:110px;min-height:0;gap:7px;overflow:hidden;align-content:flex-start}
.fx3d.fx3d.shop-page[data-page="category"] .shop-product-card .shop-chips .chip{display:block;height:32px;min-height:0;max-width:100%;padding:0 9px;line-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ==== css/fab.css ==== */
/* 右下浮動鈕（2026-10-06 老闆選乙版並指定：兩顆都靠右、上下疊；平常是圓鈕，滑鼠指到才往左展開說明牌）
   上＝預約到廠評估（取代頁首那顆），下＝LINE 詢價（原位置）。同意條出現時由 consent.js 設 --fab-lift 整組往上避開 */

/* 頁首不再放預約鈕；手機選單打開時底部那顆照舊 */
.site-header .mobile-menu:not(.is-open) .mobile-menu__actions{display:none}

.fab-stack{--fab-d:66px;position:fixed;right:22px;bottom:calc(22px + var(--fab-lift,0px));z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:14px;pointer-events:none;transition:bottom .3s ease}
.menu-open .fab-stack{visibility:hidden}

/* 蓋掉舊 LINE 鈕（base.css、theme-3d.css）的膠囊與圓鈕樣式 */
.fab-stack .fab{position:relative;inset:auto;display:flex;align-items:center;justify-content:flex-end;width:var(--fab-d);height:var(--fab-d);padding:0;border:0;border-radius:50%;background:none;box-shadow:none;color:inherit;font-size:16px;font-weight:800;letter-spacing:0;line-height:1.25;text-decoration:none;text-shadow:none;pointer-events:auto}
.fab-stack .fab:hover,.fab-stack .fab:active{transform:none}
.fab-stack .line-fab::before{content:none}

/* 圓鈕：立體、靜止浮起、指到上浮、按下下壓；外圈慢慢擴散（兩顆錯開） */
.fab__ico{position:relative;z-index:2;display:grid;place-items:center;width:var(--fab-d);height:var(--fab-d);padding:calc(var(--fab-d) * .25);border-radius:50%;color:#fff;transition:transform .16s ease,box-shadow .16s ease}
.fab__ico svg{display:block;width:100%;height:100%}
.fab__ico::before{content:"";position:absolute;inset:0;border-radius:50%;animation:fabHalo 2.8s ease-out infinite;pointer-events:none}
.line-fab .fab__ico::before{animation-delay:1.4s}
@keyframes fabHalo{0%{box-shadow:0 0 0 0 var(--halo)}70%,100%{box-shadow:0 0 0 16px transparent}}
.book-fab .fab__ico{--halo:rgba(245,158,11,.45);--edge:#bf6405;--glow:rgba(217,119,6,.7);background:radial-gradient(circle at 34% 26%,#ffe7b0 0,#ffbe3d 38%,#f08c00 100%)}
.book-fab .fab__ico svg{filter:drop-shadow(0 1px 1px rgba(120,55,0,.45))}
.line-fab .fab__ico{--halo:rgba(6,199,85,.42);--edge:#027a32;--glow:rgba(6,170,72,.7);padding:calc(var(--fab-d) * .22);background:radial-gradient(circle at 34% 26%,#8ef7b4 0,#14d561 38%,#03a142 100%)}
.line-fab .fab__ico svg{filter:drop-shadow(0 1px 1px rgba(0,70,25,.4))}
.fab__ico{box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -4px 0 rgba(0,0,0,.14),0 6px 0 var(--edge),0 16px 26px -8px var(--glow)}
@media(hover:hover){.fab:hover .fab__ico{transform:translateY(-2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -4px 0 rgba(0,0,0,.14),0 8px 0 var(--edge),0 20px 30px -8px var(--glow)}}
.fab:active .fab__ico{transform:translateY(5px);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(0,0,0,.14),0 1px 0 var(--edge),0 6px 12px -6px var(--glow)}

/* 說明牌：平常收在圓鈕後面看不見，指到（或鍵盤移到）才往左展開 */
.fab__tx{position:absolute;right:calc(var(--fab-d) / 2);top:50%;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:2px;height:58px;padding:0 calc(var(--fab-d) / 2 + 16px) 0 22px;border:1px solid rgba(255,255,255,.9);border-bottom:3px solid #c3d6ec;border-radius:16px 0 0 16px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(238,245,253,.96));box-shadow:0 16px 28px -14px rgba(15,39,71,.45),0 2px 6px rgba(15,39,71,.08);text-align:right;white-space:nowrap;opacity:0;clip-path:inset(0 0 0 100% round 16px 0 0 16px);transform:translateY(-50%);pointer-events:none;transition:clip-path .28s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
.fab__tx b{font-size:18px;letter-spacing:.04em}
.fab__tx small{font-size:14px;font-weight:700;color:var(--ink-3);letter-spacing:.02em}
.book-fab .fab__tx b{color:#9a4d00}
.line-fab .fab__tx b{color:#03833a}
@media(hover:hover){.fab:hover .fab__tx{opacity:1;clip-path:inset(-2px -2px -6px -2px round 16px 0 0 16px);pointer-events:auto}}
.fab:focus-visible .fab__tx{opacity:1;clip-path:inset(-2px -2px -6px -2px round 16px 0 0 16px)}
.fab:hover .fab__ico::before,.fab:focus-visible .fab__ico::before{animation:none}

@media(max-width:1199px){
 .fab-stack{--fab-d:60px;gap:13px}
 .fab__tx{height:54px}
 .fab__tx b{font-size:17px}
}
@media(max-width:600px){
 .fab-stack{--fab-d:54px;right:14px;bottom:calc(14px + var(--fab-lift,0px));gap:12px}
 .fab__tx{height:50px;padding-left:16px}
 .fab__tx b{font-size:16px}
}