/*//////////////// Product Image Gallery Block /////////////////////////*/

.woocommerce div.wp-block-woocommerce-product-image-gallery {
  max-width: unset;
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
  width: 100%;
}

.woocommerce .images.woocommerce-product-gallery {
  ol.flex-control-thumbs.flex-control-nav {
    display: flex;
    gap: 1em;
    padding-top: 1em;
    li,
    >.flex-viewport {
      border: 1px solid #e4e4e4;
      border-radius: var(--wp--custom--bradius--md);
      overflow: hidden;
      &:has(.flex-active) {
        border-color: var(--wp--preset--color--accent);
      }
    }
    li {
      width: auto;
    }
  }
  .flex-viewport {
    border: 1px solid #e4e4e4;
    border-radius: var(--wp--custom--bradius--md);
  }
}



body.woocommerce .wp-block-woocommerce-product-image-gallery {

  &.is-product-gallery-left div.images.woocommerce-product-gallery {
    display: flex;
    .flex-control-thumbs {
      order: 1;
      display: flex;
      flex-direction: column;
      min-width: 80px;
      min-width: clamp(50px, 7cqw, 80px);
      gap: 20px;
      padding: 0;
    }
    &:has(.flex-control-thumbs) {
      gap: 20px;
    }
    >.flex-viewport {
      order: 2;
    }
    .flex-control-thumbs li {
      width: auto;
    }
  }

  &.is-product-gallery-right {
    .onsale {
      inset-inline: -1rem auto;
    }
    div.images.woocommerce-product-gallery {
      display: flex;
      .flex-control-thumbs {
        order: 2;
        display: flex;
        flex-direction: column;
        min-width: 80px;
        min-width: clamp(50px, 7cqw, 80px);
        gap: 20px;
        padding: 0;
      }
      &:has(.flex-control-thumbs) {
        gap: 20px;
      }
      >.flex-viewport {
        order: 2;
      }
      .flex-control-thumbs li {
        width: auto;
      }
      .woocommerce-product-gallery__trigger {
        inset-inline: 0.5em auto;
      }
    }
  }

}