.ps-personalization,
.ps-giftwrap {
	margin: 1em 0;
}

.ps-personalization textarea,
.ps-giftwrap-message textarea {
	width: 100%;
	max-width: 480px;
	display: block;
	margin-top: 0.4em;
}

.ps-giftwrap-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-weight: 700;
	cursor: pointer;
	width: fit-content;
	box-sizing: border-box;
	padding: 8px 14px;
	border-radius: 4px;
	background: #9168ac;
	color: #ffffff;
}
.ps-giftwrap-toggle input {
	width: 16px;
	height: 16px;
	accent-color: #ffffff;
	flex-shrink: 0;
}

.ps-giftwrap-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

/* Same breakpoint the checkout layout itself switches to a single stacked
   column at (see cart-checkout.css). At 4 columns on a phone-width checkout
   form, each card gets ~80px — barely wider than the card image itself, so
   titles like "Time to Work Time to Play" wrapped to 3+ lines and looked
   broken. Two columns give each card roughly double the room. */
@media (max-width: 768px) {
	.ps-giftwrap-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
}

.ps-giftwrap-design {
	border: 2px solid transparent;
	border-radius: 6px;
	padding: 6px 4px;
	width: auto;
	/* Grid items don't shrink below their content's natural size by default
	   — a design image wider than its column (e.g. a landscape card mockup)
	   would otherwise force that column wider than its fair share and blow
	   the whole row past the checkout's width, the same class of bug the
	   product grid had (see shop.css). */
	min-width: 0;
	box-sizing: border-box;
	text-align: center;
	cursor: pointer;
	font-size: 0.85em;
	transition: all 0.2s ease;
}

.ps-giftwrap-design input {
	display: none;
}

.ps-giftwrap-design img {
	/* Card mockups aren't all the same aspect ratio (some near-square, some
	   wide trifold layouts) — object-fit:contain keeps the whole design
	   visible letterboxed inside the fixed height, instead of cover cropping
	   part of it away, and width:100% stops a wide image from pushing past
	   its own card at narrow column widths (see min-width:0 note above). */
	display: block;
	width: 100%;
	height: 90px;
	object-fit: contain;
	border-radius: 3px;
	margin: 0 auto;
}

.ps-giftwrap-design span {
	display: block;
	margin-top: 0.3em;
}

.ps-giftwrap-design small {
	color: #2e7d32;
	font-weight: 600;
}

.ps-giftwrap-design.is-selected {
	border-color: var(--ps-color-primary, #e8916f);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--ps-color-primary, #e8916f) 30%, transparent);
}

.ps-giftwrap-message {
	margin-top: 0.8em;
}