@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
:root{--blue:#42b5df;--lime:#85cc2f;--ink:#181a18;--muted:#909590}*{box-sizing:border-box}body{margin:0;background:white;color:var(--ink);font:14px Roboto,Arial,sans-serif}button,input,select,textarea{font:inherit}button,a,input{touch-action:manipulation}button,a{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}img{display:block;max-width:100%}p{line-height:1.65}h1,h2,h3,p{margin-top:0}.wrap{width:84%;max-width:1180px;margin:auto}.utility{height:34px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#8a8d89;border-bottom:1px solid #f0f0f0}.utility div{display:flex;gap:22px}.utility a{text-decoration:underline}.nav-row{height:74px;display:flex;align-items:center;gap:35px}.brand{width:152px;flex-shrink:0}.brand img{width:100%;height:48px;object-fit:contain}.nav{display:flex;align-items:center;gap:29px;font-size:11px;font-weight:700;flex:1}.nav a{height:74px;display:flex;align-items:center;position:relative}.nav a:hover,.nav a.active{color:var(--lime)}.nav a.active:after{content:'';position:absolute;height:2px;background:var(--lime);bottom:0;left:0;right:0}.bag{background:var(--lime);color:white;padding:10px 17px;font-size:10px;font-weight:700;white-space:nowrap}.menu-toggle{display:none}.hero{background:#f6f6f6;position:relative;overflow:hidden;padding:15px 0 0}.dots{display:flex;justify-content:center;gap:10px;padding:4px 0 16px}.dots button{width:8px;height:8px;border:0;border-radius:50%;padding:0;background:#c5c8c8}.dots button.active{background:var(--lime)}.stage{height:370px;position:relative;max-width:1500px;margin:auto}.hero-product{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .65s,transform .65s;transform:translateX(30px)}.hero-product.active{opacity:1;visibility:visible;transform:none}.hero-product .shoe{position:absolute;width:620px;height:335px;object-fit:contain;left:50%;bottom:0;transform:translateX(-50%);mix-blend-mode:multiply}.hero-caption{position:absolute;top:4px;left:58%;z-index:2}.hero-price{font-size:64px;font-weight:900;color:var(--lime);letter-spacing:-3px;line-height:1}.hero-price small{font-size:23px;letter-spacing:-1px}.hero-caption h1{font-size:16px;font-style:italic;margin:5px 0;font-weight:700}.side-shoe{position:absolute;width:350px;height:270px;object-fit:contain;bottom:0;mix-blend-mode:multiply;opacity:.8;transition:opacity .4s}.side-shoe.left{left:-150px}.side-shoe.right{right:-150px}.arrow{position:absolute;top:50%;border:0;background:transparent;font-size:50px;font-weight:400;line-height:1;z-index:4;padding:10px}.prev{left:19%;color:#bdc0bf}.next{right:19%}.shelf{height:16px;background:linear-gradient(#fff,#d8d9d7);box-shadow:0 22px 32px #0003;position:relative;z-index:2}.shelf:before,.shelf:after{content:'';position:absolute;width:18%;height:20px;top:-5px;background:linear-gradient(#fff,#ddd);box-shadow:0 20px 25px #0002}.shelf:after{right:0}.finder{background:#f6f6f6;text-align:center;padding:65px 0 40px;position:relative}.finder:after{content:'';position:absolute;bottom:-14px;left:calc(50% - 14px);border-left:14px solid transparent;border-right:14px solid transparent;border-top:14px solid #f6f6f6}.finder h2{font-size:28px;font-weight:900;margin-bottom:30px}.size-control{display:flex;justify-content:center;align-items:center;gap:24px;max-width:760px;margin:auto}.gender{border:0;background:transparent;color:#a7aaa7;font-size:11px;white-space:nowrap}.gender.active{color:#151815}.gender b{font-size:26px;vertical-align:middle;margin-right:6px}.size-slider{flex:1}.size-slider label{font-size:10px;display:block;margin-bottom:10px}.size-slider input{width:100%;accent-color:var(--lime)}.ticks{display:flex;justify-content:space-between;font-size:10px;color:#999;margin-top:6px}.ticks .selected{color:#111;font-weight:bold}.brands{display:flex;justify-content:center;gap:32px;flex-wrap:wrap;margin:30px auto 25px}.brands button{background:none;border:0;font-size:12px;font-weight:900;color:#b7bab8;text-transform:uppercase;letter-spacing:1px}.brands button.active{color:#20241d}.primary{display:inline-flex;justify-content:center;align-items:center;border:0;background:var(--lime);color:white;padding:13px 25px;font-size:11px;font-weight:700;text-transform:uppercase;transition:background .2s}.primary:hover{background:#289ac4}.find-name{font-size:11px;color:var(--lime);text-decoration:underline;margin-left:20px}.products{padding:55px 0 22px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 28px}.product{text-align:center;display:block}.product img{width:100%;aspect-ratio:1.65;object-fit:contain;transition:transform .3s}.product:hover img{transform:translateY(-6px)}.product h3{font-size:11px;color:#949894;font-weight:400;margin:9px 0 3px}.product .price{font-size:13px;font-weight:700}.product small{font-size:10px}.catalog-rule{height:9px;background:#eee;border-radius:8px;margin-top:42px;box-shadow:inset 0 2px 3px #0002}.catalog-rule span{display:block;width:16%;height:9px;border:1px solid #ddd;background:#fff;border-radius:8px;margin-left:10%}.stories{padding:30px 0 65px}.section-head{text-align:center;margin-bottom:34px}.section-head h2{display:inline;font-size:28px;font-weight:900}.section-head a{font-size:10px;color:var(--lime);text-decoration:underline;margin-left:12px}.story-window{position:relative;border-top:2px solid #f0f0f0;padding-top:28px}.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;width:78%;margin:auto}.story img{width:180px;aspect-ratio:1;border-radius:50%;object-fit:cover;margin:0 auto 20px}.story time{font-size:27px;font-weight:900;display:block;margin-bottom:10px}.story h3{font-size:12px;color:var(--lime);text-transform:uppercase;margin-bottom:12px}.story:nth-child(3) h3{color:#9ae53b}.story p{font-size:11px;color:#8c918d;line-height:1.6}.story-window .arrow{font-size:35px;top:80px}.story-window .prev{left:0}.story-window .next{right:0}.footer-inner{border-top:1px solid #eee;display:flex;justify-content:space-between;gap:30px;padding:28px 0;font-size:10px;color:#969a95}.footer-links{display:flex;gap:20px}.footer-links a:hover{color:var(--lime)}.page-title{padding:65px 0 30px}.page-title h1{font-size:40px;letter-spacing:-1px;margin-bottom:14px}.page-title p{color:#92968f}.toolbar{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 35px}.toolbar input,.toolbar select{padding:12px;border:1px solid #ddd;background:white}.toolbar input{flex:1;min-width:150px}.empty{padding:50px;text-align:center;color:#777}.content{padding-bottom:70px}.product-detail{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center}.product-detail>img{width:100%}.product-detail h1{font-size:36px}.product-detail .price{font-size:28px;color:var(--lime)}.sizes{display:flex;gap:8px;flex-wrap:wrap;margin:25px 0}.sizes button{width:40px;height:40px;border:1px solid #ddd;background:white}.sizes button.active{background:var(--lime);color:white;border-color:var(--lime)}.subtle{font-size:12px;color:#8f948e}.form{display:grid;gap:20px;max-width:640px}.form label{display:grid;gap:8px}.form input,.form textarea{border:1px solid #d5d9d3;padding:12px}.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:70px}.contact-layout h2{font-size:24px}.contact-layout p{color:#8c928a}.article{max-width:760px;margin:auto}.article img{width:100%;max-height:420px;object-fit:cover;margin-bottom:30px}.article p{line-height:1.9;color:#777}.cart-row{display:grid;grid-template-columns:120px 1fr auto auto;gap:24px;align-items:center;border-bottom:1px solid #eee;padding:20px 0}.cart-row img{width:120px}.cart-row button{background:white;border:1px solid #ddd;padding:8px}.cart-total{font-size:24px;text-align:right;margin:30px 0}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:#202820;color:white;padding:15px 25px;opacity:0;pointer-events:none;transition:.25s;z-index:100}.toast.show{opacity:1;transform:translate(-50%,0)}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:4px}[hidden]{display:none!important}.motion-paused{font-size:10px;position:absolute;right:15px;top:10px;border:0;background:transparent;color:#969996;z-index:5}
@media(max-width:1000px){.nav{gap:17px}.nav-row{gap:20px}.hero-product .shoe{width:540px}.hero-price{font-size:52px}.hero-caption{left:57%}.prev{left:9%}.next{right:9%}.side-shoe.left{left:-230px}.side-shoe.right{right:-230px}.story-grid{gap:25px;width:82%}.brand{width:125px}}
@media(max-width:650px){.wrap{width:90%}.utility{height:28px}.utility .service{display:none}.utility div{gap:12px;font-size:9px}.nav-row{height:67px;gap:15px;position:relative}.brand{width:125px;margin-right:auto}.bag{font-size:9px;padding:9px}.menu-toggle{display:block;border:0;background:none;font-size:23px}.nav{display:none;position:absolute;top:67px;left:-5.5%;right:-5.5%;padding:15px 5%;background:white;z-index:20;border-bottom:1px solid #eee}.nav.open{display:flex;flex-direction:column;align-items:flex-start;gap:0}.nav a{height:40px}.hero{padding-top:12px}.stage{height:290px}.hero-caption{position:absolute;top:0;left:0;right:0;text-align:center}.hero-price{font-size:43px;letter-spacing:-2px}.hero-price small{font-size:16px}.hero-caption h1{font-size:13px;margin-top:6px}.hero-product .shoe{width:90%;height:185px;bottom:0}.side-shoe{display:none}.hero .arrow{top:63%;font-size:37px}.hero .prev{left:0}.hero .next{right:0}.dots{padding-bottom:16px}.shelf{height:12px}.finder{padding:48px 0 30px}.finder h2{font-size:23px;margin-bottom:24px}.size-control{gap:9px}.gender{font-size:8px;padding:0}.gender b{display:block;font-size:23px;margin:0 0 5px}.size-slider label{font-size:9px}.ticks{font-size:9px}.brands{gap:15px;margin:24px auto}.brands button{font-size:10px;padding:3px}.primary{font-size:10px;padding:12px 20px}.find-name{font-size:10px;margin-left:12px}.products{padding:35px 0 20px}.grid{grid-template-columns:repeat(2,1fr);gap:25px 14px}.product h3{font-size:10px}.product .price{font-size:12px}.catalog-rule{margin-top:28px}.stories{padding:25px 0 35px}.section-head h2{font-size:22px}.section-head a{font-size:9px}.story-grid{grid-template-columns:1fr;width:75%;gap:30px}.story-grid .story:not(:first-child){display:none}.story img{width:180px}.story p{font-size:12px}.story time{font-size:24px}.story-window .arrow{top:95px}.footer-inner{flex-direction:column;gap:17px;line-height:1.6}.footer-links{justify-content:space-between;gap:8px}.page-title{padding:40px 0 20px}.page-title h1{font-size:33px}.product-detail,.contact-layout{grid-template-columns:1fr;gap:25px}.product-detail h1{font-size:30px}.content{padding-bottom:40px}.cart-row{grid-template-columns:75px 1fr auto;gap:12px}.cart-row img{width:75px}.cart-row>strong{grid-column:2}.cart-row>button{grid-column:3;grid-row:1}.motion-paused{right:5px;top:0;font-size:9px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media(max-width:650px){body[data-page="journal"] .story-grid .story{display:block}}

/* Transparent product artwork and reference brand rail */
.hero-product .shoe,.side-shoe{mix-blend-mode:normal}.brand-selector{display:flex;align-items:center;max-width:850px;margin:20px auto}.brand-selector>button{border:0;background:none;font-size:32px;padding:8px}.brands{flex:1;min-width:0;justify-content:flex-start;flex-wrap:nowrap;gap:16px;overflow:auto;scrollbar-width:none;margin:0 15px}.brands button{flex:0 0 84px;padding:4px;opacity:.35;transition:opacity .2s}.brands button:hover,.brands button.active{opacity:1}.brands img{width:84px;height:50px;object-fit:contain}.hero-product .shoe{filter:drop-shadow(0 12px 7px #0002)}.side-shoe{filter:drop-shadow(0 10px 7px #0002)}
@media(max-width:650px){.brand-selector{margin:20px 0}.brands{gap:12px;margin:0 5px}.brands button{flex-basis:65px}.brands img{height:40px;width:65px}}

/* Circular shoe carousel: each shoe travels with its own raised display shelf. */
.hero{padding-bottom:48px;overflow:hidden}.stage{isolation:isolate}.side-shoe,.shelf{display:none}
.hero-product,.hero-product.active{inset:0 auto 0 50%;width:58%;opacity:1;visibility:visible;transform:translateX(calc(-50% + var(--slot,0)*108%));transition:transform .75s cubic-bezier(.22,.7,.2,1);z-index:1}
.hero-product.wrap-slide{transition:none}.hero-product.active{z-index:2}
.hero-product:after{content:'';position:absolute;left:0;right:0;bottom:0;height:16px;background:linear-gradient(to bottom,#fff 0%,#fff 36%,#e4e4e4 40%,#c8c8c8 100%);box-shadow:0 24px 25px -7px #0005;z-index:-1}
.hero-product .shoe{width:100%;height:335px;bottom:-36px;filter:drop-shadow(0 5px 3px #0002)}
.hero-caption{left:58%;top:4px;white-space:nowrap;opacity:0;transition:opacity .35s}.hero-product.active .hero-caption{opacity:1}
.hero .arrow{color:#c8cbcb;transition:color .2s}.hero .arrow:hover{color:#000}.hero .prev{left:20%}.hero .next{right:20%}
.finder{padding-top:25px}
@media(max-width:1000px){.hero-product,.hero-product.active{width:62%}.hero .prev{left:13%}.hero .next{right:13%}}
@media(max-width:650px){.hero{padding-bottom:35px}.hero-product,.hero-product.active{width:90%}.hero-caption{left:0;right:0;white-space:normal}.hero-product .shoe{width:100%;height:185px;bottom:-20px}.hero-product:after{height:12px;box-shadow:0 19px 18px -6px #0004}.hero .prev{left:0}.hero .next{right:0}.finder{padding-top:25px}}

.arrow,.brand-prev,.brand-next{color:#c8cbcb;transition:color .2s}.arrow:hover,.brand-prev:hover,.brand-next:hover{color:#000}
.hero-product:after{box-shadow:0 25px 24px -4px #0004}
/* Reference shelves: white fascia, recessed connecting rail and broad cast shadow. */
.hero{padding-bottom:80px}
.stage:after{content:'';position:absolute;left:-50vw;right:-50vw;bottom:6px;height:18px;background:linear-gradient(#d6d6d6,#e7e7e7 65%,#ccc);box-shadow:inset 0 3px 5px #0002;z-index:-2}
.hero-product:after{height:24px;bottom:0;background:linear-gradient(to bottom,#fff 0%,#fff 13%,#f0f0f0 22%,#fafafa 75%,#fff 86%,#dedede 100%);border-top:1px solid #eee;box-shadow:0 4px 3px #0001,0 34px 25px -6px #0005}
.hero-product:before{content:'';position:absolute;left:3%;right:3%;top:100%;height:66px;background:linear-gradient(to bottom,#0004,#0000);filter:blur(9px);transform:perspective(220px) rotateX(-15deg);transform-origin:top;z-index:-2;pointer-events:none}
@media(max-width:650px){.hero{padding-bottom:58px}.hero-product:after{height:18px;box-shadow:0 3px 2px #0001,0 24px 20px -6px #0005}.hero-product:before{height:45px}.stage:after{height:13px;bottom:4px}}

/* Three fixed rows, additional columns accessible by touch, keyboard or slider. */
.gallery-viewport{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;padding-top:8px}.gallery-viewport::-webkit-scrollbar{display:none}.gallery-grid{grid-template-rows:repeat(3,auto);grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 84px)/4);gap:34px 28px}.gallery-slider{display:block;width:100%;margin:34px 0 0;height:14px;appearance:none;background:transparent;cursor:ew-resize}.gallery-slider::-webkit-slider-runnable-track{height:9px;background:#e9e9e9;box-shadow:inset 0 2px 3px #0002;border-radius:9px}.gallery-slider::-webkit-slider-thumb{appearance:none;width:25%;height:9px;background:white;border:1px solid #d4d4d4;border-radius:9px}.gallery-slider::-moz-range-track{height:9px;background:#e9e9e9;border-radius:9px}.gallery-slider::-moz-range-thumb{width:100px;height:9px;background:white;border:1px solid #d4d4d4;border-radius:9px}
@media(max-width:650px){.gallery-grid{grid-auto-columns:calc((100% - 14px)/2);gap:25px 14px}.gallery-slider{margin-top:28px}.gallery-slider::-webkit-slider-thumb{width:20%}}

/* Brand watermark travels with each shoe and shelf. */
.hero-brand-backdrop{position:absolute;left:50%;top:65px;transform:translateX(-50%);width:88%;height:245px;object-fit:contain;filter:grayscale(1);opacity:.13;pointer-events:none;z-index:0}.hero-product .shoe{z-index:1}.hero-caption{z-index:3}
@media(max-width:650px){.hero-brand-backdrop{top:105px;width:94%;height:145px}}

/* Position brand backgrounds opposite the price. */
.hero-brand-backdrop{left:3%;top:-35px;transform:none;width:48%;height:230px;object-position:left center}
@media(max-width:650px){.hero-brand-backdrop{left:0;top:65px;width:53%;height:140px}}

.hero-brand-backdrop{object-position:left top}

.product img[src$="jordan-red.png"],.product-detail>img[src$="jordan-red.png"]{scale:.9}.hero-product .shoe[src$="jordan-red.png"]{scale:.9;transform-origin:center bottom}

.gallery-grid .product img[src$="jordan-red.png"]{scale:.945}
/* Supplied brand colors for the top navigation and button highlights. */
header{background:var(--lime)}
header .utility{color:#173c49;border-bottom-color:#ffffff40}
header .nav a:hover,header .nav a:focus-visible{color:var(--lime)}
header .nav a.active:after{background:var(--lime)}
header .bag:hover,header .menu-toggle:hover,.primary:hover{background:var(--lime);color:#172014}
@media(max-width:650px){header .nav{background:var(--lime)}}
/* Keep the reduced Jordan centered: scale its dimensions instead of its translated layer. */
.hero-product .shoe[src$="jordan-red.png"]{scale:1;width:90%;height:301.5px;left:50%;transform:translateX(-50%)}
@media(max-width:650px){.hero-product .shoe[src$="jordan-red.png"]{height:166.5px}}
/* White branding and menu labels on the blue header. */
header .brand img{filter:brightness(0) invert(1)}
header .nav a,header .menu-toggle,header .bag{color:#fff}
header .nav a:hover,header .nav a:focus-visible{color:var(--lime)}

/* Match the visible high-top height despite different PNG margins. */
.hero-product .shoe[src$="blue-high.png"]{scale:1;width:100.56977%;height:336.90872px;left:50%;transform:translateX(-50%)}
@media(max-width:650px){.hero-product .shoe[src$="blue-high.png"]{height:186.05407px}}
/* Green hero prices for the two Nike high-tops. */
.hero-product[href="product.html?id=jordan-red"] .hero-price,
.hero-product[href="product.html?id=blue-high"] .hero-price{color:var(--lime)}
/* Supplied green for hero prices only. */
.hero .hero-price{color:var(--lime)}
/* Gallery handle remains green throughout pointer dragging. */
.gallery-slider:hover::-webkit-slider-thumb,.gallery-slider:active::-webkit-slider-thumb,.gallery-slider:focus-visible::-webkit-slider-thumb{background:var(--lime);border-color:var(--lime)}
.gallery-slider:hover::-moz-range-thumb,.gallery-slider:active::-moz-range-thumb,.gallery-slider:focus-visible::-moz-range-thumb{background:var(--lime);border-color:var(--lime)}
#find-pair{background:var(--lime)}
#find-pair:hover,#find-pair:focus-visible{background:var(--lime);color:#fff}
/* Consistent editorial title colors. */
.story h3,.story:nth-child(3) h3{color:var(--lime);transition:color .2s}
.story:hover h3,.story:focus-visible h3{color:var(--lime)}

.story time{font-size:22px}@media(max-width:650px){.story time{font-size:21px}}

.story-viewport{width:78%;margin:auto;overflow:hidden}.story-track{display:flex;gap:30px;will-change:transform}.story-track>.story{flex:0 0 calc((100% - 60px)/3);min-width:0}.story-track .story img{max-width:100%}
@media(max-width:1000px){.story-viewport{width:82%}}
@media(max-width:650px){.story-viewport{width:75%}.story-track>.story{flex-basis:100%}}
.footer-links a:hover,.footer-links a:focus-visible{color:var(--lime)}

/* Green reference-style underline for navigation hover and current page. */
header .nav a:after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--lime);transform:scaleX(0);transform-origin:center;transition:transform .18s ease}
header .nav a:hover:after,header .nav a:focus-visible:after,header .nav a.active:after{transform:scaleX(1);background:var(--lime)}
header .nav a.active,header .nav a.active:hover,header .nav a.active:focus-visible{color:#fff}
/* Green utility strip above the main blue navigation. */
header .utility{position:relative;background:var(--lime);color:#173c49;border-bottom-color:#ffffff80;z-index:0}
header .utility:before{content:'';position:absolute;top:0;bottom:0;left:calc((100% - 100vw)/2);width:100vw;background:var(--lime);z-index:-1;pointer-events:none}
/* Match the resting brand-logo gray across the utility strip and hero. */
header .utility,header .utility:before{background:#b7b7b7}
header .utility{border-bottom:0;color:#303030}
header{position:relative;z-index:30;box-shadow:0 5px 12px rgba(0,0,0,.16)}
.hero-brand-backdrop{opacity:.35;filter:grayscale(1)}
/* Restore the blue utility strip and its white separator. */
header .utility,header .utility:before{background:var(--lime)}
header .utility{border-bottom:1px solid #ffffff40;color:#173c49}
/* Blue background across the full hero carousel. */
.hero{background:var(--lime)}
/* White carousel branding and blue recessed platform connectors. */
.hero .hero-brand-backdrop{filter:brightness(0) invert(1);opacity:1}
.hero .stage:after{background:linear-gradient(to bottom,#2994bc 0%,var(--lime) 65%,#38a6cf 100%);box-shadow:inset 0 3px 5px rgba(0,0,0,.18)}
/* White hero prices with brand-gray product captions. */
.hero .hero-product .hero-price{color:#fff}
.hero .hero-caption h1{color:#b7b7b7}
/* Black hero prices and product captions. */
.hero .hero-product .hero-price,.hero .hero-caption h1{color:#000}
/* Green hero prices, with price and caption shifted right together. */
.hero .hero-product .hero-price{color:var(--lime)}
.hero .hero-caption{translate:20px 0}

.hero .dots button.active{background:var(--lime)}
/* White main navigation beneath the blue utility strip. */
header{background:#fff}
header .utility,header .utility:before{background:var(--lime)}
header .brand img{filter:brightness(0)}
header .nav a,header .nav a.active,header .nav a.active:hover,header .nav a.active:focus-visible,header .menu-toggle,header .bag{color:#000}
header .nav a:hover,header .nav a:focus-visible{color:var(--lime)}
header .nav a.active:hover,header .nav a.active:focus-visible{color:#000}
@media(max-width:650px){header .nav{background:#fff}}
/* Restore the original green-accent logo and remove the utility divider. */
header .utility{border-bottom:0}
header .brand img{filter:none}

.gallery-grid .product h3{margin-top:20px}

/* Preserve measured logo dimensions so visible tops align with price numerals. */
.hero .hero-brand-backdrop{max-width:none;object-fit:fill}

/* Restore the original neutral hero background and recessed platform shading. */
.hero{background:#f6f6f6}
.hero .stage:after{background:linear-gradient(#d6d6d6,#e7e7e7 65%,#ccc);box-shadow:inset 0 3px 5px #0002}

/* Match hero branding to the gray brand selector logos. */
.hero .hero-brand-backdrop{filter:brightness(0) invert(0.717647);opacity:1}

/* Blue prices in the hero carousel. */
.hero .hero-product .hero-price{color:var(--lime)}

/* Full-width white brand backdrops behind the hero shoes. */
.hero .hero-brand-backdrop{filter:brightness(0) invert(1);opacity:1;transform:none;max-width:none;object-fit:fill;z-index:0}

/* Gray full-width hero brand logos. */
.hero .hero-brand-backdrop{filter:brightness(0) invert(0.717647);opacity:1}

/* Softer hero logos keep the sneakers visually prominent. */
.hero .hero-brand-backdrop{filter:brightness(0) invert(0.717647);opacity:1}

/* Move hero branding 10px left, opposite the price and caption. */
.hero .hero-brand-backdrop{translate:-10px 0}

/* Additional left offset for Nike hero logos. */
.hero .hero-brand-backdrop[src*="brand-nike"]{translate:-20px 0}

/* White version: green utility bar above the main navigation. */
header .utility,header .utility:before{background:var(--lime)}

/* White version accents, with blue search and journal links retained. */
.find-name,.section-head a{color:var(--blue)}
.story h3,.story:nth-child(3) h3{color:#000}
.story:hover h3,.story:focus-visible h3{color:var(--lime)}

/* Green post dates in the homepage journal section. */
.stories .story time{color:var(--lime)}

/* White utility bar above the main navigation. */
header .utility,header .utility:before{background:#fff}

/* Subtle divider between the utility bar and main navigation. */
header .utility{border-bottom:1px solid #e5e5e5}

/* Restore the original green New Balance colorway on all screen sizes. */
img[src$="white-black-runner.png"]{content:url("assets/lime-runner.png")}

/* Raise mobile hero shoes, shelves, connecting rail, and shadows together. */
@media(max-width:650px){.hero-product .shoe,.hero-product:before,.hero-product:after,.hero .stage:after{translate:0 -25px}}

/* Right-align mobile hero pricing and product captions. */
@media(max-width:650px){.hero .hero-caption{left:auto;right:0;text-align:right;translate:0 0}}

/* Match right caption inset to the visible Nike mark on the left. */
@media(max-width:650px){.hero .hero-caption{right:var(--mobile-caption-inset,8px);text-align:right}}

/* Raise the complete mobile pair-finder section and its lower edge. */
@media(max-width:650px){.finder{margin-top:-20px}}

/* Raise all homepage content following the mobile pair finder. */
@media(max-width:650px){.finder + .products{margin-top:-20px}}

/* Consistent mobile homepage section rhythm. */
@media(max-width:650px){
 body[data-page="index"]{--section-space:24px}
 body[data-page="index"] .hero{padding-bottom:var(--section-space)}
 body[data-page="index"] .finder,
 body[data-page="index"] .finder + .products,
 body[data-page="index"] .stories{margin-top:0;padding-top:var(--section-space);padding-bottom:var(--section-space)}
 body[data-page="index"] .footer-inner{padding-top:var(--section-space);padding-bottom:var(--section-space)}
}

/* Mirror the visible logo inset with desktop price and caption alignment. */
@media(min-width:651px){.hero .hero-caption{left:auto;right:var(--desktop-caption-inset,40px);text-align:right;translate:0 0}}

/* Lift mobile hero shoes and shelves plus all following content by 20px. */
@media(max-width:650px){body[data-page="index"] .stage{height:270px}}

/* Narrow mobile platforms by five pixels on either side. */
@media(max-width:650px){.hero-product:after{left:5px;right:5px}.hero-product:before{left:calc(3% + 5px);right:calc(3% + 5px)}}

/* Inset mobile hero arrows by five pixels on each side. */
@media(max-width:650px){.hero .prev{left:5px}.hero .next{right:5px}}

@media(max-width:650px){.hero .stage{touch-action:pan-y pinch-zoom}.hero .shoe{-webkit-user-drag:none;user-select:none}}

/* Native touch swiping across the gallery, synchronized with its range control. */
.gallery-viewport{touch-action:pan-x pan-y pinch-zoom;-webkit-overflow-scrolling:touch}
.gallery-viewport img{-webkit-user-drag:none;user-select:none}
@media(max-width:650px){.gallery-slider{height:32px;touch-action:pan-y}}

/* Restore the pair-finder layout from before the mobile spacing adjustments. */
@media(max-width:650px){body[data-page="index"] .finder{margin-top:0;padding:25px 0 30px}body[data-page="index"] .finder h2{margin-bottom:24px}body[data-page="index"] .finder .brand-selector{margin:20px 0}}

/* Equal gaps around the mobile logo carousel between heading and button. */
@media(max-width:650px){body[data-page="index"] .finder h2{margin-bottom:20px}body[data-page="index"] .finder .brand-selector{margin-top:20px;margin-bottom:20px}}

/* Center desktop brand carousel between the heading and finder button. */
@media(min-width:651px){body[data-page="index"] .finder h2{margin-bottom:20px}body[data-page="index"] .finder .brand-selector{margin-top:20px;margin-bottom:20px}}

/* Native swipe navigation for the brand carousel alongside its arrows. */
.brands{overflow-x:auto;touch-action:pan-x pan-y pinch-zoom;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}.brands img{-webkit-user-drag:none;user-select:none}

/* Reveal neighboring sneakers in the desktop hero carousel. */
@media(min-width:651px){.hero-product,.hero-product.active{width:45%}.hero .prev{left:27.5%}.hero .next{right:27.5%}}

/* Larger, wider desktop brand selector. */
@media(min-width:651px){.finder .brand-selector{max-width:1100px}.finder .brands{gap:20px}.finder .brands button{flex-basis:105px}.finder .brands img{width:105px;height:63px}}