/*
 * Caleigh Cooks theme: page layout and sections. Tokens and contrast table: see the plugin's
 * components.css header (same values, also exposed as theme.json presets).
 * Motifs: arch-window image frames (her kitchen window), stitched recipe-card edges,
 * jar-label collection cards, chestnut numerals (her hair). No gradients, no blurred blobs.
 */

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cc-cream, #fff8ed); color: var(--cc-ink, #263238); font-family: var(--cc-font); overflow-x: clip; }
img, video { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--cc-font); text-wrap: balance; }
p { text-wrap: pretty; }
a { text-underline-offset: 3px; }
.cc-lead { font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem); line-height: 1.55; color: var(--cc-ink); }
.cc-muted { color: var(--cc-muted); }
.cc-main { display: block; }
.cc-main > * { margin-block: 0; }
.cc-main--canvas > .entry-content, .cc-main--canvas > .wp-block-post-content { margin: 0; }
.wp-block-post-content > .cc-section, .wp-block-post-content > .cc-hero, .wp-block-post-content > .cc-contact { margin-block: 0; }

/* Sections: full-bleed bands, content held to 1200px by padding. */
.cc-section { padding: clamp(48px, 7vw, 104px) var(--cc-gutter); }
.cc-section > h2:first-child { margin-top: 0; }
.cc-section__head { max-width: 64ch; margin: 0 0 clamp(24px, 4vw, 48px); }
.cc-section__head h2 { margin: 0 0 .6rem; }
.cc-section__head p { margin: 0; font-size: 1.125rem; }
.cc-more { margin: 1.75rem 0 0; font-weight: 800; }
.cc-more a { color: var(--cc-teal-dk); text-decoration-thickness: 2px; }
.cc-actions { gap: .75rem 1rem; margin-top: 1.75rem; }

/* Button variants from page content */
.wp-block-button.is-style-quiet .wp-block-button__link { background: transparent; color: var(--cc-teal-dk); border: 2px solid var(--cc-teal-dk); }
.wp-block-button.is-style-quiet .wp-block-button__link:hover { background: var(--cc-paper); }

/* ---------- Hero (arch-window art) ---------- */
.cc-hero { display: grid; gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(28px, 5vw, 72px) var(--cc-gutter) clamp(40px, 6vw, 88px); }
@media (min-width: 900px) { .cc-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.cc-hero__title { margin: 0; font-size: clamp(2.4rem, 1.4rem + 4vw, 4.25rem); line-height: 1.02; letter-spacing: -0.02em; }
.cc-hero__text .cc-lead { max-width: 52ch; margin: 1.1rem 0 0; }
.cc-hero__note { margin: 1.5rem 0 0; padding-left: .9rem; border-left: 4px solid var(--cc-butter); color: var(--cc-muted); font-weight: 600; max-width: 46ch; }
.cc-hero__art { position: relative; justify-self: center; width: min(100%, 440px); }
.cc-hero__art img { display: block; width: 100%; border-radius: 999px 999px 28px 28px; position: relative; z-index: 1; background: var(--cc-mint); }
.cc-hero__art::before { /* solid offset arch behind the image */
	content: ""; position: absolute; inset: 16px -14px -16px 14px; border-radius: 999px 999px 28px 28px; background: var(--cc-butter); z-index: 0;
}
.cc-hero__art::after { /* twinkling star */
	content: ""; position: absolute; z-index: 2; width: 46px; height: 46px; top: 14%; left: -18px; background: var(--cc-coral);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z'/%3E%3C/svg%3E") center / contain no-repeat;
	animation: cc-twinkle 3.2s ease-in-out infinite;
}
@keyframes cc-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.7) rotate(25deg); opacity: .65; } }
.cc-hero__art--tall { width: min(100%, 380px); }
.cc-hero__art--small { width: 180px; }
.cc-hero__art--small img { border-radius: 0; background: transparent; mix-blend-mode: multiply; }
.cc-hero__art--small::before, .cc-hero__art--small::after { display: none; }
.cc-hero--compact { padding-bottom: clamp(24px, 4vw, 48px); }
.cc-hero--compact .cc-hero__title { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem); }
@media (min-width: 900px) { .cc-hero--compact { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); } }
@media (max-width: 899.98px) {
	.cc-hero { padding-top: 20px; }
	.cc-hero__art { order: -1; width: min(calc(100% - 12px), 520px); justify-self: start; }
	.cc-hero:not(.cc-hero--compact) .cc-hero__art img { border-radius: 28px; aspect-ratio: auto; }
	.cc-hero:not(.cc-hero--compact) .cc-hero__art::before { border-radius: 28px; inset: 12px -10px -12px 10px; }
	.cc-hero--compact .cc-hero__art { width: min(62%, 260px); justify-self: start; order: 2; }
	.cc-hero__art::after { left: -8px; width: 34px; height: 34px; }
}

/* ---------- Home: process (staggered, numbered) ---------- */
.cc-process { position: relative; overflow: hidden; isolation: isolate; background: var(--cc-mint); }
.cc-process > * { position: relative; z-index: 1; }

/* ---------- The four steps: storybook cards ----------
 * Entrance: cards pop in one after another when the section scrolls into view (JS adds .is-in).
 * Idle: each floats on its own rhythm (translate) while keeping its tilt (rotate), so the two never fight.
 * Hover: straightens, lifts and the picture brightens. All motion is off under prefers-reduced-motion.
 */
.cc-steps { position: relative; display: grid; gap: clamp(28px, 4vw, 44px) clamp(16px, 3vw, 32px); counter-reset: step; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 18px; }
@media (min-width: 1000px) {
	.cc-steps { grid-template-columns: repeat(4, 1fr); }
	.cc-step:nth-child(even) { margin-top: 56px; }
	.cc-steps::before { /* the dotted magic trail behind the cards */
		content: ""; position: absolute; left: 4%; right: 4%; top: 34%; height: 90px; z-index: -1;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='90' viewBox='0 0 240 90'%3E%3Cpath d='M0 45 C 60 0, 120 0, 120 45 S 180 90, 240 45' fill='none' stroke='%2325B8B8' stroke-width='4' stroke-linecap='round' stroke-dasharray='1 14'/%3E%3C/svg%3E") 0 0 / 240px 90px repeat-x;
		animation: cc-trail 6s linear infinite;
	}
}
@keyframes cc-trail { to { background-position: 240px 0; } }

.cc-step { --tilt: -2.5deg; --bob: 7s; counter-increment: step; position: relative; padding: 12px 12px 20px; border-radius: 26px; background: var(--cc-paper);
	box-shadow: 0 2px 0 rgba(15, 102, 112, .08), 0 22px 40px -24px rgba(15, 102, 112, .45);
	rotate: var(--tilt); transition: rotate .4s var(--cc-ease), scale .4s var(--cc-ease), box-shadow .4s var(--cc-ease);
	animation: cc-bob var(--bob) ease-in-out infinite; }
.cc-step:nth-child(2) { --tilt: 2deg; --bob: 6.2s; animation-delay: -1.6s; }
.cc-step:nth-child(3) { --tilt: -1.5deg; --bob: 7.6s; animation-delay: -3.1s; }
.cc-step:nth-child(4) { --tilt: 2.5deg; --bob: 6.6s; animation-delay: -4.4s; }
@keyframes cc-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
.cc-step:hover { rotate: 0deg; scale: 1.04; box-shadow: 0 2px 0 rgba(15, 102, 112, .08), 0 34px 50px -26px rgba(15, 102, 112, .6); animation-play-state: paused; z-index: 2; }

/* Star badge with the step number, overlapping the picture corner */
.cc-step::before, .cc-step::after { position: absolute; top: -18px; left: -14px; width: 62px; height: 62px; z-index: 3; }
.cc-step::before { content: ""; background: var(--cc-butter); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3l12.6 27.4 29.9 3.4-22.3 20.2 6.2 29.5L50 68.6 23.6 83.5l6.2-29.5L7.5 33.8l29.9-3.4z' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3l12.6 27.4 29.9 3.4-22.3 20.2 6.2 29.5L50 68.6 23.6 83.5l6.2-29.5L7.5 33.8l29.9-3.4z' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 4px 6px rgba(112, 69, 47, .25)); animation: cc-badge 5s ease-in-out infinite; }
.cc-step::after { content: counter(step); display: grid; place-items: center; padding-top: 4px; font: 900 1.35rem/1 var(--cc-font); color: var(--cc-chestnut); }
@keyframes cc-badge { 0%, 100% { rotate: -8deg; scale: 1; } 50% { rotate: 10deg; scale: 1.08; } }

.cc-step .cc-picture { position: relative; display: block; overflow: hidden; border-radius: 18px; }
.cc-step .cc-picture img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; transition: scale .6s var(--cc-ease), filter .6s var(--cc-ease); }
.cc-step:hover .cc-picture img { scale: 1.06; filter: saturate(1.15) brightness(1.04); }
/* twinkles on each picture */
.cc-step .cc-picture::before, .cc-step .cc-picture::after { content: ""; position: absolute; z-index: 2; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 0 6px rgba(255, 209, 102, .9)); animation: cc-twinkle-soft 2.6s ease-in-out infinite; }
.cc-step .cc-picture::before { width: 22px; height: 22px; top: 10%; right: 10%; }
.cc-step .cc-picture::after { width: 14px; height: 14px; bottom: 14%; left: 12%; background: var(--cc-butter); animation-delay: -1.3s; }
.cc-step:nth-child(even) .cc-picture::before { top: 16%; right: 16%; animation-delay: -.7s; }

.cc-step h3 { margin: 1rem .25rem .35rem; font-size: 1.2rem; }
.cc-step p { margin: 0 .25rem; color: var(--cc-ink); }
@media (max-width: 599.98px) {
	.cc-step { padding: 8px 8px 14px; border-radius: 20px; }
	.cc-step::before, .cc-step::after { width: 46px; height: 46px; top: -14px; left: -10px; }
	.cc-step::after { font-size: 1.05rem; }
	.cc-step h3 { font-size: 1.02rem; }
	.cc-step p { font-size: .9rem; }
	.cc-step .cc-picture, .cc-step .cc-picture img { border-radius: 14px; }
}

/* Pop-in entrance, one card after another (only with JS, so cards are never hidden without it) */
.cc-js .cc-process:not(.is-in) .cc-step { opacity: 0; scale: .7; }
.cc-js .cc-process.is-in .cc-step { animation: cc-pop .8s cubic-bezier(.34, 1.56, .64, 1) both, cc-bob var(--bob) ease-in-out .8s infinite; }
.cc-js .cc-process.is-in .cc-step:nth-child(2) { animation-delay: .15s, -1.6s; }
.cc-js .cc-process.is-in .cc-step:nth-child(3) { animation-delay: .3s, -3.1s; }
.cc-js .cc-process.is-in .cc-step:nth-child(4) { animation-delay: .45s, -4.4s; }
@keyframes cc-pop { 0% { opacity: 0; scale: .6; } 60% { opacity: 1; scale: 1.06; } 100% { opacity: 1; scale: 1; } }

/* Floating sparkles across the mint band */
.cc-process::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image:
		radial-gradient(circle, rgba(37, 184, 184, .55) 1.6px, transparent 2.4px),
		radial-gradient(circle, rgba(255, 209, 102, .9) 2px, transparent 3px),
		radial-gradient(circle, rgba(185, 160, 232, .6) 1.4px, transparent 2.2px);
	background-size: 190px 210px, 290px 260px, 150px 170px;
	background-position: 30px 40px, 160px 100px, 90px 20px;
	animation: cc-process-dust 34s linear infinite; }
@keyframes cc-process-dust { to { background-position: 30px -170px, 160px -160px, 90px -150px; } }

/* ---------- Step Into the Magic Kitchen: the big magic button ----------
 * Butter yellow with ink text (9.13:1), chunky ink outline and offset "sticker" shadow so it
 * stands out on mint; a shine sweeps across it and stars twinkle at its corners.
 */
.cc-process .cc-actions { margin-top: clamp(40px, 5vw, 64px); }
.cc-process .cc-actions .wp-block-button { position: relative; }
.cc-process .cc-actions .wp-block-button__link {
	position: relative; overflow: hidden; isolation: isolate;
	min-height: 64px; padding: .95em 2.1em; border-radius: 999px;
	background: var(--cc-butter); color: var(--cc-ink); border: 3px solid var(--cc-ink);
	font: 900 1.15rem/1.2 var(--cc-font); letter-spacing: .01em;
	box-shadow: 6px 6px 0 var(--cc-ink), 0 0 0 0 rgba(255, 209, 102, .7);
	transition: transform .2s var(--cc-ease), box-shadow .2s var(--cc-ease);
	animation: cc-glow 2.6s ease-in-out infinite;
}
.cc-process .cc-actions .wp-block-button__link::after { content: " ✦"; display: inline-block; margin-left: .3em; color: var(--cc-coral-dk); animation: cc-twinkle-soft 1.8s ease-in-out infinite; }
.cc-process .cc-actions .wp-block-button__link::before { /* the shine */
	content: ""; position: absolute; z-index: -1; top: -20%; bottom: -20%; left: -40%; width: 35%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);
	transform: skewX(-20deg); animation: cc-shine 3.4s ease-in-out infinite;
}
@keyframes cc-shine { 0%, 55% { left: -40%; } 100% { left: 120%; } }
@keyframes cc-glow { 0%, 100% { box-shadow: 6px 6px 0 var(--cc-ink), 0 0 0 0 rgba(255, 209, 102, .7); } 50% { box-shadow: 6px 6px 0 var(--cc-ink), 0 0 0 14px rgba(255, 209, 102, 0); } }
.cc-process .cc-actions .wp-block-button__link:hover, .cc-process .cc-actions .wp-block-button__link:focus-visible { transform: translate(-3px, -3px) rotate(-1.5deg); box-shadow: 9px 9px 0 var(--cc-ink); animation: none; }
.cc-process .cc-actions .wp-block-button__link:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--cc-ink); }
/* corner stars around the button */
.cc-process .cc-actions .wp-block-button::before, .cc-process .cc-actions .wp-block-button::after { content: ""; position: absolute; z-index: 2; pointer-events: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .3s var(--cc-ease); }
.cc-process .cc-actions .wp-block-button::before { width: 26px; height: 26px; top: -14px; right: -12px; background: var(--cc-coral); animation: cc-twinkle-soft 2.2s ease-in-out infinite; }
.cc-process .cc-actions .wp-block-button::after { width: 18px; height: 18px; bottom: -10px; left: -10px; background: var(--cc-teal); animation: cc-twinkle-soft 2.2s ease-in-out -1.1s infinite; }
.cc-process .cc-actions .wp-block-button:hover::before { transform: translate(8px, -8px) scale(1.4); }
.cc-process .cc-actions .wp-block-button:hover::after { transform: translate(-8px, 8px) scale(1.4); }

@media (prefers-reduced-motion: reduce) {
	.cc-step, .cc-step::before, .cc-step .cc-picture::before, .cc-step .cc-picture::after, .cc-steps::before, .cc-process::before,
	.cc-process .cc-actions .wp-block-button__link, .cc-process .cc-actions .wp-block-button__link::before, .cc-process .cc-actions .wp-block-button__link::after,
	.cc-process .cc-actions .wp-block-button::before, .cc-process .cc-actions .wp-block-button::after { animation: none !important; }
	.cc-js .cc-process .cc-step { opacity: 1; scale: 1; }
	.cc-process .cc-actions .wp-block-button__link::before { display: none; }
}

/* ---------- Home: recipe card intro ---------- */

/* ---------- Home: shelf ---------- */
/* Pantry wall: star-print wallpaper, warm light pools and a string of fairy lights that twinkle in two alternating sets. */
.cc-shelf { position: relative; isolation: isolate; overflow: hidden;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='48'%3E%3Cpath d='M0 3Q60 46 120 3' fill='none' stroke='%2370452F' stroke-opacity='.55' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 120px 48px repeat-x,
		radial-gradient(36% 26% at 10% 24%, rgba(255, 209, 102, .34), transparent 70%),
		radial-gradient(30% 24% at 90% 52%, rgba(247, 182, 200, .42), transparent 70%),
		radial-gradient(42% 26% at 40% 98%, rgba(37, 184, 184, .18), transparent 70%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112'%3E%3Cg fill='%236A4FB0' fill-opacity='.13'%3E%3Cpath transform='translate(14 14) scale(0.75)' d='M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0Z'/%3E%3Cpath transform='translate(74 66) scale(0.5)' d='M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0Z'/%3E%3Ccircle cx='80' cy='22' r='2.2'/%3E%3Ccircle cx='26' cy='84' r='1.8'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 112px 112px,
		var(--cc-lilac); }
.cc-shelf > * { position: relative; z-index: 1; }
.cc-shelf::before, .cc-shelf::after { content: ""; position: absolute; z-index: 0; top: 0; left: 0; right: 0; height: 70px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='70'%3E%3Cdefs%3E%3Cfilter id='b' x='-1' y='-1' width='3' height='3'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='60' cy='38' r='15' fill='%23FFD166' fill-opacity='.55' filter='url(%23b)'/%3E%3Crect x='56' y='22' width='8' height='8' rx='2' fill='%2370452F'/%3E%3Cellipse cx='60' cy='38' rx='6.5' ry='8.5' fill='%23FFD166'/%3E%3Cellipse cx='58' cy='35' rx='2' ry='3' fill='%23fff' fill-opacity='.85'/%3E%3Ccircle cx='300' cy='38' r='15' fill='%23F7B6C8' fill-opacity='.55' filter='url(%23b)'/%3E%3Crect x='296' y='22' width='8' height='8' rx='2' fill='%2370452F'/%3E%3Cellipse cx='300' cy='38' rx='6.5' ry='8.5' fill='%23F7B6C8'/%3E%3Cellipse cx='298' cy='35' rx='2' ry='3' fill='%23fff' fill-opacity='.85'/%3E%3C/svg%3E") 0 0 / 480px 70px repeat-x; }
.cc-shelf::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='70'%3E%3Cdefs%3E%3Cfilter id='b' x='-1' y='-1' width='3' height='3'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='180' cy='38' r='15' fill='%2325B8B8' fill-opacity='.55' filter='url(%23b)'/%3E%3Crect x='176' y='22' width='8' height='8' rx='2' fill='%2370452F'/%3E%3Cellipse cx='180' cy='38' rx='6.5' ry='8.5' fill='%2325B8B8'/%3E%3Cellipse cx='178' cy='35' rx='2' ry='3' fill='%23fff' fill-opacity='.85'/%3E%3Ccircle cx='420' cy='38' r='15' fill='%23FF8F70' fill-opacity='.55' filter='url(%23b)'/%3E%3Crect x='416' y='22' width='8' height='8' rx='2' fill='%2370452F'/%3E%3Cellipse cx='420' cy='38' rx='6.5' ry='8.5' fill='%23FF8F70'/%3E%3Cellipse cx='418' cy='35' rx='2' ry='3' fill='%23fff' fill-opacity='.85'/%3E%3C/svg%3E"); }
@keyframes cc-bulbs { from { opacity: .4; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
	.cc-shelf::before { animation: cc-bulbs 1.9s ease-in-out infinite alternate; }
	.cc-shelf::after { animation: cc-bulbs 1.9s ease-in-out -1.9s infinite alternate; }
}

/* ---------- Home: meet teaser ---------- */
/* "Curious, playful": expression sheet | text | Caleigh trying each face on. Phones stack all three. */
.cc-meet-teaser { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (min-width: 860px) { .cc-meet-teaser { grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 176px); } }
@media (min-width: 1100px) { .cc-meet-teaser { grid-template-columns: 392px minmax(0, 1fr) 232px; } }
.cc-meet-teaser__frame { position: relative; display: block; }
.cc-meet-teaser__art img { display: block; width: 100%; border-radius: 28px; background: var(--cc-paper); padding: 10px; }
.cc-meet-teaser__text h2 { margin-top: 0; }
.cc-meet-teaser__text p { max-width: 56ch; }
/* A glowing frame hops across the sheet to the face Caleigh is making. Cells: 3 across, 2 down, inside the 10px padding. */
.cc-moods-ring { position: absolute; z-index: 1; pointer-events: none; left: calc(10px + (100% - 20px) * var(--c, 0) / 3); top: calc(10px + (100% - 20px) * var(--r, 0) / 2); width: calc((100% - 20px) / 3); height: calc((100% - 20px) / 2); border: 3px solid var(--cc-butter); border-radius: 20px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 20px 4px rgba(255, 209, 102, .75); opacity: 0;
	transition: left .55s cubic-bezier(.34, 1.4, .64, 1), top .55s cubic-bezier(.34, 1.4, .64, 1), opacity .3s ease; }
.cc-moods-ring.is-on { opacity: 1; }

.cc-moods { margin: 0 auto; padding-top: 34px; width: min(230px, 64vw); }
@media (min-width: 860px) { .cc-moods { width: 100%; } }
.cc-moods__stage { position: relative; aspect-ratio: 600 / 1220; transform-origin: 50% 100%; }
.cc-moods__stage::before { content: ""; position: absolute; z-index: 0; left: 10%; right: 10%; bottom: -1.6%; height: 4.5%; border-radius: 50%; background: radial-gradient(closest-side, rgba(74, 42, 28, .28), transparent); }
.cc-moods__stage picture { display: block; }
.cc-moods__stage img { display: block; width: 100%; height: 100%; }
.cc-moods__body { position: absolute; z-index: 2; inset: 0; }
/* Tail box and pivot (where it meets her back) in % of the 600x1220 master. */
.cc-moods__tail { position: absolute; z-index: 1; left: 49.833%; top: 59.918%; width: 49.667%; height: 22.377%; transform-origin: 49% 41.8%; }
.cc-moods__sway { display: block; width: 100%; height: 100%; transform-origin: 49% 41.8%; }
.cc-moods__face { position: absolute; z-index: 3; left: 33.333%; top: 20.492%; width: 36%; height: 16.393%; opacity: 0; transition: opacity .3s ease; }
.cc-moods[data-mood="wink"] .cc-moods__face--wink,
.cc-moods[data-mood="excited"] .cc-moods__face--excited,
.cc-moods[data-mood="thinking"] .cc-moods__face--thinking,
.cc-moods[data-mood="surprised"] .cc-moods__face--surprised,
.cc-moods[data-mood="playful"] .cc-moods__face--playful { opacity: 1; }
/* Speech bubble naming the face. */
.cc-moods__say { position: absolute; z-index: 4; top: -6%; right: -10%; padding: .4em .85em .45em; border: 2.5px solid var(--cc-ink); border-radius: 999px; background: #fff; color: var(--cc-ink); font: 900 .95rem/1 var(--cc-font); white-space: nowrap; rotate: 5deg; box-shadow: 3px 3px 0 var(--cc-ink); }
.cc-moods__say::after { content: ""; position: absolute; left: 22%; bottom: -9px; width: 12px; height: 12px; background: #fff; border: solid var(--cc-ink); border-width: 0 2.5px 2.5px 0; rotate: 45deg; }
/* Little stars that burst around her head on each change. */
.cc-moods__sparks { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.cc-moods__sparks i { position: absolute; width: 16px; height: 16px; opacity: 0; scale: 0; background: var(--cc-butter); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.cc-moods__sparks i:nth-child(1) { left: 12%; top: 18%; }
.cc-moods__sparks i:nth-child(2) { left: 78%; top: 12%; background: var(--cc-pink); width: 12px; height: 12px; }
.cc-moods__sparks i:nth-child(3) { left: 86%; top: 30%; background: var(--cc-teal); }
.cc-moods__sparks i:nth-child(4) { left: 6%; top: 34%; background: var(--cc-lav); width: 12px; height: 12px; }
.cc-moods__sparks i:nth-child(5) { left: 46%; top: 1%; width: 20px; height: 20px; }

@keyframes cc-moods-hop { 0% { translate: 0 0; scale: 1; } 30% { translate: 0 -10px; scale: .98 1.03; } 62% { translate: 0 0; scale: 1.03 .97; } 82% { scale: .995 1.01; } 100% { translate: 0 0; scale: 1; } }
@keyframes cc-tail-sway { from { rotate: -2.5deg; } to { rotate: 3deg; } }
@keyframes cc-tail-swish { 0%, 100% { rotate: 0deg; } 18% { rotate: 11deg; } 40% { rotate: -9deg; } 60% { rotate: 6deg; } 80% { rotate: -3deg; } }
@keyframes cc-say-pop { 0% { scale: .4; opacity: 0; } 60% { scale: 1.12; opacity: 1; } 100% { scale: 1; } }
@keyframes cc-spark-burst { 0% { scale: 0; opacity: 0; rotate: 0deg; } 35% { scale: 1.15; opacity: 1; } 100% { scale: 0; opacity: 0; rotate: 120deg; translate: 0 -14px; } }
@media (prefers-reduced-motion: no-preference) {
	.cc-moods__sway { animation: cc-tail-sway 3.4s ease-in-out infinite alternate; }
	.cc-moods__stage.is-hop { animation: cc-moods-hop .55s ease-out; }
	.cc-moods__tail.is-swish { animation: cc-tail-swish 1.4s ease-in-out; }
	.cc-moods__say.is-pop { animation: cc-say-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
	.cc-moods__sparks.is-burst i { animation: cc-spark-burst .9s ease-out both; }
	.cc-moods__sparks.is-burst i:nth-child(2) { animation-delay: .08s; }
	.cc-moods__sparks.is-burst i:nth-child(3) { animation-delay: .16s; }
	.cc-moods__sparks.is-burst i:nth-child(4) { animation-delay: .05s; }
	.cc-moods__sparks.is-burst i:nth-child(5) { animation-delay: .12s; }
}

/* ---------- Meet page ---------- */
.cc-split { display: grid; gap: clamp(24px, 4vw, 64px); align-items: center; }
@media (min-width: 900px) { .cc-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } .cc-split--flip { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.cc-split__text h2 { margin-top: 0; }
.cc-split__text p { max-width: 58ch; }
.cc-split__art img { display: block; width: 100%; border-radius: 28px; background: var(--cc-paper); }
.cc-split--flip .cc-split__art img { border-radius: 999px 999px 28px 28px; max-width: 360px; margin-inline: auto; }
.cc-tools-of-trade { background: var(--cc-paper); }
.cc-duo { display: grid; gap: clamp(24px, 4vw, 48px); margin-top: clamp(20px, 3vw, 32px); }
@media (min-width: 760px) { .cc-duo { grid-template-columns: 1fr 1fr; } }
.cc-duo__item { padding: clamp(20px, 3vw, 32px); border-radius: 28px; background: var(--cc-cream); }
.cc-duo__item .cc-picture img { display: block; width: 150px; mix-blend-mode: multiply; }
.cc-duo__item h3 { margin: .8rem 0 .4rem; }
.cc-duo__item p { margin: 0; }

/* ---------- Magic Kitchen: the ritual strip ---------- */
.cc-ritual { background: var(--cc-mint); }
.cc-ritual h2 { max-width: 24ch; }
.cc-ritual__steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 62%); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 0 20px; counter-reset: ritual; overscroll-behavior-x: contain; }
@media (min-width: 640px) { .cc-ritual__steps { grid-auto-columns: minmax(200px, 30%); } }
@media (min-width: 1100px) { .cc-ritual__steps { grid-auto-flow: row; grid-template-columns: repeat(7, 1fr); overflow: visible; } }
.cc-ritual__step { scroll-snap-align: start; counter-increment: ritual; }
.cc-ritual__step .cc-picture img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 18px 18px; }
.cc-ritual__step h3 { margin: .8rem 0 .2rem; font-size: 1.15rem; }
.cc-ritual__step h3::before { content: counter(ritual) " · "; color: var(--cc-chestnut); }
.cc-ritual__step p { margin: 0; font-size: .9375rem; color: var(--cc-muted); }

/* ---------- Collections page / collection archive ---------- */
.cc-pagehead { display: grid; gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(28px, 5vw, 64px) var(--cc-gutter) clamp(20px, 3vw, 32px); }
.cc-pagehead h1, .cc-pagehead .wp-block-query-title { margin: 0; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem); line-height: 1.05; }
.cc-pagehead .cc-lead { max-width: 58ch; margin: 1rem 0 0; }
.cc-pagehead--shop { grid-template-columns: 1fr auto; }
.cc-pagehead--collection { padding-bottom: clamp(32px, 5vw, 56px); }
@media (min-width: 900px) { .cc-pagehead--collection { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.cc-pagehead__art img { display: block; width: min(100%, 420px); margin-inline: auto; border-radius: 999px 999px 28px 28px; background: var(--cc-paper); }
.cc-pagehead__desc { max-width: 60ch; }
.cc-section--shop { padding-top: 0; }
.cc-pagehead--simple { padding-inline: 0; }
.cc-pagehead--simple .wp-block-post-title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }

/* ---------- Prose (legal, posts, about) ---------- */
.cc-prose { max-width: 68ch; }
.cc-prose h2 { margin: 2.25rem 0 .6rem; font-size: clamp(1.5rem, 1.25rem + 1vw, 1.9rem); }
.cc-prose h3 { margin: 1.75rem 0 .4rem; }
.cc-prose li { margin-bottom: .35rem; }
.cc-section.cc-prose { max-width: none; }
.cc-section.cc-prose > * { max-width: 68ch; }
.cc-main--page { padding: 0 var(--cc-gutter) clamp(48px, 6vw, 88px); }
.cc-main--page .wp-block-post-content { max-width: 68ch; }
.cc-main--store .wp-block-post-content { max-width: none; }
.cc-draftnote { padding: .9rem 1.1rem; border-radius: 14px; background: var(--cc-butter); font-weight: 700; }

/* ---------- FAQ (details) ---------- */
.cc-faq { max-width: none; }
.cc-faq > * { max-width: 820px; }
.cc-faq h2 { margin: 2.5rem 0 1rem; }
.cc-faq h2:first-child { margin-top: 0; }
.wp-block-details { margin: 0 0 .75rem; border-radius: 18px; background: var(--cc-paper); }
.wp-block-details summary { position: relative; display: block; padding: 1.05rem 3.25rem 1.05rem 1.25rem; cursor: pointer; font-weight: 800; font-size: 1.0625rem; list-style: none; min-height: 48px; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; position: absolute; right: 1.1rem; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: var(--cc-mint); color: var(--cc-teal-dk); font-weight: 900; transition: rotate .2s var(--cc-ease); }
.wp-block-details[open] summary::after { rotate: 45deg; }
.wp-block-details > :not(summary) { margin: 0; padding: 0 1.25rem 1.1rem; }
.cc-faq--product { background: var(--cc-paper); }
.cc-faq--product .wp-block-details { background: var(--cc-cream); }

/* ---------- Contact ---------- */
.cc-contact { display: grid; gap: clamp(24px, 4vw, 64px); padding: clamp(28px, 5vw, 72px) var(--cc-gutter); align-items: start; }
@media (min-width: 900px) { .cc-contact { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.cc-contact__intro h1 { margin: 0; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem); line-height: 1.05; }
.cc-contact__art img { display: block; width: min(100%, 300px); margin-top: 1.5rem; border-radius: 999px 999px 24px 24px; }
@media (max-width: 899.98px) { .cc-contact__art { display: none; } }
.cc-contact__form { padding: clamp(20px, 3vw, 36px); border-radius: 28px; background: var(--cc-paper); }

/* ---------- Journal ---------- */
.cc-pagehead--journal { padding-bottom: clamp(24px, 3vw, 40px); }
@media (min-width: 900px) { .cc-pagehead--journal { grid-template-columns: 1.3fr 1fr; align-items: end; } }
.cc-journal-tools { display: grid; gap: 1rem; }
.cc-chips, .cc-journal-tools .wp-block-categories { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.cc-journal-tools .wp-block-categories a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border-radius: 999px; background: var(--cc-paper); color: var(--cc-ink); font-weight: 800; text-decoration: none; }
.wp-block-search__inside-wrapper { gap: .4rem; }
.wp-block-search__input { min-height: 48px; padding: .6em .9em; border-radius: 14px; border: 2px solid rgba(38, 50, 56, .35); font: inherit; }
.wp-block-search__button { min-height: 48px; margin-left: 0; padding: 0 1.2rem; border-radius: 999px; background: var(--cc-teal-dk); color: #fff; border: 0; font-weight: 800; }
.wp-block-search__label { font-weight: 800; }
.cc-journal { padding: 0 var(--cc-gutter) clamp(48px, 6vw, 88px); }
.cc-journal__list { display: grid; gap: clamp(20px, 3vw, 32px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); list-style: none; padding: 0; margin: 0; }
.cc-journal__list > li { display: flex; flex-direction: column; background: var(--cc-paper); border-radius: 24px; overflow: hidden; }
.cc-journal__img { margin: 0; }
.cc-journal__img img { display: block; width: 100%; object-fit: cover; }
.cc-journal__text { padding: 1.1rem 1.25rem 1.3rem; }
.cc-journal__text .wp-block-post-title { margin: .2rem 0 .5rem; font-size: 1.35rem; line-height: 1.2; }
.cc-journal__text .wp-block-post-title a { color: var(--cc-ink); text-decoration: none; }
.cc-journal__text .wp-block-post-title a:hover { text-decoration: underline wavy var(--cc-teal); text-underline-offset: 5px; }
.cc-journal__text .wp-block-post-excerpt { color: var(--cc-muted); }
.cc-journal__text .cc-eyebrow a, .cc-posthead .cc-eyebrow a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
@media (min-width: 900px) {
	.cc-main--journal:not(.cc-main--search) .cc-journal__list > li:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; }
	.cc-main--journal:not(.cc-main--search) .cc-journal__list > li:first-child .wp-block-post-title { font-size: 2.1rem; }
	.cc-main--journal:not(.cc-main--search) .cc-journal__list > li:first-child .cc-journal__text { padding: 2rem 2.5rem; }
}
.cc-main--post { padding: clamp(28px, 5vw, 64px) var(--cc-gutter) clamp(48px, 6vw, 88px); }
.cc-posthead { max-width: 68ch; margin-inline: auto !important; }
.cc-posthead .wp-block-post-title { margin: .2rem 0 .8rem; font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.3rem); line-height: 1.05; }
.cc-post-figure { max-width: 960px !important; margin: 2rem auto !important; }
.cc-post-figure img { border-radius: 28px; }
.cc-main--post .cc-prose { margin-inline: auto; }
.cc-related { max-width: 68ch; margin: clamp(40px, 5vw, 64px) auto 0 !important; }

/* ---------- Product page ---------- */
.cc-product-top { padding: clamp(16px, 3vw, 32px) var(--cc-gutter) clamp(32px, 5vw, 64px); }
.cc-crumbs, .woocommerce-breadcrumb { margin: 0 0 1.25rem; font-size: .9375rem; color: var(--cc-muted); }
.woocommerce-breadcrumb a { color: var(--cc-teal-dk); }
.cc-product-top__grid { display: grid; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) { .cc-product-top__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .cc-product-summary { position: sticky; top: 96px; } }
.cc-gallery .woocommerce-product-gallery { margin: 0 !important; width: 100% !important; float: none !important; }
.cc-gallery img { border-radius: 24px; background: var(--cc-paper); }
.cc-gallery .flex-control-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.cc-gallery .flex-control-thumbs li { width: auto !important; float: none !important; margin: 0 !important; }
.cc-gallery .flex-control-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; cursor: pointer; opacity: .7; }
.cc-gallery .flex-control-thumbs .flex-active { opacity: 1; outline: 3px solid var(--cc-teal); outline-offset: 2px; }
.cc-product-title { margin: 0 0 .5rem; font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.1rem); line-height: 1.05; }
.cc-product-price, .cc-product-summary .price { font: 900 1.9rem/1 var(--cc-font); color: var(--cc-chestnut); }
.cc-product-excerpt { font-size: 1.125rem; }
.cc-product-summary form.cart { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 .5rem; }
.cc-product-summary .quantity { display: none; }
.single_add_to_cart_button, .cc-product-summary .button {
	min-height: 56px; padding: .8em 1.8em !important; border-radius: 999px !important; border: 0 !important;
	background: var(--cc-teal-dk) !important; color: #fff !important; font: 800 1.0625rem/1.2 var(--cc-font) !important; cursor: pointer;
}
.single_add_to_cart_button:hover { background: #0b5059 !important; }
.single_add_to_cart_button.disabled, .single_add_to_cart_button:disabled { opacity: .55; }
.cc-product-jump a { font-weight: 800; color: var(--cc-teal-dk); }
.cc-section--recipe { background: var(--cc-mint); padding: clamp(40px, 6vw, 88px) var(--cc-gutter); }
.cc-section--about-recipe { padding-bottom: 0; }
.cc-section--about-recipe:not(:has(.cc-prose > *)) { display: none; }
.cc-details { padding: clamp(48px, 6vw, 88px) var(--cc-gutter); }
.cc-details h2 { margin-top: 0; }

/* ---------- WooCommerce: notices, cart, checkout, account ---------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner { border-radius: 16px !important; font-family: var(--cc-font); }
.wc-block-components-button:not(.is-link), .wp-block-woocommerce-cart .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button {
	min-height: 52px; border-radius: 999px !important; background: var(--cc-teal-dk) !important; color: #fff !important; font-weight: 800 !important; border: 0 !important;
}
.wc-block-components-text-input input, .wc-block-components-select select, .wc-block-components-combobox input { border-radius: 14px !important; }
.wc-block-components-product-name { font-weight: 800; color: var(--cc-ink); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--cc-chestnut); font-weight: 900; }
.wp-block-woocommerce-empty-cart-block { text-align: center; }
.woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.woocommerce-MyAccount-navigation a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px; background: var(--cc-paper); color: var(--cc-ink); font-weight: 800; text-decoration: none; }
.woocommerce-MyAccount-navigation .is-active a { background: var(--cc-teal-dk); color: #fff; }
.woocommerce table.shop_table { border-radius: 16px; background: var(--cc-paper); border-collapse: separate; }
.woocommerce .woocommerce-table--order-downloads .button, .woocommerce-MyAccount-downloads .button { border-radius: 999px; background: var(--cc-teal-dk); color: #fff; font-weight: 800; }
.cc-order-recipe { margin: .25rem 0 0; color: var(--cc-muted); }

/* Account forms: comfortable targets */
.woocommerce-form input[type=checkbox], .woocommerce-form__input-checkbox { width: 24px; height: 24px; vertical-align: middle; accent-color: var(--cc-teal-dk); }
.woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; }
.show-password-input { width: 44px !important; height: 44px !important; }
.woocommerce form .form-row input.input-text { min-height: 48px; border-radius: 14px; border: 2px solid rgba(38, 50, 56, .35); padding: .6em .9em; }

/* ---------- 404 ---------- */
.cc-main--404 .wp-block-search { margin: 1.5rem 0; max-width: 460px; }

/* ---------- Home hero: Caleigh's kitchen scene ----------
 * Desktop: the scene is anchored right at full section height and its left side is masked
 * to transparent, so the kitchen melts into cream behind the headline. Phones: the scene sits
 * on top and fades into the text below. Sparkles are % of the picture box, so they always
 * rise from the shaker. A mint scalloped "tablecloth" edge leads into the process section.
 */
.cc-hero--scene { --hh: clamp(560px, calc(100vh - 90px), 820px); --bw: calc(var(--hh) * 1.7568); --textw: 540px;
	position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; min-height: var(--hh); padding: clamp(40px, 6vw, 80px) var(--cc-gutter) clamp(72px, 8vw, 112px); background: var(--cc-cream); }
.cc-hero--scene .cc-hero__text { position: relative; z-index: 2; max-width: var(--textw); }
.cc-hero--scene .cc-hero__title { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem); }
.cc-scene { position: absolute; inset: 0; z-index: 0; }
/* Right-aligned on wide screens; on narrower ones pushed right so the shaker (43% across the art) clears the text. */
.cc-scene__box { position: absolute; top: 0; height: 100%; width: var(--bw);
	left: max(calc(100% - var(--bw)), calc(var(--cc-gutter) + var(--textw) + 70px - var(--bw) * .43));
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%);
	        mask-image: linear-gradient(90deg, transparent 0%, #000 14%); }
.cc-scene::after { /* cream veil anchored to the text column: the kitchen shows faintly behind the words, fully beyond them */
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, var(--cc-cream) 0, rgba(255, 248, 237, .9) calc(var(--cc-gutter) + var(--textw) + 10px), rgba(255, 248, 237, 0) calc(var(--cc-gutter) + var(--textw) + 230px));
}
.cc-scene__pic, .cc-scene__pic img { display: block; width: 100%; height: 100%; }
.cc-scene__pic img { object-fit: cover; }
.cc-hero--scene::after { /* scalloped tablecloth edge */
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 22px; z-index: 3;
	background: radial-gradient(circle at 16px 0, transparent 15px, var(--cc-mint) 15.5px) 0 0 / 32px 22px repeat-x;
}

/* Sparkles from the shaker */
.cc-scene__magic { position: absolute; inset: 0; pointer-events: none; --sx: 56.4%; --sy: 39%; }
.cc-spark { position: absolute; left: var(--sx); top: var(--sy); width: 16px; height: 16px; opacity: 0;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z'/%3E%3C/svg%3E") center / contain no-repeat;
	animation: cc-rise 5.6s cubic-bezier(.3, .6, .4, 1) infinite; animation-delay: calc(var(--i) * -0.8s); }
.cc-spark--gold { background: #ffd166; }
.cc-spark--teal { background: #25b8b8; }
.cc-spark--pink { background: #f7b6c8; }
.cc-spark--lav  { background: #b9a0e8; }
.cc-spark:nth-child(1) { --dx: -70px; --dy: -150px; width: 18px; height: 18px; }
.cc-spark:nth-child(2) { --dx: -20px; --dy: -190px; width: 12px; height: 12px; }
.cc-spark:nth-child(3) { --dx: -110px; --dy: -110px; }
.cc-spark:nth-child(4) { --dx: 30px; --dy: -170px; width: 11px; height: 11px; }
.cc-spark:nth-child(5) { --dx: -150px; --dy: -60px; width: 13px; height: 13px; }
.cc-spark:nth-child(6) { --dx: -60px; --dy: -230px; width: 20px; height: 20px; }
.cc-spark:nth-child(7) { --dx: 10px; --dy: -90px; width: 10px; height: 10px; }
@keyframes cc-rise {
	0%   { transform: translate(0, 0) scale(.3) rotate(0); opacity: 0; }
	12%  { opacity: 1; }
	70%  { opacity: .9; }
	100% { transform: translate(var(--dx), var(--dy)) scale(1.05) rotate(120deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.cc-spark { animation: none; opacity: .9; transform: translate(calc(var(--dx) * .5), calc(var(--dy) * .5)); }
}

/* Phones and small tablets: scene on top, fading into the headline */
@media (max-width: 899.98px) {
	.cc-hero--scene { flex-direction: column; align-items: stretch; min-height: 0; padding: 0 0 56px; }
	.cc-hero--scene .cc-scene { position: relative; inset: auto; order: -1; }
	.cc-hero--scene .cc-scene::after { display: none; }
	.cc-hero--scene .cc-scene__box { position: relative; left: auto; width: 100%; height: auto; aspect-ratio: 1180 / 1240; max-height: 72vh; margin-inline: auto;
		-webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
		        mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
	.cc-hero--scene .cc-scene__pic img { object-position: 30% 0; }
	.cc-hero--scene .cc-hero__text { max-width: none; margin-top: -28px; padding: 0 var(--cc-gutter); }
	.cc-scene__magic { --sx: 30%; --sy: 43%; }
	.cc-spark:nth-child(n) { --dx: calc(var(--i) * 9px - 30px); }
}
@media (min-width: 600px) and (max-width: 899.98px) { .cc-hero--scene .cc-scene__box { max-height: 620px; } }
/* Sections sit flush under the sticky header; WordPress's default block gap would add 20px. */
.wp-site-blocks > .cc-main, .cc-main { margin-block-start: 0 !important; }
.cc-hero--scene > .cc-scene, .cc-hero--scene > * { margin-block: 0; }

/* ---------- Home: recipe card section (side by side, magic dust) ----------
 * Teal band: white text 6.66:1, butter eyebrow 4.62:1, ink on butter list numbers 9.13:1.
 * Two dust layers drift upward at different speeds; the shaker tilts and sprinkles a stream
 * toward the card, which lifts into place when it scrolls into view (JS adds .is-in).
 */
.cc-cardintro { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: clamp(32px, 5vw, 64px); align-items: start; background: var(--cc-teal-dk); color: #fff; }
.cc-cardintro { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .cc-cardintro { grid-template-columns: minmax(260px, .66fr) minmax(0, 1.6fr); } }
.cc-cardintro > * { position: relative; z-index: 2; margin-block: 0; min-width: 0; }
.cc-cardintro__text h2 { margin: 0 0 .9rem; color: #fff; }
.cc-cardintro__text p { color: #fff; max-width: 44ch; }
.cc-cardintro .cc-eyebrow { color: var(--cc-butter); }
@media (min-width: 1000px) { .cc-cardintro__text { position: sticky; top: 110px; } }
.cc-howto { list-style: none; counter-reset: howto; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .9rem; max-width: 44ch; }
.cc-howto li { counter-increment: howto; position: relative; padding-left: 2.75rem; line-height: 1.5; }
.cc-howto li::before { content: counter(howto); position: absolute; left: 0; top: -.1rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--cc-butter); color: var(--cc-ink); font-weight: 900; }
.cc-howto strong { color: var(--cc-butter); }

/* The shaker, sprinkling toward the card */
.cc-cardintro__shaker { position: relative; display: inline-block; margin-top: 2rem; }
.cc-cardintro__shaker img { display: block; width: 120px; height: auto; transform-origin: 60% 70%; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .3)); animation: cc-shake 3.6s ease-in-out infinite; }
@keyframes cc-shake {
	0%, 55%, 100% { transform: rotate(-24deg); }
	62% { transform: rotate(-40deg) translateY(-4px); }
	69% { transform: rotate(-20deg); }
	76% { transform: rotate(-38deg) translateY(-3px); }
	83% { transform: rotate(-24deg); }
}
.cc-cardintro__shaker::after { /* dust stream */
	content: ""; position: absolute; left: 70%; top: 18%; width: 280px; height: 120px; pointer-events: none;
	background-image:
		radial-gradient(circle, #ffd166 1.6px, transparent 2.4px),
		radial-gradient(circle, #25b8b8 1.3px, transparent 2px),
		radial-gradient(circle, #f7b6c8 1.4px, transparent 2.2px),
		radial-gradient(circle, #ffffff 1px, transparent 1.8px);
	background-size: 46px 38px, 34px 44px, 58px 30px, 26px 34px;
	background-position: 0 6px, 12px 20px, 20px 2px, 6px 14px;
	-webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .7) 50%, transparent 100%), linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
	-webkit-mask-composite: source-in;
	        mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .7) 50%, transparent 100%), linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
	        mask-composite: intersect;
	animation: cc-stream 2.4s linear infinite;
	transform: rotate(14deg);
}
@keyframes cc-stream { to { background-position: 46px 44px, 46px 64px, 78px 32px, 32px 48px; } }

/* Magic dust across the band */
.cc-cardintro::before, .cc-cardintro::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cc-cardintro::before {
	background-image:
		radial-gradient(circle, rgba(255, 209, 102, .85) 1.4px, transparent 2.2px),
		radial-gradient(circle, rgba(37, 184, 184, .8) 1.2px, transparent 2px),
		radial-gradient(circle, rgba(247, 182, 200, .75) 1.3px, transparent 2.1px),
		radial-gradient(circle, rgba(185, 160, 232, .8) 1.1px, transparent 1.9px);
	background-size: 210px 230px, 170px 190px, 260px 240px, 130px 150px;
	background-position: 20px 40px, 90px 10px, 140px 120px, 60px 80px;
	animation: cc-dust 30s linear infinite;
}
.cc-cardintro::after { /* fewer, bigger, twinkling motes */
	background-image:
		radial-gradient(circle, rgba(255, 255, 255, .9) 2px, transparent 3.2px),
		radial-gradient(circle, rgba(255, 209, 102, .95) 2.4px, transparent 3.6px);
	background-size: 340px 380px, 420px 330px;
	background-position: 120px 60px, 300px 210px;
	animation: cc-dust-slow 48s linear infinite, cc-glimmer 3.4s ease-in-out infinite alternate;
}
@keyframes cc-dust { to { background-position: 20px -190px, 90px -180px, 140px -120px, 60px -70px; } }
@keyframes cc-dust-slow { to { background-position: 120px -320px, 300px -120px; } }
@keyframes cc-glimmer { from { opacity: .35; } to { opacity: 1; } }

/* Star motes added by front.js at random positions */
.cc-motes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cc-mote { position: absolute; opacity: 0; filter: drop-shadow(0 0 4px rgba(255, 209, 102, .6));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z%27/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z%27/%3E%3C/svg%3E") center / contain no-repeat;
	animation: cc-mote 9s ease-in-out infinite; }
@keyframes cc-mote {
	0% { transform: translateY(20px) scale(.4) rotate(0); opacity: 0; }
	20% { opacity: .95; }
	50% { transform: translateY(-30px) scale(1) rotate(90deg); opacity: .7; }
	80% { opacity: .9; }
	100% { transform: translateY(-80px) scale(.5) rotate(180deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .cc-mote { animation: none; opacity: .6; } }

/* Card lifts into place (only when JS is running, so it is never hidden without it) */
.cc-cardintro .cc-recipe { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55); }
.cc-js .cc-cardintro .cc-recipe { opacity: 0; transform: translateY(32px) rotate(-1.5deg); transition: opacity .7s ease, transform 1s cubic-bezier(.2, .8, .2, 1); }
.cc-js .cc-cardintro .cc-recipe.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.cc-cardintro::before, .cc-cardintro::after, .cc-cardintro__shaker::after, .cc-cardintro__shaker img { animation: none; }
	.cc-js .cc-cardintro .cc-recipe { opacity: 1; transform: none; }
}
@media (max-width: 479.98px) { .cc-process .cc-actions .wp-block-button__link { padding: .9em 1.3em; font-size: 1.02rem; white-space: nowrap; } }

/* ---------- Home: "Fresh from the kitchen" sits in Caleigh's kitchen ----------
 * Background = the Caleigh-free left part of the hero's wide kitchen, softened (pre-blurred) so the
 * Caleigh holding the card reads in front of it. Cream fades top and bottom blend into the
 * neighbouring sections; the top stays nearly solid cream behind the heading.
 */
.cc-fresh { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(56px, 8vw, 120px); }
.cc-fresh::before, .cc-fresh::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.cc-fresh::before { z-index: -2;
	background: url("../img/kitchen-bg-800.webp") center 42% / cover no-repeat;
	background-image: image-set(url("../img/kitchen-bg-800.avif") type("image/avif"), url("../img/kitchen-bg-800.webp") type("image/webp")); }
@media (min-width: 700px) { .cc-fresh::before { background-image: image-set(url("../img/kitchen-bg-1280.avif") type("image/avif"), url("../img/kitchen-bg-1280.webp") type("image/webp")); } }
@media (min-width: 1300px) { .cc-fresh::before { background-image: image-set(url("../img/kitchen-bg-1800.avif") type("image/avif"), url("../img/kitchen-bg-1800.webp") type("image/webp")); } }
.cc-fresh::after { z-index: -1;
	background: linear-gradient(180deg, var(--cc-cream) 0%, rgba(255, 248, 237, .9) 12%, rgba(255, 248, 237, .45) 30%, rgba(255, 248, 237, .3) 60%, rgba(255, 248, 237, .55) 85%, var(--cc-cream) 100%); }
.cc-fresh > h2 { position: relative; }
.cc-fresh .cc-peek__card { box-shadow: 0 34px 70px -34px rgba(38, 50, 56, .55); }

/* ---------- Shop header: the bubbling cauldron ----------
 * Transparent cauldron (w:h 0.7467) with rainbow steam, sitting on the search toolbar's right end.
 * --pw = cauldron width. It overlaps the toolbar by --pw * .34, and the toolbar keeps that corner free
 * (padding-right on desktop, padding-top on phones) so no field or button is ever covered.
 * Motion: the pot bubbles (tiny squash and wobble), a glow breathes behind it, and sparkles
 * rise through the steam. All of it stops under prefers-reduced-motion.
 */
.cc-main--shop { --pw: clamp(140px, 21vw, 300px); }
.cc-pagehead--shop { position: relative; z-index: 2; align-items: end; padding-bottom: 0; margin-bottom: calc(var(--pw) * -.30) !important; }
.cc-pagehead--shop .cc-pagehead__text { padding-bottom: calc(var(--pw) * .30 + clamp(24px, 3vw, 40px)); }
.cc-cauldron { position: relative; display: block; width: var(--pw); margin-bottom: 0; margin-right: clamp(0px, 2vw, 24px); pointer-events: none; }
.cc-cauldron img { position: relative; z-index: 1; display: block; width: 100%; height: auto;
	transform-origin: 50% 96%;
	animation: cc-bubble 2.8s ease-in-out infinite; }
@keyframes cc-bubble {
	0%, 100% { transform: scale(1, 1) rotate(0); }
	20% { transform: scale(1.012, .99) rotate(-.8deg); }
	45% { transform: scale(.995, 1.012) rotate(.6deg); }
	70% { transform: scale(1.008, .995) rotate(-.4deg); }
}
.cc-cauldron::before { /* magic glow behind the pot */
	content: ""; position: absolute; z-index: 0; left: 6%; right: 6%; bottom: 2%; height: 40%; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(37, 184, 184, .45), rgba(255, 209, 102, .25) 55%, rgba(255, 209, 102, 0));
	animation: cc-glow-breathe 3.2s ease-in-out infinite; }
@keyframes cc-glow-breathe { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
.cc-cauldron::after { /* sparkles rising through the steam */
	content: ""; position: absolute; z-index: 2; left: 14%; right: 14%; top: 6%; height: 52%;
	background-image:
		radial-gradient(circle, #fff 1.8px, transparent 2.8px),
		radial-gradient(circle, #ffd166 2.2px, transparent 3.2px),
		radial-gradient(circle, #f7b6c8 1.8px, transparent 2.8px),
		radial-gradient(circle, #25b8b8 1.6px, transparent 2.6px),
		radial-gradient(circle, #b9a0e8 2px, transparent 3px);
	background-size: 38px 60px, 64px 90px, 52px 74px, 46px 82px, 70px 66px;
	background-position: 4px 10px, 22px 40px, 12px 26px, 30px 4px, 8px 50px;
	-webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 25%, #000 70%, transparent 100%);
	        mask-image: linear-gradient(0deg, transparent 0%, #000 25%, #000 70%, transparent 100%);
	animation: cc-steam-sparkle 4.5s linear infinite; }
@keyframes cc-steam-sparkle { to { background-position: 4px -50px, 22px -50px, 12px -48px, 30px -78px, 8px -16px; } }
.cc-cauldron .cc-pot-star { display: none; }

/* The toolbar keeps the corner under the cauldron free */
.cc-main--shop .cc-section--shop { position: relative; z-index: 1; }
@media (min-width: 760px) { .cc-main--shop .cc-toolbar { padding-right: calc(var(--pw) * .82 + 16px); min-height: calc(var(--pw) * .46); } }
@media (max-width: 759.98px) {
	.cc-main--shop { --pw: 140px; }
	.cc-pagehead--shop { grid-template-columns: 1fr auto; gap: 8px; }
	.cc-main--shop .cc-toolbar { padding-top: calc(var(--pw) * .30 + 12px); }
}
@media (prefers-reduced-motion: reduce) {
	.cc-cauldron img, .cc-cauldron::before, .cc-cauldron::after { animation: none; }
}