/* Hero with category orbit. */
.syf-coffee-hero {
	--syf-coffee-orbit-time: 80s;
}

.syf-coffee-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: clamp(24px, 4vw, 56px);
}

.syf-coffee .syf-coffee-hero-title {
	margin: 18px 0 0;
	color: var(--syf-coffee-ink);
	font-size: clamp(2.1rem, 4.6vw, 3.7rem);
	line-height: 1.2;
}

.syf-coffee .syf-coffee-hero-title em {
	position: relative;
	z-index: 0;
	white-space: nowrap;
}

.syf-coffee .syf-coffee-hero-title em::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: .08em;
	z-index: -1;
	height: .28em;
	border-radius: 99px;
	background: var(--syf-coffee-peach);
	opacity: .85;
}

.syf-coffee-lead {
	max-width: 520px;
	margin: 16px 0 0;
	color: var(--syf-coffee-mute);
	font-size: 1.08rem;
}

.syf-coffee-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.syf-coffee-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 28px;
}

.syf-coffee-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	color: var(--syf-coffee-ink);
	font-weight: 700;
	font-size: .86rem;
}

.syf-coffee-chip svg,
.syf-coffee-chip i {
	width: 17px;
	height: 17px;
	color: var(--syf-coffee-accent);
	font-size: 15px;
	fill: currentColor;
}

/* Orbit */
.syf-coffee-orbit-wrap {
	position: relative;
	width: min(100%, 540px);
	margin-inline: auto;
	aspect-ratio: 1;
}

.syf-coffee-ring {
	position: absolute;
	border: 1.5px dashed var(--syf-coffee-dash);
	border-radius: 50%;
}

.syf-coffee-ring-1 {
	inset: 34px;
	animation: syf-coffee-spin 90s linear infinite;
}

.syf-coffee-ring-2 {
	inset: 16%;
	border-width: 2px;
	border-style: dotted;
	animation: syf-coffee-spin 60s linear infinite reverse;
}

.syf-coffee-halo {
	position: absolute;
	inset: 18%;
	border-radius: 50%;
	background: radial-gradient(circle, var(--syf-coffee-halo), transparent 70%);
	filter: blur(10px);
}

.syf-coffee-core {
	position: absolute;
	inset: 22%;
	overflow: hidden;
	border: 8px solid var(--syf-coffee-glass-2);
	border-radius: 50%;
	box-shadow: 0 30px 70px var(--syf-coffee-shadow);
}

.syf-coffee-core img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s;
}

.syf-coffee-orbit-wrap:hover .syf-coffee-core img {
	transform: scale(1.06);
}

.syf-coffee-core-tag {
	position: absolute;
	bottom: 17%;
	inset-inline-start: 6%;
	z-index: 3;
	padding: 10px 16px;
	border-radius: var(--syf-coffee-r-md);
	font-size: .84rem;
}

.syf-coffee-core-tag b {
	display: block;
	color: var(--syf-coffee-ink);
	font-size: 1rem;
}

.syf-coffee-stars {
	color: var(--syf-coffee-star);
	letter-spacing: 1px;
}

.syf-coffee-orbit {
	position: absolute;
	inset: 34px;
	animation: syf-coffee-spin var(--syf-coffee-orbit-time) linear infinite;
}

.syf-coffee-orbit-wrap:hover .syf-coffee-orbit,
.syf-coffee-orbit-wrap:hover .syf-coffee-oi-in,
.syf-coffee-orbit-wrap:focus-within .syf-coffee-orbit,
.syf-coffee-orbit-wrap:focus-within .syf-coffee-oi-in {
	animation-play-state: paused;
}

.syf-coffee-oi {
	position: absolute;
	width: 74px;
	transform: translate(-50%, -50%);
}

.syf-coffee-oi-in {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	animation: syf-coffee-spin var(--syf-coffee-orbit-time) linear infinite reverse;
}

.syf-coffee-oi-ph {
	display: block;
	overflow: hidden;
	width: 64px;
	height: 64px;
	border: 3px solid var(--syf-coffee-glass-2);
	border-radius: 50%;
	background: var(--syf-coffee-tile);
	box-shadow: 0 10px 24px var(--syf-coffee-shadow);
	transition: transform .25s;
}

.syf-coffee-oi-ph img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.syf-coffee-oi:hover .syf-coffee-oi-ph,
.syf-coffee-oi:focus-visible .syf-coffee-oi-ph {
	transform: scale(1.14);
}

.syf-coffee-oi-nm {
	display: block;
	padding: 2px 8px;
	border: 1px solid var(--syf-coffee-glass-b);
	border-radius: 999px;
	background: var(--syf-coffee-glass-2);
	color: var(--syf-coffee-ink);
	font-weight: 800;
	font-size: .72rem;
	white-space: nowrap;
}

@keyframes syf-coffee-spin {
	to {
		transform: rotate(360deg);
	}
}

.syf-coffee-mcats {
	display: none;
}

@media (max-width: 900px) {
	.syf-coffee-hero-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.syf-coffee-orbit-wrap {
		order: -1;
	}
}

@media (max-width: 640px) {
	.syf-coffee-orbit .syf-coffee-oi {
		display: none;
	}

	.syf-coffee-ring-1 {
		inset: 10px;
	}

	.syf-coffee-orbit-wrap {
		width: min(100%, 330px);
	}

	.syf-coffee-core {
		inset: 12%;
	}

	.syf-coffee-core-tag {
		bottom: 4%;
		inset-inline-start: 0;
	}

	.syf-coffee .syf-coffee-hero-title {
		font-size: 2rem;
	}

	.syf-coffee-mcats {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 12px 8px;
		margin-top: 22px;
	}

	.syf-coffee-mcats a {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		color: var(--syf-coffee-ink);
	}

	.syf-coffee-mcats .syf-coffee-oi-ph {
		width: 58px;
		height: 58px;
	}

	.syf-coffee-mcats small {
		font-weight: 800;
		font-size: .72rem;
		line-height: 1.3;
		text-align: center;
	}
}