/* #product #main */
.page-product .product-page-col {
  padding: 0;
}

.product-footer > * {
  margin-top: 80px;
}

.page-product .product-additional-info > * {
  margin: 2rem 0 0;
  width: 100%;
}

.page-product .js-mailalert > span {
  top: 100%;
  position: absolute;
  padding: 0 !important;
}

.page-product:not(.elementor-page) .page-width.main-content {
  max-width: 100%;
  width: 100%;
}

.page-product #content .product-flags {
  top: 20px;
  right: 20px;
}

.page-product .product-actions .product-add-to-cart .control-label {
  display: none;
}

.page-product .product-info-section .product-brand {
  color: #bcbcbc;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  display: inline-block;
  margin-bottom: 15px;
}

.page-product .product-info-section .product-prices {
  margin-bottom: 10px;
}

.page-product .product-info-section .product-prices > div {
  display: inline-block;
}

.page-product #main .products-carousel {
  padding: 0 30px;
}

.page-product .short-desc {
  margin-bottom: 25px;
  color: #000;
  font-size: 16px;
  line-height: 23px;
}

.thumbnails {
  width: 10%;
}

.modal.product-modal {
  width: 1079px;
}

.product-modal {
  &.pk-modal .modal-body {
    gap: 10px;
    flex-direction: column-reverse;
  }

  figure {
    margin: 0;
    width: 100%;

    figcaption {
      background: #fffa;
      backdrop-filter: blur(5px);
      padding: 10px 20px;
      bottom: 0;
      left: 0;
    }
  }

  .product-images {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
  }

  .thumbnails {
    width: 100%;
  }

  .scroll {
    display: none;
  }

  .thumb-container {
    width: 67px;
  }
}

.product-information p {
  margin: 0;
}

.product-information .manufacturer-logo {
  height: 35px;
}

.product-info-section h1 {
  margin: 0 0 10px;
  font-size: 20px;
  color: #373737;
  text-transform: none;
}

.product-accessories .add-review,
.product-categories .add-review {
  display: none;
}

.sys-info-section {
  margin-bottom: 13px;
}

.sys-info {
  align-items: center;
  font-size: 16px;
  line-height: 1em;
  margin-bottom: 10px;
  color: #969696;

  a {
    color: inherit;
  }
}

.product-availability {
  margin-left: 0.625rem;
  color: #ff9a52;
  font-size: 13px;
  vertical-align: middle;
}

.product-availability svg {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}

.product-availability span {
  display: flex;
  align-items: center;
}

.product-availability .product-available {
  color: #6b8a94;
}

.product-availability .product-last-items,
.product-availability .product-unavailable {
  color: #ff9a52;
}

#product-details .label {
  font-size: 1rem;
  color: #414141;
  font-weight: 700;
}

.product-features:not(:last-child) {
  margin-bottom: 40px;
}

.product-features h3,
.product-attachments h3 {
  margin-top: 0;
  font-weight: bold;
}

.product-features > dl.data-sheet {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.product-features > dl.data-sheet dd.value,
.product-features > dl.data-sheet dt.name {
  flex: 1 0 40%;
  font-weight: 400;
  padding: 0.625rem;
  min-height: 2.5rem;
  word-break: break-all;
  border-bottom: 1px solid #ccc;
  margin: 0 !important;
}

.product-features > dl.data-sheet :nth-child(4n),
.product-features > dl.data-sheet :nth-child(4n - 1) {
  background: #eee;
}

.product-features > dl.data-sheet dt.name {
  text-transform: capitalize;
}

.tabs-container {
  background: #fbfbfb;
  padding: 100px;
  width: 100%;
  margin-top: 5rem;
}

.pp-vertical-tabs .tabs-container .tabs {
  display: flex;
  align-items: flex-start;
}

.pp-vertical-tabs .tabs-container .tabs .tab-pane {
  padding: 40px;
}

.pp-vertical-tabs .tabs-container .tabs .nav-tabs {
  flex-direction: column;
  min-width: 240px;
}

.pp-vertical-tabs .tabs-container .tabs .nav-link {
  color: #b5b5b5;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.15em;
  padding: 15px 25px;
  border-bottom: 2px solid #eee;
}

.pp-vertical-tabs .tabs-container .tabs .nav-tabs .nav-link.active {
  color: #666;
  border-bottom: 2px solid #313537;
}

.thumb-horizontal {
  flex-direction: column-reverse;
}

.product-images {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  width: 100%;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.2s ease-in;
  position: relative;
  gap: 10px;

  .thumb-container .thumb.selected,
  .thumb-container .thumb:hover {
    opacity: 0.3;
  }
}

.product-properties {
  font-size: 80%;
  line-height: 1.25em;
}

.combination-loading .images-container::after {
  background: rgb(255 255 255 / 70%) url("../../svg/loader-animated.svg") 50%
    50%;
  background-size: 40px 40px;
  background-repeat: no-repeat;
}

.images-container {
  .thumb-carousel {
    margin-right: 2%;
    min-width: 19%;
    transition: height 0.2s ease-in;
    z-index: 1;
  }

  .main-image-container {
    min-width: 79%;
    width: 100%;
    z-index: 1;
  }

  .pp-img-carousel {
    width: 100%;
  }
  &::after {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    top: 0;
    left: 0;
    transition: all 0.5s ease-in-out;
    background-position: 50% 50%;
    background-size: 0 0;
    pointer-events: none;
  }
  .pk-ce-widget-wrapper {
    z-index: 1;
  }
  .elementor-slick-slider .slick-prev {
    left: 0;
  }
  .elementor-slick-slider .slick-next {
    right: 0;
  }
  .elementor-slick-slider .slick-arrow,
  .elementor-slick-slider .slick-arrow:hover {
    background-color: #ccc;
  }
  .elementor-slick-slider .slick-next:before {
    content: "\f105" !important;
  }
  .elementor-slick-slider .slick-prev:before {
    content: "\f104" !important;
  }
}

#product-images-cont .pk-ce-widget.pk-ce-carousel:not(.slick-initialized) {
  display: flex;
}

#product-images-cont .pk-ce-widget.pk-ce-carousel:not(.slick-initialized) > * {
  width: 25%;
}

#product-images-cont .slick-arrow {
  transition: none;
}

.thumb-horizontal .thumb-carousel,
.product-modal .modal-content .modal-body .image-caption p {
  margin: 0;
}

.product-modal .scroll-box-arrows i {
  width: 100%;
  margin-left: 1rem;
}

.product-modal .modal-body {
  align-items: flex-start;
}

.modal-content .mask {
  z-index: 1;
}

.modal-content .mask.nomargin {
  margin-top: 0;
}

.modal-content .product-images img {
  width: 100%;
  cursor: pointer;
  display: block;
  opacity: 0.9;
}

.modal-content .product-images img:hover {
  opacity: 1;
}

.product-variants-item ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  list-style: none;

  .color {
    margin: 0;
  }
}

.product-variants-item ul li input {
  width: 100%;
  height: 100%;
  z-index: 9;
  margin: 0;
}

.product-variants-item ul li input:checked + span {
  border: 1px solid #444 !important;
}

.product-variants > .product-variants-item {
  margin: 0 0 2rem;
}

.product-variants > .product-variants-item select {
  border: 1px solid #ebebeb;
  height: 2.5rem;
  width: 50%;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.product-variants > .product-variants-item ul li {
  margin-right: 0.625rem;
}

.product-variants > .product-variants-item .color {
  margin-left: 0;
  margin-top: 0;
  border: none;
  display: block;
  width: 32px;
  aspect-ratio: 1;
}

.product-variants > .product-variants-item li > span:not(.color) {
  min-width: 32px;
  height: 32px;
  display: inline-block;
  margin: 0;
  cursor: pointer;
  border: 1px solid #ccc;
  width: auto;
  padding: 0;
  white-space: nowrap;
}

.product-variants > .product-variants-item li > span:not(.color) span {
  position: relative;
  line-height: 30px;
  text-align: center;
  display: inline-block;
  width: 100%;
  margin: 0;
  height: auto;
  color: #707070;
  font-size: 12px;
}

.product-variants > .product-variants-item .white-color .color {
  border: 1px solid #ccc;
}

.product-variants-item ul.type-radio {
  display: flex;
  flex-direction: column;
}

.product-variants-item ul.type-radio li input {
  width: auto;
  height: auto;
  opacity: 1;
  position: static;
}

.product-variants-item ul.type-radio li span.radio-label {
  width: auto;
  height: auto;
  padding: 0;
  position: static;
  border: none !important;
}

#product-availability {
  font-size: 80%;
}

.product-customization {
  margin: 2.5rem 0;
}

.product-customization ul {
  list-style: none;
}

.product-customization > .card {
  padding: 0;
  background: none;
}

.product-customization .product-customization-item {
  margin: 1.25rem 0;
}

.product-customization .product-customization-item small {
  margin-top: -35px;
  z-index: 9;
  position: relative;
  pointer-events: none;
  background: #eee;
  padding: 0 15px;
}

.product-customization .product-message {
  background: #ebebeb;
  border: none;
  width: 100%;
  height: 4.2rem;
  resize: none;
  padding: 0.625rem;
}

.product-customization .file-input {
  width: 100%;
  opacity: 0;
  left: 0;
  z-index: 1;
  cursor: pointer;
  height: 2.625rem;
  overflow: hidden;
  position: absolute;
}

.product-customization .custom-file {
  background: #ebebeb;
  width: 100%;
  height: 2.625rem;
  line-height: 2.625rem;
  text-indent: 0.625rem;
  color: #acaaa6;
  margin-top: 1.25rem;
}

.product-customization .custom-file button {
  z-index: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.product-customization small {
  color: #acaaa6;
}

.prod-image-zoom {
  width: 100%;
  height: 100%;
  cursor: zoom-in;

  &:hover picture {
    visibility: hidden;
  }

  &:hover img {
    opacity: 1 !important;
  }

  &.zoomed {
    cursor: move;
  }

  &.action {
    background: none !important;
  }
}

.product-cover {
  .layer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    background: hsl(0deg 0% 100% / 70%);
    cursor: pointer;

    svg {
      transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
      transform: scale(0);
      color: #333;
    }

    .zoom-in {
      font-size: 6.25rem;
      color: #fff;
    }

    &:hover {
      opacity: 1;

      svg {
        transform: scale(1.5);
      }
    }
  }
}

.vertical-thumbnails {
  .slick-arrow {
    transform: translate(0);
  }

  .slick-disabled {
    opacity: 0.5;
  }

  .slick-next,
  .slick-next:hover {
    top: 100%;
    background:
      linear-gradient(
        180deg,
        rgb(255 255 255 / 0%) 0%,
        rgb(255 255 255 / 100%) 100%
      ),
      url("../../svg/arrow-down.svg") 50% 50% no-repeat;
  }

  .slick-prev,
  .slick-prev:hover {
    top: 0;
    background:
      linear-gradient(
        0deg,
        rgb(255 255 255 / 0%) 0%,
        rgb(255 255 255 / 100%) 100%
      ),
      url("../../svg/arrow-up.svg") 50% 50% no-repeat;
  }

  .thumb-container {
    display: block !important;
  }

  #product-images-cont & .slick-arrow {
    left: 0 !important;
    right: auto;
    width: 100% !important;
    height: 30px !important;

    &::before {
      content: none;
    }
  }
}

@media (width <= 991px) {
  #product-modal .modal-content .modal-body .arrows {
    display: none;
  }

  #product #main .products-carousel {
    padding: 0;
  }

  #product #main .module-title {
    font-size: 14px;
  }

  .product-footer > * {
    margin-top: 40px;
  }
}

@media (width >= 600px) {
  .product-page-col > .col-md-6:first-child {
    width: 54.66%;
    padding: 0;
  }

  .product-page-col > .col-md-6:last-child {
    width: 45.33%;
    padding: 2.3vw 0 0 2.6vw;
  }
}

@media (width >= 800px) and (width <= 1024px) {
  body .tabs-container,
  body #main-content .product-accessories {
    margin-top: 4rem;
  }

  body .tabs-container {
    padding: 50px 100px;
  }
}

@media (width <= 768px) {
  .tabs-container {
    margin: 70px 0 0;
    padding: 0;
  }

  .pp-vertical-tabs .tabs-container .tabs {
    flex-direction: column;
  }

  .nav-tabs .nav-item {
    display: block;
    width: 100%;
  }

  .nav-tabs .nav-item:has(.active) {
    order: 9;
  }

  .pp-vertical-tabs .tabs-container .tabs .nav-tabs {
    width: 100%;
  }

  body.pp-vertical-tabs .tabs-container .tabs .tab-pane {
    padding: 0;
  }
}