/* ===========================
   Spectra Gallery – arrows outside the carousel
   =========================== */

:root{
  --gallery-arrow-w: 36px;
  --gallery-arrow-h: 36px;      /* ungefär 36 px “gap” i höjd */
  --gallery-arrow-color: #fff;
  --gallery-hit-size: 64px;    /* klickyta */
  --gallery-nudge: 4px;
  --gallery-outside-gap: 10px;  /* extra avstånd utanför kanten */
}

/* 1) Scope + tillåt overflow så pilar kan hamna utanför bildytan */
.spectra-image-gallery .slick-slider{
  position: relative;
  overflow: visible; /* viktigt om slick-list har overflow:hidden */
  /* 2) Skapa plats för pilarna genom padding på insidan av karusellen */
  padding-inline: calc(var(--gallery-hit-size)/2 + var(--gallery-outside-gap));
}

/* Dölj Spectras default-ikon */
.spectra-image-gallery .spectra-image-gallery__control-arrows.slick-arrow > svg{
  display:none !important;
}

/* Grundstil knapp */
.spectra-image-gallery .spectra-image-gallery__control-arrows.slick-arrow{
  position: absolute !important;
  top: 50% !important;
  z-index: 5;
  width: var(--gallery-hit-size);
  height: var(--gallery-hit-size);
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  line-height: 0;
  cursor: pointer;
  color: var(--gallery-arrow-color); /* driver currentColor i SVG */
}

/* Vår pil (höger som default) */
.spectra-image-gallery .spectra-image-gallery__control-arrows.slick-arrow::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width: var(--gallery-arrow-w);
  height: var(--gallery-arrow-h);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg width='18' height='37' viewBox='0 0 18 37' xmlns='http://www.w3.org/2000/svg'><line y1='-0.5' x2='25' y2='-0.5' transform='matrix(-0.690476 0.723356 0.723356 0.690476 17.9852 18)' stroke='%23ffffff'/><line x1='17.6236' y1='18.4291' x2='0.361658' y2='0.345212' stroke='%23ffffff'/></svg>");
}

/* 3) Placera vid kanter och skjut ut dem halvvägs */
.spectra-image-gallery .spectra-image-gallery__control-arrows.slick-prev{
  left: 0 !important; right:auto !important;
  transform: translate(-50%, -50%); /* utanför vänster */
}
.spectra-image-gallery .spectra-image-gallery__control-arrows.slick-next{
  right: 0 !important; left:auto !important;
  transform: translate(50%, -50%);  /* utanför höger */
}

/* Spegla vänsterpilen */
.spectra-image-gallery .spectra-image-gallery__control-arrows.slick-prev::before{
  transform: scaleX(-1);
}

/* Hover/fokus – liten nudge in mot mitten */
.spectra-image-gallery .spectra-image-gallery__control-arrows.slick-next:hover::before,
.spectra-image-gallery .spectra-image-gallery__control-arrows.slick-next:focus-visible::before{
  transform: translateX(var(--gallery-nudge));
}
.spectra-image-gallery .spectra-image-gallery__control-arrows.slick-prev:hover::before,
.spectra-image-gallery .spectra-image-gallery__control-arrows.slick-prev:focus-visible::before{
  transform: scaleX(-1) translateX(calc(var(--gallery-nudge) * -1));
}

/* Focus-ring */
.spectra-image-gallery .spectra-image-gallery__control-arrows.slick-arrow:focus-visible{
  outline: 2px solid var(--gallery-arrow-color);
  outline-offset: 3px;
}

/* Mobil: dra in lite */
@media (max-width: 640px){
  :root{ --gallery-outside-gap: 6px; }
}

/* RTL-stöd */
[dir="rtl"] .spectra-image-gallery .spectra-image-gallery__control-arrows.slick-prev{
  left:auto !important; right:0 !important; transform: translate(50%,-50%);
}
[dir="rtl"] .spectra-image-gallery .spectra-image-gallery__control-arrows.slick-next{
  right:auto !important; left:0 !important; transform: translate(-50%,-50%);
}


/* ===========================
   ALTERNATIV UTAN PADDING
   (om du inte vill lägga padding på karusellens wrapper)
   =========================== */
/*
.spectra-image-gallery .slick-slider{ position:relative; overflow:visible; padding-inline: 0; }

.spectra-image-gallery .spectra-image-gallery__control-arrows.slick-prev{
  left: calc(-1*(var(--gallery-hit-size)/2 + var(--gallery-outside-gap))) !important;
  transform: translateY(-50%);
}
.spectra-image-gallery .spectra-image-gallery__control-arrows.slick-next{
  right: calc(-1*(var(--gallery-hit-size)/2 + var(--gallery-outside-gap))) !important;
  transform: translateY(-50%);
}
*/