/*
 * Technogen Enterprise product landing-page correction — 15 October 2026.
 * Applies only to the product page. No changes to CMS data, SEO, specifications, or category pages.
 */

/* 1. All numbered section links visible at normal desktop widths: two compact rows. */
.product-anchor-nav {
  overflow: visible !important;
  background: #fff !important;
  border-bottom: 1px solid #d7e1e6 !important;
  box-shadow: 0 5px 18px rgba(11, 37, 51, .055) !important;
}
.product-anchor-nav .container {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 5px !important;
  align-items: stretch !important;
  overflow: visible !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.product-anchor-nav a,
.product-anchor-nav a:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid #dce5e9 !important;
  border-bottom: 2px solid #dce5e9 !important;
  border-radius: 5px !important;
  background: #f9fbfb !important;
  white-space: normal !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  text-transform: none !important;
}
.product-anchor-nav a:hover,
.product-anchor-nav a:focus-visible {
  border-bottom-color: #c98b25 !important;
  background: #f1f7f8 !important;
}
.product-anchor-nav .product-nav-number {
  color: #bb7b12;
  font-size: 15px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.product-anchor-nav .product-nav-label {
  min-width: 0;
}
.product-anchor-nav .product-nav-inquiry {
  background: #e9f3f5 !important;
  border-color: #b7d4dc !important;
}

/* 2. A balanced, rectangular manufacturer-grade masthead. No skewed oversized image box. */
.product-masthead {
  padding: 42px 0 46px !important;
  background: linear-gradient(111deg, #102f40 0%, #153d50 56%, #215a6c 100%) !important;
}
.product-masthead-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr) !important;
  align-items: center !important;
  gap: clamp(26px, 3.5vw, 54px) !important;
}
.product-masthead-grid > * { min-width: 0 !important; }
.product-masthead h1 {
  max-width: 730px !important;
  font-size: clamp(33px, 3.5vw, 52px) !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;
}
.product-masthead .product-summary {
  max-width: 680px !important;
  line-height: 1.63 !important;
}
.product-masthead .breadcrumbs { margin-bottom: 22px !important; }
.product-masthead-visual {
  width: 100% !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}
.product-masthead .product-hero-machine-card {
  min-height: 320px !important;
  height: auto !important;
  width: 100% !important;
  max-width: none !important;
  padding: 23px !important;
  overflow: hidden !important;
  border: 1px solid #e0e8eb !important;
  border-radius: 12px !important;
  clip-path: none !important;
  isolation: isolate !important;
  background: linear-gradient(135deg, #fff 0%, #f5f9fa 100%) !important;
  box-shadow: 0 16px 35px rgba(0, 13, 25, .16) !important;
}
.product-masthead .product-hero-machine-card::before {
  display: none !important;
}
.product-masthead .product-hero-machine-card img {
  display: block !important;
  width: 100% !important;
  height: 288px !important;
  max-height: 288px !important;
  margin: auto !important;
  object-fit: contain !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}
.product-masthead .product-badges span {
  border-radius: 3px !important;
  background: rgba(245, 250, 252, .96) !important;
}

/* 3. Increase the small, gold section numbers; retain a single-line heading. */
.product-section-heading > span {
  width: 50px !important;
  min-width: 50px !important;
  height: 50px !important;
  flex: 0 0 50px !important;
  color: #b8770e !important;
  border-color: #d6e2e6 !important;
  background: #fdfcf9 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: .015em !important;
}

/* 4. Readable, step-by-step Operating Principle. PHP repairs joined titles for display only. */
.operating-principle-card {
  max-width: 1120px !important;
  border: 1px solid #d5e0e4 !important;
  border-top: 4px solid #c68b26 !important;
  border-radius: 8px !important;
  background: #fff !important;
  padding: clamp(25px, 3vw, 42px) !important;
  box-shadow: 0 12px 32px rgba(17, 54, 70, .06) !important;
}
.operating-principle-card .rich-content {
  counter-reset: tg-operation-step;
  max-width: none !important;
}
.operating-principle-card .rich-content h3 {
  position: relative;
  margin: 24px 0 9px !important;
  padding: 12px 15px 12px 54px !important;
  min-height: 48px;
  border-left: 3px solid #c88a27;
  border-radius: 0 5px 5px 0;
  background: #f1f6f8;
  color: #163a4c !important;
  font-size: clamp(17px, 1.45vw, 20px) !important;
  font-weight: 760 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}
.operating-principle-card .rich-content h3::before {
  counter-increment: tg-operation-step;
  content: counter(tg-operation-step, decimal-leading-zero);
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #b77d1a;
  font-size: 16px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}
.operating-principle-card .rich-content p {
  max-width: none !important;
  margin: 0 0 16px !important;
  color: #2c4350 !important;
  font-size: 16px !important;
  line-height: 1.72 !important;
  text-align: justify !important;
  text-justify: inter-word !important;
  overflow-wrap: break-word;
}
.operating-principle-card .rich-content h3 + p { padding: 0 8px 0 16px; }
.operating-principle-card .rich-content ul,
.operating-principle-card .rich-content ol {
  padding-left: 32px !important;
  margin: 10px 0 20px !important;
  line-height: 1.7 !important;
}
.operating-principle-card .rich-content li { margin-bottom: 8px; }

/* The taller desktop section navigation must not cover target headings. */
#overview, #applications, #principle, #features, #specifications,
#addons, #interlocks, #industries, #video, #faq, #product-inquiry {
  scroll-margin-top: 230px !important;
}

@media (max-width: 1080px) {
  .product-anchor-nav .container { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .product-masthead-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 26px !important; }
  .product-masthead .product-hero-machine-card { min-height: 270px !important; padding: 16px !important; }
  .product-masthead .product-hero-machine-card img { height: 238px !important; max-height: 238px !important; }
}
@media (max-width: 720px) {
  .product-masthead { padding: 30px 0 38px !important; }
  .product-masthead-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 22px !important; }
  .product-masthead h1 { font-size: clamp(30px, 7vw, 39px) !important; }
  .product-masthead .product-hero-machine-card { min-height: 235px !important; }
  .product-masthead .product-hero-machine-card img { height: 210px !important; max-height: 210px !important; }
  .product-anchor-nav { position: static !important; top: auto !important; }
  .product-anchor-nav .container {
    display: flex !important;
    overflow-x: auto !important;
    scrollbar-width: thin !important;
    -webkit-overflow-scrolling: touch;
    padding: 8px 16px 12px !important;
  }
  .product-anchor-nav .container::-webkit-scrollbar { display: block !important; height: 5px; }
  .product-anchor-nav a { flex: 0 0 auto !important; width: auto !important; min-width: 128px !important; }
  .product-section-heading > span {
    width: 43px !important; min-width: 43px !important; height: 43px !important; flex-basis: 43px !important; font-size: 16px !important;
  }
  .operating-principle-card { padding: 22px 17px !important; }
  .operating-principle-card .rich-content p { text-align: left !important; font-size: 15.5px !important; }
  #overview, #applications, #principle, #features, #specifications,
  #addons, #interlocks, #industries, #video, #faq, #product-inquiry { scroll-margin-top: 92px !important; }
}