/* 官网器材库 /gear（229.91.0）—— 配色/字体和场地库 site.css 同一套：米纸底 #f1ebdd、红 #c8102e、Archivo + Noto Sans */
:root{--paper:#f1ebdd;--paper2:#f8f3e9;--ink:#1c1a17;--red:#c8102e;--red-d:#9d0c23;--muted:#8b8579;--line:#ddd3c0;
  --disp:"Archivo","Noto Sans SC","Noto Sans Thai",sans-serif;--sans:"Noto Sans SC","Noto Sans Thai",system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased}
body.g-lock{overflow:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 30px}
.gear-page{min-height:62vh;padding:0 0 60px}
.g-top{border-bottom:1px solid var(--line);padding:30px 0 18px;margin-bottom:26px}
/* 229.94：左侧分类，照 /props：细线、纯文字、数量靠右、选中红字 */
.g-layout{display:grid;grid-template-columns:260px 1fr;gap:34px;align-items:start}
.g-side{position:sticky;top:84px}
.g-side-title{font-size:13px;color:var(--muted);padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:4px}.g-side-title b{font-weight:300;font-size:10px}
.g-tree,.g-tree ul{list-style:none}
.g-tree a{display:flex;align-items:center;gap:4px;padding:7px 2px;font-size:14px;color:var(--ink);cursor:pointer;border-bottom:1px solid transparent}
.g-tree a:hover{color:var(--red)}.g-tree>li.on>a{color:var(--red)}.g-tree i{font-style:normal;font-size:12px;color:var(--muted);margin-left:auto}.g-tree a b{font-weight:300;width:12px;text-align:right;color:var(--muted)}
.g-tree ul{margin:2px 0 8px 14px}.g-tree ul a{font-size:13px;padding:4px 2px;color:#3c3830}.g-tree ul li.on a{color:var(--red)}
@media(max-width:1000px){.g-layout{grid-template-columns:1fr}.g-side{position:static;border-bottom:1px solid var(--line);padding-bottom:10px}
  .g-tree{display:flex;flex-wrap:wrap;gap:2px 14px}.g-tree ul{display:none}}
.g-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.g-head h1{font-family:var(--disp);font-size:32px;font-weight:300;letter-spacing:.5px}
.g-count{text-align:right}.g-count b{font-family:var(--disp);font-size:46px;font-weight:300;color:var(--red);line-height:1;display:block}.g-count small{color:var(--muted);font-size:12px}
.g-search{display:flex;gap:10px;max-width:560px;margin:14px 0 8px;align-items:center}
.g-search input{flex:1;padding:8px 2px;border:0;border-bottom:1px solid var(--ink);background:transparent;font:inherit;font-size:14px;outline:0}
.g-search input:focus{border-bottom-color:var(--red)}
.g-btn-lite{background:transparent;color:var(--ink);border:1px solid var(--line);padding:5px 14px}.g-btn-lite:hover{background:#fff}
.g-btn{background:var(--red);color:#fff;border:0;padding:9px 20px;border-radius:4px;font:inherit;font-size:14px;cursor:pointer}
.g-btn:hover{background:var(--red-d)}.g-btn:disabled{opacity:.5;cursor:default}
.g-filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;margin:8px 0}
.g-filters .k{color:var(--muted);margin-right:6px;min-width:34px}
.chip{padding:3px 11px;border-radius:14px;background:#e7e0cf;cursor:pointer;white-space:nowrap}.chip:hover{background:#dcd4c0}
.chip.on{background:var(--red);color:#fff}.chip i{font-style:normal;opacity:.6;font-size:11px;margin-left:3px}
.g-bar{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted);margin:0 0 14px}.g-bar-r{display:flex;gap:14px;align-items:center;font-size:13px}
.g-cartbtn{border:0;color:var(--ink);padding:0;background:none;font:inherit;font-size:13px;cursor:pointer}.g-cartbtn:hover{color:var(--red)}
.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.g-card{background:var(--paper2);border:1px solid var(--line);position:relative;display:flex;flex-direction:column}
.g-img{aspect-ratio:4/3;background:#fff;overflow:hidden;cursor:pointer;position:relative}
/* 229.97：图片白底和卡片米纸底的交界做成渐变（用户：「黄色渐变到白色」）—— 底部 28% 从透明过渡到米纸色 */
.g-img::after{content:'';position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(to bottom,rgba(248,243,233,0) 0%,rgba(248,243,233,.18) 30%,rgba(248,243,233,.55) 60%,rgba(248,243,233,.88) 85%,var(--paper2) 100%);pointer-events:none}
/* 229.99：渐变改成缓入的长过渡（34%，五个色标），图片底部留 22% 空白，器材本体不进过渡带（用户：「渐变有些突然，要自然一些」） */
.g-img img{padding:6px 8px 22%}.g-img img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .25s}.g-card:hover .g-img img{transform:scale(1.03)}
.g-body{padding:10px 12px 12px;display:flex;flex-direction:column;flex:1}
.g-name{font-weight:400;line-height:1.35;min-height:40px;cursor:pointer}.g-name:hover{color:var(--red)}
.g-sub{color:var(--muted);font-size:12px;margin-top:3px;min-height:18px}
.g-price{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:10px}
.g-price b{font-family:var(--disp);font-size:18px;font-weight:400}.g-price small{color:var(--muted);font-size:11px;margin-left:3px}
.g-ask{color:var(--muted);font-size:13px}
.g-add{border:1px solid var(--red);color:var(--red);background:#fff;border-radius:4px;padding:4px 10px;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.g-add:hover{background:var(--red);color:#fff}.g-add.in{background:var(--red);color:#fff}
.g-tag{position:absolute;top:8px;left:8px;background:#fff;border:1px solid var(--line);font-size:11px;padding:1px 8px;border-radius:9px;color:var(--muted);z-index:1}
.g-none{color:var(--muted);padding:40px;text-align:center;grid-column:1/-1}
.g-pager{display:flex;justify-content:center;gap:6px;margin-top:22px;font-size:13px}
.g-pager button{border:1px solid var(--line);background:#fff;padding:4px 10px;border-radius:3px;font:inherit;cursor:pointer}
.g-pager button.on{background:var(--red);color:#fff;border-color:var(--red)}.g-pager button:disabled{opacity:.4;cursor:default}.g-pager span{padding:4px}
/* 弹层 / 抽屉 */
.g-modal,.g-drawer{position:fixed;inset:0;z-index:50}
.g-modal-bg{position:absolute;inset:0;background:rgba(28,26,23,.55)}
.g-modal-box{position:relative;max-width:860px;margin:6vh auto;background:var(--paper2);display:grid;grid-template-columns:360px 1fr;max-height:88vh;overflow:auto;border:1px solid var(--line)}
.g-modal-img{background:#fff;padding:14px;position:relative}.g-modal-img::after{content:'';position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(248,243,233,.2) 35%,rgba(248,243,233,.6) 65%,var(--paper2) 100%);pointer-events:none}.g-modal-img>img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block}
.g-thumbs{display:flex;gap:6px;margin-top:8px}.g-thumbs img{width:48px;height:48px;object-fit:cover;border:1px solid var(--line);cursor:pointer}.g-thumbs img.on{border-color:var(--red)}
.g-modal-body{padding:22px 24px}.g-modal-body .g-name{font-size:19px;min-height:0}.g-spec{color:var(--muted);font-size:12px;margin:6px 0 10px}
.g-modal-body p{font-size:13px;color:#3c3830;white-space:pre-line}.g-fine{font-size:11px;color:var(--muted);margin-top:6px}
.g-qty{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:13px}.g-qty input{width:70px;padding:6px;border:1px solid var(--line);font:inherit}
.g-x{position:absolute;top:8px;right:10px;border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--muted);z-index:2}
.g-drawer-box{position:absolute;top:0;right:0;bottom:0;width:min(520px,100%);background:var(--paper2);overflow:auto;padding:18px 20px;border-left:1px solid var(--line)}
.g-drawer-head{display:flex;justify-content:space-between;align-items:center;font-size:16px;margin-bottom:12px}.g-drawer-head .g-x{position:static}
.g-cart{width:100%;border-collapse:collapse;font-size:13px}.g-cart td{padding:6px 4px;border-bottom:1px solid var(--line)}.g-cart td.n{text-align:right;font-family:var(--disp);white-space:nowrap}
.g-cart input{width:56px;padding:4px;border:1px solid var(--line);font:inherit;text-align:right}.g-cart button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:14px}
.g-empty{color:var(--muted);font-size:13px;padding:14px 0}
.g-form{margin-top:12px}.g-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.g-form>div,.g-row>div{margin-top:10px}
.lab{font-size:12px;color:var(--muted);margin-bottom:3px}
.g-form input,.g-form textarea{width:100%;padding:8px 9px;border:1px solid var(--line);background:#fff;font:inherit;font-size:13px;outline:0}.g-form input:focus,.g-form textarea:focus{border-color:var(--red)}
.g-total{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 4px;font-size:13px}.g-total b{font-family:var(--disp);font-size:22px;font-weight:300}
.g-submit{width:100%;margin-top:10px}.g-msg{font-size:13px;margin-top:8px;min-height:18px;color:var(--red)}
footer{border-top:1px solid var(--line);padding:30px 30px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:13px}
@media(max-width:1000px){.g-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.wrap{padding:0 16px}.g-grid{grid-template-columns:repeat(2,1fr);gap:12px}.g-head h1{font-size:26px}.g-count b{font-size:34px}
  /* 229.100：手机上弹层一律满屏（以前按内容长短半屏/满屏不一，用户：「为啥有的半屏有的满屏」） */
  .g-modal-box{grid-template-columns:1fr;margin:0;height:100dvh;max-height:100dvh;overflow:auto;border:0}
  .g-modal-img{padding:40px 14px 10px}.g-modal-img>img{aspect-ratio:auto;max-height:46vh}
  .g-modal-body{padding:18px 18px 40px}.g-row{grid-template-columns:1fr}}