/* Homepage layout 2026-10-07: shorter hero full-width cover + larger featured */
.heroCarousel {
  max-height: 360px !important; }

.heroCarousel .slick-list, .heroCarousel .slick-track {
  max-height: 360px !important; }

.heroCarousel-slide {
  height: 360px !important;
  max-height: 360px !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center 45% !important; }

.heroCarousel-slide .heroCarousel-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 45% !important; }

@media (max-width: 800px) {
  .heroCarousel, .heroCarousel .slick-list, .heroCarousel .slick-track, .heroCarousel-slide {
    height: 260px !important;
    max-height: 260px !important; } }

@media (max-width: 550px) {
  .heroCarousel, .heroCarousel .slick-list, .heroCarousel .slick-track, .heroCarousel-slide {
    height: 210px !important;
    max-height: 210px !important; } }

@media (min-width: 801px) {
  #showcase-products .productGrid, .featured-products-section .productGrid {
    display: flex !important;
    flex-wrap: wrap !important; }
  #showcase-products .slick-track, .featured-products-section .slick-track {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important; }
  #showcase-products .slick-list, .featured-products-section .slick-list {
    height: auto !important;
    overflow: hidden !important; }
  #showcase-products .productGrid .product, .featured-products-section .productGrid .product {
    flex: 0 0 33.3333% !important;
    width: 33.3333% !important;
    max-width: 33.3333% !important;
    float: none !important; }
  #showcase-products .product.slick-cloned, .featured-products-section .product.slick-cloned {
    display: none !important; } }

#showcase-products .card-image, .featured-products-section .card-image {
  width: 100%;
  height: auto;
  object-fit: contain; }

#showcase-products .card-text {
  overflow-wrap: break-word; }

/* Fix: restore homepage featured card images (RH22B) hidden by slick/flex/hover stacking */
#showcase-products .card-figure, .featured-products-section .card-figure, .home .productCarousel .card-figure {
  display: block !important;
  position: relative !important;
  min-height: 200px !important; }

#showcase-products .card-figure .image-link, .featured-products-section .card-figure .image-link, .home .productCarousel .card-figure .image-link {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important; }

#showcase-products img.card-image.primary, .featured-products-section img.card-image.primary, .home .productCarousel img.card-image.primary {
  display: block !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 375px !important;
  object-fit: contain !important;
  margin: 0 auto !important; }

#showcase-products img.card-image.alt, .featured-products-section img.card-image.alt, .home .productCarousel img.card-image.alt {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  opacity: 0 !important; }

#showcase-products .card-figure:hover img.card-image.alt, .featured-products-section .card-figure:hover img.card-image.alt {
  opacity: 1 !important; }

@media (min-width: 801px) {
  #showcase-products .productCarousel .product, #showcase-products .productCarousel-slide, #showcase-products .slick-slide, .featured-products-section .productCarousel .product, .featured-products-section .slick-slide {
    flex: 0 0 33.3333% !important;
    width: 33.3333% !important;
    max-width: 33.3333% !important;
    float: none !important;
    height: auto !important;
    visibility: visible !important; } }

/* Fix2: global featured-card image restore (all viewports, clones hidden) */
.product.slick-cloned, .slick-slide.slick-cloned {
  display: none !important; }

.card-figure {
  display: block !important;
  position: relative !important;
  visibility: visible !important; }

.card-figure::before {
  content: none !important;
  display: none !important; }

.card-figure .image-link {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  visibility: visible !important; }

img.card-image.primary {
  display: block !important;
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 375px !important;
  object-fit: contain !important;
  margin: 0 auto !important; }

img.card-image.alt {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  opacity: 0 !important;
  visibility: visible !important; }

.card-figure:hover img.card-image.alt {
  opacity: 1 !important; }

.slick-slide, .slick-slide[aria-hidden="true"] {
  visibility: visible !important; }

.slick-slide img.card-image {
  visibility: visible !important; }

/* Fix3: un-clip featured card images (remove fixed heights on card chain) */
.card, .card-figure, .card-figure .image-link, .productCarousel-slide, .slick-slide {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important; }

.card-figure .image-link {
  background: transparent !important; }

img.card-image.primary {
  z-index: 2 !important;
  position: relative !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  clip: auto !important;
  clip-path: none !important; }

.card-figure {
  z-index: 1 !important; }

/* Fix4: force primary card image visible in all states incl hover */
#showcase-products .card-figure.multiple-images.second-hover-img-active img.card-image.primary,
#showcase-products .card-figure:hover img.card-image.primary,
.featured-products-section .card-figure.multiple-images.second-hover-img-active img.card-image.primary,
.featured-products-section .card-figure:hover img.card-image.primary,
body .card-figure.multiple-images.second-hover-img-active img.card-image.primary,
body .card-figure:hover img.card-image.primary,
body .card-figure img.card-image.primary.lazyloaded {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  content: normal !important; }

body .card-figure img.card-image.alt {
  opacity: 0 !important; }

/* Fix5: card figcaption overlay must not cover card image */
.card-figcaption {
  opacity: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
  background-color: transparent !important; }

.card-figcaption-body {
  background: transparent !important;
  background-color: transparent !important; }

.card:hover .card-figcaption, .card:focus-within .card-figcaption {
  opacity: 1 !important;
  pointer-events: auto !important; }

/* Fix6: slick list/track must not clip card figure+body */
#showcase-products .slick-list, .featured-products-section .slick-list, .productCarousel .slick-list, .productGrid .slick-list {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important; }

#showcase-products .slick-track, .featured-products-section .slick-track, .productCarousel .slick-track, .productGrid .slick-track {
  height: auto !important;
  max-height: none !important; }

/* Fix7 2026-10-07: featured images explicit render size + smaller hero headline + smaller callout icons */
.heroCarousel .heroCarousel-title {
  font-size: 34px !important;
  line-height: 1.08 !important;
  max-width: 640px !important;
  text-align: left !important; }

.heroCarousel .heroCarousel-description {
  font-size: 18px !important;
  line-height: 1.3 !important;
  max-width: 560px !important;
  text-align: left !important; }

.heroCarousel .heroCarousel-content {
  text-align: left !important;
  max-width: 680px !important; }

@media (max-width: 800px) {
  .heroCarousel .heroCarousel-title {
    font-size: 26px !important; }
  .heroCarousel .heroCarousel-description {
    font-size: 15px !important; } }

@media (max-width: 550px) {
  .heroCarousel .heroCarousel-title {
    font-size: 22px !important; } }

#showcase-products .card-figure, .featured-products-section .card-figure, body.home .productCarousel .card-figure {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 300px !important;
  max-height: 300px !important;
  min-height: 300px !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important; }

#showcase-products .card-figure .image-link, .featured-products-section .card-figure .image-link, body.home .productCarousel .card-figure .image-link {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 300px !important;
  opacity: 1 !important;
  visibility: visible !important; }

#showcase-products img.card-image.primary, .featured-products-section img.card-image.primary, body.home .productCarousel img.card-image.primary {
  display: block !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 300px !important;
  max-height: 300px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  margin: 0 auto !important;
  z-index: 3 !important; }

#showcase-products img.card-image.alt, .featured-products-section img.card-image.alt, body.home .productCarousel img.card-image.alt {
  display: none !important; }

/* Fix8: home featured chain opacity/size under actual .featured-products/body.home */
body.home .card, body.home .card-figure, body.home .card-figure .image-link, .featured-products .card, .featured-products .card-figure, .featured-products .card-figure .image-link, .featured-products .product, .featured-products .slick-slide, .featured-products .productCarousel-slide {
  opacity: 1 !important;
  visibility: visible !important; }

body.home .card-figure, .featured-products .card-figure {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 300px !important;
  max-height: 300px !important;
  min-height: 300px !important;
  overflow: hidden !important; }

body.home .card-figure .image-link, .featured-products .card-figure .image-link {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 300px !important; }

body.home img.card-image.primary, .featured-products img.card-image.primary {
  display: block !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 300px !important;
  max-height: 300px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin: 0 auto !important;
  z-index: 5 !important;
  background: #fff !important; }

body.home img.card-image.alt, .featured-products img.card-image.alt {
  display: none !important; }

body.home .slick-slide, body.home .slick-track, body.home .slick-list {
  opacity: 1 !important;
  visibility: visible !important; }

.heroCarousel .heroCarousel-content {
  position: absolute !important;
  left: 48px !important;
  right: auto !important;
  top: auto !important;
  bottom: 28px !important;
  transform: none !important;
  z-index: 6 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  text-align: left !important; }

.heroCarousel .heroCarousel-title {
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
  visibility: visible !important; }

@media (max-width: 800px) {
  .heroCarousel .heroCarousel-content {
    left: 20px !important;
    bottom: 16px !important; } }

/* Fix9 2026-10-07: hero banner image fits full 360px banner (contain) so baked-in headline is smaller and full machine shows; static featured grid cards */
.heroCarousel, .heroCarousel .slick-list, .heroCarousel .slick-track {
  height: 360px !important;
  max-height: 360px !important; }

.heroCarousel-slide {
  height: 360px !important;
  max-height: 360px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-color: #e9eff4 !important; }

img.heroCarousel-image {
  width: 100% !important;
  height: 360px !important;
  max-height: 360px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important; }

.khz-static-grid .productGrid {
  display: flex !important;
  flex-wrap: wrap !important;
  transform: none !important; }

.khz-static-grid .product {
  flex: 0 0 33.333% !important;
  max-width: 33.333% !important; }

@media (max-width: 800px) {
  .khz-static-grid .product {
    flex-basis: 50% !important;
    max-width: 50% !important; }
  .heroCarousel, .heroCarousel-slide, img.heroCarousel-image {
    height: 260px !important;
    max-height: 260px !important; } }

@media (max-width: 550px) {
  .khz-static-grid .product {
    flex-basis: 100% !important;
    max-width: 100% !important; } }

/* Fix10 2026-10-07 hero img contain strong specificity */
.heroCarousel .heroCarousel-slide {
  background-size: contain !important;
  background-color: #e9eff4 !important; }

.heroCarousel .heroCarousel-slide img.heroCarousel-image {
  display: block !important;
  width: 100% !important;
  height: 360px !important;
  max-height: 360px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important; }