/* Hide the whole product-layout slot when no technology is rendered. */
.wpti-layout-slot {
  display: none !important;
}

.wpti-layout-slot:has(.wpti-technologies[data-wpti="1"]) {
  display: block !important;
}


/* Hide the Elementor shell until the shortcode actually renders technologies. */
.wpti-section-wrap {
  display: none !important;
}

.wpti-section-wrap:has(.wpti-technologies[data-wpti="1"]) {
  display: flex !important;
}


/* Base */
.wpti-technologies {
  --wpti-gap: 22px;
  --wpti-logo-max-width: 145px;
  --wpti-logo-max-height: 58px;

  position: relative;
  width: 100%;
}


/* Viewport */
.wpti-technologies__viewport {
  width: 100%;
  overflow: hidden;

  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.wpti-technologies__viewport::-webkit-scrollbar {
  display: none;
}


/* Track */
.wpti-technologies__track {
  display: flex;
  align-items: center;
  gap: var(--wpti-gap);
}


/* Default item sizing */
.wpti-technologies__item {
  flex: 0 0 calc((100% - var(--wpti-gap)) / 2);
  min-width: 0;

  scroll-snap-align: start;
}


/* Single technology */
.wpti-technologies--single .wpti-technologies__track {
  justify-content: center;
}

.wpti-technologies--single .wpti-technologies__item {
  flex-basis: 100%;
}


/* Two technologies */
.wpti-technologies--double .wpti-technologies__item {
  flex-basis: calc((100% - var(--wpti-gap)) / 2);
}


/* Logo wrapper */
.wpti-technologies__logo {
  min-height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 2px 6px;
}


/* Logo image */
.wpti-technologies__img {
  display: block;

  width: auto;
  height: auto;

  max-width: min(100%, var(--wpti-logo-max-width));
  max-height: var(--wpti-logo-max-height);

  object-fit: contain;
}


/* =========================================================
   CAROUSEL — 3+ technologies
   One logo visible at a time
   ========================================================= */

.wpti-technologies--carousel {
  position: relative;

  width: 100%;
  height: 72px;

  padding: 0 30px;

  display: flex;
  align-items: center;

  overflow: visible;
}


/*
 * Move the logo area slightly downward.
 * This compensates for the larger visual space below the logo
 * created by the surrounding Elementor card.
 */
.wpti-technologies--carousel .wpti-technologies__viewport {
  width: 100%;
  height: 62px;

  display: flex;
  align-items: center;

  transform: translateY(10px);
}


/* Carousel track */
.wpti-technologies--carousel .wpti-technologies__track {
  width: 100%;
  height: 62px;

  align-items: center;

  gap: 0;
}


/* Carousel item */
.wpti-technologies--carousel .wpti-technologies__item {
  flex: 0 0 100%;

  width: 100%;
  height: 62px;

  min-width: 100%;
}


/* Carousel logo wrapper */
.wpti-technologies--carousel .wpti-technologies__logo {
  width: 100%;
  height: 62px;
  min-height: 0;

  padding: 0 6px;

  display: flex;
  align-items: center;
  justify-content: center;
}


/* =========================================================
   NATIVE WOODMART NAVIGATION
   PHP markup:
   .wd-btn-arrow.wd-prev / .wd-next
     .wd-arrow-inner
   ========================================================= */

.wpti-technologies--carousel .wpti-technologies__nav {
  position: absolute !important;

  top: calc(50% + 10px) !important;
  bottom: auto !important;

  transform: translateY(-50%) !important;

  z-index: 20 !important;

  width: 30px !important;
  height: 44px !important;

  margin: 0 !important;
  padding: 0 !important;

  opacity: .55 !important;

  cursor: pointer !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  transition: opacity .2s ease;
}


/* Previous */
.wpti-technologies--carousel .wpti-technologies__nav--prev {
  left: -15px !important;
  right: auto !important;
}


/* Next */
.wpti-technologies--carousel .wpti-technologies__nav--next {
  right: -15px !important;
  left: auto !important;
}


/* Native WoodMart inner arrow */
.wpti-technologies--carousel .wpti-technologies__nav .wd-arrow-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100% !important;
}


/* Keep WoodMart's own pseudo-element/icon intact */
.wpti-technologies--carousel .wpti-technologies__nav .wd-arrow-inner::after {
  font-family: "woodmart-font" !important;
  font-size: 16px !important;

  color: #333 !important;
}


/* Hover */
.wpti-technologies--carousel .wpti-technologies__nav:hover {
  opacity: 1 !important;
}


/* Keyboard focus */
.wpti-technologies--carousel .wpti-technologies__nav:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .wpti-technologies {
    --wpti-logo-max-width: 150px;
    --wpti-logo-max-height: 60px;
  }


  .wpti-technologies--carousel {
    height: 72px;
    padding: 0 26px;
  }


  .wpti-technologies--carousel .wpti-technologies__viewport {
    height: 62px;
    transform: translateY(10px);
  }


  .wpti-technologies--carousel .wpti-technologies__track,
  .wpti-technologies--carousel .wpti-technologies__item,
  .wpti-technologies--carousel .wpti-technologies__logo {
    height: 62px;
  }


  .wpti-technologies--carousel .wpti-technologies__item {
    flex-basis: 100%;
    min-width: 100%;
  }


  .wpti-technologies--carousel .wpti-technologies__nav {
    width: 26px !important;
    height: 40px !important;
  }


  .wpti-technologies--carousel .wpti-technologies__nav--prev {
    left: -12px !important;
  }


  .wpti-technologies--carousel .wpti-technologies__nav--next {
    right: -12px !important;
  }
}