/* Collection camera: the campaign banner approaches behind the faster garment planes. */
.xfg-home .xfg-rank-tour{position:relative;width:100%;margin:0;padding:0;height:calc(min(var(--rank-pin-height,100svh),100svh) + var(--rank-runway,0px));background:#18191b;color:#f5f4ef;overflow:visible}
.xfg-rank-tour *,.xfg-rank-tour *::before,.xfg-rank-tour *::after{box-sizing:border-box}
.xfg-rank-pin{position:sticky;top:0;z-index:2;display:flex;flex-direction:column;height:min(var(--rank-pin-height,100svh),100svh);overflow:hidden;isolation:isolate;background:#171515}
.xfg-rank-backdrop{position:absolute;inset:-20px;z-index:-2;background:url('/media/xfg/xfg-ranked-campaign-20260928.webp') 65% center/cover no-repeat;filter:blur(6px) brightness(.36);transform:scale(var(--rank-backdrop-scale,1.03));transform-origin:center;will-change:transform;pointer-events:none}
.xfg-rank-pin::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 58% 58%,#b17d292a,transparent 65%),linear-gradient(180deg,#18191b 0%,#18191b55 15%,transparent 45%,#18191b66 85%,#18191b);pointer-events:none}
.xfg-rank-heading{position:relative;z-index:25;display:flex;justify-content:center;align-items:center;flex:0 0 110px;padding:22px 28px 10px;text-align:center}
.xfg-home .xfg-rank-heading h2{margin:0;font:700 clamp(48px,5.5vw,78px)/.95 'XFG Condensed','Arial Narrow',sans-serif;letter-spacing:1px;text-shadow:0 3px 20px #0008}
.xfg-rank-heading h2 br{display:none}.xfg-rank-heading h2 span{color:#ffd000}
.xfg-rank-stage{position:relative;flex:1 1 auto;min-height:0;isolation:isolate;outline-offset:-4px;touch-action:pan-y}
.xfg-rank-item{position:absolute;left:50%;top:50%;width:auto;height:min(calc(var(--rank-scene-height,600px)*.88),620px);aspect-ratio:1;margin:0;z-index:var(--rank-order,1);opacity:var(--rank-opacity,0);transform:translate(-50%,-50%) translate3d(var(--rank-x,0px),var(--rank-y,0px),0) scale(var(--rank-scale,.9));transform-origin:center;pointer-events:none;will-change:transform,opacity;backface-visibility:hidden}
.xfg-rank-item:first-child{--rank-opacity:1}
.xfg-rank-canvas{position:absolute;inset:0;z-index:23;display:block;width:100%;height:100%;pointer-events:none}
[data-rank-webgl=true] .xfg-rank-item[data-rank-model=true]{visibility:hidden}
.xfg-rank-art{position:absolute;inset:0;overflow:hidden;filter:blur(var(--rank-blur,0px)) drop-shadow(0 24px 20px #0006)}
.xfg-rank-art img{display:block;width:100%;height:100%;max-width:none;object-fit:contain}
.xfg-rank-art--pair img{width:200%;height:100%;object-fit:fill}
.xfg-rank-item--tee{aspect-ratio:1}
.xfg-rank-item--tee .xfg-rank-art{overflow:visible}
.xfg-rank-spin{position:absolute;inset:0;transform:perspective(1000px) rotateY(var(--rank-turn,0deg))}
.xfg-rank-face{position:absolute;inset:0;background-image:var(--rank-design);background-repeat:no-repeat;background-size:200% 100%}
.xfg-rank-face--front{background-position:left center;opacity:clamp(0,calc((.5 - var(--rank-back,0))*100000 + .5),1)}
.xfg-rank-face--back{background-position:right center;opacity:clamp(0,calc((var(--rank-back,0) - .5)*100000 + .5),1)}
[data-rank-tee="orange"]{--rank-design:url('/media/xfg/rank-depth-20261015/mannequin-orange.webp')}
[data-rank-tee="crimson"]{--rank-design:url('/media/xfg/rank-depth-20261015/mannequin-crimson.webp')}
[data-rank-tee="gold"]{--rank-design:url('/media/xfg/rank-depth-20261015/mannequin-gold.webp')}
[data-rank-tee="red"]{--rank-design:url('/media/xfg/rank-depth-20261015/mannequin-red.webp')}
[data-rank-tee="purple"]{--rank-design:url('/media/xfg/rank-depth-20261015/mannequin-purple.webp')}
.xfg-rank-flip{display:none;padding:10px 16px;border:1px solid #fff5;border-radius:4px;color:#fff;background:#18191b80;font:600 13px Arial,sans-serif;cursor:pointer}
[data-rank-reduced=true] .xfg-rank-flip{display:block}
.xfg-rank-labels{position:absolute;inset:0;z-index:24;pointer-events:none}
.xfg-rank-label{position:absolute;top:0;left:0;display:flex;flex-direction:column;justify-content:flex-start;width:310px;min-height:300px;padding:24px 26px;border-radius:26px;transform:translate3d(var(--label-x,12px),var(--label-y,12px),0) scale(var(--label-scale,1));transform-origin:top left;pointer-events:none;visibility:hidden}
.xfg-rank-label::before{content:'';position:absolute;inset:0;z-index:0;border:1px solid #e9f3ff38;border-right-color:#d6e6ff1a;border-bottom-color:#ffffff12;border-radius:inherit;background:linear-gradient(135deg,#ffffff19,transparent 48%,#ffffff08),#10151b24;box-shadow:0 14px 30px #0004,inset 0 1px 1px #ffffff45,inset 1px 0 1px #ffffff1f,inset 0 -1px 2px #0006;backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);opacity:var(--label-opacity,0);will-change:opacity}
/* A soft reflection and fine light ridge travel together across the glass.
   Only their position changes; the frost stays constant while scrolling. */
.xfg-rank-label::after{content:'';position:absolute;inset:1px;z-index:0;border-radius:inherit;background-image:linear-gradient(115deg,transparent 44%,#ffffff08 47%,#f4fbff66 49.4%,#ffffff18 50.6%,transparent 54%),linear-gradient(115deg,transparent 30%,#d9efff09 37%,#ffffff24 46%,#ffffff10 55%,transparent 69%),radial-gradient(ellipse at 12% 0%,#ffffff18,transparent 58%);background-size:240% 100%,240% 100%,100% 100%;background-position:var(--label-shine,110%) 0,var(--label-shine,110%) 0,0 0;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px #ffffff0a;opacity:var(--label-opacity,0);pointer-events:none}
.xfg-rank-label-face{display:contents}
.xfg-rank-label-face>small,.xfg-rank-label-face>strong,.xfg-rank-label-face>p{position:relative;z-index:1;opacity:var(--label-opacity,0);text-shadow:0 1px 4px #0009}
/* Preserve the wrapper's opacity and the blur strength while the glass and
   text fade separately, keeping the existing mobile scroll compositing. */
.xfg-rank-label[data-rank-visible=true]{visibility:visible}
.xfg-rank-label small{margin-bottom:12px;font:600 14px/1.2 Arial,sans-serif;letter-spacing:2px;color:#ded8cb}
.xfg-rank-label strong{font:700 37px/1.05 'XFG Condensed','Arial Narrow',sans-serif;letter-spacing:.5px;color:#ffd000;text-wrap:balance}
.xfg-rank-label p{margin:14px 0 0;font:400 16px/1.55 Arial,sans-serif;color:#f4f5f7}
.xfg-rank-footer{position:relative;z-index:25;display:flex;align-items:center;justify-content:center;gap:20px;flex:0 0 62px;width:min(1280px,calc(100% - 80px));margin-inline:auto;padding:14px 0 24px}
.xfg-rank-footer p{margin:0;color:#eee5d0a6;font:500 10px/1.2 Arial,sans-serif;letter-spacing:2px;text-transform:uppercase}
.xfg-rank-footer .xfg-button{min-height:45px;padding:12px 23px;font-size:14px;white-space:nowrap}
.xfg-rank-steps{display:flex;gap:9px;align-items:center}
.xfg-rank-steps button{appearance:none;display:block;width:32px;height:28px;padding:10px 0;border:0;background:transparent;cursor:pointer}
.xfg-rank-steps button::before{content:'';display:block;height:3px;border-radius:3px;background:#e8e7e444;transition:background-color .2s}
.xfg-rank-steps button[aria-selected=true]::before,.xfg-rank-steps button:hover::before{background:#ffd000}
.xfg-rank-steps button:focus-visible{outline:2px solid #ffd000;outline-offset:3px}
.xfg-header[data-rank-tour-held]:not(:has(:focus-visible)):not(:has([aria-expanded=true])){transform:translate3d(0,-225px,0);pointer-events:none}
.xfg-rank-tour[data-rank-reduced=true]{height:auto}.xfg-rank-tour[data-rank-reduced=true] .xfg-rank-pin{position:relative}.xfg-rank-tour[data-rank-reduced=true] .xfg-rank-item{will-change:auto}
@media(max-width:760px){
 .xfg-rank-heading{flex-basis:108px;padding:19px 16px 8px}
 .xfg-home .xfg-rank-heading h2{font-size:49px;line-height:.91;letter-spacing:.4px}
 .xfg-rank-heading h2 br{display:block}
 .xfg-rank-item{height:min(calc(var(--rank-scene-height,550px)*.36),42vw)}
 .xfg-rank-label{width:clamp(136px,38vw,152px);min-height:240px;padding:16px 12px;border-radius:18px}
 .xfg-rank-tour:not([data-rank-reduced=true]) .xfg-rank-label{min-height:0;padding:0;transform:translate3d(var(--label-x,0px),var(--label-y,0px),0)}
 .xfg-rank-tour:not([data-rank-reduced=true]) .xfg-rank-label-face{display:flex;flex-direction:column;min-height:240px;padding:16px 12px;transform:scale(var(--label-scale,1));transform-origin:top left}
 .xfg-rank-tour:not([data-rank-reduced=true]) .xfg-rank-label::before,
 .xfg-rank-tour:not([data-rank-reduced=true]) .xfg-rank-label::after{inset:auto;top:0;left:0;width:var(--label-width,148px);height:var(--label-height,240px);border-radius:0;clip-path:var(--label-clip)}
 .xfg-rank-label small{font-size:11px;letter-spacing:1.4px;margin-bottom:11px}
 .xfg-rank-label strong{font-size:24px}
 .xfg-rank-label p{font-size:13.5px;line-height:1.45;margin-top:10px}
 .xfg-rank-footer{width:calc(100% - 28px);flex-basis:62px;flex-wrap:wrap;justify-content:center;gap:8px 24px;padding:7px 0 15px}
 .xfg-rank-footer p{display:none}
 .xfg-rank-footer .xfg-button{font-size:12px;min-height:42px;padding:10px 16px}
 .xfg-rank-steps{gap:6px}.xfg-rank-steps button{width:15px}
}
@media(max-height:540px) and (orientation:landscape){.xfg-rank-heading{flex-basis:56px;padding:8px}.xfg-home .xfg-rank-heading h2{font-size:38px}.xfg-rank-heading h2 br{display:none}.xfg-rank-footer{flex-basis:66px;padding:8px 0}.xfg-rank-label{min-height:112px;padding:14px}.xfg-rank-label strong{font-size:23px}}
@media(prefers-reduced-motion:reduce){.xfg-rank-tour *{transition:none!important;animation:none!important;scroll-behavior:auto!important}.xfg-rank-label::after{animation:none!important}}

.xfg-rank-heading{opacity:var(--rank-heading-opacity,1);pointer-events:none}

.xfg-rank-tour:not([data-rank-reduced=true]) .xfg-rank-footer{display:none}