/* ================================================================
   Nova-style Product List Page  (nova-pro-list.css)
   Replicated from nova-china.com/pro1/  layout
   ================================================================ */

/* ===== Inner Banner ===== */
.npl-banner {
  position: relative;
  overflow: hidden;
  margin-top: 70px;
}
.npl-banner img {
  width: 100%;
  display: block;
  max-height: 320px;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-animation: nplScale 4s ease both;
          animation: nplScale 4s ease both;
}
@-webkit-keyframes nplScale {
  0% { -webkit-transform: scale(1.08); transform: scale(1.08); }
  100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes nplScale {
  0% { -webkit-transform: scale(1.08); transform: scale(1.08); }
  100% { -webkit-transform: scale(1); transform: scale(1); }
}
.npl-banner::after {
  content: '';
  display: block;
  width: 100%;
  height: 70%;
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.8), rgba(0,0,0,0));
  background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
  position: absolute;
  left: 0;
  bottom: 0;
}
.npl-banner__text {
  position: absolute;
  left: 50%;
  bottom: 8rem;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  white-space: nowrap;
}
.npl-banner__text h4 {
  font-size: 20px;
  color: #E8890C;
  margin-bottom: 16px;
  -webkit-animation: nplRise 0.9s ease-out 0.1s both;
          animation: nplRise 0.9s ease-out 0.1s both;
}
.npl-banner__text h5 {
  font-size: 36px;
  font-weight: bold;
  color: #fff;
  -webkit-animation: nplRise 0.9s ease-out 0.3s both;
          animation: nplRise 0.9s ease-out 0.3s both;
}
@-webkit-keyframes nplRise {
  from { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
  to   { opacity: 1; -webkit-transform: translateY(0);    transform: translateY(0); }
}
@keyframes nplRise {
  from { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
  to   { opacity: 1; -webkit-transform: translateY(0);    transform: translateY(0); }
}

/* ===== Tab Navigation ===== */
.npl-tabnav {
  background: #f5f5f5;
  position: relative;
}
.npl-tabnav__inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 44px;
  padding-bottom: 44px;
  gap: 56px;
}
.npl-tabnav__btn {
  font-size: 22px;
  color: rgba(54,54,54,0.45);
  cursor: pointer;
  position: relative;
  padding-bottom: 6px;
  border-bottom: 3px solid transparent;
  -webkit-transition: color 0.25s, border-color 0.25s;
          transition: color 0.25s, border-color 0.25s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: inherit;
  line-height: 1;
}
.npl-tabnav__btn.is-active,
.npl-tabnav__btn:hover {
  color: #E8890C;
  border-bottom-color: #E8890C;
}

/* ===== Product sections ===== */
.npl-body {
  background: #f5f5f5;
  padding: 0 0 60px;
}
/* Tab panels */
.npl-panel { display: none; }
.npl-panel.is-active { display: block; }

/* max-width wrapper */
.npl-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* Section block */
.npl-seg {
  margin-bottom: 80px;
  padding-top: 70px;
}

/* Section heading (ser_h3 style) */
.npl-seg__title {
  font-size: 40px;
  font-weight: bold;
  color: #28282b;
  padding-bottom: 20px;
  position: relative;
  margin: 0 0 50px;
}
.npl-seg__title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 4px;
  background: #E8890C;
}

/* Product grid — 4 columns */
.npl-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.npl-grid__item {
  width: 23.5%;
  margin-right: 2%;
  margin-bottom: 3%;
  list-style: none;
}
.npl-grid__item:nth-child(4n) {
  margin-right: 0;
}

/* Product card */
.npl-card {
  display: block;
  text-decoration: none;
  cursor: pointer;
}
.npl-card__img {
  overflow: hidden;
  background: #e0e0e0;
  position: relative;
  padding-top: 75%; /* 4:3 */
}
.npl-card__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  -webkit-transition: -webkit-transform 0.35s ease;
          transition: transform 0.35s ease;
}
.npl-card:hover .npl-card__img img {
  -webkit-transform: scale(1.08);
          transform: scale(1.08);
}
.npl-card h4 {
  font-size: 20px;
  font-weight: bold;
  color: #28282b;
  text-align: center;
  margin: 16px 0 0;
  line-height: 1.4;
  -webkit-transition: color 0.2s;
          transition: color 0.2s;
}
.npl-card:hover h4 { color: #E8890C; }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .npl-grid__item {
    width: 31%;
    margin-right: 3.5%;
  }
  .npl-grid__item:nth-child(4n) { margin-right: 3.5%; }
  .npl-grid__item:nth-child(3n) { margin-right: 0; }
  .npl-banner__text h5 { font-size: 28px; }
  .npl-seg__title { font-size: 32px; }
}
@media (max-width: 768px) {
  .npl-banner { margin-top: 70px; }
  .npl-banner__text { bottom: 4rem; }
  .npl-banner__text h5 { font-size: 20px; }
  .npl-banner__text h4 { font-size: 14px; }
  .npl-tabnav__inner { padding: 28px 20px; gap: 28px; }
  .npl-tabnav__btn { font-size: 16px; }
  .npl-container { padding: 0 20px; }
  .npl-seg { padding-top: 40px; margin-bottom: 50px; }
  .npl-seg__title { font-size: 24px; }
  .npl-grid__item {
    width: 48%;
    margin-right: 4%;
  }
  .npl-grid__item:nth-child(3n) { margin-right: 4%; }
  .npl-grid__item:nth-child(2n) { margin-right: 0; }
  .npl-card h4 { font-size: 14px; }
}