.feature-rail{--rail-ink:#f5fbff;position:relative;max-width:1240px;margin:20px auto 34px;padding:16px clamp(16px,4vw,40px);color:var(--rail-ink);overflow:hidden}
.feature-rail:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 10% 30%,rgba(0,224,200,.15),transparent 45%),radial-gradient(ellipse at 80% 65%,rgba(102,113,255,.14),transparent 45%);pointer-events:none}
.rail-heading{position:relative;display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font:700 11px var(--mono);letter-spacing:.14em;color:#b5c9cc}
.rail-heading button{min-height:36px;padding:6px 12px;border:1px solid #29484b;border-radius:999px;background:#0b1b20;color:#eafafa;font:600 12px var(--body);letter-spacing:0;cursor:pointer}
.rail-window{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.rail-track{display:flex;width:max-content;animation:rail-glide 38s linear infinite}
.feature-rail:hover .rail-track,.feature-rail:focus-within .rail-track,.feature-rail.is-paused .rail-track{animation-play-state:paused}
.rail-group{display:flex;gap:20px;padding-right:20px}
.rail-item{display:flex;flex:0 0 106px;flex-direction:column;align-items:center;gap:7px;padding:5px 4px;color:#f4fbfd;text-decoration:none;text-align:center;font:600 13px/1.2 var(--body)}
.rail-icon{display:grid;place-items:center;width:62px;height:62px;border:1px solid color-mix(in srgb,var(--glow) 45%,transparent);border-radius:50%;background:radial-gradient(circle at 35% 25%,color-mix(in srgb,var(--glow) 25%,#173438),#f7faf8 76%);color:#073b3d;box-shadow:0 0 0 4px color-mix(in srgb,var(--glow) 10%,transparent),0 0 24px color-mix(in srgb,var(--glow) 32%,transparent);transition:box-shadow .2s,transform .2s}
.rail-item:hover .rail-icon{transform:scale(1.06);box-shadow:0 0 0 5px color-mix(in srgb,var(--glow) 14%,transparent),0 0 34px color-mix(in srgb,var(--glow) 60%,transparent)}
.rail-icon svg{width:35px;height:35px}
@keyframes rail-glide{to{transform:translateX(-50%)}}
.filter-open{min-height:46px;padding:8px 16px;border:1px solid var(--field-line);border-radius:999px;background:var(--field);color:var(--ink);font-weight:700;cursor:pointer}
.filter-panel{--panel:#f4f8f7;--text:#102a2c;--muted:#637879;--line:#c8d6d5;--accent:#087f80;position:fixed;inset:0 0 0 auto;width:min(500px,100vw);height:100dvh;max-height:none;margin:0;padding:0;border:1px solid var(--line);border-right:0;border-radius:22px 0 0 22px;background:var(--panel);color:var(--text);box-shadow:-24px 0 70px #0006;overflow:hidden}
.filter-panel::backdrop{background:#000b;backdrop-filter:blur(4px)}
.filter-panel .filters{height:100%;display:flex;flex-direction:column;gap:0;overflow-y:auto;padding:24px 26px}
.filter-panel-head{position:sticky;top:-24px;z-index:2;display:flex;justify-content:space-between;align-items:center;margin:-24px -26px 8px;padding:24px 26px 15px;background:var(--panel);border-bottom:1px solid var(--line)}
.filter-panel-head .eyebrow{margin:0;color:var(--muted);font:700 11px var(--mono);letter-spacing:.12em}.filter-panel-head h2{margin:0;color:var(--text);font:600 32px/1.2 var(--display)}
.filter-close{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--text);font-size:28px;cursor:pointer}
.filter-panel .popular{padding:16px 0;border-bottom:1px solid var(--line)}.filter-panel .popular .mono-label{display:block;margin-bottom:9px;color:var(--muted)}.filter-panel .pop{border-color:var(--line);background:white;color:var(--text)}
.filter-panel .filter-group{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:15px 0;border-bottom:1px solid var(--line)}
.filter-panel .filter-group>.mono-label{display:block;margin:0 0 8px;color:var(--text);font:700 17px/1.35 var(--body);letter-spacing:0}
.filter-panel .chip{display:flex;align-items:center;gap:10px;width:100%;min-height:45px;padding:9px 4px;border:0;border-radius:8px;background:transparent;color:var(--text);text-align:left;white-space:normal}
.filter-panel .chip:hover{background:#e8f0ef}.filter-panel .chip:before{content:"";display:block;flex:0 0 20px;width:20px;height:20px;border:1.5px solid #93a7a7;border-radius:5px;background:white;order:-1}
.filter-panel .chip[aria-pressed=true]:before{border-color:var(--accent);background:#d8f2ef;box-shadow:inset 0 0 0 4px var(--panel)}
.filter-panel .chip[aria-pressed=true]{font-weight:700}.filter-panel .chip .n{margin-left:auto;color:var(--muted);font:500 13px var(--mono)}
.filter-panel .filter-foot{position:sticky;bottom:-24px;z-index:3;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;margin:auto -26px -24px;padding:16px 26px;background:var(--panel);border-top:1px solid var(--line)}
.filter-panel .result-count{font-weight:700;color:var(--text)}.filter-panel .filter-apply{grid-column:2;grid-row:1;min-height:48px;padding:10px 20px;border:0;border-radius:999px;background:#0b5155;color:white;font-weight:700;cursor:pointer}.filter-panel .reset{grid-column:1;grid-row:1;justify-self:start}
@media(max-width:700px){.feature-rail{margin:10px auto 24px}.rail-item{flex-basis:94px;font-size:12px}.rail-icon{width:56px;height:56px}.filter-panel{width:100vw;border:0;border-radius:0}.filter-panel .filters{padding-inline:20px}.filter-panel-head{margin-inline:-20px;padding-inline:20px}.filter-panel .filter-foot{margin-inline:-20px;padding-inline:20px}}
@media(prefers-reduced-motion:reduce){.rail-track{animation:none}.rail-window{overflow-x:auto}.rail-group[aria-hidden=true]{display:none}}


/* One continuous illuminated bar, with the light revealed through eyewear cutouts. */
.feature-rail { margin-block:24px 42px; padding-block:24px; }
.rail-heading { margin-bottom:18px; padding-inline:6px; }
.rail-heading b { font:700 12px var(--body); letter-spacing:.16em; }
.rail-heading button { background:#ffffff08; border-color:#ffffff22; color:#d7e4e7; padding:8px 14px; }
.rail-window { position:relative; border-block:1px solid #83d9db20; border-radius:18px; background:linear-gradient(180deg,#101d23,#0b1117); isolation:isolate; }
.rail-window:before { content:""; position:absolute; top:55px; left:0; right:0; height:2px; background:linear-gradient(90deg,#ff8ab8,#6dbdff,#ffd45c,#62f0b1,#b49bff,#ff8c72,#62e9e0); background-size:200% 100%; box-shadow:0 0 22px #62e9e075; animation:rail-light 9s ease-in-out infinite alternate; pointer-events:none; opacity:.65; }
.rail-window:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,#62e9e01a,transparent,#ff8ab81a,transparent); background-size:200% 100%; animation:rail-light 9s ease-in-out infinite alternate; pointer-events:none; z-index:-1; }
.rail-group { gap:0; padding-right:0; }
.rail-item { flex-basis:162px; padding:10px 10px 20px; gap:8px; font:600 15px/1.2 var(--body); position:relative; }
.rail-icon,.rail-item:hover .rail-icon,.rail-item:focus-visible .rail-icon { position:relative; width:142px; height:86px; border:0; border-radius:0; overflow:visible; background:none; box-shadow:none; color:var(--glow); transform:none; transition:filter .25s; filter:drop-shadow(0 0 7px color-mix(in srgb,var(--glow) 50%,transparent)); }
.rail-icon svg { visibility:hidden; width:142px; height:86px; }
.rail-icon:before { content:""; position:absolute; inset:0; background:linear-gradient(100deg,var(--glow) 10%,#fff 40%,var(--glow) 60%,#62e9e0 80%,var(--glow)); background-size:250% 100%; -webkit-mask:var(--frame-mask) center / contain no-repeat; mask:var(--frame-mask) center / contain no-repeat; animation:rail-light 9s ease-in-out infinite alternate; pointer-events:none; }
.rail-label { color:#e7f0f2; letter-spacing:-.015em; }
.rail-item:hover .rail-label,.rail-item:focus-visible .rail-label { color:var(--glow); }
.rail-item:hover .rail-icon { filter:drop-shadow(0 0 12px var(--glow)); }
.rail-item:focus-visible { outline:2px solid var(--glow); outline-offset:-4px; border-radius:12px; }
.feature-rail.is-paused .rail-icon:before,.feature-rail.is-paused .rail-window:before,.feature-rail.is-paused .rail-window:after { animation-play-state:paused; }
@keyframes rail-light { from { background-position:0% 50%; } to { background-position:100% 50%; } }
/* The white frame ticker links directly to each product, including repeated copies. */
.reel-track { gap:0; }
.reel-link { display:flex; flex:0 0 240px; flex-direction:column; align-items:center; gap:8px; padding-inline:20px; text-decoration:none; color:#243b40; font:600 12px var(--body); }
.reel-link img { width:200px; height:86px; object-fit:contain; }
.reel-link span { opacity:.7; transition:opacity .2s; }
.reel-link:hover span,.reel-link:focus-visible span { opacity:1; }
.reel-link:focus-visible { outline:2px solid #0b777e; outline-offset:-3px; border-radius:8px; }
.reel:focus-within .reel-track { animation-play-state:paused; }
@media(max-width:700px) { .rail-item { flex-basis:136px; padding-inline:8px; font-size:14px; } .rail-icon,.rail-item:hover .rail-icon,.rail-item:focus-visible .rail-icon,.rail-icon svg { width:120px; height:76px; } .rail-window:before { top:50px; } .reel-link { flex-basis:200px; padding-inline:14px; } .reel-link img { width:172px; height:74px; } }
@media(prefers-reduced-motion:reduce) { .rail-icon:before,.rail-window:before,.rail-window:after { animation:none; } .rail-icon { transition:none; } .reel { overflow-x:auto; } .reel-link[tabindex="-1"] { display:none; } }