/* v1.21: the layout that was approved as the mockup, put on the module this page actually renders.
   Appended after the nx stylesheet so it wins by source order; nothing above it is edited. Flexbox
   does the morphing: the three media queries carry only what flex cannot decide. */
:root{--nx-card:243px;--nx-gap:14px;--nx-pad:clamp(16px,3vw,24px)}

/* the hero: the copy over the still. The search and the chips move out to their own band. */
.nx-bill{min-height:clamp(430px,60vh,640px)}
.nx-bill-in{max-width:1200px;padding:2.6rem 1.5rem 3.4rem}
.nx-bill-t{font-size:clamp(2.2rem,5vw,4rem);line-height:1.02;letter-spacing:-.02em;max-width:22ch;text-wrap:balance}
.nx-bill-p{font-size:1rem;line-height:1.58;max-width:52ch;margin:0 0 1.5rem}
.nx-bill-bg img{opacity:1;filter:saturate(.92)}
/* Jasper, 2026-10-16: laptop and desktop go back to the earlier hero. The phone block below pins every value
   that used to come from here, so nothing under 640px moves. */
.nx-bill-shade{background:linear-gradient(90deg,#0B0E12 0%,rgba(11,14,18,.94) 26%,rgba(11,14,18,.55) 55%,rgba(11,14,18,.12) 100%)}
.nx-btns{gap:.6rem}
#mlvx-nx .nx-btn{height:48px;border-radius:999px;padding:0 22px;font-size:.97rem;font-weight:600}
#mlvx-nx .nx-btn-p{background:var(--nx-gold);color:#15171A}
#mlvx-nx .nx-btn-s{background:transparent;color:var(--nx-ink);border-color:rgba(241,238,231,.32)}
.nx-btn svg{width:14px;height:14px}

/* the band under the hero: a standing search, the counts beside it, the chip strip under both */
/* the band runs the page's full width so its rules reach both edges, and its content still lines up
   with the hero copy and the row heads (measured at 1280: all three start at x=40). */
.nx-tool{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;width:100vw;margin-left:50%;transform:translateX(-50%);padding:16px calc(max((100vw - 1248px) / 2, 0px) + var(--nx-pad)) 14px;border-top:1px solid rgba(241,238,231,.12);border-bottom:1px solid rgba(241,238,231,.12);background:rgba(23,27,34,.72)}
.nx-tool .nx-find{position:relative;right:auto;top:auto;z-index:5;order:1;flex:1 1 320px;max-width:420px;gap:9px;height:42px;padding:0 16px;border:1px solid rgba(241,238,231,.2);background:rgba(255,255,255,.06)}
.nx-tool .nx-find-btn{width:auto;height:auto;padding:0;border:0;background:transparent}
.nx-tool .nx-find-btn:hover{background:transparent;color:var(--nx-gold)}
.nx-tool .nx-find-q,.nx-tool .nx-find.is-open .nx-find-q{width:100%;height:40px;padding:0;opacity:1;border:0;background:transparent}
.nx-tool .nx-find-out{left:0;right:auto;top:calc(100% + .5rem);width:min(100%,520px)}
.nx-tool .nx-bcount{order:2;flex:0 1 auto;margin-left:auto;color:var(--nx-mut);font-size:.82rem;white-space:nowrap}
#mlvx-nx .nx-tool .nx-browse{order:3;flex:1 1 100%;display:block;margin:0;padding:0;background:none;border:0}
.nx-tool .nx-bk{display:none}
.nx-chiprow{display:flex;flex-wrap:nowrap;gap:8px;padding:2px 0 6px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 94%,transparent 100%)}
.nx-chiprow::-webkit-scrollbar{display:none}
#mlvx-nx .nx-chiprow .nx-chip{flex:0 0 auto;height:38px;padding:0 16px;border:1px solid rgba(241,238,231,.24);border-radius:999px;background:transparent;color:var(--nx-mut);font-size:.9rem;font-weight:600;white-space:nowrap;scroll-snap-align:start}
#mlvx-nx .nx-chiprow .nx-chip:hover{border-color:rgba(242,169,59,.6);color:#fff}
#mlvx-nx .nx-chiprow .nx-chip[aria-pressed="true"]{border-color:var(--nx-gold);background:var(--nx-gold);color:#15171A}
#mlvx-nx .nx-chiprow .nx-chip[aria-pressed="true"]:hover{color:#15171A}

/* the rail: one card shape, two lines of title reserved, the group fading at its right edge */
.nx-rail{gap:var(--nx-gap);padding:2px 0 10px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 94%,transparent 100%)}
.nx-rail::-webkit-scrollbar{height:0}
#mlvx-nx .nx-card{flex:0 0 var(--nx-card);width:var(--nx-card);display:flex;flex-direction:column;min-width:0}
.nx-art{border-radius:10px}
#mlvx-nx .nx-badge{left:8px;top:8px;padding:.22rem .55rem;background:rgba(15,18,23,.82);font-size:.655rem;font-weight:700}
.nx-card-t{min-height:2.56em;margin:.75rem 0 0;font-size:.975rem;font-weight:700;line-height:1.28}
.nx-card-s{margin:.44rem 0 0;font-size:.875rem}
.nx-meta{margin:.56rem 0 0;font-size:.85rem}
.nx-head{justify-content:flex-start;align-items:center;margin:0 0 1rem}
.nx-head h3{font-size:1.32rem}
#mlvx-nx .nx-seeall{margin-left:.6rem;height:36px;padding:0 14px;border:1px solid rgba(241,238,231,.3);border-radius:999px;color:var(--nx-ink);font-size:.89rem;font-weight:600;display:inline-flex;align-items:center}
#mlvx-nx .nx-seeall:hover{border-color:rgba(242,169,59,.6);text-decoration:none}
.nx-arrows{margin-left:auto;display:inline-flex;gap:.35rem}
.nx-arrows button{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid rgba(241,238,231,.3);border-radius:999px;background:transparent;color:var(--nx-ink);font:inherit;font-size:1.15rem;font-weight:600;line-height:1;cursor:pointer}
.nx-arrows button:hover{border-color:rgba(242,169,59,.6);color:#fff}
.nx-arrows button[disabled]{opacity:.32;cursor:default}

/* what each width band gets */
@media (min-width:1024px) and (max-width:1099px){:root{--nx-card:220px}}
@media (min-width:640px) and (max-width:1023px){
  :root{--nx-card:40%}
  .nx-rail{-webkit-mask-image:none;mask-image:none}
  .nx-arrows{display:none}
  .nx-tool{padding-top:14px}
  .nx-tool .nx-find{flex:1 1 260px;max-width:360px}
  .nx-tool .nx-bcount{margin-left:0}
  #mlvx-nx .nx-chiprow .nx-chip{height:42px}
  #mlvx-nx .nx-seeall{height:42px;padding:0 16px}
  .nx-bill-in{padding:34px var(--nx-pad) 30px}
  .nx-bill-p{font-size:16px;max-width:56ch}
  #mlvx-nx .nx-btn{height:46px}
}
@media (max-width:639px){
  :root{--nx-card:78vw;--nx-gap:12px;--nx-pad:16px}
  .nx-bill{display:block;min-height:0}
  .nx-bill-bg{position:relative;inset:auto;height:min(54vw,250px)}
  .nx-bill-shade{inset:auto 0 auto 0;top:0;height:min(54vw,250px);background:linear-gradient(180deg,rgba(11,14,18,.1) 0%,rgba(23,27,34,.72) 72%,#171B22 100%)}
  .nx-bill-fade{display:none}
  .nx-bill-in{max-width:none;padding:0 var(--nx-pad) 20px}
  .nx-bill-t{font-size:clamp(26px,7.6vw,34px);max-width:none}
  .nx-bill-p{font-size:16px}
  /* Jasper, 2026-10-16: the phone keeps exactly what it has. These are the values it used to inherit from the
     base above; they live here now so the base can carry the laptop and desktop look. */
  .nx-bill-bg img{opacity:.92;filter:saturate(.86) brightness(.72) contrast(1.04)}
  .nx-bill-t{line-height:1.03;letter-spacing:-.022em;text-wrap:balance}
  .nx-bill-p{line-height:1.5;max-width:64ch;margin:0 0 30px}
  .nx-btns{flex-direction:column;gap:.55rem}
  #mlvx-nx .nx-btn{width:100%;height:52px;justify-content:center}
  .nx-tool{gap:10px;padding:12px calc(max((100vw - 1248px) / 2, 0px) + var(--nx-pad)) 12px}
  .nx-tool .nx-find{flex:1 1 100%;max-width:none;height:50px}
  .nx-tool .nx-bcount{flex:1 1 100%;margin-left:0;font-size:.78rem}
  .nx-chiprow{margin:2px calc(var(--nx-pad) * -1) 0;padding:2px var(--nx-pad) 6px}
  #mlvx-nx .nx-chiprow .nx-chip{height:44px;padding:0 18px;font-size:.94rem}
  #mlvx-nx .nx-seeall{height:40px;padding:0 15px}
  .nx-arrows{display:none}
  .nx-rail{-webkit-mask-image:none;mask-image:none}
  .nx-card-t{font-size:1rem;min-height:0}
  .nx-card-s{font-size:.9rem}
}
/* Jasper, 2026-10-16: v1.32 grew the hero to show more of the picture, which changed the page's layout. That was
   wrong: the ask was a MAX SIZE. The hero box is back to the one every other width gets, and the size cap itself
   lives on the photo: above 2100px wide the picture is at most 1920px, centred, with its outer edges faded into the
   hero so there is no cut line. At 2560 that shows 59% of the picture instead of 44%, at 3440 59% instead of 33%,
   and the hero box, the headline, the search and the chips are untouched at every width. */
@media (min-width:2100px){
  #nx-bill .nx-bill-bg img{display:block;width:min(100%,1920px);margin:0 auto;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
}
/* v1.35: the category row is a real strip you can drag or wheel sideways. Before this it sized itself to its
   content (1500px inside a 390px phone) so nothing could scroll, and a mouse had no way in. */
#mlvx-nx .nx-chiprow{max-width:min(100%,calc(100vw - 2.25rem));min-width:0;overflow-x:auto;touch-action:pan-x;cursor:grab;-webkit-overflow-scrolling:touch}
#mlvx-nx .nx-chiprow.is-dragging{cursor:grabbing;scroll-snap-type:none}
#mlvx-nx .nx-chiprow.is-dragging .nx-chip{pointer-events:none}
/* v1.35b: on the phone the row's own max-width resolved against a band that was itself 1500px wide, so the strip
   stayed unwidened and clipped instead of scrolling. */
/* v1.40: that containment now holds at EVERY width, not only under 880px. On a desktop the band is 100vw with side
   padding, but the browse wrapper still sized itself to the chip row's min-content (1384.56px at 1366, 1440, 1536 and
   1920 alike), so the row began at the band's left padding and ended past the viewport (1505px at 1440, with body
   overflow-x hidden) while row.scrollWidth === row.clientWidth left nothing to scroll: a mouse drag did nothing.
   Constrained, the row resolves against the band's content box (1200px at 1440 and 1920, the page grid), so it is a
   real scroll strip on a desktop too and drag and wheel both move it.
   v1.43: that containment stays under 880px only: capping the full-bleed band at its parent's width while its
   padding still came off 100vw left a 480px content box at 1920. The chip wrapper alone is contained at every
   width, by the rule below. */
@media (max-width:880px){
  #mlvx-nx .nx-tool,#mlvx-nx .nx-browse,#mlvx-nx .nx-hTools{max-width:100%;min-width:0;box-sizing:border-box}
}
/* v1.41: once the wrapper was contained (v1.40) it also became shrinkable, so at 1920 it shared a flex line with the
   search box and the count and was squeezed to 480px, hiding most of the chips behind the drag. It takes its own
   line again, the full content box of the band, so the chips align with the page grid and only the overflow drags. */
#mlvx-nx .nx-tool > .nx-browse{flex:0 0 100%;width:100%;max-width:100%;min-width:0}