.shop-experience {
	position: relative;
}

.shop-experience-head {
	max-width: 860px;
	margin-bottom:
		var(--sp-50);
}

.shop-experience-head .kicker {
	margin-bottom:
		var(--sp-10);
}

.shop-experience-head h2 {
	max-width: 760px;
	margin-bottom:
		var(--sp-15);
}

.shop-experience-head .lead {
	max-width: 760px;
	margin: 0;
}

.shop-process {
	position: relative;
	display: grid;
	grid-template-columns:
		repeat(4, minmax(0, 1fr));
	gap: 0;
	border-top:
		1px solid var(--border-soft);
	border-bottom:
		1px solid var(--border-soft);
}

.shop-process::before {
	content: "";
	position: absolute;
	top: 32px;
	left: 0;
	right: 0;
	height: 1px;
	background:
		linear-gradient(
			90deg,
			rgba(122,77,255,0),
			rgba(122,77,255,.55) 18%,
			rgba(122,77,255,.34) 48%,
			rgba(201,163,92,.32) 78%,
			rgba(201,163,92,0)
		);
	pointer-events: none;
}

.shop-process-step {
	position: relative;
	min-width: 0;
	padding:
		56px
		clamp(20px, 2.4vw, 34px)
		38px;
	border-right:
		1px solid var(--border-soft);
	background:
		transparent;
	transition:
		background .2s ease;
}

.shop-process-step:first-child {
	padding-left: 0;
}

.shop-process-step:last-child {
	padding-right: 0;
	border-right: 0;
}

.shop-process-step:hover {
	background:
		linear-gradient(
			180deg,
			rgba(122,77,255,.035),
			rgba(255,255,255,.012) 55%,
			transparent
		);
}

.shop-process-number {
	position: absolute;
	top: 20px;
	left:
		clamp(20px, 2.4vw, 34px);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 24px;
	padding:
		0 7px;
	border:
		1px solid rgba(122,77,255,.28);
	border-radius:
		999px;
	background:
		var(--background);
	color:
		var(--plum-soft);
	font-family:
		var(--font-mono);
	font-size:
		.64rem;
	font-weight:
		700;
	letter-spacing:
		.12em;
	box-shadow:
		0 0 0 4px var(--background);
}

.shop-process-step:first-child
.shop-process-number {
	left: 0;
}

.shop-process-number::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -10px;
	width: 5px;
	height: 5px;
	transform:
		translateX(-50%);
	border-radius:
		50%;
	background:
		var(--gold);
	box-shadow:
		0 0 0 3px var(--background);
}

.shop-process-content h3 {
	margin:
		16px 0 12px;
	font-family:
		var(--font-serif);
	font-size:
		clamp(1.2rem, 1.55vw, 1.5rem);
	font-weight:
		400;
	line-height:
		1.22;
	letter-spacing:
		.5px;
	color:
		var(--foreground);
	transition:
		color .2s ease;
}

.shop-process-content p {
	margin: 0;
	color:
		var(--muted);
	font-size:
		.94rem;
	line-height:
		1.7;
}

.shop-process-step:hover
.shop-process-content h3 {
	color:
		var(--plum-soft);
}

.shop-experience-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap:
		var(--sp-30);
	margin-top:
		var(--sp-40);
	padding-top:
		var(--sp-30);
	border-top:
		1px solid var(--border-soft);
}

.shop-experience-footer p {
	max-width: 540px;
	margin: 0;
	color:
		var(--muted);
	font-size:
		1rem;
	line-height:
		1.6;
}

.shop-experience-footer .btn {
	flex:
		0 0 auto;
}