/** Shopify CDN: Minification failed

Line 364:0 Unexpected "}"

**/
/* ==================================================
   NO SH!T™ — CUSTOM OVERRIDES (CLEAN + SINGLE SOURCE)
   Put this in Assets/custom.css and load after base.css
   ================================================== */

/* ---------- Variables ---------- */
:root{
  --ns-bg:#000;
  --ns-fg:#fff;
  --ns-text: rgba(255,255,255,.86);
  --ns-muted: rgba(255,255,255,.70);
  --ns-border: rgba(255,255,255,.12);
  --ns-soft: rgba(255,255,255,.06);

  --ns-max: 1120px;

  /* Typography */
  --ns-font: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --ns-h1: clamp(40px, 6vw, 64px);
  --ns-h2: clamp(30px, 4.2vw, 44px);
  --ns-h3: 20px;

  --ns-body: 16px;
  --ns-body-sm: 15px;
  --ns-line: 1.65;

  /* Sticky header offset helper (used for anchor scroll) */
  --header-height: 80px;
}

html, body { background: var(--ns-bg); }

/* ---------- Global typography ---------- */
body,
.shopify-section,
.button,
.shopify-payment-button__button,
.header__menu-item,
input, textarea, select{
  font-family: var(--ns-font) !important;
  font-size: var(--ns-body);
  line-height: var(--ns-line);
  color: var(--ns-fg);
  background: var(--ns-bg);
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--ns-font) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: var(--ns-fg) !important;
  margin: 0 0 0.6em;
}

h1{ font-size: var(--ns-h1); }
h2{ font-size: var(--ns-h2); }
h3{ font-size: var(--ns-h3); }

p, li, .rte p, .rte li{
  font-size: var(--ns-body);
  line-height: var(--ns-line);
  color: var(--ns-text);
}

.rte, .rte p, .rte li { opacity: 1 !important; }

/* Kill Dawn gradients if you’re running full-black */
.gradient { background: var(--ns-bg) !important; }

/* ---------- Header ---------- */
.header-wrapper, .header, .header__inline-menu, .header__icons {
  background: transparent !important;
}
.header { padding-top: 8px !important; padding-bottom: 8px !important; }

/* Hide search icon + search area */
.header__search,
.header__icon--search {
  display: none !important;
}

/* ---------- Anchor offset (for sticky header) ---------- */
#faq, #contact, #the-start { scroll-margin-top: 120px; }
.ns-anchor { scroll-margin-top: calc(var(--header-height) + 16px); }

/* ---------- Scrollspy active menu ---------- */
.header__menu-item.is-active,
.header__active-menu-item.is-active {
  color: #fff !important;
  text-decoration: none !important;
  position: relative;
}
.header__menu-item.is-active::after,
.header__active-menu-item.is-active::after {
  content: "";
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 0.6rem;
  height: 2px;
  background: rgba(255,255,255,.95);
  border-radius: 999px;
  opacity: 0.9;
}
.header__menu-item { opacity: 0.75; }
.header__menu-item:hover { opacity: 1; }

/* ---------- Hero (optional, if you use it) ---------- */
.ns-hero{
  position: relative;
  padding: clamp(36px, 6vw, 90px) 0;
  background: var(--ns-bg);
  overflow: hidden;
}
.ns-hero__bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 15% 35%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(900px 520px at 85% 40%, rgba(255,255,255,.06), transparent 60%);
  pointer-events:none;
}
.ns-hero__inner{
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
}
@media (max-width: 990px){
  .ns-hero__inner{ grid-template-columns: 1fr; }
}
.ns-hero__content{ max-width: 640px; }
.ns-hero__eyebrow{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  margin: 0 0 14px;
}
.ns-hero__heading{
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
  margin: 0 0 12px;
  color: rgba(255,255,255,.96);
}
.ns-hero__subheading{
  font-size: 18px;
  line-height: 1.6;
  max-width: 56ch;
  color: rgba(255,255,255,.80);
  margin: 0 0 18px;
}
.ns-hero__note{
  margin: 0 0 22px;
  font-size: 15px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,.88);
}
.ns-hero__ctas{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin: 0 0 18px;
}
.ns-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  font-weight: 800;
  text-decoration:none;
  transition: transform 120ms ease;
  font-size: 14px;
  line-height: 1;
}
.ns-btn:hover{ transform: translateY(-1px); }
.ns-btn--primary{
  background: rgba(255,255,255,.95);
  color: #0b0b0c;
  border: 1px solid rgba(255,255,255,.15);
}
.ns-btn--ghost{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.14);
}

/* Hero media supports image OR video */
.ns-hero__media{ display:flex; justify-content:center; }
.ns-hero__imageWrap{
  position: relative;
  width: min(420px, 92%);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.04);
  overflow: hidden;
  box-shadow: 0 20px 80px rgba(0,0,0,.55);
  aspect-ratio: 4 / 5;
}
.ns-hero__image{ width:100%; height:auto; padding:24px; display:block; }
.ns-hero__video{ width:100%; height:100%; display:block; object-fit: cover; }

/* ---------- Sections polish (cards / multicolumn default) ---------- */
.collection__title .title,
.title-wrapper-with-link .title{
  color: rgba(255,255,255,.96) !important;
}
.card__heading, .card__information a{
  color: rgba(255,255,255,.92) !important;
}
.card-information, .price{
  color: rgba(255,255,255,.76) !important;
}
.card--standard > .card__content{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px;
}

/* ---------- NS EDUCATION SECTION ---------- */
.ns-edu{
  background: #000;
  color: #fff;
  padding: clamp(56px, 7vw, 92px) 0;
  border-top: 1px solid var(--ns-border);
  border-bottom: 1px solid var(--ns-border);
  position: relative;
  overflow: hidden;
}
.ns-edu::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 15% 35%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(900px 520px at 85% 40%, rgba(255,255,255,.04), transparent 60%);
  pointer-events:none;
}
.ns-edu__wrap{
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}
.ns-edu__kicker{
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ns-muted);
}
.ns-edu__heading{
  margin: 0 0 16px;
  font-size: var(--ns-h2);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 800;
}
.ns-edu__body{
  max-width: 70ch;
  color: var(--ns-text);
}
.ns-edu__body.rte,
.ns-edu__body.rte p,
.ns-edu__body.rte li{ opacity: 1 !important; }

.ns-edu__body p{ margin: 0 0 12px !important; }
.ns-edu__body strong{ color: rgba(255,255,255,.92); font-weight: 700; }

/* Education bullets — single clean system */
.ns-edu__body ul{
  list-style: disc !important;
  list-style-position: outside !important;
  margin: 14px 0 18px !important;
  padding-left: 1.25rem !important;
}
.ns-edu__body li{
  margin: 0 0 10px !important;
  padding-left: 0 !important;
}
.ns-edu__body li::before{ content: none !important; }
.ns-edu__body li p{ margin: 0 !important; }

.ns-edu__closer{
  margin-top: 18px;
  font-weight: 800;
  color: #fff;
}

/* Mobile */
@media (max-width: 749px){
  .ns-edu{ padding: 52px 0; }
  .ns-edu .page-width{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .ns-edu__heading{
    font-size: 30px !important;
    line-height: 1.05 !important;
  }
  .ns-edu__body,
  .ns-edu__body p,
  .ns-edu__body li{
    font-size: var(--ns-body-sm) !important;
    line-height: 1.7 !important;
  }
}

/* ---------- NS INGREDIENTS SECTION ---------- */
.ns-ing{
  background: #000;
  color: #fff;
  padding: clamp(56px, 7vw, 92px) 0;
  border-top: 1px solid var(--ns-border);
  border-bottom: 1px solid var(--ns-border);
}
.ns-ing__wrap{ max-width: 1100px; margin: 0 auto; }
.ns-ing__head{ margin-bottom: 22px; text-align: left; }
.ns-ing__kicker{
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ns-muted);
}
.ns-ing__heading{
  margin: 0 0 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: var(--ns-h2);
}
.ns-ing__subheading{
  margin: 0;
  color: var(--ns-muted);
  max-width: 70ch;
  line-height: 1.65;
  font-size: 16px;
}
.ns-ing__grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  align-items: stretch;
}
.ns-ingCard {
  grid-column: span 4; /* This creates 3 columns (12 / 4 = 3) */
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  border-radius: 24px;
  padding: 24px; /* Increased slightly for the images */
  display: flex;
  flex-direction: column;
}
}
.ns-ingCard__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.ns-ingCard__title{
  margin:0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.ns-ingTag{
  font-size: 12px;
  color: var(--ns-muted);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.ns-ingCard__body{
  color: var(--ns-muted);
  font-size: 14px;
  line-height: 1.55;
}
.ns-ingCard__body p{ margin:0; }

.ns-ingAcc{ grid-column: span 12; margin-top: 2px; }
.ns-ingAcc__details{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}
.ns-ingAcc__summary{
  cursor:pointer;
  padding: 14px 16px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  font-weight: 800;
  list-style:none;
}
.ns-ingAcc__summary::-webkit-details-marker{ display:none; }
.ns-ingAcc__chev{ opacity:.7; font-weight:800; }
.ns-ingAcc__content{
  padding: 0 16px 14px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.78);
}
.ns-ingAcc__content p{ margin: 10px 0 0; }

.ns-ingCtas{
  grid-column: span 12;
  display:flex;
  gap:10px;
  margin-top: 4px;
}
.ns-ingNote{
  grid-column: span 12;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  padding: 14px 16px;
  color: var(--ns-text);
  font-size: 14px;
  line-height: 1.65;
}
.ns-ingNote p{ margin:0; }
.ns-ingNote strong{ font-weight: 800; }
.ns-ing__footer{
  margin: 18px 0 0;
  color: var(--ns-muted);
  font-size: 13px;
  line-height: 1.6;
  max-width: 80ch;
}

@media (max-width: 749px){
  .ns-ing{ padding: 52px 0; }
  .ns-ing .page-width{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .ns-ingCard{ grid-column: span 12; }
  .ns-ingCtas{ flex-direction: column; }
  .ns-btn{ width: 100%; }
}

/* ---------- NS MULTICOLUMN “WHY IT WORKS” (requires wrapper class ns-mc) ---------- */
.multicolumn.ns-mc .page-width{
  max-width: 1100px;
  margin-left:auto;
  margin-right:auto;
}
.multicolumn.ns-mc .title-wrapper-with-link{
  display:block !important;
  text-align:left !important;
  margin-bottom: 26px !important;
}
@media (min-width: 990px){
  .multicolumn.ns-mc .multicolumn-list{
    display:grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap:16px !important;
  }
  .multicolumn.ns-mc .multicolumn-list__item{
    width:100% !important;
    max-width:none !important;
    justify-self:stretch !important;
    align-self:stretch !important;
  }
  .multicolumn.ns-mc .multicolumn-card.content-container{
    width:100% !important;
    max-width:none !important;
    height:100% !important;
    border:1px solid rgba(255,255,255,0.08) !important;
    background: rgba(255,255,255,0.02) !important;
    border-radius:24px !important;
    padding:18px 18px 16px !important;
    box-shadow:none !important;
  }
}
.multicolumn.ns-mc .multicolumn-card__info h3{
  margin:0 0 8px 0 !important;
  font-size:18px !important;
  font-weight:800 !important;
  letter-spacing:-0.01em !important;
}
.multicolumn.ns-mc .multicolumn-card__info .rte{
  color: rgba(255,255,255,.72) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}
.multicolumn.ns-mc .multicolumn-card__info .rte p{
  margin:0 0 10px 0 !important;
}
.multicolumn.ns-mc .multicolumn-card__info .rte p:last-child{
  margin-bottom:0 !important;
}
/* =====================================================
   PRODUCT PAGE — CLEAN, CONTROLLED (WORKING VERSION)
   ===================================================== */

/* White background only for this product template */
body.template-product-no-shit-oil{
  background:#fff;
  color:#000;
}

body.template-product-no-shit-oil .gradient,
body.template-product-no-shit-oil .color-background-1{
  background:#fff !important;
}

/* Ensure text is black */
body.template-product-no-shit-oil .product__info-wrapper,
body.template-product-no-shit-oil .product__media-wrapper,
body.template-product-no-shit-oil .product__description,
body.template-product-no-shit-oil .rte,
body.template-product-no-shit-oil .price,
body.template-product-no-shit-oil .product__title,
body.template-product-no-shit-oil .accordion,
body.template-product-no-shit-oil .accordion summary,
body.template-product-no-shit-oil .accordion__content{
  color:#000 !important;
}

/* PRODUCT TITLE — FIXED (this is the good part you liked) */
body.template-product-no-shit-oil .product__title,
body.template-product-no-shit-oil .product__title h1,
body.template-product-no-shit-oil h1.product__title{
  font-size: clamp(1.8rem, 2.8vw, 2.6rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.015em !important;
  font-weight: 800 !important;
  margin: 0 0 10px !important;
  max-width: 16ch;
  text-wrap: balance;
}

/* Mobile title */
@media (max-width: 749px){
  body.template-product-no-shit-oil .product__title,
  body.template-product-no-shit-oil .product__title h1,
  body.template-product-no-shit-oil h1.product__title{
    font-size: clamp(1.7rem, 6.5vw, 2.2rem) !important;
    line-height: 1.1 !important;
    max-width: 18ch;
  }
}

/* Price spacing */
body.template-product-no-shit-oil .price{
  margin-top: 8px !important;
  margin-bottom: 10px !important;
}

body.template-product-no-shit-oil .price-item{
  font-size: 1.05rem !important;
  opacity: 0.9;
}

/* Accordions */
body.template-product-no-shit-oil .accordion{
  border-top: 1px solid rgba(0,0,0,.12) !important;
  border-bottom: 1px solid rgba(0,0,0,.12) !important;
  padding: 14px 0 !important;
}

body.template-product-no-shit-oil .accordion summary{
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}

body.template-product-no-shit-oil .accordion__content{
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
}

/* =====================================================
   FULL-WIDTH DIVIDER ABOVE FOOTER (ALL PAGES)
   ===================================================== */

#shopify-section-footer{
  position: relative !important;
}

#shopify-section-footer::before{
  content:"";
  display:block;
  height:1px;
  width:100vw;
  background: rgba(255,255,255,0.12);
  margin-top: 56px;

  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

#shopify-section-footer .footer,
#shopify-section-footer .ns-footer{
  padding-top: 44px !important;
}

@media (max-width: 749px){
  #shopify-section-footer::before{
    margin-top: 40px;
  }
  #shopify-section-footer .footer,
  #shopify-section-footer .ns-footer{
    padding-top: 36px !important;
  }
}
/* Product title – refined, slightly larger */
.product__title h1{
  font-size: clamp(3.1rem, 3.6vw, 3.8rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.015em !important;
  font-weight: 800 !important;
}

/* Mobile */
@media (max-width: 749px){
  .product__title h1{
    font-size: clamp(3.0rem, 6.5vw, 3.4rem) !important;
    line-height: 1.1 !important;
  }
}
/* =====================================================
   FIX: Product description not showing (white on white)
   Only affects the NO SH!T oil template + your image section
   ===================================================== */
body.template-product-no-shit-oil .ns-product-image{
  background:#fff !important;
}

body.template-product-no-shit-oil .ns-product-image .ns-product-desc,
body.template-product-no-shit-oil .ns-product-image .ns-product-desc *{
  color:#000 !important;
}

body.template-product-no-shit-oil .ns-product-image .ns-product-desc a{
  color:#000 !important;
  text-decoration: underline;
  text-underline-offset: .2em;
}

