/* ==========================================================================
   MG Electronic — Product-box image carousel (used where one product has
   several photos, e.g. Softplay's Foamroll). Sits inside a standard
   product-box wrapper in place of a plain <img>, so it inherits that box's
   own padding/card styling from the page's own CSS.
   ========================================================================== */

.mg-product-carousel {
  position: relative;
  width: 100%;
  /* Fixed product-slot shape, shared by every carousel on the page —
     slides are cropped/resized (object-fit: cover below) to fill it,
     same as a plain product photo would be. */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0.35rem;
  background: #101010;
}

.mg-product-carousel__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease;
}

.mg-product-carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.mg-product-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(10, 10, 10, 0.5);
  color: #ffffff;
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.mg-product-carousel__arrow:hover {
  background: var(--mg-accent, #ff0106);
  border-color: var(--mg-accent, #ff0106);
}

.mg-product-carousel__arrow svg {
  width: 16px;
  height: 16px;
}

.mg-product-carousel__arrow--prev {
  left: 8px;
}

.mg-product-carousel__arrow--next {
  right: 8px;
}