.materials-hero{padding-bottom:48px}
.materials-hero h1{max-width:12em}
.materials-section{padding:0 0 clamp(104px,12vw,160px)}
.materials-toolbar{display:grid;gap:12px;padding:16px 0;background:transparent;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.materials-toolbar label{display:grid;gap:7px}
.materials-toolbar label>span{font-size:.7rem;color:var(--muted);letter-spacing:.1em}
.materials-toolbar input,.materials-toolbar select{width:100%;min-height:46px;border:1px solid var(--line);border-radius:0;background:var(--bg);padding:10px 13px;color:var(--ink);font:inherit;font-size:.86rem;outline:none}
.materials-toolbar input:focus,.materials-toolbar select:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(33,29,24,.07)}
.materials-summary{display:flex;justify-content:flex-end;padding:24px 0 18px}
.materials-summary p{font-family:"Inter","Noto Sans TC",sans-serif;font-size:.7rem;color:var(--muted);letter-spacing:.1em}
.materials-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 14px}
.material-card{min-width:0}
.material-media{position:relative;width:100%;aspect-ratio:7/12;overflow:hidden;background:var(--surface);border:1px solid var(--line-soft);border-radius:0;padding:0;color:inherit;font:inherit;text-align:inherit;cursor:pointer}
.material-media:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.material-media img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.material-card:hover .material-media img{transform:scale(1.02)}
.material-card.is-discontinued .material-media:after{content:"停產";position:absolute;top:10px;right:10px;z-index:2;padding:5px 9px;background:rgba(0,0,0,.58);color:#fff;font-size:.66rem;font-weight:400;line-height:1;letter-spacing:.12em;pointer-events:none;backdrop-filter:blur(6px)}
.material-copy{padding-top:13px;border-top:1px solid var(--line);margin-top:10px}
.material-model{font-family:"Inter",sans-serif;font-size:.67rem;letter-spacing:.1em;color:var(--muted);overflow-wrap:anywhere}
.material-copy h2{margin-top:7px;font-size:1rem;font-weight:400;letter-spacing:.03em}
.material-details{display:grid;gap:7px;margin-top:14px}
.material-details div{display:grid;grid-template-columns:3.8em minmax(0,1fr);gap:8px;font-size:.73rem;line-height:1.55}
.material-details dt{color:var(--muted)}
.material-details dd{color:var(--text);overflow-wrap:anywhere}
.materials-empty,.materials-error{padding:72px 0;text-align:center;color:var(--muted)}
.materials-error{color:#8A453B}

body.lightbox-open{overflow:hidden}
.material-lightbox{inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:rgba(8,8,8,.9);color:#fff;overflow:hidden}
.material-lightbox::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(18px) saturate(70%)}
.material-lightbox:not([open]){display:none}
.lightbox-shell{--lightbox-board-width:min(100vw,700px);position:relative;width:100%;height:100dvh;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.055),transparent 55%);overflow:hidden}
.lightbox-model{font-family:"Inter",sans-serif;font-size:.65rem;letter-spacing:.12em;color:rgba(255,255,255,.56)}
.lightbox-stage{position:absolute;inset:0;display:grid;place-items:center;padding:0}
.lightbox-nav{display:grid;place-items:center;position:absolute;top:50%;z-index:3;width:48px;height:48px;transform:translateY(-50%);border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(0,0,0,.3);color:#fff;font:inherit;font-size:2rem;cursor:pointer;backdrop-filter:blur(10px);transition:background .2s ease,border-color .2s ease,opacity .2s ease}
.lightbox-prev{left:max(10px,env(safe-area-inset-left))}
.lightbox-next{right:max(10px,env(safe-area-inset-right))}
.lightbox-nav:hover,.lightbox-nav:focus-visible{border-color:rgba(255,255,255,.65);background:rgba(255,255,255,.15);outline:none}
.lightbox-nav:disabled{opacity:.28;cursor:default}
.lightbox-viewport{position:relative;width:var(--lightbox-board-width);height:100dvh;min-width:0;display:grid;place-items:center;overflow:hidden;background:#111}
.lightbox-viewport img{display:block;width:100%;height:100%;aspect-ratio:7/17;object-fit:cover;user-select:none;-webkit-user-drag:none;pointer-events:none}
.material-lightbox.is-discontinued .lightbox-viewport:after{content:"停產";position:absolute;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));z-index:2;padding:7px 11px;background:rgba(0,0,0,.58);color:#fff;font-size:.7rem;font-weight:400;line-height:1;letter-spacing:.14em;pointer-events:none;backdrop-filter:blur(8px)}
.lightbox-info{position:absolute;left:50%;bottom:0;z-index:4;width:var(--lightbox-board-width);margin:0;padding:10px 16px calc(11px + env(safe-area-inset-bottom));box-sizing:border-box;transform:translateX(-50%);border-top:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.5);backdrop-filter:blur(3px);overflow:hidden}
.lightbox-info h2{margin-top:3px;font-size:clamp(1rem,2vw,1.2rem);font-weight:400;letter-spacing:.04em}
.lightbox-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;margin-top:8px}
.lightbox-details div{display:grid;gap:2px;font-size:.69rem;line-height:1.4}
.lightbox-details dt{color:rgba(255,255,255,.5)}
.lightbox-details dd{color:rgba(255,255,255,.9);overflow-wrap:anywhere}
.lightbox-return{display:block;min-width:88px;margin:8px auto 0;padding:7px 16px;border:1px solid rgba(255,255,255,.34);border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:.7rem;letter-spacing:.12em;cursor:pointer}
.lightbox-return:hover,.lightbox-return:focus-visible{border-color:rgba(255,255,255,.72);background:rgba(255,255,255,.16);outline:none}
.back-to-top{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:24px;z-index:44;width:44px;height:44px;border:1px solid rgba(33,29,24,.28);border-radius:999px;background:rgba(252,251,249,.9);color:var(--ink);font:inherit;font-size:1.15rem;line-height:1;box-shadow:0 8px 26px rgba(33,29,24,.12);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover,.back-to-top:focus-visible{border-color:var(--ink);background:var(--ink);color:#fff;outline:none}
body.lightbox-open .back-to-top{opacity:0;visibility:hidden}
@media (min-width:720px){
  .materials-toolbar{grid-template-columns:minmax(0,1fr) minmax(190px,260px);align-items:end}
  .materials-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 22px}
}
@media (min-width:1040px){
  .materials-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:50px 26px}
  .material-media{aspect-ratio:7/13}
}
@media (max-width:719px){
  .lightbox-nav{width:40px;height:40px;font-size:1.65rem}
  .lightbox-info{padding:9px 13px calc(10px + env(safe-area-inset-bottom))}
  .lightbox-details{gap:5px 11px;margin-top:6px}
  .back-to-top{bottom:calc(78px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  .material-media img,.lightbox-viewport img{transition:none}
}