/* v5.1.58 — product card energy badge next to price, prettier pagination,
 * gallery thumbnails, out-of-stock buybox, mini-cart quantity controls.
 *
 * 1) Product cards (loop, related products): the energy badge moves OUT
 *    of the image and sits to the right of the price. Image stays clean.
 * 2) Single product gallery card: the small energy badge that sits in the
 *    summary moves a few pixels inward so it does not hug the right edge.
 * 3) Pagination on archive pages: bigger, cleaner numbered chips with a
 *    proper hover and active state instead of plain text.
 * 4) Single product buybox when out of stock: bigger Ostuvalikud panel
 *    plus a prominent "Lisa soovilisti" fallback so the customer still
 *    has somewhere to click. Mobile-product-pro module also gets this.
 * 5) Mini-cart drawer: quantity +/- chips on every line item, with live
 *    AJAX update. Companion JS in 79-v558-fixes.js binds the buttons.
 * 6) Product gallery (desktop): make all thumbnails visible and clickable
 *    even when the theme image-fit CSS has hidden them in older builds.
 */


/* ===== 1. Product card: energy badge next to price ===== */

/* New wrapper around price + badge on the product card. */
.vlg-product-card .vlg-card-price-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  margin-top: 8px !important;
}

.vlg-product-card .vlg-card-price-row .vlg-card-price {
  margin: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.vlg-product-card .vlg-card-price-row .vlg-card-energy {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* The energy badge itself when sitting next to the price: compact and
   visually subordinate to the price. The "EU G" arrow tag plus A↕G scale
   side chip — keep them tight. */
.vlg-product-card .vlg-card-energy .vlg-energy-badge,
.vlg-product-card .vlg-card-energy .vlg-energy-core-badge {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
  min-width: 0 !important;
  height: 30px !important;
  padding: 2px 4px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* The "EU" + class letter chip. */
.vlg-product-card .vlg-card-energy .vlg-energy-badge-eu,
.vlg-product-card .vlg-card-energy .vlg-energy-badge .vlg-energy-badge-eu {
  display: grid !important;
  place-items: center !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  background: var(--vlg-energy-color, #ed1c24) !important;
  color: #fff !important;
  padding: 2px 4px 2px 5px !important;
  border-radius: 4px 0 0 0 !important;
}

.vlg-product-card .vlg-card-energy .vlg-energy-badge-class,
.vlg-product-card .vlg-card-energy .vlg-energy-badge strong.vlg-energy-badge-class {
  display: grid !important;
  place-items: center !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  background: var(--vlg-energy-color, #ed1c24) !important;
  color: #fff !important;
  padding: 2px 5px 4px !important;
  border-radius: 0 0 0 4px !important;
}

/* Anything the plugin might still inject inside the image wrapper — kill it. */
.vlg-product-card .vlg-card-image-wrap .vlg-energy-badge,
.vlg-product-card .vlg-card-image-wrap .vlg-energy-overlay,
.vlg-product-card .vlg-card-image-wrap .fs-euel-label,
.vlg-product-card .vlg-card-image-wrap .fs-euel-thumb-wrap > .fs-euel-label {
  display: none !important;
}

/* Mobile: keep the layout but allow stacking if very narrow. */
@media (max-width: 480px) {
  .vlg-product-card .vlg-card-price-row {
    gap: 8px !important;
  }
  .vlg-product-card .vlg-card-energy .vlg-energy-badge-class {
    font-size: 12px !important;
  }
}


/* ===== 2. Single product summary: badge a touch inward ===== */

.vlg-product-summary-card .vlg-product-energy-inline {
  margin-right: 12px !important;
  padding-right: 0 !important;
}

@media (max-width: 782px) {
  .vlg-product-summary-card .vlg-product-energy-inline {
    margin-right: 6px !important;
  }
}


/* ===== 3. Pagination — refreshed look ===== */

body.vlg-theme .woocommerce-pagination,
body.vlg-theme nav.woocommerce-pagination,
body.vlg-theme .vlg-pagination {
  margin: 28px 0 8px !important;
  padding: 0 !important;
  text-align: center !important;
}

body.vlg-theme .woocommerce-pagination ul.page-numbers,
body.vlg-theme nav.woocommerce-pagination ul.page-numbers,
body.vlg-theme .vlg-pagination ul.page-numbers,
body.vlg-theme ul.page-numbers {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 auto !important;
  padding: 10px 14px !important;
  border: 1px solid var(--vlg-line, #e8edf4) !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .05) !important;
  list-style: none !important;
}

body.vlg-theme ul.page-numbers li {
  margin: 0 !important;
  padding: 0 !important;
}

body.vlg-theme ul.page-numbers li > a,
body.vlg-theme ul.page-numbers li > span,
body.vlg-theme a.page-numbers,
body.vlg-theme span.page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--vlg-text, #172033) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease, transform .15s ease !important;
}

body.vlg-theme ul.page-numbers li > a:hover,
body.vlg-theme a.page-numbers:hover {
  background: #fff7ed !important;
  color: var(--vlg-primary, #f28a00) !important;
}

body.vlg-theme ul.page-numbers li > .page-numbers.current,
body.vlg-theme span.page-numbers.current,
body.vlg-theme .page-numbers.current {
  background: var(--vlg-primary, #f28a00) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(242, 138, 0, .35) !important;
}

body.vlg-theme ul.page-numbers li > .page-numbers.dots,
body.vlg-theme span.page-numbers.dots {
  background: transparent !important;
  color: #94a3b8 !important;
  letter-spacing: .1em !important;
}

body.vlg-theme ul.page-numbers li > .page-numbers.prev,
body.vlg-theme ul.page-numbers li > .page-numbers.next,
body.vlg-theme a.page-numbers.prev,
body.vlg-theme a.page-numbers.next {
  background: #f1f5f9 !important;
  color: var(--vlg-text, #172033) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

body.vlg-theme ul.page-numbers li > .page-numbers.prev:hover,
body.vlg-theme ul.page-numbers li > .page-numbers.next:hover {
  background: var(--vlg-primary, #f28a00) !important;
  color: #fff !important;
}

@media (max-width: 480px) {
  body.vlg-theme ul.page-numbers {
    gap: 6px !important;
    padding: 8px 10px !important;
  }
  body.vlg-theme ul.page-numbers li > a,
  body.vlg-theme ul.page-numbers li > span {
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 9px !important;
    font-size: 14px !important;
  }
}


/* ===== 4. Out-of-stock buybox + wishlist fallback ===== */

/* Mobile-product-pro module's vmp-buybox when out of stock. */
.vmp-buybox--out-of-stock {
  padding: 18px !important;
  background: linear-gradient(180deg, #fff9f1, #fff) !important;
  border-color: #ffd49a !important;
}

.vmp-buybox--out-of-stock .vmp-buybox-head span {
  font-size: 16px !important;
}

.vmp-buybox--out-of-stock .vmp-buybox-head em {
  color: #b25a00 !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

/* Hide the empty WC out-of-stock placeholder inside the buybox so the
   wishlist fallback below is what the customer sees. */
.vmp-buybox--out-of-stock .stock.out-of-stock,
.vmp-buybox--out-of-stock p.stock.out-of-stock {
  display: none !important;
}

/* "Lisa soovilisti" fallback card. */
.vmp-wishlist-fallback {
  display: grid !important;
  grid-template-columns: 48px 1fr !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 4px 14px !important;
  margin-top: 14px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(242, 138, 0, .35) !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: var(--vlg-text, #172033) !important;
  text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(242, 138, 0, .10) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

.vmp-wishlist-fallback:hover,
.vmp-wishlist-fallback:focus-visible {
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 30px rgba(242, 138, 0, .18) !important;
}

.vmp-wishlist-fallback > span {
  grid-row: 1 / span 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  background: #fff7ed !important;
  color: var(--vlg-primary, #f28a00) !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

.vmp-wishlist-fallback strong {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: var(--vlg-primary, #f28a00) !important;
  line-height: 1.2 !important;
}

.vmp-wishlist-fallback em {
  font-style: normal !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  line-height: 1.35 !important;
}

/* Theme single-product buybox out-of-stock parity (desktop + tablet). */
.vlg-product-buybox:has(.stock.out-of-stock),
.vlg-product-buybox.is-out-of-stock {
  padding: 20px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #fff9f1, #fff) !important;
  border: 1px solid #ffd49a !important;
}

.vlg-product-buybox .vlg-btn-outline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 52px !important;
  padding: 0 22px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}


/* ===== 5. Mini-cart quantity controls ===== */

/* Wrap each cart item so the qty + remove buttons line up. */
body.vlg-theme .vlg-mini-cart-body ul.woocommerce-mini-cart {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.vlg-theme .vlg-mini-cart-body ul.woocommerce-mini-cart li.woocommerce-mini-cart-item,
body.vlg-theme .vlg-mini-cart-body ul.woocommerce-mini-cart li.mini_cart_item {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 56px 1fr auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 4px 12px !important;
  padding: 12px 14px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--vlg-line, #e8edf4) !important;
  list-style: none !important;
}

body.vlg-theme .vlg-mini-cart-body ul.woocommerce-mini-cart li img {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 56px !important;
  height: 56px !important;
  object-fit: contain !important;
  background: #fff !important;
  border: 1px solid var(--vlg-line, #e8edf4) !important;
  border-radius: 12px !important;
  padding: 4px !important;
  margin: 0 !important;
  float: none !important;
}

body.vlg-theme .vlg-mini-cart-body ul.woocommerce-mini-cart li a:not(.remove) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  color: var(--vlg-text, #172033) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  line-height: 1.25 !important;
}

body.vlg-theme .vlg-mini-cart-body ul.woocommerce-mini-cart li .quantity {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body.vlg-theme .vlg-mini-cart-body ul.woocommerce-mini-cart li .quantity .woocommerce-Price-amount {
  color: var(--vlg-primary, #f28a00) !important;
  font-weight: 900 !important;
}

body.vlg-theme .vlg-mini-cart-body ul.woocommerce-mini-cart li a.remove {
  grid-column: 3 !important;
  grid-row: 1 !important;
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  line-height: 1 !important;
  border: 0 !important;
}

body.vlg-theme .vlg-mini-cart-body ul.woocommerce-mini-cart li a.remove:hover {
  background: #fee2e2 !important;
  color: #b91c1c !important;
}

/* Quantity stepper injected by JS. */
body.vlg-theme .vlg-mini-cart-qty-stepper {
  grid-column: 2 / span 2 !important;
  grid-row: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin-top: 6px !important;
  padding: 2px !important;
  border: 1px solid var(--vlg-line, #e8edf4) !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  width: max-content !important;
  max-width: 100% !important;
}

body.vlg-theme .vlg-mini-cart-qty-stepper button {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--vlg-text, #172033) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  box-shadow: 0 0 0 1px var(--vlg-line, #e8edf4) inset !important;
}

body.vlg-theme .vlg-mini-cart-qty-stepper button:hover:not(:disabled) {
  background: var(--vlg-primary, #f28a00) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px var(--vlg-primary, #f28a00) inset !important;
}

body.vlg-theme .vlg-mini-cart-qty-stepper button:disabled {
  opacity: .35 !important;
  cursor: not-allowed !important;
}

body.vlg-theme .vlg-mini-cart-qty-stepper input.vlg-mini-cart-qty-value {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  color: var(--vlg-text, #172033) !important;
  -moz-appearance: textfield !important;
}

body.vlg-theme .vlg-mini-cart-qty-stepper input::-webkit-outer-spin-button,
body.vlg-theme .vlg-mini-cart-qty-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

body.vlg-theme .vlg-mini-cart-qty-stepper.is-updating {
  opacity: .6 !important;
  pointer-events: none !important;
}

/* Hide the original "× N" quantity span once we have a real stepper. */
body.vlg-theme .vlg-mini-cart-body ul.woocommerce-mini-cart li[data-vlg-qty-bound] .quantity {
  display: none !important;
}


/* ===== 6. Product gallery: thumb strip + clickable lightbox ===== */

/* The theme already uses .vlg-mobile-featured-image as the primary image
   carrier on BOTH desktop and mobile (see 131-v534-product-image-crop-hard-fix
   for the size rules). We do NOT touch that — touching it makes the image
   disappear because the .woocommerce-product-gallery container is intentionally
   hidden site-wide by 131-v534. Instead, the JS pulls every gallery slide URL
   out of the (hidden) WC gallery DOM and builds a thumb strip under the
   featured image, and the click handler opens an in-page lightbox with prev/
   next nav. So no CSS change is needed for desktop visibility. */
body.vlg-theme .vlg-mobile-image-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: none !important;
  background: rgba(7, 18, 36, .92) !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

body.vlg-theme .vlg-mobile-image-modal.is-open {
  display: flex !important;
}

body.vlg-theme .vlg-mobile-image-modal__dialog {
  position: relative !important;
  max-width: min(96vw, 1100px) !important;
  max-height: 92vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.vlg-theme .vlg-mobile-image-modal__img {
  max-width: 100% !important;
  max-height: 92vh !important;
  object-fit: contain !important;
  border-radius: 16px !important;
  background: #fff !important;
}

body.vlg-theme .vlg-mobile-image-modal__close {
  position: absolute !important;
  top: -50px !important;
  right: -4px !important;
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .12) !important;
  color: #fff !important;
  font-size: 28px !important;
  cursor: pointer !important;
}

body.vlg-theme .vlg-mobile-image-modal__nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .15) !important;
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
}

body.vlg-theme .vlg-mobile-image-modal__nav--prev { left: 6px !important; }
body.vlg-theme .vlg-mobile-image-modal__nav--next { right: 6px !important; }
body.vlg-theme .vlg-mobile-image-modal__nav:hover { background: rgba(255, 255, 255, .3) !important; }
body.vlg-theme .vlg-mobile-image-modal__nav:disabled { opacity: .25 !important; cursor: not-allowed !important; }

html.vlg-mobile-image-modal-open,
html.vlg-mobile-image-modal-open body {
  overflow: hidden !important;
}

/* The gallery card on mobile gets a row of thumbs underneath when there
   are extra images. JS populates this strip from the WC gallery items.
   Placed as a sibling of .vlg-product-gallery-media inside the section,
   not inside the (flex-centered) media container — so it always sits
   below the featured image, full width. */
body.vlg-theme .vlg-product-gallery-card > .vlg-mobile-gallery-thumbs,
body.vlg-theme .vlg-mobile-gallery-thumbs {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  overflow-x: auto !important;
  margin: 14px 0 4px !important;
  padding: 6px 4px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

body.vlg-theme .vlg-mobile-gallery-thumbs::-webkit-scrollbar { display: none !important; }

body.vlg-theme .vlg-mobile-gallery-thumbs button {
  flex: 0 0 auto !important;
  width: 72px !important;
  height: 72px !important;
  padding: 6px !important;
  border: 1px solid var(--vlg-line, #e8edf4) !important;
  border-radius: 14px !important;
  background: #fff !important;
  cursor: pointer !important;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .04) !important;
}

body.vlg-theme .vlg-mobile-gallery-thumbs button:hover {
  border-color: var(--vlg-primary, #f28a00) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 18px rgba(242, 138, 0, .18) !important;
}

body.vlg-theme .vlg-mobile-gallery-thumbs button img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

body.vlg-theme .vlg-mobile-gallery-thumbs button.is-active {
  border-color: var(--vlg-primary, #f28a00) !important;
  box-shadow: 0 0 0 2px rgba(242, 138, 0, .25), 0 8px 18px rgba(242, 138, 0, .18) !important;
}

@media (max-width: 782px) {
  body.vlg-theme .vlg-mobile-gallery-thumbs button {
    width: 60px !important;
    height: 60px !important;
    padding: 4px !important;
    border-radius: 12px !important;
  }
}