/* =============================================================
   Nordic-LED · v8 redesign → live-theme bridge overrides
   -------------------------------------------------------------
   Loaded AFTER product-page.css / bundle.css / discount-badge.css.
   Covers the two places where the v8 files target markup your live
   theme doesn't use:
     1. The ex-mva line (your custom price template, not WC's suffix)
     2. The gallery (your custom .thumbs-slider Swiper, not the core
        .woocommerce-product-gallery the v8 §12 targets)
   ============================================================= */

/* ---- 1. ex-mva line on its own small grey row under the price ----
   Your price.php prints ex-mva via product-price-no-pva.php, now wrapped
   in .nl-price-exvat. product-page.css §4 gives it 13px grey; this makes
   it break onto its own line under the 38px price (as in the mock). */
.entry-summary-row .price .nl-price-exvat { display: block; }

/* =============================================================
   2. GALLERY — vertical thumbnail rail left of the main image
   Maps the redesign onto your .thumbs-slider markup.
   ============================================================= */
.thumbs-slider { position: relative; }

@media (min-width: 1024px) {
  .thumbs-slider {
    display: flex;
    gap: 14px;
    align-items: flex-start;
  }
  .thumbs-slider_main      { order: 2; flex: 1 1 auto; min-width: 0; }
  .thumbs-slider_secondary { order: 1; flex: 0 0 76px; width: 76px; }

  /* Force the thumb Swiper into a static vertical stack. Clicks still
     swap the main image (the thumbs<->main link is JS); we only override
     the horizontal transform Swiper applies inline. If you have many
     thumbnails, the cleaner fix is one line in your Swiper init:
     `direction: 'vertical'` on the thumbnail swiper — tell me and I'll
     adjust this block to plain vertical-Swiper styling. */
  .thumbs-slider_secondary .swiper { height: auto; overflow: visible; }
  .thumbs-slider_secondary .swiper-wrapper {
    flex-direction: column !important;
    transform: none !important;
    height: auto !important;
    gap: 10px;
  }
  .thumbs-slider_secondary .swiper-slide {
    width: 76px !important;
    height: auto !important;
    margin: 0 !important;
  }
}

/* Rounded thumbs + green ring on the active one (mock) */
.thumbs-slider_secondary .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--nl-ink-200, #DDE3E0);
  opacity: .8;
  cursor: pointer;
  transition: opacity .15s, box-shadow .15s;
}
.thumbs-slider_secondary .swiper-slide:hover img { opacity: 1; }
.thumbs-slider_secondary .swiper-slide-thumb-active img,
.thumbs-slider_secondary .swiper-slide-active img {
  opacity: 1;
  box-shadow: inset 0 0 0 2px var(--nl-green-600, #0F9047);
}

/* Main image rounded to match */
.thumbs-slider_main .swiper-slide img { border-radius: 14px; }

/* Fullscreen / zoom trigger → white round button, bottom-left (mock) */
.thumbs-slider_main .button-fullscreen {
  position: absolute;
  bottom: 16px;
  left: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 40, 25, .12);
  display: grid;
  place-items: center;
  color: var(--nl-ink-500, #5E6964);
  z-index: 4;
  cursor: pointer;
}
.thumbs-slider_main .button-fullscreen svg { width: 18px; height: 18px; }

/* Native −NN% sale badge (injected into .thumbs-slider_main by the gallery
   template). discount-badge.css styles .nl-sale-badge; pin it top-left. */
.thumbs-slider_main .nl-sale-badge {
  top: 16px;
  left: 16px;
  z-index: 5;
}

/* =============================================================
   3. PRICE LINE — float the "Spar …" pill to the right of the price
   -------------------------------------------------------------
   Template renders, inside .entry-summary-row:
       <p class="price"> 171,00 kr  259,00 kr <span class="nl-price-exvat">…</span></p>
       <span class="nl-saving-pill">Spar 88 kr · 34 %</span>
   Make that row a flex line: price left, pill right; ex-mva drops
   onto its own line under the price.
   ============================================================= */
.entry-summary-row:has(> .nl-saving-pill) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 14px;
}
.entry-summary-row:has(> .nl-saving-pill) > .price {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.entry-summary-row:has(> .nl-saving-pill) > .nl-saving-pill {
  margin: 9px 0 0 auto;     /* push right; nudge down to sit on the price line */
  align-self: flex-start;
}
/* ex-mva on its own line under the price (already block from §1, restated for clarity) */
.entry-summary-row > .price .nl-price-exvat { display: block; }