:root {
	--dm-ivory: #f8f3ea;
	--dm-ivory2: #ede8dc;
	--dm-black: #111111;
	--dm-gold: #c9962a;
	--dm-goldl: #e8b84b;
	--dm-tdark: #1c1915;
	--dm-tmid: #5c564e;
	--dm-tlight: #9c9489;
}

.dm-gift-box-builder {
	width: min(100%, 560px);
	margin: 0 auto;
	padding: 10px;
	color: var(--dm-tdark);
	background: #f1e9df;
	border: 1px solid rgba(92, 86, 78, 0.14);
	border-radius: 18px;
	box-shadow: 0 18px 55px rgba(28, 25, 21, 0.1);
	font-family: "DM Sans", sans-serif;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.45;
}

.dm-gift-box-builder *,
.dm-gift-box-builder *::before,
.dm-gift-box-builder *::after {
	box-sizing: border-box;
}

.dm-gift-box-builder button {
	appearance: none;
	font: inherit;
}

.dm-gift-box-progress {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding: 4px 2px 14px;
	mask-image: linear-gradient(to right, #000 92%, transparent);
}

.dm-gift-box-progress ol {
	position: relative;
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0 2px;
	list-style: none;
}

.dm-gift-box-progress li {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	flex: 0 0 auto;
	scroll-snap-align: start;
	min-height: 28px;
	padding: 0;
	color: var(--dm-tmid);
	background: transparent;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.1;
	text-align: center;
	white-space: nowrap;
	letter-spacing: 0.04em;
}

.dm-gift-box-progress li + li::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 1px;
	margin: 0 4px;
	background: rgba(92, 86, 78, 0.32);
}

.dm-gift-box-progress li.is-complete + li::before,
.dm-gift-box-progress li.is-active + li::before {
	background: var(--dm-gold);
}

.dm-gift-box-progress li span {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	color: var(--dm-tmid);
	background: transparent;
	border: 1px solid rgba(92, 86, 78, 0.32);
	font-family: "DM Sans", sans-serif;
	font-size: 11px;
	font-weight: 500;
}

.dm-gift-box-progress li.is-active span {
	background: var(--dm-gold);
	border-color: var(--dm-gold);
	color: #fff9ed;
}

.dm-gift-box-progress li.is-complete span {
	background: var(--dm-gold);
	border-color: var(--dm-gold);
	color: #fff9ed;
}

/* No hover/focus styling on progress steps. Steps are navigational labels,
   not interactive controls — only the numbered circle changes appearance
   to reflect the active/complete state, and that styling should not
   intensify (or otherwise shift) on hover/focus. */
.dm-gift-box-progress li:hover,
.dm-gift-box-progress li:focus,
.dm-gift-box-progress li:focus-within,
.dm-gift-box-progress__button:hover,
.dm-gift-box-progress__button:focus,
.dm-gift-box-progress__button:focus-visible,
.dm-gift-box-progress__button:hover span,
.dm-gift-box-progress__button:focus-visible span {
	background: transparent;
	border-color: rgba(92, 86, 78, 0.32);
	color: var(--dm-tmid);
	transform: none;
	outline: none;
	box-shadow: none;
}

/* Restore the active/complete visual on hover/focus so the state is
   preserved when the user moves the pointer over the active step. */
.dm-gift-box-progress li.is-active:hover span,
.dm-gift-box-progress li.is-active:focus span,
.dm-gift-box-progress li.is-active:focus-within span,
.dm-gift-box-progress li.is-active .dm-gift-box-progress__button:hover span,
.dm-gift-box-progress li.is-active .dm-gift-box-progress__button:focus-visible span {
	background: var(--dm-gold);
	border-color: var(--dm-gold);
	color: #fff9ed;
}

.dm-gift-box-progress li.is-complete:hover span,
.dm-gift-box-progress li.is-complete:focus span,
.dm-gift-box-progress li.is-complete:focus-within span,
.dm-gift-box-progress li.is-complete .dm-gift-box-progress__button:hover span,
.dm-gift-box-progress li.is-complete .dm-gift-box-progress__button:focus-visible span {
	background: var(--dm-gold);
	border-color: var(--dm-gold);
	color: #fff9ed;
}

.dm-gift-box-progress__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 100%;
	min-height: inherit;
	padding: 0;
	color: inherit;
	background: transparent;
	border: 0;
	cursor: pointer;
	font: inherit;
	letter-spacing: inherit;
	text-align: inherit;
	white-space: inherit;
	text-transform: inherit;
}

.dm-gift-box-step[hidden] {
	display: none !important;
}

.dm-gift-box-step__inner {
	padding: 22px 14px 16px;
}

.dm-gift-box-loader {
	padding: 18px;
	color: var(--dm-tmid);
	background: var(--dm-ivory2);
	border: 1px solid rgba(92, 86, 78, 0.14);
	border-radius: 10px;
	font-size: 13px;
	text-align: center;
}

.dm-gift-box-categories {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin: 0 0 16px;
	padding: 4px 0 12px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scroll-padding-inline: 14px;
}

.dm-gift-box-categories::-webkit-scrollbar {
	height: 4px;
}

.dm-gift-box-categories::-webkit-scrollbar-thumb {
	background: rgba(92, 86, 78, 0.25);
	border-radius: 999px;
}

.dm-gift-box-category {
	flex: 0 0 auto;
	scroll-snap-align: start;
	padding: 8px 14px;
	color: var(--dm-tmid);
	background: #f4ecdf;
	border: 1px solid rgba(92, 86, 78, 0.14);
	border-radius: 999px;
	cursor: pointer;
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	white-space: nowrap;
	transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.dm-gift-box-category:hover,
.dm-gift-box-category:focus-visible {
	border-color: var(--dm-gold);
	color: var(--dm-tdark);
	outline: none;
}

.dm-gift-box-category.is-active {
	color: #fff9ed;
	background: var(--dm-tdark);
	border-color: var(--dm-tdark);
}

.dm-gift-box-products {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 11px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	min-height: 240px;
}

.dm-gift-box-products.is-loading > .dm-gift-box-product,
.dm-gift-box-products.is-loading > .dm-gift-box-notice {
	opacity: 0.35;
	transition: opacity 160ms ease;
	pointer-events: none;
}

.dm-gift-box-products > .dm-gift-box-loader {
	position: absolute;
	top: 12px;
	left: 50%;
	z-index: 2;
	display: none;
	transform: translateX(-50%);
	padding: 6px 14px;
	background: var(--dm-ivory);
	border: 1px solid rgba(92, 86, 78, 0.18);
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(28, 25, 21, 0.08);
	font-size: 12px;
	letter-spacing: 0.04em;
}

.dm-gift-box-products.is-loading > .dm-gift-box-loader {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.dm-gift-box-product {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 0;
	color: var(--dm-tdark);
	background: #fffaf4;
	border: 1px solid rgba(92, 86, 78, 0.2);
	border-radius: 10px;
	cursor: pointer;
	text-align: center;
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.dm-gift-box-product:hover:not(:disabled),
.dm-gift-box-product:focus-visible:not(:disabled) {
	border-color: var(--dm-gold);
	outline: none;
	transform: translateY(-2px);
}

.dm-gift-box-product:focus-visible {
	box-shadow: 0 0 0 3px rgba(201, 150, 42, 0.24);
}

.dm-gift-box-product.is-selected {
	border: 2px solid var(--dm-gold);
	box-shadow: 0 8px 18px rgba(201, 150, 42, 0.16);
}

.dm-gift-box-product.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.dm-gift-box-product__media {
	display: block;
	position: relative;
	overflow: hidden;
	background: #f1e5d8;
	border-radius: 9px 9px 0 0;
	aspect-ratio: 1 / 1;
}

.dm-gift-box-product__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dm-gift-box-product__name {
	display: block;
	padding: 10px 10px 2px;
	font-family: "Cormorant Garamond", serif;
	font-size: clamp(16px, 4vw, 20px);
	font-weight: 400;
	line-height: 1.15;
}

.dm-gift-box-product__price {
	display: block;
	padding: 2px 10px 12px;
	color: var(--dm-tmid);
	font-size: 13px;
	font-weight: 500;
}

.dm-gift-box-product__check {
	position: absolute;
	top: 8px;
	right: 8px;
	display: grid;
	place-items: center;
	width: 25px;
	height: 25px;
	color: #fffaf0;
	background: var(--dm-gold);
	border-radius: 50%;
	font-size: 14px;
	font-weight: 500;
	opacity: 0;
	transform: scale(0.7);
	transition: opacity 180ms ease, transform 180ms ease;
}

.dm-gift-box-product.is-selected .dm-gift-box-product__check {
	opacity: 1;
	transform: scale(1);
}

.dm-gift-box-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 16px;
}

.dm-gift-box-pagination__label {
	color: var(--dm-tmid);
	font-size: 12px;
}

.dm-gift-box-pagination__nav {
	min-height: 36px;
	padding: 0 14px;
	color: var(--dm-tdark);
	background: #f4ecdf;
	border: 1px solid rgba(92, 86, 78, 0.2);
	border-radius: 999px;
	cursor: pointer;
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: background 180ms ease, color 180ms ease, opacity 180ms ease;
}

.dm-gift-box-pagination__nav:hover:not(:disabled),
.dm-gift-box-pagination__nav:focus-visible:not(:disabled) {
	background: var(--dm-tdark);
	color: #fff9ed;
	outline: none;
	border-color: var(--dm-tdark);
}

.dm-gift-box-pagination__nav:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.dm-gift-box-message {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 18px;
}

.dm-gift-box-message__label {
	color: var(--dm-tmid);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.dm-gift-box-message__field {
	width: 100%;
	min-height: 110px;
	padding: 12px 14px;
	color: var(--dm-tdark);
	background: #fffaf4;
	border: 1px solid rgba(92, 86, 78, 0.2);
	border-radius: 10px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	resize: vertical;
	transition: border-color 180ms ease, box-shadow 180ms ease;
}

.dm-gift-box-message__field:focus-visible {
	border-color: var(--dm-gold);
	outline: none;
	box-shadow: 0 0 0 3px rgba(201, 150, 42, 0.24);
}

.dm-gift-box-message__meta {
	display: flex;
	justify-content: flex-end;
}

.dm-gift-box-message__counter {
	color: var(--dm-tlight);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

.dm-gift-box-message__counter.is-near {
	color: var(--dm-gold);
}

.dm-gift-box-message__counter.is-full {
	color: #9d3d2e;
}

/* ---------- Step 3 hero (Personal Message) ---------- */
.dm-gift-box-message-hero {
	position: relative;
	display: grid;
	gap: 14px;
	margin: 0 0 18px;
	padding: 18px 16px 0;
	text-align: center;
}

.dm-gift-box-message-hero__copy {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
}

.dm-gift-box-message-hero__eyebrow {
	margin: 0;
	color: var(--dm-tdark);
	font-family: "Cormorant Garamond", serif;
	font-size: clamp(24px, 4vw, 30px);
	font-weight: 400;
	line-height: 1.1;
}

.dm-gift-box-message-hero__eyebrow span {
	color: var(--dm-gold);
	margin-left: 4px;
}

.dm-gift-box-message-hero__intro {
	margin: 0;
	color: var(--dm-tmid);
	font-size: 13px;
}

.dm-gift-box-message-hero__media {
	display: block;
	width: 100%;
	max-width: 280px;
	margin: 0 auto;
	border-radius: 14px;
	overflow: hidden;
	background: var(--dm-ivory2);
}

.dm-gift-box-message-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.dm-gift-box-included {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dm-gift-box-included li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	background: var(--dm-ivory2);
	border: 1px solid rgba(17, 17, 17, 0.06);
	border-radius: 12px;
}

.dm-gift-box-included__icon {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	color: #fff;
	background: var(--dm-gold);
	border-radius: 999px;
}

.dm-gift-box-included__name {
	flex: 1 1 auto;
	font-family: "Cormorant Garamond", serif;
	font-size: 18px;
	color: var(--dm-black);
}

.dm-gift-box-included__price {
	font-family: "DM Sans", sans-serif;
	font-size: 11px;
	letter-spacing: 0.16em;
	color: var(--dm-gold);
	font-weight: 500;
}

@media (min-width: 700px) {
	.dm-gift-box-message-hero {
		grid-template-columns: minmax(220px, 1fr) minmax(180px, 280px);
		gap: 24px;
		text-align: left;
		align-items: center;
		padding: 24px 22px 4px;
	}

	.dm-gift-box-message-hero__copy {
		align-items: flex-start;
	}

	.dm-gift-box-message-hero__media {
		margin: 0;
		max-width: none;
	}

	.dm-gift-box-included {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.dm-gift-box-included li {
		flex: 1 1 auto;
		min-width: 200px;
	}
}

.dm-gift-box-builder__back {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 54px;
	padding: 0 18px;
	color: var(--dm-tdark);
	background: transparent;
	border: 1px solid rgba(92, 86, 78, 0.25);
	border-radius: 4px;
	cursor: pointer;
	font-family: inherit;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
	box-sizing: border-box;
}

.dm-gift-box-builder__back:hover,
.dm-gift-box-builder__back:focus-visible {
	color: #fff9ed;
	background: var(--dm-tdark);
	border-color: var(--dm-tdark);
	outline: none;
}

.dm-gift-box-builder__footer {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.dm-gift-box-builder__footer .dm-gift-box-builder__continue {
	flex: 1;
}

/* On mobile the primary action (continue) goes on top, and the secondary
   (back) lives below with breathing room above it. */
.dm-gift-box-builder__footer > .dm-gift-box-builder__back {
	order: 2;
}

.dm-gift-box-builder__footer > .dm-gift-box-builder__continue {
	order: 1;
}

.dm-gift-box-panel {
	overflow: hidden;
	background: #fcf9f4;
	border-radius: 14px;
	box-shadow: 0 3px 10px rgba(28, 25, 21, 0.08);
}

.dm-gift-box-hero {
	position: relative;
	height: clamp(360px, 88vw, 480px);
	overflow: hidden;
	background: var(--dm-ivory2);
}

.dm-gift-box-hero__copy {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 14px;
	z-index: 2;
	padding: 16px 18px 18px;
	color: var(--dm-black);
	background: rgba(248, 243, 234, 0.95);
	border: 1px solid rgba(92, 86, 78, 0.14);
	border-radius: 12px;
	box-shadow: 0 10px 24px rgba(28, 25, 21, 0.18);
	text-shadow: none;
}

.dm-gift-box-hero__eyebrow {
	margin: 0 0 8px;
	color: var(--dm-gold);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.dm-gift-box-hero__eyebrow span {
	color: var(--dm-tlight);
}

.dm-gift-box-hero h1 {
	margin: 0;
	font-family: "Cormorant Garamond", serif;
	font-size: clamp(38px, 10vw, 56px);
	font-weight: 500;
	letter-spacing: 0em;
	line-height: 0.95;
	text-transform: uppercase;
	color: var(--dm-black);
}

.dm-gift-box-hero h1 em {
	font-style: italic;
	font-weight: 400;
	text-transform: none;
}

.dm-gift-box-hero__intro {
	max-width: 260px;
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--dm-tmid);
}

.dm-gift-box-hero__perks {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.dm-gift-box-hero__perks li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--dm-tdark);
}

.dm-gift-box-hero__perk-icon {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	color: var(--dm-gold);
}

@media (min-width: 700px) {
	.dm-gift-box-hero__perks {
		gap: 8px 18px;
		margin: 24px 0 0;
	}
	.dm-gift-box-hero__perks li {
		font-size: 13px;
		gap: 8px;
	}
	.dm-gift-box-hero__perk-icon {
		width: 16px;
		height: 16px;
	}
}

.dm-gift-box-hero__media,
.dm-gift-box-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
}

.dm-gift-box-hero__media img {
	object-fit: cover;
	object-position: 60% 42%;
}

.dm-gift-box-hero::after {
	display: none;
}

.dm-gift-box-builder__selection {
	padding: 22px 14px 16px;
	background: #fcf9f4;
	margin-top: 28px;
	border-radius: 16px;
}

/* Section heading layout: the rule + heading block + rule should sit
   in the center of the section as a single compact unit. The group is
   constrained to a reasonable max-width so the rules never end up far
   from the heading text — even on wide viewports. */
.dm-gift-box-section-heading {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 12px;
	margin: 28px 0 18px;
	text-align: center;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.dm-gift-box-section-heading__rule {
	flex: 0 0 32px;
	width: 32px;
	height: 1px;
	margin-top: 10px;
	background: var(--dm-tlight);
}

.dm-gift-box-section-heading > div {
	flex: 0 1 auto;
	min-width: 0;
}

.dm-gift-box-section-heading h2 {
	margin: 0;
	color: var(--dm-tdark);
	font-family: "DM Sans", sans-serif;
	font-size: clamp(17px, 4.4vw, 23px);
	font-weight: 500;
	letter-spacing: 0.07em;
	line-height: 1.1;
}

.dm-gift-box-section-heading p {
	max-width: 300px;
	margin: 6px auto 0;
	color: var(--dm-tmid);
	font-size: 13px;
	line-height: 1.4;
}

.dm-gift-box-bundles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 11px;
}

.dm-gift-box-bundle-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
	min-height: clamp(220px, 48vw, 260px);
	padding: 0;
	color: var(--dm-tdark);
	background: #fffaf4;
	background-size: cover;
	background-position: center 38%;
	background-repeat: no-repeat;
	border: 1px solid rgba(92, 86, 78, 0.2);
	border-radius: 10px;
	cursor: pointer;
	text-align: center;
	overflow: hidden;
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.dm-gift-box-bundle-card:hover,
.dm-gift-box-bundle-card:focus-visible {
	border-color: var(--dm-gold);
	outline: none;
	transform: translateY(-2px);
}

.dm-gift-box-bundle-card:focus-visible {
	box-shadow: 0 0 0 3px rgba(201, 150, 42, 0.24);
}

.dm-gift-box-bundle-card.is-selected {
	border: 2px solid var(--dm-gold);
	box-shadow: 0 8px 18px rgba(201, 150, 42, 0.16);
}

.dm-gift-box-bundle-card__badge {
	position: absolute;
	top: -11px;
	left: 50%;
	z-index: 2;
	padding: 4px 12px;
	color: #fff9ed;
	background: var(--dm-gold);
	border-radius: 12px;
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1;
	text-transform: uppercase;
	transform: translateX(-50%);
	white-space: nowrap;
}

.dm-gift-box-bundle-card__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	overflow: hidden;
	pointer-events: none;
}

/* Dark-to-transparent gradient overlay so the price text remains readable
   on top of the image. The gradient is stronger at the bottom where the
   content sits and fades to transparent at the top. */
.dm-gift-box-bundle-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0) 35%,
		rgba(0, 0, 0, 0.32) 70%,
		rgba(0, 0, 0, 0.55) 100%
	);
}

.dm-gift-box-bundle-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%;
	border: 0;
}

.dm-gift-box-bundle-card:nth-child(2) .dm-gift-box-bundle-card__media img {
	object-position: 56% 32%;
}

@media (min-width: 700px) {
	.dm-gift-box-bundle-card {
		min-height: clamp(260px, 24vw, 320px);
	}
}

.dm-gift-box-bundle-card__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 28px 14px 18px;
}

.dm-gift-box-bundle-card__name {
	font-family: "Cormorant Garamond", serif;
	font-size: clamp(18px, 4.6vw, 24px);
	font-weight: 400;
	line-height: 1.05;
	color: #fff9ed;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.dm-gift-box-bundle-card__meta {
	color: rgba(255, 249, 237, 0.92);
	font-size: 11px;
	font-weight: 400;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.32);
}

.dm-gift-box-bundle-card__price {
	margin-top: 4px;
	color: #fff9ed;
	font-size: clamp(20px, 5vw, 27px);
	font-weight: 500;
	line-height: 1;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.dm-gift-box-bundle-card__price .woocommerce-Price-currencySymbol {
	margin-right: 2px;
}

.dm-gift-box-bundle-card__check {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 25px;
	height: 25px;
	color: #fffaf0;
	background: var(--dm-gold);
	border-radius: 50%;
	font-size: 14px;
	font-weight: 500;
	opacity: 0;
	transform: scale(0.7);
	transition: opacity 180ms ease, transform 180ms ease;
}

.dm-gift-box-bundle-card.is-selected .dm-gift-box-bundle-card__check {
	opacity: 1;
	transform: scale(1);
}

.dm-gift-box-notice {
	padding: 18px;
	color: var(--dm-tmid);
	background: var(--dm-ivory2);
	border: 1px solid rgba(92, 86, 78, 0.2);
	border-radius: 8px;
	text-align: center;
}

.dm-gift-box-benefits {
	display: grid;
	gap: 8px;
	margin: 18px 0 20px;
	padding: 0;
	list-style: none;
	color: var(--dm-tmid);
	font-size: 12px;
}

.dm-gift-box-benefits li {
	display: flex;
	align-items: center;
	gap: 9px;
}

.dm-gift-box-benefits li span {
	display: inline-grid;
	place-items: center;
	width: 17px;
	height: 17px;
	color: var(--dm-tmid);
	border: 1px solid var(--dm-tlight);
	border-radius: 50%;
	font-size: 10px;
}

.dm-gift-box-builder__continue {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	min-height: 54px;
	padding: 0 20px;
	color: #fff9ed;
	background: #b96c0d;
	border: 1px solid #b96c0d;
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: background-color 180ms ease, border-color 180ms ease, opacity 180ms ease;
	box-sizing: border-box;
}

.dm-gift-box-builder__continue:hover:not(:disabled),
.dm-gift-box-builder__continue:focus-visible:not(:disabled) {
	background: var(--dm-tdark);
	border-color: var(--dm-tdark);
	outline: none;
}

.dm-gift-box-builder__continue:focus-visible {
	box-shadow: 0 0 0 3px rgba(201, 150, 42, 0.24);
}

.dm-gift-box-builder__continue:disabled {
	cursor: not-allowed;
	opacity: 0.48;
}

@media (min-width: 700px) {
	.dm-gift-box-builder {
		width: min(100%, 1180px);
		padding: 14px;
	}

	/* On desktop, flatten the hero so we don't get "box in a box" — the
	   builder background, the panel background, and the hero background
	   each used to draw a nested rounded card. Keep the outer builder
	   background but make the panel transparent and let the hero sit
	   edge-to-edge with the image as the only visual frame. */
	.dm-gift-box-panel {
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.dm-gift-box-progress {
		overflow: visible;
		mask-image: none;
		padding: 4px 0 14px;
	}

	.dm-gift-box-progress ol {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		padding: 0;
		gap: 6px;
	}

	.dm-gift-box-builder__footer {
		flex-direction: row;
		gap: 10px;
	}

	.dm-gift-box-builder__footer > .dm-gift-box-builder__back {
		order: 0;
		flex: 1 1 0;
		min-width: 0;
	}

	.dm-gift-box-builder__footer > .dm-gift-box-builder__continue {
		order: 0;
		flex: 1 1 0;
		min-width: 0;
	}

	.dm-gift-box-progress li {
		padding: 0;
		font-size: 12px;
	}

	.dm-gift-box-progress li + li::before {
		width: 100%;
		margin: 0 6px;
		max-width: 60px;
		justify-self: start;
	}

	.dm-gift-box-progress li span {
		width: 28px;
		height: 28px;
		font-size: 12px;
	}

	.dm-gift-box-hero {
		display: grid;
		grid-template-columns: minmax(340px, 1fr) minmax(420px, 1.25fr);
		gap: clamp(20px, 3vw, 32px);
		align-items: center;
		min-height: 0;
		height: 60vh;
		max-height: 640px;
		padding: 0;
		background: transparent;
	}

	.dm-gift-box-hero__copy {
		position: relative;
		inset: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		order: 1;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		text-shadow: none;
	}

	.dm-gift-box-hero__eyebrow {
		margin: 0 0 18px;
		font-size: 11px;
	}

	.dm-gift-box-hero__divider {
		display: block;
		width: clamp(40px, 5vw, 64px);
		height: 1px;
		margin: 22px 0 18px;
		background: var(--dm-gold);
	}

	.dm-gift-box-hero h1 {
		margin: 0;
		font-size: clamp(38px, 3.6vw, 64px);
		font-weight: 500;
		letter-spacing: 0em;
		line-height: 1.0;
		text-transform: uppercase;
		color: var(--dm-black);
	}

	.dm-gift-box-hero h1 em {
		font-style: italic;
		font-weight: 400;
		text-transform: none;
		color: var(--dm-gold);
	}

	.dm-gift-box-hero__intro {
		max-width: 360px;
		margin: 18px 0 0;
		font-size: 15px;
		line-height: 1.5;
		color: var(--dm-tmid);
	}

	.dm-gift-box-hero__media {
		order: 2;
		position: relative;
		min-width: 0;
		height: 100%;
		overflow: hidden;
		border-radius: 14px;
		background: var(--dm-ivory2);
		box-shadow: 0 12px 28px rgba(28, 25, 21, 0.10);
	}

	.dm-gift-box-hero__media img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 60% 52%;
	}

	.dm-gift-box-hero::after {
		display: none;
	}

	.dm-gift-box-builder__selection {
		padding: 28px 22px 22px;
		margin-top: 36px;
		border-radius: 20px;
	}

	.dm-gift-box-step__inner {
		padding: 28px 22px 22px;
	}

	.dm-gift-box-products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
	}

	.dm-gift-box-message__field {
		min-height: 140px;
		font-size: 15px;
	}
}

/* ============================================================
 * Phases 4–7 — review, add-ons, checkout summary, final thanks
 * ============================================================ */

.dm-gift-box-review {
	background: var(--dm-ivory2);
	border: 1px solid rgba(17, 17, 17, 0.06);
	border-radius: 18px;
	padding: clamp(20px, 4vw, 32px);
}

.dm-gift-box-review__list {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.dm-gift-box-review__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	align-items: start;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.dm-gift-box-review__row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.dm-gift-box-review__row dt {
	font-family: "DM Sans", sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dm-tmid);
	margin: 0;
}

.dm-gift-box-review__row dd {
	margin: 0;
	min-width: 0;
	color: var(--dm-black);
	font-family: "DM Sans", sans-serif;
	font-size: 14px;
	line-height: 1.5;
	overflow-wrap: break-word;
}

.dm-gift-box-review__name {
	display: block;
	font-family: "Cormorant Garamond", serif;
	font-size: 24px;
	font-weight: 400;
	color: var(--dm-black);
	margin-bottom: 4px;
}

.dm-gift-box-review__price {
	display: inline-block;
	font-weight: 500;
	color: var(--dm-gold);
}

.dm-gift-box-review__products,
.dm-gift-box-review__addons {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dm-gift-box-review__row[data-review-row="addons"] {
	margin-top: 10px;
	padding: 14px 16px;
	background: var(--dm-ivory);
	border: 1px solid rgba(17, 17, 17, 0.06);
	border-radius: 12px;
}

.dm-gift-box-review__row[data-review-row="addons"] dt {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dm-tmid);
	margin-bottom: 10px;
}

.dm-gift-box-review__product {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 12px;
	align-items: center;
}

.dm-gift-box-review__product img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 10px;
	background: var(--dm-ivory);
	border: 1px solid rgba(17, 17, 17, 0.06);
}

.dm-gift-box-review__product-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.dm-gift-box-review__product-name {
	font-weight: 500;
	color: var(--dm-black);
	font-size: 14px;
}

.dm-gift-box-review__product-price {
	font-size: 13px;
	color: var(--dm-tmid);
}

.dm-gift-box-review__empty {
	padding: 14px 16px;
	border: 1px dashed rgba(17, 17, 17, 0.18);
	border-radius: 12px;
	color: var(--dm-tmid);
	font-family: "DM Sans", sans-serif;
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}

.dm-gift-box-review__message.is-empty,
.dm-gift-box-checkout__row .is-empty {
	color: var(--dm-tlight);
	font-style: italic;
}

/* Cash-on-Delivery surcharge row in the checkout summary. Styled
   distinctly from the other rows so it's clear the amount is a separate
   line item that will be added to the order total. */
.dm-gift-box-checkout__row .dm-gift-box-checkout__cod-fee {
	color: var(--dm-gold);
	font-weight: 500;
}

.dm-gift-box-checkout__row:has(.dm-gift-box-checkout__cod-fee) {
	border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

/* Prepaid Packaging fee row. Same visual treatment as the COD row so
   the buyer can see at a glance that the order has an extra line-item
   charge. */
.dm-gift-box-checkout__row .dm-gift-box-checkout__shipping-fee {
	color: var(--dm-gold);
	font-weight: 500;
}

.dm-gift-box-checkout__row:has(.dm-gift-box-checkout__shipping-fee) {
	border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.dm-gift-box-review__addon {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--dm-tdark);
}

.dm-gift-box-review__addon-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(201, 150, 42, 0.12);
	color: var(--dm-gold);
	flex-shrink: 0;
}

.dm-gift-box-review__addon-name {
	flex: 1;
}

.dm-gift-box-review__addon-price {
	font-weight: 500;
	color: var(--dm-gold);
	letter-spacing: 0.08em;
	font-size: 12px;
	margin-left: auto;
}

/* ---------- Step 5: checkout summary ---------- */
.dm-gift-box-checkout {
	background: var(--dm-ivory2);
	border: 1px solid rgba(17, 17, 17, 0.06);
	border-radius: 18px;
	padding: clamp(20px, 4vw, 32px);
}

.dm-gift-box-checkout__layout {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 3vw, 28px);
}

.dm-gift-box-checkout__main,
.dm-gift-box-checkout__sidebar,
.dm-gift-box-checkout__payment {
	min-width: 0;
}

.dm-gift-box-checkout__rows {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.dm-gift-box-checkout__row {
	display: grid;
	grid-template-columns: minmax(120px, 200px) 1fr;
	gap: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.dm-gift-box-checkout__row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.dm-gift-box-checkout__row dt {
	font-family: "DM Sans", sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dm-tmid);
	margin: 4px 0 0;
}

.dm-gift-box-checkout__row dd {
	margin: 0;
	color: var(--dm-black);
	font-family: "DM Sans", sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

.dm-gift-box-checkout__note {
	margin: 16px 0 0;
	font-family: "DM Sans", sans-serif;
	font-size: 12px;
	color: var(--dm-tmid);
	text-align: center;
}

.dm-gift-box-builder__continue--primary {
	background: var(--dm-black);
	color: #fff;
}

.dm-gift-box-builder__continue--primary span {
	color: #fff;
}

/* ---------- Custom checkout form (Step 6) ---------- */
.dm-gift-box-checkout-form {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin-top: 18px;
}

.dm-gift-box-checkout-fieldset {
	border: none;
	padding: 0;
	margin: 0;
}

.dm-gift-box-checkout-fieldset legend {
	font-family: "DM Sans", sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dm-tmid);
	margin: 0 0 10px;
	padding: 0;
}

/* The checkout form is a 2-column grid on every viewport above mobile.
   First name / Last name, City / Postcode, State / Phone, etc. sit on
   the same row. Wide fields (Email, Address, Apartment, Country) carry
   the `dm-gift-box-checkout-field--full` class and span both columns.
   `minmax(0, 1fr)` (not bare `1fr`) so the columns can shrink below
   their content's intrinsic min-width — without this the form refuses
   to shrink inside the 3-column checkout layout and pushes the
   sidebar/payment to wrap to a new row on narrow desktops. */
.dm-gift-box-checkout-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 12px;
}

@media (max-width: 480px) {
	.dm-gift-box-checkout-grid {
		grid-template-columns: 1fr;
	}
}

.dm-gift-box-checkout-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	font-family: "DM Sans", sans-serif;
	font-size: 12px;
	color: var(--dm-tmid);
}

.dm-gift-box-checkout-field--full {
	grid-column: 1 / -1;
}

.dm-gift-box-checkout-field input,
.dm-gift-box-checkout-field select {
	font-family: "DM Sans", sans-serif;
	font-size: 14px;
	color: var(--dm-black);
	background: #fff;
	border: 1px solid rgba(17, 17, 17, 0.16);
	border-radius: 10px;
	padding: 10px 12px;
	outline: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.dm-gift-box-checkout-field input:focus,
.dm-gift-box-checkout-field select:focus {
	border-color: var(--dm-gold);
	box-shadow: 0 0 0 3px rgba(201, 150, 42, 0.15);
}

.dm-gift-box-checkout-field input:invalid:not(:placeholder-shown) {
	border-color: #c0392b;
}

.dm-gift-box-checkout-required {
	color: var(--dm-gold);
	font-style: normal;
	margin-left: 2px;
}

.dm-gift-box-checkout-gateways {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dm-gift-box-checkout-gateway {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 16px;
	border: 1px solid rgba(17, 17, 17, 0.12);
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.18s ease, background 0.18s ease;
}

.dm-gift-box-checkout-gateway:hover {
	border-color: rgba(201, 150, 42, 0.6);
}

.dm-gift-box-checkout-gateway:has(input:checked) {
	border-color: var(--dm-gold);
	background: rgba(201, 150, 42, 0.05);
}

.dm-gift-box-checkout-gateway__radio {
	margin-top: 4px;
	accent-color: var(--dm-gold);
	width: 18px;
	height: 18px;
}

.dm-gift-box-checkout-gateway__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.dm-gift-box-checkout-gateway__title {
	font-family: "DM Sans", sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: var(--dm-black);
}

.dm-gift-box-checkout-gateway__desc {
	font-family: "DM Sans", sans-serif;
	font-size: 12px;
	color: var(--dm-tmid);
	line-height: 1.4;
}

.dm-gift-box-checkout-loader,
.dm-gift-box-checkout-empty {
	font-family: "DM Sans", sans-serif;
	font-size: 13px;
	color: var(--dm-tmid);
	padding: 14px 16px;
	border: 1px dashed rgba(17, 17, 17, 0.18);
	border-radius: 12px;
	text-align: center;
}

.dm-gift-box-checkout-error {
	font-family: "DM Sans", sans-serif;
	font-size: 13px;
	color: #fff;
	background: #c0392b;
	border-radius: 10px;
	padding: 10px 14px;
	margin: 6px 0 0;
}

/* ---------- Trust badges (Step 6) ---------- */
.dm-gift-box-trust {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 18px 0 0;
	padding: 14px 0;
	border-top: 1px solid rgba(17, 17, 17, 0.08);
	list-style: none;
}

.dm-gift-box-trust li {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
	color: var(--dm-tmid);
}

.dm-gift-box-trust__icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	color: var(--dm-gold);
	background: rgba(201, 150, 42, 0.08);
	border-radius: 999px;
}

.dm-gift-box-trust__label {
	font-family: "DM Sans", sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dm-tdark);
	line-height: 1.2;
}

@media (min-width: 700px) {
	.dm-gift-box-trust {
		padding: 16px 22px;
		gap: 16px;
	}
}

/* ---------- Step 7: final confirmation ---------- */
.dm-gift-box-thanks {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 560px;
	margin: 0 auto;
	padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
	background: var(--dm-ivory);
	border-radius: 24px;
	border: 1px solid rgba(201, 150, 42, 0.2);
}

.dm-gift-box-thanks__icon {
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	margin: 0 auto 18px;
	color: var(--dm-gold);
	background: transparent;
	border: 1.5px solid var(--dm-gold);
	border-radius: 999px;
}

.dm-gift-box-thanks__media {
	display: block;
	position: relative;
	width: 100%;
	max-width: 320px;
	margin: 0 auto 22px;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(28, 25, 21, 0.12);
}

.dm-gift-box-thanks__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 4 / 5;
}

.dm-gift-box-thanks h2 {
	font-family: "Cormorant Garamond", serif;
	font-size: clamp(32px, 4vw, 44px);
	font-weight: 400;
	margin: 0 0 12px;
	color: var(--dm-black);
	line-height: 1.1;
}

.dm-gift-box-thanks p {
	font-family: "DM Sans", sans-serif;
	font-size: 14px;
	color: var(--dm-tmid);
	line-height: 1.6;
	margin: 0 0 6px;
}

.dm-gift-box-thanks__actions {
	margin-top: 28px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: 10px;
	width: 100%;
	max-width: 320px;
}

@media (min-width: 700px) {
	.dm-gift-box-addons {
		grid-template-columns: 1fr 1fr;
	}

	.dm-gift-box-review__row {
		grid-template-columns: minmax(120px, 180px) 1fr;
		gap: 18px;
	}

	.dm-gift-box-review__row dt {
		margin-top: 4px;
	}

	.dm-gift-box-review__product {
		grid-template-columns: 72px 1fr;
	}

	.dm-gift-box-review__product img {
		width: 72px;
		height: 72px;
	}

	.dm-gift-box-thanks__media {
		max-width: 360px;
	}

	.dm-gift-box-thanks__actions {
		flex-direction: row;
		max-width: none;
	}

	.dm-gift-box-thanks__actions .dm-gift-box-builder__continue {
		flex: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dm-gift-box-builder *,
	.dm-gift-box-builder *::before,
	.dm-gift-box-builder *::after {
		transition-duration: 0.01ms !important;
	}
}

/* Desktop checkout layout.
   This block must stay at the very end of the stylesheet: the base
   `.dm-gift-box-checkout__layout` rule (single class, column direction)
   appears later in the file than the other desktop media queries, and a
   media query adds no specificity — so an earlier block would silently
   lose to it and the checkout would stack. */
@media (min-width: 700px) {
	.dm-gift-box-checkout__sidebar,
	.dm-gift-box-checkout__payment {
		min-width: 0;
		margin: 0;
		background: #fff;
		border: 1px solid rgba(17, 17, 17, 0.06);
		border-radius: 16px;
		padding: clamp(16px, 1.6vw, 22px);
	}
}

@media (min-width: 900px) {
	.dm-gift-box-checkout__layout {
		display: grid;
		grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
		grid-template-rows: auto auto auto;
		align-items: start;
		gap: clamp(16px, 2vw, 24px);
	}

	/* Form on the left spanning the full height; order summary, payment
	   method, and place-order actions stacked in the right rail, filling
	   the space the form leaves. */
	.dm-gift-box-checkout__main {
		grid-column: 1;
		grid-row: 1 / -1;
		min-width: 0;
	}

	.dm-gift-box-checkout__sidebar {
		grid-column: 2;
		grid-row: 1;
	}

	.dm-gift-box-checkout__payment {
		grid-column: 2;
		grid-row: 2;
	}

	.dm-gift-box-checkout__actions {
		grid-column: 2;
		grid-row: 3;
	}

	/* Let the form's inner 2-column grid shrink inside its track instead of
	   forcing the whole layout wider. */
	.dm-gift-box-checkout-form,
	.dm-gift-box-checkout-fieldset,
	.dm-gift-box-checkout-grid,
	.dm-gift-box-checkout-field {
		min-width: 0;
	}
}