/* ============================================================
   SVARTLIND NEXTGEN · PRODUCT DETAIL · 2026-09-17
   ============================================================ */


.nx-product-page {
  background: #f4f3ee;
}


.nx-product-main {
  min-height: 70vh;
}


.nx-product-page .main-nav .is-current {
  color: #171a18;
  font-weight: 750;
}


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

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

  padding-top: 38px;

  color: #858a85;

  font-size: .74rem;
}


.nx-product-breadcrumb a {
  color: #626863;
  text-decoration: none;
}


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


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

.nx-product-hero {
  display: grid;

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

  gap: 38px;

  align-items: start;

  padding-top: 48px;
  padding-bottom: 84px;
}


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

.nx-product-gallery {
  min-width: 0;
}


.nx-product-media {
  display: grid;
  place-items: center;

  min-height: 560px;

  padding: 42px;

  overflow: hidden;

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 50% 45%,
      #26302b 0%,
      #19211d 50%,
      #101512 100%
    );

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


.nx-product-media img {
  display: block;

  width: 100%;
  height: 500px;

  object-fit: contain;
}


.nx-product-media-empty {
  color: rgba(255,255,255,.36);

  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}


.nx-product-thumbs {
  display: flex;

  gap: 12px;

  flex-wrap: wrap;

  margin-top: 14px;
}


.nx-product-thumb {
  appearance: none;

  width: 88px;
  height: 72px;

  padding: 6px;

  overflow: hidden;

  border: 1px solid #cdd0c9;
  border-radius: 13px;

  background: #1a211e;

  cursor: pointer;

  opacity: .65;

  transition:
    opacity .15s ease,
    transform .15s ease;
}


.nx-product-thumb:hover,
.nx-product-thumb.is-active {
  opacity: 1;
}


.nx-product-thumb:hover {
  transform: translateY(-1px);
}


.nx-product-thumb img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}


/* ------------------------------------------------------------
   SUMMARY
   ------------------------------------------------------------ */

.nx-product-summary {
  padding: 24px 0 0;
}


.nx-product-summary h1 {
  margin: 0;

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

  font-size:
    clamp(3.15rem,4.4vw,5.2rem);

  font-weight: 500;

  line-height: .98;

  letter-spacing: -.04em;
}


.nx-product-subtitle {
  margin: 15px 0 0;

  color: #383d39;

  font-size: 1rem;
  font-weight: 750;
}


.nx-product-lead,
.nx-product-intro {
  max-width: 58ch;

  margin: 20px 0 0;

  color: #616762;

  line-height: 1.7;
}


.nx-product-highlights {
  display: grid;

  gap: 8px;

  margin-top: 24px;
}


.nx-product-highlights div {
  display: flex;

  gap: 9px;

  color: #454b46;

  font-size: .9rem;
}


.nx-product-highlights span {
  font-weight: 800;
}


/* ------------------------------------------------------------
   ATTRIBUTES
   ------------------------------------------------------------ */

.nx-product-attributes {
  margin-top: 28px;

  border-top: 1px solid #d0d2cc;
}


.nx-product-attributes-title {
  padding: 15px 0 10px;

  color: #777d77;

  font-size: .68rem;

  font-weight: 800;

  letter-spacing: .09em;

  text-transform: uppercase;
}


.nx-product-attribute {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap: 22px;

  padding: 9px 0;

  border-top: 1px solid #dddfd9;

  color: #666c67;

  font-size: .82rem;
}


.nx-product-attribute strong {
  color: #2f3430;

  text-align: right;
}


/* ------------------------------------------------------------
   NOTICE
   ------------------------------------------------------------ */

.nx-product-notice {
  margin-top: 24px;

  padding: 14px 16px;

  border: 1px solid #ded7c3;

  border-radius: 15px;

  background: #f3efe2;

  color: #67604d;

  font-size: .82rem;

  line-height: 1.55;
}


/* ------------------------------------------------------------
   BUY
   ------------------------------------------------------------ */

.nx-product-buyrow {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 22px;

  margin-top: 28px;

  padding-top: 24px;

  border-top: 1px solid #d1d3cd;
}


.nx-product-price {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 2rem;

  line-height: 1;
}


.nx-product-price-note {
  margin-top: 9px;

  color: #777d77;

  font-size: .77rem;
}


.nx-product-payment-note {
  display: grid;

  gap: 4px;

  margin-top: 14px;

  color: #777d77;

  font-size: .76rem;
}


.nx-product-links {
  display: flex;

  gap: 22px;

  flex-wrap: wrap;

  margin-top: 24px;
}


/* ------------------------------------------------------------
   USE CASES
   ------------------------------------------------------------ */

.nx-product-usecases {
  display: flex;

  gap: 10px;

  flex-wrap: wrap;

  padding-bottom: 54px;
}


.nx-product-usecases span {
  display: inline-flex;

  padding: 8px 12px;

  border: 1px solid #cfd1cb;

  border-radius: 999px;

  color: #656b66;

  font-size: .74rem;
}


/* ------------------------------------------------------------
   DETAILS
   ------------------------------------------------------------ */

.nx-product-details {
  display: grid;

  grid-template-columns:
    minmax(0,1.15fr)
    minmax(300px,.55fr);

  gap: 28px;

  align-items: start;

  padding-bottom: 120px;
}


.nx-product-article,
.nx-product-techfacts {
  border: 1px solid #d0d2cc;

  border-radius: 28px;

  background: #faf9f6;

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


.nx-product-article {
  padding: 46px 50px;
}


.nx-product-article > h2,
.nx-product-techfacts > h2 {
  margin: 0;

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

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

  font-weight: 500;

  line-height: 1;

  letter-spacing: -.035em;
}


.nx-product-article-subtitle {
  margin: 15px 0 0;

  color: #3c413d;

  font-weight: 750;
}


.nx-product-article-teaser {
  margin: 18px 0 0;

  color: #626863;

  font-size: 1.02rem;

  line-height: 1.7;
}


.nx-product-article-body {
  margin-top: 36px;

  color: #565c57;

  line-height: 1.72;
}


.nx-product-article-body h2,
.nx-product-article-body h3,
.nx-product-article-body h4 {
  color: #202421;

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

  font-weight: 500;

  line-height: 1.08;
}


.nx-product-article-body h2 {
  margin: 48px 0 15px;

  font-size: 2.15rem;
}


.nx-product-article-body h3 {
  margin: 36px 0 12px;

  font-size: 1.55rem;
}


.nx-product-article-body p {
  margin: 0 0 18px;
}


.nx-product-article-body ul,
.nx-product-article-body ol {
  margin: 18px 0 24px;

  padding-left: 22px;
}


.nx-product-caption {
  margin: 30px 0 0;

  color: #858a85;

  font-size: .75rem;
}


/* ------------------------------------------------------------
   INLINE MEDIA
   ------------------------------------------------------------ */

.nx-product-inline-media {
  margin: 34px 0;

  overflow: hidden;

  border-radius: 20px;

  background: #171c19;
}


.nx-product-inline-media img {
  display: block;

  width: 100%;
  height: auto;
}


.nx-product-inline-media figcaption {
  padding: 12px 14px;

  background: #f1f0eb;

  color: #737973;

  font-size: .75rem;
}


.nx-product-inline-video {
  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9;

  margin: 34px 0;

  overflow: hidden;

  border-radius: 20px;
}


.nx-product-inline-video iframe {
  width: 100%;
  height: 100%;

  border: 0;
}


/* ------------------------------------------------------------
   TECH FACTS
   ------------------------------------------------------------ */

.nx-product-techfacts {
  position: sticky;

  top: 112px;

  padding: 32px;
}


.nx-product-techfacts > h2 {
  font-size: 2rem;
}


.nx-product-techgroup {
  margin-top: 28px;
}


.nx-product-techgroup h3 {
  margin: 0 0 9px;

  color: #777d77;

  font-size: .72rem;

  font-weight: 800;

  letter-spacing: .08em;

  text-transform: uppercase;
}


.nx-product-techrow {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap: 18px;

  padding: 10px 0;

  border-top: 1px solid #dedfd9;

  color: #666c67;

  font-size: .8rem;
}


.nx-product-techrow strong {
  color: #303531;

  text-align: right;
}


/* ------------------------------------------------------------
   MISSING
   ------------------------------------------------------------ */

.nx-product-missing {
  padding-top: 100px;
  padding-bottom: 150px;
}


.nx-product-missing h1 {
  margin: 0;

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

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

  font-weight: 500;
}


.nx-product-missing p {
  margin: 20px 0 28px;

  color: #646a65;
}


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

@media (max-width:1000px) {

  .nx-product-hero,
  .nx-product-details {
    grid-template-columns: 1fr;
  }


  .nx-product-media {
    min-height: 420px;
  }


  .nx-product-media img {
    height: 380px;
  }


  .nx-product-techfacts {
    position: static;
  }

}


@media (max-width:680px) {

  .nx-product-breadcrumb {
    padding-top: 26px;
  }


  .nx-product-hero {
    gap: 26px;

    padding-top: 36px;
    padding-bottom: 62px;
  }


  .nx-product-media {
    min-height: 300px;

    padding: 24px;

    border-radius: 22px;
  }


  .nx-product-media img {
    height: 280px;
  }


  .nx-product-summary h1 {
    font-size: 3rem;
  }


  .nx-product-buyrow {
    align-items: flex-start;

    flex-direction: column;
  }


  .nx-product-details {
    padding-bottom: 84px;
  }


  .nx-product-article,
  .nx-product-techfacts {
    padding: 26px;

    border-radius: 22px;
  }

}