:root{--bg:#F6F4F0;--ink:#1A1A1A;--soft:#5A5555;--accent:#B89A5E;--on-accent:#121212;--red:#A50000;--card:#FFFFFF;--line:#D8D2C8;--hero:#121212;--hero-ink:#F6F4F0;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#161313;--ink:#F1EDE6;--soft:#B5ADA3;--card:#211D1D;--line:#3A3434;--hero:#0C0B0B;--hero-ink:#F1EDE6}}
:root[data-theme="dark"]{--bg:#161313;--ink:#F1EDE6;--soft:#B5ADA3;--card:#211D1D;--line:#3A3434;--hero:#0C0B0B;--hero-ink:#F1EDE6}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;line-height:1.75}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
header{background:var(--hero);color:var(--hero-ink);border-bottom:6px solid var(--red)}
nav{display:flex;justify-content:space-between;align-items:center;padding:18px 0;gap:16px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;font-weight:900;font-size:1.15rem;text-decoration:none;letter-spacing:.04em}.logo img{height:64px;width:auto;display:block}.logo span{font-size:1.3rem;letter-spacing:.08em;white-space:nowrap}
nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav a{text-decoration:none;font-size:.95rem}
nav a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:6px}
.hero{display:grid;grid-template-columns:1fr 1.1fr;gap:24px;align-items:center;padding:40px 0 64px}
h1{font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.15;font-weight:900;margin:0 0 18px;letter-spacing:.02em}
.hero p{max-width:30em;opacity:.9;margin:0 0 28px}
.btn{display:inline-block;background:var(--accent);color:var(--on-accent);font-weight:900;padding:14px 26px;border-radius:999px;text-decoration:none}
.btn:hover{filter:brightness(1.07)}
.ghost{margin-left:12px;font-weight:500;text-underline-offset:5px}
.photo{margin:0}.photo img{width:100%;height:auto;display:block;border-radius:14px;border:3px solid var(--accent)}.photo figcaption{font-size:.85rem;opacity:.8;margin-top:8px}
.bike .wheel{transform-origin:center;transform-box:fill-box;animation:spin 14s linear 1 both}
@keyframes spin{from{transform:rotate(-540deg)}to{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.bike .wheel{animation:none}}
section{padding:64px 0}
h2{font-size:clamp(1.6rem,3.5vw,2.2rem);font-weight:900;margin:0 0 8px}
.lead{color:var(--soft);margin:0 0 32px;max-width:36em}
#video{padding-bottom:0}.video{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:3px solid var(--accent);background:#000}.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hero h1{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.35}.hero .intro p{margin:0 0 14px}.hero .intro p:last-child{margin-bottom:28px}.hero .intro a{font-weight:500;text-underline-offset:5px;margin-left:6px;white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;border:2px solid var(--ink)}
.type{padding:26px 22px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);margin:-1px -1px 0 0;background:var(--card)}
.type h3{margin:0 0 6px;font-size:1.2rem}
.type p{margin:0 0 12px;color:var(--soft);font-size:.95rem}
.type strong{font-size:1.05rem}
.fit{background:var(--card);border:2px solid var(--ink);border-radius:16px;padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.fit label{font-weight:500;display:block;margin-bottom:10px}
.fit input[type=range]{width:100%;accent-color:var(--ink);height:32px}
.cm{font-size:2.6rem;font-weight:900;line-height:1}
.result{border-left:8px solid var(--red);background:var(--accent);color:var(--on-accent);border-radius:12px;padding:22px}
.result b{font-size:2.4rem;display:block;line-height:1.2}
.result span{font-size:.95rem}
table{width:100%;border-collapse:collapse;background:var(--card);border:2px solid var(--ink)}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line)}
td:last-child,th:last-child{text-align:right;white-space:nowrap}
th{font-weight:900}
.scroll{overflow-x:auto}
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px}
.info h3{margin:0 0 6px}
.info p{margin:0;color:var(--soft)}
footer{background:var(--hero);color:var(--hero-ink);padding:28px 0;font-size:.9rem}
.price{margin:12px 0 0!important;font-weight:900;color:var(--ink)!important;font-size:1.05rem!important}.sub{margin:36px 0 14px;font-size:1.2rem}.colors{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}.colors figure{margin:0}.colors img{width:100%;height:auto;display:block;border-radius:12px;border:2px solid var(--line)}.colors figcaption{font-size:.88rem;color:var(--soft);margin-top:8px;line-height:1.5}.colors b{color:var(--ink)}
.reelwrap{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:32px;align-items:center}
.reel{position:relative;aspect-ratio:9/16;background:#000;border-radius:16px;overflow:hidden;border:3px solid var(--accent);color:#fff;cursor:pointer}
.rs{position:absolute;inset:0;opacity:0;transition:opacity .5s}.rs.on{opacity:1}
.rbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(24px) brightness(.5);transform:scale(1.2)}
.rfg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.rfit{object-fit:contain}
.rcap{position:absolute;left:0;right:0;bottom:0;padding:60px 14px 20px;background:linear-gradient(transparent,rgba(0,0,0,.82));display:flex;flex-direction:column;gap:3px}
.rcap b{font-size:1.1rem}.rcap span{font-size:.8rem;opacity:.9}
.rbar{position:absolute;top:8px;left:8px;right:8px;display:flex;gap:4px;z-index:2}.rbar i{flex:1;height:3px;background:rgba(255,255,255,.35);border-radius:2px;overflow:hidden}.rbar u{display:block;height:100%;width:0;background:#fff}
.rctl{display:flex;gap:10px;margin-top:12px}.rctl button{background:var(--ink);color:var(--bg);border:0;border-radius:999px;padding:8px 18px;font:inherit;font-size:.9rem;cursor:pointer}
.spec{list-style:none;margin:0;padding:0}.spec li{padding:12px 0;border-bottom:1px solid var(--line);color:var(--soft)}.spec b{display:block;color:var(--ink);font-size:1.05rem}.spec .ask{border:0}
@media (max-width:760px){.reelwrap{grid-template-columns:1fr}.reel{max-width:300px;margin:0 auto}.rctl{justify-content:center}}
nav ul#menu{align-items:center}.has-drop{position:relative;display:flex;align-items:center;gap:2px}
.caret{background:none;border:0;color:inherit;font:inherit;font-size:.85rem;cursor:pointer;padding:6px 4px;line-height:1}
.drop{display:none;position:absolute;top:100%;left:0;z-index:20;min-width:190px;margin:0;padding:8px 0;list-style:none;background:var(--hero);border:1px solid var(--accent);border-radius:10px;flex-direction:column;gap:0}
.drop li a{display:block;padding:8px 16px;white-space:nowrap}.drop li a:hover{background:rgba(255,255,255,.1);text-decoration:none}
.has-drop:hover .drop,.has-drop:focus-within .drop,.has-drop.open .drop{display:flex}
a.type{display:block;text-decoration:none;color:inherit}a.type:hover{background:var(--line)}
.type .price2{display:block;font-weight:900;margin-top:6px}.type .more{display:block;margin-top:10px;font-size:.88rem;color:var(--soft);text-decoration:underline;text-underline-offset:4px}
.crumb{font-size:.9rem;color:var(--soft);margin:0 0 10px}.crumb a{text-underline-offset:4px}
.pgrid{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:start;margin-top:8px}
.pmain p{margin:0 0 14px;max-width:36em}.facts{list-style:none;margin:20px 0 0;padding:0}.facts li{padding:10px 0;border-top:1px solid var(--line)}.facts b{display:inline-block;min-width:3.5em;margin-right:12px}
.pside{background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:12px}
.pprice{font-size:1.7rem;font-weight:900;line-height:1.3}.pprice.small{font-size:1.2rem}.pnote{margin:-6px 0 4px;color:var(--soft);font-size:.9rem}
.pside .btn{text-align:center}.prod .others{margin-top:40px;color:var(--soft)}.others a{margin-right:14px;text-underline-offset:4px}.prod .sub{margin-top:44px}
@media (max-width:760px){.pgrid{grid-template-columns:1fr}.drop{position:static;border:0;padding:0 0 0 14px;background:none;width:100%}.has-drop{flex-wrap:wrap}.has-drop.open .drop{display:flex}.has-drop:hover .drop,.has-drop:focus-within .drop{display:none}.has-drop.open:hover .drop,.has-drop.open:focus-within .drop{display:flex}}
.announce{background:var(--accent);color:var(--on-accent);text-align:center;font-size:.85rem;font-weight:500;padding:8px 16px}
.brandrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.brandt{display:flex;flex-direction:column;gap:2px;padding:20px 22px;background:var(--card);border:2px solid var(--ink);border-radius:12px;text-decoration:none}
.brandt b{font-size:1.5rem;font-weight:900;letter-spacing:.03em}.brandt span{color:var(--soft);font-size:.9rem}.brandt:hover{border-color:var(--red)}
.tagb{display:inline-block;background:var(--ink);color:var(--bg);font-size:.75rem;font-weight:900;padding:1px 8px;border-radius:999px;margin-right:8px}
#brands{padding-bottom:0}
.search{position:relative}.search input{background:rgba(255,255,255,.1);border:1px solid var(--accent);color:inherit;border-radius:999px;padding:7px 14px;font:inherit;font-size:.9rem;width:180px}
.search input::placeholder{color:inherit;opacity:.6}.search input:focus{width:240px;outline:3px solid var(--accent)}
.sresults{display:none;position:absolute;right:0;top:calc(100% + 6px);width:min(340px,88vw);margin:0;padding:6px 0;list-style:none;background:var(--hero);border:1px solid var(--accent);border-radius:10px;z-index:30;flex-direction:column;gap:0}
.sresults a{display:block;padding:9px 16px;text-decoration:none}.sresults a:hover,.sresults a:focus{background:rgba(255,255,255,.12);text-decoration:none}.sresults small{display:block;opacity:.7}
.sresults .none{padding:10px 16px;opacity:.8}
@media (max-width:760px){.search{width:100%}.search input,.search input:focus{width:100%}.sresults{left:0;right:auto}}
.hasfly{position:relative}.hasfly>a::after{content:" ▸";opacity:.6}
.fly{display:none;position:absolute;left:100%;top:-8px;min-width:210px;margin:0;padding:8px 0;list-style:none;background:var(--hero);border:1px solid var(--accent);border-radius:10px;z-index:25}
.hasfly:hover>.fly,.hasfly:focus-within>.fly{display:block}
.gl{padding:8px 16px 2px;font-size:.75rem;letter-spacing:.12em;opacity:.65}
@media (max-width:1000px),(hover:none){.fly{display:block;position:static;border:0;background:none;padding:0 0 4px 14px}.hasfly>a::after{content:""}}
.js .view:not(.on){display:none}.js body:not(.is-home) .hero{display:none}.js body:not(.is-home) header{padding-bottom:0}
nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:6px;text-decoration-thickness:3px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}.btn.alt{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.note{font-size:.85rem;color:var(--soft);margin-top:14px}.steps{margin:32px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;counter-reset:s}.steps li{counter-increment:s;border-top:4px solid var(--red);padding-top:10px;font-size:.95rem}.steps li::before{content:counter(s) ". ";font-weight:900}.steps b{display:block}.steps span{color:var(--soft);font-size:.9rem}
@media (max-width:760px){.hero,.fit{grid-template-columns:1fr}.hero{padding-top:16px}}

main h1{font-size:clamp(1.6rem,3.5vw,2.2rem);font-weight:900;margin:0 0 8px}
.footnap{margin-top:6px;opacity:.85}

.mem{max-width:860px;padding:48px 0}.mem h1{margin-bottom:16px}.tabs{display:flex;gap:8px;margin-bottom:16px}.tabs button{background:var(--card);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:8px 18px;font:inherit;cursor:pointer}.tabs .on{background:var(--ink);color:var(--bg)}
.form{display:flex;flex-direction:column;gap:12px;max-width:420px;margin:0 0 20px}.form[hidden]{display:none}.form label{display:flex;flex-direction:column;gap:4px;font-size:.92rem}.form .chk{flex-direction:row;align-items:center;gap:8px}
.form input,.form select,.form textarea{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}.form .btn{border:0;cursor:pointer}
.msg{margin:0;font-size:.9rem}.msg.ok{color:#2e7d32}.msg.err{color:#c62828}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}.panel{background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:20px}.panel h2{font-size:1.2rem;margin:0 0 12px}
.rows{list-style:none;margin:0 0 12px;padding:0}.rows li{padding:8px 0;border-bottom:1px solid var(--line);font-size:.92rem}.rows small{color:var(--soft);display:block}.big{font-size:2rem;font-weight:900;margin:0 0 8px}

.cartbtn{background:var(--accent);color:var(--on-accent);border:0;border-radius:999px;padding:7px 16px;font:inherit;font-weight:900;font-size:.9rem;cursor:pointer}.cartbtn span{display:inline-block;min-width:1.3em;text-align:center;background:var(--on-accent);color:var(--accent);border-radius:999px;margin-left:4px;font-size:.8rem}
.addcart{border:0;font:inherit;cursor:pointer;text-align:center}
#cart{position:fixed;top:0;right:0;bottom:0;width:min(400px,100vw);background:var(--card);color:var(--ink);z-index:60;padding:20px;overflow-y:auto;box-shadow:-8px 0 30px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:12px;padding-top:calc(20px + env(safe-area-inset-top,0px))}
#cart[hidden],#cbd[hidden]{display:none}
#cbd{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55}
.cart-h{display:flex;justify-content:space-between;align-items:center;font-size:1.3rem}.cart-h button{background:none;border:0;color:inherit;font-size:1.3rem;cursor:pointer;padding:4px 8px}
#cartl{list-style:none;margin:0;padding:0}#cartl li{padding:12px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:4px 10px}
#cartl .nm{font-weight:900}#cartl .pr{color:var(--soft);font-size:.9rem;grid-column:1}#cartl .qty{display:flex;align-items:center;gap:6px;grid-column:2;grid-row:1/3}
#cartl button{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;width:30px;height:30px;font:inherit;cursor:pointer}#cartl .rm{width:auto;padding:0 8px;font-size:.8rem}
#cartsum{font-weight:900}#cart label{display:flex;flex-direction:column;gap:4px;font-size:.9rem}#cart input,#cart textarea{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.cart-b{display:flex;flex-wrap:wrap;gap:8px}.cart-b .btn{padding:10px 16px;font-size:.9rem;border:0;cursor:pointer}.cart-b .btn.alt{border:2px solid var(--ink)}.lnk{background:none;border:0;color:var(--soft);text-decoration:underline;cursor:pointer;font:inherit;font-size:.85rem}
.cnote{font-size:.8rem;color:var(--soft);margin:0}