:root {
  --xg-overlay: rgba(9, 15, 26, 0.56);
  --xg-dialog-bg: #ffffff;
  --xg-stage-bg: #f3f5f9;
  --xg-panel-bg: #f7f8fb;
  --xg-text: #111827;
  --xg-muted: #5b6475;
  --xg-soft: #8a93a5;
  --xg-shadow: 0 28px 90px rgba(15, 23, 42, 0.22);
  --xg-z: 9999;
  --xg-red-hover: #bc3134;
  --xg-red-active: #d92024;
  --xg-star-empty-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='346 2 24 24'%3E%3Cpath d='M351.638 24.6664C351.059 24.9568 350.402 24.4479 350.519 23.7982L351.764 16.8611L346.48 11.9391C345.986 11.4786 346.243 10.6367 346.904 10.5458L354.251 9.52505L357.527 3.17899C357.823 2.607 358.622 2.607 358.918 3.17899L362.194 9.52505L369.54 10.5458C370.202 10.6367 370.458 11.4786 369.965 11.9391L364.681 16.8611L365.926 23.7982C366.043 24.4479 365.386 24.9568 364.807 24.6664L358.22 21.3577L351.638 24.6664Z' fill='%23CFCFCF'/%3E%3C/svg%3E");
  --xg-star-full-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='385 2 24 24'%3E%3Cdefs%3E%3ClinearGradient id='xgStarGradient' x1='386.103' y1='2.75' x2='408.342' y2='24.75' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFCF4D'/%3E%3Cstop offset='0.5' stop-color='%23FFA603'/%3E%3Cstop offset='1' stop-color='%23FF8C00'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M390.638 24.6664C390.059 24.9568 389.402 24.4479 389.519 23.7982L390.764 16.8611L385.48 11.9391C384.986 11.4786 385.243 10.6367 385.904 10.5458L393.251 9.52505L396.527 3.17899C396.823 2.607 397.622 2.607 397.918 3.17899L401.194 9.52505L408.54 10.5458C409.202 10.6367 409.458 11.4786 408.965 11.9391L403.681 16.8611L404.926 23.7982C405.043 24.4479 404.386 24.9568 403.807 24.6664L397.22 21.3577L390.638 24.6664Z' fill='url(%23xgStarGradient)'/%3E%3C/svg%3E");
}

.xg-lock {
  overflow: hidden !important;
}

.xg,
.xg * {
  box-sizing: border-box;
}

.xg {
  --xg-stage-height: min(68vh, 760px);
  --xg-single-dialog-width: 914px;
  position: fixed;
  inset: 0;
  z-index: var(--xg-z);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  color: var(--xg-text);
  font-family: inherit;
  opacity: 0;
  overscroll-behavior: contain;
  transition: opacity 0.22s ease;
}

.xg--hidden {
  display: none;
}

.xg--visible {
  opacity: 1;
}

.xg__backdrop {
  position: absolute;
  inset: 0;
  background: var(--xg-overlay);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.xg--visible .xg__backdrop {
  opacity: 1;
}

.xg__dialog {
  position: relative;
  z-index: 1;
  width: min(914px, calc(100vw - 30px));
  height: 80vh;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  box-shadow: var(--xg-shadow);
  overflow: hidden;
  transform: translateY(8px) scale(0.985);
  opacity: 0;
  transition:
    transform 0.24s ease,
    opacity 0.24s ease;
  background: rgb(15 23 42 / 35%);
  overscroll-behavior: contain;
  backdrop-filter: blur(15px);
}

.xg--visible .xg__dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.xg__header {
  position: relative;
  z-index: 6;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 24px;
  padding: 10px 15px;
}

.xg__title {
  min-width: 0;
  color: var(--xg-soft);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xg__shell {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.xg--side .xg__shell {
  grid-template-columns: minmax(0, 1fr) 280px;
}

.xg--side .xg__dialog {
  width: min(1180px, calc(100vw - 30px));
}

.xg--side {
  --xg-stage-height: min(72vh, 820px);
}

.xg__stage-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 15px 10px 15px;
}

.xg__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: var(--xg-stage-height, auto);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 20px;
  isolation: isolate;
  touch-action: pan-y;
  cursor: grab;
}

.xg__stage.is-dragging {
  cursor: grabbing;
}

.xg__slider {
  position: absolute;
  inset: 0;
  /* z-index: 1; */
  display: flex;
  width: 300%;
  height: 100%;
  transform: translate3d(-33.333333%, 0, 0);
  will-change: transform;
}

.xg__slide {
  position: relative;
  flex: 0 0 calc(100% / 3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.xg__slide.is-empty {
  visibility: hidden;
}

.xg__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: top center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.xg__overlay {
  position: absolute;
  left: 7px;
  bottom: 7px;
  z-index: 8;
  width: max-content;
  max-width: calc(100% - 20px);
  padding: 12px 14px;
  border-radius: 16px;
  background: rgb(15 23 42 / 28%);
  backdrop-filter: blur(5px);
  color: #fff;
  pointer-events: auto;
}

.xg__overlay * {
  pointer-events: auto;
}

.xg__overlay-handle {
  display: none;
}

.xg__overlay-handle[hidden] {
  display: none !important;
}

.xg__overlay-handle-bar {
  display: block;
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
}

.xg__counter,
.xg__side-counter,
.xg__details,
.xg__side-details {
  /* display: none !important; */
}

.xg__caption {
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  line-height: 1.55;
}

.xg__overlay-line {
  display: block;
}

.xg__overlay-meta {
  color: #fff;
}

.xg__overlay-gap {
  height: 8px;
}

.xg__overlay-review {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.xg__overlay-review-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}

.xg__overlay-review-author {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.xg__overlay-review-date {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
}

.xg__overlay-review-text {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}

.xg__overlay-review-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.xg__meta--bottom {
  padding: 14px 0 0;
}

.xg__review {
  margin-top: 0;
}

.xg__mobile-overlay {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 15px 16px;
  border-radius: 15px;
  background: var(--xg-panel-bg);
  color: var(--xg-text);
  font-size: 12px;
}

.xg__mobile-overlay .xg__overlay-line {
  color: var(--xg-text);
}

.xg__mobile-overlay .xg__overlay-meta {
  color: var(--xg-muted);
}

.xg__mobile-overlay .xg__overlay-review-author {
  color: var(--xg-text);
}

.xg__mobile-overlay .xg__overlay-review-date,
.xg__mobile-overlay .xg__overlay-review-text {
  color: var(--xg-muted);
}

.xg__mobile-overlay .xg__overlay-review-link {
  background: rgba(17, 17, 17, 0.08);
  color: var(--xg-text);
}

.xg__review-card {
  color: #ffffffa3;
}

.xg__review-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.xg__review-userline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.xg__review-author {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.xg__review-date {
  font-size: 16px;
  font-weight: 500;
  color: var(--xg-soft);
}

.xg__review-text {
  margin-top: 12px;
  max-height: 6.6em;
  overflow: hidden;
  line-height: 1.2;
  font-size: 14px;
}

.xg__review-card.is-expanded .xg__review-text {
  max-height: none;
}

.xg__review-toggle,
.xg__review-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.08);
  color: var(--xg-text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.xg__review-toggle:hover,
.xg__review-link:hover {
  color: var(--xg-red-hover);
}

.xg__review-toggle:active,
.xg__review-link:active {
  color: var(--xg-red-active);
  transform: scale(0.96);
}

.xg__stars {
  display: inline-flex;
  gap: 4px;
}

.xg__stars-value {
  margin-left: 0;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.xg__star {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: var(--xg-star-empty-svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin-top: 2px;
}

.xg__star.is-active {
  background-image: var(--xg-star-full-svg);
}

.xg__side {
  display: none;
  min-width: 0;
  padding: 0 15px 15px 0;
}

.xg--side .xg__side {
  display: block;
}

.xg--side .xg__overlay,
.xg--side .xg__meta--bottom {
  display: none !important;
}

.xg__side-inner {
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  height: 100%;
  overflow: auto;
  padding: 18px;
  border-radius: 15px;
  background: rgb(15 23 42 / 28%);
  backdrop-filter: blur(5px);
}

.xg__side-title {
  /* display: none !important; */
}

.xg__side-review {
  margin-top: 0;
}

.xg__side-info {
  margin-top: 0;
  line-height: 1.6;
  color: #ffffffa3;
}

.xg__side-info p {
  margin: 0;
}

.xg__side-caption {
  margin-top: auto;
  color: var(--xg-soft);
  font-size: 12px;
  line-height: 1.45;
}

.xg__side-text {
  white-space: pre-line;
}

.xg__btn,
.xg__thumb-nav,
.xg__thumb-more {
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition:
    transform 0.14s ease,
    color 0.18s ease,
    opacity 0.18s ease;
}

.xg__btn svg,
.xg__thumb-nav svg {
  display: block;
  width: 100%;
  height: 70%;
  stroke: currentColor;
  stroke-width: 1.85;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.xg__btn--close {
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  background: transparent;
  color: var(--xg-soft);
  background: rgb(15 23 42 / 28%);
  backdrop-filter: blur(5px);
  border-radius: 100%;
}

.xg__btn--close:hover {
  color: var(--xg-red-hover);
}

.xg__btn--close:active {
  color: var(--xg-red-active);
  transform: scale(0.94);
}

.xg__btn--nav,
.xg__thumb-nav {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgb(17 17 17 / 10%);
  color: #fff;
  backdrop-filter: blur(4px);
}

.xg__btn--nav:hover,
.xg__thumb-nav:hover {
  color: var(--xg-red-hover);
}

.xg__btn--nav:active,
.xg__thumb-nav:active {
  color: var(--xg-red-active);
  transform: scale(0.94);
}

.xg__btn--nav {
  position: absolute;
  top: 50%;
  z-index: 9;
  transform: translateY(-50%);
}

.xg__btn--nav:active {
  transform: translateY(-50%) scale(0.94);
}

.xg__btn--prev {
  left: 12px;
}

.xg__btn--next {
  right: 12px;
}

.xg__btn--mobile-meta {
  display: none;
}

.xg__btn.is-disabled,
.xg__btn[hidden],
.xg__thumb-nav[hidden],
.xg__thumb-more[hidden] {
  display: none !important;
}

.xg__thumbs {
  padding: 10px 0 0;
}

.xg__thumb-rail {
  position: relative;
  display: block;
}

.xg__thumb-viewport {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  width: 100%;
  min-height: 70px;
  overflow-x: auto;
  overflow-y: hidden;
  /* padding: 3px 18px; */
  scrollbar-width: none;
  cursor: grab;
}

.xg__thumb-viewport::-webkit-scrollbar {
  display: none;
}

.xg__thumb-viewport.is-dragging {
  cursor: grabbing;
}

.xg__thumb-track {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 64px;
  padding: 2px 4px;
}

.xg__thumb {
  position: relative;
  flex: 0 0 45px;
  width: 45px;
  height: 58px;
  border: 0;
  padding: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  transform: translateZ(0) scale(1);
  will-change: width, flex-basis, transform;
  transition:
    width 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    flex-basis 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.xg__thumb-media {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
}

.xg__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.xg__thumb:hover {
  flex: 0 0 50px;
  width: 50px;
  transform: translateZ(0) scale(1.03);
}

.xg__thumb.is-active {
  flex: 0 0 75px;
  width: 75px;
  transform: translateZ(0) scale(1.03);
}

.xg__thumb-badge {
  position: absolute;
  left: 4px;
  bottom: 4px;
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  padding: 2px 4px;
  border-radius: 10px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  background: rgba(15, 23, 42, 0.68);
}

.xg__thumb-badge-star {
  width: 14px;
  height: 14px;
  background-image: var(--xg-star-full-svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.xg__thumb-more {
  display: none !important;
}

.xg__thumb-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
}

.xg__thumb-nav:active {
  transform: translateY(-50%) scale(0.94);
}

.xg__thumb-nav--prev {
  left: 4px;
}

.xg__thumb-nav--next {
  right: 4px;
}

.xg__thumb-nav svg {
  width: 24px;
  height: 20px;
}

.xg__overlay[hidden],
.xg__review[hidden],
.xg__details[hidden],
.xg__meta--bottom[hidden],
.xg__side[hidden],
.xg__side-title[hidden],
.xg__side-caption[hidden],
.xg__side-review[hidden],
.xg__side-details[hidden],
.xg__side-info[hidden] {
  /* display: none !important; */
}

.xg--single .xg__dialog {
  width: min(var(--xg-single-dialog-width, 914px), calc(100vw - 30px));
  height: auto;
  max-height: calc(100vh - 30px);
}

.xg--single .xg__stage {
  margin: 0 auto;
}

.xg--single .xg__btn--nav,
.xg--single .xg__thumbs {
  display: none !important;
}

.xg-trigger {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.xg-trigger::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.04);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.xg-trigger::after {
  content: "+";
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.14);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  pointer-events: none;
}

.xg-trigger:hover::before,
.xg-trigger:hover::after {
  opacity: 1;
}

.xg-trigger:hover::after {
  transform: scale(1);
}

@media (max-width: 980px) {
  .xg--side .xg__shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .xg__side {
    display: none !important;
  }

  .xg__overlay {
    max-width: calc(100% - 15px);
  }
}

@media (max-width: 767px) {
  .xg {
    --xg-mobile-single-offset: calc(11px + env(safe-area-inset-bottom, 0px));
    --xg-mobile-safe-top: calc(54px + env(safe-area-inset-top, 0px));
    --xg-mobile-safe-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
  .xg__btn--close {
    border-radius: 100%;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(10px);
    width: 35px;
    height: 35px;
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .xg__btn--close svg {
    height: 70%;
  }
  .xg {
    padding: 0;
  }

  .xg__dialog {
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0;
  }

  .xg__header {
    padding: 5px 10px;
  }

  .xg__title {
    font-size: 10px;
  }

  .xg__stage-wrap {
    border-radius: 0;
    padding: 30px 0;
  }

  .xg__stage {
    border-radius: 0;
    height: 100%;
  }

  .xg--mobile-single-overlay .xg__stage-wrap {
    padding-bottom: 70px;
  }

  .xg__overlay {
    display: block !important;
    left: 8px;
    right: 8px;
    bottom: 0;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    overflow: hidden;
    max-height: 60px;
    transition:
      max-height 0.28s cubic-bezier(0.22, 0.8, 0.24, 1),
      transform 0.22s ease;
  }

  .xg__counter {
    position: fixed;
    top: 25px;
    left: 50%;
    z-index: 10;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, -0.58);
    backdrop-filter: blur(10px);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    transform: translateX(-50%);
    color: var(--xg-soft);
  }

  .xg__counter:not(:empty) {
    display: inline-flex !important;
  }

  .xg__overlay.is-expandable {
    touch-action: none;
    -webkit-mask-image: linear-gradient(
      180deg,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 62%,
      rgba(0, 0, 0, 0.42) 84%,
      rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(
      180deg,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 62%,
      rgba(0, 0, 0, 0.42) 84%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  .xg__overlay.is-expandable.is-expanded {
    max-height: calc(100% - 16px);
    overflow-y: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .xg__overlay.is-dragging {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .xg__btn--nav,
  .xg__thumb-nav,
  .xg__btn--mobile-meta,
  .xg__overlay-handle {
    display: none !important;
  }

  .xg__btn--mobile-meta[hidden] {
    display: none !important;
  }

  .xg__thumbs {
    padding-top: 15px;
  }

  .xg__thumb {
    flex: 0 0 30px;
    width: 30px;
    height: 40px;
  }

  .xg__thumb.is-active {
    flex: 0 0 50px;
    width: 50px;
  }

  .xg__thumb-media {
    border-radius: 5px;
  }

  .xg__thumb-badge {
    left: 2px;
    bottom: 2px;
    padding: 1px 4px;
  }

  .xg__thumb-badge-star {
    width: 10px;
    height: 10px;
  }

  .xg__caption {
    overflow: visible;
  }

  .xg__overlay-line,
  .xg__overlay-meta {
    display: block;
  }

  .xg__overlay-gap {
    display: none;
  }

  .xg__overlay-review {
    gap: 4px;
  }

  .xg__overlay .xg__overlay-review-text {
    display: none;
  }

  .xg__overlay-review-text {
    padding-right: 2px;
  }

  .xg__meta--bottom {
    padding: 11px;
  }

  .xg__meta--bottom .xg__details:not([hidden]) {
    display: block !important;
    margin: 0;
  }

  .xg__meta--bottom .xg__review:not([hidden]) {
    margin-top: 0;
  }

  .xg__thumb-viewport {
    justify-content: center;
  }

  .xg__thumb-viewport,
  .xg__thumb-track {
    min-height: max-content;
  }
  .xg__thumb-track {
    gap: 5px;
  }
}