/** Shopify CDN: Minification failed

Line 346:4 Unexpected "{"
Line 458:0 Expected "}" to go with "{"

**/
/* NJ Product Card — same visual design as the "NJ DTF Offers" card,
   de-scoped so it can drop into the theme's default product grid
   (sections/main-collection-product-grid.liquid) without needing the
   .nj-off section wrapper.

   Copy into your Horizon/Combine theme:
   - assets/nj-product-card.css
   - snippets/nj-product-card.liquid
   - (also needs assets/nj-ui.css, already used by the other NJ sections)
*/

/* Section width + spacing for main-collection-product-grid.liquid.
   Matches NJ sections: full / normal 1570 / narrow 1140. */

.nj-pgrid {
  padding-top: var(--nj-pgrid-pad-top, 0px);
  padding-bottom: var(--nj-pgrid-pad-bottom, 0px);
}

.nj-pgrid--width-full {
  max-width: 100% !important;
}

.nj-pgrid--width-normal {
  max-width: 1570px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.nj-pgrid--width-narrow {
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media screen and (max-width: 749px) {
  .nj-pgrid {
    padding-top: var(--nj-pgrid-pad-top-m, 0px);
    padding-bottom: var(--nj-pgrid-pad-bottom-m, 0px);
  }
}

/* Mega menu product row width — sized to fit the actual number of cards
   (--mega-cols, set inline by site-nav-mega.liquid from the real item
   count) at a fixed ideal card width, capped at 100% of the panel.
   This replaces the old manual "Row width %" setting, which left a big
   empty gap whenever fewer products were picked than the slider assumed.
   Add more products to the block (or raise "Products per row") later —
   the row grows to match automatically, no width tuning needed. */

.mega-product-row {
  --nj-mega-card-w: 340px;
  --nj-mega-gap: 28px;
  width: min(100%, calc(var(--mega-cols, 3) * var(--nj-mega-card-w) + (var(--mega-cols, 3) - 1) * var(--nj-mega-gap)));
  margin-inline: auto;
}

@media screen and (max-width: 749px) {
  .mega-product-row {
    width: 100%;
  }
}

.nj-pcard,
.nj-pcard *,
.nj-pcard *::before,
.nj-pcard *::after {
  box-sizing: border-box;
}

.nj-pcard {
  --nj-pcard-font-body: Inter, var(--font-body--family, sans-serif);
  --nj-pcard-font-heading: Sora, Manrope, var(--font-heading--family, sans-serif);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--nj-pcard-border, #eceaec);
  border-radius: 24px;
  background: var(--nj-pcard-bg, #ffffff);
  font-family: var(--nj-pcard-font-body);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.nj-pcard:hover,
.nj-pcard:focus-visible {
  border-color: var(--nj-pcard-accent, #b9098b);
  box-shadow: 0 8px 24px rgba(8, 8, 8, 0.1);
  transform: translateY(-2px);
}

.nj-pcard__media {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  height: var(--nj-pcard-img-h, 300px);
}

.nj-pcard .nj-pcard__img,
.nj-pcard__placeholder {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
  background: #f3f1f3;
}

.nj-pcard--1 .nj-pcard__img {
  object-position: center 50%;
}

.nj-pcard--2 .nj-pcard__img {
  object-position: 44% center;
}

.nj-pcard--3 .nj-pcard__img {
  object-position: 44% center;
}

.nj-pcard__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  max-width: calc(100% - 32px);
  overflow: hidden;
  padding: 7px 13px;
  border-radius: 111px;
  background: rgba(8, 8, 8, 0.75);
  backdrop-filter: blur(2px);
  color: #fff !important;
  font-family: var(--nj-pcard-font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nj-pcard:hover .nj-pcard__badge,
.nj-pcard:focus-visible .nj-pcard__badge {
  color: #fff !important;
}

.nj-pcard__copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  padding: 27px;
}

.nj-pcard .nj-pcard__title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--nj-pcard-heading, #080808);
  font-family: var(--nj-pcard-font-heading);
  font-size: 19px;
  font-weight: 700;
  line-height: 31px;
  min-height: 31px;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.nj-pcard .nj-pcard__text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--nj-pcard-muted, #78767c);
  font-family: var(--nj-pcard-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  min-height: 50px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.nj-pcard__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
}

.nj-pcard__price {
  color: var(--nj-pcard-accent, #b9098b);
  font-family: var(--nj-pcard-font-body);
  font-size: 17px;
  font-weight: 800;
  line-height: 27px;
  min-width: 0;
  white-space: nowrap;
}

.nj-pcard__from {
  font-weight: 600;
  margin-right: 0.2em;
}

.nj-pcard__price sup {
  font-size: 0.65em;
  font-weight: 800;
  line-height: 0;
  vertical-align: super;
}

.nj-pcard__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 39px;
  padding: 11px 20px;
  border: 0;
  border-radius: 111px;
  background: var(--nj-pcard-btn-bg, #080808);
  color: var(--nj-pcard-btn-text, #ffffff) !important;
  font-family: var(--nj-pcard-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* Mega menu: contain the full image. Card media height follows
   the image ratio, so zoom/resize never crops left or right. */
.mega-product-row .nj-pcard {
  height: auto;
}
.mega-product-row .nj-pcard__media {
  position: relative;
  width: 100%;
  height: auto !important;
  aspect-ratio: var(--nj-pcard-img-ratio, 1);
}
.mega-product-row .nj-pcard .nj-pcard__img,
.mega-product-row .nj-pcard__placeholder {
  position: absolute;
  inset: 0;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #f3f1f3;
}
.mega-product-row .nj-pcard__copy {
  padding: 20px;
}
.mega-product-row .nj-pcard__row {
  gap: 8px;
}

/* Desktop mega-menu titles were clamped to 1 line at the full 19px
   product-grid size, so longer titles got cut off mid-word ("...").
   Smaller size + 2 lines so the whole title is legible. */
.site-nav.style--classic .mega-product-row .nj-pcard .nj-pcard__title {
  font-size: 16px;
  line-height: 21px;
  min-height: 42px;
  -webkit-line-clamp: 2;
}

.nj-pcard--compact {
  border-radius: 16px;
}
.nj-pcard--compact .nj-pcard__media {
  height: var(--nj-pcard-img-h, 140px);
}
.nj-pcard--compact .nj-pcard__copy {
  gap: 4px;
  padding: 14px;
}
.nj-pcard--compact .nj-pcard__text {
  display: none;
}
.nj-pcard--compact .nj-pcard__title {
  font-size: 14px;
  line-height: 20px;
  min-height: 20px;
}
.nj-pcard--compact .nj-pcard__row {
  padding-top: 8px;
  gap: 8px;
}
.nj-pcard--compact .nj-pcard__price {
  font-size: 14px;
  line-height: 20px;
}
.nj-pcard--compact .nj-pcard__btn {
  min-height: 30px;
  padding: 6px 14px;
  font-size: 12px;
}

@media screen and (max-width: 749px) {
  .nj-pcard__media {
    height: 220px;
  }
  .mega-product-row .nj-pcard__media {
    height: auto !important;
  }
  .nj-pcard--compact .nj-pcard__media {
    height: var(--nj-pcard-img-h, 110px);
  }
  .style--sidebar .mega-product-row {
    width: 100% !important;
  }
  .style--sidebar .nj-pcard--compact .nj-pcard__row {
    flex-direction: column;
    align-items: stretch;
  }
  .style--sidebar .nj-pcard--compact .nj-pcard__btn {
    width: 100%;
  }
  .style--sidebar .nj-pcard--compact .nj-pcard__copy {
    padding: 10px;
  }
  .style--sidebar .nj-pcard--compact .nj-pcard__title {
    font-size: 13px;
    line-height: 18px;
    min-height: 18px;
    -webkit-line-clamp: 2;
  }
  .nj-pcard__btn {width: max-content !important;
    padding: 0 20px !important;
    {}
}

/* ==== Mega menu — mobile/sidebar card fix ====
   The sidebar mega-menu renders the FULL-size nj-pcard (19px title,
   16px description, 27px padding, full button) inside a narrow
   2-column grid — it never gets the .nj-pcard--compact treatment.
   These rules scale the card down for that context specifically,
   mirroring the existing .nj-pcard--compact density above. */

.style--sidebar .mega-product-row .nj-pcard {
  border-radius: 16px;
}

.style--sidebar .mega-product-row .nj-pcard__copy {
  gap: 4px;
  padding: 12px;
}

.style--sidebar .mega-product-row .nj-pcard__text {
  display: none;
}

.style--sidebar .mega-product-row .nj-pcard .nj-pcard__title {
  font-size: 13px;
  line-height: 18px;
  min-height: 18px;
  -webkit-line-clamp: 2;
}

.style--sidebar .mega-product-row .nj-pcard__row {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding-top: 6px;
}

.style--sidebar .mega-product-row .nj-pcard .nj-pcard__price {
  font-size: 13px;
  line-height: 18px;
}

.style--sidebar .mega-product-row .nj-pcard__btn {
  width: 100%;
  min-height: 30px;
  padding: 6px 14px;
  font-size: 12px;
}

/* Sidebar (mobile) 2-column grid: when the count is odd, the last card
   is left stranded alone on the left of its row. Span it across both
   columns and center it instead. Kicks in automatically at 3, 5, 7... */
.style--sidebar .mega-product-row > .mega-product-cell:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  width: calc(50% - 8px);
  margin-inline: auto;
}

/* Loading skeleton — shown by the theme's filter/sort JS while the grid
   is being re-fetched (see [data-js-product-item-skeleton] usage). */

.nj-pcard-skeleton__block,
.nj-pcard-skeleton__line {
  background: linear-gradient(90deg, #eceaec 25%, #f5f3f5 37%, #eceaec 63%);
  background-size: 400% 100%;
  animation: nj-pcard-skeleton-shine 1.4s ease infinite;
  border-radius: 6px;
}

.nj-pcard-skeleton__line {
  height: 14px;
  margin-bottom: 10px;
}

.nj-pcard-skeleton__line--title {
  width: 70%;
  height: 20px;
}

.nj-pcard-skeleton__line--short {
  width: 50%;
  margin-bottom: 0;
}

.nj-pcard-skeleton__line--price {
  width: 60px;
  height: 20px;
  margin-bottom: 0;
}

.nj-pcard-skeleton__line--btn {
  width: 90px;
  height: 39px;
  border-radius: 111px;
  margin-bottom: 0;
}

@keyframes nj-pcard-skeleton-shine {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nj-pcard-skeleton__block,
  .nj-pcard-skeleton__line {
    animation: none;
  }
}