/* JT New Arrivals widget */
.na-wrap {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 20px;
  font-family: 'Poppins', sans-serif;
}

.na-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 30px;
  flex-wrap: wrap;
}
.na-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--na-eyebrow-color, #FD317E);
  margin: 0 0 9px;
}
.na-eyebrow::before { content: ""; width: 22px; height: 1.5px; background: var(--na-eyebrow-color, #FD317E); }
.na-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--na-title-color, #1a1a1a);
  margin: 0;
  letter-spacing: -.5px;
}

.na-viewall {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--na-viewall-text-color, #ffffff) !important;
  text-decoration: none;
  background: linear-gradient(135deg, var(--na-accent, #FD317E), var(--na-accent-light, #ff5c96));
  padding: 11px 12px 11px 22px;
  border-radius: 28px;
  transition: all .3s ease;
  flex-shrink: 0;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--na-accent, #FD317E) 30%, transparent);
}
.na-viewall span {
  color: var(--na-viewall-text-color, #ffffff) !important;
  width: 26px; height: 26px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  margin: 0;
  font-size: 12px;
  transition: transform .3s ease;
}
.na-viewall:hover { transform: translateY(-2px); box-shadow: 0 12px 26px color-mix(in srgb, var(--na-accent, #FD317E) 40%, transparent); }
.na-viewall:hover span { transform: translateX(3px); }

/* Product grid - cards use the site-wide shared product card style (my_joom_get_archive_product_card_html) */
.na-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }

/* Some sites' Elementor Global Kit sets a custom Heading (h1-h6) color/size in
   Site Settings -> Global Fonts, which is more specific than a plain widget
   class and silently overrides the shared product-card title on this widget only. */
.na-grid .mj-product-name,
.na-grid .mj-v2-title,
.na-grid .mj-v3-title {
  font-size: var(--mj-shop-title-font-size, 14px) !important;
}
@media (max-width: 1024px) {
  .na-grid .mj-v2-title { font-size: 14px !important; }
  .na-grid .mj-v3-title { font-size: 12px !important; }
}

/* Tablet */
@media (max-width: 992px) {
  .na-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .na-title { font-size: 27px; }
}

/* Mobile */
@media (max-width: 576px) {
  .na-wrap { padding: 0 14px; }
  .na-header { margin-bottom: 18px; }
  .na-eyebrow { display: none; }
  .na-title { font-size: 20px; margin: 0; }
  .na-viewall { font-size: 10.5px; padding: 7px 6px 7px 14px; gap: 7px; }
  .na-viewall span { width: 20px; height: 20px; font-size: 10px; }
  .na-grid { grid-template-columns: repeat(2, 1fr); gap: 11px; }
}