/* ============================================================
   SVARTLIND NEXTGEN · HJÄRTA PRODUCT PAGE · 2026-09-17
   ============================================================ */


.hjp-page {
  background:
    #f4f3ee;
}


/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */

.hjp-hero {
  min-height:
    760px;

  display:
    grid;

  grid-template-columns:
    minmax(0,.92fr)
    minmax(520px,1.08fr);

  gap:
    72px;

  align-items:
    center;

  padding-top:
    92px;

  padding-bottom:
    86px;
}


.hjp-product-name {
  margin:
    0 0 18px;

  font-size:
    .9rem;

  font-weight:
    850;

  letter-spacing:
    .12em;
}


.hjp-hero h1 {
  max-width:
    760px;

  margin:
    0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(3.8rem,6vw,6.6rem);

  font-weight:
    500;

  line-height:
    .96;

  letter-spacing:
    -.045em;
}


.hjp-hero-lead {
  max-width:
    680px;

  margin:
    28px 0 0;

  color:
    #555b56;

  font-size:
    1.1rem;

  line-height:
    1.72;
}


.hjp-hero-actions {
  display:
    flex;

  gap:
    26px;

  align-items:
    center;

  margin-top:
    34px;
}


.hjp-hero-stage {
  position:
    relative;

  min-height:
    570px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  border-radius:
    32px;

  background:
    radial-gradient(
      circle at 50% 42%,
      #39433e 0,
      #222825 45%,
      #171b19 78%
    );

  box-shadow:
    0 34px 80px rgba(22,25,23,.2);
}


.hjp-hero-stage img {
  position:
    relative;

  z-index:
    2;

  display:
    block;

  width:
    min(88%,650px);

  height:
    auto;

  filter:
    drop-shadow(
      0 30px 34px rgba(0,0,0,.32)
    );
}


.hjp-hero-glow {
  position:
    absolute;

  width:
    520px;

  height:
    520px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(186,151,69,.17),
      rgba(186,151,69,0) 68%
    );
}


/* ------------------------------------------------------------
   QUICK PROOF
   ------------------------------------------------------------ */

.hjp-proof {
  display:
    grid;

  grid-template-columns:
    repeat(3,1fr);

  border-top:
    1px solid #c9cbc5;

  border-bottom:
    1px solid #c9cbc5;
}


.hjp-proof > div {
  padding:
    26px 24px;

  border-right:
    1px solid #c9cbc5;
}


.hjp-proof > div:last-child {
  border-right:
    0;
}


.hjp-proof strong {
  display:
    block;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    1.2rem;

  font-weight:
    500;
}


.hjp-proof span {
  display:
    block;

  margin-top:
    4px;

  color:
    #747a74;

  font-size:
    .78rem;
}


/* ------------------------------------------------------------
   EDITORIAL CONTENT
   ------------------------------------------------------------ */

.hjp-editorial {
  display:
    grid;

  grid-template-columns:
    minmax(0,1.05fr)
    minmax(380px,.75fr);

  gap:
    88px;

  align-items:
    start;

  padding-top:
    120px;

  padding-bottom:
    130px;
}


.hjp-content {
  max-width:
    760px;
}


.hjp-content > *:first-child {
  margin-top:
    0;
}


.hjp-content h2 {
  margin:
    84px 0 20px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(2.4rem,4vw,4.5rem);

  font-weight:
    500;

  line-height:
    1;

  letter-spacing:
    -.035em;
}


.hjp-content h2:first-child {
  margin-top:
    0;
}


.hjp-content p {
  margin:
    0 0 22px;

  color:
    #575d58;

  font-size:
    1.02rem;

  line-height:
    1.8;
}


.hjp-content strong {
  color:
    #202421;
}


.hjp-content ul {
  display:
    grid;

  gap:
    10px;

  margin:
    28px 0 42px;

  padding:
    0;

  list-style:
    none;
}


.hjp-content li {
  position:
    relative;

  padding:
    17px 18px 17px 46px;

  border:
    1px solid #d1d3cd;

  border-radius:
    17px;

  background:
    rgba(255,255,255,.42);

  color:
    #565c57;

  line-height:
    1.55;
}


.hjp-content li::before {
  content:
    "✓";

  position:
    absolute;

  left:
    18px;

  top:
    17px;

  color:
    #4a8f6a;

  font-weight:
    900;
}


/* ------------------------------------------------------------
   MEDIA RAIL
   ------------------------------------------------------------ */

.hjp-media {
  position:
    sticky;

  top:
    112px;

  display:
    grid;

  gap:
    18px;
}


.hjp-media figure {
  margin:
    0;

  overflow:
    hidden;

  border:
    1px solid #cfd1cb;

  border-radius:
    24px;

  background:
    #171b19;

  box-shadow:
    0 18px 42px rgba(22,25,23,.09);
}


.hjp-media img {
  display:
    block;

  width:
    100%;

  height:
    auto;
}


.hjp-media figcaption {
  padding:
    14px 16px 15px;

  background:
    #f7f6f1;

  color:
    #717671;

  font-size:
    .78rem;
}


/* ------------------------------------------------------------
   FINAL
   ------------------------------------------------------------ */

.hjp-final {
  background:
    #171a19;

  color:
    #f6f5f0;

  text-align:
    center;
}


.hjp-final .shell {
  padding-top:
    125px;

  padding-bottom:
    125px;
}


.hjp-final .eyebrow {
  color:
    #9ca49e;
}


.hjp-final h2 {
  max-width:
    900px;

  margin:
    0 auto;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(3rem,5vw,5.4rem);

  font-weight:
    500;

  line-height:
    .98;

  letter-spacing:
    -.04em;
}


.hjp-final p:not(.eyebrow) {
  max-width:
    720px;

  margin:
    26px auto 0;

  color:
    #b8c0ba;

  font-size:
    1.03rem;

  line-height:
    1.72;
}


.hjp-final-actions {
  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

  gap:
    28px;

  margin-top:
    34px;
}


.hjp-final .button-primary {
  background:
    #f3f1ea;

  color:
    #171a19;
}


.hjp-final .text-link {
  color:
    #f3f1ea;

  border-bottom-color:
    #69706b;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width:1000px) {

  .hjp-hero {
    grid-template-columns:
      1fr;

    padding-top:
      72px;
  }


  .hjp-hero-stage {
    min-height:
      500px;
  }


  .hjp-editorial {
    grid-template-columns:
      1fr;

    gap:
      56px;
  }


  .hjp-media {
    position:
      static;

    grid-template-columns:
      1fr 1fr;
  }

}


@media (max-width:680px) {

  .hjp-hero {
    min-height:
      auto;

    gap:
      42px;

    padding-top:
      62px;

    padding-bottom:
      62px;
  }


  .hjp-hero h1 {
    font-size:
      3.45rem;
  }


  .hjp-hero-actions,
  .hjp-final-actions {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .hjp-hero-stage {
    min-height:
      350px;

    border-radius:
      24px;
  }


  .hjp-proof {
    grid-template-columns:
      1fr;
  }


  .hjp-proof > div {
    border-right:
      0;

    border-bottom:
      1px solid #c9cbc5;
  }


  .hjp-proof > div:last-child {
    border-bottom:
      0;
  }


  .hjp-editorial {
    padding-top:
      82px;

    padding-bottom:
      88px;
  }


  .hjp-content h2 {
    margin-top:
      62px;

    font-size:
      2.65rem;
  }


  .hjp-media {
    grid-template-columns:
      1fr;
  }


  .hjp-final {
    text-align:
      left;
  }


  .hjp-final .shell {
    padding-top:
      88px;

    padding-bottom:
      88px;
  }


  .hjp-final h2,
  .hjp-final p:not(.eyebrow) {
    margin-left:
      0;

    margin-right:
      0;
  }


  .hjp-final-actions {
    justify-content:
      flex-start;
  }

}



/* ============================================================
   NEXTGEN · HJÄRTA EASY ACCESS · 2026-09-17
   ============================================================ */


/* ------------------------------------------------------------
   BREADCRUMB
   ------------------------------------------------------------ */

.hjp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;

  margin-top: 38px;

  color: #858a85;

  font-size: .74rem;
}


.hjp-breadcrumb a {
  color: #666c67;
  text-decoration: none;
}


.hjp-breadcrumb a:hover {
  text-decoration: underline;
}


.hjp-breadcrumb strong {
  color: #343936;
  font-weight: 750;
}


.hjp-hero {
  padding-top: 48px;
}


/* ------------------------------------------------------------
   EASY ACCESS
   ------------------------------------------------------------ */

.hjp-easy {
  padding:
    118px 0 126px;

  border-top:
    1px solid #d1d3cd;

  background:
    #dedfd9;
}


.hjp-easy-head {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(340px,.72fr);

  column-gap:
    80px;

  align-items:
    end;

  margin-bottom:
    54px;
}


.hjp-easy-head .eyebrow {
  grid-column:
    1 / -1;
}


.hjp-easy-head h2 {
  margin:
    0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(3rem,5vw,5.2rem);

  font-weight:
    500;

  line-height:
    .98;

  letter-spacing:
    -.04em;
}


.hjp-easy-head > p:last-child {
  margin:
    0;

  color:
    #5f655f;

  font-size:
    1rem;

  line-height:
    1.75;
}


/* ------------------------------------------------------------
   MEDIA GRID
   ------------------------------------------------------------ */

.hjp-easy-media-grid {
  display:
    grid;

  grid-template-columns:
    minmax(0,1.08fr)
    minmax(360px,.92fr);

  gap:
    16px;
}


.hjp-easy-photo {
  margin:
    0;

  overflow:
    hidden;

  border:
    1px solid #c9cbc5;

  border-radius:
    26px;

  background:
    #171b19;

  box-shadow:
    0 20px 48px rgba(22,25,23,.1);
}


.hjp-easy-photo img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  max-height:
    720px;

  object-fit:
    cover;
}


.hjp-easy-photo figcaption {
  padding:
    14px 16px;

  background:
    #f7f6f1;

  color:
    #747a74;

  font-size:
    .77rem;
}


.hjp-easy-stack {
  display:
    grid;

  grid-template-rows:
    1fr 1fr;

  gap:
    16px;
}


.hjp-easy-card {
  appearance:
    none;

  display:
    grid;

  grid-template-columns:
    minmax(0,1.05fr)
    minmax(170px,.75fr);

  overflow:
    hidden;

  min-height:
    250px;

  padding:
    0;

  border:
    1px solid #c9cbc5;

  border-radius:
    26px;

  background:
    #f7f6f1;

  color:
    #202421;

  text-align:
    left;

  cursor:
    pointer;

  box-shadow:
    0 18px 42px rgba(22,25,23,.07);

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}


.hjp-easy-card:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 24px 50px rgba(22,25,23,.11);
}


.hjp-easy-card:focus-visible {
  outline:
    3px solid rgba(184,151,69,.42);

  outline-offset:
    3px;
}


.hjp-easy-card-media {
  position:
    relative;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  background:
    #171b19;
}


.hjp-easy-card-media img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


.hjp-easy-pinout-thumb img {
  object-fit:
    contain;

  padding:
    8px;
}


.hjp-easy-card-copy {
  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    9px;

  padding:
    24px;
}


.hjp-easy-card-copy strong {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    1.35rem;

  font-weight:
    500;

  line-height:
    1.12;
}


.hjp-easy-card-copy small {
  color:
    #686e69;

  font-size:
    .79rem;

  line-height:
    1.55;
}


.hjp-play {
  position:
    absolute;

  left:
    50%;

  top:
    50%;

  display:
    grid;

  place-items:
    center;

  width:
    58px;

  height:
    58px;

  border:
    1px solid rgba(255,255,255,.55);

  border-radius:
    50%;

  background:
    rgba(17,22,19,.72);

  color:
    #fff;

  font-size:
    1rem;

  transform:
    translate(-50%,-50%);

  backdrop-filter:
    blur(8px);
}


/* ------------------------------------------------------------
   PROOF STRIP
   ------------------------------------------------------------ */

.hjp-easy-proof {
  display:
    grid;

  grid-template-columns:
    repeat(3,1fr);

  margin-top:
    18px;

  border-top:
    1px solid #bec1ba;

  border-bottom:
    1px solid #bec1ba;
}


.hjp-easy-proof article {
  padding:
    24px 22px;

  border-right:
    1px solid #bec1ba;
}


.hjp-easy-proof article:last-child {
  border-right:
    0;
}


.hjp-easy-proof strong {
  display:
    block;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    1.08rem;

  font-weight:
    500;
}


.hjp-easy-proof span {
  display:
    block;

  margin-top:
    6px;

  color:
    #6e746e;

  font-size:
    .78rem;

  line-height:
    1.5;
}


/* ------------------------------------------------------------
   DIALOG
   ------------------------------------------------------------ */

.hjp-dialog {
  width:
    min(1040px,calc(100vw - 48px));

  max-height:
    calc(100vh - 48px);

  padding:
    0;

  overflow:
    hidden;

  border:
    0;

  border-radius:
    26px;

  background:
    #171b19;

  color:
    #f7f6f1;

  box-shadow:
    0 42px 100px rgba(0,0,0,.42);
}


.hjp-dialog::backdrop {
  background:
    rgba(12,15,13,.72);

  backdrop-filter:
    blur(8px);
}


.hjp-dialog-shell {
  max-height:
    calc(100vh - 48px);

  overflow:
    auto;
}


.hjp-dialog-top {
  position:
    sticky;

  top:
    0;

  z-index:
    3;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    20px;

  padding:
    18px 20px;

  border-bottom:
    1px solid #323834;

  background:
    rgba(23,27,25,.96);
}


.hjp-dialog-top h2 {
  margin:
    0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    1.35rem;

  font-weight:
    500;
}


.hjp-dialog-close {
  appearance:
    none;

  display:
    grid;

  place-items:
    center;

  width:
    38px;

  height:
    38px;

  border:
    1px solid #424944;

  border-radius:
    50%;

  background:
    transparent;

  color:
    #fff;

  font-size:
    1.5rem;

  cursor:
    pointer;
}


.hjp-dialog video,
.hjp-dialog-image img {
  display:
    block;

  width:
    100%;

  height:
    auto;

  max-height:
    calc(100vh - 120px);

  object-fit:
    contain;

  background:
    #0f1210;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width:1000px) {

  .hjp-easy-head {
    grid-template-columns:
      1fr;

    gap:
      24px;
  }


  .hjp-easy-media-grid {
    grid-template-columns:
      1fr;
  }


  .hjp-easy-photo img {
    max-height:
      none;
  }

}


@media (max-width:680px) {

  .hjp-breadcrumb {
    margin-top:
      24px;
  }


  .hjp-hero {
    padding-top:
      34px;
  }


  .hjp-easy {
    padding:
      84px 0 88px;
  }


  .hjp-easy-head {
    margin-bottom:
      38px;
  }


  .hjp-easy-head h2 {
    font-size:
      2.8rem;
  }


  .hjp-easy-card {
    grid-template-columns:
      1fr;

    min-height:
      0;
  }


  .hjp-easy-card-media {
    min-height:
      220px;
  }


  .hjp-easy-proof {
    grid-template-columns:
      1fr;
  }


  .hjp-easy-proof article {
    border-right:
      0;

    border-bottom:
      1px solid #bec1ba;
  }


  .hjp-easy-proof article:last-child {
    border-bottom:
      0;
  }


  .hjp-dialog {
    width:
      calc(100vw - 20px);

    max-height:
      calc(100vh - 20px);

    border-radius:
      20px;
  }

}



/* ============================================================
   NEXTGEN · HJÄRTA · STICKY BREADCRUMB · 2026-09-17
   ============================================================ */

.hjp-breadcrumb.shell {
  position: sticky;
  top: 104px;
  z-index: 44;

  width: max-content;
  max-width: calc(100vw - 48px);

  margin-left: max(
    24px,
    calc((100vw - 1240px) / 2)
  );

  margin-right: 0;

  padding: 8px 12px;

  border: 1px solid rgba(22,24,23,.08);
  border-radius: 999px;

  background: rgba(248,247,243,.9);

  box-shadow:
    0 8px 24px rgba(22,24,23,.07);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}


@media (max-width:680px) {

  .hjp-breadcrumb.shell {
    top: 86px;

    max-width: calc(100vw - 28px);

    margin-left: 14px;

    padding: 7px 10px;
  }

}



/* ============================================================
   NEXTGEN · CONTEXTUAL KNOWLEDGE LINKS · 2026-09-18
   ============================================================ */

.hjp-page .nx-knowledge-inline {
  color: inherit;

  text-decoration-line: underline;
  text-decoration-thickness: 1px;

  text-decoration-color:
    rgba(52, 58, 53, .28);

  text-underline-offset: .18em;

  transition:
    text-decoration-color .15s ease;
}


.hjp-page .nx-knowledge-inline:hover,
.hjp-page .nx-knowledge-inline:focus-visible {
  text-decoration-color:
    currentColor;
}