/** Shopify CDN: Minification failed

Line 140:2 "witdh" is not a known CSS property
Line 158:0 Expected "}" to go with "{"

**/
  @media only screen and (max-width: 768px) {
  .viewer {
    display: flex;
    flex-direction: column !important;
  }
}

  @media only screen and (max-width: 768px) {
  .three-container {
    width: 40vh !important;
    height: 40vh !important;
  }
}

  @media only screen and (max-width: 768px) {
  #three-container canvas {
    width: 40vh !important;
    height: 40vh !important;
  }
}

  @media only screen and (max-width: 768px) {
        .button-grid {
        display: flex;
        flex-direction: row;
        grid-template-columns: repeat(6, 1fr) !important; /* 6 gleich große Spalten */ 
        gap: 5px !important; /* Abstand zwischen Buttons */
        width: 100% !important;
        flex: 1;
        margin-right: 0px !important;
        }
}

      @media only screen and (max-width: 768px) {
      .custome-cart-button {
      width: 100% !important;
          }
      }

      @media only screen and (max-width: 768px){
      .farbknopf {
        background-size: cover;
        background-position: center;
        width: 6vh !important;
        height: 75% !important;
        border: 3px solid #fcd408;
        cursor: pointernter;
        border-radius: 4px;
        transition: transform 0.2s ease;
        margin: 5px !important;
        box-shadow: 3px 6px 10px #055af7;
        background-color: yellow;
        cursor: pointer;
      }
     }



.viewer {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-bottom: 30px;
}

.three-container {
  width: 60%;
  height: 800px;
  background: #eee;
  margin-top: 40px;
  margin-left: 20px;
  border: solid 3px #fcd408
}

.color-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 40%;
  height: 800px;
  margin-top: 28px;
}

.farbknopf {
  background-size: cover;
  background-position: center;
  width: 90%;
  height: 100%;
  border: 3px solid #fcd408;
  cursor: pointernter;
  border-radius: 4px;
  transition: transform 0.2s ease;
  margin: 10px;
  margin-right: 50px;
  box-shadow: 3px 6px 10px #055af7;
  background-color: yellow;
  cursor: pointer;
  
}
.farbknopf.aktiv {
  outline: 2px solid #333;
  transform: scale(1.1);
}

/*
#three-container canvas {
  width: 100% !important;
  height: 800px !important;
  display: block !important;
}
*/

.button-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 gleich große Spalten */
  gap: 10px; /* Abstand zwischen Buttons */
  width: 90%;
  margin-right: 50px;
  flex: 1;
}

.custom-cart-button {
  margin-top: 15px;
  padding: 20px 200px;
  background-color: #ffbb00;
  color: white;
  font-size: 20px;
  white-space: nowrap;
  border: black;
  border-radius: 400px;
  cursor: pointer;
  border: solid 3px #fcd408;
  box-shadow: 3px 6px 10px #055af7;
  witdh: 25%;
  cursor: pointer;
}

.custom-cart-button:hover {
        background-color: ##c99504; /* Dunklere Farbe beim Hover */
        transform: scale(1.05); /* Leicht vergrößern */
        cursor: pointer;