/* the Zett – recipe page v2 (Kimberly 30.10.), from the approved preview. */

/* every toggle like units / scale: picked = tea rose, not picked = cream with a soft shadow, hover lifts */
.kzpv-tgl[aria-pressed="true"]{background:var(--kzacc,#F7C2CF);color:var(--kzaccT,#151C2D)!important}
button.kzpv-glit,.kzpv-glit > #kzpv-eat,.kzpv-hint a.kzbtn{color:var(--kzaccT,#151C2D)!important}
.kzpv-glit > #kzpv-eat path,.kzpv-hint a.kzbtn path{stroke:var(--kzaccT,#151C2D)!important}
/* time buttons: the one you set is tea rose, the other follows in paper warm */
:is(.kzd,.kzm) .kzpv-tb{background:#FFFDF9!important;box-shadow:rgba(21,28,45,.14) 0 6px 14px}
:is(.kzd,.kzm) .kzpv-tb.kzpv-tact{background:var(--kzacc,#F7C2CF)!important;box-shadow:none;color:var(--kzaccT,#151C2D)!important}
:is(.kzd,.kzm) .kzpv-tb.kzpv-tact path{stroke:var(--kzaccT,#151C2D)!important}
/* step numbers: paper-warm circles (they are the button); ticking only veils the step, the colour stays */
:is(.kzd,.kzm) .kzstep .kzsn,:is(.kzd,.kzm) .kzstep[aria-pressed="true"] .kzsn{background:#FFFDF9!important;color:#151C2D!important}
/* paper warm on white gets the stronger shadow (notes, unpicked buttons, numbers, moments, show-me polaroids) */
:is(.kzd,.kzm) .kzpv-hint,:is(.kzd,.kzm) .kzpv-kitchen,:is(.kzd,.kzm) .kzpv-knote{box-shadow:rgba(21,28,45,.2) 0 12px 26px!important}
:is(.kzd,.kzm) .kzpv-tgl[aria-pressed="false"],:is(.kzd,.kzm) .kzpv-ver[aria-pressed="false"],:is(.kzd,.kzm) .kzr-tg[style*="250, 247, 243"],:is(.kzd,.kzm) .kzpv-tb:not(.kzpv-tact){box-shadow:rgba(21,28,45,.22) 0 8px 18px!important}
:is(.kzd,.kzm) .kzstep .kzsn{box-shadow:rgba(21,28,45,.22) 0 6px 14px!important}
:is(.kzd,.kzm) .kzpv-moments [style*="0.16) 0px 10px 22px"]{box-shadow:rgba(21,28,45,.24) 0 12px 26px!important}
.kzpv-showcard .kzp{box-shadow:rgba(21,28,45,.28) 0 16px 34px!important}
/* full-width heading box (standard, to compare) */
html.kzpv-wfull .kzpv-wtitle{align-self:stretch;box-sizing:border-box}
/* time lists lie over everything below them */
.kzpv-glit:has(> button[aria-expanded="true"]){z-index:60!important}
/* "make it a whole thing" inside the recipe card */
html.kzpv-incard .kzpv-incard{display:block!important}

/* polaroids in the paper card straighten up on hover */
.kzpv-incard .kzpv-pol > span:first-child{transition:transform .5s cubic-bezier(.22,.8,.28,1),box-shadow .5s ease}
.kzpv-incard a:hover .kzpv-pol > span:first-child{transform:rotate(0deg) translateY(-4px)!important;box-shadow:rgba(21,28,45,.2) 0 16px 30px!important}
html.kzpv-wcw .kzpv-wcols{gap:32px!important}
html.kzpv-wcw .kzpv-wcol{background:#ffffff;padding:40px 36px 44px;box-shadow:rgba(21,28,45,.12) 0 10px 22px}
html.kzpv-incard :is(.kzd,.kzm) #kz-leftover:not(.kzpv-incard),html.kzpv-incard :is(.kzd,.kzm) #kz-leftover-sec{display:none!important}
.kzrb-christmas{--kzpv-secT:#F8EEDD;--kzaccI:#151C2D}
.kzpv-tgl[aria-pressed="false"],.kzr-tg[style*="250, 247, 243"]{background:#FAF7F3;box-shadow:rgba(21,28,45,.14) 0 6px 14px}
.kzpv-ver[aria-pressed="false"]{background:#FAF7F3!important;box-shadow:rgba(21,28,45,.14) 0 6px 14px}
.kzpv-tgl:hover,.kzr-tg:hover,.kzpv-ver:hover,.kzpv-in:hover,.kzpv-tgl:focus-visible,.kzpv-in:focus-visible{box-shadow:rgba(21,28,45,.18) 0 10px 18px!important}
.kzpv-in::-webkit-calendar-picker-indicator{cursor:pointer}
.kzpv-moments{display:block!important}
#kzmp{display:none!important}
/* more pieces: soup pattern drawn sprite by sprite (see kzpvPattern), dots right under the cards */
#kzmore{background:#FAF7F3!important}
#kzmore > div{position:relative;z-index:1}
#kzmore .kzr-mdots{margin-top:16px!important}
#kzmore div:has(> .kzr-mtrack){padding-bottom:0!important}
/* show me: white card, stronger polaroid shadow */
.kzpv-show{background:#ffffff!important}
.kzpv-showcard{background:#ffffff!important;box-shadow:rgba(21,28,45,.14) 0 24px 50px!important}
.kzpv-showcard .kzp{background:#ffffff!important}
/* make it a whole thing: polaroids or plain squares */
.kzpv-whole-sq .kzpv-pol{display:none!important}
.kzpv-whole-sq .kzpv-sq{display:flex!important}
/* why? next to the time: tea rose, glittering now and then like the recipe index fields */
.kzpv-whychip .kzpv-popbtn,.kzpv-whyhero .kzpv-popbtn{transition:transform .3s ease,box-shadow .3s ease}
.kzpv-whychip .kzpv-popbtn:hover,.kzpv-whyhero .kzpv-popbtn:hover{transform:translateY(-2px);box-shadow:rgba(21,28,45,.18) 0 8px 16px!important}
.kzpv-glit .kzsp{animation:kzloop 4.3s ease-in-out 1.5s infinite both}
.kzpv-glit .kzsp3{animation-delay:1.7s}
.kzpv-glit .kzsp4{animation-delay:1.8s}
.kzpv-times .kzpv-opt:hover,.kzpv-times .kzpv-opt[aria-selected="true"]{background:var(--kzsoft,#FEEEEF)!important}
.kzd div:has(> span > .kzpv-glit){overflow:visible}
/* bold: in the steps amount + ingredient, in the list as chosen */
.kzr-stepx .kzpv-ing{font-weight:500}
.kzpv-b-all .kzck .kzpv-ing{font-weight:500}
/* steps: only the number is the button */
:is(.kzd,.kzm) .kzstep{cursor:default!important}
.kzrb :is(.kzd,.kzm) .kzr-srow > .kzr-scol:only-child{padding-right:0!important}
/* step titles in caps like GOOD TO KNOW (preview option) */
.kzpv-tcaps .kzpv-stitle{font-weight:300!important;font-size:17.5px!important;letter-spacing:3.5px!important;text-transform:uppercase!important;line-height:1.9!important}
.kzpv-tcaps .kzpv-stitle > span{text-transform:none!important;letter-spacing:0!important}
:is(.kzd,.kzm) .kzstep .kzsn{cursor:pointer;transition:transform .3s ease,box-shadow .3s ease}
:is(.kzd,.kzm) .kzstep .kzsn:hover{transform:scale(1.08);box-shadow:rgba(21,28,45,.16) 0 6px 12px}
/* make it a whole thing: marker on the card titles (option) */
.kzpv-pmark .kzpv-ptitle{background-image:linear-gradient(transparent 52%, rgba(var(--kzaccR),.55) 52%, rgba(var(--kzaccR),.55) 92%, transparent 92%)}
/* polaroids straighten up on hover */
.kzpv-pol > span:last-child{transition:transform .5s cubic-bezier(.22,.8,.28,1),box-shadow .5s ease}
a:hover > .kzpv-pol > span:last-child{transform:rotate(0deg) translateY(-4px)!important;box-shadow:rgba(21,28,45,.2) 0 16px 30px!important}
/* start time: white with sparkles */
/* kimberly's note without bullets */
.kzrb .kzr-srow ul{list-style:none!important;padding-left:0!important;margin:0!important}
.kzrb .kzr-srow li{margin:0 0 .7em!important}
.kzrb .kzr-srow li:last-child{margin-bottom:0!important}
/* washi tapes on the pop-ups: lavender blush */
.kzr-shl-pop > span[aria-hidden="true"]:first-child{background:var(--kzsoft,#FEEEEF)!important;box-shadow:rgba(21,28,45,.08) 0 1px 3px!important}
/* shopping list: the recipe name as a small heading */
.kzr-shl-pop > div:first-of-type > span:first-child{font-family:Karla,sans-serif!important;font-weight:300!important;font-size:17.5px!important;letter-spacing:3.5px!important;line-height:1.5!important;zoom:1.111}
/* colour system (preview option) */
:root{--kzpv-decor:var(--kzsoft,#FEEEEF)}
html.kzpv-dmark{--kzpv-decor:rgba(var(--kzaccR,247,194,207),.55)}
html.kzpv-dmark .kzrb{--kzpv-decor:rgba(var(--kzaccR,247,194,207),.55)}
.kzrb{--kzpv-decor:var(--kzsoft,#FEEEEF)}
html.kzpv-dmark .kzrb{--kzpv-decor:rgba(var(--kzaccR),.55)}
[data-kzpv-bg="decor"]{background-color:var(--kzpv-decor)!important}
[data-kzpv-bg="soft"],[data-kzpv-bg="softbg"]{background-color:var(--kzsoft,#FEEEEF)!important}
[data-kzpv-bg="acc"]{background-color:var(--kzacc,#F7C2CF)!important;color:var(--kzaccT,#151C2D)!important}
/* unpicked buttons keep dark text on every season */
button[aria-pressed="false"],button[aria-pressed="false"] *{color:#151C2D!important}
[data-kzpv-bg="decor"]{color:#151C2D!important;--kzaccT:#151C2D;--kzaccI:#151C2D;--kzph:#151C2D}

html.kzpv-dcream{--kzpv-decor:#FAF7F3}
html.kzpv-paper .kzpv-tgl[aria-pressed="false"],html.kzpv-paper .kzr-tg[style*="250, 247, 243"],html.kzpv-paper .kzpv-ver[aria-pressed="false"]{background:#FFFDF9!important}
[data-kzpv-bg="surf"]{background-color:var(--kzpv-surf,#FAF7F3)!important}
[data-kzpv-mk]{background-image:linear-gradient(transparent 52%, #FCE2E6 52%, #FCE2E6 92%, transparent 92%)!important}
html.kzpv-paper{--kzpv-surf:#FFFDF9}
.kzpv-notr *{transition:none!important}

/* ---------- phone ---------- */
:is(.kzd,.kzm) [hidden]{display:none!important}
.kzm .kzpv-sec{font-weight:500!important}
.kzm :has(> .kzpv-sec){border-top:1px solid rgba(21,28,45,.16);padding-top:30px!important}
/* a ticked step: the number gets a veil, like the text */
:is(.kzd,.kzm) .kzstep[aria-pressed="true"] .kzsn{opacity:.4!important}
/* print: "print your version" opens right under the print button, printing happens from the page itself */
.kzpv-printpop{position:absolute;left:0;top:calc(100% + 26px);z-index:60;width:560px;box-sizing:border-box;background:#FFFDF9;padding:46px 34px 30px;box-shadow:rgba(21,28,45,.2) 0 14px 28px;transform:rotate(-1deg);white-space:normal;text-align:left}
.kzpv-printpop .pt{display:block;font-family:Karla,sans-serif;font-weight:500;font-style:italic;font-size:20px;zoom:1.111;margin-bottom:18px}
.kzpv-printpop .pr{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.kzpv-printpop .pl{flex:0 0 150px;font-family:Karla,sans-serif;font-weight:300;font-size:15px;letter-spacing:3px;text-transform:uppercase;zoom:1.111}
.kzpv-printpop .t{position:relative;border:0;color:#151C2D;font-family:Karla,sans-serif;font-weight:500;font-style:italic;font-size:17px;padding:7px 13px;cursor:pointer;zoom:1.111;background:#FFFDF9;box-shadow:rgba(21,28,45,.22) 0 8px 18px}
.kzpv-printpop .t[aria-pressed="true"]{background:var(--kzacc,#F7C2CF);box-shadow:none}
.kzpv-printpop .pa{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px}
.kzpv-printpop .pa a{font-family:Karla,sans-serif;font-weight:400;font-size:16px;color:#151C2D;zoom:1.111;text-underline-offset:3px}
.kzm .kzpv-ingcols{flex-direction:column!important;gap:34px!important}
.kzm .kzpv-swappanel,.kzm .kzr-shl-pop{left:0!important;right:0!important;width:auto!important;max-width:none!important}
.kzm .kzpv-whypanel{right:auto!important;padding:44px 24px 26px!important}
.kzm .kzpv-wbars > span:nth-child(odd),.kzm .kzpv-wlabels > span:nth-child(odd),.kzm .kzpv-wkeys > span:nth-child(odd){flex:1.5 1 0!important}
.kzm .kzpv-wbars > span:nth-child(2),.kzm .kzpv-wlabels > span:nth-child(2),.kzm .kzpv-wkeys > span:nth-child(2){flex:2.2 1 0!important}
.kzm .kzpv-wlabels span span{white-space:normal!important}
:is(.kzpv-whychip,.kzpv-whyhero):has(> button[aria-expanded="true"]){z-index:60!important}
#kzmore:has(.kzhs){padding:40px 0 48px!important}
.kzm h1{font-size:52px!important;letter-spacing:3.5px!important;line-height:1.04!important}
.kzm .kzpv-hint{max-width:none!important;box-sizing:border-box!important;padding:16px 16px 18px!important}
.kzm .kzpv-hint p{font-size:18.7px!important}
.kzm .kzpv-wcols{flex-direction:column!important;gap:44px!important;margin-top:30px!important}
.kzm .kzpv-wbig{padding:44px 30px 48px!important}
/* phone: leftovers & pairings fills the white card edge to edge (the recipe background stays visible beside it) and closes it */
/* gap above = gap below to the video */
.kzm .kzpv-incard{margin:9px -30px 64px!important}
.kzm .kzpv-wbig h2{font-size:34px!important;letter-spacing:2.5px!important}
.kzm .kzpv-hint{flex:none!important}
.kzm .kzpv-glance{margin:16px 0 12px!important}
.kzm .kzstep .kzpv-stitle{margin-bottom:0!important}
.kzm .kzpv-stitle{display:flex!important;flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:8px}
.kzm .kzpv-stitle > span{margin-left:0!important}
.kzm .kzpv-skip{padding:3px 0!important;font-size:14.5px!important}
.kzm .kzstep .kzpv-stitle{column-gap:8px}

/* ---------- theme additions (0.1.64) ---------- */
/* the moment pop-up is replaced by the "Cook by moment" section */
#kzmp{display:none!important}
/* glitter rests when the reader asks for less motion */
@media (prefers-reduced-motion: reduce){.kzpv-glit .kzsp,.kzsp{animation:none!important}.kzpv-pol > span,.kzpv-incard .kzpv-pol > span:first-child{transition:none!important}}
/* step numbers are the buttons: visible focus */
.kzsn:focus-visible,.kzpv-opt:focus-visible,.kzpv-tb:focus-visible{outline:2px solid #151C2D;outline-offset:3px}
/* step titles are h3 now */
h3.kzpv-stitle{margin:0 0 4px}
/* print: only the A4 sheet */
#kzpv-sheet{display:none}
/* the A4 sheet: hidden on screen (measured off-screen before printing), the only thing on paper */
#kzpv-sheet{display:none;color:#151C2D;font-family:Karla,Arial,sans-serif;font-weight:300;--ink:#151C2D;--soft:#555B6E;--line:#E7E1D8;--acc:#F7C2CF}
#kzpv-sheet .page{width:210mm;min-height:297mm;margin:0 auto 40px;background:#fff;padding:12mm 14mm 12mm;box-shadow:rgba(21,28,45,.14) 0 20px 40px;font-size:8.6pt;line-height:1.35;position:relative}#kzpv-sheet .head{display:flex;gap:8mm;align-items:flex-start}#kzpv-sheet .head .t{flex:1;min-width:0}#kzpv-sheet .kick{font-size:7.2pt;letter-spacing:2.6px;text-transform:uppercase;color:var(--soft);font-weight:400}#kzpv-sheet h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;font-size:22pt;line-height:1.02;letter-spacing:2.5px;text-transform:uppercase;margin:1.2mm 0 3mm}#kzpv-sheet .meta{display:flex;flex-wrap:wrap;gap:2mm 7mm}#kzpv-sheet .meta div{display:flex;flex-direction:column}#kzpv-sheet .meta b{font-weight:500;font-style:italic;font-size:10pt}#kzpv-sheet .ver{margin-top:3mm;font-style:italic;font-weight:500;font-size:9pt}#kzpv-sheet .ver span{background:linear-gradient(transparent 55%,rgba(247,194,207,.55) 55%,rgba(247,194,207,.55) 92%,transparent 92%);padding:0 3px}#kzpv-sheet .ph{flex:0 0 28mm;width:28mm;height:33mm;object-fit:cover;display:block;box-shadow:rgba(21,28,45,.14) 0 6px 14px}#kzpv-sheet h2{font-size:7.4pt;letter-spacing:2.6px;text-transform:uppercase;font-weight:400;margin:3.6mm 0 1.8mm;padding-bottom:1.5mm;border-bottom:.6pt solid var(--line)}#kzpv-sheet .ings{display:grid;grid-template-columns:repeat(3,1fr);column-gap:7mm;align-items:start}#kzpv-sheet .g{margin:0 0 2.2mm}#kzpv-sheet .g .gt{font-weight:500;font-style:italic;font-size:9pt;margin-bottom:1mm}#kzpv-sheet .g ul{list-style:none;margin:0;padding:0}#kzpv-sheet .g li{display:flex;gap:2mm;align-items:baseline;margin:.25mm 0}#kzpv-sheet .g li:before{content:"";flex:0 0 2.6mm;height:2.6mm;border:.6pt solid var(--soft);border-radius:50%;transform:translateY(.4mm)}#kzpv-sheet .g li b{font-weight:500}#kzpv-sheet ol{list-style:none;margin:0;padding:0}#kzpv-sheet .st{display:flex;gap:3mm;break-inside:avoid;margin:0 0 1.4mm}#kzpv-sheet .st .n{flex:0 0 5.6mm;height:5.6mm;border:.6pt solid var(--soft);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8pt;font-weight:400;margin-top:.2mm}#kzpv-sheet .st .b{flex:1;min-width:0;display:flow-root}#kzpv-sheet .st .tt{font-size:7.6pt;letter-spacing:2px;text-transform:uppercase;font-weight:500}#kzpv-sheet .st .tm{text-transform:none;letter-spacing:0;font-weight:400;font-size:8.2pt}#kzpv-sheet .st .chip{font-style:italic;font-weight:500;font-size:8.4pt;letter-spacing:0;text-transform:none;color:var(--soft);margin-left:2mm}#kzpv-sheet .st b{font-weight:500}#kzpv-sheet .st .mw{font-style:italic;font-weight:500;font-size:9pt;margin-top:.6mm}#kzpv-sheet .st .mw span{background:linear-gradient(transparent 55%,rgba(247,194,207,.55) 55%,rgba(247,194,207,.55) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 2px}#kzpv-sheet .mise{display:grid;grid-template-columns:1fr 1fr;gap:.4mm 6mm}#kzpv-sheet .snote{float:right;width:62mm;margin:.4mm 0 1.2mm 5mm;background:#FAF7F3;padding:1.8mm 3mm;font-size:8pt;line-height:1.35}#kzpv-sheet .snote i{display:block;font-weight:500;margin-bottom:.4mm}#kzpv-sheet .foot{margin-top:4mm;padding-top:2mm;border-top:.6pt solid var(--line);display:flex;justify-content:space-between;font-size:7.6pt;color:var(--soft);letter-spacing:.4px}#kzpv-sheet .foot i{font-weight:500}#kzpv-sheet .page{width:auto;min-height:0;margin:0;padding:0;box-shadow:none}#kzpv-sheet h2{break-after:avoid}
#kzpv-sheet.kz2-measure{display:block!important;position:absolute!important;left:-10000px;top:0;width:184mm;visibility:hidden}
@media print{
@page{size:A4;margin:10mm 13mm 9mm}
html,body{background:#fff!important}
body > *:not(#kzpv-sheet){display:none!important}
#kzpv-sheet{display:block!important;position:static!important;visibility:visible!important;width:auto!important}
}


/* 0.1.66: small dots like "The latest" on the home page (Up close, More pieces; phone and desktop) */
#kzphotos button[aria-label^="photo "], #kzmore button[aria-label^="photo "]{width:8px!important;height:8px!important}
#kzphotos div:has(> button[aria-label^="photo "]), #kzmore div:has(> button[aria-label^="photo "]){gap:9px!important}
#kzmore .kzr-mdots{gap:10px!important}
#kzmore .kzr-mdots button{width:9px!important;height:9px!important}

/* 0.1.66: versions — what is not chosen is gone (inline display styles would win over the hidden attribute) */
[data-kzsw][hidden]{display:none!important}
.kz2-why .kzpv-whypanel{text-align:left}

/* 0.1.71: the FAQ plus/minus as one thin drawn line, the same on every question (the two bars rounded to 1 or 2 px) */
.kzfaqp i{display:none!important}
.kzfaqp::before{content:"";display:block;width:14px;height:14px;background:var(--kzaccI,#151C2D);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1.5v11M1.5 7h11' stroke='%23000' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/14px 14px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1.5v11M1.5 7h11' stroke='%23000' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/14px 14px no-repeat}
.kzfaq[open] .kzfaqp::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1.5 7h11' stroke='%23000' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1.5 7h11' stroke='%23000' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E")}
.kz2-morebtn:hover,.kz2-morebtn:focus-visible{box-shadow:rgba(21,28,45,.18) 0 10px 18px}