/**
 * computervoorschool.nl — productdetail custom styles
 * Geladen via templates/vp_smart/layouts/default/blocks/head.php
 */

/* -------------------------------------------------------------------------
   Snel naar (tabs)
   ------------------------------------------------------------------------- */
.product-quick-tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 10px 0 14px;
	padding: 10px 12px;
	background: #f3f6fa;
	border: 1px solid #d5dee8;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.3;
}
.product-quick-tabs__label {
	color: #555;
	font-weight: 600;
}
.product-quick-tabs a {
	color: #1a5f9e;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	white-space: nowrap;
}
.product-quick-tabs a:hover,
.product-quick-tabs a:focus {
	color: #0d3d66;
	border-bottom-color: currentColor;
}
.product-tabpanel > .nav-list {
	position: sticky;
	top: 70px;
	z-index: 40;
	background: #fff;
	padding: 8px 0 10px;
	margin-bottom: 0;
	box-shadow: 0 2px 0 #fff;
}

/* -------------------------------------------------------------------------
   HP Renew — lees meer toggle
   ------------------------------------------------------------------------- */
.hp-renew-toggle .hp-renew-more {
	display: none;
}
#hp-renew-toggle-input {
	display: none;
}
#hp-renew-toggle-input:checked ~ .hp-renew-more {
	display: block;
}
.hp-renew-link {
	display: inline-block;
	margin-top: 5px;
	color: #007bff;
	cursor: pointer;
	font-weight: normal;
}
#hp-renew-toggle-input:checked ~ .hp-renew-link::after {
	content: " (sluiten)";
}
.hp-renew-bold {
	color: black;
	font-weight: bold;
}
.hp-renew-title {
	color: black;
	font-weight: bold;
}

/* -------------------------------------------------------------------------
   HP Renew Platinum badge + popup
   ------------------------------------------------------------------------- */
.hp-renew-platinum-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	margin: 10px 0;
	border-radius: 8px;
	color: #5c4810;
	cursor: pointer;
	transition: all 0.25s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.hp-renew-platinum-badge:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 14px rgba(0, 0, 0, 0.2);
}
.platinum-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #b9972f;
	color: white;
	font-size: 20px;
	font-weight: bold;
}
.hp-renew-platinum-badge strong {
	display: block;
	font-size: 14px;
	letter-spacing: 0.5px;
}
.hp-renew-platinum-badge small {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: #75601c;
}
.platinum-info {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 19px;
	height: 19px;
	border: 1px solid #8c731d;
	border-radius: 50%;
	font-size: 12px;
	font-weight: bold;
	margin-left: 4px;
}
.platinum-popup-overlay {
	display: none;
	position: fixed;
	z-index: 99999;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.platinum-popup-overlay.active {
	display: flex;
}
.platinum-popup-box {
	position: relative;
	width: 100%;
	max-width: 520px;
	padding: 35px;
	border-radius: 14px;
	background: white;
	box-shadow: 0 15px 50px rgba(0, 0, 0, 0.35);
	text-align: center;
	animation: platinumPopupIn 0.25s ease-out;
}
@keyframes platinumPopupIn {
	from {
		opacity: 0;
		transform: translateY(20px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}
.platinum-close {
	position: absolute;
	top: 10px;
	right: 15px;
	border: 0;
	background: transparent;
	font-size: 30px;
	color: #777;
	cursor: pointer;
}
.platinum-popup-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 15px;
	border-radius: 50%;
	background: linear-gradient(135deg, #b9972f, #e9d477);
	color: white;
	font-size: 38px;
	box-shadow: 0 4px 12px rgba(185, 151, 47, 0.4);
}
.platinum-popup-box h2 {
	margin: 0 0 8px;
	color: #333;
	font-size: 25px;
}
.platinum-subtitle {
	margin-bottom: 20px;
	color: #a27e13;
	font-size: 17px;
	font-weight: bold;
}
.platinum-popup-box p {
	color: #555;
	line-height: 1.6;
}
.platinum-features {
	margin: 22px 0;
	padding: 18px;
	border-radius: 8px;
	background: #faf8ed;
	text-align: left;
	color: #444;
	line-height: 2;
}
.platinum-features div {
	font-size: 14px;
}
.platinum-features div::first-letter {
	color: #b9972f;
}
.platinum-bottom {
	padding-top: 18px;
	border-top: 1px solid #e6e6e6;
	color: #555;
	line-height: 1.6;
}
.platinum-bottom strong {
	color: #a27e13;
}
@media (max-width: 600px) {
	.hp-renew-platinum-badge {
		width: 100%;
		box-sizing: border-box;
	}
	.platinum-popup-box {
		padding: 28px 20px;
	}
	.platinum-popup-box h2 {
		font-size: 21px;
	}
}

/* -------------------------------------------------------------------------
   FreeDOS modal
   ------------------------------------------------------------------------- */
.freedos-modal {
	display: none;
	position: fixed;
	z-index: 99999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
}
.freedos-modal-content {
	background: #fff;
	width: 90%;
	max-width: 500px;
	margin: 12% auto;
	padding: 20px;
	border-radius: 10px;
	position: relative;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.freedos-close {
	position: absolute;
	right: 12px;
	top: 8px;
	font-size: 26px;
	cursor: pointer;
	font-weight: bold;
}

/* -------------------------------------------------------------------------
   Icecat / test-img galerij + lightbox
   ------------------------------------------------------------------------- */
/* Test-img: hoofdfoto in kader, eigen thumbs eronder */
.gallery-wrapper--test-img {
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}
#new-gallery-location:not(:empty) {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
#fallback-gallery .product-tag-left,
#fallback-gallery .product-tag-right {
  display: none !important;
}
/* Eén kader op de VM-fallback (niet op cont én main-cont) */
.gallery-wrapper--test-img:has(#new-gallery-location:empty) #fallback-gallery,
.gallery-wrapper--test-img #fallback-gallery {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
#fallback-gallery .product-image-gallery-cont {
  background: #fff;
  border: 1px solid #9a9a9a;
  border-radius: 8px;
  padding: 12px;
  box-sizing: border-box;
}
#fallback-gallery .product-image-gallery-main-cont {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.gallery-wrapper--test-img .icecatlive-gallery-wrapper {
  position: relative !important;
  display: block !important;
  width: 100%;
  min-height: 0 !important;
  background: #fff !important;
  border: 1px solid #9a9a9a !important;
  border-radius: 8px !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.gallery-wrapper--test-img .icecatlive-gallery-wrapper .test-img-main-frame {
  display: contents;
}

.gallery-wrapper--test-img .icecatlive-gallery-wrapper .IcecatLive.for-gallery,
.gallery-wrapper--test-img .icecatlive-gallery-wrapper .IcecatLive.for-gallery > div,
.gallery-wrapper--test-img .icecatlive-gallery-wrapper .IcecatLive.for-gallery > div > div {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  position: relative !important;
  overflow: hidden !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

.gallery-wrapper--test-img .icecatlive-gallery-wrapper img[quality="medium"],
.gallery-wrapper--test-img .icecatlive-gallery-wrapper img[galleryid]:not([quality="thumb"]) {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 380px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  cursor: zoom-in;
  position: relative !important;
  z-index: 1 !important;
}

/* Icecat-slider volledig uit — eigen nav eronder */
.gallery-wrapper--test-img .icecatlive-gallery-wrapper .slider-container {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.gallery-wrapper--test-img .icecatlive-gallery-wrapper .slider-control-bottomcenter,
.gallery-wrapper--test-img .icecatlive-gallery-wrapper img[quality="thumb"] {
  display: none !important;
}

/* Eigen < > onder het kader */
.test-img-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.test-img-nav__btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 1px solid #9a9a9a !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #333 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
.test-img-nav__btn:hover {
  border-color: #555 !important;
  color: #000 !important;
}

/* Eigen thumbs onder het kader — Coolblue-stijl: één rij + "+X" */
.test-img-thumbs {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  margin-top: 8px !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.test-img-thumb {
  display: block !important;
  flex: 0 0 auto !important;
  width: 64px !important;
  height: 64px !important;
  padding: 4px !important;
  margin: 0 !important;
  border: 1px solid #9a9a9a !important;
  border-radius: 6px !important;
  background: #fff !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  line-height: 0 !important;
}
.test-img-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.test-img-thumb:hover,
.test-img-thumb.is-active {
  border-color: #555 !important;
}
.test-img-thumb.is-active {
  outline: 1px solid #555;
  outline-offset: 0;
}
/* Extra thumbs niet in de rij (alleen via lightbox / pijltjes) */
.test-img-thumbs .test-img-thumb.is-extra {
  display: none !important;
}
.test-img-thumb--more {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #3a3a3a !important;
  border-color: #3a3a3a !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.test-img-thumb--more span {
  display: block;
  line-height: 1;
}
.test-img-thumb--more:hover {
  background: #222 !important;
  border-color: #222 !important;
  color: #fff !important;
}

/* Icecat-loep verbergen */
.gallery-wrapper--test-img .icecatlive-gallery-wrapper [class*="zoom"],
.gallery-wrapper--test-img .icecatlive-gallery-wrapper [class*="magnif"],
.gallery-wrapper--test-img .icecatlive-gallery-wrapper [class*="loupe"],
.test-img-loupe {
  display: none !important;
}

/* Eigen lightbox (vervangt Icecat-modal) — Coolblue: grote foto + thumbs eronder */
#test-img-lb[hidden] {
  display: none !important;
}
#test-img-lb {
  position: fixed;
  inset: 0;
  z-index: 100000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
#test-img-lb .test-img-lb__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 45, 90, 0.88);
}
#test-img-lb .test-img-lb__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(1100px, 96vw);
  height: 100%;
  max-height: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  background: #fff;
  border-radius: 8px;
  padding: 16px 16px 12px;
}
#test-img-lb .test-img-lb__media {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#test-img-lb .test-img-lb__stage {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 52px;
  box-sizing: border-box;
  background: #fff;
}
#test-img-lb .test-img-lb__frame {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  background: #fff;
}
#test-img-lb .test-img-lb__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
#test-img-lb .test-img-lb__img.is-preview {
  filter: blur(1.5px);
  opacity: 0.9;
}
#test-img-lb .test-img-lb__loader {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid rgba(15, 45, 90, 0.2);
  border-top-color: #0f2d5a;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
#test-img-lb .test-img-lb__frame.is-loading .test-img-lb__loader {
  opacity: 1;
  animation: test-img-lb-spin 0.7s linear infinite;
}
@keyframes test-img-lb-spin {
  to { transform: rotate(360deg); }
}
#test-img-lb .test-img-lb__close,
#test-img-lb .test-img-lb__prev,
#test-img-lb .test-img-lb__next {
  position: absolute;
  z-index: 3;
  border: 0;
  background: rgba(255, 255, 255, 0.95);
  color: #0f2d5a;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
#test-img-lb .test-img-lb__close {
  top: 8px;
  right: 8px;
  font-size: 36px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  box-shadow: none;
}
#test-img-lb .test-img-lb__prev {
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
}
#test-img-lb .test-img-lb__next {
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
}
#test-img-lb .test-img-lb__thumbs {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 12px;
  padding: 4px 2px 2px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
#test-img-lb .test-img-lb__thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 3px;
  margin: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 0;
}
#test-img-lb .test-img-lb__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#test-img-lb .test-img-lb__thumb:hover {
  border-color: #9ab;
}
#test-img-lb .test-img-lb__thumb.is-active {
  border-color: #0090e3;
}
#test-img-lb .test-img-lb__counter {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  margin-top: 8px;
  text-align: center;
  color: #333;
  font-size: 14px;
}
html.test-img-lb-open {
  overflow: hidden;
}
html.test-img-lb-open .jo-whatsappcontactbutton,
html.test-img-lb-open #jo_whatsapp_256,
html.test-img-lb-open .wcf2w_button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Telefoon: pijltjes bovenaan (bredere foto), duidelijk kruisje */
@media (max-width: 767px) {
  #test-img-lb {
    padding: 8px;
  }
  #test-img-lb .test-img-lb__panel {
    width: 100%;
    padding: 8px;
    border-radius: 6px;
  }
  #test-img-lb .test-img-lb__media {
    padding-top: 44px;
  }
  #test-img-lb .test-img-lb__stage {
    padding: 0;
  }
  #test-img-lb .test-img-lb__prev,
  #test-img-lb .test-img-lb__next {
    top: 0;
    transform: none;
    width: 40px;
    height: 40px;
    font-size: 22px;
    background: #fff;
    color: #0f2d5a;
    border: 1px solid #c5cdd8;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  }
  #test-img-lb .test-img-lb__prev {
    left: 0;
  }
  #test-img-lb .test-img-lb__next {
    left: 48px;
    right: auto;
  }
  #test-img-lb .test-img-lb__close {
    top: 10px;
    right: 10px;
    width: 42px;
    height: 42px;
    font-size: 30px;
    line-height: 40px;
    background: #fff;
    color: #0f2d5a;
    border: 1px solid #c5cdd8;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  }
  #test-img-lb .test-img-lb__thumb {
    width: 56px;
    height: 56px;
  }
}

/* Icecat-modal hard uit */
.gallery-wrapper--test-img .-icecat-modal_window,
.gallery-wrapper--test-img .icecat-modal_window,
body .-icecat-modal_window,
body .icecat-modal_window,
body #modal_window,
[class*="icecat-modal"],
[class*="modal_window"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  z-index: -1 !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* -------------------------------------------------------------------------
   VM-galerij fallback (kader, thumbs, nav, lightbox)
   ------------------------------------------------------------------------- */
/* VM-galerij enhancer — kader, thumbs, nav, lightbox */
.gallery-wrapper--vm-gal {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.gallery-wrapper--vm-gal #fallback-gallery {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.gallery-wrapper--vm-gal #fallback-gallery .product-tag-left,
.gallery-wrapper--vm-gal #fallback-gallery .product-tag-right {
  display: none !important;
}
.gallery-wrapper--vm-gal #fallback-gallery .product-image-gallery-cont {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.gallery-wrapper--vm-gal #fallback-gallery .product-image-gallery-main-cont {
  background: #fff !important;
  border: 1px solid #9a9a9a !important;
  border-radius: 8px !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.gallery-wrapper--vm-gal #fallback-gallery .product-image-gallery-main-cont img.responsive-image,
.gallery-wrapper--vm-gal #fallback-gallery #product-image-gallery img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 380px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  cursor: zoom-in !important;
}
.gallery-wrapper--vm-gal #fallback-gallery .cloud-zoom-lens,
.gallery-wrapper--vm-gal #fallback-gallery .cloud-zoom-title,
.gallery-wrapper--vm-gal #fallback-gallery .cloud-zoom-big,
.gallery-wrapper--vm-gal #fallback-gallery .mousetrap {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Nav < > onder kader */
.gallery-wrapper--vm-gal .vm-gal-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin: 8px 0 0 !important;
  width: 100% !important;
}
.gallery-wrapper--vm-gal .vm-gal-nav__btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 1px solid #9a9a9a !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #333 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
.gallery-wrapper--vm-gal .vm-gal-nav__btn:hover {
  border-color: #555 !important;
}

/* Thumbs: grijze rand + radius (owl of plain) */
.gallery-wrapper--vm-gal #fallback-gallery .product-thumb-carousel {
  margin-top: 8px !important;
}
.gallery-wrapper--vm-gal #fallback-gallery .product-thumb-carousel .owl-controls,
.gallery-wrapper--vm-gal #fallback-gallery .product-thumb-carousel .owl-buttons,
.gallery-wrapper--vm-gal #fallback-gallery .product-thumb-carousel .owl-pagination {
  display: none !important;
}
.gallery-wrapper--vm-gal #fallback-gallery .image-thumb {
  background: #fff !important;
  border: 1px solid #9a9a9a !important;
  border-radius: 6px !important;
  padding: 4px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  margin: 0 4px !important;
}
.gallery-wrapper--vm-gal #fallback-gallery .image-thumb.active,
.gallery-wrapper--vm-gal #fallback-gallery .image-thumb:hover {
  border-color: #555 !important;
}
.gallery-wrapper--vm-gal #fallback-gallery .image-thumb a {
  display: block !important;
  line-height: 0 !important;
}
.gallery-wrapper--vm-gal #fallback-gallery .image-thumb img {
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  border: 0 !important;
  padding: 0 !important;
}
.gallery-wrapper--vm-gal #product-light-box-images {
  display: none !important;
}

/* Lightbox (zelfde als test-img) — met thumbs onderaan */
#vm-gal-lb[hidden] {
  display: none !important;
}
#vm-gal-lb {
  position: fixed;
  inset: 0;
  z-index: 100000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
#vm-gal-lb .vm-gal-lb__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 45, 90, 0.88);
}
#vm-gal-lb .vm-gal-lb__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(1100px, 96vw);
  height: 100%;
  max-height: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  background: #fff;
  border-radius: 8px;
  padding: 16px 16px 12px;
}
#vm-gal-lb .vm-gal-lb__media {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#vm-gal-lb .vm-gal-lb__stage {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 52px;
  box-sizing: border-box;
  background: #fff;
}
#vm-gal-lb .vm-gal-lb__frame {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  background: #fff;
}
#vm-gal-lb .vm-gal-lb__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
#vm-gal-lb .vm-gal-lb__img.is-preview {
  filter: blur(1.5px);
  opacity: 0.9;
}
#vm-gal-lb .vm-gal-lb__loader {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid rgba(15, 45, 90, 0.2);
  border-top-color: #0f2d5a;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
#vm-gal-lb .vm-gal-lb__frame.is-loading .vm-gal-lb__loader {
  opacity: 1;
  animation: test-img-lb-spin 0.7s linear infinite;
}
#vm-gal-lb .vm-gal-lb__close,
#vm-gal-lb .vm-gal-lb__prev,
#vm-gal-lb .vm-gal-lb__next {
  position: absolute;
  z-index: 3;
  border: 0;
  background: rgba(255, 255, 255, 0.95);
  color: #0f2d5a;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
#vm-gal-lb .vm-gal-lb__close {
  top: 8px;
  right: 8px;
  font-size: 36px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  box-shadow: none;
}
#vm-gal-lb .vm-gal-lb__prev {
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
}
#vm-gal-lb .vm-gal-lb__next {
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
}
#vm-gal-lb .vm-gal-lb__thumbs {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 12px;
  padding: 4px 2px 2px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
#vm-gal-lb .vm-gal-lb__thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 3px;
  margin: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 0;
}
#vm-gal-lb .vm-gal-lb__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#vm-gal-lb .vm-gal-lb__thumb:hover {
  border-color: #9ab;
}
#vm-gal-lb .vm-gal-lb__thumb.is-active {
  border-color: #0090e3;
}
#vm-gal-lb .vm-gal-lb__counter {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  margin-top: 8px;
  text-align: center;
  color: #333;
  font-size: 14px;
}
html.vm-gal-lb-open {
  overflow: hidden;
}
html.vm-gal-lb-open .jo-whatsappcontactbutton,
html.vm-gal-lb-open #jo_whatsapp_256,
html.vm-gal-lb-open .wcf2w_button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 767px) {
  #vm-gal-lb {
    padding: 8px;
  }
  #vm-gal-lb .vm-gal-lb__panel {
    width: 100%;
    padding: 8px;
    border-radius: 6px;
  }
  #vm-gal-lb .vm-gal-lb__media {
    padding-top: 44px;
  }
  #vm-gal-lb .vm-gal-lb__stage {
    padding: 0;
  }
  #vm-gal-lb .vm-gal-lb__prev,
  #vm-gal-lb .vm-gal-lb__next {
    top: 0;
    transform: none;
    width: 40px;
    height: 40px;
    font-size: 22px;
    background: #fff;
    color: #0f2d5a;
    border: 1px solid #c5cdd8;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  }
  #vm-gal-lb .vm-gal-lb__prev {
    left: 0;
  }
  #vm-gal-lb .vm-gal-lb__next {
    left: 48px;
    right: auto;
  }
  #vm-gal-lb .vm-gal-lb__close {
    top: 10px;
    right: 10px;
    width: 42px;
    height: 42px;
    font-size: 30px;
    line-height: 40px;
    background: #fff;
    color: #0f2d5a;
    border: 1px solid #c5cdd8;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  }
  #vm-gal-lb .vm-gal-lb__thumb {
    width: 56px;
    height: 56px;
  }
}