/* Product gallery arrows: color to orange, slightly bigger, optional pulse.
   IMPORTANT: Do NOT create new arrow UIs; only restyle existing leogallery arrows. */

:root{
  --gallery-arrow-orange: #ff7a00;
}

@keyframes gallery-arrow-pulse{
  0%   { transform: scale(1); filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); }
  70%  { transform: scale(1.06); filter: drop-shadow(0 8px 14px rgba(0,0,0,.22)); }
  100% { transform: scale(1); filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); }
}

/* CRITICAL: Lock body scroll when LightGallery modal is open (prevent page underneath from showing) */
body.lg-on{
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
}

/* CRITICAL: LightGallery modal must cover entire viewport (no page underneath visible) */
.lg-backdrop,
.lg-outer{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* Hide the theme's "fake slick arrows" on product pages (these were the unexpected arrows in the screenshot) */
.product-detail .arrows-product-fake{
  display: none !important;
}

/* Allegro-like UX (desktop only):
   - show big-image arrows only on hover over the big image area
   - show thumbnail pager arrows only on hover over the thumbnail strip */
@media (hover: hover) and (pointer: fine){
  /* Big image arrows hidden until hover */
  .product-detail .lSAction > a{
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .15s ease, transform .15s ease;
  }
  .product-detail .lSSlideWrapper:hover .lSAction > a,
  .product-detail .lSAction:hover > a{
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Thumbnail pager arrows hidden until hover */
  .product-detail .leo-pager-controls .leo-pager-prev,
  .product-detail .leo-pager-controls .leo-pager-next{
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .15s ease, transform .15s ease;
  }
  .product-detail .lSPager.lSGallery:hover ~ .leo-pager-controls .leo-pager-prev,
  .product-detail .lSPager.lSGallery:hover ~ .leo-pager-controls .leo-pager-next,
  .product-detail .leo-pager-controls:hover .leo-pager-prev,
  .product-detail .leo-pager-controls:hover .leo-pager-next{
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* When we "freeze" the thumbnail strip (hover-preview), force the pager to stay put.
     This prevents the visible shake caused by LightSlider trying to auto-reposition the strip. */
  .product-detail .lSPager.kajawis-pager-freeze{
    transition: none !important;
    transform: var(--kajawis-freeze-transform) !important;
  }
}

/* Main (big image) arrows from LightSlider: just make them orange + a bit larger */
.product-detail .lSAction > a{
  color: var(--gallery-arrow-orange) !important; /* used by the inline SVG via currentColor */
}
.product-detail .lSAction > a svg{
  transform: scale(1.15);
  transform-origin: 50% 50%;
}
.product-detail .lSAction > a:hover,
.product-detail .lSAction > a:focus-visible{
  animation: gallery-arrow-pulse 1.2s ease-out infinite;
}

/* Thumbnail (pager) arrows from leogallery: remove the white background block, make icon orange + bigger */
.product-detail .leo-pager-controls .leo-pager-prev,
.product-detail .leo-pager-controls .leo-pager-next{
  width: 34px !important;
  height: 42px !important;
  background-color: transparent !important;
  background-image: none !important; /* we'll render via ::before so we can color it */
  opacity: 0.95 !important;
}

/* Keep thumbnail size stable on hover/active:
   leogallery's lightslider CSS adds a 3px border on .active which can change layout/appearance.
   Reserve the border space always (transparent), and only change the color on active. */
.product-detail .lSSlideOuter .lSPager.lSGallery li{
  box-sizing: border-box !important;
  border: 3px solid transparent !important;
  border-radius: 0 !important;
  transform: none !important;
}
.product-detail .lSSlideOuter .lSPager.lSGallery li:hover{
  border-color: transparent !important; /* don't change size or border on hover */
  transform: none !important;
}
.product-detail .lSSlideOuter .lSPager.lSGallery li.active{
  border-color: var(--gallery-arrow-orange) !important;
}
.product-detail .lSSlideOuter .lSPager.lSGallery li img{
  display: block;
  transform: none !important;
}

/* LightGallery modal (opened after clicking big photo) - mobile only:
   Reduce thumbnail strip height so the main image gets more vertical space. */
@media (max-width: 767px){
  :root{
    --lg-thumb-size: 60px; /* +~5px per side vs previous 54 */
    --lg-thumb-gap: 6px;
    --lg-thumb-pad: 8px;
    --lg-thumb-rows: 2;
  }

  /* Computed thumb bar height */
  .lg-outer{
    --lg-thumbbar-h: calc(
      (var(--lg-thumb-rows) * var(--lg-thumb-size)) +
      ((var(--lg-thumb-rows) - 1) * var(--lg-thumb-gap)) +
      (2 * var(--lg-thumb-pad))
    );
  }

  /* Reserve space for the horizontal thumb bar */
  .lg-outer.lg-has-thumb .lg-item{
    padding-bottom: var(--lg-thumbbar-h) !important;
  }

  /* Thumb bar: horizontal scroll only, no vertical scrollbar */
  .lg-outer .lg-thumb-outer{
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--lg-thumbbar-h) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }

  /* 2-row horizontal strip: fill rows, extend to the right, scroll horizontally */
  .lg-outer .lg-thumb{
    padding: var(--lg-thumb-pad) !important;
    margin-bottom: 0 !important;
    height: calc(100% - (2 * var(--lg-thumb-pad))) !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: var(--lg-thumb-size) !important;
    grid-template-rows: repeat(var(--lg-thumb-rows), var(--lg-thumb-size)) !important;
    gap: var(--lg-thumb-gap) !important;
    width: max-content !important;
    position: relative !important;
    transform: none !important;
    left: 0 !important;
  }

  .lg-outer .lg-thumb-item{
    float: none !important;
    width: var(--lg-thumb-size) !important;
    height: var(--lg-thumb-size) !important;
    margin: 0 !important;
    border-width: 2px !important;
    border-radius: 4px !important;
  }

  .lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html{
    bottom: var(--lg-thumbbar-h) !important;
  }

  /* Keep the image OUT of the top toolbar area (close + counter),
     but avoid huge top gap: align to top with a small padding. */
  .lg-outer .lg-inner{
    position: fixed !important;
    top: 47px !important; /* toolbar height */
    left: 0 !important;
    width: 100% !important;
    height: calc(100% - 47px - var(--lg-thumbbar-h)) !important;
    overflow: hidden !important;
  }
  .lg-outer .lg-img-wrap{
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }
  .lg-outer .lg-img-wrap:before{
    display: none !important; /* remove built-in vertical centering spacer */
  }
  .lg-outer img.lg-object{
    margin-top: 8px !important;
    max-height: calc(100vh - 47px - var(--lg-thumbbar-h) - 16px) !important;
  }

  /* Stabilize LightGallery modal arrows (avoid jumping when layout changes):
     keep arrows centered within the usable area between toolbar and thumb bar. */
  .lg-outer .lg-actions{
    position: fixed !important;
    left: 0;
    right: 0;
    top: 47px; /* toolbar height */
    bottom: var(--lg-thumbbar-h);
    pointer-events: none; /* arrows re-enable */
  }
  .lg-outer .lg-actions .lg-prev,
  .lg-outer .lg-actions .lg-next{
    pointer-events: auto;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  /* Force arrows and toolbar to ALWAYS stay visible on mobile (no flicker) */
  .lg-outer .lg-actions,
  .lg-outer .lg-prev,
  .lg-outer .lg-next,
  .lg-outer .lg-toolbar{
    opacity: 1 !important;
    visibility: visible !important;
  }
  .lg-outer .lg-prev,
  .lg-outer .lg-next{
    -webkit-transform: translateY(-50%) !important;
    transform: translateY(-50%) !important;
  }
  .lg-outer .lg-toolbar{
    -webkit-transform: none !important;
    transform: none !important;
  }

  /* Make modal arrows orange (both left and right) */
  .lg-outer .lg-prev,
  .lg-outer .lg-next{
    color: var(--gallery-arrow-orange) !important;
  }
  .lg-outer .lg-prev:after,
  .lg-outer .lg-next:after{
    color: var(--gallery-arrow-orange) !important;
  }
}
.product-detail .leo-pager-controls .leo-pager-prev::before,
.product-detail .leo-pager-controls .leo-pager-next::before{
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto;
  background: var(--gallery-arrow-orange);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.product-detail .leo-pager-controls .leo-pager-prev::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18l-6-6 6-6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18l-6-6 6-6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.product-detail .leo-pager-controls .leo-pager-next::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.product-detail .leo-pager-controls .leo-pager-prev:hover,
.product-detail .leo-pager-controls .leo-pager-next:hover,
.product-detail .leo-pager-controls .leo-pager-prev:focus-visible,
.product-detail .leo-pager-controls .leo-pager-next:focus-visible{
  animation: gallery-arrow-pulse 1.2s ease-out infinite;
}