.product {
	display: grid;
  	grid-template-columns: 6fr 4fr;
	flex-wrap: wrap;
	gap: 1.25em;
}

	.product-images {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		height: fit-content;
		position: relative;
		align-items: center;
		justify-content: center;
	}
		.product-images img {
			aspect-ratio: 1/1;
			background-color: var(--gray);
			user-select: none;
		}
			.product-avatar-container {
				grid-row: 1 / span 5;
				grid-column: 2 / span 5;
				border-radius: 1rem;	
				overflow: hidden;
				height: calc(100% - 9px);
				aspect-ratio: 1/1;
				position: relative;
			}
				.product-avatar {
					z-index: 2;
				}
					.product-avatar:not(:first-of-type) {
						display: none;
					}
					.product-thumb ~ .product-avatar-container {
						border-top-left-radius: 0;
					}
					.product-thumb:nth-child(5) ~ .product-avatar-container {
						border-bottom-left-radius: 0;
					}
					.product-thumb:nth-child(11) ~ .product-avatar-container {
						border-bottom-right-radius: 0;
					}

			.product-avatar-dir {
				position: absolute;
				top: 0;
				height: 100%;
				width: 4em;
				padding: 1em;
				display: flex;
				align-items: center;
				color: white;
				cursor: pointer;
				opacity: 1;
				filter: drop-shadow(0 0 1px #00000088);
				transition: background-color 0.08s ease-out;
				pointer-events: all !important;
			}
				.product-avatar-dir:hover {
					background-color: #00000030;
				}
				.product-avatar-dir[disabled="true"] {
					cursor: not-allowed;
					pointer-events: none;
				}

				.product-avatar-right {
					right: 0;
					justify-content: flex-end;
				}

			.product-thumb {
				cursor: pointer;
				height: calc(100% - 9px);
			}
				.product-thumb.active {
					filter: drop-shadow(var(--shadow));
				}
				.product-thumb:first-child {
					border-top-left-radius: 1rem;
				}
				.product-thumb:nth-child(-n+5).last {
					border-bottom-left-radius: 1rem;
				}
				.product-thumb:nth-child(5).last {
					border-bottom-right-radius: 0;
				}
				.product-thumb:nth-child(6) {
					border-bottom-left-radius: 1rem;
				}
					.product-thumb:nth-child(6).last {
						border-bottom-right-radius: 1rem;
					}
				.product-thumb:nth-child(n+6).last {
					border-bottom-right-radius: 1rem;
				}

			#active-img-indicator {
				position: absolute;
				background-color: var(--secondary);
				transition: all 0.15s ease;
				--superellipse: 55px;
			}
			
		.product-images.single {
			display: flex;
  			justify-content: flex-end;
		}
			.product-images.single .product-avatar-dir {
				display: none;
			}

	.product__properties {
		position: sticky;
		top: 1rem;
		left: 0;
		height: fit-content;
	}

		.product__title {
			font-size: 2.5em;
			margin-top: 0;
		}

		.product__lead {
			margin: 0;
			padding-botton: 0;
		}
			.product__lead ul {
				padding-left: 1.5em;
				margin-top: -0.5em;
			}
				.product__lead ul li {
					margin: 0.25em 0;
					&::marker {
						content: "‒  "
					}
				}

			.product__shortcuts {
				display: flex;
				align-items: baseline;
				justify-content: space-between;
			}
				.product__shortcuts:not(:has(.product__price)) {
					margin-bottom: 1rem;
				}

	 		.product__order-buttons {
				margin-top: 0.25rem;
				gap: 0.75em;
				display: flex;
				flex-direction: column;
			}	 

				.product__order-button {
					font-weight: 500;
				}
					.product__order-button--main {
						font-weight: 700;
						/* animation: glow-secondary 2s infinite ease; */
						color: white;
					}
						.product__order-button--main:hover {
							color: white;
						}
					#embroidery {
						position: relative;
					}
							.product__order-button--embroidery:hover {
								background-color: var(--gray-lightest);
							}
							.product__order-button--embroidery:active {
								background-color: var(--gray-lighter);
							}
						#embroidery svg {
							width: 0.8em;
							height: auto;
							scale: 3.3;
							transform: translateX(-0.4em);
							transition: all 0.1s;
							will-change: transform;
						}
							#embroidery:hover svg {
								transform: scale(1.05) translateX(-0.4em) rotate(-2.5deg);
							}

		.product__rating {
			font-size: 1.5rem;
			width: min-content;
		}

		.product__price {
			font-weight: normal;
			font-size: 4rem;
			line-height: 1.2;
			display: flex;
		}

		.product__sizes table {
			font-size: 14px;
		}
			.product__sizes table th {
				max-width: 8em;
				hyphens: auto;
			}

.product--skeleton {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 0;
}