/* =========================================================
   VentureCommerce – gallery.css v1.3 (städad + centrerad stage)
   - Flex-baserad thumb-rad (pilar + overflow-x)
   - Stage med centrerade bilder (desktop/mobil)
   - Tydlig tvåkolumnslayout för single product
   - Lightbox + zoom-cue
   ========================================================= */

/* === Galleri – wrapper === */
.vcom-gallery {
  display: grid;
  gap: 12px;
}

/* === Stage (stora bilden) === */
.vcom-gallery__stage {
  position: relative;
  display: flex;                  /* centrera bild i både X/Y */
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--vcom-border);
  border-radius: 12px;
  padding: .75rem;
  overflow: hidden;
}

/* Slides */
.vcom-gallery__slide {
  display: none;
  height: 100%;
  min-height: 300px;               /* ger höjd även utan bild */
  align-items: center;
  justify-content: center;
}
.vcom-gallery__slide.is-active {
  display: flex;                   /* aktiva slides blir flex */
}
.vcom-gallery__slide img {
  max-height: 560px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
@media (max-width:1024px){
  .vcom-gallery__slide img { max-height: 420px; }
}

/* Badges över bilden */
.vcom-gallery__badges {
  position: absolute;
  top: .75rem;
  left: .75rem;
  display: flex;
  gap: .5rem;
  z-index: 2;
}

/* === Thumbnails – nav + scrollbar === */
.vcom-gallery__thumbs-wrap {
  display: grid;
  grid-template-columns: auto 1fr auto; /* prev | thumbs | next */
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
}
.vcom-gallery__nav {
  width: 36px;
  height: 36px;
  border: 1px solid var(--vcom-border);
  background: #fff;
  border-radius: .75rem;
  cursor: pointer;
}
.vcom-gallery__nav[disabled] {
  opacity: .4;
  pointer-events: none;
}
.vcom-gallery__thumbs {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  padding: .25rem;
}
.vcom-gallery__thumbs::-webkit-scrollbar { height: 8px; }
.vcom-gallery__thumbs::-webkit-scrollbar-thumb {
  background: var(--vcom-border);
  border-radius: 999px;
}

/* Thumbs – konsekvent storlek */
.vcom-gallery__thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border: 1px solid var(--vcom-border);
  border-radius: 8px;
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.vcom-gallery__thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.vcom-gallery__thumb.is-active {
  outline: 2px solid #111;
  outline-offset: 0;
  border-color: #111;
}

/* "+N" chip (skapas i JS, används på mobil) */
.vcom-gallery__thumb--more::after {
  content: attr(data-more);
  font-weight: 700;
}

/* === Lightbox === */
.vcom-lightbox {
  border: none;
  padding: 0;
  background: transparent;
}
.vcom-lightbox::backdrop { background: rgba(0,0,0,.6); }
.vcom-lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  display: block;
}
.vcom-lightbox__close {
  position: fixed;
  top: 16px;
  right: 16px;
  border: 0;
  background: #fff;
  border-radius: 999px;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

/* === Zoom cue (valfritt) === */
.vcom-zoom {
  position: relative;
  overflow: hidden;
}
.vcom-zoom__img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .2s ease, transform-origin .05s linear;
}
.vcom-zoom.is-zoomable { cursor: zoom-in; }

/* === Single product – två kolumner === */
.single-product .product {
  display: grid;
  grid-template-columns: minmax(0,1fr) 420px; /* bild | summary */
  gap: 2rem;
  align-items: start;
}
@media (max-width:1024px){
  .single-product .product { grid-template-columns: 1fr; }
  .single-product .product .summary { margin-top: .5rem; }
}

/* Summary-kolumn tweaks */
.single-product .product .summary { max-width: 520px; }
.single-product .product .summary .price { font-size: 1.15rem; }