.konfigurator-section {
  position: relative;
  height: 100vh;
  overflow: hidden;

  & .konfigurator-bg-layer {
    position: absolute;
    inset: 0;
    z-index: 0;

    & .konfigurator-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity var(--transition-xfade);

      &.konfigurator-bg-active {
        opacity: 1;
      }
    }
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0.05) 40%,
      rgba(0, 0, 0, 0.55) 100%
    );
    z-index: 1;
    pointer-events: none;
  }

  & .konfig-section-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 56px;
    height: 56px;
    background: var(--color-black-30);
    border: 1px solid var(--color-white-30);
    border-radius: 50%;
    color: var(--color-white);
    font-size: 34px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 7px;
    transition:
      background var(--transition-fast),
      border-color var(--transition-fast);

    &.konfig-section-arrow-left {
      left: 28px;
    }
    &.konfig-section-arrow-right {
      right: 28px;
    }

    &:hover {
      background: var(--color-orange);
      border-color: var(--color-orange);
    }
  }

  & .konfigurator-overlay {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 36px 100px 28px;
  }

  & .konfigurator-title {
    color: var(--color-white);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7);
    flex-shrink: 0;
  }

  & .konfigurator-obj-layer {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;

    & .konfigurator-obj {
      position: absolute;
      max-height: 72vh;
      max-width: 62vw;
      object-fit: contain;
      opacity: 0;
      transition: opacity var(--transition-xfade);
      filter: drop-shadow(0 16px 48px rgba(0, 0, 0, 0.65));

      &.konfigurator-obj-active {
        opacity: 1;
      }
    }
  }

  & .konfigurator-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    flex-shrink: 0;

    & .konfigurator-obj-row {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: nowrap;

      & .konfig-obj-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 10px 14px;
        background: var(--color-white-30);
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
        border: 2px solid transparent;
        border-radius: var(--radius-md);
        cursor: pointer;
        color: var(--color-black);
        font-family: var(--font-p-tiny-family);
        font-size: var(--font-p-tiny-size);
        transition:
          border-color var(--transition-fast),
          color var(--transition-fast),
          background var(--transition-fast);
        flex: 1;

        & img {
          width: 64px;
          height: 64px;
          object-fit: cover;
          border-radius: var(--radius-sm);
          display: block;
        }

        &:hover:not(.konfig-obj-btn-active) {
          background: var(--color-orange-30);
          border-color: var(--color-white-30);
        }

        &.konfig-obj-btn-active {
          color: var(--color-white);
          background: var(--color-orange-60);
        }
      }
    }

    & .konfigurator-bg-thumbs-wrapper {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;

      & .konfig-thumb-arrow {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        background: var(--color-black-30);
        border: 1px solid var(--color-white-30);
        border-radius: 50%;
        color: var(--color-white);
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          background var(--transition-fast),
          border-color var(--transition-fast);

        &:hover {
          background: var(--color-orange);
          border-color: var(--color-orange);
        }
      }
    }

    & .konfigurator-bg-thumbs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      flex: 1;
      min-width: 0;
      padding: 4px 2px 8px;
      cursor: grab;
      user-select: none;
      scrollbar-width: none;

      &::-webkit-scrollbar {
        display: none;
      }
      &.is-dragging {
        cursor: grabbing;
      }

      & .konfig-bg-btn {
        flex-shrink: 0;
        width: 80px;
        height: 56px;
        border: 2px solid transparent;
        border-radius: var(--radius-sm);
        overflow: hidden;
        cursor: pointer;
        padding: 0;
        background: none;
        transition:
          border-color var(--transition-fast),
          transform var(--transition-fast);

        & img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }

        &:hover:not(.konfig-bg-btn-active) {
          border-color: var(--color-white-30);
          transform: translateY(-2px);
        }

        &.konfig-bg-btn-active {
          border-color: var(--color-orange);
        }
      }
    }
  }
}