/* =========================
   SINGLE PRODUKT LAYOUT
========================= */

.single-product__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 40px;
  align-items: start;
}
@media (max-width:1080px) {
  .single-product__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Sticky köpsektion på desktop */
.single-product__summary {
  position: sticky;
  top: var(--header-sticky-offset, 96px);
  align-self: start;
}

/* =========================
   BADGES OVANFÖR TITEL
========================= */

.single-product__badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.sp-badge {
  display: inline-block;
  padding: .3rem .55rem;
  font-size: .75rem;
  line-height: 1;
  border-radius: 6px;
  color: #fff;
  background: #111;
}
.sp-badge--sale { background: #d93636; }
.sp-badge--new  { background: #16a34a; }
.sp-badge--out  { background: #6b7280; }

/* =========================
   TITEL & PRIS
========================= */

.product_title {
  margin: .2rem 0 .35rem;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.15;
}

.single-product__price .price {
  font-size: clamp(1.2rem, 1.4vw, 1.5rem);
  font-weight: 700;
  display: inline-flex;
  gap: .6rem;
  align-items: baseline;
  margin: .25rem 0 1rem;
}
.single-product__price del { color: #9ca3af; font-weight: 400; }
.single-product__price ins { text-decoration: none; color: #111827; }

/* =========================
   KORT BESKRIVNING
========================= */

.single-product__shortdesc {
  color: #444;
  font-size: .95rem;
  margin: 0 0 1rem;
}

/* =========================
   KÖPSEKTION (kortgrupp)
========================= */

.single-product__purchase {
  border: 1px solid var(--vcom-border, #e5e7eb);
  border-radius: 12px;
  background: #fafafa;
  padding: 16px;
  display: grid;
  gap: 14px;
  max-width: 320px;
}

/* Form-lager */
.single-product__purchase form.cart,
.single-product__purchase form.variations_form {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 100%;
}

/* =========================
   VARIATIONSRAD
========================= */

.single-product__purchase .variations {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  width: 100%;
}

.variations .label {
  font-weight: 600;
  font-size: 1rem;
  color: #111827;
  white-space: nowrap;
  line-height: 1;
  display: flex;
  align-items: center;
}

.variations .value {
  flex: 1;
}

.single-product__purchase .variations select {
  width: auto;                  /* override forms.css 100% */
  max-width: 190px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff url("data:image/svg+xml;utf8,<svg fill='black' height='18' viewBox='0 0 24 24' width='18' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>")
             no-repeat right .6rem center/.8rem auto;
  border: 1.5px solid var(--vcom-border, #e5e7eb);
  border-radius: 6px;
  padding: .5rem 2rem .5rem .75rem;
  font-size: .95rem;
  font-weight: 500;
  color: #111;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.variations select:hover { border-color: var(--vcom-accent, #111); }
.variations select:focus {
  border-color: var(--vcom-accent, #111);
  box-shadow: 0 0 0 2px rgba(17,17,17,.15);
  outline: none;
}

/* =========================
   ANTAL + KNAPP
========================= */

.single-product__purchase .cart,
.single-product__purchase .woocommerce-variation-add-to-cart {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
  width: 100%;
}

.single-product__purchase .quantity .qty {
  width: 70px;                  /* override forms.css 100% */
  height: 38px;
  padding: 0 .5rem;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1.5px solid var(--vcom-border, #e5e7eb);
  border-radius: 6px;
  text-align: center;
}

.single-product__purchase .single_add_to_cart_button {
  flex: 1;
  height: 38px;
  padding: 0 18px;
  border-radius: 8px;
  font-weight: 700;
}

/* =========================
   RESPONSIVITET
========================= */

@media (max-width: 640px) {
  .single-product__purchase {
    width: 100% !important;
    max-width: 100% !important;
  }
  .single-product__purchase .variations select {
    max-width: 100%;
  }
}

/* =========================
   LAGER / LEVERANS / TRUST / META
========================= */

.single-product__stockdelivery { margin-top: .75rem; }

.single-product__trust {
  margin-top: .75rem;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
}
@media (max-width:640px) {
  .single-product__trust { grid-template-columns: repeat(2,1fr); }
}

.single-product__meta {
  margin-top: .75rem;
  font-size: .9rem;
  color: #6b7280;
}
.single-product__meta .posted_in,
.single-product__meta .sku_wrapper,
.single-product__meta .tagged_as { display:block; }

/* =========================
   TABS
========================= */

.single-product__tabs { margin-top: 40px; }

.woocommerce-tabs .wc-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid #eee;
  margin-bottom: 16px;
}

.woocommerce-tabs .wc-tabs li { list-style: none; margin: 0; }
.woocommerce-tabs .wc-tabs li a {
  display: inline-block;
  padding: .6rem .9rem;
  border-radius: 10px 10px 0 0;
  border: 1px solid transparent;
  background: #f7f7f8;
}
.woocommerce-tabs .wc-tabs li.active a {
  background: #fff;
  border-color: #e5e7eb #e5e7eb transparent #e5e7eb;
}

.woocommerce-Tabs-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0 12px 12px 12px;
  padding: 16px;
}

/* =========================
   RELATERADE PRODUKTER GRID
========================= */

.single-product__related { margin-top: 48px; }

.related ul.products {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
}
@media (max-width:960px) {
  .related ul.products { grid-template-columns: repeat(2,1fr); }
}
.related li.product { list-style: none; }

/* =========================
   GALLERI (stage + badges + thumbs)
========================= */

.vcom-gallery__badges {
  position: absolute; top: 10px; left: 10px; z-index: 10;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.vcom-gallery__badges .vcom-badge {
  display:inline-block; padding:.3rem .55rem; font-size:.75rem; line-height:1;
  border-radius:6px; color:#fff; background:var(--badge-bg,#111);
}
.vcom-gallery__badges .vcom-badge--sale{ --badge-bg:#d93636; }
.vcom-gallery__badges .vcom-badge--new { --badge-bg:#16a34a; }
.vcom-gallery__badges .vcom-badge--out { --badge-bg:#6b7280; }

.vcom-gallery__stage {
  position:relative; aspect-ratio:1/1;
  background:#fafafa; border-radius:16px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.vcom-gallery__slide{ position:absolute; inset:0; display:none; }
.vcom-gallery__slide.is-active{ display:block; }
.vcom-zoom__img{
  display:block; max-width:100%; max-height:100%;
  width:auto; height:auto; object-fit:contain; margin:auto;
}

.vcom-gallery__thumbs-wrap {
  position:relative; z-index:1; display:flex; align-items:center; gap:8px;
}
.vcom-gallery__nav {
  flex:0 0 auto; width:32px; height:32px;
  border:1px solid var(--vcom-border,#e5e7eb);
  border-radius:999px; background:#fff; color:#111;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  font-size:18px; line-height:30px; text-align:center; cursor:pointer;
}
.vcom-gallery__nav[disabled]{ opacity:.35; cursor:default; }

.vcom-gallery__thumbs {
  display:grid; grid-auto-flow:column; grid-auto-columns:78px;
  gap:10px; overflow:auto; padding:0 2px 4px; scroll-snap-type:x mandatory;
  mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.vcom-gallery__thumb {
  width:78px; height:78px; padding:0; border:0; cursor:pointer;
  border-radius:10px; overflow:hidden; background:#f5f5f5; scroll-snap-align:start;
}
.vcom-gallery__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.vcom-gallery__thumb.is-active img{ outline:2px solid #111827; outline-offset:-2px; }

.vcom-gallery__thumb--more{ position:relative; overflow:hidden; }
.vcom-gallery__thumb--more::after{
  content: attr(data-more);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(17,24,39,.72); color:#fff; font-weight:700; border-radius:10px;
}

@media (max-width:640px){
  .vcom-gallery__thumbs{ gap:8px; grid-auto-columns:60px; }
  .vcom-gallery__nav{ display:none; }
}

/* =========================
   LIGHTBOX
========================= */

.vcom-lightbox{ border:none; padding:0; background:transparent; }
.vcom-lightbox::backdrop{ background: rgba(0,0,0,.6); }
.vcom-lightbox img{ display:block; max-width:92vw; max-height:82vh; margin:auto; }

.vcom-lightbox__nav,
.vcom-lightbox__close{
  position:fixed; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:0; border-radius:999px;
  box-shadow:0 4px 14px rgba(0,0,0,.15);
  cursor:pointer; appearance:none; -webkit-appearance:none;
}

.vcom-lightbox__close{
  top:max(16px, env(safe-area-inset-top));
  right:max(16px, env(safe-area-inset-right));
  background:#111; color:#fff;
}
.vcom-lightbox__close svg{ width:22px; height:22px; display:block; pointer-events:none; }

.vcom-lightbox__nav{
  top:50%; transform:translateY(-50%);
  background:#fff; color:#111; font-size:22px; line-height:1;
}
.vcom-lightbox__nav--prev{ left:max(16px, env(safe-area-inset-left)); }
.vcom-lightbox__nav--next{ right:max(16px, env(safe-area-inset-right)); }

@media (max-width:640px){
  .vcom-lightbox__nav, .vcom-lightbox__close{ width:40px; height:40px; }
  .vcom-lightbox__close svg{ width:20px; height:20px; }
}

/* Tvinga smal .quantity och därmed smalt qty-fält */
 form.cart .quantity {
  width: 70px;
  flex: 0 0 70px;
  padding-bottom: 5px;
}