/* pages/fabrics.css — page: fabrics */
.fx-tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--rule)}
.fx-tabs button{position:relative;padding:16px 4px 18px 0;margin-right:32px;border:0;background:none;color:var(--muted);font-family:var(--serif);font-size:1.45rem;font-weight:300;cursor:pointer}
.fx-tabs button:hover{color:var(--indigo)}
.fx-tabs button[aria-selected="true"]{color:var(--indigo)}
.fx-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink)}
.fx-panel{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:32px clamp(32px,6vw,96px);align-items:start;margin-top:40px}
.fx-panel[hidden]{display:none}
.fx-info .lede{margin-top:16px}
.fx-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:32px}
.fx-sub{margin-bottom:12px;color:var(--accent-dark);font-size:var(--t-small);font-weight:500}
.fx-use li{padding:4px 0 4px 18px;position:relative;font-size:var(--t-small)}
.fx-use li::before{content:"";position:absolute;left:0;top:16px;width:10px;height:1px;background:var(--accent)}
.fx-actions{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:40px;padding-top:24px;border-top:1px solid var(--rule)}
.fx-pager{display:flex;gap:8px}
.fx-pager button{min-height:46px;padding:0 18px;border:1px solid var(--rule);background:var(--white);color:var(--ink);font-weight:500;font-size:.88rem;cursor:pointer;transition:border-color .2s}
.fx-pager button:hover{border-color:var(--indigo)}
@media (max-width:860px){.fx-panel{grid-template-columns:1fr}.fx-panel .media--tall .media-frame{aspect-ratio:4/3}}
@media (max-width:520px){.fx-cols{grid-template-columns:1fr}}

.wv{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px clamp(32px,6vw,96px);align-items:start}
.wv-preview canvas{width:100%;aspect-ratio:1;border:1px solid var(--rule);background:#fff}
.wv-legend{display:flex;gap:24px;margin-top:12px;font-size:var(--t-small);color:var(--muted)}
.wv-legend span{display:flex;align-items:center;gap:8px}
.wv-legend i{width:14px;height:14px;border:1px solid #B8BEC7}
.wv-warp{background:var(--indigo)}.wv-weft{background:#fff}
.wv-list{border-top:1px solid var(--rule)}
.wv-row{display:flex;align-items:center;gap:18px;width:100%;padding:12px 0;border:0;border-bottom:1px solid var(--rule);background:none;text-align:left;cursor:pointer}
.wv-row canvas{width:52px;height:52px;border:1px solid var(--rule)}
.wv-name{color:var(--muted);font-family:var(--serif);font-size:1.45rem;font-weight:400}
.wv-row:hover .wv-name{color:var(--indigo)}
.wv-row.on .wv-name{color:var(--ink)}
.wv-row.on{box-shadow:inset 2px 0 0 var(--accent)}
.wv-row.on canvas{margin-left:14px}
.wv-detail{margin-top:28px;padding:24px;background:var(--white);border-left:3px solid var(--accent)}
.wv-detail p{margin-top:8px}
.wv-use{font-size:var(--t-small)}
.wv-use b{color:var(--ink);font-weight:500}
@media (max-width:860px){.wv{grid-template-columns:1fr}.wv-preview{max-width:440px}}
.more{margin-top:32px}