/* =========================================================
   Northern Tint — Rolls Landing Page CSS (Standalone / Scoped)
   Version: v05 FULL REPLACE (fixed Dual Reflective tile background)
   Scope: ONLY applies inside .nt-rolls-root
   Matches homepage "feel" with NT orange accent (#ff7a18)
   ========================================================= */

/* ------------------------------
   Brand tokens (Homepage-matched)
------------------------------ */
.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;

  /* Hero image URL (your uploaded file) */
  --nt-hero-img: url("https://sep.turbifycdn.com/ty/cdn/yhst-58169358463758/rolls-landing-page-hero-pic.jpg");
}

/* ==========================================
   Hide default Turbify category H1 (ROLLS ONLY)
   The template renders: <div class="fsection-name"><h1>Window Tint Rolls</h1></div>
   We hide it only on this category page by scoping to the page wrapper id.
   ========================================== */
#ys_promocategory_catid-window-tint-rolls .fsection-name{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* If Turbify leaves extra spacing from the caption wrapper, tighten it */
#ys_promocategory_catid-window-tint-rolls .fsection-caption{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ------------------------------
   Hard scope + 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
------------------------------ */
.nt-rolls-root .nt-rolls__promo{
  width: 100%;
  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;
}

/* Orange underline anchor for section headings */
.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);
  opacity: 1;
}

.nt-rolls-root .nt-rolls__lead{
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--nt-sub);
  opacity: 1;
}

.nt-rolls-root .nt-rolls__bullets{
  margin: 14px 0 18px 18px;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--nt-sub);
}

.nt-rolls-root .nt-rolls__bullets li{ margin: 6px 0; }

.nt-rolls-root .nt-rolls__micro{
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--nt-sub);
  opacity: 0.95;
}

/* ------------------------------
   Buttons (Rolls-only, homepage feel)
------------------------------ */
.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--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: var(--nt-border-strong) !important;
  color: var(--nt-ink) !important;
  box-shadow: none !important;
}

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

/* ------------------------------
   Hero (now includes hero image overlay)
------------------------------ */
.nt-rolls-root .nt-rolls__hero{
  padding: 26px 0 18px 0;
  background: var(--nt-bg);
  position: relative;
  overflow: hidden;
}

/* Decorative hero image overlay (does NOT affect layout, no HTML changes needed) */
.nt-rolls-root .nt-rolls__hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,122,24,.14), rgba(255,122,24,0) 58%),
    var(--nt-hero-img);
  background-size: cover;
  background-position: 65% 50%;
  opacity: .22;  /* subtle, keeps it pro */
  pointer-events: none;
}

/* Keep hero content above the overlay */
.nt-rolls-root .nt-rolls__hero > *{
  position: relative;
  z-index: 1;
}

.nt-rolls-root .nt-rolls__hero-grid{
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 18px;
  align-items: start;
}

.nt-rolls-root .nt-rolls__cta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 0 0;
}

/* Hero side card */
.nt-rolls-root .nt-rolls__hero-card-inner{
  border: 1px solid var(--nt-border);
  border-radius: var(--nt-radius-lg);
  padding: 16px;
  box-shadow: var(--nt-shadow-soft);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(2px);
}

.nt-rolls-root .nt-rolls__badge{
  display: inline-block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--nt-accent);
  color: var(--nt-ink2);
  margin-bottom: 12px;
  box-shadow: 0 10px 20px rgba(255, 122, 24, 0.18);
}

.nt-rolls-root .nt-rolls__ladder{ display: grid; gap: 10px; }

.nt-rolls-root .nt-rolls__ladder-item{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--nt-border);
  background: rgba(255,255,255,.96);
}

.nt-rolls-root .nt-rolls__ladder-item--top{
  border-color: rgba(255,122,24,.65);
  box-shadow: 0 14px 30px rgba(255, 122, 24, 0.10);
}

.nt-rolls-root .nt-rolls__ladder-name{
  font-weight: 900;
  color: var(--nt-ink);
}

.nt-rolls-root .nt-rolls__ladder-note{
  font-size: 12.5px;
  color: var(--nt-sub);
  opacity: 1;
}

.nt-rolls-root .nt-rolls__hero-card-foot{
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--nt-sub);
  opacity: 0.95;
}

/* ------------------------------
   Application split
------------------------------ */
.nt-rolls-root .nt-rolls__split{
  padding: 18px 0 22px 0;
  background: var(--nt-bg);
}

.nt-rolls-root .nt-rolls__split-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Cards (Rolls-only) */
.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);
  opacity: 1;
}

/* ------------------------------
   Sections (soft panels = homepage flow)
------------------------------ */
.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 (Rolls-only)
------------------------------ */
.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;

  /* visual breathing room for badge */
  position: relative;
  padding-top: 46px;
}

/* Lightweight “icon-badge” (pure CSS, no new files) */
.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);
  opacity: 1;
}

.nt-rolls-root .nt-rolls-tile__body{
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--nt-sub);
  opacity: 1;
}

.nt-rolls-root .nt-rolls-tile__cta{
  margin-top: auto;
  font-weight: 900;
  font-size: 13px;
  color: var(--nt-ink);
}

/* Featured tile uses orange emphasis */
.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);
}

/* ------------------------------
   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);
  opacity: 1;
}

/* ------------------------------
   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);
  opacity: 1;
}

/* ==========================================
   Dual Reflective Tile — FULL BACKGROUND FIX
   (Overrides the base ::before/::after badge)
   Requires HTML class: .nt-rolls-tile--dual
   ========================================== */

.nt-rolls-root .nt-rolls-tile--dual{
  position: relative;
  overflow: hidden;
}

/* Full-tile background image overlay (must override 30x30 badge sizing) */
.nt-rolls-root .nt-rolls-tile--dual::before{
  content: "";
  position: absolute;
  inset: 0;

  /* Hard overrides so it cannot stay 30x30 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;

  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;
}

/* Rebuild the orange badge for this tile (replaces the base ::after dot) */
.nt-rolls-root .nt-rolls-tile--dual::after{
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  width: 30px;
  height: 30px;
  border-radius: 12px;

  /* badge + dot in one element */
  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;
}

/* Ensure tile content sits above background */
.nt-rolls-root .nt-rolls-tile--dual > *{
  position: relative;
  z-index: 1;
}

/* Slight visual lift on hover */
.nt-rolls-root .nt-rolls-tile--dual:hover::before{
  opacity: 0.28;
}

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

  /* Keep the hero overlay centered for smaller screens */
  .nt-rolls-root .nt-rolls__hero::before{
    background-position: 60% 50%;
  }
}

@media (max-width: 760px){
  .nt-rolls-root .nt-rolls__h1{ font-size: 28px; }
  .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)); }
}

@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; }
}