/* Two complete compositions. Both keep shopping controls in the first viewport. */
.layout-option .showcase-stage{height:calc(100svh - 82px);min-height:0;max-height:none}
.official-label{position:absolute;top:58px;left:4%;font:600 12px var(--body);letter-spacing:2.3px;color:var(--hero-ink);z-index:3}
.layout-option .season-label{top:58px;left:auto;right:4%;display:flex;gap:12px;align-items:center;font:500 10px var(--body);letter-spacing:1px}
.layout-option .season-label>span{font:600 10px var(--body);border-left:1px solid var(--line);padding-left:12px;letter-spacing:1px}
.layout-option .coordinates{top:18px}
.layout-option .rack{top:100px;bottom:165px}
.layout-option .rack-item{top:0;height:100%;width:clamp(220px,32vw,450px)}
.layout-option .rack-orbit{bottom:0;height:14%}
.layout-option .product-readout{bottom:80px;left:4%;right:4%;width:auto;display:grid;grid-template-columns:1fr auto;gap:5px 15px;align-items:end}
.layout-option .product-readout .eyebrow{grid-column:1/-1;font-size:8px;letter-spacing:1px}
.layout-option .product-readout h1{font-size:40px;line-height:.94;margin:0}
.layout-option .product-buy{display:flex;align-items:center;gap:20px}
.layout-option .rack-navigation{bottom:14px;left:auto;right:4%;transform:none;gap:10px}
.layout-option .swipe-guide{bottom:20px;left:4%;right:auto;justify-content:start;font-size:11px}
.layout-option .swipe-guide small{display:inline;font-size:10px;margin-left:4px}
.layout-hidden{display:none}
/* B: a separate shopping panel anchors the artwork and integrates the controls. */
.option-b .showcase-stage:after{content:'';position:absolute;bottom:0;left:0;right:0;height:178px;background:var(--ink);z-index:3}
.option-b .official-label{font:600 23px var(--display);letter-spacing:.4px;top:54px}
.option-b .season-label{top:61px}
.option-b .product-readout{bottom:92px;color:var(--paper)}
.option-b .product-buy button{background:var(--lime);color:var(--ink)}
.option-b .product-buy button span{color:var(--ink)}
.option-b .swipe-guide,.option-b .swipe-guide small,.option-b .rack-navigation{color:var(--paper)}
.option-b .rack-navigation>button{border-color:#ffffff66}
.option-b .rack-pagination button:after{background:#ffffff66!important}
.option-b .rack-pagination button.active:after{background:var(--lime)!important}
.option-b .rack{bottom:185px}
@media(max-width:700px){
 .layout-option .showcase-stage{height:calc(100svh - 68px);min-height:420px}
 .layout-option .coordinates{top:12px;font-size:6px}
 .official-label{top:48px;left:5%;font-size:11px;letter-spacing:1.6px}
 .layout-option .season-label{top:48px;right:5%;left:auto;font-size:8px;letter-spacing:.5px;gap:0;display:grid;text-align:right;line-height:1.2}
 .layout-option .season-label>span{font-size:9px;border:0;padding:3px 0 0;letter-spacing:.6px}
 .layout-option .rack{top:88px;bottom:170px}
 .layout-option .rack-item{height:100%;width:68vw}
 .layout-option .product-readout{left:5%;right:5%;bottom:88px;gap:7px 8px}
 .layout-option .product-readout h1{font-size:30px;max-width:180px}
 .layout-option .product-readout .eyebrow{font-size:7px}
 .layout-option .product-buy{flex-direction:column;align-items:end;gap:7px;font-size:9px}
 .layout-option .product-buy button{padding:12px 10px;min-height:40px;font-size:8px;gap:6px}
 .layout-option .swipe-guide{bottom:55px;left:5%;right:5%;justify-content:center;font-size:10px;gap:6px}
 .layout-option .swipe-guide small{font-size:9px}
 .layout-option .swipe-gesture{width:37px;height:25px}
 .layout-option .rack-navigation{bottom:5px;left:5%;right:5%;justify-content:space-between;transform:none;gap:0}
 .layout-option .rack-navigation>button{width:42px;height:42px;font-size:19px}
 .layout-option .rack-pagination button{padding:9px}
 .option-b .showcase-stage:after{height:178px}
 .option-b .official-label{font-size:25px;top:45px;letter-spacing:.5px}
 .option-b .season-label{top:49px}
 .option-b .rack{top:84px;bottom:190px}
 .option-b .product-readout{bottom:94px}
 .option-b .product-readout h1{font-size:29px}
}
@media(max-width:700px) and (max-height:560px){
 .layout-option .showcase-stage{min-height:0}
 .layout-option .coordinates{top:9px}
 .layout-option .rack{top:82px;bottom:165px}
 .option-b .rack{bottom:184px}
 .layout-option .product-readout h1{font-size:27px}
}
@media(max-width:700px){.option-b .product-readout{bottom:85px}.option-b .product-readout h1{font-size:27px}.option-b .official-label{font:600 12px var(--body);letter-spacing:1.7px;top:48px}}

.option-a .official-label,.option-a .season-label{top:28px}
.option-a .rack{top:64px}
@media(max-width:700px){.option-a .official-label,.option-a .season-label{top:24px}.option-a .rack{top:62px;bottom:155px}.option-a .product-readout{bottom:88px}}

.layout-option .swipe-guide{left:50%;right:auto;bottom:auto;top:40%;transform:translate(-50%,-50%);opacity:0;animation:gesture-appear 6s 1s both;z-index:12}
.layout-option .swipe-gesture{width:78px;height:52px;color:var(--ink);filter:drop-shadow(0 1px 2px #fff)}
.layout-option .swipe-guide.used{display:none}
@keyframes gesture-appear{0%,100%{opacity:0}12%,75%{opacity:.4}}
@media(prefers-reduced-motion:reduce){.layout-option .swipe-guide{display:none}}

.layout-option .official-label{font:500 14px/1.4 var(--body);letter-spacing:0}
@media(max-width:700px){.layout-option .official-label{font-size:12px;max-width:60%;line-height:1.4}}

.rack-item[data-rack="0"] img{height:min(100%,68vw);width:auto;max-width:none;aspect-ratio:1;margin:auto;clip-path:polygon(33.750% 16.000%,36.375% 17.000%,40.625% 17.875%,49.375% 18.875%,57.500% 18.500%,63.750% 16.750%,65.125% 20.750%,66.125% 24.375%,69.125% 27.500%,73.000% 31.375%,76.125% 36.750%,79.625% 42.625%,81.500% 48.250%,81.500% 52.500%,79.625% 57.875%,77.375% 64.500%,74.750% 71.125%,73.875% 78.000%,73.125% 84.750%,70.500% 88.250%,70.000% 93.875%,60.750% 93.125%,45.250% 92.750%,28.750% 94.000%,27.000% 85.375%,24.875% 80.250%,22.500% 75.000%,20.375% 68.875%,18.750% 63.250%,17.375% 57.875%,16.625% 53.375%,16.750% 49.250%,18.625% 44.000%,21.500% 37.625%,25.375% 32.000%,29.375% 26.875%,30.875% 24.000%,32.500% 20.375%)}
.rack-item[data-rack="3"] img{height:min(100%,68vw);width:auto;max-width:none;aspect-ratio:1;margin:auto;clip-path:polygon(50.250% 4.000%,55.750% 4.750%,61.500% 6.625%,67.375% 9.375%,72.875% 13.125%,77.375% 17.625%,80.375% 22.500%,82.125% 27.500%,83.125% 33.125%,83.000% 37.625%,82.000% 42.500%,81.250% 47.875%,80.250% 54.750%,81.875% 54.875%,83.250% 56.625%,83.375% 61.250%,83.625% 67.875%,83.750% 75.250%,83.375% 81.250%,82.500% 84.875%,80.250% 87.375%,76.375% 89.250%,70.375% 90.750%,63.250% 91.500%,55.000% 92.125%,46.000% 92.250%,37.625% 91.750%,30.500% 91.000%,24.625% 89.625%,20.625% 87.625%,18.250% 85.250%,17.250% 82.375%,16.750% 78.250%,16.625% 72.625%,16.875% 67.000%,17.125% 61.125%,17.500% 57.000%,18.125% 55.375%,20.250% 55.000%,18.875% 49.875%,18.125% 45.000%,17.250% 40.625%,16.250% 35.625%,16.000% 31.500%,16.750% 27.625%,18.250% 23.375%,20.500% 19.375%,23.500% 15.500%,27.375% 12.250%,31.875% 9.250%,36.625% 7.000%,41.375% 5.375%,46.000% 4.500%)}
@media(min-width:701px){.rack-item[data-rack="0"] img,.rack-item[data-rack="3"] img{height:min(100%,32vw)}}

.layout-option .official-label{font:600 12px/18px var(--body);letter-spacing:.5px}
.layout-option .season-label{font:500 11px/18px var(--body);letter-spacing:.4px;display:grid;gap:0;text-align:right}
.layout-option .season-label>span{font:600 11px/18px var(--body);letter-spacing:.4px;border:0;padding:0}
@media(max-width:700px){.layout-option .official-label{font-size:10px;line-height:16px;letter-spacing:.5px;max-width:61%}.layout-option .season-label,.layout-option .season-label>span{font-size:9px;line-height:16px;letter-spacing:.3px}.header{grid-template-columns:1fr auto;gap:12px}.header .menu-toggle{grid-column:2}}

@media(max-width:700px){.layout-option .official-label{font-size:11px;line-height:17px;letter-spacing:.25px}.layout-option .season-label,.layout-option .season-label>span{font-size:10px;line-height:17px;letter-spacing:0}}

.layout-option .swipe-guide{flex-direction:column;gap:5px}.swipe-word{font:600 10px var(--body);letter-spacing:2px}

/* Header lockup. Sized from the shield: the shield art fills 7.625% to 95.5% of its square,
   so the wordmark is exactly that tall and starts at the same top edge.
   Every text line uses line-height .7 (Barlow cap height) nudged up .05em, so boxes = ink.
   BIG BEAR sets the width; WEATHER and the AND/MORE stack fill it from edge to edge. */
.brand{--shield:46px;align-items:flex-start;gap:calc(var(--shield)*.2);letter-spacing:0}
.brand img{width:var(--shield);height:var(--shield)}
.brand-words{display:inline-grid;font-size:calc(var(--shield)*.87875);margin-top:calc(var(--shield)*.07625);row-gap:.0857em;font-family:var(--display);font-weight:800;letter-spacing:0;line-height:.7;white-space:nowrap}
.brand-words>strong,.brand-subline>b,.brand-subline i{display:block;line-height:.7;position:relative;top:-.05em;font-weight:800}
.brand-words>strong{font-size:.7534em}
.brand-subline{display:flex;align-items:stretch;justify-content:space-between;gap:.08em}
.brand-subline>b{font-size:.5527em}
.brand-subline>small{display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-size:.2356em}
.brand-subline i{font-style:normal}
@media(max-width:700px){.brand{--shield:40px}}