/*
body {
  background-color:#222;
}
*/

.carousel {
  position:relative;
  width:600px; /* 400px */
  border:none; /* 2px solid white */
  margin:20px auto;
  /*box-shadow:0px 0px 20px #000; */ /* 40px */
  background:#fff;
}
.carousel > img {
  display:none;
  width:100%;
  height:auto;
}
.carousel > input {
  position:absolute;
  left:-9999px;
}
.carousel > input:checked + label + img {
  display:block;
}

.carousel > label,
.carousel > input:checked ~ label ~ label ~ label ~ label {
  display:none;
}
.carousel > input:checked + label {
  display:block;
  left:0;
}
.carousel > input:checked ~ label ~ label ~ label {
  display:block;
  right:0;
}

.carousel > label {
  position:absolute;
  top:0;
  width:25%;
  height:100%;
  visibility:hidden;
  cursor:pointer;
  z-index:2;
}
.carousel > label:before {
  content:'';
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  visibility:visible;
}
.carousel > label:after {
  display:block;
  position:absolute;
  top:50%;
  width:38px;
  height:38px;
  line-height:34px;
  margin:-19px 12px 0 12px;
  background-color:rgba(0,0,0,0.72);
  color:white;
  font-family:'Arial';
  font-weight:bold;
  font-size:26px;
  text-align:center;
  visibility:visible;
  border:2px solid white;
  border-radius:20px;
  box-shadow:0 3px 8px rgba(0,0,0,0.35);
  opacity:0.88;
  transition:opacity 0.15s ease, transform 0.15s ease;
}
.carousel > label:hover:after {
  visibility:visible;
  opacity:1;
  transform:scale(1.06);
}

.carousel > input:checked + label:after {
  left:0;
  content:'\00AB';
}
.carousel > input:checked ~ label ~ label ~ label:after {
  right:0;
  content:'\00BB';
}

.carousel[data-image-count="1"] > label {
  display:none !important;
}

.carousel-fullscreen-button {
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:3;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid rgba(255,255,255,0.9);
  border-radius:4px;
  background:rgba(0,0,0,0.72);
  color:#fff;
  cursor:pointer;
  box-shadow:0 3px 8px rgba(0,0,0,0.35);
}

.carousel-fullscreen-button:before {
  content:'';
  position:absolute;
  inset:10px;
  background:
    linear-gradient(#fff,#fff) left top/11px 2px no-repeat,
    linear-gradient(#fff,#fff) left top/2px 11px no-repeat,
    linear-gradient(#fff,#fff) right top/11px 2px no-repeat,
    linear-gradient(#fff,#fff) right top/2px 11px no-repeat,
    linear-gradient(#fff,#fff) left bottom/11px 2px no-repeat,
    linear-gradient(#fff,#fff) left bottom/2px 11px no-repeat,
    linear-gradient(#fff,#fff) right bottom/11px 2px no-repeat,
    linear-gradient(#fff,#fff) right bottom/2px 11px no-repeat;
}

.carousel-fullscreen-button:hover,
.carousel-fullscreen-button:focus {
  background:rgba(0,0,0,0.9);
}

.product-image-viewer {
  display:none;
  position:fixed;
  inset:0;
  z-index:10000;
  background:rgba(0,0,0,0.92);
  align-items:center;
  justify-content:center;
  padding:64px 72px;
}

body.product-image-viewer-open {
  overflow:hidden;
}

.product-image-viewer.is-open {
  display:flex;
}

.product-image-viewer__image {
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}

.product-image-viewer__close,
.product-image-viewer__prev,
.product-image-viewer__next {
  position:absolute;
  border:1px solid rgba(255,255,255,0.85);
  border-radius:4px;
  background:rgba(0,0,0,0.62);
  color:#fff;
  cursor:pointer;
  font-family:Arial, sans-serif;
  font-weight:bold;
  text-align:center;
}

.product-image-viewer__close {
  top:16px;
  right:16px;
  width:44px;
  height:44px;
  line-height:40px;
  font-size:28px;
}

.product-image-viewer__prev,
.product-image-viewer__next {
  top:50%;
  width:48px;
  height:56px;
  line-height:50px;
  margin-top:-28px;
  font-size:34px;
}

.product-image-viewer__prev {
  left:16px;
}

.product-image-viewer__next {
  right:16px;
}

.product-image-viewer__close:hover,
.product-image-viewer__prev:hover,
.product-image-viewer__next:hover,
.product-image-viewer__close:focus,
.product-image-viewer__prev:focus,
.product-image-viewer__next:focus {
  background:rgba(0,0,0,0.9);
}

.product-image-viewer__counter {
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  color:#fff;
  font-size:15px;
}

@media screen and (max-width: 767px) {
  .carousel > label:after {
    width:34px;
    height:34px;
    line-height:30px;
    margin:-17px 8px 0 8px;
    font-size:23px;
  }

  .carousel-fullscreen-button {
    right:8px;
    bottom:8px;
    width:38px;
    height:38px;
  }

  .product-image-viewer {
    padding:56px 12px;
  }

  .product-image-viewer__prev,
  .product-image-viewer__next {
    width:42px;
    height:50px;
    line-height:44px;
    font-size:30px;
  }
}