/*
 * Caleigh Cooks components (plugin-owned so they survive a theme change).
 * Text/background pairs used here, measured (WCAG 2.x):
 *   ink #263238 on cream #FFF8ED 12.47 · on white 13.16 · on butter #FFD166 9.13 · on mint #E3F6F4 11.75
 *   teal-dk #0F6670 on cream 6.31 · white on teal-dk 6.66 · butter on teal-dk 4.62
 *   muted #55626A on cream 5.96 · on white 6.28
 *   chestnut #70452F on cream 7.71 · on white 8.14
 *   lav-dk #6A4FB0 on cream 5.93 · on white 6.25
 *   coral-dk #B5452A on cream 5.17 · on white 5.46
 * Turquoise, coral, lavender, pink and butter are decorative only (all < 3:1 on cream).
 */
:root {
	--cc-cream: #fff8ed;
	--cc-paper: #ffffff;
	--cc-ink: #263238;
	--cc-muted: #55626a;
	--cc-teal: #25b8b8;
	--cc-teal-dk: #0f6670;
	--cc-teal-md: #147d86;
	--cc-butter: #ffd166;
	--cc-coral: #ff8f70;
	--cc-coral-dk: #b5452a;
	--cc-lav: #b9a0e8;
	--cc-lav-dk: #6a4fb0;
	--cc-pink: #f7b6c8;
	--cc-chestnut: #70452f;
	--cc-mint: #e3f6f4;
	--cc-blush: #fde8ee;
	--cc-lilac: #efe8fb;
	--cc-line: rgba(38, 50, 56, 0.12);
	--cc-font: "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
	--cc-ease: cubic-bezier(.2, .7, .2, 1);
	--cc-gutter: max(16px, calc((100% - 1200px) / 2));
}

*, *::before, *::after { box-sizing: border-box; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cc-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }

/* Buttons and links */
.cc-btn, .wp-block-button .wp-block-button__link, .wp-element-button {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 48px; padding: .7em 1.4em; border-radius: 999px;
	font: 800 1rem/1.2 var(--cc-font); text-decoration: none; cursor: pointer;
	background: var(--cc-paper); color: var(--cc-teal-dk); border: 2px solid var(--cc-teal-dk);
	transition: transform .18s var(--cc-ease), background-color .18s var(--cc-ease), color .18s var(--cc-ease), box-shadow .18s var(--cc-ease);
}
.cc-btn:hover, .wp-block-button .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 6px 0 -2px rgba(15, 102, 112, .25); }
.cc-btn--primary, .is-style-primary .wp-block-button__link, .wp-block-button:not(.is-style-quiet):not(.is-style-outline) .wp-block-button__link {
	background: var(--cc-teal-dk); color: #fff; border-color: var(--cc-teal-dk);
}
.cc-btn--primary:hover, .is-style-primary .wp-block-button__link:hover { background: #0b5059; }
.cc-btn--lg { min-height: 56px; padding-inline: 1.8em; font-size: 1.0625rem; }
.cc-link { color: var(--cc-teal-dk); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cc-link:hover { text-decoration-style: wavy; }

.cc-badge { display: inline-block; margin: 0; padding: .3em .8em; border-radius: 999px; background: var(--cc-lilac); color: var(--cc-lav-dk); font-weight: 800; font-size: .8125rem; }
.cc-badge--soon { background: var(--cc-butter); color: var(--cc-ink); }
.cc-eyebrow { margin: 0 0 .6rem; color: var(--cc-lav-dk); font-weight: 800; font-size: .8125rem; letter-spacing: .09em; text-transform: uppercase; }
.cc-eyebrow a { color: inherit; }

/* ---------- Recipe card ---------- */
.cc-recipe {
	position: relative; margin: 0 auto; max-width: 1100px;
	background: var(--cc-paper); color: var(--cc-ink);
	border-radius: 28px; padding: clamp(20px, 3.5vw, 44px);
	box-shadow: 0 30px 60px -36px rgba(15, 102, 112, .45);
}
.cc-recipe::before { /* stitched recipe-book edge */
	content: ""; position: absolute; inset: 10px; border: 2px dashed rgba(37, 184, 184, .55); border-radius: 20px; pointer-events: none;
}
.cc-recipe__flag { display: flex; gap: .5em; align-items: center; margin: 0 0 1.2rem; padding: .55em 1em; border-radius: 12px; background: var(--cc-butter); font-weight: 700; font-size: .9375rem; position: relative; }
.cc-recipe__head { position: relative; text-align: center; margin-bottom: clamp(18px, 3vw, 32px); }
.cc-recipe__eyebrow { margin: 0; color: var(--cc-lav-dk); font-weight: 800; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; }
.cc-recipe__title { margin: .2em 0 .15em; font: 900 clamp(2rem, 1.4rem + 2.4vw, 3rem)/1.05 var(--cc-font); color: var(--cc-teal-dk); }
.cc-recipe__inspo { margin: 0; font-style: italic; color: var(--cc-muted); font-size: 1.0625rem; }
.cc-recipe__body { position: relative; display: grid; gap: clamp(20px, 3vw, 40px); }
.cc-recipe { container-type: inline-size; width: 100%; }
/* The card decides its own columns from its width, so it works full-width or beside other content. */
@container (min-width: 620px) { .cc-recipe__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; } }
.cc-recipe__preview img { display: block; width: 100%; height: auto; border-radius: 18px; background: var(--cc-cream); }
.cc-recipe__story { margin: 1rem 0 0; line-height: 1.65; }
.cc-recipe__subhead { margin: 0 0 .6rem; font: 900 1.25rem/1.2 var(--cc-font); color: var(--cc-ink); }
.cc-recipe__table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.cc-recipe__table thead th { text-align: left; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cc-muted); padding: 0 0 .4rem; border-bottom: 2px solid var(--cc-ink); }
.cc-recipe__table tbody th, .cc-recipe__table tbody td { padding: .6rem 0; border-bottom: 1px dashed var(--cc-line); text-align: left; font-weight: 400; vertical-align: middle; }
.cc-recipe__table .cc-num { text-align: right; width: 4ch; }
.cc-recipe__table tbody .cc-num { font: 900 1.5rem/1 var(--cc-font); color: var(--cc-chestnut); }
.cc-recipe__table tfoot th, .cc-recipe__table tfoot td { padding: .7rem .8rem; background: var(--cc-butter); font-weight: 900; text-align: left; }
.cc-recipe__table tfoot th { border-radius: 12px 0 0 12px; }
.cc-recipe__table tfoot td { position: relative; border-radius: 0 12px 12px 0; font-size: 1.5rem; text-align: right; }
.cc-recipe__table tfoot td::before { /* a little twinkle beside the total */
	content: ""; position: absolute; left: -4px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--cc-coral-dk);
	-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-soft 2.8s ease-in-out infinite;
}
@keyframes cc-twinkle-soft { 0%, 100% { transform: scale(.6) rotate(0); opacity: .5; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
.cc-ing { display: flex; align-items: center; gap: .75rem; }
.cc-ing__thumb { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; background: var(--cc-cream); }
.cc-ing__text { display: grid; }
.cc-ing__name { font-weight: 800; }
.cc-ing__desc { color: var(--cc-muted); font-size: .875rem; }
.cc-recipe__files { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .5rem 1.25rem; margin: 1.25rem 0 0; }
.cc-recipe__files div { padding-top: .5rem; border-top: 1px solid var(--cc-line); }
.cc-recipe__files dt { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cc-muted); font-weight: 800; }
.cc-recipe__files dd { margin: .1rem 0 0; font-weight: 700; }
.cc-recipe__files .cc-recipe__license { grid-column: 1 / -1; }
.cc-recipe__files .cc-recipe__license dd { font-weight: 400; }
.cc-recipe__buy { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; margin-top: clamp(20px, 3vw, 32px); padding-top: clamp(16px, 2.5vw, 24px); border-top: 2px solid var(--cc-ink); }
.cc-price { margin: 0; font: 900 1.75rem/1 var(--cc-font); color: var(--cc-chestnut); }
.cc-buy { margin: 0; }

/* ---------- Product cards and grid ---------- */
.cc-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 2.5vw, 28px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.cc-card { display: flex; flex-direction: column; background: var(--cc-paper); border-radius: 22px; overflow: hidden; }
.cc-card__media { display: block; aspect-ratio: 1; background: var(--cc-mint); overflow: hidden; }
.cc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--cc-ease); }
.cc-card:hover .cc-card__media img { transform: scale(1.04); }
.cc-card__body { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.15rem 1.2rem; flex: 1; }
.cc-card__num { margin: 0; color: var(--cc-lav-dk); font-weight: 800; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.cc-card__title { margin: 0; font: 900 1.2rem/1.2 var(--cc-font); }
.cc-card__title a { color: var(--cc-ink); text-decoration: none; }
.cc-card__title a:hover { text-decoration: underline wavy var(--cc-teal); text-underline-offset: 5px; }
.cc-card__summary { margin: 0; color: var(--cc-muted); font-size: .9375rem; }
.cc-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: auto 0 0; padding-top: .5rem; }
.cc-card__count { padding: .2em .65em; border-radius: 999px; background: var(--cc-mint); font-weight: 800; font-size: .8125rem; }
.cc-card__price { font-weight: 900; color: var(--cc-chestnut); font-size: 1.125rem; }
.cc-card__cta { display: inline-flex; gap: .35em; align-items: center; min-height: 44px; color: var(--cc-teal-dk); font-weight: 800; text-decoration: none; }
.cc-card__cta:hover { text-decoration: underline; text-underline-offset: 4px; }

.cc-pagination ul { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; list-style: none; padding: 0; margin: 2rem 0 0; }
.cc-pagination a, .cc-pagination span { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 .8rem; border-radius: 999px; background: var(--cc-paper); color: var(--cc-ink); font-weight: 800; text-decoration: none; }
.cc-pagination .current { background: var(--cc-teal-dk); color: #fff; }

/* ---------- Empty states ---------- */
.cc-empty { display: grid; gap: clamp(20px, 4vw, 48px); align-items: center; padding: clamp(20px, 4vw, 40px); border-radius: 28px; background: var(--cc-paper); border: 2px dashed rgba(37, 184, 184, .55); }
@media (min-width: 700px) { .cc-empty { grid-template-columns: 260px 1fr; } }
.cc-empty__art img { display: block; width: 100%; height: auto; border-radius: 130px 130px 20px 20px; }
.cc-empty__title { margin: 0 0 .5rem; font: 900 clamp(1.5rem, 1.2rem + 1.2vw, 2rem)/1.15 var(--cc-font); color: var(--cc-teal-dk); }
.cc-empty__text p { max-width: 54ch; }
.cc-empty__links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.25rem; }
.cc-empty--small { grid-template-columns: 1fr !important; text-align: center; justify-items: center; }

/* ---------- Empty state: Caleigh sitting on the card ----------
 * The figure is a cutout (w:h = 0.8219) whose seat line sits at 66.667% of its height, so with width
 * --sw it stands --sw * .8111 above the card and its legs hang --sw * .4056 over the card face.
 * She sits at the card's top-right and points left at the heading. The shaker keeps its earlier
 * position (driven by --fw). Ink on white 13:1, teal-dk on white 6.66:1, chestnut on butter 5.64:1.
 */
.cc-peek { --fw: clamp(190px, 24vw, 290px); --sw: clamp(230px, 27vw, 330px); --sr: clamp(14px, 5%, 64px); display: block; padding: 0; border: 0; background: transparent; border-radius: 0; text-align: left; }
.cc-peek__card { position: relative; max-width: 980px; margin-top: calc(var(--sw) * .8111 + 12px); padding: 34px clamp(22px, 4vw, 52px) clamp(26px, 4vw, 44px);
	border-radius: 28px; background: var(--cc-paper); box-shadow: 0 30px 60px -36px rgba(15, 102, 112, .5);
	animation: cc-peek-bob 6s ease-in-out infinite; }
.cc-peek__card::before { content: ""; position: absolute; inset: 10px; border: 2px dashed rgba(37, 184, 184, .55); border-radius: 20px; pointer-events: none; }
@keyframes cc-peek-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.cc-peek__caleigh { position: absolute; right: var(--sr); bottom: calc(100% - var(--sw) * .4056); width: var(--sw); z-index: 3; pointer-events: none; }
.cc-peek__caleigh img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 10px rgba(38, 50, 56, .12)); }
.cc-peek__shadow { /* soft contact shadow where she sits */
	position: absolute; z-index: 2; top: 2px; right: calc(var(--sr) + var(--sw) * .22); width: calc(var(--sw) * .5); height: 22px;
	background: radial-gradient(closest-side, rgba(38, 50, 56, .22), rgba(38, 50, 56, 0)); pointer-events: none; }
.cc-peek__body { position: relative; z-index: 1; max-width: min(600px, calc(100% - var(--sw) - 8px)); }
.cc-peek__status { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; padding: .3em .9em .3em .7em; border-radius: 999px; background: var(--cc-butter); color: var(--cc-chestnut); font-weight: 900; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; }
.cc-peek__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cc-coral-dk); box-shadow: 0 0 0 0 rgba(181, 69, 42, .5); animation: cc-simmer 1.8s ease-out infinite; }
@keyframes cc-simmer { 0% { box-shadow: 0 0 0 0 rgba(181, 69, 42, .55); } 100% { box-shadow: 0 0 0 10px rgba(181, 69, 42, 0); } }
.cc-peek .cc-empty__title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }

/* The shaker floats beside Caleigh and sprinkles dust down onto the card */
.cc-peek__shaker { position: absolute; z-index: 4; left: calc(clamp(18px, 7%, 80px) + var(--fw) * .92); bottom: calc(100% + var(--fw) * .28); width: clamp(70px, 9vw, 104px); }
.cc-peek__shaker img { display: block; width: 100%; height: auto; transform-origin: 40% 80%; filter: drop-shadow(0 8px 12px rgba(15, 102, 112, .3)); animation: cc-peek-shake 3.2s ease-in-out infinite; }
@keyframes cc-peek-shake { 0%, 50%, 100% { rotate: 150deg; translate: 0 0; } 58% { rotate: 165deg; translate: 0 -5px; } 66% { rotate: 140deg; translate: 0 0; } 74% { rotate: 162deg; translate: 0 -4px; } 82% { rotate: 150deg; } }
.cc-peek__shaker::after { /* falling dust */
	content: ""; position: absolute; left: 10%; top: 72%; width: 70%; height: calc(var(--fw) * .55); pointer-events: none;
	background-image:
		radial-gradient(circle, #ffd166 1.8px, transparent 2.6px),
		radial-gradient(circle, #25b8b8 1.4px, transparent 2.2px),
		radial-gradient(circle, #f7b6c8 1.6px, transparent 2.4px),
		radial-gradient(circle, #b9a0e8 1.2px, transparent 2px);
	background-size: 22px 30px, 30px 24px, 26px 34px, 18px 26px;
	background-position: 2px 0, 12px 8px, 6px 16px, 16px 4px;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
	        mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
	animation: cc-peek-dust 1.6s linear infinite;
}
@keyframes cc-peek-dust { to { background-position: 2px 30px, 12px 32px, 6px 50px, 16px 30px; } }

/* Twinkles around her */
.cc-peek__sparkles { position: absolute; right: var(--sr); bottom: calc(100% - var(--sw) * .4056); width: var(--sw); height: calc(var(--sw) * 1.2167); z-index: 4; pointer-events: none; }
.cc-peek__sparkles i { position: absolute; width: 18px; height: 18px; 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 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, .8)); animation: cc-twinkle-soft 2.4s ease-in-out infinite; }
.cc-peek__sparkles i:nth-child(1) { left: 6%; top: 34%; }
.cc-peek__sparkles i:nth-child(2) { left: 70%; top: 2%; width: 14px; height: 14px; background: var(--cc-teal); animation-delay: -.6s; }
.cc-peek__sparkles i:nth-child(3) { left: 16%; top: 12%; width: 12px; height: 12px; background: var(--cc-pink); animation-delay: -1.2s; }
.cc-peek__sparkles i:nth-child(4) { left: 92%; top: 22%; width: 20px; height: 20px; animation-delay: -1.8s; }
.cc-peek__sparkles i:nth-child(5) { left: -2%; top: 50%; width: 12px; height: 12px; background: var(--cc-lav); animation-delay: -.9s; }

@media (max-width: 599.98px) {
	.cc-peek { --fw: 200px; --sw: 210px; --sr: 8px; }
	.cc-peek__shaker { left: 12px; width: 64px; }
	.cc-peek__body { max-width: none; padding-top: calc(var(--sw) * .4056 - 6px); }
}
@media (prefers-reduced-motion: reduce) {
	.cc-peek__card, .cc-peek__shaker img, .cc-peek__shaker::after, .cc-peek__sparkles i, .cc-peek__dot { animation: none; }
}

/* ---------- Pantry (collections): glass jars on wooden shelves ---------- */
/* The li is the shelf slot and carries the plank; .cc-jar__glass is the jar. Only the glass moves
   (drop-in, jiggle, hover lift), so the shelf stays put underneath it. */
.cc-pantry { --plank-x: 7px; list-style: none; margin: 0; padding: 26px 0 0; display: grid; column-gap: 12px; row-gap: 56px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .cc-pantry { --plank-x: 12px; column-gap: 22px; row-gap: 64px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }
.cc-jar { --acc: var(--cc-teal); position: relative; display: flex; flex-direction: column; }
.cc-jar.cc-accent--yellow { --acc: var(--cc-butter); }
.cc-jar.cc-accent--coral { --acc: var(--cc-coral); }
.cc-jar.cc-accent--lavender { --acc: var(--cc-lav); }
.cc-jar.cc-accent--pink { --acc: var(--cc-pink); }
.cc-jar.has-cover { grid-column: 1 / -1; }
@media (min-width: 900px) { .cc-jar.has-cover { grid-column: span 2; grid-row: span 2; } }

/* The shelf plank: each slot's plank reaches half the column gap, so neighbours join into one shelf. */
.cc-jar::after { content: ""; position: absolute; z-index: 0; left: calc(-1 * var(--plank-x)); right: calc(-1 * var(--plank-x)); bottom: -17px; height: 17px; pointer-events: none; border-radius: 0;
	background: linear-gradient(180deg, #e2b088 0 3px, #bf8456 3px 58%, #976140 58% 100%);
	box-shadow: 0 14px 16px -9px rgba(74, 42, 28, .5); }
/* Stars that escape when the lid lifts. */
.cc-jar::before { content: ""; position: absolute; z-index: 4; top: -64px; left: 58%; width: 92px; height: 52px; margin-left: -30px; pointer-events: none; scale: 0; opacity: 0; transform-origin: 30% 100%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 36'%3E%3Cpath fill='%23FFD166' stroke='%2370452F' stroke-width='3' stroke-linejoin='round' transform='translate(2 12) scale(.22)' 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'/%3E%3Cpath fill='%23FF8F70' transform='translate(26 0) scale(.15)' 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'/%3E%3Cpath fill='%2325B8B8' transform='translate(46 14) scale(.17)' 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'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: scale .45s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease, translate .45s ease; }

/* The glass jar: tinted glass, glowing contents at the bottom, shine down the left side. */
.cc-jar__glass { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; margin-top: 20px; padding: 1.3rem 1.3rem 1.2rem 1.65rem; border: 3px solid rgba(255, 255, 255, .95); border-radius: 36px 36px 20px 20px; transform-origin: 50% 100%;
	background:
		radial-gradient(130% 50% at 50% 108%, color-mix(in srgb, var(--acc) 55%, #fff) 0%, transparent 72%),
		linear-gradient(180deg, color-mix(in srgb, var(--acc) 10%, #fff) 0%, color-mix(in srgb, var(--acc) 22%, #fff) 100%);
	box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--acc) 50%, transparent), inset 0 -16px 28px -16px color-mix(in srgb, var(--acc) 85%, transparent), 0 10px 8px -7px rgba(74, 42, 28, .4);
	transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease; }
.cc-jar__glass::before { content: ""; position: absolute; z-index: 2; top: 26px; bottom: 28px; left: 8px; width: 7px; border-radius: 8px; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .15)); }
.cc-jar__glass::after { content: ""; position: absolute; z-index: 2; top: 12px; right: 18px; width: 26px; height: 8px; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, .9); rotate: 16deg; }

/* Gingham cloth cover with a scalloped hem and a twine band. */
.cc-jar__lid { position: absolute; z-index: 3; top: -26px; left: 19%; right: 19%; height: 40px; pointer-events: none; border-radius: 50% 50% 0 0 / 26px 26px 0 0; transform-origin: 12% 100%;
	background:
		linear-gradient(180deg, transparent 62%, #c9925f 62% 69%, #a8703f 69% 75%, transparent 75%),
		repeating-linear-gradient(90deg, color-mix(in srgb, var(--acc) 62%, transparent) 0 7px, transparent 7px 14px),
		repeating-linear-gradient(0deg, color-mix(in srgb, var(--acc) 62%, transparent) 0 7px, transparent 7px 14px),
		#fff;
	-webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 6px) no-repeat, radial-gradient(6px at 50% 0, #000 98%, #0000) bottom / 12px 6px repeat-x;
	mask: linear-gradient(#000 0 0) top / 100% calc(100% - 6px) no-repeat, radial-gradient(6px at 50% 0, #000 98%, #0000) bottom / 12px 6px repeat-x;
	transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }

/* Magic fizzing up through the contents (decorative; hidden when motion is reduced). */
.cc-jar__fizz { position: absolute; z-index: 0; inset: 0; border-radius: 33px 33px 17px 17px; overflow: hidden; container-type: size; pointer-events: none; opacity: .75; transition: opacity .3s ease; }
.cc-jar__fizz i { position: absolute; bottom: -14px; left: 18%; width: 9px; height: 9px; border-radius: 50%; opacity: 0; background: radial-gradient(circle at 35% 35%, #fff 0 28%, color-mix(in srgb, var(--acc) 80%, #fff) 34%); box-shadow: 0 0 6px color-mix(in srgb, var(--acc) 70%, transparent); }
.cc-jar__fizz i:nth-child(2) { left: 36%; width: 13px; height: 13px; border-radius: 0; box-shadow: none; 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'/%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'/%3E%3C/svg%3E") center / contain no-repeat; }
.cc-jar__fizz i:nth-child(3) { left: 58%; width: 6px; height: 6px; }
.cc-jar__fizz i:nth-child(4) { left: 74%; width: 11px; height: 11px; }
.cc-jar__fizz i:nth-child(5) { left: 86%; width: 10px; height: 10px; border-radius: 0; box-shadow: none; 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 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-jar__fizz i:nth-child(6) { left: 47%; width: 7px; height: 7px; }

.cc-jar__text { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; }
/* The number is a round jam-jar label. */
.cc-jar__no { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--acc); color: var(--cc-ink); font: 900 1.05rem/1 var(--cc-font); rotate: -8deg; outline: 2px dashed rgba(255, 255, 255, .9); outline-offset: -6px; box-shadow: 0 3px 0 rgba(74, 42, 28, .18); }
.cc-jar__name { margin: .6rem 0 .3rem; font: 900 1.2rem/1.2 var(--cc-font); }
.cc-jar__name a { color: var(--cc-ink); text-decoration: none; }
.cc-jar__name a::after { content: ""; position: absolute; inset: -3px; z-index: 5; border-radius: 36px 36px 20px 20px; }
.cc-jar__name a:hover { text-decoration: underline wavy var(--cc-teal); text-underline-offset: 5px; }
.cc-jar__name a:focus-visible { outline: none; }
.cc-jar:has(a:focus-visible) .cc-jar__glass { outline: 3px solid var(--cc-teal-dk); outline-offset: 4px; }
.cc-jar__inspo { margin: 0 0 1rem; color: var(--cc-muted); font-size: .9375rem; }
.cc-jar__status { align-self: flex-start; display: inline-flex; align-items: center; gap: .5em; margin: auto 0 0; padding: .35em .85em .35em .6em; border-radius: 999px; background: #fff; box-shadow: 0 2px 0 color-mix(in srgb, var(--acc) 55%, transparent); font-weight: 800; font-size: .8125rem; line-height: 1.2; color: var(--cc-teal-dk); }
.cc-jar__status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cc-teal-dk); }
.cc-jar__status.is-soon { color: var(--cc-muted); }
.cc-jar__status.is-soon::before { background: var(--cc-coral-dk, #b5452a); }

/* A collection with a cover shows its artwork inside the jar. */
.cc-jar.has-cover .cc-jar__glass { padding: 14px 14px 1.25rem; }
.cc-jar.has-cover .cc-jar__cover { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 26px 26px 14px 14px; background: var(--cc-cream); }
.cc-jar.has-cover .cc-jar__text { padding: .9rem .5rem 0 .7rem; }
@media (min-width: 900px) {
	.cc-jar.has-cover .cc-jar__cover { aspect-ratio: 4 / 3; }
	.cc-jar.has-cover .cc-jar__name { font-size: 1.75rem; }
}
@media (max-width: 699.98px) {
	.cc-jar__glass { padding: 1.1rem .85rem 1rem 1.15rem; border-radius: 30px 30px 18px 18px; }
	.cc-jar__glass::before { left: 5px; width: 5px; }
	.cc-jar__no { width: 2.3rem; height: 2.3rem; font-size: .9rem; }
	.cc-jar__name { font-size: 1.05rem; }
	.cc-jar__inspo { font-size: .875rem; }
	.cc-jar__status { font-size: .75rem; }
	.cc-jar__lid { left: 15%; right: 15%; }
}

/* Hover or keyboard focus: the jar lifts and glows, the cloth flips up and stars escape. */
.cc-jar:is(:hover, :focus-within) .cc-jar__glass { transform: translateY(-8px) rotate(-1.2deg); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--acc) 60%, transparent), inset 0 -18px 30px -14px var(--acc), 0 0 0 7px color-mix(in srgb, var(--acc) 30%, transparent), 0 22px 28px -12px color-mix(in srgb, var(--acc) 80%, #70452f); }
.cc-jar:is(:hover, :focus-within) .cc-jar__lid { transform: translate(-6px, -16px) rotate(-16deg); }
.cc-jar:is(:hover, :focus-within) .cc-jar__fizz { opacity: 1; }
.cc-jar:is(:hover, :focus-within)::before { scale: 1; opacity: 1; translate: 0 -10px; }

@keyframes cc-fizz {
	0% { transform: translate(0, 0) scale(.5); opacity: 0; }
	12% { opacity: .95; }
	50% { transform: translate(7px, -52cqh) scale(1); }
	85% { opacity: .8; }
	100% { transform: translate(-5px, -104cqh) scale(.75); opacity: 0; }
}
@keyframes cc-jar-drop {
	0% { opacity: 0; translate: 0 -80px; scale: .96 1.05; }
	55% { opacity: 1; translate: 0 0; scale: 1.05 .93; }
	75% { translate: 0 -7px; scale: .98 1.02; }
	100% { opacity: 1; translate: 0 0; scale: 1; }
}
/* Mostly still; each jar takes its turn to wobble (staggered by --i). */
@keyframes cc-jar-jiggle { 0%, 86%, 100% { rotate: 0deg; } 89% { rotate: -3deg; } 92% { rotate: 2.4deg; } 95% { rotate: -1.4deg; } 98% { rotate: .5deg; } }
@media (prefers-reduced-motion: no-preference) {
	.cc-jar__fizz i { animation: cc-fizz 7s linear infinite; }
	.cc-jar__fizz i:nth-child(2) { animation-duration: 8.5s; animation-delay: -2.2s; }
	.cc-jar__fizz i:nth-child(3) { animation-duration: 6s; animation-delay: -4.1s; }
	.cc-jar__fizz i:nth-child(4) { animation-duration: 9s; animation-delay: -6.3s; }
	.cc-jar__fizz i:nth-child(5) { animation-duration: 7.5s; animation-delay: -1.1s; }
	.cc-jar__fizz i:nth-child(6) { animation-duration: 10s; animation-delay: -7.7s; }
	.cc-js .cc-pantry:not(.is-in) .cc-jar__glass { opacity: 0; }
	.cc-js .cc-pantry.is-in .cc-jar__glass { animation: cc-jar-drop .85s cubic-bezier(.3, 1.3, .6, 1) calc(var(--i, 0) * 110ms) both, cc-jar-jiggle 11s ease-in-out calc(1.8s + var(--i, 0) * 1.37s) infinite; }
}
@media (prefers-reduced-motion: reduce) {
	.cc-jar__glass, .cc-jar__lid, .cc-jar::before { transition: none; }
	.cc-jar__fizz { display: none; }
}

/* ---------- Episodes ---------- */
.cc-episodes { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; }
.cc-episode { display: grid; gap: clamp(20px, 4vw, 48px); align-items: center; background: var(--cc-paper); border-radius: 28px; padding: clamp(16px, 3vw, 32px); }
@media (min-width: 800px) { .cc-episode { grid-template-columns: minmax(240px, 340px) 1fr; } }
.cc-episode__video, .cc-episode__media img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; max-height: 70vh; object-fit: cover; border-radius: 20px; background: var(--cc-ink); }
.cc-episode__num { margin: 0; color: var(--cc-lav-dk); font-weight: 800; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; }
.cc-episode__title { margin: .3rem 0 .6rem; font: 900 clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem)/1.1 var(--cc-font); color: var(--cc-teal-dk); }
.cc-episode__ings { padding: .7rem 1rem; border-radius: 14px; background: var(--cc-mint); }

/* ---------- Forms ---------- */
.cc-form { display: grid; gap: 1.1rem; }
.cc-form__row { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .cc-form__row { grid-template-columns: 1fr 1fr; } }
.cc-field { display: grid; gap: .35rem; }
.cc-field label { font-weight: 800; }
.cc-field input, .cc-field select, .cc-field textarea, .cc-searchform input[type=search] {
	width: 100%; min-height: 48px; padding: .65em .9em; border-radius: 14px; border: 2px solid rgba(38, 50, 56, .35);
	background: var(--cc-paper); color: var(--cc-ink); font: 500 1rem/1.4 var(--cc-font);
}
.cc-field textarea { min-height: 150px; resize: vertical; }
.cc-field input:focus, .cc-field select:focus, .cc-field textarea:focus { border-color: var(--cc-teal-dk); outline: 3px solid rgba(15, 102, 112, .25); outline-offset: 1px; }
.cc-field [aria-invalid=true] { border-color: var(--cc-coral-dk); }
.cc-field__error { margin: 0; color: var(--cc-coral-dk); font-weight: 700; font-size: .9375rem; }
.cc-field__hint { margin: 0; color: var(--cc-muted); font-size: .875rem; }
.cc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cc-notice { padding: 1.1rem 1.25rem; border-radius: 18px; background: var(--cc-blush); border-left: 6px solid var(--cc-coral-dk); }
.cc-notice--ok { background: var(--cc-mint); border-left-color: var(--cc-teal-dk); }
.cc-notice h2 { margin: 0 0 .4rem; font-size: 1.25rem; }
.cc-notice p { margin: .25rem 0; }
.cc-notice:focus { outline: 3px solid var(--cc-teal-dk); outline-offset: 3px; }

/* ---------- Shop toolbar ---------- */
.cc-toolbar { display: grid; gap: 1rem; align-items: end; padding: clamp(16px, 2.5vw, 24px); margin-bottom: clamp(20px, 3vw, 32px); border-radius: 24px; background: var(--cc-paper); }
@media (min-width: 760px) { .cc-toolbar { grid-template-columns: 2fr repeat(3, minmax(0, 1fr)) auto; } }
.cc-toolbar__actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }
.cc-toolbar__count { grid-column: 1 / -1; margin: 0; color: var(--cc-muted); font-weight: 700; }
.cc-js .cc-toolbar [type=submit] { /* stays visible: some people prefer to choose several filters first */ }

/* ---------- Details on product pages ---------- */
.cc-details { display: grid; gap: clamp(24px, 4vw, 56px); }
@media (min-width: 860px) { .cc-details { grid-template-columns: 1fr 1fr; } }
.cc-spec { margin: 0 0 1.5rem; display: grid; gap: 0; }
.cc-spec div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: .65rem 0; border-bottom: 1px dashed var(--cc-line); }
.cc-spec dt { font-weight: 800; }
.cc-spec dd { margin: 0; }
.cc-ticks, .cc-crosses { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .45rem; }
.cc-ticks li, .cc-crosses li { display: flex; gap: .6rem; align-items: baseline; }
.cc-ticks .cc-icon { color: var(--cc-teal-dk); }
.cc-crosses .cc-icon { color: var(--cc-coral-dk); }

/* ---------- Related posts ---------- */
.cc-related__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.cc-related__list li { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem; background: var(--cc-paper); border-radius: 16px; }
.cc-related__list a { font-weight: 800; color: var(--cc-ink); }
.cc-related__list span { color: var(--cc-muted); white-space: nowrap; font-size: .9375rem; }
.cc-postmeta { color: var(--cc-muted); font-weight: 600; }
.cc-postmeta a { color: var(--cc-teal-dk); }

/* ---------- Header ---------- */
.cc-skip { position: absolute; left: 16px; top: -100px; z-index: 1000; padding: .7em 1.2em; border-radius: 999px; background: var(--cc-teal-dk); color: #fff; font-weight: 800; }
.cc-skip:focus { top: 12px; }
.cc-announce { margin: 0; padding: .55rem var(--cc-gutter); background: var(--cc-teal-dk); color: #fff; text-align: center; font-weight: 700; font-size: .9375rem; }
.cc-announce a { color: #fff; }
/* Solid background on purpose: backdrop-filter would become the containing block for the fixed mobile menu panel. */
.cc-header { position: sticky; top: 0; z-index: 50; background: var(--cc-cream); border-bottom: 1px solid var(--cc-line); }
.admin-bar .cc-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .cc-header { top: 0; } }
.cc-header__inner { display: flex; align-items: center; gap: 1rem; padding: .5rem var(--cc-gutter); min-height: 72px; }
.cc-logo { display: block; flex: none; line-height: 0; }
.cc-logo img { width: 96px; height: auto; mix-blend-mode: multiply; }
.cc-nav { margin-left: auto; display: none; }
.cc-nav__list, .cc-menu__list { list-style: none; margin: 0; padding: 0; }
.cc-nav__list { display: flex; gap: .25rem; }
.cc-nav__list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .7rem; border-radius: 999px; color: var(--cc-ink); font-weight: 750; text-decoration: none; white-space: nowrap; }
.cc-nav__list a:hover { background: var(--cc-mint); }
.cc-nav__list .current-menu-item > a, .cc-nav__list .current_page_parent > a, .cc-nav__list [aria-current] { text-decoration: underline wavy var(--cc-teal); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.cc-tools { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.cc-iconbtn { position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; color: var(--cc-ink); background: transparent; border: 0; cursor: pointer; list-style: none; }
.cc-iconbtn::-webkit-details-marker { display: none; }
.cc-iconbtn:hover { background: var(--cc-mint); }
.cc-iconbtn .cc-icon { width: 22px; height: 22px; }
.cc-cartlink__n { position: absolute; top: 4px; right: 2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--cc-coral-dk); color: #fff; font-size: .75rem; font-weight: 900; line-height: 20px; text-align: center; }
.cc-search, .cc-menu { position: relative; }
.cc-search { display: none; } /* phones and tablets search from inside the menu panel */
.cc-search > summary, .cc-menu > summary { list-style: none; }
.cc-search > summary::-webkit-details-marker, .cc-menu > summary::-webkit-details-marker { display: none; }
.cc-search__panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(360px, 90vw); padding: .75rem; border-radius: 18px; background: var(--cc-paper); box-shadow: 0 20px 40px -20px rgba(38, 50, 56, .35); }
.cc-searchform { display: flex; gap: .4rem; align-items: center; }
.cc-searchform input[type=search] { flex: 1; }
.cc-menu__close { display: none; }
.cc-menu[open] .cc-menu__open { display: none; }
.cc-menu[open] .cc-menu__close { display: block; }
.cc-menu__panel { position: fixed; left: 0; right: 0; top: var(--cc-header-h, 72px); bottom: 0; overflow: auto; padding: 1rem 16px 6rem; background: var(--cc-cream); border-top: 1px solid var(--cc-line); }
.cc-menu__list { display: grid; margin-top: 1rem; }
html.cc-menu-open { overflow: hidden; }
.cc-menu__list a { display: flex; align-items: center; min-height: 56px; padding: 0 .25rem; border-bottom: 1px dashed var(--cc-line); color: var(--cc-ink); font: 850 1.375rem/1.2 var(--cc-font); text-decoration: none; }
@media (min-width: 1080px) {
	.cc-nav { display: block; }
	.cc-nav + .cc-tools { margin-left: 0; }
	.cc-menu { display: none; }
	.cc-search { display: block; }
	.cc-logo img { width: 104px; }
}

/* ---------- Footer, CTA band, action bar ---------- */
.cc-cta-band { display: grid; gap: 1rem 2rem; align-items: center; justify-items: start; padding: clamp(28px, 5vw, 56px) var(--cc-gutter); background: var(--cc-butter); color: var(--cc-ink); }
@media (min-width: 800px) { .cc-cta-band { grid-template-columns: auto 1fr auto; } }
.cc-cta-band h2 { margin: 0 0 .25rem; font: 900 clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem)/1.15 var(--cc-font); }
.cc-cta-band p { margin: 0; }
.cc-cta-band__art img { width: 120px; height: auto; transform: rotate(-12deg); mix-blend-mode: multiply; }
.cc-footer { background: var(--cc-teal-dk); color: #fff; padding: clamp(40px, 6vw, 72px) var(--cc-gutter) 1.5rem; }
.cc-footer a { color: #fff; }
.cc-footer a:focus-visible { outline-color: var(--cc-butter); }
.cc-footer__inner { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.cc-footer__brand { grid-column: 1 / -1; max-width: 34ch; }
@media (min-width: 900px) { .cc-footer__inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .cc-footer__brand { grid-column: auto; } }
.cc-footer__brand img { width: 120px; height: auto; background: var(--cc-cream); border-radius: 18px; padding: 8px 10px; }
.cc-footer__brand p { margin: .75rem 0 0; font-weight: 800; }
.cc-footer__small { font-weight: 400 !important; opacity: .92; }
.cc-footer h2 { margin: 0 0 .75rem; color: var(--cc-butter); font: 900 1rem/1.2 var(--cc-font); letter-spacing: .08em; text-transform: uppercase; }
.cc-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.cc-footer__list a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; }
.cc-footer__list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cc-footer__legal { margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .25); font-size: .875rem; }
.cc-actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: .5rem; align-items: center; padding: .6rem 16px calc(.6rem + env(safe-area-inset-bottom)); background: var(--cc-paper); box-shadow: 0 -10px 30px -18px rgba(38, 50, 56, .45); }
.cc-actionbar .cc-btn { flex: 1; }
@media (min-width: 900px) { .cc-actionbar { display: none; } }
@media (max-width: 899.98px) { body:has(.cc-actionbar) { padding-bottom: 76px; } }

/* ---------- Consent ---------- */
.cc-consent { position: fixed; left: 16px; right: 16px; bottom: 88px; z-index: 70; max-width: 520px; margin-inline: auto; padding: 1rem 1.2rem; border-radius: 20px; background: var(--cc-paper); box-shadow: 0 20px 50px -20px rgba(38, 50, 56, .5); }
.cc-consent p { margin: 0 0 .75rem; }
.cc-consent__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
@media (min-width: 900px) { .cc-consent { bottom: 24px; } }

/* Focus everywhere */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--cc-teal-dk); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}