/* BG gallery swipe-peek v2 (draft). `translate` is independent of FlexSlider's inline transform. */
@media (max-width:767px){
  .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image{position:relative}
  /* light edge + glow on the next slide's left edge, only while peeking */
  .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image + .woocommerce-product-gallery__image::after{
    content:"";position:absolute;top:0;bottom:0;left:0;width:28px;pointer-events:none;opacity:0;
    background:linear-gradient(90deg,rgba(246,240,228,.55) 0,rgba(246,240,228,.18) 2px,rgba(246,240,228,.07) 10px,transparent 28px)}
  .woocommerce-product-gallery__wrapper.bg-peek{animation:bgPeek 1.2s cubic-bezier(.3,.7,.4,1) both}
  .woocommerce-product-gallery__wrapper.bg-peek .woocommerce-product-gallery__image + .woocommerce-product-gallery__image::after{animation:bgGlow 1.2s ease both}
  @keyframes bgPeek{0%{translate:0 0}35%{translate:-20vw 0}58%{translate:-20vw 0}82%{translate:1.5vw 0}100%{translate:0 0}}
  @keyframes bgGlow{0%,100%{opacity:0}25%,65%{opacity:1}}
  .bg-peek-arrow{position:absolute;right:10px;top:50%;margin-top:-22px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
    color:rgba(255,255,255,.58);filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));opacity:0;pointer-events:none;z-index:5}
  .bg-peek-arrow.bg-peek{animation:bgArrow 2.4s ease both}
  @keyframes bgArrow{0%{opacity:0;transform:translateX(-6px)}15%{opacity:1;transform:translateX(0)}30%{opacity:.55}45%{opacity:1}60%{opacity:.55;transform:translateX(0)}100%{opacity:0;transform:translateX(4px)}}
}
@media (prefers-reduced-motion:reduce){.woocommerce-product-gallery__wrapper.bg-peek,.bg-peek-arrow.bg-peek,.woocommerce-product-gallery__wrapper.bg-peek *::after{animation:none}.bg-peek-arrow{display:none}}