/* CSS Document */

#photo{
	display: grid;
	& h2{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		padding: 0.5em 0;
		background: var(--color-theme);
		color: #fff;
		font-weight: 700;
		font-size: clamp(24px, calc(36 / 768 * 100dvw), 36px);
		text-align: center;
	}
	#photoText{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		margin-top: clamp(24px, calc(40 / 992 * 100dvw), 40px);
		font-weight: 500;
		text-align: center;
	}
	#photoLink{
		justify-self: center;
		display: flex;
		justify-content: center;
		width: var(--wrap);
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		& a{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: 0.5em;
			min-width: min(100%, 420px);
			min-height: clamp(48px, calc(64 / 768 * 100dvw), 64px);
			padding: 0.25em 1.5em 0.25em 2em;
			border: 1px solid currentColor;
			border-radius: clamp(24px, calc(32 / 768 * 100dvw), 32px);
			font-weight: 700;
			font-size: clamp(14px, calc(18 / 768 * 100dvw), 18px);
			letter-spacing: 0.05em;
			text-align: center;
			text-decoration: none;
			&:hover{
				background: var(--color-theme);
				border-color: transparent;
				color: #fff;
				&:after{
					background: #fff;
					color: var(--color-theme);
				}
			}
			&:after{
				content: attr(data-count);
				display: grid;
				place-content: center;
				aspect-ratio: 1;
				width: 2em;
				background: var(--color-theme);
				border-radius: 100%;
				color: #fff;
				font-size: clamp(12px, calc(16 / 768 * 100dvw), 16px);
				line-height: 1;
			}
		}
	}
}

#cart{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin: clamp(24px, calc(40 / 992 * 100dvw), 40px) 0 clamp(80px, calc(160 / 992 * 100dvw), 160px) 0;
	& hgroup{
		& h2{
			font-weight: 700;
			font-size: clamp(20px, calc(24 / 768 * 100dvw), 24px);
			text-align: center;
		}
		& p{
			font-weight: 500;
			text-align: center;
		}
	}
	#list{
		margin-top: clamp(24px, calc(40 / 992 * 100dvw), 40px);
	}
	#request{
		margin-top: clamp(32px, calc(56 / 992 * 100dvw), 56px);
	}
	&:has(section){
		#noPhoto{
			display: none;
		}
	}
	&:not(:has(section)){
		#request{
			display: none;
		}
	}
	&:has(section:nth-child(21)){
		#request{
			& a{
				background: #ccc;
				border-color: transparent;
				opacity: 0.5;
				pointer-events: none;
			}
		}
	}
}

#request{
	display: flex;
	justify-content: center;
	& a{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 0.5em;
		min-width: min(100%, 420px);
		min-height: clamp(48px, calc(64 / 768 * 100dvw), 64px);
		padding: 0.25em 1.5em 0.25em 2em;
		border: 1px solid currentColor;
		border-radius: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		font-weight: 700;
		font-size: clamp(14px, calc(18 / 768 * 100dvw), 18px);
		letter-spacing: 0.05em;
		text-align: center;
		text-decoration: none;
		&:hover{
			background: var(--color-theme);
			border-color: transparent;
			color: #fff;
		}
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 16px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><polyline points="5.6 3.2 10.4 8 5.6 12.8" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"/></svg>') no-repeat center / 16px;
		}
		@media (min-width: 768px) {
			&:after{
				-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><polyline points="4.8 1.6 11.2 8 4.8 14.4" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"/></svg>');
			}
		}
	}
}

#noPhoto{
	padding: 10% 0;
	font-weight: 500;
	text-align: center;
}

.photoList{
	display: grid;
	grid-gap: clamp(24px, calc(32 / 992 * 100dvw), 32px) clamp(16px, calc(24 / 992 * 100dvw), 24px);
	padding-bottom: 1px;
	overflow: hidden;
	& section{
		position: relative;
		display: grid;
		grid-template-rows: auto 1fr;
		grid-row-gap: 8px;
		margin-bottom: clamp(24px, calc(32 / 992 * 100dvw), 32px);
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 3 / 2;
			background: var(--dummy);
			border-radius: 4px;
		}
		&:after{
			position: absolute;
			top: 100%;
			left: 0;
			width: 100dvw;
			border-bottom: 1px solid #dedede;
			transform: translateY(clamp(24px, calc(32 / 992 * 100dvw), 32px));
		}
		& figure{
			grid-row: 1;
		}
	}
	& h3{
		font-weight: 700;
	}
	& h3+div{
		display: contents;
		& a{
			&:not([data-id]){
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				font-size: 0;
			}
			&[data-id]{
				display: grid;
				align-items: center;
				min-height: clamp(48px, calc(56 / 768 * 100dvw), 56px);
				margin-top: 8px;
				padding: 0.25em 1.5em;
				border-radius: clamp(24px, calc(28 / 768 * 100dvw), 28px);
				border: 1px solid currentColor;
				color: var(--color-theme);
				font-weight: 500;
				font-size: 14px;
				letter-spacing: 0.05em;
				text-align: center;
				text-decoration: none;
				cursor: pointer;
				z-index: 1;
				&.deleteCart{
					background: #ccc;
					border-color: transparent;
					color: inherit;
				}
				&.limit{
					opacity: 0.75;
					pointer-events: none;
				}
			}
		}
	}
	& figure{
		& img{
			aspect-ratio: 3 / 2;
			object-fit: contain;
			background: #f2f2f2;
			border-radius: 4px;
		}
	}
	@media (max-width: 767.98px) {
		grid-template-columns: repeat(2, 1fr);
		& section:nth-child(2n+1):after{
			content: "";
		}
	}
	@media (min-width: 768px) and (max-width: 1199.98px) {
		grid-template-columns: repeat(3, 1fr);
		& section:nth-child(3n+1):after{
			content: "";
		}
	}
	@media (min-width: 1200px) {
		grid-template-columns: repeat(4, 1fr);
		& section:nth-child(4n+1):after{
			content: "";
		}
	}
}