.gifts {
	background:
		linear-gradient(180deg, transparent 80%, white 100%),
		radial-gradient(circle, rgba(70, 100, 100, .2) 1.2px, transparent 1.5px) 0 0 / 24px 24px,
		linear-gradient(90deg, transparent 0%, rgba(150, 224, 212, .22) 50%, transparent 100%);
}
.gifts * {font-family: var(--font-noto);}
.gifts .container {width: 100%; max-width: 1300px; margin: 0 auto; padding-inline: 1rem;}

.gifts .intro {padding: 0 1rem clamp(2rem, 3vw, 3rem); text-align: center;}
.gifts .intro .section-sub {
	max-width: 800px; margin: 20px auto 0; color: #5f6a75; font-size: 18px; line-height: 1.4;
}

.gifts .products-section {padding-bottom: clamp(64px, 10vw, 120px);}
.gifts .products {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
	align-items: stretch;
}
.gifts .product {
	display: flex; flex-direction: column;
	background: #fff; border-radius: 20px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	padding: 28px 24px; text-align: right;
}
.gifts .product-title {font-size: 20px; font-weight: 700; margin-bottom: 10px;}
.gifts .product-desc {color: #1c4cd7; font-size: 15px; line-height: 1.2; margin-bottom: 16px;}
.gifts .product-items {flex: 1; margin: 0 0 20px; padding: 0; list-style: none;}
.gifts .product-items li {
	position: relative; padding-inline-end: 22px; margin-bottom: 10px;
	font-size: 14px; line-height: 1.6; color: #333;
}
.gifts .product-items li::before {
	content: '\2713'; position: absolute; inset-inline-end: 0; top: 1px;
	color: #33a773; font-weight: 700;
}
.gifts .product-note {
	height: 3.5rem; line-height: 3.5rem; border-radius: 2rem; background: #f3f3f3;
	font-size: 16px; text-align: center; color: #777; cursor: default;
}
.gifts .product .button {margin-bottom: 0;}
.gifts .product .button.choose {width: 100%; justify-content: center;}

.gifts .thanks {padding-block: 0 clamp(64px, 10vw, 120px); text-align: center;}
.gifts .thanks-icon {
	display: inline-flex; width: 52px; height: 52px; margin-bottom: 20px; font-size: 52px; color: #33a773;
}
.gifts .thanks .section-sub {
	max-width: 800px; margin: 16px auto 0; color: #5f6a75;
	font-size: 16px; line-height: 1.8;
}

@media screen and (max-width: 64em) {
	.gifts {margin-top: -1rem; padding-top: 1rem;}
	.gifts .products {grid-template-columns: 1fr;}
}

/* Access popup */
.giftsAccessPopup {width: min(600px, 98vw);}
.giftsAccessPopup .body {min-height: unset;}
.giftsAccessPopup .description {text-align: center;}
.giftsAccessPopup label {position: relative;}
.giftsAccessPopup .errorMessage {position: absolute; bottom: -20px; right: 25px;}
.giftsAccessPopup .timer {margin-bottom: 1rem; text-align: center; color: #d9364a;}
.giftsAccessPopup .timer .time {font-weight: bold;}
.giftsAccessPopup .button {display: block; width: 200px; margin: 2rem auto 0;}

/* Confirm popup */
.giftsConfirmPopup {width: min(600px, 98vw);}
.giftsConfirmPopup .body {min-height: unset;}
.giftsConfirmPopup .description {text-align: center; font-size: 1rem;}
.giftsConfirmPopup .member-note {margin: 1rem 0 0; text-align: center; font-size: .9rem; color: #5f6a75;}
.giftsConfirmPopup .button {display: block; width: 200px; margin: 2rem auto 0;}