/* ============================================================
   UsefulIndicators — shared product-page layout
   One source of truth for every indicator/add-on product page.
   Loaded by base.njk only when a page sets `productName`.
   Page-specific spacing stays as inline styles in each page.
   ============================================================ */

/* ── Hero image slider ── */
.np-hero{
  position:relative; max-width:1180px; margin:0 auto;
  border-radius:0 0 8px 8px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.3); border-top:none;
  box-shadow:0 0 32px rgba(255,255,255,0.045);
  aspect-ratio:2560 / 1409; background:#0a0a0a;
  user-select:none;
}
.np-slide{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
}
.np-slide.active{ opacity:1; }
.np-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:42px; height:48px; display:flex; align-items:center; justify-content:center;
  background:#0e0e0e;
  border:none; color:#fff; cursor:pointer; opacity:1;
  transition:background .18s ease, color .18s ease;
}
.np-hero:hover .np-arrow{ opacity:1; }
.np-arrow svg{ display:block; width:27px; height:27px; }
.np-arrow:hover{ background:#fff; color:#111; }
.np-arrow:focus-visible{ outline:2px solid #fff; outline-offset:-4px; }
.np-prev{ left:0; border-radius:0 10px 10px 0; }
.np-next{ right:0; border-radius:10px 0 0 10px; }
.np-counter{
  position:absolute; top:0; right:0; z-index:3;
  height:35px; display:flex; align-items:center;
  font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:1px; color:#fff;
  background:#0e0e0e; border:none; border-radius:0 0 0 10px; padding:0 16px;
}

/* ── Back-to link (left margin of hero) ── */
.np-back{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:0;
  color:rgba(240,240,240,0.7); text-decoration:none; white-space:nowrap;
  transition:color .2s ease;
}
.np-back:hover{ color:#fff; }
.np-back span{
  display:inline-flex; align-items:center; line-height:1;
  font-family:var(--sans); font-size:15px; transform:translateY(-1px);
  -webkit-text-stroke:0.5px #fff;
}
/* Below ~1550px the hero's left margin vanishes and the absolutely-positioned
   back link (inline style on every product page) collides with the
   buyer-guarantee ribbon. Drop it into normal flow above the hero instead.
   The !important is required to beat the inline position:absolute.
   >=1550px keeps the 1920 master layout untouched. */
@media (max-width:1549px){
  .np-back{
    position:static !important;
    margin:0 0 10px 2px;
  }
}

/* ── Buyer-guarantee ribbon (fused to top of hero) ── */
.np-guarantee{
  display:flex; align-items:stretch; margin:0; overflow:hidden;
  background:rgba(8,8,8,0.78);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,0.3); border-radius:8px 8px 0 0;
}
.np-guarantee-label{
  flex-shrink:0; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:1.6px;
  text-transform:uppercase; color:#fff;
  padding:7px 20px; background:rgba(232,33,42,0.12);
  border-right:1px solid rgba(255,255,255,0.14);
}
.np-feats{ display:flex; gap:0; flex:1; }
.np-chip{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-size:10.5px; font-weight:500; letter-spacing:0.6px;
  text-transform:uppercase; color:rgba(240,240,240,0.8); white-space:nowrap;
  padding:7px 8px; border-right:1px solid rgba(255,255,255,0.08);
}
.np-chip:last-child{ border-right:none; }
.np-chip-check{
  flex-shrink:0; color:#E8212A; font-size:11px; font-weight:800; line-height:1;
}

/* ── Body copy ── */
.np-desc{
  font-family:var(--sans); font-size:13px; line-height:1.9;
  color:rgba(240,240,240,0.85); margin:0 0 18px;
}
.np-desc:last-child{ margin-bottom:0; }

/* ── Comprehensive grouped spec sheet (2 columns) ── */
.np-spec{ margin:0; }
.np-spec > div{
  display:flex; justify-content:space-between; gap:18px;
  padding:6px 12px; border-radius:5px;
}
.np-spec > div:nth-child(odd){ background:rgba(255,255,255,0.04); }
.np-spec dt{
  font-family:var(--sans); font-size:13px; font-weight:400; color:rgba(240,240,240,0.6);
  flex-shrink:0;
}
.np-spec dd{
  font-family:var(--sans); font-size:13px; font-weight:400; color:rgba(240,240,240,0.9);
  text-align:right; margin:0;
}
.np-spec-cols{ display:grid; grid-template-columns:1fr 1px 1fr; column-gap:42px; align-items:stretch; }
.np-spec-divider{ background:rgba(255,255,255,0.1); }
.np-spec-group{
  font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:1.6px;
  text-transform:uppercase; color:#E8212A; margin:24px 0 9px; padding:0 4px;
  display:flex; align-items:center; gap:9px;
}
.np-spec-group::after{ content:''; flex:1; height:1px; background:rgba(232,33,42,0.18); }
.np-spec-group.first{ margin-top:0; }
@media(max-width:768px){ .np-spec-cols{ grid-template-columns:1fr; } .np-spec-divider{ display:none; } }

/* ── Feature showcase strip (4 images + captions below) ── */
.np-show-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:0;
}
.np-show-strip img{
  width:100%; aspect-ratio:2450/1306; object-fit:cover; display:block;
  border-radius:8px; border:1px solid rgba(255,255,255,0.22);
  box-shadow:0 6px 22px rgba(0,0,0,0.45);
}
.np-show-caps{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:14px; }
.np-show-cap{ text-align:center; }
.np-show-t{ display:block; font-family:var(--sans); font-size:15px; font-weight:700; color:#fff; }
.np-show-d{ display:block; font-family:var(--sans); font-size:12px; color:rgba(240,240,240,0.6); margin-top:3px; line-height:1.4; }

/* ── "Built for…" bold-lead use cases (Description tab) ── */
.np-built{ display:flex; flex-direction:column; gap:15px; margin:0 0 30px; }
.np-built p{ font-family:var(--sans); font-size:13px; line-height:1.7; color:rgba(240,240,240,0.8); margin:0; }
.np-built b{ color:#fff; font-weight:700; }

/* ── Settings screenshots (Settings tab) ── */
.np-settings-shots{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:4px 0 6px; }
.np-settings-shots.np-shots-3{ grid-template-columns:1fr 1fr 1fr; align-items:start; }
.np-settings-shots figure{ margin:0; }
.np-settings-shots img{
  width:100%; height:auto; display:block; border-radius:8px;
  border:1px solid rgba(255,255,255,0.22); box-shadow:0 6px 22px rgba(0,0,0,0.45);
}
.np-settings-shots figcaption{
  font-family:var(--sans); font-size:11.5px; color:rgba(240,240,240,0.55);
  text-align:center; margin-top:9px; line-height:1.4;
}

/* ── What's-included icon cards (Installation tab) ── */
.np-incl-cards{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.np-incl-card{
  display:flex; align-items:center; gap:14px; padding:15px 17px;
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.1); border-radius:9px;
}
.np-incl-ico{
  flex-shrink:0; width:36px; height:36px; border-radius:8px;
  background:rgba(232,33,42,0.12); display:flex; align-items:center; justify-content:center;
}
.np-incl-ico svg{ width:18px; height:18px; stroke:#E8212A; fill:none; }
.np-incl-card span{ font-family:var(--sans); font-size:13px; font-weight:600; color:rgba(240,240,240,0.92); line-height:1.4; }

/* ── Video caption (Video tab) ── */
.np-vid-cap{ font-family:var(--sans); font-size:12.5px; color:rgba(240,240,240,0.55); text-align:center; margin:14px 0 0; }

/* ── Installation footer note ── */
/* ── Installation tab: 2x2 aligned section grid + spec-sheet-style striped rows ── */
.np-inst-grid{ display:grid; grid-template-columns:1fr 1px 1fr; column-gap:42px; row-gap:32px; align-items:start; }
.np-inst-div{ grid-column:2; grid-row:1 / 3; background:rgba(255,255,255,0.1); height:100%; }
.np-rows{ margin:0; }
.np-rows > div{
  display:flex; gap:12px; padding:8px 12px; border-radius:5px;
  font-family:var(--sans); font-size:13px; line-height:1.55; color:rgba(240,240,240,0.85);
}
.np-rows > div:nth-child(odd){ background:rgba(255,255,255,0.04); }
.np-rows .np-row-n{ flex-shrink:0; color:#E8212A; font-weight:800; font-size:12px; margin-top:1px; }
.np-rows p{ margin:0; }
.np-rows b{ color:#fff; font-weight:600; }
.np-setup-note{ font-family:var(--sans); font-size:12.5px; color:rgba(240,240,240,0.6); margin:24px 0 0; padding-top:18px; border-top:1px solid rgba(255,255,255,0.08); }
.np-setup-note a{ color:#E8212A; }

/* ── Section divider inside a tab panel ── */
.np-section-rule{ height:1px; background:rgba(255,255,255,0.14); margin:32px 0 28px; }

/* ── Section header (eyebrow + title + intro) ── */
.np-edge-head{ text-align:center; max-width:680px; margin:0 auto; }
.np-eyebrow{ font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:#E8212A; margin-bottom:14px; }
.np-edge-title{ font-family:var(--sans); font-size:clamp(24px,2.6vw,34px); font-weight:800; color:#fff; letter-spacing:-0.5px; line-height:1.15; margin:0 0 14px; }
.np-edge-intro{ font-family:var(--sans); font-size:15px; line-height:1.65; color:rgba(240,240,240,0.62); margin:0; }

/* ── "Pairs well with" cross-sell card grid ── */
.np-pairs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:42px; }
.np-pairs-card{
  display:flex; flex-direction:column; overflow:hidden; text-decoration:none; color:inherit;
  background:var(--bg2); border:1px solid rgba(255,255,255,0.22); border-radius:11px;
  box-shadow:0 0 28px rgba(255,255,255,0.05);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.np-pairs-card:hover{ border-color:rgba(255,255,255,0.34); box-shadow:0 0 34px rgba(255,255,255,0.08); }
.np-pairs-img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; border-bottom:1px solid rgba(255,255,255,0.08); }
.np-pairs-body{ display:flex; flex-direction:column; flex:1; padding:15px 17px 16px; }
.np-pairs-name{ font-family:var(--sans); font-size:15px; font-weight:700; color:#fff; line-height:1.25; }
.np-pairs-d{ font-family:var(--sans); font-size:12.5px; line-height:1.5; color:rgba(240,240,240,0.62); margin:6px 0 0; flex:1; }
.np-pairs-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:15px; }
.np-pairs-price{ font-family:var(--sans); font-size:15px; font-weight:800; color:#fff; }
.np-pairs-price.free{ color:#fff; }
.np-pairs-more{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:#fff; }
.np-pairs-arrow{ width:19px; height:19px; flex-shrink:0; display:block; }
@media(max-width:768px){ .np-pairs-grid{ grid-template-columns:1fr; } }

/* ── Tabbed info box ── */
.np-tabs{ max-width:1180px; margin:54px auto 0; border:1px solid rgba(255,255,255,0.22); background:var(--bg2); border-radius:12px; overflow:hidden; box-shadow:0 12px 44px rgba(0,0,0,0.5); }
.np-tabbar{ display:flex; flex-wrap:wrap; border-bottom:1px solid rgba(255,255,255,0.14); background:rgba(0,0,0,0.34); }
.np-tab{
  appearance:none; background:none; border:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-size:12.5px; font-weight:700; letter-spacing:0.4px;
  text-transform:uppercase; color:rgba(240,240,240,0.64);
  padding:14px 19px; border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.np-tab:hover{ color:#fff; background:rgba(255,255,255,0.05); }
.np-tab.active{ color:#fff; background:var(--bg2); border-bottom-color:#E8212A; }
.np-tab.active svg{ stroke:#E8212A; }
.np-tab svg{ width:15px; height:15px; flex-shrink:0; }
.np-panel{ display:none; padding:34px 36px; }
.np-panel.active{ display:block; }
.np-panel-h{ font-family:var(--sans); font-size:17px; font-weight:800; color:#fff; margin:0 0 16px; letter-spacing:-0.2px; }
.np-panel-h:not(:first-child){ margin-top:30px; }

/* ── Description tab reading system: numbered section markers, scannable bolds, audience cards ── */
.np-desc b{ color:#fff; font-weight:600; }
.np-sec-num{
  display:flex; align-items:center; gap:9px;
  font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:1.6px;
  text-transform:uppercase; color:#E8212A; margin:38px 0 9px;
}
.np-sec-num::after{ content:""; flex:1; height:1px; background:rgba(232,33,42,0.18); }
.np-sec-num.first{ margin-top:0; }
.np-sec-num + .np-panel-h{ margin-top:0; margin-bottom:12px; }
.np-aud-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.np-aud-card{
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.10);
  border-radius:9px; padding:16px 18px 15px;
}
.np-aud-card b{ display:block; font-family:var(--sans); font-size:13px; font-weight:700; color:#fff; margin-bottom:7px; }
.np-aud-card p{ font-family:var(--sans); font-size:12.5px; line-height:1.65; color:rgba(240,240,240,0.75); margin:0; }

/* ── Installation: requirements + steps ── */
.np-setup-grid{ display:grid; grid-template-columns:1fr 1px 1fr; column-gap:46px; align-items:start; }
.np-steps{ list-style:none; margin:0; padding:0; counter-reset:step; display:flex; flex-direction:column; gap:14px; }
.np-steps li{ position:relative; padding-left:38px; font-family:var(--sans); font-size:13px; line-height:1.6; color:rgba(240,240,240,0.85); counter-increment:step; }
.np-steps li::before{ content:counter(step); position:absolute; left:0; top:0; width:24px; height:24px; border-radius:50%; background:rgba(232,33,42,0.14); color:#E8212A; font-weight:800; font-size:12px; display:inline-flex; align-items:center; justify-content:center; }
.np-reqs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.np-reqs.np-incl-list{ display:grid; grid-template-columns:1fr 1fr; gap:12px 36px; }
.np-reqs li{ display:flex; gap:10px; align-items:flex-start; font-family:var(--sans); font-size:13px; line-height:1.5; color:rgba(240,240,240,0.85); }
.np-reqs-check{ flex-shrink:0; color:#E8212A; font-weight:800; font-size:12px; margin-top:2px; }

/* ============================================================
   MOBILE / TABLET REFLOW
   Below the 1920 master only. Screens WIDER than 1920 (1440p/4K)
   scale via the global body{zoom} ladder in style.css — nothing
   is needed for them here. These rules stack/reflow the multi-
   column blocks so the page reads cleanly on laptops and phones.
   ============================================================ */
@media(max-width:768px){
  /* product header row: title · price/buttons · version stack instead of squashing */
  .product-page div:has(> .product-page-title){ flex-wrap:wrap; gap:14px !important; }
  .product-page .product-page-title{ white-space:normal !important; font-size:26px !important; flex:1 1 100%; }
  .product-page div:has(> .product-page-title) > div:last-child{ flex:1 1 100%; text-align:left !important; top:0 !important; }

  /* buyer-guarantee ribbon: label on top, chips wrap two-per-row */
  .np-guarantee{ flex-direction:column; }
  .np-guarantee-label{ justify-content:center; border-right:none; border-bottom:1px solid rgba(255,255,255,0.14); }
  .np-feats{ flex-wrap:wrap; }
  .np-chip{ flex:1 1 44%; padding:9px 6px; }
  .np-chip:nth-child(2n){ border-right:none; }

  /* feature showcase 4-col -> 2-col */
  .np-show-strip, .np-show-caps{ grid-template-columns:1fr 1fr; }

  /* settings screenshots 2/3-col -> 1-col */
  .np-settings-shots, .np-settings-shots.np-shots-3{ grid-template-columns:1fr; }

  /* installation setup: drop the centre divider, stack the two columns */
  /* audience cards 2x2 -> 1-col */
  .np-aud-grid{ grid-template-columns:1fr; }

  /* installation 2x2 section grid -> 1-col */
  .np-inst-grid{ grid-template-columns:1fr; }
  .np-inst-div{ display:none; }

  .np-setup-grid{ grid-template-columns:1fr; row-gap:28px; }
  .np-setup-grid > div:nth-child(2){ display:none; }

  /* tab box: tighter padding + smaller tabs so they fit a phone */
  .np-panel{ padding:26px 18px; }
  .np-tab{ padding:13px 14px; font-size:12px; }
}
@media(max-width:520px){
  /* what's-included cards 2-col -> 1-col on small phones */
  .np-incl-cards{ grid-template-columns:1fr; }
  .np-reqs.np-incl-list{ grid-template-columns:1fr; }
}