.nalgene-customizer--button {
	text-align: center;
	align-items: center;
	align-self: center;

	> a,
	> button {
		--color--brand-black: #000;
		--color--white: #FFF;
		--color-stop-1: var(--color--brand-black);
		--color-stop-2: var(--color--brand-black);
		--color-stop-3: var(--color--brand-black);
		--color-stop-4: var(--color--brand-black);
		--color-stop-5: var(--color--brand-black);
		--overlay-inset: 2px;
		
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		padding: 0;
		border-radius: 4px;
		background: var(--color--brand-black);
		background: linear-gradient(51deg, var(--color--brand-black) 0%, var(--color--brand-black) 100%);
		background: linear-gradient(51deg, var(--color-stop-1) 0%, var(--color-stop-2) 19.84%, var(--color-stop-3) 46.15%, var(--color-stop-4) 72.73%, var(--color-stop-5) 99%);
		text-decoration: none;
		transition: --color-stop-1 0.5s ease-in-out, --color-stop-2 0.5s ease-in-out, --color-stop-3 0.5s ease-in-out, --color-stop-4 0.5s ease-in-out, --color-stop-5 0.5s ease-in-out;

		/* stylelint-disable property-no-unknown */
		@oroperty --color-stop-1 {
			sytnax: '<color>';
			inherits: false;
			initial-value: var(--color--brand-black);
		}
		@oroperty --color-stop-2 {
			sytnax: '<color>';
			inherits: false;
			initial-value: var(--color--brand-black);
		}
		@oroperty --color-stop-3 {
			sytnax: '<color>';
			inherits: false;
			initial-value: var(--color--brand-black);
		}
		@oroperty --color-stop-4 {
			sytnax: '<color>';
			inherits: false;
			initial-value: var(--color--brand-black);
		}
		@oroperty --color-stop-5 {
			sytnax: '<color>';
			inherits: false;
			initial-value: var(--color--brand-black);
		}
		/* stylelint-enable property-no-unknown */

		&:hover {
			--color-stop-1: rgba(0,114,206,1);
			--color-stop-2: rgba(123,28,199,1);
			--color-stop-3: rgba(250,60,0,1);
			--color-stop-4: rgba(250,200,0,1);
			--color-stop-5: rgba(0,206,144,1);
			--overlay-inset: 4px;
		}

		&::before {
			display: none;
		}

		&::after {
			position: absolute;
			z-index: 1;
			display: block;
			border-radius: 4px;
			background-color: var(--color--white);
			content: '';
			inset: var(--overlay-inset);
			pointer-events: none;
			will-change: top, left, bottom, right, inset;
			transition: all 0.3s ease-in-out;
		}

		.text-wrapper {
			position: relative;
			z-index: 2;
			display: flex;
			padding: 13px 24px;
			color: rgba(29, 29, 29, 1);
			font-weight: 700;
			line-height: 1.5;
			gap: 6px;

			&::before {
				position: relative;
				top: 1px;
				left: auto;
				width: 24px;
				height: 24px;
				transform: none;
				opacity: 1;
				background-color: transparent;
				background-image: url('../imgs/icon-24-color-wheel.svg');
				background-size: contain;
				content: '';
			}
		}
	}

	&.compact {
		& > a, & > button {
			& .text-wrapper {
				padding: 6px 10px;
				font-size: 14px;

				&::before {
					width: 16px;
					height: 16px;
					top: 3px;
				}
			}
		}
	}
	p {
		margin: .5em 0;
	}
}

.nalgene-customizer--modal-content {
	display: none;
}

.nalgene-customizer--modal {
	display: none;

	&.active {
		opacity: 1;
		display: block;
		position: fixed;
		background: rgba(33,39,33,.7);
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	.modal-dialog {
		background-color: #fff;
		border-radius: 2.4rem;
		position: relative;
		max-width: 50rem;
		width: 90%;
		z-index: +1100;

		.modal-header {
			text-align: right;
			padding: 1.5rem;
		}

		.btn-reset {
			background: transparent;
			border: 0;
			box-shadow: none;
			cursor: pointer;

			svg {
				width: 1.5rem;
				height: 1.5rem;

				path {
				fill: #000;
				}
			}
		}
	}

	#cap-modal-title {
		font-size: 2.4rem;
		text-align: center;
		margin: 0;
	}

	.modal-content {
		text-align: center;
		padding: 0 1.8rem 1.8rem;

		.product-img {
			max-height: 275px;
			min-height: 150px;
			height: 44vh;
			width: 100%;
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
		}

		.product-caps {
			display: flex;
			justify-content: center;
			gap: 32px;
			margin-bottom: 32px;
	
			label {
				flex: 1;
				justify-content: stretch;
				align-items: stretch;
				font-weight: bold;
				text-align: center;
				font-size: 1.4rem;
				min-width: 90px;
				max-width: 120px;
				width: 10vw;
			}
	
			input[type="radio"]{
				display: none;
			}
	
			.cap-img {
				display: flex;
				aspect-ratio: 1;
				min-height: 90px;
				max-height: 120px;
				height: 15vh;
				margin: 0 auto;
				border-radius: 16px;
				border: 2px solid transparent;
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
				
			}
	
			.cap-title {
				display: inline-block;
				margin-top: 1em;
			}
	
			input:checked + .cap-img {
				border-color: black;
			}
		}

		.total-bottle-cap-price {
			font-weight: normal;
			margin-top: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #007BC1;
			font-weight: 700;
		} 
	}
}

.nalgene-customizer--cart-buttons {
	display: flex;
	gap: 2rem;
	padding-top: 1rem;
	align-items: center;
	justify-content: flex-start;

	.nalgene-customizer--button {
		display: inline-block;
	}

	.download-link {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 1.3rem;
		text-decoration: none;
		color: #0072CE;
		font-weight: 600;
		transition: all .25s ease;
		
		&::before {
			position: relative;
			width: 20px;
			height: 20px;
			transform: none;
			opacity: 1;
			background-color: transparent;
			background-image: url('../imgs/icon-download.svg');
			background-size: contain;
			content: '';
		}

		&:hover {
			text-decoration: underline !important;
		}
	}
}

@media(min-width: 920px){
	.nalgene-customizer--modal {

		#cap-modal-title {
			font-size: 3.0rem;
		}

		.modal-content {

			label {
				font-size: 1.6rem;
			}
		}
	}

	.woocommerce.archive .products .product {
		position: relative;
	}
	.woocommerce.archive .products .nalgene-customizer--button,
	.nalgene-customizer--button.top-right {
		position: absolute;
		top: 1.4rem;
		right: .6rem;
		font-size: 1.4rem;

		& > a, 
		& > button {
			& .text-wrapper {
				padding: 6px 10px;
				
				&::before {
					width: 16px;
					height: 16px;
					top: 3px;
				}
			}
		}

		> p {
			display: none;
		}
	}
}

/*Theme/woo default styles modifications */
.item-bottom {
    .remove {
      margin-left: 0;
    }

	.cart-quantity-group,
	.custom-quantity {
		margin-right: 3.2rem;
	}

	.custom-quantity {
		color: #555855;
		font-size: 1.6rem;
	}
}

/* Cart items still take up space, placing the button hundreds of pixels below the "notify" button.*/
.woocommerce-variation-add-to-cart-disabled {
	height: 0;
	margin-bottom: 1.6rem;
}

.single-product .nalgene-customizer--button {
	margin: 0.3rem 0 1.2rem;
}

/*checkout*/



.nalgene-customizer--cart-buttons {
	gap: 1rem;

	@media(max-width: 900px){
		align-items: flex-start;
		flex-direction: column;
	}

	.nalgene-customizer--button {
		width: 132px;
		display: flex;

		@media(max-width: 900px){
			align-self: flex-start;
		}

		a {
			margin: 0;
		}
	}

	table {
		@media(min-width: 900px){
			width: calc(100% - 132px) !important;
		}

		.download-link {
			font-size: 16px;
			line-height: 18px;
			width: 100%;
			color: #0072CE;

			@media(min-width: 900px){
				font-size: 14px;
			}

			&::before {
				display: none;
			}
		}

		td:empty {
			display: none;
		}
	}
}


.order-summary .order-summary__item {
	gap: 20px;

	.thumb-column {
		width: 135px;
	}

	.title-column {
		width: 100%;
	}
}