/* Twój Plan – strony przepisów (przepisy/*.html). Ładowane po ../styles.css */
body.rp{--c:#ffc21a;--ink:#150a14}
.rp main{padding-top:84px}
.rp nav ul a[aria-current=true]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:3px;text-decoration-color:var(--c)}

/* okruszki */
.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-weight:700;text-transform:uppercase;font-size:15px;letter-spacing:.03em;color:var(--cream);margin:0 0 26px}
.crumbs a{text-decoration:none;opacity:.75}.crumbs a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.crumbs span[aria-hidden]{opacity:.4}

/* hero */
.rhero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,80px);align-items:center;padding-block:clamp(30px,6vw,80px) clamp(40px,6vw,90px);position:relative}
.rdiet{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;font:700 17px var(--n);text-transform:uppercase;letter-spacing:.04em;color:var(--c)}
.rdiet i{width:14px;height:14px;border-radius:50%;background:var(--c)}
.rhero h1{font-size:clamp(34px,5.2vw,86px);line-height:.95;hyphens:manual;overflow-wrap:break-word}
.rlead{margin:26px 0 0;font-size:clamp(19px,1.6vw,23px);line-height:1.45;color:var(--cream);max-width:32em}
.facts{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:0;margin:34px 0 0;border-top:2px solid var(--c);border-bottom:2px solid var(--c)}
.facts div{padding:14px 26px 14px 0;margin-right:26px;border-right:1px solid rgba(255,194,26,.25)}
.facts div:last-child{border-right:0;margin-right:0}
.facts dt{font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.05em;color:var(--cream);opacity:.75}
.facts dd{margin:4px 0 0;font:900 clamp(20px,2vw,28px)/1 var(--d);text-transform:uppercase}
.ract{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.rbtn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border-radius:40px;background:var(--c);color:var(--ink);border:2px solid var(--c);font:900 15px var(--d);text-transform:uppercase;text-decoration:none;cursor:pointer}
.rbtn:hover{background:transparent;color:var(--c)}
.rbtn.gh{background:transparent;color:var(--fg);border-color:var(--fg)}
.rbtn.gh:hover{background:var(--fg);color:var(--ink)}
.rplate{margin:0;position:relative;justify-self:center;width:min(100%,560px)}
.rplate .disc{--rim:clamp(10px,1.6vw,20px);aspect-ratio:1;width:100%;background:var(--c)}
.rplate .disc img{animation:rspin 120s linear infinite}
@keyframes rspin{to{transform:rotate(360deg)}}
.rplate figcaption{position:absolute;right:0;bottom:4%;background:var(--c);color:var(--ink);font:900 14px/1.1 var(--d);text-transform:uppercase;padding:12px 16px;border-radius:30px;transform:rotate(-6deg)}
.disc.err{background:var(--c)}

/* dlaczego pasuje */
.rwhy{padding-block:clamp(50px,7vw,90px);background:var(--c);color:var(--ink);box-shadow:0 0 0 100vmax var(--c);clip-path:inset(0 -100vmax)}
.rwhy h2{font-size:clamp(28px,4vw,60px);max-width:14em}
.rwhy ol{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px)}
.rwhy li{border-top:3px solid var(--ink);padding-top:16px;font-size:clamp(17px,1.35vw,20px);line-height:1.45;font-weight:500}

/* składniki + kroki */
.rbody{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,90px);padding-block:clamp(60px,8vw,110px);align-items:start}
.rbody h2{font-size:clamp(30px,3.6vw,54px)}
.ing{position:sticky;top:96px;background:var(--bg2);padding:clamp(20px,2.6vw,34px);border-radius:4px 40px 4px 4px}
.ihead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-bottom:10px}
.serv{display:flex;align-items:center;gap:6px;font-weight:700;text-transform:uppercase;font-size:15px}
.serv button{width:40px;height:40px;border-radius:50%;border:2px solid var(--c);background:none;color:var(--c);font:900 20px/1 var(--d);cursor:pointer;display:grid;place-items:center;padding:0}
.serv button:hover:not(:disabled){background:var(--c);color:var(--ink)}
.serv button:disabled{opacity:.3;cursor:not-allowed}
.serv output{font:900 24px var(--d);min-width:1.4em;text-align:center;color:var(--fg)}
.ing h3{font:700 15px var(--n);text-transform:uppercase;letter-spacing:.05em;color:var(--c);margin:24px 0 8px}
.ilist{list-style:none;margin:0;padding:0}
.ilist li{border-bottom:1px solid rgba(246,236,214,.14)}
.ilist label{display:grid;grid-template-columns:24px 5.4em 1fr;gap:10px;align-items:baseline;padding:9px 0;cursor:pointer;color:var(--cream);font-size:17px;line-height:1.3}
.ilist input{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:2px solid var(--c);border-radius:50%;margin:0;align-self:center;cursor:pointer;display:grid;place-items:center}
.ilist input:checked{background:var(--c)}
.ilist input:checked::after{content:"";width:6px;height:10px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.ilist .q{font-weight:700;color:var(--fg);white-space:nowrap}
.ilist input:checked~span{opacity:.4;text-decoration:line-through}
.itools{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px}
.lnk{background:none;border:0;padding:6px 0;color:var(--fg);font:700 15px var(--n);text-transform:uppercase;letter-spacing:.03em;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.lnk:hover{color:var(--c)}

.shead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px 20px}
.sprog{font-weight:700;text-transform:uppercase;font-size:15px;color:var(--cream)}
.sbar{height:4px;background:rgba(246,236,214,.15);margin:14px 0 10px;border-radius:4px;overflow:hidden}
.sbar i{display:block;height:100%;width:0;background:var(--c);transition:width .3s}
.slist{list-style:none;margin:0;padding:0;counter-reset:s}
.slist li{counter-increment:s;display:grid;grid-template-columns:clamp(54px,5vw,72px) 1fr;gap:clamp(14px,2vw,26px);padding:22px 0;border-bottom:1px solid rgba(246,236,214,.14)}
.slist li::before{content:counter(s);font:900 clamp(34px,3.4vw,52px)/1 var(--d);color:var(--c);transition:opacity .2s}
.slist p{margin:0 0 12px;max-width:36em;color:var(--cream);font-size:clamp(18px,1.4vw,20px);line-height:1.5}
.sact{display:flex;flex-wrap:wrap;gap:10px}
.sdone,.tmr{min-height:40px;padding:8px 16px;border-radius:30px;font:700 14px var(--n);text-transform:uppercase;letter-spacing:.03em;cursor:pointer;background:none;color:var(--fg);border:2px solid rgba(255,194,26,.45)}
.sdone:hover,.tmr:hover{border-color:var(--fg)}
.tmr{border-color:var(--c);color:var(--c)}
.tmr.run{background:var(--c);color:var(--ink);font-variant-numeric:tabular-nums}
.tmr.end{animation:blink .6s 6 alternate}
@keyframes blink{to{background:#fff;color:var(--ink);border-color:#fff}}
.slist li.done::before{opacity:.25}
.slist li.done p{opacity:.45}
.slist li.done .sdone{background:var(--fg);color:var(--ink);border-color:var(--fg)}
.sfin{margin-top:26px;font:900 clamp(20px,2vw,28px)/1.1 var(--d);text-transform:uppercase;color:var(--c)}

/* wartości odżywcze */
.rnut{padding-block:clamp(50px,7vw,90px);border-top:2px solid var(--c)}
.nut{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,80px);align-items:center;margin-top:30px}
.kc{font:900 clamp(70px,10vw,150px)/.85 var(--d);color:var(--c)}
.kc small{display:block;font:700 16px var(--n);letter-spacing:.05em;color:var(--cream);margin-top:12px}
.mac{display:grid;gap:16px;max-width:620px}
.mac div{display:grid;grid-template-columns:7.5em 1fr 4.2em;gap:14px;align-items:center;font-weight:700;text-transform:uppercase;font-size:15px}
.mac b{font:900 18px var(--d);text-align:right;color:var(--fg)}
.mac span[role=img]{display:block;height:14px;border-radius:10px;background:rgba(246,236,214,.12);overflow:hidden}
.mac span[role=img] i{display:block;height:100%;background:var(--c);border-radius:10px}
.rnut .note{margin-top:26px;color:var(--cream)}

/* wskazówki */
.rtips{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(30px,5vw,80px);padding-block:clamp(50px,7vw,90px);border-top:2px solid rgba(255,194,26,.25)}
.rtips h2{font-size:clamp(26px,3vw,44px);margin-bottom:22px}
.rtips h3{font:700 15px var(--n);text-transform:uppercase;letter-spacing:.05em;color:var(--c);margin:0 0 8px}
.rtips ul{margin:0;padding:0;list-style:none}
.rtips li{position:relative;padding:0 0 16px 30px;color:var(--cream);font-size:18px;line-height:1.5;max-width:36em}
.rtips li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:14px;border-radius:50%;background:var(--c)}
.rtips .side p{color:var(--cream);margin-bottom:28px}

/* CTA */
.rcta{padding-block:clamp(60px,9vw,130px);background:var(--bg2);box-shadow:0 0 0 100vmax var(--bg2);clip-path:inset(0 -100vmax)}
.rcta .big{font-size:clamp(34px,6vw,100px);margin:0 0 22px;max-width:12em}
.rcta p{color:var(--cream);font-size:clamp(18px,1.5vw,22px)}
.rcta .btn{margin-top:18px}
.rcta .alt{display:inline-block;margin-top:26px;font-weight:700;text-transform:uppercase;text-underline-offset:5px;color:var(--c)}

/* inne przepisy */
.rmore{padding-block:clamp(60px,8vw,110px)}
.rmore h2{font-size:clamp(36px,6vw,96px);margin-bottom:34px}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr));gap:30px 20px;list-style:none;margin:0;padding:0}
.mgrid a{display:block;text-decoration:none;color:var(--cream)}
.mgrid .disc{display:block;--rim:6px;aspect-ratio:1;width:calc(100% - 18px);margin:9px;background:var(--c);transition:transform .35s}
.mgrid a:hover .disc{transform:rotate(-10deg) scale(1.04)}
.mgrid b{display:block;font:900 15px/1.15 var(--d);text-transform:uppercase;margin-top:14px;color:var(--fg)}
.mgrid small{display:block;margin-top:5px;font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.04em;color:var(--c)}

#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,160%);z-index:80;background:var(--c);color:var(--ink);font:700 16px var(--n);padding:14px 22px;border-radius:30px;max-width:calc(100% - 32px);transition:transform .3s;text-align:center}
#toast.on{transform:translate(-50%,0)}

@media(max-width:900px){
 .rhero{grid-template-columns:1fr}
 .rplate{grid-row:1;width:min(78vw,420px)}
 .rbody{grid-template-columns:1fr}
 .ing{position:static}
 .rwhy ol{grid-template-columns:1fr}
 .rtips{grid-template-columns:1fr}
 .nut{grid-template-columns:1fr}
}
@media(max-width:560px){
 .facts{grid-template-columns:repeat(2,1fr)}
 .facts div{margin-right:0;padding-right:12px;border-right:0;border-bottom:1px solid rgba(255,194,26,.25)}
 .facts div:nth-child(n+3){border-bottom:0}
 .ilist label{grid-template-columns:24px 4.8em 1fr;font-size:16px}
 .mac div{grid-template-columns:6.4em 1fr 3.8em;font-size:13px}
 .mgrid{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){.rplate .disc img{animation:none}}

@media print{
 body.rp{background:#fff!important;color:#000!important}
 .rp nav,.rp #toast,.rp .ract,.rp .itools,.rp .sact,.rp .sbar,.rp .sprog,.rp .rcta,.rp .rmore,.rp footer,.rp .crumbs{display:none!important}
 .rp main{padding-top:0}
 .rhero{grid-template-columns:1fr 180px;padding:0 0 20px}
 .rplate .disc{box-shadow:none}.rplate .disc img{animation:none}.rplate figcaption{display:none}
 .rp h1,.rp h2,.rp h3,.rp p,.rp li,.rp dd,.rp dt,.rp .q,.rp label,.rp .kc,.rp .mac b,.rdiet,.rlead{color:#000!important}
 .rwhy{background:none;box-shadow:none;clip-path:none;padding:10px 0}
 .rwhy li{border-color:#000}
 .ing{background:none;position:static;padding:0}
 .rbody{grid-template-columns:1fr 1.4fr;padding-block:20px}
 .slist li{break-inside:avoid;padding:10px 0}
 .slist li::before{color:#000}
 .mac span[role=img]{background:#ddd}.mac span[role=img] i{background:#000}
 .ilist input{border-color:#000}
}