/** Shopify CDN: Minification failed

Line 383:0 Expected "}" to go with "{"

**/
/* Algemene basisstijl */
body {
  font-family: 'Montserrat', sans-serif;
  background-color: #f5f5f5;
  color: #333;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

/* Container styling */
.container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 20px auto;
  max-width: 1600px;
}

/* Configurator layout */
.sit-stand-configurator {
  display: flex;
  gap: 20px;
  background-color: #ffffff;
  padding: 20px;
  max-width: 1600px;
  margin: 20px auto;
  border: 1px solid #e0e0e0;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

/* Viewer container */
.viewer-container {
  flex: 1;
  background-color: #ffffff;
  padding: 20px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  height: 750px; /* Reduced from 1000px to 750px (25% smaller) */
  position: relative;
}

/* Iframe styling */
iframe#api-frame {
  width: 100%;
  height: 100%;
  border: none;
}

/* Screenshot Button Overlay */
.screenshot-btn-overlay {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 100;
}

/* Screenshot Icon Styling */
.screenshot-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.screenshot-btn-overlay:hover .screenshot-icon {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Configurator controls */
.controls {
  width: 400px;
  background-color: #ffffff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

/* Titels en kopteksten styling */
h2, h3 {
  font-family: 'Montserrat', sans-serif;
  color: #333;
  margin-bottom: 20px;
}

h2 {
  font-size: 18px;
  font-weight: 600;
}

h3 {
  font-size: 16px;
  font-weight: 400;
}

/* Algemene tekst in configurator (zoals labels) */
label, p {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #333;
  margin: 0 0 15px;
}

/* Dropdown styling */
select {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  padding: 8px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Maak de tekst in het monitorbeugel dropdown menu kleiner */
#monitorBracketDropdown {
  font-size: 12px;
  margin-top: 0px;
}

/* Algemene knop styling */
button {
  font-family: 'Montserrat', sans-serif;
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
  font-weight: 600;
}

button:hover {
  background-color: #45a049;
}

/* Button-group layout */
.button-group {
  display: flex;
  gap: 20px;
  justify-content: flex-start;
  margin-top: 20px;
}

/* Specifieke stijl voor Toevoegen aan winkelwagen-knop */
.cart-button {
  background-color: #007bff;
}

.cart-button:hover {
  background-color: #0056b3;
}

/* Prijs weergave */
#priceDisplay h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 14.4px;
  font-weight: 600;
  margin-bottom: 10px;
}

#priceValue {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

/* Texture selectie layout */
.texture-selection {
  display: flex;
  flex-direction: column;
  gap: 30px;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 5px;
}

/* Wrapper voor knop en tekst */
.texture-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

#whiteOakButton {
  margin-bottom: 20px;
}

/* Ronde knoppen */
.circle-button {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  display: inline-block;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Achtergrondafbeeldingen voor texture-knoppen */
#oakButton {
  background-image: url('/cdn/shop/files/texture_1.jpg?v=1738676120');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#whiteOakButton {
  background-image: url('/cdn/shop/files/texture_2.jpg?v=1738676118');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Hover-effecten voor ronde knoppen */
.circle-button:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Styling voor tekst naast de knoppen */
.texture-option p {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

/* Styling voor samenvatting */
#summaryDisplay h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 14.4px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.summary-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #555;
}

/* Extra ruimte tussen kabelgoot en hoeveelheid input */
#cableTrayCheckbox {
  margin-bottom: 30px;
}

/* Aangepaste styling voor de hoeveelheid (aantal) input */
#quantityInput {
  margin-top: 20px;
  width: 8ch;
  text-align: center;
}

/* Responsive styling */
@media (max-width: 768px) {
  .sit-stand-configurator {
    flex-direction: column;
    padding: 0;
  }
  .viewer-container {
    height: auto;
  }
}

/* =============================== */
/* Aangepaste CSS voor knoppen    */
/* =============================== */

/* Aangepaste CSS voor de add-to-cart knop: VOEG TOE AAN WINKELWAGEN */
#add-to-cart-button {
  background-color: #000000;
  color: #ffffff;
  border: 2px solid #000000;
  border-radius: 4px;
  font-size: 18px;
  padding: 12px 24px;
  width: 100%;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  font-weight: 400;
  text-align: left;
}

#add-to-cart-button:hover {
  background-color: #333333;
  border-color: #333333;
}

/* Aangepaste CSS voor de screenshot knop met doorzichtige achtergrond */
#take-screenshot {
  background-color: transparent;
  border: none;
  border-radius: 50%;
  padding: 8px;
  transition: box-shadow 0.3s ease;
}

#take-screenshot:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Optioneel: aanpassen van het screenshot-icoon */
.screenshot-icon {
  width: 30px;
  height: 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* =============================== */
/* Custom Dropdown Styling        */
/* =============================== */
.custom-dropdown {
  position: relative;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  padding: 8px;
  box-sizing: border-box;
}
.custom-dropdown .selected-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.custom-dropdown .selected-option img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  margin-right: 8px;
}
.custom-dropdown .selected-option span {
  font-size: 12px;
  vertical-align: middle;
}
.custom-dropdown .selected-option .arrow {
  margin-left: auto;
  font-size: 12px;
}
.custom-dropdown .options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  border-top: none;
  background-color: #fff;
  z-index: 10;
  display: none;
  max-height: 200px;
  overflow-y: auto;
}
.custom-dropdown .option {
  display: flex;
  align-items: center;
  padding: 8px;
  font-size: 12px;
}
.custom-dropdown .option img {
  width: 30px;
  height: 30px;