/* ============================================================
   NMS Product Page Styles — Manufacturer Mirror Template
   ============================================================ */

/* ── Product Layout ──────────────────────────────────────────── */

.product-sidebar {
  position: sticky;
  top: calc(var(--nms-navbar-h) + 1.5rem);
  align-self: flex-start;
}

/* ── Image Gallery ───────────────────────────────────────────── */
.product-gallery { margin-bottom: 2rem; }

.gallery-main {
  background:    var(--nms-surface);
  border:        1px solid var(--nms-border);
  border-radius: var(--nms-radius-lg);
  overflow:      hidden;
  display:       flex;
  align-items:   center;
  justify-content: center;
  min-height:    260px;
  max-height:    360px;
  cursor:        zoom-in;
  transition:    border-color 0.2s;
  margin-bottom: 0.75rem;
}
.gallery-main:hover { border-color: var(--nms-accent); }

.gallery-main img {
  max-width:  100%;
  max-height: 360px;
  object-fit: contain;
  padding:    1rem;
}

.gallery-thumbs {
  display:   flex;
  gap:       0.5rem;
  flex-wrap: wrap;
}

.gallery-thumb {
  width:         72px;
  height:        72px;
  border:        1px solid var(--nms-border);
  border-radius: var(--nms-radius);
  overflow:      hidden;
  cursor:        pointer;
  transition:    var(--nms-transition);
  background:    var(--nms-surface);
  flex-shrink:   0;
}
.gallery-thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}
.gallery-thumb:hover,
.gallery-thumb.active { border-color: var(--nms-accent); }

/* Lightbox overlay */
.gallery-lightbox {
  display:          none;
  position:         fixed;
  inset:            0;
  z-index:          9999;
  background:       rgba(0, 0, 0, 0.92);
  align-items:      center;
  justify-content:  center;
  cursor:           zoom-out;
}
.gallery-lightbox.open { display: flex; }
.gallery-lightbox img {
  max-width:  90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--nms-radius);
}
.lightbox-close {
  position:   absolute;
  top:        1.5rem;
  right:      1.5rem;
  color:      #fff;
  font-size:  2rem;
  cursor:     pointer;
  line-height: 1;
  opacity:    0.7;
  background: none;
  border:     none;
  padding:    0;
}
.lightbox-close:hover { opacity: 1; }

/* ── Discontinuation / Alert Panel ──────────────────────────── */
.product-alert {
  display:       flex;
  align-items:   flex-start;
  gap:           0.75rem;
  background:    #fff3cd;
  border:        1px solid #ffc107;
  border-left:   4px solid #ffc107;
  border-radius: var(--nms-radius);
  padding:       0.875rem 1rem;
  margin-bottom: 1.5rem;
  font-size:     0.9375rem;
  color:         #664d03;
  line-height:   1.5;
}
.product-alert-icon {
  color:       #e6a800;
  font-size:   1.1rem;
  flex-shrink: 0;
  margin-top:  0.1rem;
}
.product-alert a {
  color:           #664d03;
  font-weight:     600;
  text-decoration: underline;
}
.product-alert a:hover { color: #3d2d00; }

/* ── Section Blocks ──────────────────────────────────────────── */
.product-section {
  margin-bottom: 2.5rem;
}

.product-section-title {
  font-size:      1.0625rem;
  font-weight:    700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color:          var(--nms-accent);
  padding-bottom: 0.6rem;
  border-bottom:  1px solid var(--nms-border);
  margin-bottom:  1rem;
}

.product-intro p {
  font-size:     1.0625rem;
  color:         var(--nms-text);
  line-height:   1.75;
  margin-bottom: 0.85rem;
}
.product-intro p:last-child { margin-bottom: 0; }

.product-sidebar .gallery-main {
  min-height: 200px;
  max-height: 260px;
}

/* ── Applications grid ───────────────────────────────────────── */
.applications-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   0.5rem;
}

.app-item {
  display:       flex;
  align-items:   flex-start;
  gap:           0.6rem;
  font-size:     0.9375rem;
  color:         var(--nms-text);
  padding:       0.5rem 0.75rem;
  border-radius: var(--nms-radius);
  border:        1px solid transparent;
  transition:    var(--nms-transition);
}
.app-item:hover { border-color: var(--nms-border); background: var(--nms-surface-2); }
.app-item a { color: var(--nms-text); }
.app-item a:hover { color: var(--nms-accent); }
.app-item::before {
  content:    "›";
  color:      var(--nms-accent);
  font-size:  1.1rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: -1px;
}

/* ── Feature Cards ───────────────────────────────────────────── */
.features-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1rem;
}
@media (max-width: 575.98px) {
  .features-grid { grid-template-columns: 1fr; }
}

.feature-card {
  background:    var(--nms-surface-2);
  border:        1px solid var(--nms-border);
  border-radius: var(--nms-radius-lg);
  padding:       1.25rem;
  transition:    var(--nms-transition);
}
.feature-card:hover { border-color: var(--nms-accent); }
.feature-card-heading {
  font-size:    0.9375rem;
  font-weight:  600;
  color:        var(--nms-heading);
  margin-bottom: 0.4rem;
  display:      flex;
  align-items:  center;
  gap:          0.5rem;
}
.feature-card-heading::before {
  content:          "";
  display:          inline-block;
  width:            6px;
  height:           6px;
  border-radius:    50%;
  background-color: var(--nms-accent);
  flex-shrink:      0;
}
.feature-card-body {
  font-size:  0.9rem;
  color:      var(--nms-text-muted);
  margin:     0;
}

/* ── Specifications Table ────────────────────────────────────── */
.specs-table {
  width:       100%;
  border-collapse: separate;
  border-spacing: 0;
}
.specs-table tr:first-child td,
.specs-table tr:first-child th { padding-top: 0; }

.specs-table tr:not(:last-child) td,
.specs-table tr:not(:last-child) th {
  border-bottom: 1px solid var(--nms-border);
}

.specs-table th {
  padding:     0.6rem 0;
  font-size:   0.9375rem;
  font-weight: 700;
  color:       var(--nms-heading);
  border-bottom: 1px solid var(--nms-border);
  vertical-align: bottom;
}
.specs-table td {
  padding:    0.6rem 0;
  font-size:  0.9375rem;
  vertical-align: top;
}
.specs-table:not(.specs-table--config) td:first-child {
  color:       var(--nms-text);
  width:       45%;
  padding-right: 1rem;
  font-weight: 600;
}
.specs-table--config td.config-feature {
  font-weight: 600;
}
.specs-table--config td:not(:last-child),
.specs-table--config th:not(:last-child) {
  border-right: 1px solid var(--nms-border);
  padding-right: 1rem;
}
.specs-table--config td:not(:first-child),
.specs-table--config th:not(:first-child) {
  padding-left: 1rem;
}
.specs-table td:last-child {
  color: var(--nms-text);
}

.specs-standards-list { list-style: none; padding: 0; margin: 0; }
.specs-standards-list li {
  display:     flex;
  align-items: flex-start;
  gap:         0.5rem;
  font-size:   0.9375rem;
  padding:     0.35rem 0;
  color:       var(--nms-text);
  border-bottom: 1px solid var(--nms-border);
}
.specs-standards-list li:last-child { border-bottom: none; }
.specs-standards-list .std-code {
  color: var(--nms-accent);
  white-space:  nowrap;
  min-width:    140px;
  font-size:    0.85rem;
}

/* ── Type Approvals ──────────────────────────────────────────── */
.approvals-list { list-style: none; padding: 0; margin: 0; }
.approvals-list li {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  padding:     0.6rem 0;
  border-bottom: 1px solid var(--nms-border);
}
.approvals-list li:last-child { border-bottom: none; }
.approvals-list .approval-name {
  font-weight: 600;
  min-width:   60px;
  color:       var(--nms-text);
}
.approvals-list .approval-notes {
  font-size: 0.875rem;
  color:     var(--nms-text-muted);
  flex:      1;
}
.approvals-list .approval-pdf {
  font-size:  0.8125rem;
  font-weight: 600;
  display:    flex;
  align-items: center;
  gap:        0.3rem;
  white-space: nowrap;
}

/* ── Video ───────────────────────────────────────────────────── */
.product-video {
  border-radius: var(--nms-radius-lg);
  overflow:      hidden;
  border:        1px solid var(--nms-border);
  background:    #000;
}
.product-video video {
  width:   100%;
  display: block;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar-card {
  background:    var(--nms-surface);
  border:        1px solid var(--nms-border);
  border-radius: var(--nms-radius-lg);
  overflow:      hidden;
  margin-bottom: 1.25rem;
}
.sidebar-card-header {
  background:   var(--nms-surface-2);
  border-bottom: 1px solid var(--nms-border);
  padding:      0.875rem 1.25rem;
  font-size:    0.75rem;
  font-weight:  600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:        var(--nms-accent);
}
.sidebar-links-list {
  list-style: none;
  padding:    0;
  margin:     0;
}
.sidebar-links-list li { border-bottom: 1px solid var(--nms-border); }
.sidebar-links-list li:last-child { border-bottom: none; }
.sidebar-links-list a {
  display:    block;
  padding:    0.7rem 1.25rem;
  font-size:  0.9375rem;
  color:      var(--nms-text-muted);
  transition: var(--nms-transition);
}
.sidebar-links-list a:hover {
  color:            var(--nms-accent);
  background-color: var(--nms-accent-dim);
}
.sidebar-links-list .active-link {
  color:            var(--nms-accent);
  background-color: var(--nms-accent-dim);
  font-weight:      600;
}

.sidebar-cta {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.sidebar-cta .btn { width: 100%; text-align: center; }

/* ── Manufacturer badge ──────────────────────────────────────── */
.manufacturer-badge {
  display:       flex;
  align-items:   center;
  gap:           0.75rem;
  background:    var(--nms-surface-2);
  border:        1px solid var(--nms-border);
  border-radius: var(--nms-radius);
  padding:       0.75rem 1rem;
  margin-bottom: 1.5rem;
  font-size:     0.875rem;
  color:         var(--nms-text-muted);
}
.manufacturer-badge strong { color: var(--nms-text); }

/* ── Products Listing — Sidebar ─────────────────────────────── */
.products-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.products-sidebar-section {
  padding: 1rem 0;
  border-bottom: 1px solid var(--nms-border);
}
.products-sidebar-section:first-child { padding-top: 0; }

.products-sidebar-label {
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--nms-text-muted);
  margin-bottom:  0.5rem;
}

.products-sidenav {
  display: flex;
  flex-direction: column;
}

.products-sidenav-link {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0.4rem 0.65rem;
  font-size:       0.875rem;
  color:           var(--nms-text-muted);
  border-left:     2px solid transparent;
  border-radius:   0 var(--nms-radius) var(--nms-radius) 0;
  transition:      var(--nms-transition);
  text-decoration: none;
  line-height:     1.4;
}
.products-sidenav-link:hover {
  color:             var(--nms-accent);
  border-left-color: var(--nms-accent);
  background:        var(--nms-accent-dim);
}
.products-sidenav-link.active {
  color:             var(--nms-accent);
  border-left-color: var(--nms-accent);
  font-weight:       600;
  background:        var(--nms-accent-dim);
}
.products-sidenav-link--ext .bi {
  font-size: 0.65rem;
  opacity:   0.5;
  flex-shrink: 0;
}

.products-sidebar-webinars {
  padding:       1rem;
  margin-top:    0.25rem;
  background:    var(--nms-surface-2);
  border:        1px solid var(--nms-border);
  border-radius: var(--nms-radius-lg);
}


/* Stack sidebar above content on mobile */
@media (max-width: 991.98px) {
  .products-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--nms-border);
  }
  .products-sidebar-section {
    flex: 1 1 180px;
    border-bottom: none;
    padding: 0;
  }
  .products-sidebar-webinars { flex: 1 1 220px; }
}

/* ── Authorised Distributor Banner ──────────────────────────── */
.distributor-banner {
  background:    var(--nms-surface-2);
  border-bottom: 1px solid var(--nms-border);
  padding:       0.6rem 0;
}
.distributor-banner-inner {
  display:     flex;
  align-items: center;
  gap:         1.25rem;
}
.distributor-banner-logo {
  height:     40px;
  width:      auto;
  flex-shrink: 0;
}
.distributor-banner-text {
  display:       flex;
  flex-direction: column;
  gap:           0.15rem;
  font-size:     0.9rem;
  line-height:   1.4;
}
.distributor-banner-text span {
  color: var(--nms-text-muted);
}
@media (max-width: 575.98px) {
  .distributor-banner-logo { height: 30px; }
  .distributor-banner-text span { display: none; }
}

/* ── Products Listing Page ───────────────────────────────────── */
.products-listing-page .product-body section {
  padding: 0;
}
.product-list-card {
  background:    var(--nms-surface);
  border:        1px solid var(--nms-border);
  border-radius: var(--nms-radius-lg);
  overflow:      hidden;
  height:        100%;
  transition:    var(--nms-transition);
  display:       flex;
  flex-direction: column;
}
.product-list-card:hover {
  border-color: var(--nms-accent);
  transform:    translateY(-2px);
  box-shadow:   0 8px 32px rgba(0, 180, 216, 0.1);
}
.product-list-card-img {
  background:    var(--nms-surface-2);
  display:       flex;
  align-items:   center;
  justify-content: center;
  padding:       1.5rem;
  height:        180px;
  border-bottom: 1px solid var(--nms-border);
  position:      relative;
}

.product-status-badge {
  position:      absolute;
  top:           0.6rem;
  left:          0.6rem;
  font-size:     0.7rem;
  font-weight:   700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding:       0.2rem 0.55rem;
  border-radius: var(--nms-radius);
  line-height:   1.4;
  z-index:       1;
  color:         #fff;
}
.product-status-badge--discontinued { background: #6c757d; }
.product-status-badge--superseded   { background: #b45309; }
.product-list-card-img img {
  max-height: 130px;
  max-width:  100%;
  object-fit: contain;
}
.product-list-card-body {
  padding:   1.25rem;
  flex:      1;
  display:   flex;
  flex-direction: column;
}
.product-list-card-title {
  font-size:    1rem;
  font-weight:  600;
  margin-bottom: 0.5rem;
  color:        var(--nms-heading);
}
.product-list-card-desc {
  font-size:  0.875rem;
  color:      var(--nms-text-muted);
  flex:       1;
  margin-bottom: 1rem;
}
.product-list-card-footer {
  display:       flex;
  gap:           0.5rem;
  align-items:   center;
  flex-wrap:     wrap;
}

/* ── Products Filter Bar ─────────────────────────────────────── */
.products-filter-bar {
  background:     var(--nms-surface);
  border:         1px solid var(--nms-border);
  border-radius:  var(--nms-radius-lg);
  padding:        1rem 1.25rem;
  margin-bottom:  1.75rem;
}

.filter-row {
  display:     flex;
  align-items: flex-start;
  gap:         0.75rem;
  flex-wrap:   wrap;
}

.filter-label {
  font-size:      0.68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--nms-text-muted);
  white-space:    nowrap;
  padding-top:    0.3rem;
  min-width:      5.5rem;
  flex-shrink:    0;
}

.filter-chips {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.375rem;
  flex:      1;
}

.filter-chip {
  display:       inline-flex;
  align-items:   center;
  padding:       0.25rem 0.75rem;
  border-radius: 20px;
  border:        1px solid var(--nms-border);
  background:    transparent;
  color:         var(--nms-text-muted);
  font-size:     0.8125rem;
  font-weight:   500;
  cursor:        pointer;
  transition:    var(--nms-transition);
  white-space:   nowrap;
  line-height:   1.4;
}

.filter-chip:hover {
  border-color: var(--nms-accent);
  color:        var(--nms-accent);
  background:   var(--nms-accent-dim);
}

.filter-chip.active {
  background:   var(--nms-accent);
  border-color: var(--nms-accent);
  color:        #fff;
}

.filter-summary {
  display:     flex;
  align-items: center;
  border-top:  1px solid var(--nms-border);
  padding-top: 0.6rem;
  margin-top:  0.25rem !important;
}

/* No-results placeholder */
.products-no-results {
  padding:       3rem 1.5rem;
  text-align:    center;
  color:         var(--nms-text-muted);
  border:        1px dashed var(--nms-border);
  border-radius: var(--nms-radius-lg);
  margin-bottom: 1.75rem;
}

.products-no-results i {
  font-size:     2.5rem;
  opacity:       0.35;
  margin-bottom: 0.75rem;
  display:       block;
}

/* Responsive: stack label above chips on very small screens */
@media (max-width: 479.98px) {
  .filter-label { min-width: unset; }
  .filter-row   { gap: 0.5rem; }
}