/* NC Studio standard — fullscreen pregled proizvoda */

body.ss-viewer-open {
  overflow: hidden !important;
}

.ss-viewer[hidden] {
  display: none !important;
}

.ss-viewer {
  position: fixed;
  inset: 0;
  z-index: 900;
  color: #f7f9fc;
}

.ss-viewer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 11, .96);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.ss-viewer__dialog {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 18px 22px 15px;
  pointer-events: none;
}

.ss-viewer__toolbar {
  z-index: 3;
  width: 100%;
  max-width: 1560px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto;
  pointer-events: auto;
}

.ss-viewer__meta {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.ss-viewer__title {
  overflow: hidden;
  color: #f7f9fc;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.ss-viewer__count {
  flex: none;
  color: rgba(247, 249, 252, .55);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}

.ss-viewer__controls {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ss-viewer__button,
.ss-viewer__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #f7f9fc;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 3px;
  font: inherit;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

.ss-viewer__button {
  min-width: 42px;
  height: 42px;
}

.ss-viewer__button:hover,
.ss-viewer__button:focus-visible,
.ss-viewer__nav:hover,
.ss-viewer__nav:focus-visible {
  color: #8abaff;
  background: rgba(8, 108, 255, .18);
  border-color: #3184ff;
  outline: none;
}

.ss-viewer__button:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.ss-viewer__button--reset {
  min-width: 52px;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .07em;
}

.ss-viewer__button--close {
  margin-left: 5px;
}

.ss-viewer__zoom {
  min-width: 44px;
  color: rgba(247, 249, 252, .72);
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.ss-viewer__stage {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 58px;
  align-items: center;
  pointer-events: none;
}

.ss-viewer.has-single-item .ss-viewer__stage {
  grid-template-columns: minmax(0, 1fr);
}

.ss-viewer__viewport {
  position: relative;
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  pointer-events: auto;
}

.ss-viewer__viewport::before {
  position: absolute;
  left: calc(50% - 18px);
  top: calc(50% - 18px);
  width: 36px;
  height: 36px;
  border: 2px solid rgba(255, 255, 255, .2);
  border-top-color: #3184ff;
  border-radius: 50%;
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}

.ss-viewer.is-loading .ss-viewer__viewport::before {
  animation: ss-viewer-spin 700ms linear infinite;
  opacity: 1;
}

.ss-viewer__image {
  display: block;
  max-width: min(100%, 1560px);
  max-height: calc(100dvh - 152px);
  object-fit: contain;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
  user-select: none;
  will-change: transform;
  transition: opacity 140ms ease, transform 170ms ease;
}

.ss-viewer.is-loading .ss-viewer__image {
  opacity: 0;
}

.ss-viewer.is-zoomed .ss-viewer__image {
  cursor: grab;
}

.ss-viewer.is-dragging .ss-viewer__image {
  cursor: grabbing;
  transition: opacity 140ms ease;
}

.ss-viewer__nav {
  z-index: 2;
  width: 58px;
  height: 58px;
  pointer-events: auto;
}

.ss-viewer__nav[hidden] {
  display: none;
}

.ss-viewer__footer {
  width: 100%;
  max-width: 1200px;
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  margin: 0 auto;
  pointer-events: none;
}

.ss-viewer__caption {
  overflow: hidden;
  margin: 0;
  color: rgba(247, 249, 252, .82);
  font-size: .8rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-viewer__hint {
  margin: 0;
  color: rgba(247, 249, 252, .44);
  font-size: .62rem;
  letter-spacing: .06em;
  text-align: right;
  text-transform: uppercase;
}

@keyframes ss-viewer-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 700px) {
  .ss-viewer__dialog {
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  }

  .ss-viewer__toolbar {
    gap: 8px;
  }

  .ss-viewer__title,
  .ss-viewer__zoom {
    display: none;
  }

  .ss-viewer__meta {
    flex: none;
  }

  .ss-viewer__controls {
    gap: 5px;
  }

  .ss-viewer__button {
    min-width: 42px;
    height: 42px;
  }

  .ss-viewer__button--reset {
    min-width: 48px;
  }

  .ss-viewer__stage {
    display: block;
  }

  .ss-viewer__viewport {
    height: 100%;
  }

  .ss-viewer__image {
    max-width: 100%;
    max-height: calc(100dvh - 132px);
  }

  .ss-viewer__nav {
    position: absolute;
    top: calc(50% - 26px);
    width: 44px;
    height: 52px;
    background: rgba(4, 7, 11, .55);
  }

  .ss-viewer__nav--previous { left: 0; }
  .ss-viewer__nav--next { right: 0; }

  .ss-viewer__footer {
    min-height: 34px;
    grid-template-columns: minmax(0, 1fr);
  }

  .ss-viewer__caption {
    font-size: .74rem;
    text-align: center;
  }

  .ss-viewer__hint {
    display: none;
  }
}

@media (max-width: 380px) {
  .ss-viewer__button--reset {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-viewer__button,
  .ss-viewer__nav,
  .ss-viewer__image,
  .ss-viewer__viewport::before {
    animation: none !important;
    transition: none !important;
  }
}