@charset "UTF-8";html, body {margin: 0;padding: 0;position: relative;font-family: "DM Sans", "Arial", sans-serif;font-size: 16px;height: auto;overflow: auto;}#configurator {display: flex;flex-wrap: wrap;min-height: 600px;margin-bottom: 4rem;max-width: 80rem;margin: auto;}#preview {flex: 2;min-height: 400px;position: relative;}#preview-images {height: 100%;position: relative;aspect-ratio: 1/1;max-width: 53rem;}#preview-images img {height: 100%;width: 100%;max-width: 100%;object-fit: contain;position: absolute;}.sidebar-title {font-size: 20px;font-weight: bold;letter-spacing: 1px;color: #444;margin: 30px 0 10px 0;text-transform: uppercase;}.field-header-content {display: flex;align-items: center;justify-content: space-between;gap: 15px;background: #a66b29;padding: 8px 12px;border-radius: 3px;color: #fff;cursor: pointer;}.field-header-content .field-icon {width: 40px;height: 40px;object-fit: contain;}.field-header-content .field-label {font-weight: 600;flex-grow: 1;}.field-header-content .field-arrow {font-size: 14px;transition: transform 0.3s ease;}.field-header-content .field-arrow.open {transform: rotate(90deg);}.color-option {display: flex;align-items: center;gap: 8px;}.color-swatch {width: 20px;height: 20px;border-radius: 50%;border: 1px solid #ccc;}.selection-label {display: flex;align-items: center;gap: 6px;margin: 12px 0;font-weight: 500;cursor: pointer;}.selection-swatch {width: 16px;height: 16px;border-radius: 50%;border: 1px solid #ccc;}#sideNav {flex: 1;min-height: 400px;flex-direction: column;display: flex;overflow-y: auto;background-color: #f5f5f5;}#sideNav .fields {flex: 1;overflow-y: scroll;max-height: 100%;padding: 10px;}#sideNav .fields .field {margin-bottom: 10px;border-top: 2px solid #e8e3e3;padding-top: 10px;}#sideNav .fields .field .field-header {cursor: pointer;margin-bottom: 20px;}#sideNav .fields .field .field-label {font-size: 18px;color: rgb(255, 255, 255);}#sideNav .fields .field .selection-label {font-weight: bold;color: #1d1d1d;font-size: 1.1rem;}#sideNav .fields .field .options {display: grid;grid-template-columns: repeat(2, 1fr);gap: 8px 12px;}#sideNav .fields .field .options .option {cursor: pointer;}#sideNav .fields .field.text .options .option {flex: 1;padding: 10px;background-color: rgb(246, 246, 246);border: 2px solid rgb(246, 246, 246);border-radius: 10px;}#sideNav .fields .field.text .options .option.active {border: 2px solid #388659;background-color: #f3f8f5;}#sideNav .fields .field.text .options .option .label {text-align: center;}#sideNav .fields .field.color .options .option {padding: 4px 0;}#sideNav .fields .field.color .options .option.active {background-color: #e7e6e6;}#sideNav .fields .field .options .option .color {border-radius: 50%;width: 45px;height: 45px;border: solid 2px #797979;}#sideNav .fields .field.image .options .option {padding-bottom: 8px;}#sideNav .fields .field.image .options .option.active {border-bottom: 3px solid #388659;padding-bottom: 5px;}#sideNav .fields .field .options .option .image {border-radius: 50%;width: 45px;height: 45px;background-size: contain;}@media (max-width: 768px) {#configurator {display: block;}#preview {height: 300px;}#sideNav {height: auto;}#preview-images {height: 100%;position: relative;}}@media only screen and (min-width: 992px) {#sideNav {max-width: 500px;padding-left: 2rem;}}@media only screen and (max-width: 991px) {#preview, #sideNav {height: 50%;padding: 0 10px;}#configurator {display: block;}#sideNav .fields {margin: 0 50px 15px 50px;}}@media only screen and (max-width: 575px) {#sideNav .fields {margin: 10px;max-height: 20rem;padding: 0;}.sidebar-title {margin: 0 10px 0;}}.lds-ring {display: inline-block;position: fixed;left: 50%;top: 50%;margin: -40px 0 0 -40px;width: 80px;height: 80px;}.lds-ring div {box-sizing: border-box;display: block;position: absolute;width: 64px;height: 64px;margin: 8px;border: 8px solid #01bf81;border-radius: 50%;animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;border-color: #01bf81 transparent transparent transparent;}.lds-ring div:nth-child(1) {animation-delay: -0.45s;}.lds-ring div:nth-child(2) {animation-delay: -0.3s;}.lds-ring div:nth-child(3) {animation-delay: -0.15s;}@keyframes lds-ring {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}