/**
 * Chocolatier starter homepage (templates/front-chocolatier.html).
 *
 * Loaded only on a front page that uses the front-chocolatier template. Every
 * selector is scoped under .cs-front--chocolatier or uses a cs-chocolatier-
 * class, so nothing here leaks into the rest of the store.
 */

.cs-front--chocolatier {
	--cs-choc-gold: var(--wp--preset--color--butter);
	--cs-choc-cocoa: var(--wp--preset--color--grape-deep);
	--cs-choc-radius: var(--wp--custom--radius--card);
	--cs-choc-arch: 999px 999px var(--wp--custom--radius--card) var(--wp--custom--radius--card);
}

/* ---------- Shared bits ---------- */

.cs-chocolatier-arch {
	margin: 0;
	border-radius: var(--cs-choc-arch);
	overflow: hidden;
}

.cs-chocolatier-arch img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cs-chocolatier-gild {
	background: linear-gradient(transparent 64%, var(--cs-choc-gold) 64%, var(--cs-choc-gold) 88%, transparent 88%);
	color: var(--wp--preset--color--accent);
	padding-inline: 0.04em;
}

/* ---------- Hero ---------- */

.cs-chocolatier-hero {
	position: relative;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);
	overflow: hidden;
}

.cs-chocolatier-hero::before {
	content: "";
	position: absolute;
	inset-block-start: -18rem;
	inset-inline-end: -14rem;
	inline-size: 46rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, var(--wp--preset--color--butter-soft), transparent);
	pointer-events: none;
}

.cs-chocolatier-hero__grid {
	position: relative;
	gap: var(--wp--preset--spacing--60);
}

.cs-chocolatier-hero__copy > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.cs-chocolatier-hero__title {
	margin-block-start: var(--wp--preset--spacing--30) !important;
	font-size: clamp(2.75rem, 6.4vw, 6rem) !important;
	font-weight: 600;
	line-height: 0.98;
	letter-spacing: -0.03em;
}

.cs-chocolatier-hero__lead {
	max-inline-size: 38ch;
	color: var(--wp--preset--color--muted);
}

.cs-chocolatier-hero__actions {
	gap: 0.75rem;
}

.cs-chocolatier-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	max-inline-size: 36rem;
	margin-block-end: 0;
	padding: var(--wp--preset--spacing--30) 0 0;
	border-block-start: 1.5px solid var(--wp--preset--color--line);
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
	color: var(--wp--preset--color--muted);
}

.cs-chocolatier-facts li {
	margin: 0;
}

.cs-chocolatier-facts strong {
	display: block;
	margin-block-end: 0.15rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.1;
	color: var(--wp--preset--color--accent);
}

.cs-chocolatier-hero__window {
	position: relative;
	max-inline-size: 31rem;
	margin-inline: auto;
	padding: 0.85rem;
}

.cs-chocolatier-hero__window::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--cs-choc-gold);
	border-radius: var(--cs-choc-arch);
	pointer-events: none;
}

.cs-chocolatier-hero__window > * {
	margin: 0;
}

.cs-chocolatier-hero__image {
	position: relative;
	box-shadow: 0 34px 60px -34px rgba(43, 26, 20, 0.55);
}

.cs-chocolatier-hero__sticker {
	position: absolute;
	z-index: 2;
	inset-block-start: 14%;
	inset-inline-end: -1.25rem;
	background: var(--cs-choc-gold);
	animation: cs-chocolatier-sway 7s ease-in-out infinite;
}

.cs-chocolatier-hero__tag {
	position: absolute;
	z-index: 2;
	inset-block-end: 2.5rem;
	inset-inline-start: -1.5rem;
	display: grid;
	gap: 0.15rem;
	max-inline-size: 15rem;
	padding: 0.85rem 1.1rem;
	border-radius: var(--wp--custom--radius--field);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--md);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.cs-chocolatier-hero__tag a {
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.cs-chocolatier-hero__tag a:hover {
	text-decoration: underline;
}

@keyframes cs-chocolatier-sway {

	0%,
	100% {
		rotate: -12deg;
	}

	50% {
		rotate: -4deg;
	}
}

/* ---------- The counter (categories) ---------- */

.cs-chocolatier-counter__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.cs-chocolatier-tile {
	position: relative;
	margin: 0 !important;
	text-align: center;
}

.cs-chocolatier-tile > * {
	margin: 0;
}

.cs-chocolatier-tile__image {
	box-shadow: 0 0 0 5px var(--wp--preset--color--surface), 0 0 0 6.5px var(--wp--preset--color--line);
	transition: box-shadow var(--wp--custom--transition);
}

.cs-chocolatier-tile:hover .cs-chocolatier-tile__image {
	box-shadow: 0 0 0 5px var(--wp--preset--color--surface), 0 0 0 6.5px var(--cs-choc-gold);
}

.cs-chocolatier-tile:hover .cs-chocolatier-tile__image img {
	transform: scale(1.05);
}

.cs-chocolatier-tile__title {
	margin-block-start: 0.85rem !important;
	line-height: 1.15;
}

.cs-chocolatier-tile__title a {
	text-decoration: none;
}

.cs-chocolatier-tile__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--cs-choc-arch);
}

.cs-chocolatier-tile__title a:focus-visible {
	outline: none;
}

.cs-chocolatier-tile:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 4px;
	border-radius: var(--cs-choc-arch);
}

.cs-chocolatier-tile__desc {
	margin-block-start: 0.25rem !important;
	color: var(--wp--preset--color--muted);
}

@media (min-width: 600px) {

	.cs-chocolatier-counter__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {

	.cs-chocolatier-counter__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.cs-chocolatier-tile:nth-child(even) {
		margin-block-start: var(--wp--preset--spacing--50) !important;
	}
}

/* ---------- Bean to bar ---------- */

.cs-chocolatier-craft {
	position: relative;
	padding-block: var(--wp--preset--spacing--80);
	background-image: radial-gradient(circle, rgba(242, 196, 109, 0.12) 1.5px, transparent 2px);
	background-size: 26px 26px;
}

.cs-chocolatier-craft__grid {
	gap: var(--wp--preset--spacing--70);
}

.cs-chocolatier-craft__art {
	position: relative;
}

.cs-chocolatier-craft__image {
	margin: 0;
	border-radius: var(--wp--custom--radius--panel);
	overflow: hidden;
	box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.07), 0 30px 60px -30px rgba(0, 0, 0, 0.6);
	rotate: -2deg;
	transition: rotate 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cs-chocolatier-craft__art:hover .cs-chocolatier-craft__image {
	rotate: 0deg;
}

.cs-chocolatier-craft__image img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.cs-chocolatier-craft__sticker {
	position: absolute;
	inset-block-end: -1.5rem;
	inset-inline-end: 1.5rem;
	background: var(--wp--preset--color--strawberry);
	border-color: var(--wp--preset--color--base);
}

.cs-chocolatier-craft__title {
	margin-block: 0 var(--wp--preset--spacing--30);
	line-height: 1;
}

.cs-chocolatier-craft__lead {
	max-inline-size: 40ch;
	opacity: 0.85;
}

.cs-chocolatier-process {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--50);
	padding: 0;
	list-style: none;
	counter-reset: cs-choc-step;
}

.cs-chocolatier-process li {
	position: relative;
	margin: 0;
	padding-inline-start: 3.25rem;
	line-height: 1.5;
	opacity: 0.92;
	counter-increment: cs-choc-step;
}

.cs-chocolatier-process li::before {
	content: counter(cs-choc-step);
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	display: grid;
	place-items: center;
	inline-size: 2.25rem;
	aspect-ratio: 1;
	border: 1.5px solid var(--cs-choc-gold);
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	color: var(--cs-choc-gold);
}

.cs-chocolatier-process strong {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--cs-choc-gold);
}

.cs-chocolatier-craft .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
}

@media (min-width: 600px) {

	.cs-chocolatier-process {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--50);
	}
}

/* ---------- Tasting notes ---------- */

.cs-chocolatier-tasting__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--custom--card--gap);
}

.cs-chocolatier-taste {
	--cs-taste: var(--wp--preset--color--contrast);
	--cs-pct: 72;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0 !important;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	border-radius: var(--cs-choc-radius);
	background: var(--wp--preset--color--surface);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--line);
	overflow: hidden;
	transition: transform var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.cs-chocolatier-taste::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 0.6rem;
	background: var(--cs-taste);
}

.cs-chocolatier-taste:hover {
	transform: translateY(-4px);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--line), 0 26px 40px -28px rgba(43, 26, 20, 0.5);
}

.cs-chocolatier-taste > * {
	margin: 0;
}

.cs-chocolatier-taste--ruby {
	--cs-taste: var(--wp--preset--color--strawberry);
	--cs-pct: 100;
}

.cs-chocolatier-taste--milk {
	--cs-taste: var(--wp--preset--color--grape);
	--cs-pct: 45;
}

.cs-chocolatier-taste--almond {
	--cs-taste: var(--wp--preset--color--accent);
}

.cs-chocolatier-dial {
	display: grid;
	place-items: center;
	inline-size: 5.5rem;
	aspect-ratio: 1;
	margin-block-end: var(--wp--preset--spacing--30) !important;
	border-radius: 50%;
	background:
		radial-gradient(closest-side, var(--wp--preset--color--surface) 78%, transparent 80% 100%),
		conic-gradient(var(--cs-taste) calc(var(--cs-pct) * 1%), var(--wp--preset--color--line) 0);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 600;
}

.cs-chocolatier-taste__title {
	line-height: 1.1;
}

.cs-chocolatier-taste__title a {
	text-decoration: none;
}

.cs-chocolatier-taste__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cs-chocolatier-taste:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

.cs-chocolatier-taste__title a:focus-visible {
	outline: none;
}

.cs-chocolatier-notes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-block: var(--wp--preset--spacing--30) !important;
}

.cs-chocolatier-notes span {
	padding: 0.2em 0.75em;
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--line);
	font-size: 0.875rem;
	font-weight: 600;
}

.cs-chocolatier-taste__pair {
	margin-block-start: auto !important;
	font-style: italic;
	color: var(--wp--preset--color--muted);
}

@media (min-width: 600px) {

	.cs-chocolatier-tasting__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {

	.cs-chocolatier-tasting__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------- Gifting ---------- */

.cs-chocolatier-gifting-wrap {
	padding-block-start: 0;
}

.cs-chocolatier-gifting {
	position: relative;
	gap: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--panel);
}

.cs-chocolatier-gifting__title {
	margin-block: 0 var(--wp--preset--spacing--30);
	line-height: 1;
}

.cs-chocolatier-gifting__lead {
	max-inline-size: 40ch;
	color: var(--wp--preset--color--muted);
}

.cs-chocolatier-steps {
	display: grid;
	gap: 0.75rem;
	margin-block: var(--wp--preset--spacing--40);
	padding: 0;
	list-style: none;
	counter-reset: cs-choc-gift;
}

.cs-chocolatier-steps li {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin: 0;
	padding: 0.7rem 1rem 0.7rem 0.7rem;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	font-weight: 600;
	counter-increment: cs-choc-gift;
}

.cs-chocolatier-steps li::before {
	content: counter(cs-choc-gift);
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 2rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--strawberry);
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--contrast);
}

.cs-chocolatier-gifting__actions {
	gap: 0.75rem;
}

.cs-chocolatier-gifting__art {
	position: relative;
}

.cs-chocolatier-gifting__image {
	margin: 0;
	border-radius: var(--wp--custom--radius--panel);
	overflow: hidden;
	box-shadow: 0 0 0 10px var(--wp--preset--color--surface);
}

.cs-chocolatier-gifting__image img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.cs-chocolatier-gifting__sticker {
	position: absolute;
	inset-block-start: -1.25rem;
	inset-inline-start: -0.75rem;
}

@media (min-width: 782px) {

	.cs-chocolatier-gifting {
		padding: var(--wp--preset--spacing--70);
	}
}

/* ---------- Winter collection ---------- */

.cs-chocolatier-winter {
	padding-block-start: 0;
}

.cs-chocolatier-winter__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

.cs-chocolatier-winter__grid > * {
	margin: 0 !important;
}

.cs-chocolatier-winter__panel {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--panel);
}

.cs-chocolatier-winter__panel > * {
	margin-block: 0;
}

.cs-chocolatier-winter__panel > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.cs-chocolatier-winter__image {
	margin-block-end: var(--wp--preset--spacing--40);
	border-radius: calc(var(--wp--custom--radius--panel) - 1rem);
	overflow: hidden;
}

.cs-chocolatier-winter__image img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.cs-chocolatier-winter__image + .cs-eyebrow {
	margin-block-start: var(--wp--preset--spacing--40);
}

.cs-chocolatier-winter__title {
	line-height: 1.05;
}

.cs-chocolatier-winter__head {
	margin-block: 0 var(--wp--preset--spacing--30);
}

@media (min-width: 1000px) {

	.cs-chocolatier-winter__grid {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		align-items: center;
	}
}

/* ---------- Story and tasting club ---------- */

.cs-chocolatier-club {
	padding-block-start: 0;
}

.cs-chocolatier-club__grid {
	gap: var(--wp--preset--spacing--40);
}

.cs-chocolatier-story {
	display: grid;
	align-content: start;
	gap: var(--wp--preset--spacing--40);
}

.cs-chocolatier-story > * {
	margin: 0;
}

.cs-chocolatier-story__image {
	border-radius: var(--wp--custom--radius--panel);
	overflow: hidden;
}

.cs-chocolatier-story__image img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.cs-chocolatier-story__copy > * {
	margin-block: 0;
}

.cs-chocolatier-story__copy > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.cs-chocolatier-story__title {
	line-height: 1.05;
}

.cs-chocolatier-news {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--panel);
	overflow: hidden;
}

.cs-chocolatier-news::before,
.cs-chocolatier-news::after {
	content: "";
	position: absolute;
	border: 2px solid var(--cs-choc-gold);
	border-radius: 50%;
	opacity: 0.3;
	pointer-events: none;
}

.cs-chocolatier-news::before {
	inline-size: 22rem;
	aspect-ratio: 1;
	inset-block-start: -9rem;
	inset-inline-end: -8rem;
}

.cs-chocolatier-news::after {
	inline-size: 14rem;
	aspect-ratio: 1;
	inset-block-start: -5rem;
	inset-inline-end: -4rem;
}

.cs-chocolatier-news > * {
	position: relative;
	margin-block: 0;
}

.cs-chocolatier-news > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.cs-chocolatier-news__title {
	line-height: 1.05;
}

.cs-chocolatier-news__lead {
	max-inline-size: 38ch;
	opacity: 0.85;
}

.cs-chocolatier-news .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--40);
}

.cs-chocolatier-news .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
}

/* ---------- Small screens ---------- */

@media (max-width: 781px) {

	.cs-chocolatier-hero {
		padding-block-start: var(--wp--preset--spacing--30);
	}

	.cs-chocolatier-hero__grid {
		gap: var(--wp--preset--spacing--50);
	}

	.cs-chocolatier-hero__actions .wp-block-button {
		flex: 1 1 auto;
	}

	.cs-chocolatier-hero__actions .wp-block-button__link {
		inline-size: 100%;
	}

	.cs-chocolatier-facts {
		gap: var(--wp--preset--spacing--20);
	}

	.cs-chocolatier-hero__window {
		max-inline-size: 24rem;
	}

	.cs-chocolatier-hero__sticker {
		inline-size: 5.75rem;
		font-size: 0.875rem;
		inset-inline-end: -0.5rem;
	}

	.cs-chocolatier-hero__tag {
		inset-inline-start: -0.5rem;
		inset-block-end: 1.5rem;
	}

	.cs-chocolatier-craft__image {
		rotate: 0deg;
	}

	.cs-chocolatier-craft__sticker {
		inline-size: 5.75rem;
		font-size: 0.875rem;
	}

	.cs-chocolatier-gifting__sticker {
		inline-size: 5.75rem;
		font-size: 0.875rem;
		inset-inline-start: auto;
		inset-inline-end: -0.5rem;
	}

	.cs-chocolatier-gifting__actions .wp-block-button {
		flex: 1 1 auto;
	}

	.cs-chocolatier-gifting__actions .wp-block-button__link {
		inline-size: 100%;
	}

	.cs-chocolatier-steps li {
		border-radius: var(--wp--custom--radius--field);
	}
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {

	.cs-front--chocolatier *,
	.cs-front--chocolatier *::before,
	.cs-front--chocolatier *::after {
		animation: none !important;
		transition: none !important;
	}

	.cs-chocolatier-tile:hover .cs-chocolatier-tile__image img,
	.cs-chocolatier-taste:hover {
		transform: none;
	}
}