/* ================================
   CLICK FIX (MOST IMPORTANT)
================================ */
.product-configurator__configurator { position: relative; }

/* Do NOT let images steal clicks */
.product-configurator__baseimg,
#product-configurator__pointer,
.product-configurator__toothimg,
.product-configurator__color-overlay {
  pointer-events: none !important;
}

/* Keep SVG always on top and clickable */
#product-configurator__teethsvg {
  z-index: 9999 !important;
  pointer-events: auto !important;
}

/* Make tooth paths clickable even if fill/stroke are transparent */
.product-configurator__toothsvg {
  pointer-events: all !important;
  cursor: pointer;
}

/* ================================
   YOUR EXISTING LAYERS
================================ */
.product-configurator__toothimg,
.product-configurator__color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.product-configurator__toothimg { z-index: 20; }
.product-configurator__color-overlay { z-index: 50; }

/* ================================
   REST OF YOUR FILE (UNCHANGED)
================================ */
.product-configurator__wrapper {
  background: rgb(var(--color-background));

  .product-configurator__content {
    display: flex;
    padding-top: 30px;

    @media only screen and (max-width: 1020px) {
      padding-bottom: 7rem;
    }
    @media only screen and (max-width: 880px) {
      flex-direction: column;
      padding-top: 0;
      padding-bottom: 0;
    }

    .product-configurator__sidebar.grid__item {
      @media only screen and (max-width: 880px) {
        max-width: 100%;
      }
    }

    .product-configurator__sidebar {
      width: 36%;
      @media only screen and (max-width: 880px) {
        width: 100%;
      }

      .product-configurator__price {
        margin: 1.5rem 0 2rem 0;

        .price__container {
          display: block;
        }

        .product__text-second {
          margin-top: 0;
        }
      }

      .product-configurator__buttons {
        margin: 3.5rem 0;
      }
    }

    .product-configurator__configurator {
      width: 64%;
      position: sticky;
      height: 600px;
      top: 5rem;

      @media only screen and (max-width: 1020px) {
        height: 530px;
      }
      @media only screen and (max-width: 880px) {
        width: 100%;
        position: relative;
      }
      @media only screen and (max-width: 450px) {
        height: 430px;
        position: relative;
      }

      /* keep alignment */
      img,
      svg {
        position: absolute;
        width: auto;
        height: 600px;
        left: 0;
        right: 0;
        margin: 0 auto;

        @media only screen and (max-width: 880px) {
          height: 500px;
        }
        @media only screen and (max-width: 450px) {
          height: 400px;
        }
      }

      .product-configurator__toothsvg {
        fill: #fff;
        fill-opacity: 0;
        stroke: #e8b01b;
        stroke-opacity: 0;
        stroke-width: 3px;

        /* Hover effect permanently on for touchscreens */
        @media (pointer: coarse) {
          fill-opacity: 0.2;
          stroke-opacity: 0.9;
        }
      }

      .product-configurator__toothsvg:hover {
        fill-opacity: 0.4;
        stroke-opacity: 0.9 !important;
      }

      #product-configurator__teethsvg {
        z-index: 10;

        &.gelbgold path {
          stroke: #e8b01b;
        }

        &.rotgold path {
          stroke: #c63d33;
        }

        &.weißgold path {
          stroke: #ffffff;
        }

        &.chrom path {
          stroke: #171717;
        }

        &.silber path {
          stroke: #525c68;
        }
      }
    }

    .product-configurator__settings {
      .product-form__input:disabled input[type="radio"]:checked + label {
        background-color: rgba(0, 0, 0, 0.1);
      }

      .product-configurator__label {
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
      }

      .product-configurator__icons {
        border-radius: 100%;
        margin: -6px 10px -6px -15px;
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25);
        width: 30px;
        height: 30px;
      }

      .product-configurator__color-icon {
        display: inline-block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin: -6px 10px -6px -15px;
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25);
        vertical-align: middle;
        border: 1px solid rgba(0, 0, 0, 0.1);
      }

      .color-C8 {
        background: linear-gradient(135deg, #1b2020 0%, #20484b 100%);
      }
      .color-C7 {
        background: #b0b94b;
      }
      .color-C4 {
        background: #29282d;
      }
      .color-5 {
        background: linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%);
      }
      .color-C3 {
        background: linear-gradient(135deg, #e983ee, #54166c 100%);
      }
      .color-C2 {
        background: #fe1417;
      }
      .color-C6 {
        background: linear-gradient(135deg, #5b6055 0%, #8d9891 100%);
      }
      .color-C5 {
        background: #dad5d3;
      }

      .product-configurator__icons-model-frame {
        filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.25));
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
      }
    }

    .product-configurator__toothimg.hide,
    .product-configurator__color-overlay.hide {
      display: none !important;
    }

    .product-configurator__pointer-wrapper {
      position: relative;
      height: 0;
      width: 0;
    }

    #product-configurator__pointer {
      animation: 1s alternate ease-in-out point infinite;
      position: absolute;
      height: 100px;
      width: 100px;
      top: 70px;
      left: 130px;
      z-index: 2;

      @media only screen and (max-width: 880px) {
        height: 80px;
        width: 80px;
        top: 60px;
        left: 210px;
      }
      @media only screen and (max-width: 450px) {
        height: 50px;
        width: 50px;
        top: 60px;
        left: 85px;
      }
    }

    #product-configurator__price-number.loading:before {
      animation: dots 1s linear infinite;
      content: "    €";
    }
  }
}

/* COLOR OVERLAY LAYER */
.product-configurator__color-overlay {
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 20;
}

.product-configurator__color-overlay.visible {
  opacity: 1;
}

.tooth-pulse {
  animation: 1.6s alternate linear pulse-stroke infinite;

  @media (pointer: coarse) {
    animation: 1.6s alternate linear pulse-stroke-reverse infinite;
  }

  &.pulse-5 { animation-delay: 0s; }
  &.pulse-6 { animation-delay: 0.2s; }
  &.pulse-7 { animation-delay: 0.4s; }
  &.pulse-8 { animation-delay: 0.6s; }
  &.pulse-9 { animation-delay: 0.8s; }
  &.pulse-10 { animation-delay: 1s; }
  &.pulse-11 { animation-delay: 1.2s; }
  &.pulse-12 { animation-delay: 1.4s; }

  &.pulse-21 { animation-delay: 3s; }
  &.pulse-22 { animation-delay: 2.8s; }
  &.pulse-23 { animation-delay: 2.6s; }
  &.pulse-24 { animation-delay: 2.4s; }
  &.pulse-25 { animation-delay: 2.2s; }
  &.pulse-26 { animation-delay: 2s; }
  &.pulse-27 { animation-delay: 1.8s; }
  &.pulse-28 { animation-delay: 1.6s; }
}

@keyframes pulse-stroke {
  0%, 75% { stroke-opacity: 0; }
  100% { stroke-opacity: 1; }
}

@keyframes pulse-stroke-reverse {
  0%, 75% { stroke-opacity: 1; }
  100% { stroke-opacity: 0; }
}

@keyframes point {
  0% { transform: rotate(135deg) translate(0, 0); }
  100% { transform: rotate(135deg) translateY(10px); }
}

@keyframes dots {
  0%, 20% { content: ".   €"; }
  40% { content: "..  €"; }
  60% { content: "... €"; }
  90%, 100% { content: "    €"; }
}

.scrolled-past-header .header { pointer-events: none; }
.scrolled-past-header .header__icon { pointer-events: all; }
.header__inline-menu { pointer-events: all; }


.product-configurator__color-overlay.visible{
  opacity: 1 !important;
  visibility: visible !important;
}

.product-configurator__color-overlay{
  opacity: 0;
  visibility: hidden;
  transition: none !important;  /* no fade delay */
  will-change: opacity;
}




/* Hide "Keine" buttons (Material + Colour) */
#product-configurator__material input[value="none"],
#product-configurator__material input[value="none"] + label,
#product-configurator__color input[value="none"],
#product-configurator__color input[value="none"] + label{
  display: none !important;
}