/* the Zett – layout glue around the designed boards */
:root { --kz-navy: #151C2D; --kz-cream: #FAF7F3; --kz-paper: #FFFDF9; --kz-rose: #F7C2CF; --kz-blush: #FEEEEF; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--kz-cream); color: var(--kz-navy); font-family: Karla, 'Helvetica Neue', sans-serif; font-weight: 300; overflow-x: hidden; }
img { max-width: none; }
.kz-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kz-skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: #fff; color: var(--kz-navy); padding: 10px 16px; font-family: Karla, sans-serif; }
.kz-skip:focus { left: 8px; }

/* Header sticks on every screen */
.kz-header { position: sticky; top: 0; z-index: 100; }
.admin-bar .kz-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .kz-header { top: 0; } }

/* ---------- Mobile (below 1024 px): the 390 px design, scaled to the screen ---------- */
.kzm-wrap { width: 100%; overflow-x: clip; }
.kzm { width: 390px; zoom: var(--kzz, 1); margin: 0 auto; position: relative; }
.kzm > div:first-child { position: relative !important; top: auto !important; }
.kz-is-m .kzm-wrap.kz-page { background: var(--kz-cream); }
.kz-is-d .kz-backtop-wrap { zoom: 1 !important; }
.kz-is-d .kz-backtop-wrap > button { width: 56px !important; height: 56px !important; right: 28px !important; bottom: 28px !important; transition: opacity .3s ease, transform .3s ease !important; }
.kz-is-d .kz-backtop-wrap > button:hover { transform: translateY(-3px); }
.kz-is-d .kz-backtop-wrap > button svg { width: 22px; height: 22px; }
.kz-backtop-wrap > button { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.kz-backtop-wrap.kz-show > button { opacity: 1; pointer-events: auto; }
.kz-backtop-wrap { zoom: var(--kzz, 1); }

/* ---------- Desktop (1024 px and up) ---------- */
.kzd-wrap { width: 100%; overflow-x: clip; }
.kzd { width: 100%; display: flex; flex-direction: column; position: relative; color: var(--kz-navy); font-family: Karla, 'Helvetica Neue', sans-serif; background: #fff; }
.kzd-wrap.kz-nav .kzd, .kzd-wrap.kz-foot .kzd { background: transparent; }
.kzd > * { flex: 0 0 auto; align-self: stretch; box-sizing: border-box; }

/* The full-bleed "More moments" carousel is 1232 px wide in the design; shrink it on small laptops. */
@media (max-width: 1300px) {
	.kzd [style*="width: 1896px"] { zoom: calc(.65 * (100vw - 60px) / 1232px) !important; }
}
/* Desktop nav on small laptops: tighter sides */
@media (max-width: 1280px) {
	.kzd-wrap.kz-nav .kzd > div { padding-left: 32px !important; padding-right: 32px !important; }
	.kzd-wrap.kz-nav .kzd > div > div:nth-child(2) { gap: 26px !important; }
}

/* Recipe grid filtering */
.kz-grid > a.kz-hide, #kzgrid > a.kz-hide, a.kzegg.kz-hide { display: none !important; }

/* Mobile menu / search panels opened by script */
.kz-open { display: block !important; }
.kz-open-flex { display: flex !important; }

/* Plain pages (recipes, legal pages, old pages) inside the new frame */
.kz-plain-page { max-width: 860px; margin: 0 auto; padding: 48px 20px 72px; background: transparent; font-size: 17px; line-height: 1.7; }
.kz-plain-page h1, .kz-plain-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(30px, 5vw, 48px); line-height: 1.1; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 24px; }
.kz-plain-page h2, .kz-plain-page h3 { font-family: 'Cormorant Garamond', serif; font-weight: 400; }
.kz-plain-page img { max-width: 100%; height: auto; }
.kz-plain-page a { color: var(--kz-navy); }
.kz-plain-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px; }
.kz-plain-item { display: flex; flex-direction: column; gap: 10px; text-decoration: none; font-family: 'Cormorant Garamond', serif; font-size: 22px; }
.kz-plain-item img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 999px 999px 0 0; }

/* Language switch waits for the German version */
.kzflg { display: none !important; }
.kz-nsearch input { font: inherit; color: var(--kz-navy); }
.kz-nsearch input::-webkit-search-cancel-button { -webkit-appearance: none; }
.kz-nsearch input:not(:placeholder-shown) { font-family: Karla, sans-serif; font-weight: 500; font-style: italic; }
@media (max-width: 1439px) { .kzd-wrap.kz-nav .kzd > div { zoom: .92; } }
@media (max-width: 1199px) { .kzd-wrap.kz-nav .kzd > div { zoom: .84; } }
@media (max-width: 1099px) { .kzd-wrap.kz-nav .kzd > div { zoom: .78; } }
[id] { scroll-margin-top: 80px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.kz-recipe-head { text-align: center; margin-bottom: 32px; }
.kz-recipe-by { font-family: Karla, sans-serif; font-weight: 500; font-style: italic; font-size: 15px; margin: 0 0 18px; }
.kz-recipe-img { width: 100%; height: auto; margin-top: 24px; }
.kz-btn { display: inline-block; background: var(--kz-rose); color: var(--kz-navy) !important; text-decoration: none; font-family: Karla, sans-serif; font-weight: 300; font-size: 14px; letter-spacing: 2.8px; padding: 14px 26px; min-height: 44px; box-sizing: border-box; }
.kzd-wrap.kz-nav .kzd > div > div:nth-child(2) { margin-left: 32px; }
.kz-hearts .kzlh { animation: kzheart 1.8s ease-out infinite; }
.kz-hearts .kzlh2 { animation-delay: .45s; } .kz-hearts .kzlh3 { animation-delay: .9s; } .kz-hearts .kzlh4 { animation-delay: 1.35s; }
@media (prefers-reduced-motion: reduce) { .kz-hearts .kzlh { animation: none; } }
/* Footer links: readable size (about 14–15 px on screen) */
.kzd-wrap.kz-foot .kzfl, .kzd-wrap.kz-foot .kzlegal, .kzd-wrap.kz-foot .kzcopy { font-size: 21px !important; }
.kzm-wrap.kz-foot .kzfl, .kzm-wrap.kz-foot .kzlegal, .kzm-wrap.kz-foot .kzcopy { font-size: 16.5px !important; }
.kz-foot .kzcopy { letter-spacing: inherit; line-height: inherit; }

/* Make It Pretty: the tile stays put, only the product inside the circle comes forward */
a.kzlift.kzshp.kzshp:hover, a.kzlift.kzshp.kzshp:focus-visible { transform: none !important; box-shadow: none !important; }
a.kzshp.kzshp:hover .kzsi { transform: none; }
a.kzshp.kzshp > div:first-child:hover .kzsi { transform: scale(1.08); }

/* Affiliate module: no photo yet -> empty circle; long disclosure wraps */
img.kzsi[src=""] { visibility: hidden; }
.kz-disc { white-space: normal !important; }
.kzd .kzaff:has(.kz-disc), .kzd .kzaff.kz-disc { white-space: normal !important; width: 25em; }

/* Recipe page affiliate bar (German site only) */
.kz-aff { margin: 56px auto 24px; text-align: center; }
.kz-aff-kicker { font: 300 13px/1 Karla, sans-serif; letter-spacing: 3px; margin: 0 0 8px; }
.kz-aff-h { font: 300 32px/1.1 "Cormorant Garamond", serif; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 10px; }
.kz-aff-disc { font: italic 500 14px/1.5 Karla, sans-serif; background: #FEEEEF; display: inline-block; padding: 2px 10px; margin: 0 0 28px; }
.kz-aff-row { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; margin-bottom: 24px; }
.kz-aff-item { width: 200px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: #151C2D; text-decoration: none; }
.kz-aff-pic { width: 180px; height: 180px; border-radius: 50%; background: #FAF7F3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.kz-aff-pic img { max-width: 84%; max-height: 84%; object-fit: contain; transition: transform .7s ease; }
.kz-aff-pic:hover img { transform: scale(1.08); }
.kz-aff-name { font: 300 21px/1.15 "Cormorant Garamond", serif; }
.kz-aff-kick { font: italic 500 14px/1.4 Karla, sans-serif; color: #555B6E; }
.kz-shop { max-width: 1180px; margin: 0 auto; padding: 48px 16px 64px; text-align: center; }
.kz-shop-head { margin-bottom: 40px; }
.kz-shop-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.kz-shop-sec { margin: 56px 0; }
.kz-shop-intro { font: 300 17px/1.6 Karla, sans-serif; max-width: 36em; margin: 0 auto 28px; }
@media (max-width: 600px) { .kz-aff-row { gap: 20px 12px; } .kz-aff-item { width: calc(50% - 6px); } .kz-aff-pic { width: 140px; height: 140px; } }
.kz-shop .kz-aff-pic { background: #FFFFFF; }
.kz-aff-h { font-size: clamp(24px, 6.5vw, 32px); }
.kz-aff-stk img { max-width: 62%; max-height: 62%; }

/* moment tiles: sticker (theme asset) instead of product photo */
a.kzshp img.kzsi[src*="/assets/img/"]:not([src*="f4e529f76fa8"]) { max-width: 62%; max-height: 62%; }

/* Sprinkle diaries: pancake note like the other margin notes (two marker lines, no lined paper) */
.kzbook .kzc-ic { zoom: 1.111 !important; width: auto !important; height: auto !important; background: none !important; box-shadow: none !important; padding: 0 !important; }
.kzbook .kzc-ic svg { display: none !important; }
.kzbook .kzc-ic span { font-size: 15.62px !important; height: auto !important; line-height: 1.55 !important; width: max-content; padding: 0 9px; margin-bottom: 4px; background-image: linear-gradient(transparent 12%, rgba(247,194,207,.92) 12%, rgba(247,194,207,.92) 96%, transparent 96%); }

/* whole tiles / polaroids that link somewhere */
[role="link"][data-href] { cursor: pointer; }

/* Moment tiles: lift forward smoothly like the buttons (no overshoot) */
.kzd .kzmmt { transition: transform .6s cubic-bezier(.22,.8,.28,1), box-shadow .6s cubic-bezier(.22,.8,.28,1) !important; will-change: transform; }
.kzd .kzmmt:hover, .kzd .kzmmt:focus-visible { transform: translateY(-6px) scale(1.025); }
.kzd .kzarch > div:first-child { transition: transform .6s cubic-bezier(.22,.8,.28,1) !important; }

/* Spotify player under PRESS PLAY */
/* PRESS PLAY: a small player card floating at the bottom of the screen, the page itself does not move */
.kz-spotify { position: fixed; right: 24px; bottom: 100px; z-index: 9000; width: 380px; max-width: calc(100vw - 32px); background: #FFFDF9; padding: 14px 14px 12px; box-shadow: 0 18px 40px rgba(21,28,45,.22); transform: rotate(-1deg); animation: kzspin .45s cubic-bezier(.22,.8,.28,1) both; }
.kz-spotify::before { content: ""; position: absolute; left: 50%; top: -12px; width: 110px; height: 24px; margin-left: -55px; background: rgba(255,255,255,.75); transform: rotate(2deg); box-shadow: 0 1px 3px rgba(21,28,45,.1); }
.kz-spotify-h { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 10px; font-family: Karla, sans-serif; font-weight: 500; font-style: italic; font-size: 15px; color: #151C2D; }
.kz-spotify-h span { background-image: linear-gradient(transparent 52%, rgba(247,194,207,.85) 52%, rgba(247,194,207,.85) 92%, transparent 92%); padding: 0 4px; }
.kz-spotify-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #F7C2CF; color: #151C2D; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .3s ease; }
.kz-spotify-x:hover { transform: scale(1.08); }
.kz-spotify iframe { display: block; border: 0; border-radius: 12px; width: 100%; height: 152px; }
@keyframes kzspin { from { opacity: 0; transform: translateY(24px) rotate(-1deg); } to { opacity: 1; transform: rotate(-1deg); } }
html.kz-is-m .kz-spotify { left: 16px; right: 16px; bottom: 84px; width: auto; max-width: none; transform: none; animation-name: kzspinm; }
@keyframes kzspinm { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* More moments: round buttons instead of the illustrated arrows */
.kzarr.kz-round { width: 72px !important; height: 72px !important; border-radius: 50% !important; background: #F7C2CF !important; box-shadow: 0 6px 18px rgba(21,28,45,.1); color: #151C2D; transition: transform .3s ease, background .3s ease; }
.kzarr.kz-round:hover { transform: translateY(-50%) scale(1.06) !important; }
.kzarr.kz-round[aria-label^="Previous"], .kzarr.kz-round[aria-label="previous"] { left: -126px !important; }
.kzarr.kz-round:not([aria-label^="Previous"]):not([aria-label="previous"]) { right: -126px !important; }
.kzarr.kz-round img { display: none !important; }
.kzarr.kz-round svg { width: 26px; height: 26px; }

/* contact form */
.kz-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.kz-contact-note { margin: 0; font-family: Karla, sans-serif; font-weight: 500; font-style: italic; font-size: 20px; line-height: 1.5; color: #151C2D; zoom: 1.111; }
.kz-contact-note span { background-image: linear-gradient(transparent 52%, rgba(247,194,207,.85) 52%, rgba(247,194,207,.85) 92%, transparent 92%); padding: 0 4px; }
.kz-contact .kzin { font-family: Karla, sans-serif; }
#kzform { scroll-margin-top: 90px; }
html.kz-is-m .kzm input.kzin, html.kz-is-m .kzm textarea.kzin { font-size: calc(16px / (.65 * var(--kzz, 1)) / 1.111) !important; }
html.kz-sent .kz-received { display: flex !important; }
html.kz-sent .kz-contact, html.kz-sent .kz-fits { display: none !important; }

/* search results */
[data-kzif][hidden] { display: none !important; }
.kz-sgroup.kz-off { display: none !important; }
.kz-sempty { text-align: center; max-width: 820px; margin: 0 auto; }
.kz-sempty-h { margin: 0 0 14px; font-family: "Cormorant Garamond", serif; font-weight: 300; font-size: 44px; line-height: 1.1; letter-spacing: 2px; text-transform: uppercase; color: #151C2D; }
.kz-sempty-t { margin: 0; font-family: Karla, sans-serif; font-weight: 300; font-size: 21px; line-height: 1.7; color: #151C2D; zoom: 1.111; }
.kz-sempty-t a { color: inherit; text-decoration-color: #F7C2CF; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.kz-sgroup { scroll-margin-top: 150px; }

/* answer cards (Asked & answered): own keyframes. boards.css has two "kzpop" (the recipe congratulations card
   is centred with translate(-50%)), and the later one made the answer start half over the questions. */
.kzans { animation-name: kzansIn; }
@keyframes kzansIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* the mobile "On repeat" pin board shares the class name with the Pinterest buttons (which stay hidden until hover) */
div.kzpin { opacity: 1 !important; }

/* Recipe Index: sparkles on the six fields / category buttons run as a canon, one button after the other (Kimberly 29.10.) */
@keyframes kzcanon { 0% { opacity: 0; transform: scale(.3) rotate(0deg); } 6% { opacity: 1; transform: scale(1) rotate(15deg); } 17% { opacity: 1; transform: scale(1) rotate(25deg); } 25%, 100% { opacity: 0; transform: scale(.3) rotate(40deg); } }
.kzfield .kzsp, .kztab .kzsp { animation: kzcanon 4.8s ease-in-out 1.5s infinite both !important; }
.kzqf0 .kzsp1, .kzqt0 .kzsp1 { animation-delay: 1.50s !important; }
.kzqf0 .kzsp2, .kzqt0 .kzsp2 { animation-delay: 1.58s !important; }
.kzqf0 .kzsp3, .kzqt0 .kzsp3 { animation-delay: 1.66s !important; }
.kzqf0 .kzsp4, .kzqt0 .kzsp4 { animation-delay: 1.74s !important; }
.kzqf1 .kzsp1, .kzqt1 .kzsp1 { animation-delay: 2.30s !important; }
.kzqf1 .kzsp2, .kzqt1 .kzsp2 { animation-delay: 2.38s !important; }
.kzqf1 .kzsp3, .kzqt1 .kzsp3 { animation-delay: 2.46s !important; }
.kzqf1 .kzsp4, .kzqt1 .kzsp4 { animation-delay: 2.54s !important; }
.kzqf2 .kzsp1, .kzqt2 .kzsp1 { animation-delay: 3.10s !important; }
.kzqf2 .kzsp2, .kzqt2 .kzsp2 { animation-delay: 3.18s !important; }
.kzqf2 .kzsp3, .kzqt2 .kzsp3 { animation-delay: 3.26s !important; }
.kzqf2 .kzsp4, .kzqt2 .kzsp4 { animation-delay: 3.34s !important; }
.kzqf3 .kzsp1, .kzqt3 .kzsp1 { animation-delay: 3.90s !important; }
.kzqf3 .kzsp2, .kzqt3 .kzsp2 { animation-delay: 3.98s !important; }
.kzqf3 .kzsp3, .kzqt3 .kzsp3 { animation-delay: 4.06s !important; }
.kzqf3 .kzsp4, .kzqt3 .kzsp4 { animation-delay: 4.14s !important; }
.kzqf4 .kzsp1, .kzqt4 .kzsp1 { animation-delay: 4.70s !important; }
.kzqf4 .kzsp2, .kzqt4 .kzsp2 { animation-delay: 4.78s !important; }
.kzqf4 .kzsp3, .kzqt4 .kzsp3 { animation-delay: 4.86s !important; }
.kzqf4 .kzsp4, .kzqt4 .kzsp4 { animation-delay: 4.94s !important; }
.kzqf5 .kzsp1, .kzqt5 .kzsp1 { animation-delay: 5.50s !important; }
.kzqf5 .kzsp2, .kzqt5 .kzsp2 { animation-delay: 5.58s !important; }
.kzqf5 .kzsp3, .kzqt5 .kzsp3 { animation-delay: 5.66s !important; }
.kzqf5 .kzsp4, .kzqt5 .kzsp4 { animation-delay: 5.74s !important; }