/* Product presentation; all colours, type sizes and spacing use shared tokens. */
.product-gallery{min-width:0;align-self:center}
.product-gallery__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;background:var(--bg-soft)}
.product-gallery__track::-webkit-scrollbar{display:none}
.product-gallery__slide{position:relative;flex:0 0 100%;min-width:0;aspect-ratio:1;margin:0;scroll-snap-align:start;scroll-snap-stop:always}
.product-gallery__slide a{display:block;width:100%;height:100%}
.product-gallery__slide img{display:block;width:100%;height:100%;object-fit:contain}
.product-gallery__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding-block:var(--s-4)}
.product-gallery__bar button{min-height:var(--s-7);min-width:var(--s-7);border:1px solid var(--rule-light);background:var(--bg-page);color:var(--ink);cursor:pointer}
.product-gallery__bar button:disabled{opacity:.3;cursor:default}
.product-gallery__choices{display:flex;gap:var(--s-3);min-width:0;flex:1;justify-content:center}
.product-gallery__choices button{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-1) var(--s-3);font-size:var(--t-label)}
.product-gallery__choices img{width:var(--s-7);height:var(--s-7);object-fit:contain}
.product-gallery__choices span{overflow-wrap:anywhere;min-width:0}
.product-gallery__choices [aria-pressed="true"]{border-color:var(--ink);background:var(--bg-soft)}
.product-gallery__bar button:focus-visible,.product-gallery__track:focus-visible{outline:2px solid var(--accent);outline-offset:var(--s-1)}
.shots--editorial{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-7) var(--s-5);align-items:start}
.shots--editorial .shot__media{aspect-ratio:auto;border-radius:0;background:transparent}
.shots--editorial .shot__media img{height:auto;object-fit:contain}
.shots--editorial .shot__text{padding-top:var(--s-3);border-top:1px solid var(--rule-light)}
.shots--editorial[data-count="1"]{grid-template-columns:minmax(0,1fr);max-width:var(--max-narrow);margin-inline:auto}
.shots--editorial[data-count="3"] .shot:first-child{grid-column:1/-1;max-width:var(--max-narrow);justify-self:center;width:100%}
/* ── 尺寸屏 #sizes：主体就是一张表 ────────────────────────────────
   数字与记号一律不折行：宽 × 高 的矩阵排到十几列时，
   宁可让外层横向滚，也不能把 2050 断成两行——断行的尺寸表比没有更糟。
   横向滚的时候第一列钉住当行头：滚到右边看不出这行是哪个宽，一张滚表就是天书。 */
.sizes__scroll{overflow-x:auto;margin-top:var(--s-7);scroll-snap-type:x proximity}
/* 半列卡在钉住列的边上时，● 会被切掉一半，看着就像 ○——尺寸表里这是读错一个符号的事。
   所以滚到列边界吸附（首页横滑轨同一手法），并在钉住列的右沿压一道影，
   让人一眼看出底下还有内容滑过去了。 */
.size-table thead th{scroll-snap-align:start}
/* border-collapse:collapse 与 position:sticky 在 Chrome 下打架：合并边框会画到钉住的
   第一列上面，滚过去的一档点会从行头旁边漏出来。改成 separate + 只留下边线，
   钉住的那一列才真的盖得住。 */
.size-table{border-collapse:separate;border-spacing:0;width:100%;font-variant-numeric:tabular-nums}
.size-table th,.size-table td{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--rule-light);text-align:center;font-size:var(--t-body)}
.size-table thead th{border-bottom-color:var(--rule);font-size:var(--t-label);letter-spacing:.06em;color:var(--fg-muted);font-weight:600;background:var(--bg-page)}
/* 第一列的表头跟着列内容左对齐：表体第一列是"860 / 一门到顶"这样的行头，
   表头居中会让第一列看起来像两栏各说各的。 */
.size-table thead th:first-child{text-align:left;position:sticky;left:0;z-index:2}
.size-table tbody th,.size-table tbody td{white-space:nowrap}
.size-table tbody th{text-align:left;font-weight:600;position:sticky;left:0;background:var(--bg);z-index:1;box-shadow:1px 0 0 var(--rule-light),8px 0 8px -8px rgba(11,12,14,.16)}
/* 组名不用 colspan：整行合并的格子钉不住，滚出 300px 以后"单开门"就没了，
   剩下的行变成没有上下文的一堆点。组名只占第一格（本来就是钉住的那一列），
   后面几格留空但不写「—」——留空不是"不提供"。 */
.size-table__group th{color:var(--fg-muted);font-weight:600;font-size:var(--t-label);letter-spacing:.06em}
.size-table__blank{background:var(--bg)}
.size-table__mark{font-size:var(--t-h3);line-height:1}
.size-table__void{color:var(--fg-muted);font-weight:400}
.sizes__legend{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);list-style:none;margin:var(--s-4) 0 0;padding:0;font-size:var(--t-label);color:var(--fg-muted)}
.sizes__legend i{font-style:normal;color:var(--ink);margin-right:6px}
/* 库存不是实时数这句：小字、灰、贴在图例下面，读得到但不抢表。 */
.sizes__note{margin:var(--s-3) 0 0;padding-left:var(--s-3);border-left:2px solid var(--rule);max-width:78ch;font-size:var(--t-small);color:var(--fg-muted);line-height:var(--lh-body)}
.sizes__empty{margin:var(--s-7) 0 0;padding:var(--s-6) var(--s-5);border:1px dashed var(--rule);border-radius:var(--r-md);background:var(--bg-page);color:var(--fg-muted);font-size:var(--t-body);line-height:var(--lh-body);text-align:center}
.sizes__meta{margin:var(--s-6) 0 0;padding-top:var(--s-5);border-top:1px solid var(--rule-light);display:grid;gap:var(--s-3)}
.sizes__meta>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-4)}
.sizes__meta dt{font-size:var(--t-label);color:var(--muted);min-width:9em}
.sizes__meta dd{margin:0;font-size:var(--t-small);font-weight:600}
.sizes .button{margin-top:var(--s-6)}
.specs__content{min-width:0}
.smart-spec[hidden],.specs__cols[hidden]{display:none}
.smart-spec{display:grid;gap:var(--s-7)}
.smart-spec__group{min-width:0}
.smart-spec__group h3{font-size:var(--t-h3);margin:0 0 var(--s-5);line-height:var(--lh-head)}
.smart-spec__group dl{margin:0;border-top:1px solid var(--rule-light)}
.smart-spec__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s-5);border-bottom:1px solid var(--rule-light);padding-block:var(--s-4);font-size:var(--t-body)}
.smart-spec__row dt{color:var(--muted);overflow-wrap:anywhere}
.smart-spec__row dd{margin:0;white-space:pre-line;overflow-wrap:anywhere}
.smart-spec__group p{white-space:pre-line;margin-block:var(--s-4);overflow-wrap:anywhere;color:var(--muted)}
.smart-spec__group ul{padding-left:var(--s-5);margin-block:var(--s-4);list-style:disc}
.smart-spec__group li{margin-bottom:var(--s-2);overflow-wrap:anywhere}
@media(max-width:1080px){.product-gallery{padding-inline:var(--pad);padding-top:var(--s-5)}.product-gallery__track{max-height:none}}
@media(max-width:620px){
 .shots--editorial{grid-template-columns:minmax(0,1fr);gap:var(--s-7)}
 .smart-spec__row{grid-template-columns:minmax(0,1fr) minmax(0,1.65fr);gap:var(--s-4)}
 .product-gallery__choices button{padding:var(--s-1) var(--s-2);min-width:0;flex:1;flex-direction:column}
 .product-gallery__choices img{width:var(--s-6);height:var(--s-6)}
}