/* 作愚行 合版印刷 — tokens + 元件。依 DESIGN-作愚行.md，不准寫死 hex、不准用尺標外間距 */
:root{
  --paper:#FFFFFF; --wash:#F5F6F7; --wash-2:#ECEEF0;
  --ink:#1A1A1A; --ink-2:#4A4E52; --mut:#6E7479; --faint:#9AA0A6; --line:#E2E5E8;
  --c:#00AEEF; --c-ink:#007AA8; --c-wash:#E0F3FB;
  --m:#EC008C; --m-ink:#C10073; --m-wash:#FCE4F0;
  --y:#FFF200; --k:#1A1A1A;
  --ok:#0B7A4B; --ok-wash:#E3F2EB; --err:#C8102E;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --r-0:0; --r-pill:100px;
  --shadow-hard:4px 4px 0 var(--ink);
  --t-fast:150ms; --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:"Noto Sans TC","Inter",system-ui,sans-serif;
  font-size:15px;line-height:1.85;font-synthesis:none;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}

/* 排版階梯 */
.display{font-size:56px;line-height:1.12;letter-spacing:.02em;font-weight:900;margin:0}
h1,.h1{font-size:40px;line-height:1.2;letter-spacing:.02em;font-weight:900;margin:0}
h2,.h2{font-size:28px;line-height:1.35;font-weight:700;margin:0}
h3,.h3{font-size:18px;line-height:1.5;font-weight:700;margin:0}
.body-lg{font-size:17px;line-height:1.8;margin:0}
.caption{font-size:13px;line-height:1.6;color:var(--mut);margin:0}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12px;line-height:1;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);margin:0}
.price{font-family:"IBM Plex Mono",monospace;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2}
.price.lg{font-size:28px}.price.md{font-size:20px}.price.sm{font-size:15px}
@media(max-width:899px){.display{font-size:34px}h1,.h1{font-size:28px}h2,.h2{font-size:22px}h3,.h3{font-size:17px}}

/* 版面 */
.wrap{max-width:1080px;margin:0 auto;padding-left:var(--s4);padding-right:var(--s4)}
.colorbar{display:flex;height:8px}
.colorbar i{flex:1}
.site-head{border-bottom:1px solid var(--ink);position:sticky;top:0;background:var(--paper);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s3) 0;flex-wrap:wrap}
.brand{font-weight:900;font-size:19px;letter-spacing:.02em;text-decoration:none;color:var(--ink)}
.brand small{display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:400;letter-spacing:.1em;color:var(--mut)}
.nav-links{display:flex;gap:var(--s5);align-items:center;flex-wrap:wrap}
.nav-links a{color:var(--ink);text-decoration:none;font-size:14px;font-weight:500;min-height:44px;display:inline-flex;align-items:center}
.nav-links a:hover{text-decoration:underline;text-underline-offset:5px}
.cart-btn{border:1px solid var(--ink);padding:0 var(--s4);min-height:44px;display:inline-flex;align-items:center;gap:var(--s2);
  text-decoration:none;color:var(--ink);font-weight:700;font-size:14px}
.cart-btn:hover{box-shadow:var(--shadow-hard)}
.cart-count{font-family:"IBM Plex Mono",monospace}
main{padding:var(--s7) 0 var(--s9)}
.site-foot{border-top:1px solid var(--ink);background:var(--wash);padding:var(--s6) 0;margin-top:var(--s9)}
.foot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
@media(max-width:899px){.foot-grid{grid-template-columns:1fr}}
.crumb{font-size:13px;color:var(--mut);margin:0 0 var(--s4)}
.crumb a{color:var(--c-ink);text-decoration:none}
.crumb a:hover{text-decoration:underline;text-underline-offset:3px}
.hair{height:1px;background:var(--line);border:0;margin:var(--s5) 0}
.grid{display:grid;gap:var(--s4)}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:899px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* 步驟 */
.steps{display:flex;flex-wrap:wrap;border:1px solid var(--ink);margin-bottom:var(--s5)}
.step{flex:1;min-width:140px;padding:var(--s3) var(--s4);border-right:1px solid var(--ink);display:flex;gap:var(--s3);align-items:baseline}
.step:last-child{border-right:0}
.step .n{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--mut)}
.step .t{font-size:14px;font-weight:700}
.step.on{background:var(--ink);color:var(--paper)}
.step.on .n{color:var(--c)}
.step.done{background:var(--wash)}

/* 告知 */
.notice{border:1px solid var(--ink);padding:var(--s4);display:flex;gap:var(--s3);align-items:flex-start}
.notice .mk{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:12px;background:var(--ink);color:var(--paper);
  padding:2px var(--s2);white-space:nowrap}
.notice p{margin:0;font-size:14px;line-height:1.85}

/* 按鈕 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding:0 var(--s5);
  border:1px solid var(--ink);border-radius:var(--r-0);background:var(--ink);color:var(--paper);
  font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;
  transition:box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.btn:hover{box-shadow:var(--shadow-hard)}
.btn:active{box-shadow:none;transform:translate(2px,2px)}
.btn:focus-visible{outline:3px solid var(--c-ink);outline-offset:2px}
.btn[disabled]{background:var(--wash-2);border-color:var(--line);color:var(--faint);cursor:not-allowed;box-shadow:none;transform:none}
.btn.secondary{background:var(--paper);color:var(--ink)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--c-ink);padding:0 var(--s2)}
.btn.ghost:hover{box-shadow:none;text-decoration:underline;text-underline-offset:4px}
.btn.sm{padding:0 var(--s4);font-size:13px}
.btn.lg{min-height:56px;padding:0 var(--s6);font-size:17px}
.btn.block{width:100%}

/* 表單 */
.field{margin-bottom:var(--s5)}
.field > label{display:block;font-size:13px;font-weight:700;margin-bottom:var(--s2)}
.input,.select{width:100%;min-height:44px;padding:0 var(--s3);border:1px solid var(--ink);border-radius:var(--r-0);
  background:var(--paper);color:var(--ink);font-family:inherit;font-size:15px}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 49%,var(--ink) 50%),linear-gradient(-45deg,transparent 49%,var(--ink) 50%);
  background-size:6px 6px;background-position:calc(100% - 18px) 20px,calc(100% - 12px) 20px;background-repeat:no-repeat;padding-right:var(--s7)}
.input:focus,.select:focus{outline:3px solid var(--c-ink);outline-offset:1px}
.hint{font-size:12px;color:var(--mut);margin-top:var(--s2)}
.radio-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.rc{border:1px solid var(--line);padding:var(--s3);cursor:pointer;min-height:44px;background:var(--paper);
  font-family:inherit;text-align:left;transition:border-color var(--t-fast) var(--ease)}
.rc:hover{border-color:var(--ink)}
.rc.on{border-color:var(--ink);background:var(--c-wash);box-shadow:inset 0 0 0 1px var(--ink)}
.rc[disabled]{opacity:.45;cursor:not-allowed}
.rc .t{font-size:14px;font-weight:700;margin:0}
.rc .d{font-size:12px;color:var(--mut);margin:0}
.qty-opts{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s2)}
@media(max-width:899px){.qty-opts{grid-template-columns:repeat(2,1fr)}}
.qo{border:1px solid var(--line);padding:var(--s3);text-align:left;background:var(--paper);cursor:pointer;
  font-family:inherit;min-height:44px;transition:border-color var(--t-fast) var(--ease)}
.qo:hover{border-color:var(--ink)}
.qo.on{border-color:var(--ink);background:var(--c-wash);box-shadow:inset 0 0 0 1px var(--ink)}
.qo .q{display:block;font-size:14px;font-weight:700}
.qo .p{display:block;font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:600;margin-top:var(--s1)}
.qo .u{display:block;font-size:11px;color:var(--mut)}
.upload{border:2px dashed var(--faint);padding:var(--s6) var(--s4);text-align:center}
.upload .t{font-weight:700;margin-bottom:var(--s2)}
.nofile{border:1px dashed var(--ink);padding:var(--s4);display:flex;justify-content:space-between;gap:var(--s4);
  align-items:center;flex-wrap:wrap}
.speclist{margin:0;padding-left:1.25em;font-size:13px;line-height:1.9;color:var(--ink-2)}

/* chip */
.chip{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:var(--s1) var(--s3);
  border-radius:var(--r-pill);line-height:1.6}
.chip.wait{background:var(--wash-2);color:var(--ink-2)}
.chip.rush{background:var(--m-wash);color:var(--m-ink)}
.chip.ok{background:var(--ok-wash);color:var(--ok)}
.chip.note{background:var(--c-wash);color:var(--c-ink)}

/* 商品卡 */
.card{border:1px solid var(--ink);background:var(--paper);text-decoration:none;color:var(--ink);display:block;
  transition:box-shadow var(--t-fast) var(--ease)}
.card:hover{box-shadow:var(--shadow-hard)}
.card .thumb{border-bottom:1px solid var(--ink);aspect-ratio:4/3;background:var(--wash);display:flex;
  align-items:center;justify-content:center;color:var(--faint);font-size:12px}
.card .cbody{padding:var(--s3)}
.card .ct{font-size:15px;font-weight:700;margin:0 0 var(--s1)}
.card .cmeta{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);margin-top:var(--s2)}

/* 表格 */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:var(--s3);border-bottom:1px solid var(--line);text-align:left}
th{background:var(--wash);font-size:12px;letter-spacing:.06em;font-family:"IBM Plex Mono",monospace;font-weight:600}
td.num{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;text-align:right}
tr.on td{background:var(--c-wash)}

/* 算價列（黏在底部） */
.calc{border:1px solid var(--ink);padding:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s4);
  align-items:center;justify-content:space-between;background:var(--paper)}
.calc .sum{display:flex;align-items:baseline;gap:var(--s2)}
.calc.sticky{position:sticky;bottom:var(--s4);box-shadow:var(--shadow-hard)}

/* 購物車 */
.cart-row{display:grid;grid-template-columns:1fr auto auto;gap:var(--s4);align-items:center;
  padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.total-row{display:flex;justify-content:space-between;align-items:baseline;padding:var(--s3) 0}
.total-row.grand{border-top:1px solid var(--ink);margin-top:var(--s3);padding-top:var(--s4)}
.empty{text-align:center;padding:var(--s9) var(--s4);border:1px dashed var(--line)}