/* =========================================================
   Northern Tint — Rolls Landing Page CSS (Standalone / Scoped)
   Version: v18 (desktop hero image refinement for rolls image)
   Scope: ONLY applies inside .nt-rolls-root
   ========================================================= */

/* ------------------------------
   Brand tokens
------------------------------ */
.nt-rolls-root{
  --nt-accent: #ff7a18;
  --nt-ink: #0f172a;
  --nt-ink2: #111827;
  --nt-sub: #475569;

  --nt-border: rgba(15,23,42,.10);
  --nt-border-strong: rgba(15,23,42,.16);

  --nt-radius-lg: 18px;
  --nt-radius-md: 14px;

  --nt-shadow-soft: 0 10px 26px rgba(2,6,23,.06);
  --nt-shadow-mid: 0 14px 34px rgba(2,6,23,.08);

  --nt-bg: #ffffff;
  --nt-panel: #f6f7f9;
  --nt-panel-2: #f1f3f6;

  /* Responsive hero art direction */
  --nt-hero-img: url("https://sep.turbifycdn.com/ty/cdn/yhst-58169358463758/rolls-landing-page-image-01.webp");
  --nt-hero-position: center 48%;
}

/* Tablet hero image */
@media (max-width: 1024px){
  .nt-rolls-root{
    --nt-hero-img: url("https://sep.turbifycdn.com/ty/cdn/yhst-58169358463758/rolls-landing-page-image-02-tablet.webp");
    --nt-hero-position: center center;
  }
}

/* Mobile hero image */
@media (max-width: 760px){
  .nt-rolls-root{
    --nt-hero-img: url("https://sep.turbifycdn.com/ty/cdn/yhst-58169358463758/rolls-landing-page-image-03-mobile.webp");
    --nt-hero-position: center top;
  }
}

/* ==========================================
   Hide default Turbify category H1 (ROLLS ONLY)
========================================== */
#ys_promocategory_catid-window-tint-rolls .fsection-name{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#ys_promocategory_catid-window-tint-rolls .fsection-caption{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ------------------------------
   Baseline
------------------------------ */
.nt-rolls-root{ width: 100%; }
.nt-rolls-root .nt-rolls,
.nt-rolls-root .nt-rolls *{ box-sizing: border-box; }

.nt-rolls-root .nt-rolls{ color: var(--nt-ink); }

.nt-rolls-root .nt-rolls a{ text-decoration: none; }
.nt-rolls-root .nt-rolls img{ max-width: 100%; height: auto; }

.nt-rolls-root .nt-rolls__wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
}

/* ------------------------------
   Promo bar
   Full-bleed on desktop/laptop
------------------------------ */
.nt-rolls-root .nt-rolls__promo{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #0b0b0b;
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
}
.nt-rolls-root .nt-rolls__promo-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 18px;
  text-align: center;
}

/* ------------------------------
   Typography
------------------------------ */
.nt-rolls-root .nt-rolls__h1{
  margin: 0 0 10px 0;
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--nt-ink);
}
.nt-rolls-root .nt-rolls__h2{
  margin: 0 0 12px 0;
  font-size: 24px;
  line-height: 1.2;
  color: var(--nt-ink);
  position: relative;
  padding-bottom: 10px;
}
.nt-rolls-root .nt-rolls__h2::after{
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 999px;
  background: var(--nt-accent);
  margin-top: 10px;
}
.nt-rolls-root .nt-rolls__sub{
  margin: 0 0 14px 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--nt-sub);
}
.nt-rolls-root .nt-rolls__lead{
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--nt-sub);
}
.nt-rolls-root .nt-rolls__micro{
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--nt-sub);
  opacity: 0.95;
}

/* ------------------------------
   Buttons
------------------------------ */
.nt-rolls-root .nt-rolls-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 18px;
  border-radius: var(--nt-radius-md);
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 120ms ease, opacity 120ms ease;
}
.nt-rolls-root .nt-rolls-btn:hover{ transform: translateY(-1px); opacity: .96; }
.nt-rolls-root .nt-rolls-btn:active{ transform: translateY(0); opacity: .92; }
.nt-rolls-root .nt-rolls-btn:focus-visible{
  outline: 3px solid rgba(255,122,24,.55);
  outline-offset: 2px;
}

.nt-rolls-root .nt-rolls-btn--primary{
  background: var(--nt-accent) !important;
  color: var(--nt-ink2) !important;
  border-color: rgba(0,0,0,0.12) !important;
  box-shadow: 0 12px 22px rgba(255,122,24,0.18);
}

.nt-rolls-root .nt-rolls-btn--ghost{
  background: transparent !important;
  border-color: rgba(15,23,42,0.22) !important;
  color: var(--nt-ink) !important;
  box-shadow: none !important;
}

.nt-rolls-root .nt-rolls-btn--full{ width: 100%; }

/* =========================================================
   HERO — True full-bleed on desktop / art-directed by device
   ========================================================= */
.nt-rolls-root .nt-rolls__hero--bg{
  position: relative;
  width: 100vw;
  max-width: none;
  margin: 0 0 24px 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 42px 0;
  min-height: 320px;
  display: flex;
  align-items: center;

  background-image: var(--nt-hero-img);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--nt-hero-position);

  border-radius: 0;
  overflow: hidden;
}

/* Overlay tuned for text readability */
.nt-rolls-root .nt-rolls__hero--bg .nt-rolls__hero-overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.28) 45%, rgba(0,0,0,0.42) 100%),
    radial-gradient(circle at 50% 44%, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.28) 64%, rgba(0,0,0,0.48) 100%);
  z-index: 1;
  pointer-events: none;
}

.nt-rolls-root .nt-rolls__hero--bg .nt-rolls__hero-inner{
  position: relative;
  z-index: 2;
  width: min(1240px, 94%);
  margin: 0 auto;
  padding: 0 18px;
  display: flex;
  justify-content: center;
}

.nt-rolls-root .nt-rolls__hero--bg .nt-rolls__hero-box{
  width: min(620px, 100%);
  padding: 24px 24px 22px;
  margin: 0 auto;
  text-align: center;

  background: rgba(10,12,16,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.22);
  backdrop-filter: blur(8px);
  color: #fff;
}

.nt-rolls-root .nt-rolls__hero--bg .nt-rolls__hero-h1{
  margin: 0 0 10px 0;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.00;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
}

.nt-rolls-root .nt-rolls__hero--bg .nt-rolls__hero-sub{
  margin: 0 0 18px 0;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  opacity: 0.96;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.nt-rolls-root .nt-rolls__hero--bg .nt-rolls__hero-cta{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  flex-wrap: wrap;
}

@media (min-width: 861px){
  .nt-rolls-root .nt-rolls__hero--bg .nt-rolls__hero-cta{
    flex-wrap: nowrap;
  }
  .nt-rolls-root .nt-rolls__hero--bg .nt-rolls__hero-cta .nt-rolls-btn{
    width: auto;
    min-width: 250px;
  }
}

.nt-rolls-root .nt-rolls__hero--bg .nt-rolls-btn--ghost{
  border-color: rgba(255,255,255,0.62) !important;
  color: #fff !important;
}

/* ------------------------------
   Application split
------------------------------ */
.nt-rolls-root .nt-rolls__split{
  padding: 24px 0 22px 0;
  background: var(--nt-bg);
}
.nt-rolls-root .nt-rolls__split-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.nt-rolls-root .nt-rolls-card{
  border: 1px solid var(--nt-border);
  border-radius: var(--nt-radius-lg);
  padding: 16px;
  background: #fff;
  box-shadow: var(--nt-shadow-soft);
}
.nt-rolls-root .nt-rolls-card__h3{
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 900;
  color: var(--nt-ink);
}
.nt-rolls-root .nt-rolls-card__p{
  margin: 0 0 14px 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--nt-sub);
}

/* ------------------------------
   Sections
------------------------------ */
.nt-rolls-root .nt-rolls__section{
  padding: 28px 0;
  background: var(--nt-panel);
}
.nt-rolls-root .nt-rolls__section--alt{
  background: var(--nt-panel-2);
}
.nt-rolls-root .nt-rolls__section-head{ margin-bottom: 14px; }

/* ------------------------------
   Tiles
------------------------------ */
.nt-rolls-root .nt-rolls-tiles{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.nt-rolls-root .nt-rolls-tile{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: var(--nt-radius-lg);
  border: 1px solid var(--nt-border);
  background: #fff;
  text-decoration: none !important;
  color: var(--nt-ink) !important;
  box-shadow: var(--nt-shadow-soft);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  position: relative;
  padding-top: 46px;
}
.nt-rolls-root .nt-rolls-tile::before{
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  width: 30px;
  height: 30px;
  border-radius: 12px;
  background: rgba(255,122,24,.14);
  border: 1px solid rgba(255,122,24,.32);
}
.nt-rolls-root .nt-rolls-tile::after{
  content: "";
  position: absolute;
  top: 24px;
  left: 27px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,122,24,.88);
}
.nt-rolls-root .nt-rolls-tile:hover{
  transform: translateY(-2px);
  box-shadow: var(--nt-shadow-mid);
  border-color: rgba(15,23,42,.14);
}
.nt-rolls-root .nt-rolls-tile__top{ display: grid; gap: 2px; }
.nt-rolls-root .nt-rolls-tile__title{
  font-weight: 900;
  font-size: 15px;
  color: var(--nt-ink);
}
.nt-rolls-root .nt-rolls-tile__tag{
  font-size: 12.5px;
  color: var(--nt-sub);
}
.nt-rolls-root .nt-rolls-tile__body{
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--nt-sub);
}
.nt-rolls-root .nt-rolls-tile__cta{
  margin-top: auto;
  font-weight: 900;
  font-size: 13px;
  color: var(--nt-ink);
}
.nt-rolls-root .nt-rolls-tile--featured{
  border-color: rgba(255,122,24,.70);
  box-shadow: 0 16px 38px rgba(255,122,24,0.14);
}
.nt-rolls-root .nt-rolls-tile--featured:hover{
  border-color: rgba(255,122,24,.85);
  box-shadow: 0 18px 44px rgba(255,122,24,0.18);
}

/* Dual Reflective */
.nt-rolls-root .nt-rolls-tile--dual{
  position: relative;
  overflow: hidden;
}
.nt-rolls-root .nt-rolls-tile--dual::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,122,24,0.18), rgba(15,23,42,0.10) 60%),
    url("https://sep.turbifycdn.com/ty/cdn/yhst-58169358463758/rolls-landing-page-dual-reflective.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.nt-rolls-root .nt-rolls-tile--dual::after{
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  width: 30px;
  height: 30px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,122,24,.88) 0 3.5px, transparent 4px),
    rgba(255,122,24,.14);
  border: 1px solid rgba(255,122,24,.32);
  pointer-events: none;
  z-index: 2;
}
.nt-rolls-root .nt-rolls-tile--dual > *{
  position: relative;
  z-index: 1;
}
.nt-rolls-root .nt-rolls-tile--dual:hover::before{
  opacity: 0.28;
}

/* ------------------------------
   Trust section
------------------------------ */
.nt-rolls-root .nt-rolls__trust{
  padding: 26px 0;
  background: var(--nt-bg);
}
.nt-rolls-root .nt-rolls__trust-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.nt-rolls-root .nt-rolls-trust{
  border: 1px solid var(--nt-border);
  border-radius: var(--nt-radius-lg);
  padding: 14px;
  background: #fff;
  box-shadow: var(--nt-shadow-soft);
}
.nt-rolls-root .nt-rolls-trust__title{
  font-weight: 900;
  margin-bottom: 6px;
  color: var(--nt-ink);
}
.nt-rolls-root .nt-rolls-trust__text{
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--nt-sub);
}

/* ------------------------------
   SEO section
------------------------------ */
.nt-rolls-root .nt-rolls__seo{
  padding: 26px 0 36px 0;
  background: var(--nt-panel);
}
.nt-rolls-root .nt-rolls__seo-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.nt-rolls-root .nt-rolls-seo{
  border: 1px solid var(--nt-border);
  border-radius: var(--nt-radius-lg);
  padding: 16px;
  background: #fff;
  box-shadow: var(--nt-shadow-soft);
}
.nt-rolls-root .nt-rolls-seo__h3{
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 900;
  color: var(--nt-ink);
}
.nt-rolls-root .nt-rolls-seo__p{
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--nt-sub);
}

/* ------------------------------
   Responsive
------------------------------ */
@media (max-width: 1100px){
  .nt-rolls-root .nt-rolls-tiles{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tablet / small laptop */
@media (max-width: 1024px){
  .nt-rolls-root .nt-rolls__hero--bg{
    min-height: 300px;
    padding: 30px 0;
  }
  .nt-rolls-root .nt-rolls__hero--bg .nt-rolls__hero-h1{
    font-size: clamp(30px, 4.8vw, 46px);
  }
  .nt-rolls-root .nt-rolls__hero--bg .nt-rolls__hero-sub{
    font-size: 15px;
  }
}

/* Mobile: contained hero, mobile-specific image */
@media (max-width: 760px){
  .nt-rolls-root .nt-rolls__split-grid{ grid-template-columns: 1fr; }
  .nt-rolls-root .nt-rolls__trust-grid{ grid-template-columns: 1fr 1fr; }
  .nt-rolls-root .nt-rolls__seo-grid{ grid-template-columns: 1fr; }
  .nt-rolls-root .nt-rolls-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .nt-rolls-root .nt-rolls__promo{
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .nt-rolls-root .nt-rolls__hero--bg{
    width: auto;
    min-height: 250px;
    padding: 24px 0;
    margin: 10px 12px 18px;
    margin-left: 12px;
    margin-right: 12px;
    border-radius: 16px;
  }

  .nt-rolls-root .nt-rolls__hero--bg .nt-rolls__hero-inner{
    width: 100%;
    padding: 0 14px;
    justify-content: center;
  }

  .nt-rolls-root .nt-rolls__hero--bg .nt-rolls__hero-box{
    width: 100%;
    padding: 18px 16px 16px;
    border-radius: 16px;
    backdrop-filter: blur(6px);
    text-align: center;
  }

  .nt-rolls-root .nt-rolls__hero--bg .nt-rolls__hero-h1{
    font-size: clamp(28px, 9vw, 40px);
    line-height: 1.04;
  }

  .nt-rolls-root .nt-rolls__hero--bg .nt-rolls__hero-sub{
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 16px;
  }

  .nt-rolls-root .nt-rolls__hero--bg .nt-rolls__hero-cta{
    flex-wrap: wrap;
  }

  .nt-rolls-root .nt-rolls__hero--bg .nt-rolls__hero-cta .nt-rolls-btn{
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 420px){
  .nt-rolls-root .nt-rolls-tiles{ grid-template-columns: 1fr; }
  .nt-rolls-root .nt-rolls__promo-inner{ font-size: 12px; }
  .nt-rolls-root .nt-rolls__h2::after{ width: 54px; }
}

/* =========================================================
   FORCE HIDE DEFAULT TURBIFY PAGE TITLE (ROLLS PAGE ONLY)
   ========================================================= */
.fsection-name,
.fsection-name h1,
.section-name,
.section-name h1{
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.fsection-caption{
  margin-top: 0 !important;
  padding-top: 0 !important;
}