/* Klaus Union product page: ported from the legacy style.css product rules.
   Scoped to .ku-product so it does not fight Divi's global styles. */

.ku-product { color: #333; max-width: 720px; }
.ku-product h1 { font-size: 22px; font-weight: bold; color: #2b5f9c; margin: 0 0 10px; }
.ku-product h2 { font-size: 15px; margin: 12px 0 6px; }
.ku-product p { margin: 0 0 10px; }
.ku-product ul { margin: .5em 0 1em 1.2em; padding: 0; list-style: disc; }
.ku-product #panes li { margin: .5em 0; }

#productShot { width: 230px; float: right; text-align: center; }
#avo #productShot { margin-top: 20px; }
#productShot img { height: auto !important; margin-bottom: 10px; }
#productShot .productAction { width: 105px; height: 30px; display: block; text-indent: -9999px; float: left; }
#productShot .viewCutaway { background: url(/images/btn-view-cutaway.png) no-repeat center top; margin-right: 10px; }
#productShot .askQuestion { float: left; background: url(/images/btn-ask-question.png) no-repeat center top; }

.grays { clear: both; }
.compareLink { background: url(/images/btn-compare.png) no-repeat left top; display: block; width: 115px; padding: 2px 0 3px 30px; color: #FFF; font-size: 8pt; font-weight: bold; text-decoration: none; margin: 5px 0 15px; }
.compareLink:hover { background: url(/images/btn-compare.png) no-repeat left bottom; }

#tabs { border-bottom: solid 1px #2b5f9c; padding-left: 3px; height: 24px; clear: both; margin: 25px 0 0; list-style: none; }
#tabs li { float: left; margin-right: 2px; text-align: center; width: auto; border-left: solid 1px #2b5f9c; border-right: solid 1px #2b5f9c; border-top: solid 1px #2b5f9c; border-top-left-radius: 2px; border-top-right-radius: 2px; text-shadow: #444 1px 1px 1px; }
#tabs li a { background: #3c5c80 url(/images/tab-background.gif) repeat-x left top; color: #FFF; text-decoration: none; display: block; padding: 4px 12px; outline: none; }
#tabs li a:hover, #tabs li a.current { background: #FFF url(/images/tab-background-0.gif) repeat-x left top; color: #333; text-shadow: none; }
#tabs li a.current { border-bottom: solid 1px #FFF; }

#panes { color: #333; clear: both; }
.paneBody { display: none; }
.paneBody.active { display: block; }
.materialsConstruction .standardMaterials { width: 47%; float: left; margin-right: 15px; }
.materialsConstruction .specialAlloy { float: right; width: 40%; }
.paneBody .footnote { font-style: italic; }

#hydraulicList { padding: 0; margin: 0; list-style: none; }
#hydraulicList li { list-style: none; padding: 10px 10px 10px 60px; margin: 0 0 20px; border: solid 1px #696969; font-weight: bold; border-radius: 3px; }
#hydraulicList li.Hz50 { background: #DBE8F2 url(/images/perf-curve-hz50-label.png) no-repeat left center; }
#hydraulicList li.Hz60 { background: #DBE8F2 url(/images/perf-curve-hz60-label.png) no-repeat left center; }
#hydraulicList a { margin: 5px; color: #522525; font-weight: normal; }
#hydraulicList .previewLink { background: url(/images/icon-preview.png) no-repeat left top; padding: 3px 0 3px 20px; }
a.pdfLink { background: url(/images/icon-pdf.gif) no-repeat left top; padding: 3px 0 3px 20px; }
#hydraulicList a.disabled, #listCurveDownloads a.disabled { text-decoration: none !important; color: #888; cursor: text !important; background: url(/images/icon-preview.png) no-repeat left -30px; outline: none; }
a.pdfLink.disabled { background: url(/images/icon-pdf-disabled.png) no-repeat left top !important; }

.ku-product .footnote { font-style: italic; margin: 40px 0 15px; clear: both; }

/* lightbox */
#kuLightbox { position: fixed; inset: 0; background: rgba(0,0,0,.8); display: none; z-index: 99999; cursor: pointer; }
#kuLightbox.open { display: flex; align-items: center; justify-content: center; }
#kuLightbox img { max-width: 92%; max-height: 92%; box-shadow: 0 0 25px rgba(0,0,0,.6); }

/* content container (Divi header/footer wrap this) */
.ku-container { max-width: 1000px; margin: 0 auto; padding: 30px 20px 50px; }
.ku-product { max-width: none; }
#productShot { margin-left: 25px; }

/* mobile: unfloat and stack so nothing breaks on phones */
@media (max-width: 782px) {
  #productShot { float: none; width: auto; margin: 0 0 20px; text-align: left; }
  #productShot img { margin: 0 auto 10px; display: block; }
  #productShot .productAction { float: none; display: inline-block; vertical-align: top; }
  #tabs { height: auto; border-bottom: none; margin-top: 20px; padding: 0; }
  #tabs li { float: none; display: block; margin: 0 0 3px; border: solid 1px #2b5f9c; border-radius: 3px; }
  #tabs li a, #tabs li a.current { border-bottom: none; border-radius: 3px; }
  .materialsConstruction .standardMaterials,
  .materialsConstruction .specialAlloy { float: none; width: auto; margin: 0 0 20px; }
  #hydraulicList li { padding-left: 10px; background-image: none; }
  #hydraulicList a { display: inline-block; margin: 5px 10px 5px 0; }
  .ku-product .footnote { margin-top: 25px; }
}