/* CSS Document */

#main{
	margin-bottom: clamp(64px, calc(128 / 1200 * 100dvw), 128px);
}

#detail{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin-top: clamp(24px, calc(48 / 1200 * 100dvw), 48px);
	&>*{
		grid-column: 2;
	}
	& h2{
		grid-row: 1;
		position: relative;
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.25em;
		padding-bottom: 16px;
		color: inherit;
		font-weight: 700;
		font-size: clamp(18px, calc(28 / 768 * 100dvw), 28px);
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 18px;
			border: 5px solid var(--color-theme-sub);
			border-radius: 100%;
			transform: translateY(calc(0.875em - 50%));
		}
		&:after{
			content: "";
			position: absolute;
			right: 0;
			bottom: 0;
			width: 100dvw;
			border-bottom: 1px dashed currentColor;
		}
	}
	#text{
		justify-self: center;
		width: min(100%, 720px);
		margin-top: clamp(32px, calc(64 / 1200 * 100dvw), 64px);
	}
	#photo{
		grid-row: 2;
		margin-top: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
	}
	#status{
		grid-row: 3;
		margin-top: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
	}
	#cart{
		margin-top: clamp(32px, calc(64 / 1200 * 100dvw), 64px);
	}
	@media (min-width: 992px) {
		#photo{
			width: 50%;
		}
		#status{
			grid-row: 2;
			justify-self: end;
			width: min(calc(50% - 40px));
		}
	}
}

#text{
	font-weight: 500;
}

#photo{
	& img{
		aspect-ratio: 3 / 2;
		object-fit: contain;
		background: #eee;
		border-radius: 10px;
	}
}

#status{
	& dl{
		display: grid;
		outline: 1px solid #ccc;
		outline-offset: -1px;
	}
	& dt,
	& dd{
		padding: 16px 24px;
		font-weight: 500;
	}
	& dt{
		display: grid;
		background: var(--color-theme-sub);
		color: #fff;
		font-weight: 700;
		z-index: 1;
		&:nth-of-type(n+2){
			border-top: 1px solid rgba(255, 255, 255, 0.3);
		}
	}
	& dd{
		& a:not(:hover){
			text-decoration: none;
		}
	}
	@media (min-width: 576px) {
		& dl{
			grid-template-columns: auto 1fr;
		}
		& dt{
			min-width: 10em;
			max-width: 20em;
		}
		& dd{
			&:nth-of-type(n+2){
				border-top: 1px solid #ccc;
			}
		}
	}
}

#cart{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	grid-gap: 16px 24px;
	& p{
		width: 100%;
		margin-bottom: 16px;
		text-align: center;
	}
	& a{
		display: grid;
		align-items: center;
		min-width: min(100%, 320px);
		min-height: 48px;
		padding: 0.25em 1em;
		border-radius: 24px;
		color: inherit;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-align: center;
		text-decoration: none;
		&[data-id]{
			border: 1px solid #ccc;
			&.deleteCart{
				background: #ddd;
				border-color: transparent;
			}
			&.limit{
				background: #ccc;
				pointer-events: none;
			}
		}
		&.cart{
			background: var(--color-theme);
		}
	}
}