.elementor-kit-8{--e-global-color-primary:#565656;color:var( --e-global-color-primary );}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==== Elementor Pro Product Images – FINAL gap fix ==== */
div.product .elementor-widget-woocommerce-product-images{
  --thumb-gap: 20px;            /* horizontal space BETWEEN the 3 thumbs */
  --thumbs-bottom-gap: 28px;    /* space BELOW the thumbs row */
  --pgap: 20px;
  --thumb-h: 110px;
  --radius: 14px;
  --ring: var(--e-global-color-primary, #6e56cf);
  --shadow: 0 8px 24px rgba(0,0,0,.10);
}

/* space under the big image */
div.product .elementor-widget-woocommerce-product-images
.woocommerce-product-gallery__image{ margin-bottom: var(--pgap) !important; }

/* visuals */
div.product .elementor-widget-woocommerce-product-images
.woocommerce-product-gallery__image a,
div.product .elementor-widget-woocommerce-product-images
.woocommerce-product-gallery__image img{
  display:block; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow);
}
div.product .elementor-widget-woocommerce-product-images
img.wp-post-image, 
div.product .elementor-widget-woocommerce-product-images
[class*="thumb"] img{
  height:var(--thumb-h); width:auto; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow);
}

/* ===== HARD GAP (works with Swiper/Flex/anything) ===== */
/* 1) Target ANY plausible thumbnails wrapper */
div.product .elementor-widget-woocommerce-product-images
:where(.flex-control-thumbs,
       .woocommerce-product-thumbnails .swiper-wrapper,
       .woocommerce-product-thumbnails,
       .swiper-container-thumbs .swiper-wrapper,
       .thumbnails,
       .woocommerce-product-gallery__thumbs,
       .woocommerce-product-gallery .flex-control-nav){
  margin-bottom: var(--thumbs-bottom-gap) !important;
}

/* 2) Give spacing between siblings no matter what layout engine is used */
div.product .elementor-widget-woocommerce-product-images
:where(.flex-control-thumbs > li,
       .woocommerce-product-thumbnails .swiper-wrapper > .swiper-slide,
       .thumbnails > *,
       .woocommerce-product-gallery .flex-control-nav > li){
  margin:0 !important;          /* reset theme margins */
  width:auto !important;        /* avoid forced % widths */
  float:none !important;
  box-sizing:border-box;
}
div.product .elementor-widget-woocommerce-product-images
:where(.flex-control-thumbs > li,
       .woocommerce-product-thumbnails .swiper-wrapper > .swiper-slide,
       .thumbnails > *,
       .woocommerce-product-gallery .flex-control-nav > li):not(:first-child){
  margin-left: var(--thumb-gap) !important;  /* <-- the actual gap */
}

/* Optional: hover/active ring */
div.product .elementor-widget-woocommerce-product-images
:where(.swiper-slide-thumb-active img, .flex-control-thumbs li.flex-active img){
  outline:2px solid var(--ring); outline-offset:0; filter:saturate(1.05);
}
/* ===== Yoge (PBMIT) × Elementor Pro – FORCE GAP BETWEEN 3 THUMBS ===== */
/* tune once */
div.product .elementor-widget-woocommerce-product-images{ --sv-gap: 20px; --sv-bottom: 28px; }

/* Hit EVERY wrapper Yoge/Woo uses */
div.product .elementor-widget-woocommerce-product-images
:is(.woocommerce-product-thumbnails,
    .woocommerce-product-gallery__thumbs,
    .woocommerce-product-gallery .flex-control-nav,
    .flex-control-thumbs,
    .pbmit-woo-product-thumbnails,
    .pbmit-woo-gallery-thumbs){
  margin-bottom: var(--sv-bottom) !important;
}

/* Make the track distribute space instead of gluing slides */
div.product .elementor-widget-woocommerce-product-images
:is(.woocommerce-product-thumbnails .swiper-wrapper,
    .woocommerce-product-gallery__thumbs .swiper-wrapper,
    .pbmit-woo-product-thumbnails .swiper-wrapper,
    .pbmit-woo-gallery-thumbs .swiper-wrapper,
    .flex-control-thumbs){
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important; /* creates the visible gaps */
  gap: 0 !important;                         /* ignore any theme “gap” */
  transform: none !important;                /* kill Swiper translate */
  width: 100% !important;
}

/* Give each thumb a width that leaves room for the gaps (3 items) */
div.product .elementor-widget-woocommerce-product-images
:is(.woocommerce-product-thumbnails .swiper-wrapper > .swiper-slide,
    .woocommerce-product-gallery .flex-control-nav > li,
    .flex-control-thumbs > li){
  margin: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
  width: calc((100% - 2 * var(--sv-gap)) / 3) !important;  /* ← real spacing */
}

/* Optional: pretty corners/shadow (keep or drop) */
div.product .elementor-widget-woocommerce-product-images
:is(.woocommerce-product-thumbnails img,.flex-control-thumbs img){
  border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.10);
  height: 110px; width: auto; object-fit: cover; display: block;
}

/* ===== FORCE REAL SPACE + EQUAL WIDTHS (works with Yoge/Swiper/Flex) ===== */
/* set your gap once */
:root{ --sv-thumb-gap:16px; }     /* change to 10–20px */

/* --- Case A: our tray/row created by the MU plugin --- */
.elementor-widget-woocommerce-product-images .sv-thumb-tray .sv-row{
  display:flex !important; gap:0 !important; justify-content:flex-start !important;
}
.elementor-widget-woocommerce-product-images .sv-thumb-tray .sv-row >*{
  /* dynamic width: (100% - (n-1)*gap)/n  */
  --n:3; /* default */
  flex:0 0 calc((100% - (var(--n) - 1)*var(--sv-thumb-gap))/var(--n)) !important;
  max-width:calc((100% - (var(--n) - 1)*var(--sv-thumb-gap))/var(--n)) !important;
  margin:0 !important; box-sizing:border-box !important; float:none !important; min-width:0 !important;
}
.elementor-widget-woocommerce-product-images .sv-thumb-tray .sv-row >* + *{
  margin-left:var(--sv-thumb-gap) !important;
}
/* set --n based on how many thumbs exist (2 / 3 / 4) */
.elementor-widget-woocommerce-product-images .sv-thumb-tray .sv-row >*:nth-last-child(2):first-child,
.elementor-widget-woocommerce-product-images .sv-thumb-tray .sv-row >*:nth-last-child(2):first-child ~ *{ --n:2; }
.elementor-widget-woocommerce-product-images .sv-thumb-tray .sv-row >*:nth-last-child(3):first-child,
.elementor-widget-woocommerce-product-images .sv-thumb-tray .sv-row >*:nth-last-child(3):first-child ~ *{ --n:3; }
.elementor-widget-woocommerce-product-images .sv-thumb-tray .sv-row >*:nth-last-child(4):first-child,
.elementor-widget-woocommerce-product-images .sv-thumb-tray .sv-row >*:nth-last-child(4):first-child ~ *{ --n:4; }

/* --- Case B: no tray/row (native Elementor/Yoge wrappers) --- */
.elementor-widget-woocommerce-product-images
:is(.woocommerce-product-thumbnails .swiper-wrapper,
    .woocommerce-product-gallery__thumbs .swiper-wrapper,
    .flex-control-thumbs){
  display:flex !important; gap:0 !important; justify-content:flex-start !important;
}
.elementor-widget-woocommerce-product-images
:is(.woocommerce-product-thumbnails .swiper-wrapper,
    .woocommerce-product-gallery__thumbs .swiper-wrapper,
    .flex-control-thumbs) > *{
  --n:3; /* default */
  flex:0 0 calc((100% - (var(--n) - 1)*var(--sv-thumb-gap))/var(--n)) !important;
  max-width:calc((100% - (var(--n) - 1)*var(--sv-thumb-gap))/var(--n)) !important;
  margin:0 !important; box-sizing:border-box !important; float:none !important; min-width:0 !important;
}
.elementor-widget-woocommerce-product-images
:is(.woocommerce-product-thumbnails .swiper-wrapper,
    .woocommerce-product-gallery__thumbs .swiper-wrapper,
    .flex-control-thumbs) > * + *{
  margin-left:var(--sv-thumb-gap) !important;
}
/* count items for 2 / 3 / 4 thumbs */
.elementor-widget-woocommerce-product-images
:is(.woocommerce-product-thumbnails .swiper-wrapper,
    .woocommerce-product-gallery__thumbs .swiper-wrapper,
    .flex-control-thumbs) > *:nth-last-child(2):first-child,
.elementor-widget-woocommerce-product-images
:is(.woocommerce-product-thumbnails .swiper-wrapper,
    .woocommerce-product-gallery__thumbs .swiper-wrapper,
    .flex-control-thumbs) > *:nth-last-child(2):first-child ~ *{ --n:2; }
.elementor-widget-woocommerce-product-images
:is(.woocommerce-product-thumbnails .swiper-wrapper,
    .woocommerce-product-gallery__thumbs .swiper-wrapper,
    .flex-control-thumbs) > *:nth-last-child(3):first-child,
.elementor-widget-woocommerce-product-images
:is(.woocommerce-product-thumbnails .swiper-wrapper,
    .woocommerce-product-gallery__thumbs .swiper-wrapper,
    .flex-control-thumbs) > *:nth-last-child(3):first-child ~ *{ --n:3; }
.elementor-widget-woocommerce-product-images
:is(.woocommerce-product-thumbnails .swiper-wrapper,
    .woocommerce-product-gallery__thumbs .swiper-wrapper,
    .flex-control-thumbs) > *:nth-last-child(4):first-child,
.elementor-widget-woocommerce-product-images
:is(.woocommerce-product-thumbnails .swiper-wrapper,
    .woocommerce-product-gallery__thumbs .swiper-wrapper,
    .flex-control-thumbs) > *:nth-last-child(4):first-child ~ *{ --n:4; }/* End custom CSS */