.vier-mix-and-match-section-wrapper{max-width:1200px;margin:40px auto;padding:20px;font-family:Arial,sans-serif;color:#333;box-sizing:border-box}.mix-and-match-section{text-align:-webkit-center}.mix-and-match-title{text-align:center;font-size:2.5em;margin-bottom:10px;color:#222}.mix-match-title{text-align:left}.mix-and-match-description{text-align:center;font-size:1.1em;margin-bottom:30px;color:#666;max-width:800px;margin-left:auto;margin-right:auto;line-height:1.5}.mix-and-match-content{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch}.combination-image-wrapper{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;align-content:flex-start;flex-direction:row;flex-wrap:wrap}.visualizer-area{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;height:100%}#combination-image{max-width:100%;max-height:100%;height:auto;width:auto;object-fit:contain;display:block}.combination-image{transition:opacity .3s ease-in-out;opacity:1}.combination-image.fading-out{opacity:0}.filter-button{font-family:var(--font-family-primary);font-size:1.3rem;font-weight:700;white-space:nowrap;transition:all .2s;line-height:1;color:#fff}.filter-button.active{color:var(--color-hover);font-weight:700}.filter-section{border-radius:60px;padding:10px;background-color:#222}.image-overlay-loading{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fffc;display:flex;justify-content:center;align-items:center;font-size:1.2em;color:#555;z-index:10;transition:opacity .3s ease-in-out;opacity:0;pointer-events:none}.image-overlay-loading[style*="display: flex"]{opacity:1;pointer-events:auto}.gender-selector-container,.style-filters-container{margin-bottom:20px}#gender-buttons-container{margin-bottom:50px}.selection-controls{max-width:45%;padding:20px;border-radius:8px;display:flex;flex-direction:column;gap:20px;overflow-y:auto;position:relative}.selection-group h3{font-size:1.4em;margin-bottom:15px;color:#444;padding-bottom:0}.gender-selector-container,.style-filters-container{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;justify-content:center}.button{padding:10px 20px;border:1px solid #ccc;background-color:#f0f0f0;color:#555;cursor:pointer;font-size:1em;border-radius:5px;transition:all .2s ease-in-out;text-decoration:none;display:inline-block;text-align:center;white-space:nowrap}.button:hover{background-color:#e0e0e0;border-color:#bbb;color:#333}.button.active{background-color:#007bff;color:#fff;border-color:#007bff;font-weight:700}.button.active:hover{background-color:#0056b3;border-color:#0056b3}.options-container{display:flex;flex-wrap:nowrap;gap:15px;max-height:400px;overflow-y:auto;overflow-x:auto;border:1px solid #eee;padding:15px;border-radius:5px;-webkit-overflow-scrolling:touch;scrollbar-width:initial;scrollbar-color:#888 #f1f1f1}.options-container::-webkit-scrollbar{height:8px}.options-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.options-container::-webkit-scrollbar-thumb{background:#888;border-radius:10px}.options-container::-webkit-scrollbar-thumb:hover{background:#555}.spinner{border:4px solid rgba(0,0,0,.1);border-left-color:#007bff;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.image-overlay-loading{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:10px}.option-item{flex-grow:0;flex-shrink:0;flex-basis:calc((100% - (var(--items-per-row, 4) - 1) * 15px) / var(--items-per-row, 4));min-width:120px;border:2px solid #eee;border-radius:8px;padding:10px;text-align:center;cursor:pointer;transition:all .2s ease-in-out;background-color:#fff;display:flex;flex-direction:column;justify-content:space-between;position:relative}.selection-group-bottom{margin-top:30px}.option-item:hover{border-color:#007bff;box-shadow:0 4px 8px #007bff33;transform:translateY(-2px)}.option-item.active{border-color:#28a745;box-shadow:0 4px 10px #28a7454d;transform:scale(1.02)}.option-item.active:after{content:"\2713";position:absolute;top:-10px;right:-10px;background-color:#28a745;color:#fff;border-radius:50%;width:24px;height:24px;display:flex;justify-content:center;align-items:center;font-size:1.2em;font-weight:700}.option-item img{max-width:100%;height:auto;border-radius:4px;margin-bottom:10px;pointer-events:none}.option-item-title{font-size:.9em;color:#333;font-weight:700;margin-bottom:5px;flex-grow:1}.product-meta-integrations{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:5px;padding:0 5px}.wishlist-button-wrapper .add-to-wishlist-btn{background:none;border:none;font-size:1.5em;cursor:pointer;color:#ccc;transition:color .2s;line-height:1}.wishlist-button-wrapper .add-to-wishlist-btn:hover{color:#e74c3c}.product-rating-wrapper .stars{color:#f39c12;font-size:1.2em;line-height:1}.mix-and-match-actions{display:flex;flex-direction:column;gap:15px;margin-top:20px;padding-top:20px;border-top:1px solid #eee;align-items:center}.current-price{font-size:24px;font-weight:800;text-align:center;margin-top:17px;color:var(--product-color-price)}.button--primary{background-color:#28a745;border-color:#28a745;color:#fff;width:100%;max-width:300px}.button--primary:hover{background-color:#218838;border-color:#1e7e34}.button--primary:disabled{background-color:#ccc;border-color:#bbb;cursor:not-allowed}.button--secondary{background-color:#f8f9fa;border-color:#007bff;color:#007bff;width:100%;max-width:300px}.button--secondary:hover{background-color:#e2e6ea;color:#0056b3;border-color:#0056b3}.mix-and-match-content{display:flex;flex-wrap:wrap;width:80%}.mobile-navigation-controls{display:none;flex-direction:column;gap:15px;margin-top:20px}.nav-buttons-group{justify-content:space-around;gap:10px;background-color:#faebd7}.nav-button{background-color:var(--color-button);color:#fff;border:none;padding:12px 20px;border-radius:5px;cursor:pointer;font-size:1em;flex:1;transition:background-color .2s ease;margin:5px;font-family:cursive}.nav-button:hover{background-color:#0056b3}.nav-button:disabled{background-color:#616161;cursor:not-allowed}@media (max-width: 992px){.mix-and-match-content{flex-direction:column;align-items:center}.visualizer-area,.selection-controls{width:100%;max-width:600px;height:auto}}@media (max-width: 768px){.vier-mix-and-match-section-wrapper{padding:15px;margin:20px auto}.mix-and-match-title{font-size:2em;margin-bottom:15px}.mix-and-match-description{font-size:1em;margin-bottom:20px}.selection-group h3{font-size:1.2em}.option-item{width:calc(50% - 10px)}.selection-controls{display:block}.mix-and-match-content{display:flex;flex-wrap:wrap;justify-content:flex-start}}@media (max-width: 480px){.option-item{width:100%}.button{font-size:.9em;padding:8px 15px}.mix-and-match-actions .button{font-size:1em}.selection-controls{display:block}.mix-and-match-content{display:flex;flex-wrap:wrap;justify-content:flex-start;width:90%;margin-top:40px;position:static}.top-nav-buttons{display:flex;justify-content:space-around}.nav-label{width:-webkit-fill-available;text-align:center;font-size:x-large;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:center;justify-content:center;align-items:center;font-weight:bolder;font-family:var(--font-family-primary)}.bottom-nav-buttons{display:flex;justify-content:space-around}}@media (max-width: 768px){.mobile-navigation-controls{display:flex!important}.desktop-controls-wrapper{display:none}.selection-controls{padding-top:15px}.mix-and-match-actions{margin-top:38px}.image-nav-button{font-size:1.5rem;padding:8px}.top-nav-buttons{display:flex;justify-content:space-around}.nav-label{width:-webkit-fill-available;text-align:center;font-size:large;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:center;justify-content:center;align-items:center;font-weight:400;font-family:var(--font-family-primary)}.bottom-nav-buttons{display:flex;justify-content:space-around}#gender-buttons-container{margin-bottom:-60px;position:relative;z-index:1}}@media (min-width: 769px){.mobile-navigation-controls{display:none}.desktop-controls-wrapper{display:block}}@media (min-width: 900px){.option-item{flex-grow:0;flex-shrink:0;flex-basis:calc((100% - (var(--items-per-row, 4) - 1) * 15px) / var(--items-per-row, 4));min-width:107px;border:2px solid #eee;border-radius:8px;padding:10px;text-align:center;cursor:pointer;transition:all .2s ease-in-out;background-color:#fff;display:flex;flex-direction:column;justify-content:space-between;position:relative;height:}}@media (min-width: 1200px){.option-item{flex-grow:0;flex-shrink:0;flex-basis:calc((100% - (var(--items-per-row, 4) - 1) * 15px) / var(--items-per-row, 4));min-width:107px;border:2px solid #eee;border-radius:8px;padding:10px;text-align:center;cursor:pointer;transition:all .2s ease-in-out;background-color:#fff;display:flex;flex-direction:column;justify-content:space-between;position:relative;height:}.mix-and-match-content{display:flex;flex-wrap:wrap;width:78%}}@media (min-width: 1600px){.mix-and-match-content{display:flex;flex-wrap:wrap;width:84%}}.image-nav-button{position:absolute;top:50%;transform:translateY(-50%);background:#00000080;border:none;color:#fff;font-size:2rem;cursor:pointer;z-index:20;padding:10px;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:background-color .3s ease,opacity .3s ease}.image-nav-button:hover:not([disabled]){background:#000000b3}.image-nav-button.prev-button{left:10px}.image-nav-button.next-button{right:10px}.image-nav-button:disabled{opacity:.3;cursor:not-allowed}.modal-overlay{display:none;position:fixed;z-index:1001;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000000b3;justify-content:center;align-items:center}.modal-content{background-color:#fefefe;margin:auto;padding:20px;border:1px solid #888;width:90%;max-width:600px;border-radius:10px;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;position:relative;transform:translateY(-50px);transition:transform .3s ease-out}.modal-overlay.active .modal-content{transform:translateY(0)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid #eee}.modal-header .modal-title{margin:0;font-size:1.5em;color:#333}.modal-body{padding:20px 0}.modal-footer{padding-top:10px;border-top:1px solid #eee;text-align:right}.modal-product-item{display:flex;flex-direction:column;align-items:center;margin-bottom:20px}.modal-product-item .product-title{font-size:1.2em;font-weight:700;margin-bottom:10px}.modal-product-item .product-image-container{width:150px;height:150px;margin-bottom:15px}.modal-product-item .product-image-container img{width:100%;height:100%;object-fit:contain;border-radius:5px}.product-variants-container{display:flex;gap:10px}.product-variants-container label{display:block;cursor:pointer;background-color:#eee;padding:8px 15px;border-radius:5px;transition:background-color .2s ease}.product-variants-container label:hover{background-color:#ddd}.product-variants-container input[type=radio]{display:none}.product-variants-container input[type=radio]:checked+span{background-color:#000;color:#fff;border:1px solid #000}.close-modal-button{color:#aaa;font-size:28px;font-weight:700;border:none;background:none;cursor:pointer}.close-modal-button:hover,.close-modal-button:focus{color:#000;text-decoration:none;cursor:pointer}.variant-option.active{border:2px solid #000;background-color:#f0f0f0}.product-variants-container{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;margin-top:15px}.variant-option{position:relative;display:inline-flex;justify-content:center;align-items:center;padding:8px 16px;min-width:40px;border:1px solid #ddd;border-radius:20px;background-color:#fff;cursor:pointer;font-size:14px;font-weight:500;text-align:center;color:#333;transition:all .2s ease}.variant-option:hover{border-color:#999}.variant-option.active{background-color:#333;color:#fff;border-color:#333}.variant-option input[type=radio]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}
/*# sourceMappingURL=/cdn/shop/t/2/assets/mix-and-match.css.map */