@charset "UTF-8";

/* ============================================================
   SANDRO — POWER 3D VIEWER
   ============================================================ */


/* ------------------------------------------------------------
   VIEWER
   ------------------------------------------------------------ */

.sandro-3d-main-item,
.sandro-3d-mobile-item {
  background: #fff;
}

.sandro-3d-viewer-wrapper {
  width: 100%;
  height: 100%;
}

.sandro-3d-viewer-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 683 / 768;
  background: #e7e5e3;
  overflow: hidden;
}

.sandro-3d-power-viewer {
  display: block;
  width: 100%;
  height: 100%;
  background: #e7e5e3 !important;
}


/* ------------------------------------------------------------
   DESKTOP
   ------------------------------------------------------------ */

.pdp-images .sandro-3d-main-item {
  width: 100%;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

.pdp-images .sandro-3d-mobile-item {
  width: 100%;
  display: block;
}


/* ------------------------------------------------------------
   DESKTOP THUMBNAIL "3D"
   ------------------------------------------------------------ */

.sandro-3d-thumb-item .thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 65px;
  background: #fff;
}

.sandro-3d-thumb-label {
  width: 50px;
  height: 65px;

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

  font-size: 14px;
  line-height: 1;

  background: #f7f7f7;
  color: #000;

  border: 1px solid #e5e5e5;
  box-sizing: border-box;
}

.sandro-3d-thumb-item .thumb.list-group-item.active
.sandro-3d-thumb-label,
.sandro-3d-thumb-item .thumb:hover
.sandro-3d-thumb-label {
  border-color: #000;
}


/* ------------------------------------------------------------
   BOX SIZING / SAFETY
   ------------------------------------------------------------ */

.pdp-images .sandro-3d-main-item,
.pdp-images .sandro-3d-mobile-item,
.pdp-images .sandro-3d-viewer-wrapper,
.pdp-images .sandro-3d-viewer-inner,
.pdp-images .sandro-3d-power-viewer {
  box-sizing: border-box;
}


/* ------------------------------------------------------------
   MOBILE ARROWS
   ------------------------------------------------------------ */

@media (max-width: 767px) {

  .pdpCarousel-container-wrapper.d-block.d-md-none.slick-initialized {
    position: relative;
  }

  .pdpCarousel-container-wrapper.d-block.d-md-none.slick-initialized
  > .slick-prev.sandro-pdp-arrow,
  .pdpCarousel-container-wrapper.d-block.d-md-none.slick-initialized
  > .slick-next.sandro-pdp-arrow {
    position: absolute;

    top: 35%;
    transform: translateY(-50%);

    z-index: 5;

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

    min-width: 36px;
    min-height: 36px;

    padding: 0;
  }

  .pdpCarousel-container-wrapper.d-block.d-md-none.slick-initialized
  > .slick-prev.sandro-pdp-arrow {
    left: 12px;
  }

  .pdpCarousel-container-wrapper.d-block.d-md-none.slick-initialized
  > .slick-next.sandro-pdp-arrow {
    right: 12px;
  }

  .pdpCarousel-container-wrapper.d-block.d-md-none.slick-initialized
  > .sandro-pdp-arrow
  .carousels-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .pdpCarousel-container-wrapper.d-block.d-md-none.slick-initialized
  > .sandro-pdp-arrow.slick-disabled {
    opacity: 0.35;
    pointer-events: none;
  }

  .pdpCarousel-container-wrapper.d-block.d-md-none.slick-initialized
  > .slick-prev.sandro-pdp-arrow
  .left-arrow svg {
    transform: rotate(180deg);
    transform-origin: center;
  }
}