/* Page-specific additions; shared product details remain unchanged. */
.product-auto-backwash #principle .detail-container,
.product-auto-backwash #specifications .detail-container {
  width: min(calc(100% - 36px), 1400px);
}

/* Reserve both text states' height so switching never moves the controls. */
.backwash-principle-text { display: grid; }
.backwash-principle-text [data-principle-slide] { grid-area: 1 / 1; }
.backwash-principle-text .is-inactive { visibility: hidden; }

.backwash-principle .backwash-principle-media {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 497px;
  margin-right: 21px;
}

.backwash-principle .backwash-principle-media img {
  width: 100%;
  max-width: 642px;
  height: auto;
  max-height: 482px;
  object-fit: contain;
}

.backwash-principle .backwash-principle-media img.is-flow {
  max-width: 663px;
}

.backwash-principle .backwash-principle-copy {
  height: 100%;
  min-height: 497px;
  gap: 40px;
  padding: 30px;
}

.backwash-principle-copy p,
.backwash-principle-copy ol {
  margin: 0;
  font-size: 1rem;
  line-height: 1.875;
}

.backwash-principle-copy ol { padding-left: 1.5em; }
.backwash-principle-copy h3 { font-size: clamp(1.375rem, 1.5vw, 1.625rem); }
.backwash-principle-controls { gap: 20px; margin-top: auto; }
.backwash-principle-controls button {
  flex: 0 0 auto;
  width: clamp(48px, 4vw, 66px);
  height: clamp(48px, 4vw, 66px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: rgba(0, 0, 0, .3);
  background: none;
}
.backwash-principle-controls svg { display: block; width: 100%; height: 100%; }
.backwash-principle-prev { transform: scaleX(-1); }
.backwash-principle-controls button:focus-visible { outline: 3px solid var(--detail-green); outline-offset: 4px; }
.backwash-principle-controls button:hover,
.backwash-principle-controls button:focus-visible { color: var(--detail-green); }

/* Product specifications: a semantic, scrollable table rather than an image. */
.backwash-spec-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 1px; /* Keep collapsed table borders inside the scroll viewport. */
}
.backwash-spec-scroll:focus-visible { outline: 2px solid var(--detail-green); outline-offset: 4px; }
.backwash-spec-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 1rem;
  line-height: 1.875;
}
.backwash-spec-table th,
.backwash-spec-table td {
  padding: 10.5px clamp(12px, 2.1vw, 40px);
  border: 1px solid #d9d9d9;
  vertical-align: middle;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.backwash-spec-table th { width: 26.214285%; color: #333; background: #f7f7f7; }
.backwash-spec-table td { color: #737373; background: #fff; }
.backwash-spec-hint { margin: -20px 0 12px; color: #737373; font-size: .8125rem; }

@media (max-width: 991.98px) {
  .backwash-spec-table { font-size: .875rem; }
  .backwash-principle .backwash-principle-media {
    height: auto;
    min-height: 0;
    margin-right: 0;
    aspect-ratio: 669 / 497;
  }
  .backwash-principle .backwash-principle-copy { min-height: 0; padding: 24px 14px 16px; }
}