/** Shopify CDN: Minification failed

Line 23:7 Expected identifier but found whitespace
Line 23:9 Unexpected "{"
Line 23:19 Expected ":"
Line 24:9 Expected identifier but found whitespace
Line 24:11 Unexpected "{"
Line 24:21 Expected ":"
Line 25:10 Expected identifier but found whitespace
Line 25:12 Unexpected "{"
Line 25:22 Expected ":"
Line 26:11 Expected identifier but found whitespace
... and 10 more hidden warnings

**/
/* =========================
   NaturalSelection base.css
   Grunge / Minimal, single-drop
   ========================= */

/* ---------- Theme variables from settings ---------- */
:root{
  --bg: {{ settings.bg_color | default: '#0b0b0b' }};
  --text: {{ settings.text_color | default: '#e9e9e9' }};
  --muted: {{ settings.muted_color | default: '#9a9a9a' }};
  --accent: {{ settings.accent_color | default: '#9bff97' }};
  --border: {{ settings.border_color | default: '#1d1d1d' }};
  --font-stack: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* ---------- Resets / globals ---------- */
*{ box-sizing:border-box; font-family: inherit }
html,body{ height:100% }
body.ns-body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: var(--font-stack); letter-spacing:.1px;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a,button{ -webkit-tap-highlight-color: transparent }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }
.skip-to-content{ position:absolute; left:-9999px }
.skip-to-content:focus{ left:1rem; top:1rem; background:#000; color:#fff; padding:.5rem .75rem; z-index:50 }

/* subtle film grain */
body.ns-body::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  opacity: {{ settings.noise_opacity | default: 0.06 }};
  background-image:url({{ settings.noise_image | default: 'data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'256\' height=\'256\'><filter id=\'n\'><feTurbulence type=\'fractalNoise\' baseFrequency=\'0.7\' numOctaves=\'2\'/></filter><rect width=\'100%\' height=\'100%\' filter=\'url(%23n)\'/></svg>' }});
  mix-blend-mode:overlay;
}

/* =========================
   Header
   ========================= */
.ns-header{
  position:sticky; top:0; z-index:40;
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}
.ns-header__inner{
  display:grid; grid-template-columns: 1fr auto 1fr;
  align-items:center; gap:1rem; width:100%;
  padding:.6rem .75rem; margin:0;
}
.ns-logo{ justify-self:start; display:inline-flex; align-items:center; text-decoration:none; color:var(--text) }
.ns-logo-img{ max-height:42px; display:block }
@media (min-width:960px){ .ns-logo-img{ max-height:48px } }
.ns-header .ns-logo-img.make-white{ filter: invert(1) brightness(1.6) contrast(1.1) }

.ns-brand{
  justify-self:center; color:var(--text); text-decoration:none;
  text-transform:uppercase; letter-spacing:.18em;
  font-weight:700; font-size:.9rem;
}
.ns-brand .ns-trade{ font-size:.6em; margin-left:.25em; opacity:.8; vertical-align: super; }

.ns-nav{ justify-self:end; display:inline-flex; gap:1rem }
.ns-link{
  color:var(--muted); text-decoration:none; position:relative;
  text-transform:uppercase; letter-spacing:.18em; font-weight:700; font-size:.85rem;
}
.ns-link:hover, .ns-link.is-active{ color:var(--text) }
.ns-link::after{
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:0;
  background:var(--accent); transition:width .25s ease;
}
.ns-link:hover::after, .ns-link.is-active::after{ width:100% }

/* =========================
   Hero
   ========================= */
.ns-hero{
  position:relative; min-height:86vh; display:grid; place-items:end;
  padding:2rem 1rem; border-bottom:1px solid var(--border);
}
.ns-hero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter: contrast(.95) saturate(.8) brightness(.9);
  opacity:.96; pointer-events:none;
}
.ns-hero__veil{ position:absolute; inset:0; background: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,.25), rgba(0,0,0,.85)); }
.ns-hero__content{ position:relative; max-width:1200px; width:100%; margin:0 auto; display:grid; gap:1rem }
.ns-kicker{ color:#fff; text-transform:uppercase; letter-spacing:.2em; font-size:.8rem }
.ns-title{ color:#fff; font-size:clamp(2.4rem,4.6vw,5rem); margin:0; line-height:.95; letter-spacing:.02em; text-transform:uppercase }
.ns-sub{ color:#fff; max-width:60ch }
.ns-btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 1.2rem; border:1px solid var(--border);
  text-decoration:none; color:#fff;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,0));
  border-radius:999px;
}
.ns-btn:hover{ border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent) }

/* =========================
   Sections
   ========================= */
.ns-section{ max-width:1200px; margin:0 auto; padding:3rem 1rem; border-bottom:1px solid var(--border) }
.ns-grid{ display:grid; gap:1.2rem; grid-template-columns:repeat(12,1fr) }

/* =========================
   Product page
   ========================= */
.ns-product{ display:grid; gap:2rem }
@media (min-width:960px){ .ns-product{ grid-template-columns:7fr 5fr; align-items:start } }

.ns-gallery{ border:1px solid var(--border); background:#0a0a0a }
.ns-gallery img{ width:100%; display:block; filter: contrast(.95) saturate(.85) }

.ns-buybox{
  position:sticky; top:5.5rem; border:1px solid var(--border);
  padding:1.2rem; border-radius:12px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}
.ns-buybox .ns-title{ color:#111 } /* readable on light image */

.ns-price{ font-size:1.25rem; margin:.25rem 0 1rem; color:var(--text) }
.ns-variant,.ns-qty{
  width:100%; padding:.6rem; background:transparent; color:var(--text);
  border:1px solid var(--border); border-radius:8px;
}
.ns-add{ margin-top:1rem; width:100%; padding:1rem;
  border:1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color:var(--text); border-radius:12px; cursor:pointer
}
.ns-add:hover{ background: color-mix(in srgb, var(--accent) 24%, transparent) }

/* --- Centered layout variants --- */
.ns-product--center { max-width: 980px; margin: 0 auto; }
.ns-gallery--centered { max-width: 720px; margin: 0 auto; }
.ns-buybox--centered { max-width: 640px; margin: 1.2rem auto 0; }

/* --- Thumbnails --- */
.ns-thumbs{ display:flex; gap:.5rem; justify-content:center; margin-top:.75rem; flex-wrap:wrap; background:#000; padding:.5rem; border-radius:.5rem }
.ns-thumbs .ns-thumb{ padding:0; border:0; background:transparent; cursor:pointer; border-radius:8px }
.ns-thumbs img{ width:72px; height:72px; object-fit:cover; display:block; border:1px solid var(--border); border-radius:8px; opacity:.85 }
.ns-thumbs .active img, .ns-thumb.active{ outline:2px solid var(--accent); opacity:1 }

/* =========================
   Size selector (pills)
   ========================= */
.ns-sizes{
  display:grid; grid-auto-flow: column; gap:.6rem;
  justify-content:center; align-items:center;
  margin:.75rem auto 1rem; width:100%; max-width:540px;
  border:1px solid var(--border); border-radius:10px;
  padding:.6rem; background: color-mix(in srgb, var(--bg) 96%, transparent);
}
.ns-sizes__legend{
  grid-column:1 / -1; justify-self:start;
  color:var(--muted); font-size:.8rem; margin-bottom:.25rem;
}

/* hide native radios; label acts as pill */
.ns-size-input{ position:absolute; left:-9999px }
.ns-size-pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; padding:.5rem .8rem;
  border:1px solid var(--border); border-radius:999px;
  color:var(--text); text-transform:uppercase; letter-spacing:.18em;
  font-weight:700; font-size:.8rem; cursor:pointer; user-select:none;
  transition: transform .05s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
  background:transparent;
}
.ns-size-pill:hover{ border-color:var(--accent) }
.ns-size-pill:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* ACTIVE STATE — via :checked + label (CSS) and JS (.is-active) */
.ns-size-input:checked + .ns-size-pill,
.ns-size-pill.is-active{
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 16%, transparent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent) !important;
  color:#000;
}

/* disabled option */
.ns-size-pill[aria-disabled="true"], .ns-size-pill--disabled{ opacity:.35; cursor:not-allowed }

/* === Add-to-cart mini wrap (qty + button) === */
.ns-addwrap{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  margin-top:.8rem; border:1px solid var(--border); border-radius:12px;
  padding:.8rem; background: color-mix(in srgb, var(--bg) 96%, transparent);
  width:100%; max-width:340px; margin-left:auto; margin-right:auto;
}
.ns-addwrap .ns-qty{
  width:4rem; text-align:center; background:transparent;
  color:var(--text); border:1px solid var(--border); border-radius:6px;
  padding:.4rem; font-weight:600;
}
.ns-addwrap .ns-add{
  flex:1; text-align:center; border-radius:8px;
  border:1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color:var(--text); font-weight:700; padding:.75rem; cursor:pointer;
}
.ns-addwrap .ns-add:hover{ background: color-mix(in srgb, var(--accent) 25%, transparent) }

/* =========================
   About page (brand-true typography)
   ========================= */
.ns-about, .ns-about *{
  font-family: var(--font-stack) !important;
  text-transform: uppercase; letter-spacing:.18em;
  font-weight:700; color:var(--text); line-height:1.9;
}
.ns-about p{
  text-transform:none; font-weight:500; letter-spacing:.05em;
  color:var(--text); opacity:.95; margin-bottom:1.2rem;
}

/* =========================
   Marquee text
   ========================= */
.ns-marquee, .ns-marquee *{
  font-family: var(--font-stack) !important;
  text-transform: uppercase; letter-spacing:.18em; font-weight:700; color:var(--text);
}

/* =========================
   Footer
   ========================= */
.ns-footer{ border-top:1px solid var(--border) }
.ns-footer__inner{ max-width:1200px; margin:0 auto; padding:2rem 1rem; display:grid; gap:1rem }
.ns-fine{ color:var(--muted); font-size:.85rem }
.ns-footer, .ns-footer__inner, .ns-footer *{
  font-family: var(--font-stack) !important;
  text-transform: uppercase; letter-spacing:.18em; font-weight:700; color:var(--text);
  font-size:.75rem; line-height:1.8;
}
.ns-footer a{ color:var(--accent); text-decoration:none }
.ns-footer a:hover{ color:var(--text); text-decoration:underline }

/* =========================
   Grunge utilities / surfaces
   ========================= */
.grunge-border{ position:relative }
.glitch:hover{ text-shadow:1px 0 var(--accent), -1px 0 #fff }

.grunge-surface{ position:relative; overflow:hidden }
.grunge-surface::before{
  content:""; position:absolute; inset:0;
  background-image:url("{{ 'grunge-texture.png' | asset_url }}");
  background-size:cover; background-repeat:no-repeat; background-position:center;
  opacity:.05; mix-blend-mode:multiply; pointer-events:none;
  animation: subtleFlicker 6s infinite ease-in-out;
}
.grunge-surface::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%);
  opacity:.25; pointer-events:none;
}
@keyframes subtleFlicker{ 0%,100%{opacity:.05} 50%{opacity:.08} }

/* =========================
   Cart
   ========================= */
.ns-cart{ display:grid; gap:1rem }
.ns-cart-row{
  display:grid; grid-template-columns:96px 1fr auto; gap:1rem; align-items:center;
  border:1px solid var(--border); padding:.75rem; border-radius:12px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}
.ns-cart-thumb img{
  width:96px; height:96px; object-fit:cover; display:block;
  border-radius:8px; border:1px solid var(--border);
}
.ns-cart-controls{ display:flex; align-items:center; gap:.5rem; margin-top:.35rem }
.ns-cart-lineprice{ font-weight:700; letter-spacing:.02em }
.ns-cart-summary{
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--border); padding-top:.75rem; margin-top:1rem;
}

/* Right-side price + remove stacked */
.ns-cart-right{
  display:flex; flex-direction:column; align-items:flex-end; gap:.4rem;
}

/* ===== Mobile fixes ===== */
html, body { overflow-x: hidden; }

/* Make any media truly full-width on phones */
.ns-hero, .ns-hero__bg, .ns-gallery, .ns-gallery img {
  max-width: 100vw;
}
img, video { max-width: 100%; height: auto; }

/* Phone breakpoint */
@media (max-width: 768px){
  /* Header: tighter grid, smaller gaps, smaller logo */
  .ns-header__inner{
    grid-template-columns: auto 1fr auto;
    gap: .5rem;
    padding: .5rem .75rem;
  }
  .ns-logo-img{ max-height: 34px; }
  .ns-brand{ font-size: .8rem; letter-spacing: .14em; }
  .ns-nav{ gap: .75rem; }
  .ns-link{ font-size: .8rem; letter-spacing: .14em; }
  .ns-link::after{ bottom: -3px; }

  /* Sections: reduce side padding so content breathes */
  .ns-section{ padding: 1.75rem .9rem; }

  /* Hero sizing and title scale */
  .ns-hero{ min-height: 70vh; padding: 1rem .9rem; }
  .ns-title{ font-size: clamp(1.8rem, 7vw, 3rem); }

  /* Product layout: stack columns; disable sticky buybox on mobile */
  .ns-product{ display: block; }
  .ns-buybox{ position: static; top: auto; margin-top: 1rem; }
  .ns-gallery--centered, .ns-buybox--centered{ max-width: 100%; }

  /* Thumbs smaller & wrap nicely */
  .ns-thumbs{ gap: .4rem; padding: .4rem; }
  .ns-thumbs img{ width: 64px; height: 64px; }

  /* Size pills: allow wrap & make pills easier to tap */
  .ns-sizes{
    grid-auto-flow: row;
    grid-template-columns: repeat( auto-fit, minmax(64px, 1fr) );
    gap: .5rem;
    padding: .55rem;
  }
  .ns-size-pill{
    min-height: 40px;
    padding: .45rem .65rem;
    font-size: .78rem;
    letter-spacing: .14em;
  }
  /* Transparent highlight overlay for selected size buttons */
.ns-sizes .ns-size-input:checked + .ns-size-pill,
.ns-sizes .ns-size-pill.is-active {
  position: relative;
  border-color: var(--accent) !important;
  border-width: 2px !important;
  color: var(--text) !important;
  background: transparent !important;
}

/* Add a glowing transparent overlay */
.ns-sizes .ns-size-input:checked + .ns-size-pill::after,
.ns-sizes .ns-size-pill.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  opacity: 0.4;
  pointer-events: none;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: opacity .2s ease;
}

  

  /* Add-to-cart wrap sizing */
  .ns-addwrap{ max-width: 100%; }
  .ns-addwrap .ns-qty{ width: 3.25rem; }

  /* Cart: tighter row + full-width actions */
  .ns-cart-row{
    grid-template-columns: 72px 1fr auto;
    padding: .6rem;
  }
  .ns-cart-thumb img{ width:72px; height:72px; }
  .ns-cart-summary{ padding-top: .6rem; }

  /* Footer text a touch smaller */
  .ns-footer, .ns-footer__inner, .ns-footer *{ font-size: .7rem; }
}

/* Safe-area padding for iOS notch when header is sticky */
@supports (padding: env(safe-area-inset-top)){
  .ns-header{ padding-top: env(safe-area-inset-top); }
}