/* Product-enrichment - styling för overlay-ikoner och video-tumnagel som
   renderas från templateparts. Se widget/enrichment-render.js. */

/* ------------------ Video-tumnagel på produktsida ------------------ */

.ax-video-container {
  margin: 12px 0 4px;
}

.ax-video-thumb {
  display: block;
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 16 / 9;
  background: #111;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.ax-video-thumb:hover {
  transform: scale(1.01);
}

.ax-video-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.15s ease;
}

.ax-video-thumb:hover .ax-video-thumb-img {
  opacity: 0.85;
}

/* Play-knapp - YouTube-liknande röd rundad ruta med vit triangel */
.ax-video-thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 12px;
  pointer-events: none;
  transition: background 0.15s ease;
}

.ax-video-thumb-play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  width: 0;
  height: 0;
  border-left: 18px solid #fff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.ax-video-thumb:hover .ax-video-thumb-play {
  background: rgba(230, 33, 23, 0.95);
}

/* ------------------ Fancybox-anpassning för videoklipp ------------------ */

.ax-video-fancybox #fancybox-inner {
  background: #000;
  overflow: hidden;
}

.ax-video-iframe {
  border: 0;
  display: block;
  background: #000;
}

/* ------------------ Overlay-ikoner ovanpå produktbild ------------------ */

/* Containern som positioneras absolut ovanpå .show-product-image.
   Offset -13/-13 så första overlayen sticker ut ur hörnet (samma
   positionering som legacy .overlay-image). Övriga stackas nedanför. */
.ax-overlays-wrap {
  position: absolute;
  top: -13px;
  right: -13px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 5;
  pointer-events: none;
}

/* .show-product-image behöver position: relative för att containern
   ska landa rätt. Om sajtens egen CSS inte redan sätter det, gör vi det. */
.show-product-image {
  position: relative;
}

/* Rendera PNG:en i naturlig upplösning - ingen background-image-scaling. */
.ax-overlay-icon {
  display: block;
  max-width: 100%;
  height: auto;
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

/* Håll gap:et lite tightare i mobilvy */
@media (max-width: 640px) {
  .ax-overlays-wrap {
    gap: 6px;
    top: 4px;
    right: 4px;
  }
}