/* Extras for the static build: ingredients section, toast, menu state. */
#mobile-menu[hidden], #lightbox[hidden], #toast[hidden] { display: none; }

.ing-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ing-list li { position: relative; padding-left: 1.6rem; font-size: 1rem; line-height: 1.5; color: color-mix(in oklab, var(--color-cream) 85%, transparent); }
.ing-list li::before { content: ""; position: absolute; left: 0; top: .55rem; width: .55rem; height: .55rem; border-radius: 999px; background: var(--color-pistachio); }

.ing-badge span { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--color-milk); color: var(--color-milk); font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }

.ing-icon { width: 2.5rem; height: 2.5rem; fill: none; stroke: var(--color-milk); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.ing-perfect { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.ing-perfect li { padding: .35rem .8rem; border-radius: 999px; background: color-mix(in oklab, var(--color-cream) 10%, transparent); font-size: .8rem; color: var(--color-cream); }

.toast { position: fixed; left: 50%; bottom: 5.5rem; z-index: 70; transform: translateX(-50%); max-width: calc(100% - 2rem); padding: .8rem 1.1rem; border-radius: .75rem; background: var(--color-cream); color: var(--color-cocoa); font-size: .875rem; box-shadow: var(--shadow-soft); }
.toast.error { background: #fde8e8; color: #7a1f1f; }

.back-to-top { position: fixed; right: 1rem; bottom: 5.25rem; z-index: 40; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border: 0; border-radius: 999px; background: var(--color-cream); color: var(--color-cocoa); box-shadow: var(--shadow-soft); cursor: pointer; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s, background-color .15s; }
.back-to-top.show { opacity: 1; transform: translateY(0); }
.back-to-top:hover { background: var(--color-cream-deep); }
.back-to-top svg { width: 1.25rem; height: 1.25rem; }
.back-to-top[hidden] { display: none; }
@media (min-width: 640px) { .back-to-top { right: 1.5rem; bottom: 5.75rem; } }

header.menu-open { bottom: 0; overflow-y: auto; background: var(--color-cream); }
header.scrolled { background: color-mix(in oklab, var(--color-cream) 95%, transparent); box-shadow: 0 1px 0 rgb(26 18 14 / .08); backdrop-filter: blur(12px); }
header.scrolled .brand-name, header.menu-open .brand-name, header.scrolled .nav-link, header.menu-open .nav-link, header.scrolled #menu-btn, header.menu-open #menu-btn { color: var(--color-cocoa); }
header.scrolled .brand-sub, header.menu-open .brand-sub { color: var(--color-ink-soft); }
header.scrolled .nav-link:hover, header.menu-open .nav-link:hover { color: var(--color-pistachio-deep); }
header.scrolled .nav-cta, header.menu-open .nav-cta { background: var(--color-cocoa); color: var(--color-cream); }