.variant-modal {display: none;position: fixed;z-index: 99999;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);align-items: center;justify-content: center;}.variant-modal-content {background-color: #fefefe;border-radius: 8px;width: 90%;max-width: 500px;box-shadow: 0 4px 8px rgba(0,0,0,0.2);overflow: hidden;display: flex;flex-direction: column;}.variant-modal-header {padding: 15px;border-bottom: 1px solid #eee;display: flex;justify-content: space-between;align-items: center;}.variant-modal-header h4 {margin: 0;font-size: 18px;font-weight: bold;}.close-variant-modal {cursor: pointer;font-size: 24px;font-weight: bold;}.variant-modal-body {padding: 15px;max-height: 60vh;overflow-y: auto;}.variant-modal-footer {padding: 15px;border-top: 1px solid #eee;text-align: right;}.variant-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 10px;}.variant-option {border: 1px solid #ddd;border-radius: 5px;padding: 5px;cursor: pointer;display: flex;align-items: center;transition: all 0.2s;}.variant-option:hover {border-color: #d70018;}.variant-option.selected {border-color: #d70018;background-color: #fff0f0;position: relative;}.variant-option.selected::after {content: '\f00c';font-family: 'FontAwesome';position: absolute;top: 5px;right: 5px;color: #d70018;font-size: 12px;}.var-img {width: 50px;height: 50px;object-fit: cover;margin-right: 10px;}.var-info h5 {font-size: 13px;margin: 0;font-weight: bold;}.var-price {font-size: 12px;color: #d70018;}