/* ---------- JUST LAUNCHED ---------- */
.nl{--gut:max(24px,calc((100% - 1192px)/2));--coral:#ff7a59;--red:#e0362c;
  position:relative;isolation:isolate;overflow:hidden;padding:56px 0 32px;color:#fff;background:#14103f}
/* A red glow sits behind the controls and drifts slowly */
.nl::before{content:"";position:absolute;z-index:-1;width:620px;height:620px;right:-140px;top:-260px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(224,54,44,.42),transparent 68%);animation:nlDrift 16s ease-in-out infinite alternate}
@keyframes nlDrift{to{transform:translate(-70px,50px) scale(1.12)}}
/* Interactive background: a pool of light and a field of dots follow the pointer across the section */
.nl{--glow:rgba(255,122,89,.26);--dot:rgba(255,255,255,.4)}
.nl::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(circle 360px at var(--mx,50%) var(--my,50%),var(--glow),transparent 70%),
    radial-gradient(circle,var(--dot) 1.2px,transparent 1.7px) 0 0/26px 26px;
  -webkit-mask:radial-gradient(circle 420px at var(--mx,50%) var(--my,50%),#000,transparent 75%);
  mask:radial-gradient(circle 420px at var(--mx,50%) var(--my,50%),#000,transparent 75%)}
.nl.is-hot::after{opacity:1}

.nl-head{max-width:1240px;margin:0 auto;padding:0 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.nl-eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--coral)}
.nl-title{margin-top:10px;font-size:clamp(28px,3.6vw,46px);font-weight:800;line-height:1.06;letter-spacing:-.03em}

/* ---------- controls ---------- */
.nl-ctrl{flex-shrink:0;display:grid;justify-items:end;gap:20px}
.nl-arrows{display:flex;gap:12px}
.nl-arrow{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.3);
  transition:background .25s,border-color .25s,color .25s,transform .2s,opacity .25s}
.nl-arrow svg{width:18px;height:18px;transition:transform .25s}
.nl-arrow:hover:not(:disabled){background:#fff;border-color:#fff;color:var(--navy-dark)}
.nl-prev:hover:not(:disabled) svg{transform:translateX(-3px)}
.nl-next:hover:not(:disabled) svg{transform:translateX(3px)}
.nl-arrow:active:not(:disabled){transform:scale(.92)}
.nl-arrow:disabled{opacity:.3;cursor:default}
.nl-arrow:focus-visible,.nl-go:focus-visible{outline:3px solid var(--coral);outline-offset:3px}

/* ---------- card row ---------- */
/* The row lines up with the heading on the left and runs off the right edge of the screen */
.nl-track{list-style:none;display:flex;gap:24px;margin-top:40px;padding:16px var(--gut) 28px;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nl-track::-webkit-scrollbar{display:none}
.nl-track.is-drag{cursor:grabbing;user-select:none}
.nl-track.is-drag .nl-card{pointer-events:none}
@media (hover:hover){.nl-track{cursor:grab}}

/* min-width:0 keeps every card the same width, however long its product name is */
/* min-width:0 keeps every card the same width, however long its product name is */
.nl-item{flex:0 0 clamp(250px,72vw,290px);min-width:0;display:flex}
/* Classic card: photo panel on top, details below. Tilts toward the mouse (--rx/--ry from launch.js) */
.nl-card{--rx:0deg;--ry:0deg;--lift:0px;position:relative;flex:1;min-width:0;display:flex;flex-direction:column;padding:0 0 20px;border-radius:20px;
  background:#fff;color:var(--text);overflow:hidden;box-shadow:0 14px 32px rgba(6,4,40,.25);
  transform:perspective(900px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.nl-card:hover,.nl-card:focus-within{--lift:-6px}
.nl-card.is-tilting{transition:transform .12s linear,box-shadow .45s}

.nl-media{position:relative;aspect-ratio:5/4;margin-bottom:18px;display:grid;place-items:center;background:#f6f6fb;border-bottom:1px solid #ececf3;overflow:hidden}
.nl-media img{position:absolute;inset:11% 12%;width:76%;height:78%;object-fit:contain;mix-blend-mode:multiply;-webkit-user-drag:none;
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.nl-card:hover .nl-media img,.nl-card:focus-within .nl-media img{transform:scale(1.08) translateY(-4px)}
/* Shown only while a product photo is missing */
.nl-media svg{display:none;position:relative;width:80px;height:80px;color:#c9c8da}
.nl-media.is-missing img{display:none}
.nl-media.is-missing svg{display:block}

.nl-sku,.nl-name,.nl-foot{margin-left:20px;margin-right:20px}
.nl-sku{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.nl-sku,.nl-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nl-name{margin-top:4px;margin-bottom:18px;font-size:18px;font-weight:800;line-height:1.25;letter-spacing:-.01em;color:#16132e}

.nl-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.nl-price{font-size:20px;font-weight:800;color:var(--navy-dark);font-variant-numeric:tabular-nums}
/* The round arrow widens into a "View Details" pill on hover */
.nl-go{display:flex;align-items:center;justify-content:flex-end;height:44px;min-width:44px;padding:0 13px;border-radius:999px;background:var(--navy);color:#fff;
  font-size:13.5px;font-weight:700;white-space:nowrap;transition:background .3s,color .3s}
.nl-go span{max-width:0;opacity:0;overflow:hidden;transition:max-width .45s cubic-bezier(.2,.8,.2,1),opacity .3s,margin .45s cubic-bezier(.2,.8,.2,1)}
.nl-go svg{width:18px;height:18px;flex-shrink:0;transition:transform .3s}
/* The whole card opens the product details page */
.nl-go::after{content:"";position:absolute;inset:0;z-index:3;border-radius:20px}
.nl-card:hover .nl-go,.nl-go:focus-visible{background:var(--red)}
.nl-card:hover .nl-go span,.nl-go:focus-visible span{max-width:120px;opacity:1;margin-right:10px}
.nl-card:hover .nl-go svg{transform:translateX(2px)}

/* ---------- BEST SELLERS (light version of the same row) ---------- */
.nl.is-light{--glow:rgba(255,193,7,.3);--dot:rgba(34,28,134,.38);color:var(--navy-dark);background:#eef0f8}
.nl.is-light::before{right:auto;left:-180px;background:radial-gradient(circle,rgba(255,193,7,.3),transparent 68%)}
.nl.is-light .nl-eyebrow{color:var(--red)}
.nl.is-light .nl-arrow{border-color:rgba(26,21,102,.3)}
.nl.is-light .nl-arrow:hover:not(:disabled){background:var(--navy);border-color:var(--navy);color:#fff}
.nl.is-light .nl-card{box-shadow:0 0 0 1px #e6e7f2,0 12px 30px rgba(26,21,102,.08)}
.nl.is-light .nl-card:hover,.nl.is-light .nl-card:focus-within{box-shadow:0 0 0 1px #d9daf0,0 12px 30px rgba(26,21,102,.08)}

/* Heading and cards rise in once the section scrolls into view (only when the script is running) */
.nl.js .nl-rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*.1s)}
.nl.js.is-in .nl-rv{opacity:1;transform:none}
.nl.js .nl-item{opacity:0;transform:translateX(60px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.25s + var(--i,0)*.09s)}
.nl.js.is-in .nl-item{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .nl *,.nl *::before,.nl *::after,.nl::before{animation:none!important;transition:none!important}
  .nl.js .nl-rv,.nl.js .nl-item{opacity:1;transform:none}
}