/* ── Category screen v2 · 2×4 cards + preview ── */
#scrCat.cgOn.onscr{position:absolute;inset:0;display:flex!important;flex-direction:column;align-items:center;padding:clamp(64px,9vh,92px) clamp(24px,3vw,56px) calc(var(--safe-b) + 4px);box-sizing:border-box;min-height:600px}
#scrCat.cgOn .orbitWrap{display:none!important}
#scrCat.cgOn .head{position:static!important;top:auto!important;width:100%;max-width:1420px;display:flex;flex-direction:column;align-items:center;text-align:center;flex:0 0 auto}
#scrCat.cgOn .cgKick{font-size:13px;font-weight:700;letter-spacing:2.4px;color:var(--gold);margin-bottom:8px}
#scrCat.cgOn h1{font-size:clamp(34px,3.4vw,56px)!important;font-weight:700!important;letter-spacing:-.02em;margin:0 0 10px!important}
#scrCat.cgOn .head .sub{font-size:clamp(15px,1.15vw,18px)!important;color:var(--ts)}
#scrCat.cgOn .ccx{width:min(900px,100%);margin:clamp(14px,2.6vh,26px) auto 0!important}
#scrCat.cgOn .ccxIn{display:flex!important;align-items:center;gap:12px;height:54px;padding:0 7px 0 18px!important;border-radius:8px!important;border:1px solid var(--tilebd)!important;background:rgba(18,16,13,.62)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#scrCat.cgOn .ccxIn:focus-within{border-color:var(--gold)!important}
#scrCat.cgOn .ccxIn>svg{width:20px;height:20px;flex:0 0 auto;color:var(--tp)}
#scrCat.cgOn #catType{flex:1 1 auto;min-width:0;font-size:16px!important;background:none!important;border:none!important;outline:none;color:var(--tp)}
#scrCat.cgOn .cgEg{flex:0 1 auto;font-size:13px;color:var(--ts);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#scrCat.cgOn #catTypeGo{width:44px!important;min-width:44px;height:40px;border-radius:8px;border:none;background:var(--gold)!important;color:#1b1710!important}
#scrCat.cgOn #ccxGo{display:none!important}
.cgWrap{flex:1 1 auto;min-height:0;width:100%;max-width:1480px;margin-top:clamp(12px,2vh,22px);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(16px,1.6vw,24px)}
.cgList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:clamp(8px,1.2vh,14px) clamp(12px,1.2vw,18px);min-height:0}
#scrCat.cgOn .cap{position:relative!important;transform:none!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;min-height:84px;display:flex!important;align-items:center;gap:clamp(12px,1.1vw,18px);padding:0 14px 0 0!important;border-radius:8px!important;border:1px solid var(--tilebd)!important;background:rgba(18,16,13,.62)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:none!important;overflow:hidden;text-align:left;white-space:normal!important;color:var(--tp);transition:border-color .18s,background .18s,box-shadow .18s}
#scrCat.cgOn .cap .well{flex:0 0 auto;align-self:stretch;width:clamp(110px,10vw,170px)!important;height:auto!important;border:none!important;border-radius:0!important;background:#15130f!important;overflow:hidden;position:relative;display:block!important;-webkit-mask:linear-gradient(90deg,#000 78%,transparent);mask:linear-gradient(90deg,#000 78%,transparent)}
#scrCat.cgOn .cap .well img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
#scrCat.cgOn .cap>span:not(.well){flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
#scrCat.cgOn .cap .nm{font-size:clamp(16px,1.15vw,18px)!important;font-weight:600;color:var(--tp);line-height:1.25}
#scrCat.cgOn .cap .ds{font-size:clamp(13px,.95vw,14.5px)!important;color:var(--ts);line-height:1.3}
#scrCat.cgOn .cap .cgCh{flex:0 0 auto;color:var(--ts);transition:color .18s,transform .18s}
#scrCat.cgOn .cap:hover,#scrCat.cgOn .cap.pre{border-color:rgba(245,244,240,.34)!important;background:rgba(30,27,22,.72)!important}
#scrCat.cgOn .cap:hover .cgCh,#scrCat.cgOn .cap.pre .cgCh{color:var(--tp);transform:translateX(2px)}
#scrCat.cgOn .cap.on{border-color:var(--gold)!important;background:rgba(40,33,22,.78)!important;box-shadow:0 0 0 1px rgba(229,168,46,.18),0 0 18px rgba(229,168,46,.14)!important}
#scrCat.cgOn .cap.on .cgCh{color:var(--gold)}
#scrCat.cgOn .cap.on .nm{color:#fff}
.cgPrev{position:relative;min-height:0;border-radius:8px;overflow:hidden;border:1px solid var(--tilebd);background:rgba(18,16,13,.62)}
#scrCat.cgOn .lens{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;transform:none!important;border:none!important;border-radius:0!important;box-shadow:none!important;opacity:0;transition:opacity .25s}
#scrCat.cgOn .lens.show{opacity:1}
#scrCat.cgOn .lens img{width:100%;height:100%;object-fit:cover;object-position:50% 40%!important}
.cgPrev::after{content:"";position:absolute;inset:auto 0 0;height:46%;z-index:4;background:linear-gradient(transparent,rgba(12,11,9,.9));pointer-events:none;opacity:0;transition:opacity .25s}
.cgPrev.has::after{opacity:1}
.cgCap{position:absolute;left:clamp(20px,2vw,32px);right:20px;bottom:clamp(18px,2.6vh,30px);z-index:5;display:flex;flex-direction:column;gap:6px;opacity:0;transition:opacity .25s}
.cgPrev.has .cgCap{opacity:1}
.cgCap .k{font-size:12px;font-weight:700;letter-spacing:1.8px;color:var(--gold)}
.cgCap b{font-size:clamp(24px,2vw,32px);font-weight:700;letter-spacing:-.01em;color:#fff;line-height:1.15}
.cgCap span:last-child{font-size:clamp(14px,1.05vw,16px);color:rgba(245,244,240,.8)}
.cgPh{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;color:var(--ts);transition:opacity .25s}
.cgPrev.has .cgPh{opacity:0}
.cgPh .bx{width:74px;height:74px;border-radius:8px;border:1.5px dashed rgba(245,244,240,.28);margin-bottom:10px}
.cgPh b{font-size:20px;font-weight:600;color:var(--tp)}
.cgPh span:last-child{font-size:14px}
@media (max-height:760px){#scrCat.cgOn .cgKick{display:none}#scrCat.cgOn h1{font-size:32px!important;margin-bottom:6px!important}#scrCat.cgOn .ccxIn{height:46px}#scrCat.cgOn .ccx{margin-top:10px!important}.cgWrap{margin-top:12px}}
@media (max-width:1100px){.cgWrap{grid-template-columns:1fr;grid-template-rows:auto minmax(260px,1fr)}#scrCat.cgOn.onscr{position:static;min-height:0;height:auto}.cgList{grid-template-rows:none}#scrCat.cgOn .cap{min-height:76px}#scrCat.cgOn .cgEg{display:none}}
@media (max-width:640px){.cgList{grid-template-columns:1fr}.cgPrev{aspect-ratio:4/5}}
#scrCat.cgOn .cap .ds{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#scrCat.cgOn .lens{z-index:1!important}
@media (max-height:820px){#scrCat.cgOn .head .sub{display:none}#scrCat.cgOn h1{margin-bottom:0!important}}
/* preview = true 4:5 frame sized by the available height (no zoomed/cropped upscaling) */
@media (min-width:1101px){.cgWrap{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr)}
.cgPrev{height:100%;aspect-ratio:4/5;width:auto;box-shadow:0 20px 50px rgba(0,0,0,.45)}}
#scrCat.cgOn .lens img{object-position:50% 50%!important;image-rendering:auto}
.cgPrev::after{height:38%;background:linear-gradient(transparent,rgba(10,9,7,.55) 45%,rgba(10,9,7,.88))}
@media (min-width:1101px){#scrCat.cgOn .lens img{object-fit:contain!important;background:#15130f}}
@media (max-width:1100px){.cgPrev{aspect-ratio:4/5;width:min(100%,420px);justify-self:center}}
/* v3 luxury previews: fashion thumb frames the model, products centred */
#scrCat.cgOn .cap[data-img="fashion"] .well img{object-position:50% 30%}
/* align the grid with the stage bar (same width as the Product card) */
@media (min-width:761px){#scrCat.cgOn.onscr{padding-left:0;padding-right:0}.cgWrap,#scrCat.cgOn .head{max-width:var(--stageW)!important;width:var(--stageW)!important}}
.cgCap #cgDs{display:none}
#scrCat.cgOn .cap .ds{display:none!important}
#scrCat.cgOn .cgKick{display:none!important}
#scrCat.cgOn .ccx{max-width:100%}
#scrCat.cgOn .cgEg{display:none!important}
/* zoomed-out / very tall viewports: the 4:5 preview grew with height and squeezed the card list until names clipped — cap the preview at ~55% of the stage width */
/* zoomed-out / tall viewports: preview was sized by height (4:5) and squeezed the list — fixed 56/44 column split instead; preview fills its cell */
@media (min-width:1101px){.cgWrap{grid-template-columns:minmax(0,56fr) minmax(0,44fr)!important}.cgPrev{width:100%!important;height:100%!important;aspect-ratio:auto!important}#scrCat.cgOn .lens img{object-fit:cover!important;object-position:50% 30%!important}}
#scrCat.cgOn .cap .well{width:56%!important}
/* layout B (Oct 2026): 4×2 full-bleed portrait photo tiles, name overlaid bottom-left */
#scrCat.cgOn .cap{align-items:flex-end!important;padding:0!important}
#scrCat.cgOn .cap .well{position:absolute!important;inset:0;width:100%!important;-webkit-mask:none;mask:none}
#scrCat.cgOn .cap .well::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,9,7,.88));pointer-events:none}
#scrCat.cgOn .cap .well img{transition:transform .5s ease}
#scrCat.cgOn .cap:hover .well img,#scrCat.cgOn .cap.on .well img{transform:scale(1.04)}
#scrCat.cgOn .cap>span:not(.well){position:relative;z-index:2;padding:0 0 clamp(12px,1.6vh,18px) clamp(12px,1.2vw,18px)}
#scrCat.cgOn .cap .cgCh{position:absolute;z-index:2;top:clamp(10px,1.2vh,14px);right:clamp(10px,1vw,14px);margin:0;opacity:0;transition:opacity .18s,transform .18s}
#scrCat.cgOn .cap:hover .cgCh,#scrCat.cgOn .cap.on .cgCh{opacity:1}
#scrCat.cgOn .cap>span:not(.well){padding-right:clamp(10px,1vw,16px)!important}
@media (min-width:1101px) and (max-width:1400px){#scrCat.cgOn .cap .nm{font-size:15px!important}}
#scrCat.cgOn .cap .nm{text-shadow:0 1px 8px rgba(0,0,0,.5)}
@media (min-width:1101px){.cgList{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}}
@media (max-width:1100px){#scrCat.cgOn .cap{min-height:150px}}
#scrCat.cgOn .cap .nm{text-wrap:balance}