/* Product page fixes – loaded in footer to override legacy CSS + inline page styles */

/* Stop main column from clipping content (style.css sets overflow:hidden) */
body.p-product-page .container > .row > .col-md-9,
body.p-product-page .col-md-9.main-content,
body.p-product-page .main-content {
  overflow: visible !important;
  height: auto !important;
  min-height: 0;
  max-width: 100%;
}

body.p-product-page .blog-item.single-post,
body.p-product-page .blog-content,
body.p-product-page .post-content {
  overflow: visible !important;
  max-width: 100%;
}

/* Override inline p { line-height: 15px !important } on ABB pages */
body.p-product-page .post-content p,
body.p-product-page .main-content p,
body.p-product-page .blog-content p {
  font-size: 15px !important;
  line-height: 1.75 !important;
  margin-bottom: 1em;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

body.p-product-page .benefit-box p {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

body.p-product-page .post-content b,
body.p-product-page .main-content b,
body.p-product-page .blog-content b {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Nested Bootstrap containers inside content – use full column width */
body.p-product-page .post-content > .container,
body.p-product-page .post-content .container,
body.p-product-page .main-content > .container,
body.p-product-page .main-content .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

/* Benefit / product grids – reliable 3-column layout */
body.p-product-page .post-content .row.g-3,
body.p-product-page .post-content .row.g-4,
body.p-product-page .main-content .row.g-3,
body.p-product-page .main-content .row.g-4 {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-items: stretch !important;
}

@media (min-width: 576px) {
  body.p-product-page .post-content .row.g-3,
  body.p-product-page .post-content .row.g-4,
  body.p-product-page .main-content .row.g-3,
  body.p-product-page .main-content .row.g-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  body.p-product-page .post-content .row.g-3,
  body.p-product-page .post-content .row.g-4,
  body.p-product-page .main-content .row.g-3,
  body.p-product-page .main-content .row.g-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

body.p-product-page .post-content .row.g-3 > [class*="col-"],
body.p-product-page .post-content .row.g-4 > [class*="col-"],
body.p-product-page .main-content .row.g-3 > [class*="col-"],
body.p-product-page .main-content .row.g-4 > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
}

/* Full-width columns (product cards) span entire grid */
body.p-product-page .post-content .row > .col-12,
body.p-product-page .main-content .row > .col-12 {
  grid-column: 1 / -1;
}

body.p-product-page .benefit-box {
  height: auto !important;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

body.p-product-page .benefit-box h5 {
  font-size: 1rem !important;
  line-height: 1.35 !important;
  margin-bottom: 8px;
}

body.p-product-page .benefit-box .icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 10px;
}

/* Product cards – full width, responsive flex */
body.p-product-page .product-card {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: row;
  align-items: flex-start !important;
  gap: 16px;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

body.p-product-page .product-card > div:not(.product-img) {
  flex: 1;
  min-width: 0;
}

body.p-product-page .product-img {
  width: 130px !important;
  max-width: 32% !important;
  height: auto !important;
  margin-right: 0 !important;
  flex-shrink: 0;
  object-fit: contain;
}

body.p-product-page .product-title {
  font-size: 1.05rem !important;
  line-height: 1.35 !important;
  word-wrap: break-word;
}

body.p-product-page .product-desc {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--p-muted) !important;
}

@media (max-width: 575px) {
  body.p-product-page .product-card {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.p-product-page .product-img {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Tables – scroll inside wrapper, not page */
body.p-product-page .table-container {
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  margin: 16px 0 !important;
  box-sizing: border-box;
}

body.p-product-page .table-container table {
  min-width: 560px;
  width: 100%;
}

/* Keyword / city list – wrap text, no horizontal scrollbar */
body.p-product-page .scroll-container {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 280px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

body.p-product-page .keywords {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

/* Cities section heading */
body.p-product-page .main-content > p > b,
body.p-product-page .main-content > p b {
  display: block;
  font-family: Poppins, Inter, sans-serif;
  font-size: clamp(1.1rem, 2.5vw, 1.35rem) !important;
  line-height: 1.35 !important;
  color: var(--p-secondary) !important;
  margin: 28px 0 12px;
}

/* CTA line below product cards */
body.p-product-page .post-content > div > p,
body.p-product-page .post-content > div p b {
  font-size: 15px !important;
  line-height: 1.75 !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Section headings inside product content */
body.p-product-page .post-content h2.mb-4,
body.p-product-page .post-content h2 {
  font-family: Poppins, Inter, sans-serif !important;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem) !important;
  line-height: 1.35 !important;
  color: var(--p-secondary) !important;
  margin-top: 1.5em;
  margin-bottom: 0.75em;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(0, 102, 204, 0.12);
}

body.p-product-page .post-content .text-muted {
  color: var(--p-muted) !important;
  line-height: 1.6 !important;
  margin-bottom: 1rem;
}

/* Prevent page-level horizontal scroll from wide elements */
body.p-product-page {
  overflow-x: clip;
}

body.p-product-page img,
body.p-product-page table,
body.p-product-page .table-container,
body.p-product-page .scroll-container {
  max-width: 100%;
}

/* Main page layout row – beat global .row { display:flex } on ABB pages */
body.p-product-page .sections > .container > .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}

body.p-product-page .main-content > .row {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100%;
}

/* Legacy <font> tags in breadcrumbs / content */
body.p-product-page .breadcrumbs font,
body.p-product-page .post-content font,
body.p-product-page .main-content font {
  font-size: inherit !important;
  line-height: inherit !important;
  color: var(--p-secondary) !important;
}

body.p-product-page .post-content li,
body.p-product-page .main-content li {
  line-height: 1.75 !important;
  margin-bottom: 0.35em;
}

/* Tables outside .table-container */
body.p-product-page .post-content > table,
body.p-product-page .main-content > table,
body.p-product-page .table-responsive table {
  display: block;
  width: 100% !important;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.p-product-page .table-responsive {
  max-width: 100% !important;
  overflow-x: auto !important;
}

/* Alternate scroll box classes used on HMI / PLC pages */
body.p-product-page .scroll-content,
body.p-product-page .scrollbar {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

body.p-product-page .scroll-content p {
  line-height: 1.65 !important;
  font-size: 13px !important;
  border-bottom: 1px solid var(--p-border);
  margin: 0 0 8px;
  padding-bottom: 8px;
}

/* Keep footer readable if page head has global p { line-height:15px } */
body.p-product-page #footer p,
body.p-product-page .p-site-footer p {
  font-size: inherit !important;
  line-height: 1.6 !important;
}

/* Product page section wrapper – full width content */
body.p-product-page .sections .container {
  max-width: var(--p-container);
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 991px) {
  body.p-product-page .sections > .container > .row > .main-content,
  body.p-product-page .sections > .container > .row > .col-md-9,
  body.p-product-page .sections > .container > .row > .sidebar,
  body.p-product-page .sections > .container > .row > .col-md-3 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}