/* ============================================================
   SVARTLIND NEXTGEN · SHOP · 2026-09-17
   ============================================================ */


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


.nx-shop-main {
  min-height: 72vh;
}


/* ------------------------------------------------------------
   NAV
   ------------------------------------------------------------ */

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


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

.nx-shop-breadcrumb {
  display: flex;

  align-items: center;

  gap: 9px;

  padding-top: 38px;

  color: #858a85;

  font-size: .74rem;
}


.nx-shop-breadcrumb a {
  color: #626863;

  text-decoration: none;
}


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


.nx-shop-breadcrumb strong {
  color: #292d2a;

  font-weight: 750;
}


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

.nx-shop-hero {
  display: grid;

  grid-template-columns:
    minmax(0,1.08fr)
    minmax(320px,.72fr);

  gap: 84px;

  align-items: end;

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


.nx-shop-hero h1 {
  max-width: 760px;

  margin: 0;

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

  font-size:
    clamp(4rem,6.2vw,7rem);

  font-weight: 500;

  line-height: .94;

  letter-spacing: -.045em;
}


.nx-shop-hero-copy {
  padding-bottom: 7px;
}


.nx-shop-hero-copy > p {
  margin: 0;

  color: #5d635e;

  font-size: 1rem;

  line-height: 1.72;
}


.nx-shop-hero-actions {
  display: flex;

  align-items: center;

  gap: 24px;

  flex-wrap: wrap;

  margin-top: 28px;
}


/* ------------------------------------------------------------
   PRODUCT STAGE
   ------------------------------------------------------------ */

.nx-shop-products {
  padding-bottom: 124px;
}


.nx-shop-section-head {
  display: flex;

  justify-content: space-between;

  align-items: baseline;

  gap: 20px;

  padding: 22px 0;

  border-top: 1px solid #cfd1cb;
  border-bottom: 1px solid #cfd1cb;
}


.nx-shop-section-head h2 {
  margin: 0;

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

  font-size: 2rem;

  font-weight: 500;
}


.nx-shop-counter {
  color: #808680;

  font-size: .78rem;

  font-weight: 750;
}


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

.nx-shop-grid {
  display: grid;

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

  gap: 24px;

  padding-top: 30px;
}


.nx-shop-card {
  overflow: hidden;

  border: 1px solid #d0d2cc;

  border-radius: 28px;

  background: #faf9f6;

  cursor: pointer;

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

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


.nx-shop-card:hover {
  transform:
    translateY(-3px);

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


/* ------------------------------------------------------------
   IMAGE
   ------------------------------------------------------------ */

.nx-shop-media {
  display: grid;

  place-items: center;

  min-height: 390px;

  padding: 36px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 45%,
      #26302b 0%,
      #1a211e 48%,
      #121614 100%
    );
}


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

  width: 100%;

  height: 340px;

  object-fit: contain;
}


.nx-shop-media-empty {
  display: grid;

  place-items: center;

  min-height: 300px;

  color: rgba(255,255,255,.3);

  font-size: .72rem;

  font-weight: 800;

  letter-spacing: .28em;
}


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

.nx-shop-content {
  padding: 30px;
}


.nx-shop-meta {
  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  margin-bottom: 19px;
}


.nx-shop-badge {
  display: inline-flex;

  align-items: center;

  min-height: 27px;

  padding: 5px 9px;

  border: 1px solid #d0d2cc;

  border-radius: 999px;

  color: #59605a;

  font-size: .65rem;

  font-weight: 800;

  letter-spacing: .08em;

  text-transform: uppercase;
}


.nx-shop-badge-soft {
  background: #ecece7;
}


.nx-shop-content h3 {
  margin: 0;

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

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

  font-weight: 500;

  line-height: 1;

  letter-spacing: -.025em;
}


.nx-shop-subtitle {
  margin: 13px 0 0;

  color: #414641;

  font-weight: 700;

  line-height: 1.45;
}


.nx-shop-text {
  max-width: 58ch;

  margin: 17px 0 0;

  color: #656b66;

  line-height: 1.68;
}


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

.nx-shop-attrs {
  margin-top: 26px;

  border-top: 1px solid #dedfd9;
}


.nx-shop-attrs-title {
  padding: 15px 0 11px;

  color: #777d77;

  font-size: .68rem;

  font-weight: 800;

  letter-spacing: .09em;

  text-transform: uppercase;
}


.nx-shop-attr {
  display: grid;

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

  gap: 24px;

  padding: 9px 0;

  border-top: 1px solid #e5e5e0;

  color: #6b716c;

  font-size: .8rem;
}


.nx-shop-attr strong {
  color: #343935;

  font-weight: 750;

  text-align: right;
}


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

.nx-shop-note {
  margin: 22px 0 0;

  padding: 14px 16px;

  border: 1px solid #ded7c3;

  border-radius: 14px;

  background: #f3efe2;

  color: #67604d;

  font-size: .82rem;

  line-height: 1.55;
}


/* ------------------------------------------------------------
   PRICE + CTA
   ------------------------------------------------------------ */

.nx-shop-bottom {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 18px;

  margin-top: 28px;

  padding-top: 22px;

  border-top: 1px solid #d8dad4;
}


.nx-shop-price {
  color: #1e221f;

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

  font-size: 1.55rem;

  line-height: 1;
}


.nx-shop-buy {
  flex: 0 0 auto;
}


/* ------------------------------------------------------------
   STATES
   ------------------------------------------------------------ */

.nx-shop-loading,
.nx-shop-empty {
  grid-column: 1 / -1;

  padding: 48px;

  border: 1px solid #d0d2cc;

  border-radius: 24px;

  background: #faf9f6;

  color: #737973;

  text-align: center;
}


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

@media (max-width:1000px) {

  .nx-shop-hero {
    grid-template-columns:
      1fr;

    gap: 28px;

    padding-top: 56px;
  }


  .nx-shop-grid {
    grid-template-columns:
      1fr;
  }


  .nx-shop-media {
    min-height: 360px;
  }

}


@media (max-width:680px) {

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


  .nx-shop-hero {
    padding-top: 42px;
    padding-bottom: 58px;
  }


  .nx-shop-hero h1 {
    font-size: 3.5rem;
  }


  .nx-shop-products {
    padding-bottom: 84px;
  }


  .nx-shop-grid {
    gap: 18px;
  }


  .nx-shop-card {
    border-radius: 22px;
  }


  .nx-shop-media {
    min-height: 270px;

    padding: 24px;
  }


  .nx-shop-media img {
    height: 260px;
  }


  .nx-shop-content {
    padding: 24px;
  }


  .nx-shop-bottom {
    align-items: flex-start;

    flex-direction: column;
  }

}



/* ============================================================
   NEXTGEN · SHOP COMPACT + HJAERTA FACTS · 2026-09-17
   ============================================================ */

/*
 * Gleiche Gestaltung.
 * Weniger Höhe, weniger Luft, gleiche Wertigkeit.
 */

.nx-shop-grid {
  gap: 20px;
}


.nx-shop-card {
  border-radius: 24px;
}


.nx-shop-media {
  min-height: 315px;
  padding: 28px;
}


.nx-shop-media img {
  height: 275px;
}


.nx-shop-content {
  padding: 25px 26px 26px;
}


.nx-shop-meta {
  margin-bottom: 15px;
}


.nx-shop-content h3 {
  font-size:
    clamp(
      1.85rem,
      2.6vw,
      2.55rem
    );
}


.nx-shop-subtitle {
  margin-top: 10px;
}


.nx-shop-text {
  margin-top: 14px;
  line-height: 1.58;
}


.nx-shop-attrs {
  margin-top: 21px;
}


.nx-shop-attrs-title {
  padding-top: 13px;
  padding-bottom: 9px;
}


.nx-shop-attr {
  padding: 7px 0;
}


.nx-shop-note {
  margin-top: 17px;
  padding: 12px 14px;
}


.nx-shop-bottom {
  margin-top: 21px;
  padding-top: 18px;
}


@media (max-width:680px) {

  .nx-shop-media {
    min-height: 240px;
    padding: 20px;
  }


  .nx-shop-media img {
    height: 225px;
  }


  .nx-shop-content {
    padding: 22px;
  }

}