.product-3d-template {
	/* General styles */
	h1.page-title {
		color: #000;
		font-size: 20px;
		font-weight: 700;
		text-transform: uppercase;
		margin-bottom: 24px;
	}
	.yellow-button,
	#product-addtocart-button,
	#product-updatecart-button {
		border: 0;
		height: 64px;
		padding: 22px 10px;
		border-radius: 6px;
		background: #fff60b;
		color: #000;
		font-size: 16px;
		font-weight: 700;
		width: 100%;
		margin: 0;

		&:hover {
			background: #fffa6b;
		}
		&:active {
			background: #d6cf00;
		}
	}
	.grey-button {
		background: #AFAFAF;
	}
	.btn-container {
		display: flex;
		gap: 30px;
		margin: 30px 0 0;
	}
    .swatch-input {
        left: -1000px;
        position: absolute;
        visibility: hidden;
    }    
    .quantity-control {
        display: none;
        visibility: hidden;
    }
	input[type="file"] {
		background-color: #fff;
		transition: border-color 0.25s ease-in-out;
		margin-bottom: 10px;
		&::file-selector-button {
			padding: 12px 24px 12px 45px;
			border-radius: 6px;
			border-width: 0;
			background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj48cGF0aCBkPSJNOSAxNmg2di02aDRsLTctNy03IDdoNHY2Wm0tNCAyaDE0djJINXYtMloiIGZpbGw9IiNmZmYiLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwaDI0djI0SDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+);
			background-color: #000000;
			background-repeat: no-repeat;
			background-position: 18px center;
			background-size: 24px;
			color: #fff;
			transition: all 0.25s ease-in-out;
			cursor: pointer;
			margin-right: 10px;
			font-size: 16px;
			font-weight: 700;
			line-height: normal;
		}
		&:hover {
			&::file-selector-button {
				background-color: #2f2e2e;
			}
		}
	}
	/* Progress steps */
	.progress-steps {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40px;
		margin: auto;
		width: 100%;
		gap: 5px;
		max-width: 1050px;
		.step {
			text-align: center;
			flex: 1;
			color: #000;
		}

		.label {
			margin-bottom: 5px;
			font-size: 14px;
			font-weight: 700;
		}

		.bar {
			height: 8px;
			border-radius: 90px;
			background-color: #d3d3d3;
			margin: 12px 0;
		}

		.step.active .bar {
			background-color: #202020;
		}
		.step.completed .bar {
			background-color: #22c55e;
		}

		.title {
			font-weight: 700;
			font-size: 14px;
			text-transform: uppercase;
		}
		button#nextStepArrow,
		button#prevStepArrow {
			content: "";
			background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMzAgMzMwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBkPSJNMzI1LjYwNyA3OS4zOTNjLTUuODU3LTUuODU3LTE1LjM1NS01Ljg1OC0yMS4yMTMuMDAxbC0xMzkuMzkgMTM5LjM5M0wyNS42MDcgNzkuMzkzYy01Ljg1Ny01Ljg1Ny0xNS4zNTUtNS44NTgtMjEuMjEzLjAwMS01Ljg1OCA1Ljg1OC01Ljg1OCAxNS4zNTUgMCAyMS4yMTNsMTUwLjAwNCAxNTBhMTQuOTk5IDE0Ljk5OSAwIDAgMCAyMS4yMTItLjAwMWwxNDkuOTk2LTE1MGM1Ljg1OS01Ljg1NyA1Ljg1OS0xNS4zNTUuMDAxLTIxLjIxM3oiLz48L3N2Zz4=);
			background-repeat: no-repeat;
			background-size: 100%;
			background-color: transparent;
			border: 0;
			width: 18px;
			height: 18px;
			display: inline-block;
			transform: rotate(-90deg);
			transition: all ease 0.3s;
			padding: 0;
			margin-left: 30px;
			&[disabled] {
				opacity: 0;
			}
			@media (max-width: 992px) {
				margin-left: 20px;
			}
		}

		button#prevStepArrow {
			transform: rotate(90deg);
			margin-right: 30px;
			margin-left: 0;
			@media (max-width: 992px) {
				margin-right: 20px;
			}
		}
	}
	/* Player Details */
	.player-details-wrapper {
		margin-bottom: 50px;

		&:not(.last-step) {
			display: none;
		}
		h3 {
			font-size: 16px;
			font-weight: 700;
			margin: 20px 0 30px;
		}
		.name_only .field:nth-child(2),
		.number_only .field:nth-child(1),
        .none .field:nth-child(2),
        .none .field:nth-child(1),
        .not_required .field:nth-child(2),
        .not_required .field:nth-child(1) {
			display: none;
		}
		.player-details-inner {
			display: flex;
			gap: 30px;

		}

		.player-details-inner .field {
			flex: 1;
		}
		.error-message {
			display: none;
			font-size: 10px;
			margin-top: 5px;
			color: #f00;
		}
		.player-details-inner .field.error {
			color: #f00;
			label {
				color: #f00;
			}
			select,
			input {
				border-color: #f00;
			}
			.error-message {
				display: block;
			}
		}
		#player-details-container {
			display: flex;
			flex-direction: column;
			gap: 20px;
		}
	}
	.player-details {
		position: relative;
		h4 {
			font-size: 16px;
			font-weight: 400;
			color: #000;
			margin: 0 0 10px;
		}
		label {
			font-size: 11px;
			font-weight: 400;
			color: #000;
			margin-bottom: 8px;
			display: block;
			line-height: normal;
		}
		input,
		select {
			padding: 15px;
			border: 1px solid #343434;
			border-radius: 6px;
			height: 50px;
			line-height: normal;
		}
		.player-detail-field {
			text-transform: uppercase;
		}
		button.remove-player-button {
            display: none;
			width: auto;
            margin-top: 30px;
            font-size: 14px;
            text-transform: uppercase;
            height: 35px;
            padding: 0;
            aspect-ratio: 1 / 1;
            align-items: center;
            justify-content: center;
            background: #f00;
            line-height: 0;
            border-radius: 50%;
			svg {
				width: 23px;
			}
			span {
				display: none;
			}
			@media (max-width: 992px) {
                display: flex;
				margin: 0;
				height: 36px;
				border-radius: 6px;
				aspect-ratio: initial;
				grid-column: 1 / 3;
				svg {
					display: none;
				}
				span {
					display: block;
				}
			}
		}
		&:first-child {
			/* @media (min-width: 992px) {
				padding-right: 80px;
			} */
		}
	}
	/* Product Options */
	.product-info-main button {
		margin-top: 24px;
		.fieldset {
			margin-bottom: 0;
		}
	}
    .btn-container button {
        margin: 0;
    }
	.product-options-wrapper {
		[data-role="title"] {
			font-size: 16px;
			text-transform: uppercase;
			color: #000;
			display: flex;
			align-items: center;
			cursor: pointer;
			margin-bottom: 0;
			padding: 22px 30px;

			&:after {
				content: "";
				background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMzAgMzMwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBkPSJNMzI1LjYwNyA3OS4zOTNjLTUuODU3LTUuODU3LTE1LjM1NS01Ljg1OC0yMS4yMTMuMDAxbC0xMzkuMzkgMTM5LjM5M0wyNS42MDcgNzkuMzkzYy01Ljg1Ny01Ljg1Ny0xNS4zNTUtNS44NTgtMjEuMjEzLjAwMS01Ljg1OCA1Ljg1OC01Ljg1OCAxNS4zNTUgMCAyMS4yMTNsMTUwLjAwNCAxNTBhMTQuOTk5IDE0Ljk5OSAwIDAgMCAyMS4yMTItLjAwMWwxNDkuOTk2LTE1MGM1Ljg1OS01Ljg1NyA1Ljg1OS0xNS4zNTUuMDAxLTIxLjIxM3oiLz48L3N2Zz4=);
				background-repeat: no-repeat;
				background-size: 100%;
				width: 17px;
				height: 17px;
				display: inline-block;
				margin-left: auto;
				transform: rotate(-90deg);
				transition: all ease 0.3s;
			}
		}

		[data-role="content"] {
			width: 100% !important;
			padding: 0 30px;
			display: flex !important;
			box-sizing: border-box;
			visibility: hidden;
			height: 0;
			overflow: hidden;
			transition: all 0.3s ease-in-out;
			overflow-y: clip;
		}
		.field .control {
			@media (max-width: 992px) {
				padding: 0 20px;
			}
		}		
		.field.active .control {
			visibility: visible;
			height: auto;
			opacity: 1;
			pointer-events: auto;
			@media (max-width: 992px) {
				padding: 0 20px;
			}
		}
		.field.active > .label:after {
			transform: rotate(0);
		}
		.field.file .control {
			flex-direction: column;
			.file-warning {
				order: 9;
				color: #f00;
				font-size: 10px;
			}		
			&.edit-control {
				flex-direction: row;
    			gap: 20px;
    			margin-bottom: 10px;
				> span {
					font-weight: bold;
				}
			}
			button.remove-file-btn {
				margin: 10px 0;
				height: 45px;
				padding: 0;
			}			
		}
		.options-list {
			display: flex;
			gap: 24px;
			flex-direction: column;
			label {
				font-size: 16px;
				font-weight: 400;
				color: #000;
			}
			.field.choice {
				display: flex;
				align-items: center;
				gap: 12px;
				margin: 0;
				line-height: 20px;
				input[type="radio"] {
					margin: 0;
					display: flex;
					width: 22px;
					height: 22px;
					align-items: center;
					gap: 10px;
					appearance: none;
					background: #f1f1f1;
					border-radius: 12px;
					cursor: pointer;
					margin: 4px;
					flex-shrink: 0;
					&:checked {
						background-color: #000;
						border: 4px solid #f1f1f1;
						outline: 1px solid #000;
					}
				}
			}
		}
	}
	.custom-collapsible-option[data-option-id="optional_embroidery"] {
		margin: 20px 0;
		> .label {
			padding: 0;
			text-transform: none;
			margin-bottom: 15px;
		}

		.label:after {
			display: none;
		}

		.control {
			padding: 0;
			display: flex !important;
			visibility: visible !important;
		}

		.options-list {
			flex-direction: column;
			display: flex;
		}	
	}
	.custom-collapsible-option.radio .control {
    	flex-direction: column;
	}

	.field-error, div.mage-error[generated] {
		margin-top: 15px;
	}
	/* .custom-collapsible-option[data-option-id="shorts_customization"] .options-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
	} */
	#product_addtocart_form {
		.product-options-wrapper .fieldset > .field {
			display: none;
			margin: 0;
		}
		.cost-item-wrapper {
			display: none;
			margin-bottom: 30px;
			h3 {
				font-size: 16px;
				font-weight: 700;
				margin: 0 0 24px;
			}
			.cost-item {
				display: flex;
                gap: 24px;
                margin-bottom: 15px;
                color: #000;
                font-size: 16px;
			}
			.cost-item .item-name {
				margin-right: auto;
			}	
			.cost-item .item-price {
				width: 70px;
				text-align: right;
			}
			.cost-total {
				margin: 14px 0 0;
				padding: 24px;
				background: #F1F1F1;
				display: flex;
				justify-content: space-between;
				font-weight: 700;
				color: #000;
				font-size: 17px;
			}				
		}
		.product-options-bottom .field.qty,
        .price-box {
			visibility: hidden;
            height: 0;
		}
		.btn-container {
			@media (max-width: 992px) {
				flex-direction: column-reverse;
                gap: 12px;
			}
		}	
        #product-addtocart-button {
            display: none;
        }
		&.step-1 .product-options-wrapper .fieldset > .field:nth-of-type(-n + 4) {
			display: block;
		}
		&.step-2
			.product-options-wrapper
			.fieldset
			> .field:nth-of-type(n + 5):nth-of-type(-n + 11) {
			display: block;
		}
		&.step-3 #product-addtocart-button,
		&.step-3 .product-options-wrapper .fieldset > .field:nth-of-type(n + 12) {
			display: block;
		}
		&.step-3 #nextStep {
			display: none;
		}
		&.step-3 .cost-item-wrapper {
			display: flex;
			flex-direction: column;
		}
		&.step-3 .product-options-wrapper {
			display: none;
		}
	}
    .mage-error {
        font-weight: bold;
        color: #e02b27;
        font-size: 12px;
    }    
	.custom-option-swatch {
		display: flex;
        flex-direction: column;
		flex-wrap: wrap;
		gap: 10px;
        position: relative;
		.swatch-option-title {
			width: 100%;
			font-size: 14px;
			color: #000;
		}
		.swatch-options-inner {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
		}
		.swatch-option {
			border-radius: 100%;
			margin: 0;
			aspect-ratio: 1 / 1;
			height: 32px;
			min-width: auto;
			border: 1px solid #d3d3d3;
			padding: 0;
			outline-offset: 3px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 4px;
		}

		.swatch-option:not(.disabled):hover {
			outline: 1px solid #000;
		}

		.swatch-option.selected,
        .swatch-option.active {
			outline: 1px solid #000000;
		}

		.swatch-option.selected:after,
        .swatch-option.active:after {
			content: "";
			background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS43MDcgMTQuMjkzIDE5IDVsMS40MTQgMS40MTRMOS43MDcgMTcuMTIxIDQgMTEuNDE0IDUuNDE0IDEweiIvPjwvc3ZnPg==);
			background-repeat: no-repeat;
			width: 22px;
			aspect-ratio: 1 / 1;
			display: inline-block;
			margin-top: 2px;
		}
	}

	/* Loading icon */
	.loading-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #cccccc85;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		z-index: 999;
	}
	.loading-ring {
		/* change color here */
		color: #000;
	}
	.loading-ring,
	.loading-ring:after {
		box-sizing: border-box;
	}
	.loading-ring {
		display: inline-block;
		width: 80px;
		height: 80px;
	}
	.loading-ring:after {
		content: " ";
		display: block;
		width: 64px;
		height: 64px;
		margin: 8px;
		border-radius: 50%;
		border: 6.4px solid currentColor;
		border-color: currentColor transparent currentColor transparent;
		animation: loading-ring 1.2s linear infinite;
	}
	@media (max-width: 992px) {
		.product-3d-top-wrapper {
			order: -1;
			overflow: hidden;
			margin-right: -20px;
			margin-left: -20px;
		}
		.progress-steps {
			padding: 0 20px;
			width: auto;
			margin-bottom: 30px;
			transition: all ease 0.3s;
			.step:not(.active) {
				display: none;
			}
		}
		.player-details-wrapper {
			padding: 0 20px;
			.player-details-inner {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 16px;
				.field:first-child {
					grid-column: 1/3;
				}
			}
			.btn-container {
				gap: 16px;
			}
		}
		.yellow-button {
			padding: 22px 10px;
		}
		.product-info-main {
			margin-top: 30px;
		}
		h1.page-title {
			text-align: center;
		}
		.product-options-wrapper {
			[data-role="title"] {
				position: relative;
				padding: 22px 20px;
				display: block;
				padding-right: 40px;
				&:after {
					position: absolute;
					right: 24px;
					top: 0;
					bottom: 0;
					margin: auto;
				}
			}
		}
		.product-info-main button {
			margin-top: 0px;
		}
	}
}

@keyframes loading-ring {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}