:root{font-family:-apple-system,BlinkMacSystemFont,'Noto Sans TC','Helvetica Neue',sans-serif;color:#242420;background:#f7f6f2}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}header{padding:20px max(20px,calc((100vw - 1120px)/2));display:flex;align-items:center;justify-content:space-between;background:#f7f6f2;border-bottom:1px solid #e6e3db}header b{font-size:20px;letter-spacing:2px}header small{color:#777;font-size:11px;letter-spacing:1.3px}main{max-width:1120px;margin:auto;padding:36px 20px 70px}.eyebrow{font-size:12px;letter-spacing:2px;color:#757267}.hero h1{font-size:clamp(25px,4vw,42px);font-weight:600;letter-spacing:.4px;margin:14px 0}.hero p{color:#78766d;font-size:14px;line-height:1.85;margin-bottom:24px}.controls{display:flex;gap:9px;flex-wrap:wrap;margin:25px 0 22px}.controls input,.controls select{background:white;border:1px solid #ddd9cf;border-radius:9px;padding:12px 13px;color:#242420;min-height:46px}.controls input{min-width:220px;flex:1}.summary{display:flex;justify-content:space-between;color:#77736b;font-size:12px;margin:18px 1px}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.card{border:1px solid #e9e5de;background:white;border-radius:12px;overflow:hidden;text-align:left;padding:0;color:inherit;transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-3px);box-shadow:0 9px 30px #0000000d}.card .art{aspect-ratio:4/4.2;background:#e9e5df;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.art img{height:100%;width:100%;object-fit:cover}.placeholder{white-space:pre-line;font-size:15px;letter-spacing:2px;color:#8c847a;text-align:center;line-height:1.9;padding:16px}.demo{position:absolute;top:12px;left:12px;background:#fffdf1;padding:5px 8px;font-size:10px;letter-spacing:1px;border-radius:4px}.cardbody{padding:15px}.brand{font-size:10px;color:#8a867e;letter-spacing:1.4px}.card h3{font-size:14px;line-height:1.5;font-weight:500;margin:7px 0 4px;min-height:42px}.muted{color:#807c73;font-size:12px}.price{font-size:16px;font-weight:600;margin:13px 0 6px}.sizes{font-size:11px;color:#78756d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note{font-size:12px;color:#777;line-height:1.75;margin-top:29px;padding-top:15px;border-top:1px solid #e6e3dc}.overlay{position:fixed;inset:0;background:#1515158c;z-index:10;display:none;align-items:center;justify-content:center;padding:20px}.overlay.show{display:flex}.dialog{position:relative;width:min(750px,100%);max-height:min(94dvh,860px);overflow:auto;background:#fff;border-radius:17px;display:grid;grid-template-columns:1fr 1fr}.close{position:absolute;right:13px;top:13px;border:0;border-radius:50%;width:34px;height:34px;background:#f2f0eb;z-index:2;font-size:20px}.gallery{background:#f0ede7;min-height:390px;display:flex;flex-direction:column;justify-content:center}.mainart{height:350px;display:flex;justify-content:center;align-items:center;overflow:hidden}.mainart img{width:100%;height:100%;object-fit:cover}.thumbs{padding:10px;display:flex;gap:8px;justify-content:center}.thumbs button{border:1px solid #dad5cc;background:#fff;border-radius:5px;overflow:hidden;width:46px;height:46px;padding:0;font-size:10px;color:#777}.thumbs img{width:100%;height:100%;object-fit:cover}.detail{padding:55px 25px 28px}.detail h2{font-size:24px;line-height:1.3;font-weight:550;margin:8px 0 9px}.detail .price{font-size:24px}.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 17px}.chip{padding:8px 10px;background:#f7f6f2;border:1px solid #e6e2d9;border-radius:5px;font-size:12px}.detail p{font-size:13px;color:#66645d;line-height:1.75}.cta{width:100%;padding:13px;border-radius:7px;margin-top:12px;border:1px solid #282820;background:#282820;color:white}.cta.secondary{background:white;color:#282820;margin-top:8px}.detail hr{border:0;border-top:1px solid #e7e4dd;margin:19px 0}.empty{padding:40px;text-align:center;color:#777;grid-column:1/-1}.footer{padding:30px;text-align:center;font-size:11px;color:#a39d93}@media(max-width:780px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cardbody{padding:11px}.card h3{font-size:13px}.dialog{display:block;max-height:94dvh;border-radius:17px 17px 0 0;align-self:end}.overlay{align-items:end;padding:0}.gallery{min-height:0}.mainart{height:260px}.detail{padding:18px 22px 30px}.detail h2{font-size:20px}.close{position:sticky;float:right;top:10px}.controls select{flex:1;min-width:130px}header{padding:17px 20px}}

[hidden]{display:none!important}.dialog{margin:0;border:0;padding:0;color:inherit}
dialog.dialog{margin:auto;overflow:auto}.dialog::backdrop{background:#1515158c}
.dialog:not([open]){display:none}.gallery{align-self:start}.mainart>div{width:100%;height:100%;display:grid;place-items:center}.mainart img{object-fit:contain}
.thumbs button[aria-pressed="true"]{outline:2px solid #333;outline-offset:2px}
.detail .sizes-label{margin-bottom:0}.detail .muted{line-height:1.7}
:focus-visible{outline:2px solid #695941;outline-offset:3px}
a{color:inherit}.chip{min-width:40px;min-height:38px;color:#242420}.chip:hover{border-color:#8b7c67}.chip[aria-pressed="true"]{background:#282820;border-color:#282820;color:#fff}
@media(max-width:780px){dialog.dialog{margin:auto auto 0;width:100%;max-width:100%}.dialog .close{position:absolute;float:none;top:10px}.summary{gap:10px}.controls input{min-width:min(220px,100%)}}
html.dialog-open{overflow:hidden;scrollbar-gutter:stable}
html{scrollbar-gutter:stable}
.art>div:first-child{width:100%;height:100%;display:grid;place-items:center}
.thumbs button>div{width:100%;height:100%}

.thumbs{flex-wrap:wrap}.thumbs button{flex:0 0 46px}