/* A 32px visual control retains a 44px pointer target. */
.product-general .slider-product-main > .slick-arrow,
.popup-product-gallery .slider-product-gallery > .slick-arrow {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  border: 6px solid transparent;
  padding: 0;
  border-radius: 50%;
  background-color: #ffdc1e;
  background-clip: padding-box;
  background-size: 16px;
  box-shadow: none;
}

.product-general .slider-product-main > .slick-arrow:hover,
.popup-product-gallery .slider-product-gallery > .slick-arrow:hover {
  background-color: #ffc700;
}

.product-general .slider-product-main > .slick-arrow:focus-visible,
.popup-product-gallery .slider-product-gallery > .slick-arrow:focus-visible {
  outline: 2px solid #151533;
  outline-offset: -3px;
}

.product-general .slider-product-main > .slick-prev,
.popup-product-gallery .slider-product-gallery > .slick-prev {
  left: 0;
}

.product-general .slider-product-main > .slick-next,
.popup-product-gallery .slider-product-gallery > .slick-next {
  right: 0;
}

/* Match the add-to-cart green without resizing the selected option. */
.product-general input[name="product_linker_switcher"]:checked + .checkmark-box {
  border-color: #20cd65;
  box-shadow: inset 0 0 0 1px #20cd65;
}

/* Use the popup's existing side margins without covering mobile artwork. */
@media (max-width: 767px) {
  .product-general .slider-product-main > .slick-arrow,
  .popup-product-gallery .slider-product-gallery > .slick-arrow {
    border-width: 10px;
    background-size: 14px;
  }

  .popup-product-gallery .slider-product-gallery > .slick-prev {
    left: -15px;
  }

  .popup-product-gallery .slider-product-gallery > .slick-next {
    right: -15px;
  }
}