/* Site theme follows the banner look (<html data-look>): peak | range | night | lines */
:root{--pg-a:linear-gradient(180deg,#f6fafd,#eaf3f9);--pg-b:#eaf3f9;--pg-c:#f3f8fb;--tx:#0f2c47;--tx2:#1f4a6d;--muted:#4d6a82;--body-tx:#2b4459;--line:#0f2c4726;--card:#ffffff;--tile:#dfeaf2;--btn:#0f2c47;--btn-tx:#ffffff;--accent2:#2a8fd0;--r:18px;--r-sm:12px}
/* Sections under the hero: Nikk's note, the storm series scrubber, the shop tools.
   Body text is 16px on phones on purpose: a lot of Nikk's buyers are older. */
.note-eyebrow{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:700 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--tx2)}
.note-eyebrow:before{content:'';width:7px;height:7px;border-radius:50%;background:#79dcff;box-shadow:0 0 0 3px #79dcff33}

/* Nikk's note */
.note{position:relative;padding:36px 5% 34px;background:var(--pg-a)}
.note-wrap{max-width:860px;margin:0 auto;display:grid;gap:16px}
.note-head h2{margin:0;font:800 clamp(26px,7.2vw,46px)/.95 var(--display);text-transform:uppercase;color:var(--tx);letter-spacing:-.005em}
.note-copy p:not(.note-eyebrow):not(.note-sign){margin:0 0 10px;font:400 16px/1.55 var(--body);color:var(--body-tx);max-width:34em}
.note-sign{display:flex;align-items:center;gap:10px;margin:0;font:800 italic 30px/1 var(--display);color:var(--tx)}
.note-sign:before{content:'';width:28px;height:2px;background:#79dcff;border-radius:2px}
.note-links{display:flex;flex-wrap:wrap;gap:10px}
.note-links a{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 20px;border-radius:99px;border:1.5px solid var(--line);font:700 14px/1 var(--body);color:var(--tx);transition:background .2s,color .2s}
.note-links a:first-child{background:var(--btn);border-color:var(--btn);color:var(--btn-tx)}
.note-links a:hover{filter:brightness(1.12)}

/* Storm series: drag the slider from calm to snow to sunshine */
.storm-card{--sky1:#5b7088;--sky2:#a9b8c6;--sun:0;--tx:#fff;position:relative;max-width:1080px;margin:0 auto;height:min(540px,128vw);border-radius:26px;overflow:hidden;isolation:isolate;color:var(--tx);
 background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 72%,#f3f7fa 72.2%,#ffffff 100%);box-shadow:0 30px 60px -36px #0f2c4799}
.storm-card:before{content:'';position:absolute;left:-10%;right:-10%;top:66%;height:20%;border-radius:50%;background:radial-gradient(closest-side,#ffffff,#ffffff00);z-index:0}
.storm-snow{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.storm-sun{position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;opacity:var(--sun);z-index:0;pointer-events:none;background:radial-gradient(closest-side,#fffbe8,#fff4c2aa 30%,#ffffff00 72%)}
.storm-pieces{position:absolute;z-index:2;left:50%;top:51%;width:min(54%,330px);aspect-ratio:1;transform:translate(-50%,-50%)}
.storm-pieces img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;will-change:opacity,transform;filter:drop-shadow(0 18px 20px #0f2c4740)}
.storm-info{position:absolute;z-index:4;left:20px;right:20px;top:20px;display:grid;justify-items:start;gap:8px}
.storm-part{margin:0;font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.storm-info h3{margin:0;font:800 clamp(28px,7.8vw,52px)/.92 var(--display);text-transform:uppercase;max-width:9em;text-shadow:0 2px 18px #0f2c4726}
.storm-cta{margin-top:4px;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border:0;border-radius:99px;background:#ffffffe6;color:#0f2c47;font:700 14px/1 var(--body);box-shadow:0 8px 20px -10px #0f2c4780}
.storm-cta span{color:#2a8fd0}
.storm-scrub{position:absolute;z-index:5;left:20px;right:20px;bottom:18px;color:#0f2c47}
.storm-stops{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:6px}
.storm-stops span{display:flex;align-items:center;gap:6px;font:700 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;opacity:.45;transition:opacity .3s}
.storm-stops span:nth-child(2){justify-content:center}.storm-stops span:nth-child(3){justify-content:flex-end}
.storm-stops span.on{opacity:1}
.storm-stops svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#stormRange{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;background:none;pointer-events:none}
.storm-card{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}.storm-pieces img{pointer-events:none}
#stormRange::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:linear-gradient(90deg,#5b7088,#a7b6c4 50%,#2f8fe0)}
#stormRange::-moz-range-track{height:8px;border-radius:99px;background:linear-gradient(90deg,#5b7088,#a7b6c4 50%,#2f8fe0)}
#stormRange::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;margin-top:-13px;border-radius:50%;background:#fff;border:3px solid #0f2c47;box-shadow:0 6px 14px #0f2c4759}
#stormRange::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid #0f2c47;box-shadow:0 6px 14px #0f2c4759}
#stormRange:focus-visible{outline:3px solid #79dcff;outline-offset:4px;border-radius:99px}
@media(min-width:801px){.storm-card{height:560px}.storm-info{left:40px;top:40px}.storm-scrub{left:40px;right:40px;bottom:28px}}

/* Shop tools: big tappable category pills, sort, search */
.shop-head{margin-bottom:18px}
.shop-head h2{margin:0;font:800 clamp(36px,10vw,96px)/.92 var(--display);text-transform:uppercase;color:var(--tx)}
.shop-tools{display:grid;gap:12px;margin-bottom:26px}
.shop-filters{display:flex;flex-wrap:wrap;gap:8px}
.shop-filters::-webkit-scrollbar{display:none}
.shop-filters button{flex:none;height:42px;padding:0 16px;border-radius:99px;border:1.5px solid var(--line);background:var(--card);color:var(--tx);font:700 14px/1 var(--body);white-space:nowrap}
.shop-filters button span{font-size:12px;opacity:.6;margin-left:4px}
.shop-filters button.active{background:var(--btn);border-color:var(--btn);color:var(--btn-tx)}
.shop-row{display:grid;grid-template-columns:auto 1fr;gap:10px}
.shop-search{min-width:0}
.shop-sort,.shop-search{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:12px;background:var(--card);border:1.5px solid var(--line);font:600 13px/1 var(--body);color:var(--muted)}
.shop-sort select{border:0;background:none;font:700 14px/1 var(--body);color:var(--tx);padding:0;outline-offset:4px;cursor:pointer}
.shop-search svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.shop-search input{flex:1;min-width:0;border:0;background:none;font:500 15px/1 var(--body);color:var(--tx);outline:none}
.shop-search:focus-within{border-color:var(--accent2)}
@media(min-width:801px){.shop-tools{grid-template-columns:1fr auto;align-items:center}.shop-row{grid-template-columns:auto 260px}}
@media(max-width:700px){
 .product-card h3{font-size:14px;line-height:1.35;margin:10px 0 4px}
 .product-meta{font-size:12px}
 .save-card{width:34px;height:34px;font-size:17px}
 #showAll{width:100%;height:50px;font-size:13px;border-radius:99px}
}

/* Slim note: small photo beside the headline, one row for the sign-off and links */
.note-head{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center}
.note-head .note-eyebrow{margin-bottom:8px}
.note-pic{width:96px;height:112px;border-radius:var(--r-sm);object-fit:cover;object-position:50% 25%;box-shadow:0 14px 30px -18px #0f2c4799}
.note-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:6px}
.note-foot .note-links a{height:44px;padding:0 16px;font-size:13px}
@media(min-width:801px){.note{padding:64px 4%}.note-head{grid-template-columns:130px 1fr}.note-pic{width:130px;height:150px}}

/* See all the merch: right under the banner */
.drop-shopall{display:flex;align-items:center;gap:10px;height:58px;padding:0 5%;background:var(--btn);color:var(--btn-tx);font:700 15px/1 var(--body)}
.drop-shopall b{margin-left:auto;font-weight:600;font-size:13px;opacity:.75}
.drop-shopall i{font-style:normal;font-size:18px}

/* Shop by series: a 2x2 window, each tile opens a drawer */
.series{position:relative;padding:36px 5% 40px;background:var(--pg-b)}
.series-head{max-width:1080px;margin:0 auto 14px}
.series-head h2{margin:0;font:800 clamp(28px,8vw,52px)/.95 var(--display);text-transform:uppercase;color:var(--tx)}
.series-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.series-tile{position:relative;aspect-ratio:1/1.08;border:0;border-radius:var(--r);overflow:hidden;padding:0;text-align:left;background:var(--tile);color:var(--tx);isolation:isolate;transition:transform .2s}
.series-tile:active{transform:scale(.98)}
.series-tile img{position:absolute;left:10%;top:5%;width:80%;height:56%;object-fit:contain;mix-blend-mode:multiply;transition:transform .5s}
.series-tile:hover img{transform:scale(1.05) rotate(-2deg)}
.series-tile.cut img{mix-blend-mode:normal;filter:drop-shadow(0 10px 14px #0f2c4740)}
.series-name{position:absolute;left:12px;right:12px;bottom:32px;font:800 19px/1 var(--display);text-transform:uppercase;text-wrap:balance}
.series-count{position:absolute;left:12px;bottom:12px;font:600 12px/1 var(--body);opacity:.75}
.series-count i{font-style:normal}
.s-storm{background:linear-gradient(180deg,#5b7088,#a9b8c6);color:#fff}
.s-storm:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(1.5px 1.5px at 20% 30%,#fff 98%,#0000),radial-gradient(1.5px 1.5px at 70% 18%,#fff 98%,#0000),radial-gradient(1px 1px at 45% 55%,#fff 98%,#0000),radial-gradient(1.5px 1.5px at 85% 60%,#fff 98%,#0000),radial-gradient(1px 1px at 12% 70%,#fff 98%,#0000)}
.s-street{background:#dbe7f0}.s-classic{background:#e8eef3}.s-gear{background:#dfe9ef}
@media(min-width:801px){.series{padding:64px 4%}.series-grid{grid-template-columns:repeat(4,1fr);gap:16px}}

/* Series drawer: slides up from the bottom on phones */
dialog.sheet{width:min(760px,100vw);max-width:none;max-height:92dvh;margin:auto auto 0;padding:0;border:0;border-radius:24px 24px 0 0;background:var(--pd-bg,#fff);color:var(--pd-tx,#0f2c47);overflow:auto;overscroll-behavior:contain}
dialog.sheet[open]{animation:sheet-up .32s cubic-bezier(.2,.8,.2,1)}
@keyframes sheet-up{from{transform:translateY(40px);opacity:0}}
dialog.sheet::backdrop{background:#071526a6;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sheet-close{position:sticky;top:10px;float:right;margin:10px 10px 0 0;z-index:9;width:40px;height:40px;border-radius:50%;border:0;background:var(--card);color:var(--pd-tx,#0f2c47);box-shadow:0 4px 14px #0f2c4733;font-size:16px}
.sheet-body{padding:22px 18px 22px;display:grid;gap:12px}
.sheet-body h2{margin:0;font:800 32px/.95 var(--display);text-transform:uppercase}
.sheet-blurb{margin:0;font:400 15px/1.5 var(--body);color:var(--pd-muted,#4d6a82)}
.sheet-storm .storm-card{height:min(440px,108vw)}
.sheet-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -18px;padding:2px 18px 6px;scrollbar-width:none}
.sheet-row::-webkit-scrollbar{display:none}
.sheet-item{flex:0 0 42%;scroll-snap-align:start;border:0;background:none;padding:0;text-align:left;color:inherit}
.sheet-item span{display:block;aspect-ratio:1;border-radius:var(--r-sm);background:var(--tile);overflow:hidden}
.sheet-item img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:8px}
.sheet-item b{display:block;margin-top:8px;font:700 14px/1.25 var(--body)}
.sheet-item em{display:block;margin-top:3px;font:500 13px/1 var(--body);font-style:normal;color:var(--pd-muted,#4d6a82)}
.sheet-all{height:52px;border:0;border-radius:99px;background:var(--pd-btn,#0f2c47);color:var(--pd-btn-tx,#fff);font:700 15px/1 var(--body)}
.series-chip{background:var(--btn)!important;color:var(--btn-tx)!important;border-color:var(--btn)!important}
@media(min-width:801px){dialog.sheet{margin:auto;border-radius:24px}.sheet-item{flex-basis:24%}}