/* BB CP Variation Gallery — Frontend */

/* Stack main image + thumbs in .composited_product_images */
.composited_product_images.bb-vg-has-gallery{display:flex !important;flex-direction:column !important;align-items:center !important;gap:10px}
.composited_product_images.bb-vg-has-gallery figure{margin:0 !important}
/* Reserve space to reduce CLS */
.composited_product_images.bb-vg-has-gallery figure.composited_product_image{aspect-ratio:450/500; width:100%;}
.composited_product_images.bb-vg-has-gallery figure img{max-width:100% !important;height:auto !important;object-fit:contain !important;}

/* BB_VG_DESKTOP_MAIN_IMAGE_SCALE_FIX_2026_04
 * Adapt gallery shell to CPR 2-col wrapper from 750px (bb-cpr BB_CPR_LAYOUT_STABLE_LOAD):
 * fill available figure width; avoid empty space between main image and thumbnails. */
@media (min-width: 750px){
  .composited_product_images.bb-vg-has-gallery{
    align-items:center !important;
    justify-content:flex-start !important;
    gap:12px !important;
  }
  .composited_product_images.bb-vg-has-gallery figure.composited_product_image{
    /* Full column width on desktop (no mobile-style shrink here). */
    width:100% !important;
    max-width:100% !important;
    /* Keep box geometry fixed while JS swaps to full-res on hover zoom. */
    aspect-ratio:450/500 !important;
    min-height:0 !important;
    margin:0 auto !important;
    overflow:hidden !important;
  }
  .composited_product_images.bb-vg-has-gallery figure.composited_product_image > a,
  .composited_product_images.bb-vg-has-gallery figure.composited_product_image > a.image{
    display:block !important;
    width:100% !important;
  }
  .composited_product_images.bb-vg-has-gallery figure.composited_product_image img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
  }
  /* Ensure the actually visible main-image selector chain in composite PDP
     fills available figure width, even when upstream width/height attributes
     or theme selectors try to keep it at intrinsic 300px. */
  .bb-configurator .composite_component .composited_product_images.bb-vg-shell.bb-vg-has-gallery
  figure.composited_product_image.woocommerce-product-gallery__image > a.image > img,
  .bb-configurator .composite_component .composited_product_images.bb-vg-shell.bb-vg-has-gallery
  figure.composited_product_image.woocommerce-product-gallery__image > a > img{
    width:100% !important;
    max-width:100% !important;
    min-width:100% !important;
    height:auto !important;
    object-fit:contain !important;
    display:block !important;
  }
  .composited_product_images.bb-vg-has-gallery .bb-vg-thumbs{
    margin:0 auto !important;
    align-self:center !important;
    justify-content:center !important;
    justify-items:center !important;
  }
}

/* Thumbnail panel: vertical scroll on desktop (show ~3 rows + a hint of more) */
.composited_product_images .bb-vg-thumbs{
  --bb-vg-thumb-box: 84px;
  --bb-vg-thumb-gap: 10px;

  display:grid !important;
  grid-template-columns:repeat(3, var(--bb-vg-thumb-box));
  gap:var(--bb-vg-thumb-gap);
  align-items:start;
  justify-content:center;
  justify-items:center;

  /* Reserve space for scrollbar so it doesn't overlay thumbs (+ horizontal padding 12+28=40px) */
  box-sizing:border-box;
  width:calc((var(--bb-vg-thumb-box) * 3) + (var(--bb-vg-thumb-gap) * 2) + 40px);
  padding-right:28px;
  /* Room for .is-active halo (3px) + scale(1.02); 6px was too tight when the grid hits overflow-x */
  padding-left:12px;
  padding-top:6px;
  padding-bottom:6px;
  margin:0 auto;

  /* 3 full rows + a small "more" hint */
  max-height:calc((var(--bb-vg-thumb-box) * 3) + (var(--bb-vg-thumb-gap) * 2) + (var(--bb-vg-thumb-box) * 0.25) + 12px);
  min-height:calc((var(--bb-vg-thumb-box) * 3) + (var(--bb-vg-thumb-gap) * 2) + 12px);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable both-edges;
  -webkit-overflow-scrolling:touch;
}

/* Mobile: horizontal scroll (phones). Keep <600px so tablets (600–999px) can use the dedicated tablet layout. */
@media (max-width: 599px){
  /* BB_VG_MOBILE_MAIN_IMAGE_SIDE_PADDING_2026_04
   * Keep breathing room from phone edges for the main image frame. */
  .composited_product_images.bb-vg-has-gallery{
    --bb-vg-mobile-main-side-pad: 10px;
  }
  /*
   * Mobile-only: remove phantom space + shrink the whole main-image block so the thumb
   * rail sits higher (narrower figure => shorter image height; no desktop/tablet shrink).
   */
  .composited_product_images.bb-vg-has-gallery figure.composited_product_image{
    aspect-ratio:auto !important;
    height:auto !important;
    min-height:0 !important;
    /* 10% smaller than the previous 86% mobile figure, so block height drops proportionally. */
    width:min(77.4%, calc(100% - (var(--bb-vg-mobile-main-side-pad) * 2))) !important;
    max-width:min(77.4%, calc(100% - (var(--bb-vg-mobile-main-side-pad) * 2))) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    margin:0 auto !important;
    padding:0 !important;
    line-height:0 !important;
  }
  .composited_product_images.bb-vg-has-gallery figure.composited_product_image > a,
  .composited_product_images.bb-vg-has-gallery figure.composited_product_image > a.image{
    display:block !important;
    width:100% !important;
    line-height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }
  .composited_product_images.bb-vg-has-gallery figure.composited_product_image img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    margin:0 auto !important;
    display:block !important;
  }

  /* Reduce the vertical whitespace under the gallery on phones */
  .composite_component .composited_product_images.bb-vg-has-gallery{
    gap: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .composited_product_images .bb-vg-thumbs{
    /* Make thumbs slightly smaller so ~6 fit on common mobile widths */
    --bb-vg-thumb-box: min(108px, calc((100vw - 48px) / 4));
    --bb-vg-thumb-gap: 10px;
    --bb-vg-mobile-rail-edge-pad: 10px;

    display:flex !important;
    flex-wrap:nowrap !important;
    gap:var(--bb-vg-thumb-gap);
    justify-content:flex-start;
    align-items:flex-start;

    /* Create actual visible outer inset instead of relying only on inner padding. */
    width:calc(100% - (var(--bb-vg-mobile-rail-edge-pad) * 2)) !important;
    max-width:calc(100% - (var(--bb-vg-mobile-rail-edge-pad) * 2)) !important;
    margin-left:auto !important;
    margin-right:auto !important;

    /* Reduce reserved space below the mobile thumb strip while keeping room for the active halo */
    max-height:calc(var(--bb-vg-thumb-box) + 18px);
    min-height:calc(var(--bb-vg-thumb-box) + 18px);
    box-sizing:border-box;

    /* Keep a small internal inset; tight top so the rail sits closer under the main image. */
    padding:6px 2px 2px 2px;
    scroll-padding-left:2px;
    scroll-padding-right:2px;
    margin-top:0 !important;
    margin-bottom:0 !important;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-gutter:auto;
    -webkit-overflow-scrolling:touch;
  }
}


.bb-vg-thumb{border:1px solid rgba(0,0,0,.15);padding:0;background:#fff;border-radius:6px;cursor:pointer;line-height:0;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;width:var(--bb-vg-thumb-box, 84px);height:var(--bb-vg-thumb-box, 84px);transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease}

/* Hover/focus highlight (override theme defaults that can add bright green focus styles) */
.bb-vg-thumb:hover,
.bb-vg-thumb:focus,
.bb-vg-thumb:focus-visible{
  outline:none !important;
  background:#fff !important;
  border-color:rgba(233,194,78,.95) !important; /* theme yellow */
  box-shadow:0 0 0 3px rgba(233,194,78,.35) !important;
}

/* Thumb image sizing (show the full render clearly) */
.bb-configurator .composite_component .composited_product_images .bb-vg-thumbs .bb-vg-thumb img,
.composited_product_images .bb-vg-thumbs .bb-vg-thumb img{
  width:100% !important;
  max-width:100% !important;
  height:100% !important;
  max-height:100% !important;
  /* Crop consistently from the bottom (user request) */
  object-fit:cover !important;
  object-position:center top !important;
  display:block !important;
}

.composited_product_images .bb-vg-thumb.is-active{
  border-color:rgba(233,194,78,.95) !important;
  box-shadow:0 0 0 3px rgba(233,194,78,.35) !important;
  transform:translateZ(0) scale(1.02);
}

.bb-vg-thumb:focus:not(.is-active),
.bb-vg-thumb:focus-visible:not(.is-active){
  border-color:rgba(0,0,0,.15) !important;
  box-shadow:none !important;
}

/* -------------------------------------------------------------------------
 * Mobile active-state rules
 * Problem:
 * - Tapping a thumb leaves it focused (yellow), but swiping the main image
 *   changes `.is-active` to another thumb (grey/black). Result: two highlights.
 * Fix (mobile only):
 * - Make `.is-active` the ONLY visual selection state (yellow).
 * - Neutralize focus highlight when the focused thumb is NOT active.
 * ---------------------------------------------------------------------- */
@media (max-width: 599px){
  .composited_product_images .bb-vg-thumb.is-active{
    border-color:rgba(233,194,78,.95) !important;
    box-shadow:0 0 0 3px rgba(233,194,78,.35) !important;
    transform:translateZ(0) scale(1.02);
  }

  .bb-vg-thumb:focus:not(.is-active),
  .bb-vg-thumb:focus-visible:not(.is-active){
    border-color:rgba(0,0,0,.15) !important;
    box-shadow:none !important;
  }

  /* Perceptible swap animation when the main image changes via swipe/tap */
  .bb-vg-shell figure img.bb-vg-swap-anim,
  .composited_product_images figure.composited_product_image img.bb-vg-swap-anim{
    animation: bbVgSwap .24s ease-out;
  }

  /* Animate the CURRENT image out first (used for thumbnail-tap simulated swipes). */
  .bb-vg-shell figure img.bb-vg-swap-out,
  .composited_product_images figure.composited_product_image img.bb-vg-swap-out{
    animation: bbVgSwapOut .24s ease-in;
  }
  .bb-vg-shell figure img.bb-vg-swap-anim.bb-vg-swap-strong,
  .composited_product_images figure.composited_product_image img.bb-vg-swap-anim.bb-vg-swap-strong{
    animation-duration: .32s;
  }
  .bb-vg-shell figure img.bb-vg-swap-out.bb-vg-swap-strong,
  .composited_product_images figure.composited_product_image img.bb-vg-swap-out.bb-vg-swap-strong{
    animation-duration: .32s;
  }
  .bb-vg-shell figure img.bb-vg-swap-anim.bb-vg-swap-left,
  .composited_product_images figure.composited_product_image img.bb-vg-swap-anim.bb-vg-swap-left{
    animation-name: bbVgSwapLeft;
  }
  .bb-vg-shell figure img.bb-vg-swap-out.bb-vg-swap-left,
  .composited_product_images figure.composited_product_image img.bb-vg-swap-out.bb-vg-swap-left{
    animation-name: bbVgSwapOutLeft;
  }
  .bb-vg-shell figure img.bb-vg-swap-anim.bb-vg-swap-left.bb-vg-swap-strong,
  .composited_product_images figure.composited_product_image img.bb-vg-swap-anim.bb-vg-swap-left.bb-vg-swap-strong{
    animation-name: bbVgSwapLeftStrong;
  }
  .bb-vg-shell figure img.bb-vg-swap-out.bb-vg-swap-left.bb-vg-swap-strong,
  .composited_product_images figure.composited_product_image img.bb-vg-swap-out.bb-vg-swap-left.bb-vg-swap-strong{
    animation-name: bbVgSwapOutLeftStrong;
  }
  .bb-vg-shell figure img.bb-vg-swap-anim.bb-vg-swap-right,
  .composited_product_images figure.composited_product_image img.bb-vg-swap-anim.bb-vg-swap-right{
    animation-name: bbVgSwapRight;
  }
  .bb-vg-shell figure img.bb-vg-swap-out.bb-vg-swap-right,
  .composited_product_images figure.composited_product_image img.bb-vg-swap-out.bb-vg-swap-right{
    animation-name: bbVgSwapOutRight;
  }
  .bb-vg-shell figure img.bb-vg-swap-anim.bb-vg-swap-right.bb-vg-swap-strong,
  .composited_product_images figure.composited_product_image img.bb-vg-swap-anim.bb-vg-swap-right.bb-vg-swap-strong{
    animation-name: bbVgSwapRightStrong;
  }
  .bb-vg-shell figure img.bb-vg-swap-out.bb-vg-swap-right.bb-vg-swap-strong,
  .composited_product_images figure.composited_product_image img.bb-vg-swap-out.bb-vg-swap-right.bb-vg-swap-strong{
    animation-name: bbVgSwapOutRightStrong;
  }

  /* Keep the old image hidden after the out-animation, until the new image is applied. */
  .bb-vg-shell figure img.bb-vg-out-done,
  .composited_product_images figure.composited_product_image img.bb-vg-out-done{
    opacity: 0;
  }

  /* Let the main image follow the finger while swiping (JS applies transform). */
  .bb-vg-shell figure img.bb-vg-dragging,
  .composited_product_images figure.composited_product_image img.bb-vg-dragging{
    transition:none !important;
    will-change:transform, opacity;
  }
}

@keyframes bbVgSwap{from{opacity:.65;transform:translateZ(0) scale(.99);}to{opacity:1;transform:translateZ(0) scale(1);}}
@keyframes bbVgSwapOut{from{opacity:1;transform:translateZ(0) scale(1);}to{opacity:.55;transform:translateZ(0) scale(.99);}}
@keyframes bbVgSwapLeft{from{opacity:.65;transform:translate3d(14px,0,0) scale(.99);}to{opacity:1;transform:translate3d(0,0,0) scale(1);}}
@keyframes bbVgSwapRight{from{opacity:.65;transform:translate3d(-14px,0,0) scale(.99);}to{opacity:1;transform:translate3d(0,0,0) scale(1);}}

/* Out variants: move the current image away in the swipe direction. */
@keyframes bbVgSwapOutLeft{from{opacity:1;transform:translate3d(0,0,0) scale(1);}to{opacity:.55;transform:translate3d(-14px,0,0) scale(.99);}}
@keyframes bbVgSwapOutRight{from{opacity:1;transform:translate3d(0,0,0) scale(1);}to{opacity:.55;transform:translate3d(14px,0,0) scale(.99);}}

/* Stronger variant used for simulated swipes on thumbnail taps (mobile only). */
@keyframes bbVgSwapLeftStrong{from{opacity:.55;transform:translate3d(26px,0,0) scale(.985);}to{opacity:1;transform:translate3d(0,0,0) scale(1);}}
@keyframes bbVgSwapRightStrong{from{opacity:.55;transform:translate3d(-26px,0,0) scale(.985);}to{opacity:1;transform:translate3d(0,0,0) scale(1);}}

@keyframes bbVgSwapOutLeftStrong{from{opacity:1;transform:translate3d(0,0,0) scale(1);}to{opacity:.45;transform:translate3d(-26px,0,0) scale(.985);}}
@keyframes bbVgSwapOutRightStrong{from{opacity:1;transform:translate3d(0,0,0) scale(1);}to{opacity:.45;transform:translate3d(26px,0,0) scale(.985);}}

/* Hide the original Composite Products image wrapper once we insert our stable shell.
   The original wrapper is frequently re-rendered by other scripts on variation changes,
   which causes visible jitter. */
.composite_component .composited_product_images.bb-vg-src.bb-vg-src-hidden,
.composite_component .woocommerce-product-gallery.bb-vg-src.bb-vg-src-hidden{
  display:none !important;
}

/* Prevent any initial "old" MAIN image from flashing before our JS applies the correct one.
   Important: do NOT hide thumbnail <img> elements (they may also carry data-cmp-info). */
.composited_product_images figure.composited_product_image img[data-cmp-info]{opacity:0;}
.composited_product_images figure.composited_product_image img[data-cmp-info].bb-vg-img-ready{opacity:1;transition:opacity .12s ease;}

/* Prevent a visible "double swap" blink when swapping the main image. */
.bb-vg-img-loading{opacity:0;transition:opacity .12s ease;}

/* -------------------------------------------------------------------------
 * Desktop hover zoom (in-place)
 * - Uses full-res image, loaded on hover only.
 * - Keeps the default main image at the performance size.
 * ---------------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  .bb-vg-shell figure.composited_product_image,
  .bb-vg-shell figure.woocommerce-product-gallery__image{
    position:relative;
    overflow:hidden;
  }
  .bb-vg-shell figure.composited_product_image img,
  .bb-vg-shell figure.woocommerce-product-gallery__image img{
    will-change:transform;
    transition:transform .12s ease-out;
    transform:translateZ(0);
  }
  .bb-vg-shell figure.bb-vg-zooming img{
    transform:translateZ(0) scale(1.8);
    transform-origin:var(--bb-vg-ox, 50%) var(--bb-vg-oy, 50%);
    cursor:zoom-out;
  }
  .bb-vg-shell figure.bb-vg-zooming{cursor:zoom-in;}
}

/* Hover zoom remains enabled; fixed figure box above prevents thumb-rail pushdown. */

/* -------------------------------------------------------------------------
 * Lightbox (own overlay)
 * ---------------------------------------------------------------------- */
.bb-vg-lightbox{position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.86)}
.bb-vg-lightbox.is-open{display:flex}
.bb-vg-lb-stage{max-width:min(92vw,1100px);max-height:92vh;display:flex;align-items:center;justify-content:center}
.bb-vg-lb-img{max-width:92vw;max-height:92vh;display:block;user-select:auto;-webkit-user-drag:auto}
.bb-vg-lb-close,.bb-vg-lb-prev,.bb-vg-lb-next{position:fixed;top:24px;right:24px;appearance:none;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:34px;line-height:1;padding:10px 14px;border-radius:999px;cursor:pointer}
.bb-vg-lb-prev,.bb-vg-lb-next{top:50%;transform:translateY(-50%);font-size:48px;padding:10px 16px}
.bb-vg-lb-prev{left:20px;right:auto}
.bb-vg-lb-next{right:20px}
.bb-vg-lb-counter{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.85);font-size:14px}
body.bb-vg-lb-open{overflow:hidden}


/* Tablet layout (600–1024px): thumbs beside main image when the gallery is full-width (CPR single column). */
@media (min-width: 600px) and (max-width: 1024px){
  /* ~10px more for the grid vs desktop: scrollbar reserve 28→18px (stable gutter still ok). Keep 12px left for .is-active halo. */
  .composited_product_images .bb-vg-thumbs{
    padding-right: 18px;
    width: calc((var(--bb-vg-thumb-box) * 3) + (var(--bb-vg-thumb-gap) * 2) + 50px);
  }
  .composited_product_images.bb-vg-has-gallery{
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 16px !important;
  }
  .composited_product_images.bb-vg-has-gallery figure.composited_product_image{
    /* Let the main image use available row space (no mobile-only shrink on tablet). */
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: 100%;
  }
  .composited_product_images.bb-vg-has-gallery .bb-vg-thumbs{
    /* Vertical panel on the right, keep the original 3-column grid */
    --bb-vg-thumb-box: 72px; /* slightly smaller on tablet so 3 columns fit nicely */
    grid-template-columns: repeat(3, var(--bb-vg-thumb-box));
    width: calc((var(--bb-vg-thumb-box) * 3) + (var(--bb-vg-thumb-gap) * 2) + 50px);
    margin: 0 !important;
    max-height: 520px;
    min-height: 0;
    align-content: start;
  }
}

/*
 * BB_VG_COMPOSITE_2COL_750_1024_2026_04
 * CPR two-column PDP (>=750px): the gallery sits in a ~40% grid column. The generic tablet
 * row layout above squeezes main+thumbs horizontally — restore vertical stack + full column width.
 */
@media (min-width: 750px) and (max-width: 1024px){
  .bb-configurator .composite_component .composited_product_images.bb-vg-has-gallery{
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    align-self: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .bb-configurator .composite_component .composited_product_images.bb-vg-has-gallery figure.composited_product_image{
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .bb-configurator .composite_component .composited_product_images.bb-vg-has-gallery .bb-vg-thumbs{
    /* Keep fixed cell size — `100%` inside `--bb-vg-thumb-box` can resolve to 0 during layout and collapse thumbs. */
    --bb-vg-thumb-box: 84px;
    padding-left: 12px !important;
    padding-right: 18px !important;
    width: min(100%, calc((var(--bb-vg-thumb-box) * 3) + (var(--bb-vg-thumb-gap) * 2) + 50px)) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    /* Tablet: scrollbar/halo reserve (+50 vs desktop +40); avoid horizontal scroll when column is barely too narrow. */
    overflow-x: hidden !important;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }
}

/* iPad Mini–class widths in the CPR gallery column: slightly smaller cells so three columns + padding fit without clipping; iPad Air (~820px) keeps 84px above. */
@media (min-width: 750px) and (max-width: 790px){
  .bb-configurator .composite_component .composited_product_images.bb-vg-has-gallery .bb-vg-thumbs{
    --bb-vg-thumb-box: 78px;
    width: min(100%, calc((var(--bb-vg-thumb-box) * 3) + (var(--bb-vg-thumb-gap) * 2) + 50px)) !important;
  }
}

/*
 * Special tablet range (iPad-family portrait widths): 768–834px
 * - Ensure the thumbnail grid stays height-limited with vertical scroll (instead of expanding fully).
 * - Add extra spacing between the main image and the thumbnail panel.
 */
@media (min-width: 750px) and (max-width: 834px){
  .composited_product_images.bb-vg-has-gallery{
    gap: 26px !important;
  }

  /* Full rows only — fractional “peek” row looked like a bug (thumbs cut in half) on iPad portrait. */
  .composited_product_images.bb-vg-has-gallery .bb-vg-thumbs{
    max-height: calc((var(--bb-vg-thumb-box) * 3) + (var(--bb-vg-thumb-gap) * 2) + 12px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}


/* Touch devices/iPhone: make .is-active the only visible selected state.
   iOS can leave a neighboring thumb in :hover/:focus after the strip auto-scrolls,
   which looks like a second selected thumbnail even though the main image did not change. */
@media (hover: none), (pointer: coarse){
  .bb-vg-thumb:hover:not(.is-active),
  .bb-vg-thumb:focus:not(.is-active),
  .bb-vg-thumb:focus-visible:not(.is-active){
    outline:none !important;
    background:#fff !important;
    border-color:rgba(0,0,0,.15) !important;
    box-shadow:none !important;
    transform:none !important;
  }
}