/* --- doypack: stránka návodu --- */
.dp-hero{position:relative;overflow:hidden;padding:160px 0 80px;background:radial-gradient(ellipse at 80% 60%,#FCEBB0 0,transparent 60%),var(--cream)}
.dp-hero>.wrap,.dp-steps>.wrap,.dp-adv>.wrap,.dp-prod>.wrap{width:100%;max-width:none;padding-left:clamp(24px,8vw,170px);padding-right:max(24px,52px)}
.dp-hin{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.dp-txt{display:grid;gap:22px;justify-items:start;position:relative;z-index:2}
.dp-txt h1{font-size:clamp(56px,8.4vw,156px);text-transform:uppercase;line-height:.88}
.dp-txt h1 em{font-style:normal;color:var(--amber)}
.dp-txt .lead{margin:0;max-width:580px;color:var(--ink-2)}
.dp-packs{position:relative;height:min(62vh,560px)}
.dp-packs img{position:absolute;left:50%;bottom:4%;height:min(42vh,380px);width:auto;filter:drop-shadow(0 30px 30px rgba(43,24,16,.25));transform:translateX(calc(-50% + (var(--i) - 1.5) * 19%)) rotate(calc((var(--i) - 1.5) * 8deg));transform-origin:50% 110%;animation:dpIn 1.2s calc(var(--i) * 110ms) var(--ease) both;transition:transform .6s var(--ease)}
.dp-packs:hover img{transform:translateX(calc(-50% + (var(--i) - 1.5) * 25%)) rotate(calc((var(--i) - 1.5) * 12deg))}
@keyframes dpIn{from{opacity:0;translate:0 90px}}
.dp-steps{padding:110px 0 120px}
.dp-sh{display:grid;gap:18px;margin-bottom:40px}
.dp-sg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:dp}
.dp-st{position:relative;background:var(--sand);border-radius:30px;padding:24px 22px 26px;display:grid;gap:14px;align-content:start;transition:background .5s,transform .6s var(--ease),box-shadow .5s}
.dp-st img{width:100%;aspect-ratio:350/365;object-fit:contain;mix-blend-mode:multiply;transition:transform .8s var(--ease)}
.dp-st b{font-size:clamp(19px,1.5vw,24px);line-height:1.2;letter-spacing:-.02em}
.dp-n{position:absolute;left:18px;top:18px;width:46px;height:46px;border-radius:50%;background:var(--cream);display:grid;place-items:center;font-weight:800;font-size:20px;z-index:1;transition:background .4s}
.dp-st.on{background:var(--yellow);transform:translateY(-8px);box-shadow:0 26px 50px rgba(43,24,16,.14)}
.dp-st.on .dp-n{background:var(--ink);color:var(--yellow)}
.dp-st.on img{transform:scale(1.04) rotate(-1.5deg)}
.dp-st:not(:last-child)::after{content:"";position:absolute;right:-13px;top:50%;width:10px;height:10px;border-top:2.5px solid var(--amber);border-right:2.5px solid var(--amber);transform:translateY(-50%) rotate(45deg);z-index:2}
.dp-adv{padding:110px 0;background:var(--ink);color:var(--cream)}
.dp-adv h2{color:var(--cream)}
.dp-ag{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dp-a{background:rgba(255,251,246,.06);border-radius:30px;padding:32px 30px;display:grid;gap:14px;justify-items:start;transition:background .4s,transform .6s var(--ease)}
.dp-a:hover{background:rgba(244,196,48,.14);transform:translateY(-6px)}
.dp-ai{width:160px;height:160px;display:grid;place-items:center;transition:transform .6s var(--ease)}
.dp-a:hover .dp-ai{transform:rotate(-6deg) scale(1.05)}
.dp-ai img{width:100%;height:100%;object-fit:contain}
.dp-a h3{font-size:clamp(24px,2.2vw,34px);text-transform:uppercase;color:var(--cream)}
.dp-a p{margin:0;font-size:17px;line-height:1.55;color:rgba(255,251,246,.78)}
.dp-prod{padding:110px 0 140px}
.dp-pg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dp-pc{background:var(--bg);border-radius:30px;padding:24px 22px;display:grid;gap:8px;transition:transform .55s var(--ease)}
.dp-pc:hover{transform:translateY(-8px) rotate(-1deg)}
.dp-pc .im{height:240px;display:grid;place-items:center}
.dp-pc .im img{height:220px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 20px 20px rgba(43,24,16,.22));transition:transform .6s var(--ease)}
.dp-pc:hover .im img{transform:scale(1.05)}
.dp-pc small{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.dp-pc b{font-size:24px;text-transform:uppercase;letter-spacing:-.02em}
.dp-pc span{font-weight:700;font-size:15px}
.dp-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:40px}
@media(max-width:1000px){.dp-packs img{transform:translateX(calc(-50% + (var(--i) - 1.5) * 24%)) rotate(calc((var(--i) - 1.5) * 8deg))}.dp-hin{grid-template-columns:1fr}.dp-packs{height:46vh}.dp-sg,.dp-pg{grid-template-columns:repeat(2,minmax(0,1fr))}.dp-ag{grid-template-columns:1fr}.dp-st:nth-child(2)::after{display:none}}
@media(max-width:600px){.dp-sg,.dp-pg{grid-template-columns:1fr}.dp-st::after{display:none}.dp-packs img{height:34vh}.dp-ai{width:120px;height:120px}}

/* --- doypack: sekce na detailu produktu --- */
.dp-mini{padding:90px 0}
.dp-mini>.wrap{width:100%;max-width:none;padding-left:clamp(24px,8vw,170px);padding-right:max(24px,52px)}
.dp-mbox{background:var(--sand);border-radius:36px;padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:.8fr 2fr;gap:40px;align-items:center}
.dp-mbox h2{font-size:clamp(40px,4.6vw,80px);text-transform:uppercase;margin:12px 0 14px}
.dp-mbox p{margin:0 0 22px;color:var(--ink-2);font-size:18px}
.dp-mrow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dp-mrow li{background:var(--cream);border-radius:22px;padding:14px 14px 16px;display:grid;gap:8px;position:relative;transition:background .4s,transform .5s var(--ease)}
.dp-mrow li.on{background:var(--yellow);transform:translateY(-6px)}
.dp-mrow img{width:100%;aspect-ratio:350/365;object-fit:contain;mix-blend-mode:multiply}
.dp-mrow b{font-size:15px;line-height:1.25}
.dp-mrow .dp-n{width:34px;height:34px;font-size:15px;left:12px;top:12px}
.dp-mrow li.on .dp-n{background:var(--ink);color:var(--yellow)}
@media(max-width:1000px){.dp-mbox{grid-template-columns:1fr}}
@media(max-width:600px){.dp-mrow{grid-template-columns:1fr 1fr}}

/* ===== Doypack – ilustrovaná animace používání ===== */
.dp-anim{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.dp-stage{position:relative;background:var(--sand);border-radius:36px;padding:clamp(16px,2.4vw,36px);overflow:hidden}
.dp-stage::before{content:"";position:absolute;width:62%;aspect-ratio:1;border-radius:50%;background:var(--yellow);opacity:.28;left:50%;top:46%;transform:translate(-50%,-50%)}
.dp-svg{position:relative;aspect-ratio:600/520}
.dp-svg svg{display:block;width:100%;height:100%;overflow:visible}
.dp-play{position:absolute;right:18px;top:18px;border:0;border-radius:999px;background:var(--cream);color:var(--ink);font-family:inherit;font-weight:600;font-size:13px;line-height:1;padding:10px 14px;transition:background .3s,color .3s;cursor:pointer;box-shadow:0 6px 16px rgba(43,24,16,.08)}
.dp-play:hover{background:var(--ink);color:var(--cream)}
.dp-play:focus-visible,.dp-list li:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.dp-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.dp-list li{position:relative;display:grid;grid-template-columns:auto 84px 1fr;gap:18px;align-items:center;background:var(--sand);border-radius:26px;padding:16px 22px 18px 16px;cursor:pointer;overflow:hidden;transition:background .45s,transform .5s var(--ease),box-shadow .45s}
.dp-list li .dp-n{position:static;flex:none;transition:background .4s,color .4s}
.dp-list li img{width:84px;height:84px;object-fit:contain;mix-blend-mode:multiply;transition:transform .6s var(--ease)}
.dp-list li b{display:block;font-size:clamp(18px,1.4vw,22px);line-height:1.2;letter-spacing:-.02em}
.dp-list li span:not(.dp-n){display:block;margin-top:4px;color:var(--ink-2);font-size:15px;line-height:1.4}
.dp-bar{position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--amber);transform-origin:0 50%;transform:scaleX(var(--p,0));opacity:.85}
.dp-list li.on{background:var(--yellow);transform:translateX(8px);box-shadow:0 18px 40px rgba(43,24,16,.12)}
.dp-list li.on .dp-n{background:var(--ink);color:var(--yellow)}
.dp-list li.on img{transform:scale(1.08) rotate(-2deg)}
.dp-list li.on .dp-bar{background:var(--ink)}
/* malá varianta na detailu produktu */
.dp-mbox[data-dp-wrap]{grid-template-columns:1fr 1.1fr}
.dp-mbox .dp-stage{background:var(--cream)}
.dp-list-s{margin:0 0 26px}
.dp-list-s li{grid-template-columns:auto 1fr;padding:10px 16px 12px 10px;border-radius:18px;background:var(--cream);gap:12px}
.dp-list-s li .dp-n{width:34px;height:34px;font-size:15px;background:var(--sand)}
.dp-list-s li b{font-size:16px}
.dp-list-s li.on{transform:translateX(6px)}
@media(max-width:1000px){.dp-anim,.dp-mbox[data-dp-wrap]{grid-template-columns:1fr}.dp-mbox[data-dp-wrap] .dp-stage{order:-1}}
@media(max-width:600px){.dp-list li{grid-template-columns:auto 60px 1fr;gap:12px;padding:12px 14px 14px 12px}.dp-list li img{width:60px;height:60px}.dp-list li span:not(.dp-n){font-size:14px}.dp-list-s li{grid-template-columns:auto 1fr}.dp-stage{border-radius:26px}.dp-play{right:12px;top:12px;font-size:12px;padding:8px 11px}.dp-list li.on{transform:none}}
@media(prefers-reduced-motion:reduce){.dp-list li,.dp-list li img{transition:none}}